camox 0.44.0 → 0.45.0

package/dist/core/lib/artifactColors.js

@@ -0,0 +1,123 @@
+//#region src/core/lib/artifactColors.ts
+const unit = (part, percentOf) => {
+	if (part === "none") return 0;
+	const value = parseFloat(part);
+	return part.endsWith("%") ? value / 100 * percentOf : value;
+};
+const hue = (part) => {
+	if (part === "none") return 0;
+	const value = parseFloat(part);
+	if (part.endsWith("grad")) return value * .9;
+	if (part.endsWith("rad")) return value * 180 / Math.PI;
+	if (part.endsWith("turn")) return value * 360;
+	return value;
+};
+const encode = (linear) => {
+	const x = Math.min(1, Math.max(0, linear));
+	return x <= .0031308 ? 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - .055;
+};
+const fromOklab = (L, a, b) => {
+	const l = Math.pow(L + .3963377774 * a + .2158037573 * b, 3);
+	const m = Math.pow(L - .1055613458 * a - .0638541728 * b, 3);
+	const s = Math.pow(L - .0894841775 * a - 1.291485548 * b, 3);
+	return [
+		encode(4.0767416621 * l - 3.3077115913 * m + .2309699292 * s),
+		encode(-1.2684380046 * l + 2.6097574011 * m - .3413193965 * s),
+		encode(-.0041960863 * l - .7034186147 * m + 1.707614701 * s)
+	];
+};
+const fromHsl = (h, s, l) => {
+	const k = (n) => (n + h / 30) % 12;
+	const a = s * Math.min(l, 1 - l);
+	const f = (n) => l - a * Math.max(-1, Math.min(k(n) - 3, 9 - k(n), 1));
+	return [
+		f(0),
+		f(8),
+		f(4)
+	];
+};
+/** Hex, `rgb()`, `hsl()`, `oklab()` and `oklch()` colors, as channels from 0 to 1. */
+function parse(value) {
+	const text = value.trim().toLowerCase();
+	if (text.startsWith("#")) {
+		let hex = text.slice(1);
+		if (!/^[0-9a-f]+$/.test(hex) || ![
+			3,
+			4,
+			6,
+			8
+		].includes(hex.length)) return null;
+		if (hex.length < 6) hex = hex.replace(/./g, "$&$&");
+		const [r, g, b] = [
+			0,
+			2,
+			4
+		].map((start) => parseInt(hex.slice(start, start + 2), 16) / 255);
+		return [
+			r,
+			g,
+			b
+		];
+	}
+	const open = text.indexOf("(");
+	if (open < 0 || !text.endsWith(")")) return null;
+	const parts = text.slice(open + 1, -1).split(/[^0-9a-z.%+-]+/).filter(Boolean);
+	if (parts.length < 3) return null;
+	if (parts.slice(0, 3).some((part) => part !== "none" && !Number.isFinite(parseFloat(part)))) return null;
+	const [x, y, z] = parts;
+	switch (text.slice(0, open)) {
+		case "rgb":
+		case "rgba": return [
+			unit(x, 255) / 255,
+			unit(y, 255) / 255,
+			unit(z, 255) / 255
+		];
+		case "hsl":
+		case "hsla": return fromHsl(hue(x), parseFloat(y) / 100 || 0, parseFloat(z) / 100 || 0);
+		case "oklab": return fromOklab(unit(x, 1), unit(y, .4), unit(z, .4));
+		case "oklch": {
+			const chroma = unit(y, .4);
+			const angle = hue(z) * Math.PI / 180;
+			return fromOklab(unit(x, 1), chroma * Math.cos(angle), chroma * Math.sin(angle));
+		}
+		default: return null;
+	}
+}
+/**
+* The sRGB colors of a page's theme tokens, so artifacts get them ready to use and never parse
+* CSS themselves. Common color syntaxes are converted directly; any other color the page's
+* browser understands (named colors, `lab()`, `color-mix()`…) goes through a 1×1 canvas of the
+* page's own document. Tokens that aren't colors are left out.
+*/
+function artifactThemeColors(tokens, page) {
+	let canvas;
+	const paint = (value) => {
+		if (!page.CSS?.supports("color", value)) return null;
+		canvas ??= page.document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+		if (!canvas) return null;
+		canvas.clearRect(0, 0, 1, 1);
+		canvas.fillStyle = value;
+		canvas.fillRect(0, 0, 1, 1);
+		const [r, g, b] = canvas.getImageData(0, 0, 1, 1).data;
+		return [
+			r / 255,
+			g / 255,
+			b / 255
+		];
+	};
+	const colors = {};
+	for (const [name, value] of Object.entries(tokens)) {
+		const channels = parse(value) ?? paint(value);
+		if (!channels) continue;
+		const [r, g, b] = channels.map((channel) => Math.round(Math.min(1, Math.max(0, channel)) * 255));
+		colors[name] = {
+			r,
+			g,
+			b
+		};
+	}
+	return colors;
+}
+
+//#endregion
+export { artifactThemeColors };

