camox 0.74.1 → 0.76.0

package/dist/core/lib/artifactRuntime.js

@@ -23,7 +23,9 @@
 *   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
+*   where real time never advances and the Timeline only moves when seeked. Until the first seek it
+*   shows its poster's frame, as under reduced motion, so a capture of the page around it shows the
+*   frame that stands for the artifact. 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
@@ -51,7 +53,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={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`},`*`)})();";
+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(n||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(T()))},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/provider/AuthenticatedCamoxProvider.js

@@ -7,18 +7,18 @@ import { useApplyTheme, useThemeActions } from "../studio/useTheme.js";
 import { usePreviewPagesActions, useShowCanvasAction } from "../preview/CamoxPreview.js";
 import { useProjectRoom } from "../../lib/use-project-room.js";
 import { useLeaveDraft } from "../studio/viewSwitch.js";
+import { DraftNotices } from "../studio/components/DraftNotices.js";
 import { useNavbarActions } from "../studio/components/Navbar.js";
-import { draftNoticeMessage } from "../studio/draftNotice.js";
 import { CommandPalette, useCommandPaletteActions } from "./components/CommandPalette.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Toaster, toast } from "@camox/ui/toaster";
+import { Toaster } from "@camox/ui/toaster";
 import studioCssUrl from "virtual:camox-studio-css";
 
 //#region src/features/provider/AuthenticatedCamoxProvider.tsx
 function AuthenticatedCamoxProvider(t0) {
-	const $ = c(20);
+	const $ = c(24);
 	const { children } = t0;
 	useAdminShortcuts();
 	useCommandPaletteActions();
@@ -37,85 +37,97 @@ function AuthenticatedCamoxProvider(t0) {
 	const { data: project } = useReadQuery(t1);
 	const draftScope = useDraftScope();
 	const studioCache = useStudioCache();
+	const [revisions] = React.useState(createRevisions);
+	const leaveDraft = useLeaveDraft();
 	let t2;
+	if ($[2] !== authClient || $[3] !== draftScope || $[4] !== leaveDraft) {
+		t2 = (left, by) => {
+			if (left.draftId !== draftScope.current()) return;
+			if (by === signedInUserId(authClient)) return leaveDraft(left);
+			draftScope.leave(left, { notice: true });
+		};
+		$[2] = authClient;
+		$[3] = draftScope;
+		$[4] = leaveDraft;
+		$[5] = t2;
+	} else t2 = $[5];
+	const onDraftLeft = t2;
 	let t3;
-	if ($[2] !== draftScope) {
-		t2 = () => draftScope.onNotice(_temp);
-		t3 = [draftScope];
-		$[2] = draftScope;
-		$[3] = t2;
-		$[4] = t3;
+	let t4;
+	if ($[6] !== onDraftLeft) {
+		t3 = (ended) => onDraftLeft(ended, ended.endedBy.id);
+		t4 = (archived) => onDraftLeft(archived, archived.archivedBy.id);
+		$[6] = onDraftLeft;
+		$[7] = t3;
+		$[8] = t4;
 	} else {
-		t2 = $[3];
-		t3 = $[4];
+		t3 = $[7];
+		t4 = $[8];
 	}
-	React.useEffect(t2, t3);
-	const [revisions] = React.useState(createRevisions);
-	const leaveDraft = useLeaveDraft();
-	let t4;
-	if ($[5] !== authClient || $[6] !== draftScope || $[7] !== leaveDraft || $[8] !== revisions) {
-		let t5;
-		if ($[10] !== revisions) {
-			t5 = (revision) => revisions.announce(revision);
-			$[10] = revisions;
-			$[11] = t5;
-		} else t5 = $[11];
-		t4 = {
-			onDraftEnded(ended) {
-				if (ended.draftId !== draftScope.current()) return;
-				if (ended.endedBy.id === signedInUserId(authClient)) return leaveDraft(ended);
-				draftScope.leave(ended, { notice: true });
-			},
+	let t5;
+	if ($[9] !== revisions) {
+		t5 = (revision) => revisions.announce(revision);
+		$[9] = revisions;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t3 || $[12] !== t4 || $[13] !== t5) {
+		t6 = {
+			onDraftEnded: t3,
+			onDraftArchived: t4,
 			onRevision: t5
 		};
-		$[5] = authClient;
-		$[6] = draftScope;
-		$[7] = leaveDraft;
-		$[8] = revisions;
-		$[9] = t4;
-	} else t4 = $[9];
-	useProjectRoom(apiUrl, project?.id, studioCache, t4);
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	useProjectRoom(apiUrl, project?.id, studioCache, t6);
 	const { resolvedTheme } = useApplyTheme();
-	let t5;
-	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ jsx("link", {
+	let t7;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx("link", {
 			rel: "stylesheet",
 			href: studioCssUrl,
 			"data-camox-studio": true
 		});
-		$[12] = t5;
-	} else t5 = $[12];
-	let t6;
-	if ($[13] !== resolvedTheme) {
-		t6 = /* @__PURE__ */ jsx(Toaster, { theme: resolvedTheme });
-		$[13] = resolvedTheme;
-		$[14] = t6;
-	} else t6 = $[14];
-	let t7;
-	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = /* @__PURE__ */ jsx(CommandPalette, {});
 		$[15] = t7;
 	} else t7 = $[15];
 	let t8;
-	if ($[16] !== children || $[17] !== revisions || $[18] !== t6) {
-		t8 = /* @__PURE__ */ jsxs(RevisionsContext, {
+	if ($[16] !== resolvedTheme) {
+		t8 = /* @__PURE__ */ jsx(Toaster, { theme: resolvedTheme });
+		$[16] = resolvedTheme;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t10;
+	let t9;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(CommandPalette, {});
+		t10 = /* @__PURE__ */ jsx(DraftNotices, {});
+		$[18] = t10;
+		$[19] = t9;
+	} else {
+		t10 = $[18];
+		t9 = $[19];
+	}
+	let t11;
+	if ($[20] !== children || $[21] !== revisions || $[22] !== t8) {
+		t11 = /* @__PURE__ */ jsxs(RevisionsContext, {
 			value: revisions,
 			children: [
-				t5,
+				t7,
 				children,
-				t6,
-				t7
+				t8,
+				t9,
+				t10
 			]
 		});
-		$[16] = children;
-		$[17] = revisions;
-		$[18] = t6;
-		$[19] = t8;
-	} else t8 = $[19];
-	return t8;
-}
-function _temp(notice) {
-	toast(draftNoticeMessage(notice));
+		$[20] = children;
+		$[21] = revisions;
+		$[22] = t8;
+		$[23] = t11;
+	} else t11 = $[23];
+	return t11;
 }
 
 //#endregion

package/dist/features/renderer/RendererFrames.js

@@ -103,7 +103,7 @@ function _temp() {}
 * the studio keeps the Canvas position and selection, and tells the new renderer.
 */
 function RendererFramesProvider(t0) {
-	const $ = c(33);
+	const $ = c(34);
 	const { runtimeBasePath, children } = t0;
 	const queryClient = useQueryClient();
 	const studioCache = useStudioCache();
@@ -147,6 +147,7 @@ function RendererFramesProvider(t0) {
 	const documentUrl = t3;
 	const [source, setSource] = React.useState(documentUrl);
 	const loaded = React.useRef(source);
+	const [loads, setLoads] = React.useState(0);
 	let t4;
 	if ($[8] !== documentUrl || $[9] !== host) {
 		t4 = (t5) => {
@@ -156,6 +157,7 @@ function RendererFramesProvider(t0) {
 			loaded.current = next;
 			host?.replacing();
 			setSource(next);
+			setLoads(_temp2);
 		};
 		$[8] = documentUrl;
 		$[9] = host;
@@ -164,23 +166,29 @@ function RendererFramesProvider(t0) {
 	const reload = t4;
 	let t5;
 	let t6;
-	if ($[11] !== draftScope || $[12] !== reload) {
+	if ($[11] !== documentUrl || $[12] !== draftScope || $[13] !== reload) {
 		t5 = () => draftScope.subscribe((t7) => {
 			const { move } = t7;
-			if (move !== "started") reload();
+			if (move === "started") loaded.current = documentUrl();
+			else reload();
 		});
-		t6 = [draftScope, reload];
-		$[11] = draftScope;
-		$[12] = reload;
-		$[13] = t5;
-		$[14] = t6;
+		t6 = [
+			draftScope,
+			documentUrl,
+			reload
+		];
+		$[11] = documentUrl;
+		$[12] = draftScope;
+		$[13] = reload;
+		$[14] = t5;
+		$[15] = t6;
 	} else {
-		t5 = $[13];
-		t6 = $[14];
+		t5 = $[14];
+		t6 = $[15];
 	}
 	React.useEffect(t5, t6);
 	let t7;
-	if ($[15] !== host) {
+	if ($[16] !== host) {
 		t7 = (next_0) => {
 			if (!host) return Promise.resolve();
 			return host.ask({
@@ -190,47 +198,45 @@ function RendererFramesProvider(t0) {
 				locale: next_0.locale
 			});
 		};
-		$[15] = host;
-		$[16] = t7;
-	} else t7 = $[16];
+		$[16] = host;
+		$[17] = t7;
+	} else t7 = $[17];
 	useViewPreparer(t7);
-	const [loads, setLoads] = React.useState(0);
 	const revisions = React.use(RevisionsContext);
 	let t8;
 	let t9;
-	if ($[17] !== draftScope || $[18] !== reload || $[19] !== revisions) {
+	if ($[18] !== draftScope || $[19] !== reload || $[20] !== revisions) {
 		t8 = () => revisions?.subscribe((t10) => {
 			const { draftId } = t10;
 			if (draftId !== draftScope.current()) return;
 			reload(true);
-			setLoads(_temp2);
 		});
 		t9 = [
 			revisions,
 			draftScope,
 			reload
 		];
-		$[17] = draftScope;
-		$[18] = reload;
-		$[19] = revisions;
-		$[20] = t8;
-		$[21] = t9;
+		$[18] = draftScope;
+		$[19] = reload;
+		$[20] = revisions;
+		$[21] = t8;
+		$[22] = t9;
 	} else {
-		t8 = $[20];
-		t9 = $[21];
+		t8 = $[21];
+		t9 = $[22];
 	}
 	React.useEffect(t8, t9);
 	let t10;
-	if ($[22] !== host) {
+	if ($[23] !== host) {
 		t10 = (frame) => {
 			if (frame && host) frame[STUDIO_HANDLE_KEY] = host.handle;
 		};
-		$[22] = host;
-		$[23] = t10;
-	} else t10 = $[23];
+		$[23] = host;
+		$[24] = t10;
+	} else t10 = $[24];
 	const connect = t10;
 	let t11;
-	if ($[24] !== connect || $[25] !== host || $[26] !== loads || $[27] !== source) {
+	if ($[25] !== connect || $[26] !== host || $[27] !== loads || $[28] !== source) {
 		t11 = host && /* @__PURE__ */ jsx("iframe", {
 			ref: connect,
 			src: source,
@@ -238,23 +244,23 @@ function RendererFramesProvider(t0) {
 			title: "Website renderer",
 			"data-camox-renderer": true
 		}, `${source}#${loads}`);
-		$[24] = connect;
-		$[25] = host;
-		$[26] = loads;
-		$[27] = source;
-		$[28] = t11;
-	} else t11 = $[28];
+		$[25] = connect;
+		$[26] = host;
+		$[27] = loads;
+		$[28] = source;
+		$[29] = t11;
+	} else t11 = $[29];
 	let t12;
