camox 0.69.0 → 0.71.0

package/dist/core/createBlock.js

@@ -7,7 +7,7 @@ import { useProjectUuid } from "../lib/auth.js";
 import { isItemMarker, queryResultIds, resolveAssetValue, useNormalizedData } from "../lib/normalized-data.js";
 import { useLinkPages } from "../lib/link-pages.js";
 import { useBlockEditingRuntime } from "./editing/BlockEditingRuntime.js";
-import { ArtifactStudioContext, ArtifactsRunContext, useArtifactHost, useInitialArtifactData } from "./hooks/useArtifactHost.js";
+import { ArtifactCaptureContext, ArtifactStudioContext, ArtifactsRunContext, useArtifactHost, useInitialArtifactData } from "./hooks/useArtifactHost.js";
 import { IconSvg } from "./lib/icons.js";
 import { renderImagePlaceholder } from "./lib/imagePlaceholder.js";
 import { buildImageSrcSet, getDefaultImageSizes, getDefaultImageWidth, transformImageUrl } from "./lib/imageTransform.js";
@@ -17,6 +17,7 @@ import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { isQueryBacked } from "@camox/api-contract";
 import { Type } from "@sinclair/typebox";
+import { ARTIFACT_FIELD_ATTRIBUTE, ARTIFACT_ITEM_ATTRIBUTE } from "@camox/api-contract/drafts";
 import { generateKeyBetween } from "fractional-indexing";
 import { jsx } from "react/jsx-runtime";
 
@@ -184,12 +185,18 @@ function createViewBlock(options) {
 		});
 		const value = useValue(name);
 		const data = useArtifactData(name);
-		const hostProps = useArtifactHost({
-			studio: React.use(ArtifactStudioContext),
-			data,
-			size: useFieldSchema(name)?.size,
-			navigate: useNavigate()
-		});
+		const item = React.use(RepeaterContext);
+		const hostProps = {
+			...useArtifactHost({
+				studio: React.use(ArtifactStudioContext),
+				data,
+				size: useFieldSchema(name)?.size,
+				navigate: useNavigate(),
+				capture: React.use(ArtifactCaptureContext)
+			}),
+			[ARTIFACT_FIELD_ATTRIBUTE]: name,
+			...item?.itemId ? { [ARTIFACT_ITEM_ATTRIBUTE]: item.itemId } : {}
+		};
 		const initialData = useInitialArtifactData(isArtifactSourceReference(value) ? value.artifactUrl : value, data);
 		const fontLinks = useOptionalCamoxApp()?.getArtifactFontLinks();
 		const runs = React.use(ArtifactsRunContext);

package/dist/core/hooks/useArtifactHost.js

@@ -15,37 +15,43 @@ const ArtifactStudioContext = React.createContext(null);
 */
 const ArtifactsRunContext = React.createContext(true);
 /**
+* Whether artifacts run in capture mode: in the look document (ADR 0032), where their Timeline's
+* time only moves when the browser `look` drives seeks it.
+*/
+const ArtifactCaptureContext = React.createContext(false);
+/**
 * Connects an artifact's `<iframe>` to the `camox` runtime inside it: keeps sharing `studio` and
 * its Artifact Data as they change, sizes frames sized to their content, and routes the
 * artifact's navigation.
 */
 function useArtifactHost(t0) {
-	const $ = c(18);
-	const { studio, data: t1, size, navigate } = t0;
-	let t2;
+	const $ = c(19);
+	const { studio, data: t1, size, navigate, capture: t2 } = t0;
+	let t3;
 	if ($[0] !== t1) {
-		t2 = t1 === void 0 ? {} : t1;
+		t3 = t1 === void 0 ? {} : t1;
 		$[0] = t1;
-		$[1] = t2;
-	} else t2 = $[1];
-	const data = t2;
+		$[1] = t3;
+	} else t3 = $[1];
+	const data = t3;
+	const capture = t2 === void 0 ? false : t2;
 	const host = React.useRef(null);
-	let t3;
+	let t4;
 	if ($[2] !== data || $[3] !== studio) {
-		t3 = {
+		t4 = {
 			studio,
 			data
 		};
 		$[2] = data;
 		$[3] = studio;
-		$[4] = t3;
-	} else t3 = $[4];
-	const latest = React.useRef(t3);
+		$[4] = t4;
+	} else t4 = $[4];
+	const latest = React.useRef(t4);
 	const latestNavigate = React.useRef(navigate);
 	const [height, setHeight] = React.useState(null);