package/dist/core/lib/artifactData.d.ts

@@ -0,0 +1 @@
+import { TSchema } from "@sinclair/typebox";

package/dist/core/lib/artifactData.js

@@ -0,0 +1,131 @@
+//#region src/core/lib/artifactData.ts
+const DATA_SOURCES = Symbol("camox.artifactDataSources");
+/** Content fields that can't be Artifact Data. */
+const unsharedFieldTypes = /* @__PURE__ */ new Set([
+	"Artifact",
+	"Repeater",
+	"Reference",
+	"ReferenceList"
+]);
+const text = { type: "string" };
+function objectSchema(properties, title) {
+	return {
+		type: "object",
+		...title === void 0 ? {} : { title },
+		properties,
+		required: Object.keys(properties),
+		additionalProperties: false
+	};
+}
+const assetProperties = {
+	Image: {
+		url: text,
+		alt: text
+	},
+	File: {
+		url: text,
+		filename: text
+	}
+};
+/** The JSON Schema of one normalized Artifact Data value. */
+function valueSchema(schema) {
+	const title = schema.title;
+	const titled = title === void 0 ? {} : { title };
+	switch (schema.fieldType) {
+		case "Link": return objectSchema({
+			text,
+			href: text,
+			newTab: { type: "boolean" }
+		}, title);
+		case "Image":
+		case "File": return objectSchema(assetProperties[schema.fieldType], title);
+		case "ImageList":
+		case "FileList": {
+			const single = schema.fieldType === "ImageList" ? "Image" : "File";
+			return {
+				type: "array",
+				...titled,
+				items: objectSchema(assetProperties[single])
+			};
+		}
+		case "Boolean": return {
+			type: "boolean",
+			...titled
+		};
+		case "Enum": return {
+			type: "string",
+			...titled,
+			enum: schema.enum
+		};
+		default: return {
+			type: "string",
+			...titled
+		};
+	}
+}
+/**
+* Resolves each artifact's `data` against its siblings: the content fields and settings of a
+* block, or of a repeatable item. Adds the Artifact Data's JSON Schema to the artifact's
+* definition, so `blocks describe` shows agents the exact shape of `camox.data`.
+*/
+function attachArtifactData(content, settings, owner) {
+	for (const [key, field] of Object.entries(content)) {
+		if (field.fieldType !== "Artifact") continue;
+		const names = field.data ?? [];
+		if (names.length === 0) continue;
+		const sources = {};
+		for (const name of names) {
+			const source = Object.hasOwn(content, name) ? {
+				scope: "content",
+				schema: content[name]
+			} : settings && Object.hasOwn(settings, name) ? {
+				scope: "settings",
+				schema: settings[name]
+			} : null;
+			if (!source) throw new Error(`${owner} artifact "${key}": data "${name}" is not a field or setting`);
+			if (unsharedFieldTypes.has(source.schema.fieldType)) throw new Error(`${owner} artifact "${key}": ${String(source.schema.fieldType)} "${name}" can't be Artifact Data`);
+			sources[name] = source;
+		}
+		field.dataSchema = objectSchema(Object.fromEntries(Object.entries(sources).map(([name, s]) => [name, valueSchema(s.schema)])));
+		Reflect.set(field, DATA_SOURCES, sources);
+	}
+}
+function normalizeAsset(fieldType, file) {
+	if (!file) return null;
+	return fieldType === "Image" || fieldType === "ImageList" ? {
+		url: file.url,
+		alt: file.alt ?? ""
+	} : {
+		url: file.url,
+		filename: file.filename ?? ""
+	};
+}
+function normalizeValue(schema, value, resolve) {
+	switch (schema.fieldType) {
+		case "Link": {
+			const link = value ?? {};
+			return {
+				text: typeof link.text === "string" ? link.text : "",
+				href: resolve.linkHref(link),
+				newTab: link.newTab === true
+			};
+		}
+		case "Image":
+		case "File": return normalizeAsset(schema.fieldType, resolve.asset(value) ?? schema.default);
+		case "ImageList":
+		case "FileList": return (Array.isArray(value) ? value : []).map((item) => normalizeAsset(schema.fieldType, resolve.asset(item))).filter(Boolean);
+		default: return value ?? schema.default;
+	}
+}
+/**
+* The Artifact Data of an artifact field, from its owner's content and settings: links resolved
+* to hrefs and assets to URLs. Artifacts without `data` receive an empty object.
+*/
+function artifactData(field, owner, resolve) {
+	const sources = field && Reflect.get(field, DATA_SOURCES);
+	if (!sources) return {};
+	return Object.fromEntries(Object.entries(sources).map(([name, { scope, schema }]) => [name, normalizeValue(schema, owner[scope][name], resolve)]));
+}
+
+//#endregion
+export { artifactData, attachArtifactData };