-	if ($[29] !== children || $[30] !== host || $[31] !== t11) {
+	if ($[30] !== children || $[31] !== host || $[32] !== t11) {
 		t12 = /* @__PURE__ */ jsxs(RendererHostContext, {
 			value: host,
 			children: [children, t11]
 		});
-		$[29] = children;
-		$[30] = host;
-		$[31] = t11;
-		$[32] = t12;
-	} else t12 = $[32];
+		$[30] = children;
+		$[31] = host;
+		$[32] = t11;
+		$[33] = t12;
+	} else t12 = $[33];
 	return t12;
 }
 function _temp2(count) {

package/dist/features/routes/pageRuntime.d.ts

@@ -4,7 +4,7 @@ import "../../core/structuredData.js";
 import "../../core/createLayout.js";
 import "../../core/createApp.js";
 import "../../lib/studio-reads.js";
-import { EndedDraft } from "@camox/api-contract/drafts";
+import { ArchivedDraft, EndedDraft } from "@camox/api-contract/drafts";
 import { QueryClient } from "@tanstack/react-query";
 import { Router } from "@camox/api-contract/router";
 import { RouterClient } from "@orpc/server";
@@ -22,8 +22,8 @@ export type PageStructure = {
   recordStructuredData?: PageWithBlocks["recordStructuredData"];
 };
 /**
- * Why a member can't see the draft a URL names: it doesn't exist, it isn't open to them, or it
- * was published or deleted (ADR 0011).
+ * Why a member can't see the draft a URL names: it doesn't exist, it isn't open to them, it
+ * was published or deleted (ADR 0011), or it's archived (ADR 0046).
  */
 export type DraftNotice = {
   reason: "missing";
@@ -31,7 +31,9 @@ export type DraftNotice = {
   reason: "forbidden";
 } | ({
   reason: "ended";
-} & EndedDraft);
+} & EndedDraft) | ({
+  reason: "archived";
+} & ArchivedDraft);
 /** Which draft a render read: the URL's, or Live when there was none or it couldn't be read. */
 export interface DraftRead {
   /** The draft the render read. Absent for Live. */

package/dist/features/routes/pageRuntime.js

@@ -6,7 +6,7 @@ import { PAGE_IMAGE_SIZE, pageImageUrl } from "../og/pageImage.js";
 import { curatedLayoutContext } from "../../core/layoutContext.js";
 import { isArticle } from "../../core/structuredData.js";
 import { publishingDraft } from "../runtime/publishingDraft.js";
-import { DRAFT_ENDED_ERROR_CODE, DRAFT_HEADER, LOOK_TOKEN_HEADER, PUBLISHING_DRAFT_HEADER } from "@camox/api-contract/drafts";
+import { DRAFT_ARCHIVED_ERROR_CODE, DRAFT_ENDED_ERROR_CODE, DRAFT_HEADER, LOOK_TOKEN_HEADER, PUBLISHING_DRAFT_HEADER } from "@camox/api-contract/drafts";
 import { createORPCClient } from "@orpc/client";
 import { RPCLink } from "@orpc/client/fetch";
 
@@ -84,6 +84,10 @@ function draftRefusalNotice(error, draftId) {
 		reason: "ended",
 		...data
 	};
+	if (code === DRAFT_ARCHIVED_ERROR_CODE && data) return {
+		reason: "archived",
+		...data
+	};
 	if (isNotFoundError(error) && data?.draftId === draftId) return { reason: "missing" };
 	if (code === "FORBIDDEN" || status === 403) return { reason: "forbidden" };
 	if (code === "UNAUTHORIZED" || status === 401) return null;