-	let t4;
+	let t5;
 	if ($[5] !== data || $[6] !== navigate || $[7] !== studio) {
-		t4 = () => {
+		t5 = () => {
 			latest.current = {
 				studio,
 				data
@@ -59,55 +65,59 @@ function useArtifactHost(t0) {
 		$[5] = data;
 		$[6] = navigate;
 		$[7] = studio;
-		$[8] = t4;
-	} else t4 = $[8];
-	React.useEffect(t4);
-	let t5;
-	if ($[9] !== size) {
-		t5 = (frame) => {
+		$[8] = t5;
+	} else t5 = $[8];
+	React.useEffect(t5);
+	let t6;
+	if ($[9] !== capture || $[10] !== size) {
+		t6 = (frame) => {
 			if (!frame) return;
 			const options = {
 				size,
 				onHeight: setHeight,
 				navigate: (path) => void latestNavigate.current({ to: path })
 			};
-			const connected = connectArtifactHost(frame, latest.current, options);
+			const connected = connectArtifactHost(frame, {
+				...latest.current,
+				capture
+			}, options);
 			host.current = connected;
 			return () => {
 				connected.disconnect();
 				if (host.current === connected) host.current = null;
 			};
 		};
-		$[9] = size;
-		$[10] = t5;
-	} else t5 = $[10];
-	const ref = t5;
+		$[9] = capture;
+		$[10] = size;
+		$[11] = t6;
+	} else t6 = $[11];
+	const ref = t6;
 	if (size !== "content" || height === null) {
-		let t6;
-		if ($[11] !== ref) {
-			t6 = { ref };
-			$[11] = ref;
-			$[12] = t6;
-		} else t6 = $[12];
-		return t6;
+		let t7;
+		if ($[12] !== ref) {
+			t7 = { ref };
+			$[12] = ref;
+			$[13] = t7;
+		} else t7 = $[13];
+		return t7;
 	}
-	let t6;
-	if ($[13] !== height) {
-		t6 = { height };
-		$[13] = height;
-		$[14] = t6;
-	} else t6 = $[14];
 	let t7;
-	if ($[15] !== ref || $[16] !== t6) {
-		t7 = {
+	if ($[14] !== height) {
+		t7 = { height };
+		$[14] = height;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== ref || $[17] !== t7) {
+		t8 = {
 			ref,
-			style: t6
+			style: t7
 		};
-		$[15] = ref;
-		$[16] = t6;
+		$[16] = ref;
 		$[17] = t7;
-	} else t7 = $[17];
-	return t7;
+		$[18] = t8;
+	} else t8 = $[18];
+	return t8;
 }
 /**
 * The Artifact Data to inline in an artifact's `srcDoc`: the data its source first rendered
@@ -136,4 +146,4 @@ function useInitialArtifactData(source, data) {
 }
 
 //#endregion
-export { ArtifactStudioContext, ArtifactsRunContext, useArtifactHost, useInitialArtifactData };
+export { ArtifactCaptureContext, ArtifactStudioContext, ArtifactsRunContext, useArtifactHost, useInitialArtifactData };

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

@@ -26,6 +26,10 @@ export type ArtifactRenderProps = ArtifactFrameProps & {
   ref: React.RefCallback<HTMLIFrameElement>;
   /** For `size: "content"`, the height the artifact's content needs, once it reports it. */
   style?: React.CSSProperties;
+  /** The artifact field's name, so the look document's browser finds the frame. */
+  "data-camox-artifact"?: string;
+  /** The id of the Repeatable Item holding the artifact field, when an item's. */
+  "data-camox-item"?: string;
 };
 //#endregion
 export {};

package/dist/core/lib/artifactHost.js

@@ -1,5 +1,6 @@
 import { artifactThemeColors } from "./artifactColors.js";
 import { observeArtifactTheme, readArtifactTheme } from "./artifactTheme.js";
+import { LOOK_ARTIFACT_CAPTURE } from "@camox/api-contract/drafts";
 
 //#region src/core/lib/artifactHost.ts
 function isRuntimeMessage(data) {
@@ -134,6 +135,34 @@ function connectArtifactHost(frame, initialState, options = {}) {
 			channel
 		}, "*");
 	};
+	const answers = /* @__PURE__ */ new Map();
+	let lastRequest = 0;
+	let whenReady = [];
+	const ask = (type, payload = {}) => new Promise((resolve) => {
+		const id = ++lastRequest;
+		answers.set(id, resolve);
+		const send = () => post(type, {
+			...payload,
+			id
+		});
+		if (ready) send();
+		else whenReady.push(send);
+	});
+	const capture = {
+		timeline: async () => (await ask("timeline")).timeline ?? null,
+		seek: async (t) => {
+			const { error } = await ask("seek", { t });
+			return typeof error === "string" ? { error } : {};
+		},
+		guardrail: async () => {
+			const { findings } = await ask("guardrail");
+			return Array.isArray(findings) ? findings : [];
+		}
+	};
+	if (initialState.capture) Object.defineProperty(frame, LOOK_ARTIFACT_CAPTURE, {
+		value: capture,
+		configurable: true
+	});
 	const sendStudio = () => post("studio", { studio: state.studio });
 	const sendData = () => post("data", { data: state.data ?? {} });
 	let sentTheme = null;
@@ -163,10 +192,20 @@ function connectArtifactHost(frame, initialState, options = {}) {
 		if (message.camox === "ready") {
 			ready = true;
 			observeViewport(false);
+			if (initialState.capture) post("capture");
 			sendStudio();
 			sendData();
 			sendTheme(true);
 			if (options.size === "content") post("measure");
+			for (const send of whenReady) send();
+			whenReady = [];
+			return;
+		}
+		if (message.camox === "timeline" || message.camox === "seeked" || message.camox === "guardrail") {
+			const answer = typeof message.id === "number" ? answers.get(message.id) : void 0;
+			if (!answer) return;
+			answers.delete(message.id);
+			answer(message);
 			return;
 		}
 		if (message.camox === "height") {
@@ -197,6 +236,7 @@ function connectArtifactHost(frame, initialState, options = {}) {
 			page.removeEventListener("message", onMessage);
 			observeViewport(false);
 			stopObservingTheme();
+			if (initialState.capture) Reflect.deleteProperty(frame, LOOK_ARTIFACT_CAPTURE);
 		}
 	};
 }

package/dist/core/lib/artifactRuntime.js

@@ -22,6 +22,25 @@
 * - 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.
+* - host → frame: `capture`, from the look document's hosts only: the runtime enters capture mode,
+*   where real time never advances and the Timeline only moves when seeked. Only in capture mode
+*   does it answer `timeline` (→ `timeline` with the same `id` and the declared `timeline`, or
+*   `null` without one) and `seek` with `t` in ms (→ `seeked` with the same `id`, once the frame at
+*   that time painted, and an `error` when `render` threw) and `guardrail` (→ `guardrail` with the
+*   same `id` and its `findings`, see `LookGuardrailFinding`). On the website and in the studio
+*   they go unanswered.
+*
+* The Timeline (`camox.timeline`) is declared once, synchronously, by the source, which draws its
+* first frame at once, before the body is revealed. On the website its clock calls `render(t)` in
+* `requestAnimationFrame` with real time, wrapped at `duration` when looping and held at the end
+* otherwise. A looping Timeline plays from load, a non-looping one from when its frame is first
+* visible; both pause while the frame is out of the viewport (the runtime observes it as
+* `onViewport` does) and resume where they were. With `prefers-reduced-motion: reduce`, it shows
+* its poster's frame and never plays. Its Tracks are compiled to Web Animations, one per
+* element and property, which play on the compositor from the same start time and loop with it;
+* in capture mode they're paused, and seeking sets their `currentTime`. The `type` and `count`
+* helpers register with it and are drawn from the same `t`, before `render`, so they restart with
+* each loop and seek exactly.
 *
 * 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
@@ -32,7 +51,7 @@
 * `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=location.hash.slice(1),s=()=>{if(i!==void 0)return r;let e=document.querySelector(`script[data-camox-data]`);try{r=JSON.parse(e?e.textContent:decodeURIComponent(o)),(!r||typeof r!=`object`||Array.isArray(r))&&(r={})}catch{r={}}return i=JSON.stringify(r),r},c=(()=>{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)}}}})(),l=new Set,u=null,d=null,f=null,p=()=>{let e=Math.ceil(document.documentElement.getBoundingClientRect().height);e!==f&&(f=e,m(`height`,{height:f}))},m=(n,r)=>{t&&e.postMessage({...r,camox:n,channel:t},`*`)},h=()=>m(`observe-viewport`,{observe:l.size>0}),g={studio(e){let t=e.studio;n=t?Object.freeze({editing:!!t.editing,canvas:!!t.canvas}):null},data(e){s();let t=JSON.stringify(e.data??{});if(t!==i){r=JSON.parse(t),i=t;for(let e of[...a])e(r)}},theme:c.receive,measure(){f=null,d||(d=new ResizeObserver(p),d.observe(document.documentElement)),p()},viewport(e){let{progress:t,visibleRatio:n}=e;if(typeof t==`number`&&typeof n==`number`){u=Object.freeze({progress:t,visibleRatio:n}),document.documentElement.style.setProperty(`--camox-progress`,String(t));for(let e of l)e(u)}}};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,m(`ready`),l.size>0&&h()}else t&&n.channel===t&&Object.hasOwn(g,n.camox)&&g[n.camox](n)}});let _=Object.freeze({get studio(){return n},get data(){return s()},onData(e){return a.add(e),()=>{a.delete(e)}},get theme(){return c.current},onTheme:c.subscribe,navigate(e){m(`navigate`,{href:String(e)})},onViewport(e){if(typeof e!=`function`)throw TypeError(`camox.onViewport needs a callback`);let t=t=>e(t);return l.add(t),l.size===1?h():u&&queueMicrotask(()=>l.has(t)&&e(u)),()=>{l.delete(t)&&l.size===0&&h()}}});Object.defineProperty(window,\"camox\",{value:_,enumerable:!0}),e!==window&&e.postMessage({camox:`hello`},`*`)})();";
+const ARTIFACT_RUNTIME = "(()=>{\"use strict\";let e=window.parent,t=null,n=null,r,i,a=new Set,o=location.hash.slice(1),s=()=>{if(i!==void 0)return r;let e=document.querySelector(`script[data-camox-data]`);try{r=JSON.parse(e?e.textContent:decodeURIComponent(o)),(!r||typeof r!=`object`||Array.isArray(r))&&(r={})}catch{r={}}return i=JSON.stringify(r),r},c=(()=>{let e={setTimeout:window.setTimeout.bind(window),setInterval:window.setInterval.bind(window),clearTimeout:window.clearTimeout.bind(window)},t=new Map;window.setTimeout=function(n,r,...i){if(typeof n!=`function`)return e.setTimeout(n,r,...i);let a=e.setTimeout(function(){return t.delete(a),n.apply(this,arguments)},r,...i);return t.set(a,{kind:`setTimeout`,delay:Number(r)||0}),a},window.setInterval=function(n,r,...i){let a=e.setInterval(n,r,...i);return typeof n==`function`&&t.set(a,{kind:`setInterval`,delay:Number(r)||0}),a};let n=function(n){t.delete(n),e.clearTimeout(n)};return window.clearTimeout=n,window.clearInterval=n,{later:e.setTimeout,get live(){return[...t.values()]}}})(),l=(()=>{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();c.later(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)}}}})(),u=new Set,d=null,f=null,p=null,m=()=>{let e=Math.ceil(document.documentElement.getBoundingClientRect().height);e!==p&&(p=e,h(`height`,{height:p}))},h=(n,r)=>{t&&e.postMessage({...r,camox:n,channel:t},`*`)},g=()=>h(`observe-viewport`,{observe:u.size>0}),_=(e,t,n,r)=>{let i=(e,t,n)=>3*(1-n)*(1-n)*n*e+3*(1-n)*n*n*t+n*n*n,a=(e,t,n)=>3*(1-n)*(1-n)*e+6*(1-n)*n*(t-e)+3*n*n*(1-t);return o=>{if(o<=0)return 0;if(o>=1)return 1;let s=o;for(let c=0;c<8;c++){let c=i(e,n,s)-o;if(Math.abs(c)<1e-7)return i(t,r,s);let l=a(e,n,s);if(Math.abs(l)<1e-6)break;s-=c/l}let c=0,l=1;s=o;for(let t=0;t<40;t++){let t=i(e,n,s);if(Math.abs(t-o)<1e-7)break;t<o?c=s:l=s,s=(c+l)/2}return i(t,r,s)}},v=Object.freeze({travel:[.45,0,.1,1],arrive:[.25,.8,.25,1]}),y=Object.freeze({linear:e=>Math.min(1,Math.max(0,e)),travel:_(...v.travel),arrive:_(...v.arrive)}),b=e=>typeof e==`string`&&Object.hasOwn(y,e),x=e=>{if(e===void 0)return y.linear;if(typeof e==`function`)return e;if(b(e))return y[e];throw TypeError(`Unknown easing `+String(e)+`: use travel, arrive, linear or a function`)},S=(()=>{let e=[`transform`,`opacity`],t=e=>e===`linear`?`linear`:`cubic-bezier(`+v[e].join(`, `)+`)`,n=()=>Object.freeze({width:window.innerWidth,height:window.innerHeight}),r=(e,t)=>({index:e.index,text:e.name+` is skipped, so nothing it animates moves: `+t+`.`}),i=(e,t)=>{if(!e||typeof e!=`object`)return`a Track is an object`;let{el:n,at:r,keyframes:i}=e;if(!n||typeof n.animate!=`function`)return`it needs an el, the element it moves`;if(typeof r!=`number`||!(r>=0))return`it needs an at, when it starts in ms`;let a=e.duration;if(typeof a!=`number`||!(a>=0)||!(r+a<=t))return`it needs a duration in ms, and must end by the Timeline's duration (`+t+` ms)`;if(e.ease!==void 0&&!b(e.ease))return`it has an unknown easing `+String(e.ease)+`: use travel, arrive or linear`;if(typeof i!=`function`&&(!i||typeof i!=`object`))return`it needs keyframes, or a function of the artifact's size giving them`},a=(e,t)=>{if(e===void 0)return{tracks:[],skipped:[]};if(!Array.isArray(e))throw TypeError(`A Timeline's tracks must be an array of Tracks`);let n=[],a=[];return e.forEach((e,o)=>{let s=`Track `+o,c=i(e,t);if(c){a.push(r({index:o,name:s},c));return}let{el:l,at:u,keyframes:d}=e,f=e.ease===void 0?`linear`:e.ease;n.push({name:s,index:o,el:l,at:u,end:u+e.duration,ease:f,keyframes:d})}),{tracks:n,skipped:a}},o=(t,n)=>{let r=typeof t.keyframes==`function`?t.keyframes(n):t.keyframes;if(!r||typeof r!=`object`)return{problem:`its keyframes must be an object`};let i={};for(let[t,n]of Object.entries(r)){if(!e.includes(t))return{problem:`Tracks animate transform and opacity only, not `+t+`: draw it from render(t)`};if(!Array.isArray(n)||n.length!==2)return{problem:`its `+t+` needs two values, [from, to]`};i[t]=n}return{frames:i}},s=(e,i,a)=>{let s=new Map,c=[],l=n();for(let t of[...e].sort((e,t)=>e.at-t.at||e.index-t.index)){let{frames:e,problem:n}=o(t,l);if(n)c.push(r(t,n));else for(let[n,[r,i]]of Object.entries(e)){s.has(t.el)||s.set(t.el,new Map);let e=s.get(t.el);e.has(n)||e.set(n,[]),e.get(n).push({track:t,from:r,to:i})}}let u=[],d=[];for(let[e,n]of s)for(let[r,o]of n){let n=(e,n,a)=>({offset:e/i,[r]:n,easing:t(a)}),s=[n(0,o[0].from,`linear`)],c=0,l=null,f=null;for(let{track:t,from:i,to:a}of o){if(f&&t.at<f.end){let n=Math.min(f.end,t.end);d.push({el:e,property:r,tracks:[f.index,t.index],from:t.at,to:n})}(!f||t.end>f.end)&&(f=t);let o=Math.max(t.at,c),u=Math.max(t.end,o);l&&s.push(n(o,l.to,`linear`)),s.push(n(o,i,t.ease),n(u,a,`linear`)),c=u,l={track:t,to:a}}s.push(n(i,l.to,`linear`)),u.push(e.animate(s,{duration:i,iterations:a?1/0:1,fill:`both`}))}return{animations:u,overlaps:d,skipped:c}};return(e,t,n)=>{let{tracks:r,skipped:i}=a(e,t),o=s(r,t,n),c=null,l=0,u=()=>{for(let e of o.animations)c===null?(e.pause(),e.currentTime=Math.min(t,Math.max(0,l))):e.startTime=c};return r.some(e=>typeof e.keyframes==`function`)&&window.addEventListener(`resize`,()=>{for(let e of o.animations)e.cancel();o=s(r,t,n),u()}),{get animations(){return o.animations},get overlaps(){return o.overlaps},get skipped(){return[...i,...o.skipped].sort((e,t)=>e.index-t.index)},play(e){c=e,u()},seek(e){c=null,l=e,u()}}}})(),C=(()=>{let e=null,t=null,n=!1,r=0,i=null,a=0,o=null,s=!1,l=t=>{let{duration:n,loop:r}=e;return r?(t%n+n)%n:Math.min(n,Math.max(0,t))},d=[],f=0,p=t=>{f=t;for(let e of d)e(t);e.render&&e.render(t)},m=e=>{t.seek(e),p(e)},_=()=>{let e=document.timeline?document.timeline.currentTime:null;return typeof e==`number`?e:performance.now()},v=()=>{r&&cancelAnimationFrame(r),r=0},y=t=>{r=0;let n=l(t-i);p(n),e.loop||n<e.duration?r=requestAnimationFrame(y):(a=e.duration,i=null)},b=()=>{v(),i=_()-a,t.play(i),r=requestAnimationFrame(y)},x=()=>{i!==null&&(a=_()-i,i=null,v(),m(l(a)))},C=()=>{if(n||s)return;let{loop:t,duration:r}=e;(o===null?t:o)&&(t||a<r)?i===null&&b():x()},w=e=>{o=e.visibleRatio>0,C()},T=()=>{let{poster:t,marks:n,loop:r,duration:i}=e;return t===null?r?0:i:n[t]},E=e=>{let t=!1,n=()=>{t||(t=!0,e())};requestAnimationFrame(()=>requestAnimationFrame(n)),c.later(n,200)};return{inspect(n){if(!e)return{animations:[],skipped:[],overlaps:[],ends:null};let{animations:r,skipped:i,overlaps:a}=t;if(!e.loop||!n)return{animations:r,skipped:i,overlaps:a,ends:null};let o=f,s=e.duration-1;try{m(0);let e=n();return m(s),{animations:r,skipped:i,overlaps:a,ends:{first:e,last:n(),at:s}}}finally{m(o)}},register(t,n){if(!e)throw Error(`camox.`+t+` needs a Timeline: call camox.timeline first`);d.push(n),n(f)},declare(r){if(e)throw Error(`camox.timeline can be called once per artifact`);if(!r||typeof r!=`object`)throw TypeError(`camox.timeline needs its options: duration, marks, render`);let{duration:i}=r;if(typeof i!=`number`||!Number.isFinite(i)||i<=0)throw TypeError(`camox.timeline needs a duration: a positive number of milliseconds`);let a={};for(let[e,t]of Object.entries(r.marks||{})){if(typeof t!=`number`||!(t>=0&&t<=i))throw RangeError(`The Mark `+e+` must be a time from 0 to the duration`);a[e]=t}let o=r.poster===void 0?null:String(r.poster);if(o!==null&&!Object.hasOwn(a,o))throw RangeError(`The poster `+o+` must name a Mark`);let{render:c}=r;if(c!==void 0&&typeof c!=`function`)throw TypeError(`A Timeline's render must be a function of the time`);let l=r.loop===!0;t=S(r.tracks,i,l),e=Object.freeze({duration:i,loop:l,marks:Object.freeze(a),poster:o,render:c}),s=!n&&typeof matchMedia==`function`&&matchMedia(`(prefers-reduced-motion: reduce)`).matches,m(s?T():0),!(n||s)&&(u.add(w),u.size===1&&g(),C())},capture(){n=!0,e&&(v(),i=null,u.delete(w)&&u.size===0&&g(),m(0))},describe(t){if(!n)return;let{duration:r,loop:i,marks:a,poster:o}=e||{};h(`timeline`,{id:t.id,timeline:e?{duration:r,loop:i,marks:a,poster:o}:null})},seek(t){if(!n)return;let r=Number(t.t),i;if(e&&Number.isFinite(r))try{m(l(r))}catch(e){i=`render(`+r+`) threw: `+String(e&&e.message?e.message:e)}E(()=>h(`seeked`,i===void 0?{id:t.id}:{id:t.id,error:i}))}}})(),w=(()=>{let e=(e,t)=>{if(!(t instanceof Element))throw TypeError(`camox.`+e+` needs an element to write in`);return t},t=(e,t,n,r,i)=>{if(n===void 0&&r!==void 0)return r;if(typeof n!=`number`||!Number.isFinite(n)||n<0||i&&n===0)throw TypeError(`camox.`+e+`'s `+t+` must be a `+(i?`positive `:``)+`number`);return n},n=e=>{let[,t=``]=String(e).split(`.`);return/^[0-9]+$/.test(t)?Math.min(20,t.length):0};return{type(n,r,i={}){let a=e(`type`,n),o=t(`type`,`at`,i.at,0),s=t(`type`,`cps`,i.cps,20,!0),c=typeof Intl.Segmenter==`function`?Array.from(new Intl.Segmenter().segment(String(r)),e=>e.segment):Array.from(String(r)),l=o+c.length*1e3/s,u=document.createElement(`span`),d=document.createTextNode(``),f=document.createElement(`span`);f.setAttribute(`aria-hidden`,`true`),f.setAttribute(`data-camox-caret`,``),f.style.cssText=`border-left: max(1px, 0.07em) solid currentColor; margin-right: calc(-1 * max(1px, 0.07em));`,u.append(d,f),a.replaceChildren(u);let p=!0;C.register(`type`,e=>{let t=e<o?0:Math.min(c.length,Math.floor((e-o)*s/1e3)+1),n=c.slice(0,t).join(``);d.data!==n&&(d.data=n);let r=e<o?o-e:e-l,i=r<0||Math.floor(r/530)%2==0;i!==p&&(p=i,f.style.visibility=i?``:`hidden`)})},count(r,i){let a=e(`count`,r);if(!i||typeof i.to!=`number`||!Number.isFinite(i.to))throw TypeError(`camox.count needs the number to count to`);let{to:o}=i,s=i.from===void 0?0:i.from;if(typeof s!=`number`||!Number.isFinite(s))throw TypeError(`camox.count's from must be a number`);let c=t(`count`,`at`,i.at,0),l=t(`count`,`duration`,i.duration,1e3,!0),u=x(i.ease===void 0?`arrive`:i.ease),d=i.format;if(d===void 0){let e=Math.max(n(s),n(o)),t=new Intl.NumberFormat(void 0,{minimumFractionDigits:e,maximumFractionDigits:e});d=e=>t.format(e)}else if(typeof d!=`function`)throw TypeError(`camox.count's format must be a function of the value`);let f=null;C.register(`count`,e=>{let t=e>=c+l?o:s+(o-s)*u(Math.max(0,e-c)/l),n=String(d(t));n!==f&&(f=n,a.textContent=n)})}}})(),T=(()=>{let e=!1,t=new Set,n=/-?(?:[0-9]+[.]?[0-9]*|[.][0-9]+)(?:e[-+]?[0-9]+)?/g,r=e=>{if(!e||!e.tagName)return`an element`;let t=e.tagName.toLowerCase();if(e.id)return t+`#`+e.id;let n=Array.from(e.classList).slice(0,2);if(n.length)return t+`.`+n.join(`.`);let i=e.parentElement;return!i||i===document.documentElement?t:r(i)+` > `+t+`:nth-child(`+(Array.from(i.children).indexOf(e)+1)+`)`},i=e=>{let t=e.effect,n=t&&t.target,i=(n?r(n):`no element`)+(t&&t.pseudoElement||``);return typeof CSSAnimation==`function`&&e instanceof CSSAnimation?`The CSS animation `+e.animationName+` on `+i+` plays on its own, outside the Timeline, so captures can't seek it: make it a Track, or draw it from render(t).`:typeof CSSTransition==`function`&&e instanceof CSSTransition?`A CSS transition of `+e.transitionProperty+` on `+i+` ran without a visitor's hover or press: motion that plays on its own goes through the Timeline, as a Track or from render(t).`:`A Web Animation on `+i+` was made by the source and plays outside the Timeline: declare it as a Track, or pause it and set its currentTime from render(t).`},a=()=>{if(!e||typeof document.getAnimations!=`function`)return;let n=new Set(C.inspect().animations);for(let e of document.getAnimations())n.has(e)||e.playState===`paused`||e.playState===`idle`||t.add(i(e))},o=()=>{let e=new Map;for(let{kind:t,delay:n}of c.live){let r=t+` `+n;e.has(r)||e.set(r,{kind:t,delay:n,count:0}),e.get(r).count++}return[...e.values()].map(({kind:e,delay:t,count:n})=>({kind:`timer`,text:(e===`setInterval`?`A setInterval every `+t+` ms is still running`:`A setTimeout of `+t+` ms is still pending`)+(n>1?` (`+n+` of them)`:``)+`: time stands still in captures, so what timers move never shows there, and they don't follow the Timeline's loop. Draw it from render(t) instead.`}))},s=e=>{let t=new Map,n=(r,i,a)=>{let o=getComputedStyle(r),s=a&&o.display!==`none`,c=i*Number(o.opacity),l=s&&o.visibility!==`hidden`&&c>.01;if(!r.hasAttribute(`data-camox-caret`)){let n={};for(let e of r.attributes)n[e.name+` attribute`]=e.value;let i=``;for(let e of r.childNodes)e.nodeType===Node.TEXT_NODE&&(i+=e.data);if(i&&(n.text=i),e.has(r)&&(n.transform=new DOMMatrix(o.transform).toString(),n.opacity=o.opacity),r instanceof HTMLCanvasElement)try{n[`canvas drawing`]=r.toDataURL()}catch{}t.set(r,{visible:l,values:n})}for(let e of r.children)n(e,c,s)};return n(document.documentElement,1,!0),t},l=(e,t)=>{if(e===t)return!0;if(typeof e!=`string`||typeof t!=`string`||e.replace(n,`0`)!==t.replace(n,`0`))return!1;let r=t.match(n)||[];return(e.match(n)||[]).every((e,t)=>{let n=Number(e),i=Number(r[t]);return Math.abs(n-i)<=.01*Math.max(1,Math.abs(n),Math.abs(i))})},u=e=>JSON.stringify(e.length>40?e.slice(0,39)+`…`:e),d=()=>{let e=new Set(C.inspect().animations.map(e=>e.effect&&e.effect.target)),t;try{t=C.inspect(()=>s(e)).ends}catch{return null}if(!t)return null;let{first:n,last:i,at:a}=t,o=[];for(let e of new Set([...n.keys(),...i.keys()])){let t=n.get(e),s=i.get(e);if(!t||!s)(t||s).visible&&o.push(r(e)+` is there at only one end`);else if(t.visible||s.visible)for(let n of new Set([...Object.keys(t.values),...Object.keys(s.values)])){let i=t.values[n],c=s.values[n];l(i,c)||o.push(n===`canvas drawing`?r(e)+`'s canvas drawing`:r(e)+`'s `+n+` (`+(i===void 0?`none`:u(i))+` at 0 ms, `+(c===void 0?`none`:u(c))+` at `+a+` ms)`)}}if(!o.length)return null;let c=o.slice(0,4).join(`; `)+(o.length>4?`; and `+(o.length-4)+` more`:``);return{kind:`loop-cut`,text:`Loop cut: the last frame (`+a+` ms) differs from the first (0 ms), so the loop jumps at its restart: `+c+`. Bring them back to how they start before the end, or hide them while they reset.`}};return{get watching(){return e},watch(){e=!0,a()},sample:a,report(){let e=d();a();let n=[...t].map(e=>({kind:`animation`,text:e}));n.push(...o());let{skipped:i,overlaps:s}=C.inspect();for(let{text:e}of i)n.push({kind:`track`,text:e});for(let{el:e,property:t,tracks:i,from:a,to:o}of s)n.push({kind:`overlap`,text:`Tracks `+i[0]+` and `+i[1]+` both animate the `+t+` of `+r(e)+`, from `+a+` to `+o+` ms: the later one waits for the earlier to end, so it jumps. Start it once the earlier one ends.`});return e&&n.push(e),n}}})(),E={studio(e){let t=e.studio;n=t?Object.freeze({editing:!!t.editing,canvas:!!t.canvas}):null},data(e){s();let t=JSON.stringify(e.data??{});if(t!==i){r=JSON.parse(t),i=t;for(let e of[...a])e(r)}},theme:l.receive,measure(){p=null,f||(f=new ResizeObserver(m),f.observe(document.documentElement)),m()},viewport(e){let{progress:t,visibleRatio:n}=e;if(typeof t==`number`&&typeof n==`number`){d=Object.freeze({progress:t,visibleRatio:n}),document.documentElement.style.setProperty(`--camox-progress`,String(t));for(let e of u)e(d)}},capture(e){C.capture(e),T.watch()},timeline:C.describe,seek(e){C.seek(e),T.sample()},guardrail(e){T.watching&&h(`guardrail`,{id:e.id,findings:T.report()})}};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,h(`ready`),u.size>0&&g()}else t&&n.channel===t&&Object.hasOwn(E,n.camox)&&E[n.camox](n)}});let D=Object.freeze({get studio(){return n},get data(){return s()},onData(e){return a.add(e),()=>{a.delete(e)}},get theme(){return l.current},onTheme:l.subscribe,navigate(e){h(`navigate`,{href:String(e)})},onViewport(e){if(typeof e!=`function`)throw TypeError(`camox.onViewport needs a callback`);let t=t=>e(t);return u.add(t),u.size===1?g():d&&queueMicrotask(()=>u.has(t)&&e(d)),()=>{u.delete(t)&&u.size===0&&g()}},timeline:C.declare,interpolate(e,t,n,r){let[i,a]=t,[o,s]=n,c=x(r&&r.ease),l=a===i?e<i?0:1:(e-i)/(a-i);return o+(s-o)*c(Math.min(1,Math.max(0,l)))},random(e){let t=String(e),n=2166136261;for(let e=0;e<t.length;e++)n=Math.imul(n^t.charCodeAt(e),16777619);return n=Math.imul(n^n>>>16,2246822507),n=Math.imul(n^n>>>13,3266489909),((n^n>>>16)>>>0)/4294967296},type:w.type,count:w.count});Object.defineProperty(window,\"camox\",{value:D,enumerable:!0}),e!==window&&e.postMessage({camox:`hello`},`*`)})();";
 
 //#endregion
 export { ARTIFACT_RUNTIME };

package/dist/features/runtime/pageApp.js

@@ -1,5 +1,6 @@
 import { DraftScopeContext } from "../../lib/draft-scope.js";
 import { useAuthState, useSignInRedirect } from "../../lib/auth.js";
+import { ArtifactCaptureContext } from "../../core/hooks/useArtifactHost.js";
 import { useSignInShortcut } from "../provider/signInShortcut.js";
 import { PreviewDocumentContext } from "./PreviewDocumentContext.js";
 import { PreviewActivation } from "../preview/components/PreviewActivation.js";
@@ -36,9 +37,12 @@ function PageApp(t0) {
 			sessionless: input.look,
 			children: /* @__PURE__ */ jsx(PreviewDocumentContext.Provider, {
 				value: currentInput.previewDocument,
-				children: input.previewHandoff ? /* @__PURE__ */ jsx(PreviewSignInPage, {}) : input.look ? /* @__PURE__ */ jsx(PageContent, {
-					camoxApp,
-					input: currentInput
+				children: input.previewHandoff ? /* @__PURE__ */ jsx(PreviewSignInPage, {}) : input.look ? /* @__PURE__ */ jsx(ArtifactCaptureContext, {
+					value: true,
+					children: /* @__PURE__ */ jsx(PageContent, {
+						camoxApp,
+						input: currentInput
+					})
 				}) : /* @__PURE__ */ jsx(PageExperience, {
 					camoxApp,
 					input: currentInput,

package/dist/features/studio/agentRunToast.js

@@ -0,0 +1,71 @@
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { toast } from "@camox/ui/toaster";
+
+//#region src/features/studio/agentRunToast.ts
+/**
+* Says the agent is working in a toast while a run goes in the draft's thread, anyone's, so the
+* editor knows wherever they are in the studio, then how it ended. Live's runs are too quick to
+* need one. Leaving the thread takes the toast away.
+*/
+function useAgentRunToast(view, draftId) {
+	const $ = c(13);
+	const id = React.useId();
+	const running = draftId !== null && view.running;
+	const ran = React.useRef(false);
+	let t0;
+	if ($[0] !== id || $[1] !== view) {
+		t0 = () => {
+			const last = view.messages.at(-1)?.from;
+			if (last === "failed") toast.error("Agent couldn't finish", { id });
+			else if (last === "stopped") toast.dismiss(id);
+			else toast.success("Agent is done", { id });
+		};
+		$[0] = id;
+		$[1] = view;
+		$[2] = t0;
+	} else t0 = $[2];
+	const ended = React.useEffectEvent(t0);
+	let t1;
+	if ($[3] !== ended || $[4] !== id || $[5] !== running) {
+		t1 = () => {
+			if (running) {
+				ran.current = true;
+				toast.loading("Agent is working…", { id });
+			} else if (ran.current) {
+				ran.current = false;
+				ended();
+			}
+		};
+		$[3] = ended;
+		$[4] = id;
+		$[5] = running;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== id || $[8] !== running) {
+		t2 = [running, id];
+		$[7] = id;
+		$[8] = running;
+		$[9] = t2;
+	} else t2 = $[9];
+	React.useEffect(t1, t2);
+	let t3;
+	let t4;
+	if ($[10] !== id) {
+		t3 = () => () => {
+			if (ran.current) toast.dismiss(id);
+		};
+		t4 = [id];
+		$[10] = id;
+		$[11] = t3;
+		$[12] = t4;
+	} else {
+		t3 = $[11];
+		t4 = $[12];
+	}
+	React.useEffect(t3, t4);
+}
+
+//#endregion
+export { useAgentRunToast };

package/dist/features/studio/components/ChatWidget.js

@@ -7,6 +7,7 @@ import { BOTTOM_CARD_EDGES, CARD_BODY_EDGES } from "../../preview/components/Sid
 import { studioStore } from "../studioStore.js";
 import { FollowAgentContext } from "../followAgentContext.js";
 import { useThread } from "../../../lib/use-thread.js";
+import { useAgentRunToast } from "../agentRunToast.js";
 import { EditorWhereContext } from "../editorWhereContext.js";
 import { useEditorSelection } from "../useEditorSelection.js";
 import { ThreadComposer, useComposerCarrier } from "./ThreadComposer.js";
@@ -141,6 +142,7 @@ function Thread(t0) {
 		$[1] = t1;
 	} else t1 = $[1];
 	const { view, sending, send, stop, error, touched } = useThread(apiUrl, projectId, draftId, t1);
+	useAgentRunToast(view, draftId);
 	const follow = React.use(FollowAgentContext);
 	let t2;
 	if ($[2] !== follow) {

package/dist/features/studio/components/DraftBar.js

@@ -14,8 +14,7 @@ import { FloatingToolbar } from "@camox/ui/floating-toolbar";
 */
 const SETTLE_MS = 1500;
 /**
-* Asks what to do with the draft being viewed, once its edits settle: discard its changes or
-* publish them. `stacked` places it in the Preview toolbar's column, just above the toolbar;
+* Asks what to do with the draft being viewed, once its edits settle: delete it or publish it. `stacked` places it in the Preview toolbar's column, just above the toolbar;
 * otherwise it floats at the bottom of the screen on its own.
 */
 function DraftBar(t0) {
@@ -63,7 +62,7 @@ function DraftBar(t0) {
 			type: "button",
 			variant: "outline",
 			onClick: _temp,
-			children: "Discard"
+			children: "Delete"
 		});
 		$[8] = t7;
 	} else t7 = $[8];