package/dist/core/lib/artifactHost.js

@@ -0,0 +1,205 @@
+import { artifactThemeColors } from "./artifactColors.js";
+import { observeArtifactTheme, readArtifactTheme } from "./artifactTheme.js";
+
+//#region src/core/lib/artifactHost.ts
+function isRuntimeMessage(data) {
+	return typeof data === "object" && data !== null && typeof data.camox === "string";
+}
+function sameStudio(a, b) {
+	if (!a || !b) return a === b;
+	return a.editing === b.editing && a.canvas === b.canvas;
+}
+/**
+* Where an artifact's `camox.navigate(href)` leads: an internal path for the client router, an
+* external URL for a new tab, or nowhere for anything but web URLs (such as `javascript:`).
+*/
+function navigationTarget(href, page) {
+	if (href.startsWith("/") && !href.startsWith("//")) return { internal: href };
+	let url;
+	try {
+		url = new URL(href, page.location.href);
+	} catch {
+		return null;
+	}
+	if (url.protocol !== "http:" && url.protocol !== "https:") return null;
+	if (url.origin === page.location.origin) return { internal: `${url.pathname}${url.search}${url.hash}` };
+	return { external: url.href };
+}
+/**
+* Follows an artifact's navigation, only right after a real click: a click inside the frame
+* gives the page transient user activation too, so an artifact can't redirect visitors itself.
+*/
+function navigateFromArtifact(href, page, options) {
+	if (page.navigator.userActivation?.isActive !== true) return;
+	const target = navigationTarget(href, page);
+	if (!target) return;
+	if ("internal" in target) {
+		options.navigate?.(target.internal);
+		return;
+	}
+	page.open(target.external, "_blank", "noopener,noreferrer");
+}
+const clamp = (value) => Math.min(1, Math.max(0, value));
+/**
+* Where a frame sits in its page's viewport: `progress` goes from 0 when its top enters at the
+* bottom of the viewport to 1 when its bottom leaves at the top; `visibleRatio` is the share of
+* the frame inside the viewport.
+*/
+function viewportOf(frame, viewportHeight) {
+	const { top, bottom, height } = frame.getBoundingClientRect();
+	const travel = viewportHeight + height;
+	const visible = Math.max(0, Math.min(bottom, viewportHeight) - Math.max(top, 0));
+	return {
+		progress: travel > 0 ? clamp((viewportHeight - top) / travel) : 0,
+		visibleRatio: height > 0 ? clamp(visible / height) : 0
+	};
+}
+/** How far beyond the viewport a frame counts as near it, so it starts measuring ahead of time. */
+const NEAR_VIEWPORT = "25% 0px";
+/**
+* Follows the frame's place in the page's viewport, measuring at most once per animation frame
+* after a scroll or resize anywhere on the page, and reporting only changes. An
+* IntersectionObserver limits this to while the frame is near the viewport: far frames aren't
+* measured on scroll, and are measured once more as they leave, so they report where they went.
+*/
+function trackViewport(frame, page, report) {
+	let pending = 0;
+	let last = null;
+	const measure = () => {
+		pending = 0;
+		const next = viewportOf(frame, page.innerHeight);
+		if (last && last.progress === next.progress && last.visibleRatio === next.visibleRatio) return;
+		last = next;
+		report(next);
+	};
+	const schedule = () => {
+		if (pending) return;
+		pending = page.requestAnimationFrame(measure);
+	};
+	const listener = {
+		capture: true,
+		passive: true
+	};
+	let following = false;
+	const follow = (near) => {
+		if (near === following) return;
+		following = near;
+		if (near) {
+			page.addEventListener("scroll", schedule, listener);
+			page.addEventListener("resize", schedule, listener);
+			return;
+		}
+		page.removeEventListener("scroll", schedule, listener);
+		page.removeEventListener("resize", schedule, listener);
+	};
+	const intersection = "IntersectionObserver" in page ? new page.IntersectionObserver((entries) => {
+		const entry = entries.at(-1);
+		if (!entry) return;
+		follow(entry.isIntersecting);
+		schedule();
+	}, { rootMargin: NEAR_VIEWPORT }) : null;
+	if (intersection) intersection.observe(frame);
+	else follow(true);
+	schedule();
+	return {
+		schedule,
+		stop() {
+			intersection?.disconnect();
+			follow(false);
+			if (pending) page.cancelAnimationFrame(pending);
+		}
+	};
+}
+/**
+* Connects an artifact frame to the `camox` runtime inside it, and owns the frame's message
+* channel (see `artifactRuntime.ts` for the protocol).
+*
+* The block's code may run in another realm than the frame's parent (the studio renders its
+* preview that way), so this only goes through the frame element's own document: never the
+* global `window`, and never `event.source`, whose identity differs across realms.
+*/
+function connectArtifactHost(frame, initialState, options = {}) {
+	const page = frame.ownerDocument.defaultView;
+	if (!page) return {
+		update() {},
+		disconnect() {}
+	};
+	const channel = crypto.randomUUID();
+	let state = initialState;
+	let ready = false;
+	const post = (type, payload = {}) => {
+		frame.contentWindow?.postMessage({
+			...payload,
+			camox: type,
+			channel
+		}, "*");
+	};
+	const sendStudio = () => post("studio", { studio: state.studio });
+	const sendData = () => post("data", { data: state.data ?? {} });
+	let sentTheme = null;
+	const sendTheme = (force) => {
+		const tokens = readArtifactTheme(frame);
+		const serialized = JSON.stringify(tokens);
+		if (!force && serialized === sentTheme) return;
+		sentTheme = serialized;
+		post("theme", {
+			tokens,
+			colors: artifactThemeColors(tokens, page)
+		});
+	};
+	let viewport = null;
+	const observeViewport = (observe) => {
+		viewport?.stop();
+		viewport = observe ? trackViewport(frame, page, (next) => post("viewport", next)) : null;
+	};
+	const onMessage = (event) => {
+		const message = event.data;
+		if (!isRuntimeMessage(message)) return;
+		if (message.camox === "hello") {
+			post("connect");
+			return;
+		}
+		if (message.channel !== channel) return;
+		if (message.camox === "ready") {
+			ready = true;
+			observeViewport(false);
+			sendStudio();
+			sendData();
+			sendTheme(true);
+			if (options.size === "content") post("measure");
+			return;
+		}
+		if (message.camox === "height") {
+			const { height } = message;
+			if (options.size !== "content" || typeof height !== "number") return;
+			if (!Number.isFinite(height) || height < 0) return;
+			options.onHeight?.(height);
+			viewport?.schedule();
+			return;
+		}
+		if (message.camox === "observe-viewport") observeViewport(message.observe === true);
+		if (message.camox === "navigate" && typeof message.href === "string") navigateFromArtifact(message.href, page, options);
+	};
+	page.addEventListener("message", onMessage);
+	const stopObservingTheme = observeArtifactTheme(frame, () => {
+		if (ready) sendTheme(false);
+	});
+	post("connect");
+	return {
+		update(next) {
+			const previous = state;
+			state = next;
+			if (!ready) return;
+			if (!sameStudio(previous.studio, next.studio)) sendStudio();
+			if (JSON.stringify(previous.data) !== JSON.stringify(next.data)) sendData();
+		},
+		disconnect() {
+			page.removeEventListener("message", onMessage);
+			observeViewport(false);
+			stopObservingTheme();
+		}
+	};
+}
+
+//#endregion
+export { connectArtifactHost };

package/dist/core/lib/artifactRuntime.js

@@ -0,0 +1,36 @@
+//#region src/core/lib/artifactRuntime.ts
+/**
+* The `camox` runtime, injected at the top of every artifact's `srcDoc` so `window.camox` always
+* exists before the artifact source runs.
+*
+* Protocol (every message is `{ camox: <type>, channel?, ...payload }`, posted with `"*"`):
+* - runtime → page: `hello` when the runtime starts, so the page's hosts (re)connect their frames.
+* - host → frame: `connect` with the host's private `channel`. The runtime adopts it and answers.
+* - runtime → page: `ready` on that channel. Only the host that owns the channel listens to it,
+*   so hosts never need `event.source`, which can't be compared across realms.
+* - host → frame: state messages on the channel, such as `studio`, and `theme` with the page's
+*   tokens at the frame's position and their sRGB `colors`, sent once ready and again when they
+*   change. The host converts the colors, so the runtime that every frame inlines stays small.
+* - host → frame: `data` with the latest Artifact Data. The initial data is inlined in the
+*   `srcDoc` as a `<script type="application/json" data-camox-data>` after the runtime and the
+*   font links, so it is read lazily, on first access.
+* - runtime → page: `observe-viewport` with `observe`, when the artifact's first `onViewport`
+*   subscription starts or its last one ends. While observed, the host sends `viewport` with
+*   `progress` and `visibleRatio` whenever they change.
+* - host → frame: `measure`, for frames sized to their content. The runtime then reports the
+*   document's `height` whenever it changes.
+* - runtime → page: `navigate` with an `href`. The host acts only with transient user activation.
+*
+* The theme part applies the tokens to the artifact's `:root` and keeps the body hidden until the
+* first theme arrives, so the artifact never paints in the wrong colors, or until a short fallback
+* timeout, so a page that never sends one can't hide it forever.
+*
+* Kept as plain JavaScript in a string: it runs in the artifact's document, not in the SDK's
+* bundle, so it can't share code or build helpers with it. The SDK's build minifies it (see
+* `plugins/minifyArtifactRuntime.ts`), so it must stay one template literal without
+* interpolations or backslashes.
+*/
+const ARTIFACT_RUNTIME = "(()=>{\"use strict\";let e=window.parent,t=null,n=null,r,i,a=new Set,o=()=>{if(i!==void 0)return r;let e=document.querySelector(`script[data-camox-data]`);try{r=e?JSON.parse(e.textContent):{}}catch{r={}}return i=JSON.stringify(r),r},s=(()=>{let e=new Set,t=[],n=Object.freeze({tokens:Object.freeze({}),colors:Object.freeze({})}),r=document.createElement(`style`);r.textContent=`body { visibility: hidden !important; }`,document.head.append(r);let i=()=>r.remove();setTimeout(i,300);let a=e=>Number.isFinite(e)?Math.min(255,Math.max(0,Math.round(e))):0;return{get current(){return n},receive(r){let o={},s={},c=r.colors||{};for(let[e,t]of Object.entries(r.tokens||{})){if(!e.startsWith(`--`)||typeof t!=`string`)continue;o[e]=t;let n=Object.hasOwn(c,e)?c[e]:null;n&&typeof n==`object`&&(s[e]=Object.freeze({r:a(n.r),g:a(n.g),b:a(n.b)}))}let l=document.documentElement.style;for(let e of t)Object.hasOwn(o,e)||l.removeProperty(e);for(let[e,t]of Object.entries(o))l.setProperty(e,t);t=Object.keys(o),i(),n=Object.freeze({tokens:Object.freeze(o),colors:Object.freeze(s)});for(let t of[...e])t(n)},subscribe(t){return e.add(t),()=>{e.delete(t)}}}})(),c=new Set,l=null,u=null,d=null,f=()=>{let e=Math.ceil(document.documentElement.getBoundingClientRect().height);e!==d&&(d=e,p(`height`,{height:d}))},p=(n,r)=>{t&&e.postMessage({...r,camox:n,channel:t},`*`)},m=()=>p(`observe-viewport`,{observe:c.size>0}),h={studio(e){let t=e.studio;n=t?Object.freeze({editing:!!t.editing,canvas:!!t.canvas}):null},data(e){o();let t=JSON.stringify(e.data??{});if(t!==i){r=JSON.parse(t),i=t;for(let e of[...a])e(r)}},theme:s.receive,measure(){d=null,u||(u=new ResizeObserver(f),u.observe(document.documentElement)),f()},viewport(e){let{progress:t,visibleRatio:n}=e;if(typeof t==`number`&&typeof n==`number`){l=Object.freeze({progress:t,visibleRatio:n}),document.documentElement.style.setProperty(`--camox-progress`,String(t));for(let e of c)e(l)}}};window.addEventListener(`message`,e=>{let n=e.data;if(n&&typeof n.camox==`string`){if(n.camox===`connect`){if(typeof n.channel!=`string`||n.channel===t)return;t=n.channel,p(`ready`),c.size>0&&m()}else t&&n.channel===t&&Object.hasOwn(h,n.camox)&&h[n.camox](n)}});let g=Object.freeze({get studio(){return n},get data(){return o()},onData(e){return a.add(e),()=>{a.delete(e)}},get theme(){return s.current},onTheme:s.subscribe,navigate(e){p(`navigate`,{href:String(e)})},onViewport(e){if(typeof e!=`function`)throw TypeError(`camox.onViewport needs a callback`);let t=t=>e(t);return c.add(t),c.size===1?m():l&&queueMicrotask(()=>c.has(t)&&e(l)),()=>{c.delete(t)&&c.size===0&&m()}}});Object.defineProperty(window,\"camox\",{value:g,enumerable:!0}),e!==window&&e.postMessage({camox:`hello`},`*`)})();";
+
+//#endregion
+export { ARTIFACT_RUNTIME };

package/dist/core/lib/artifactTheme.js

@@ -0,0 +1,57 @@
+//#region src/core/lib/artifactTheme.ts
+function addCustomProperties(style, names) {
+	if (!style) return;
+	for (let index = 0; index < style.length; index++) {
+		const name = style.item(index);
+		if (name.startsWith("--")) names.add(name);
+	}
+}
+function addRuleCustomProperties(container, names) {
+	for (const rule of Array.from(container.cssRules)) {
+		addCustomProperties(rule.style, names);
+		if (rule.cssRules) addRuleCustomProperties(rule, names);
+	}
+}
+/** The custom properties declared in the page's stylesheets and on the frame or its ancestors. */
+function declaredCustomProperties(frame) {
+	const names = /* @__PURE__ */ new Set();
+	for (const sheet of Array.from(frame.ownerDocument.styleSheets)) try {
+		addRuleCustomProperties(sheet, names);
+	} catch {}
+	for (let element = frame; element; element = element.parentElement) addCustomProperties(element.style, names);
+	return names;
+}
+/**
+* The theme tokens as resolved at the frame's position, so a `.dark` section, a `data-theme`
+* attribute or a media query on the page all apply.
+*/
+function readArtifactTheme(frame) {
+	const page = frame.ownerDocument.defaultView;
+	if (!page) return {};
+	const style = page.getComputedStyle(frame);
+	const tokens = {};
+	for (const name of [...declaredCustomProperties(frame)].sort()) {
+		const value = style.getPropertyValue(name).trim();
+		if (value) tokens[name] = value;
+	}
+	return tokens;
+}
+function isThemeAttribute(name) {
+	return name === "class" || name === "style" || !!name?.startsWith("data-");
+}
+/**
+* Calls `onChange` when the `class`, `style` or `data-*` attributes of the frame or one of its
+* ancestors change, as these may change the tokens at its position. Returns a disconnect.
+*/
+function observeArtifactTheme(frame, onChange) {
+	const page = frame.ownerDocument.defaultView;
+	if (!page) return () => {};
+	const observer = new page.MutationObserver((records) => {
+		if (records.some((record) => isThemeAttribute(record.attributeName))) onChange();
+	});
+	for (let element = frame; element; element = element.parentElement) observer.observe(element, { attributes: true });
+	return () => observer.disconnect();
+}
+
+//#endregion
+export { observeArtifactTheme, readArtifactTheme };