dev-process-kit 0.2.1 → 0.3.0-beta.1

package/dist/chunks/shared-CfVpKPRY.js

@@ -0,0 +1,1844 @@
+import{ax as y,bi as Ae,av as D,aM as _,aL as g,ac as u,aw as M,az as ue,bj as zi,aD as Ie,au as Yi,bk as Je,bl as Hi,aa as N,ay as x,b8 as Bi,aB as Wi,p as w,a9 as b,t as oe,aO as se,a8 as qi,N as Fi,e as Gi,a5 as ji,h as Qe,K as _e,S as Y,R as Ki,P as k,as as l,ai as h,bm as Pe,bn as De,aH as Xi,y as Re,aP as et,l as tt,a$ as q,bo as Zi,z as it,bp as nt,G as Ji,I as Qi,b3 as en,b4 as tn,ah as nn,V as ot,ag as on,bq as sn,aE as rn,aF as he,aG as st,C as an,br as dn}from"./shared-DdpMqkAH.js";import{c as ln,a as pn}from"./shared-qk9TB_UM.js";import{m as cn}from"./shared-a9QCZpxj.js";import{h as rt,d as at,e as un,f as hn,a as dt,b as lt,i as pt,p as vn,r as fn,k as gn,l as mn,m as yn,g as wn,c as bn,s as kn,n as ct,j as ut,t as xn}from"./shared-C-M2Nfmu.js";const En=[["rect",{width:"20",height:"14",x:"2",y:"3",rx:"2"}],["line",{x1:"8",x2:"16",y1:"21",y2:"21"}],["line",{x1:"12",x2:"12",y1:"17",y2:"21"}]],Sn=[["path",{d:"M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"}]],$n=[["rect",{width:"14",height:"20",x:"5",y:"2",rx:"2",ry:"2"}],["path",{d:"M12 18h.01"}]],Tn=[["rect",{width:"16",height:"20",x:"4",y:"2",rx:"2",ry:"2"}],["line",{x1:"12",x2:"12.01",y1:"18",y2:"18"}]],An=[["path",{d:"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"}],["circle",{cx:"12",cy:"7",r:"4"}]],In=[["path",{d:"m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"}],["path",{d:"m14 7 3 3"}],["path",{d:"M5 6v4"}],["path",{d:"M19 14v4"}],["path",{d:"M10 2v2"}],["path",{d:"M7 8H3"}],["path",{d:"M21 16h-4"}],["path",{d:"M11 3H9"}]],ht=["browser","native","mail","plain"],vt=["mobile","tablet","desktop","fluid"],J=e=>"screen"in e,_n=D({from:g(u()),to:g(u()),cc:g(u()),subject:g(u()),date:g(u())}),ft={id:_,kind:M(ue(ht),"browser"),viewport:M(ue(vt),"fluid"),label:g(u()),url:g(u()),mail:g(_n)},Ne=y(u(),Ae(e=>e.trim()!=="","a note needs some text")),gt=y(u(),zi()),Pn=D({id:_,selector:y(u(),x(1)),text:g(u()),body:Ne,createdAt:g(gt)}),mt='a preview `mail` envelope needs `"kind": "mail"`',yt=y(D(ft),Ae(e=>e.mail===void 0||e.kind==="mail",mt)),wt=y(D({...ft,notes:g(N(Pn))}),Ae(e=>e.mail===void 0||e.kind==="mail",mt)),bt=D({screen:_,preview:g(_)}),Dn=Ie([bt,D({material:yt})]),Rn=Ie([bt,D({material:wt})]),Nn=D({id:_,name:y(u(),x(1)),description:g(u()),actor:g(y(u(),x(1))),situation:g(y(u(),x(1))),panes:M(N(Rn),[])}),On=D({id:_,name:y(u(),x(1)),description:g(u()),actor:g(y(u(),x(1))),steps:M(N(Nn),[])}),Cn=D({id:_,name:y(u(),x(1)),description:g(u()),actor:g(y(u(),x(1))),stories:M(N(On),[])}),kt=y(u(),x(1)),Mn=D({id:_,label:y(u(),x(1)),description:g(u()),fill:g(Bi(kt,Ie([u(),Wi()]))),click:g(N(kt))}),Ln=D({id:_,title:y(u(),x(1)),description:g(u()),previews:M(N(wt),[]),actions:M(N(Mn),[])}),Un=D({id:_,name:y(u(),x(1)),description:g(u()),actor:g(y(u(),x(1))),screens:M(N(Ln),[])}),xt=D({title:g(u()),baseUrl:g(u()),apps:M(N(Un),[]),activities:M(N(Cn),[])}),Et=e=>e.flatMap(t=>J(t)?[]:[t.material]),Vn=e=>{const t=new Set,i=new Set,n=a=>{for(const d of a){if(t.has(d.id))return`duplicate preview id "${d.id}": preview ids are global, they name a light DOM slot`;t.add(d.id);for(const p of d.notes??[]){if(i.has(p.id))return`duplicate note id "${p.id}": note ids are global`;i.add(p.id)}}return null},o=new Set,s=new Set;for(const a of e.apps){if(o.has(a.id))return`duplicate app id "${a.id}"`;o.add(a.id);for(const d of a.screens){if(s.has(d.id))return`duplicate screen id "${d.id}": screen ids are global`;s.add(d.id);const p=n(d.previews);if(p!==null)return p;const c=new Set;for(const v of d.actions){if(c.has(v.id))return`duplicate action id "${v.id}" on screen "${d.id}"`;c.add(v.id)}}}const r=new Set;for(const a of e.activities){if(r.has(a.id))return`duplicate activity id "${a.id}"`;r.add(a.id);const d=new Set;for(const p of a.stories){if(d.has(p.id))return`duplicate story id "${p.id}" in activity "${a.id}"`;d.add(p.id);const c=new Set;for(const v of p.steps){if(c.has(v.id))return`duplicate step id "${v.id}" in story "${p.id}"`;c.add(v.id);const f=n(Et(v.panes));if(f!==null)return f}}}return null},St=(e,t)=>{const i=new Map;for(const n of t.panes){if(!J(n))continue;const o=e(n.screen);if(o===void 0)return`unknown screen "${n.screen}" on step "${t.id}": declare it under \`apps[].screens\``;if(n.preview!==void 0&&!o.includes(n.preview))return`preview "${n.preview}" on step "${t.id}" is not a rendition of screen "${n.screen}"`;const s=i.get(n.screen)??[];if(s.length>0&&(n.preview===void 0||s.includes(n.preview)||s.includes(void 0)))return`screen "${n.screen}" is shown twice on step "${t.id}": give each pane a different \`preview\``;i.set(n.screen,[...s,n.preview])}return null},zn=e=>{const t=new Map(e.apps.flatMap(i=>i.screens.map(n=>[n.id,n.previews.map(o=>o.id)])));for(const i of e.activities.flatMap(n=>n.stories.flatMap(o=>o.steps))){const n=St(o=>t.get(o),i);if(n!==null)return n}return null},Yn=(e,t)=>St(i=>L(e,i)?.screen.previews.map(n=>n.id),t),O="ui",re=e=>{const t=e.text?.replaceAll('"',"'");return`${e.previewId}/${e.selector}${t===void 0?"":` "${t}"`}`},Q=e=>{const t=e.indexOf("/");if(t<=0)return;const i=e.slice(0,t);if(!Hi(_,i))return;const n=e.slice(t+1),o=/ "([^"]*)"$/.exec(n),s=(o?n.slice(0,o.index):n).trim();if(s!=="")return o?.[1]===void 0?{previewId:i,selector:s}:{previewId:i,selector:s,text:o[1]}},$t=e=>{const t=Yi(xt,e),i=Vn(t)??zn(t);if(i!==null)throw new Error(i);return t},Tt=()=>({apps:[],activities:[]}),H=e=>e.apps.flatMap(t=>t.screens.map(i=>({app:t,screen:i}))),L=(e,t)=>{if(t!==void 0)return H(e).find(i=>i.screen.id===t)},ve=(e,t)=>t.panes.flatMap(i=>{const n=J(i)?L(e,i.screen):void 0;return n?[n]:[]}),F=e=>Et(e.panes),Hn=(e,t)=>e.panes.some(i=>J(i)&&i.screen===t),U=(e,t)=>{if(t!==void 0)return e.activities.find(i=>i.id===t)},C=(e,t)=>`${e}.${t}`,$=(e,t)=>{if(t===void 0)return;const i=Je(t,2);if(i){const[o,s]=i;if(o===void 0||s===void 0)return;const r=e.activities.find(d=>d.id===o),a=r?.stories.find(d=>d.id===s);return r&&a?{activity:r,story:a}:void 0}if(t.includes("."))return;const n=e.activities.flatMap(o=>o.stories.filter(s=>s.id===t).map(s=>({activity:o,story:s})));return n.length===1?n[0]:void 0},At=e=>{const t=e.lastIndexOf(".");return t>=0?e.slice(t+1):e},ae=e=>`${e.activity.id}.${e.story.id}.${e.step.id}`,fe=(e,t,i)=>`${e.id}.${t.id}.${i.id}`,S=(e,t)=>{if(t===void 0)return;const i=Je(t,3);if(i){const[o,s,r]=i;if(o===void 0||s===void 0||r===void 0)return;const a=e.activities.find(v=>v.id===o),d=a?.stories.find(v=>v.id===s),p=d?d.steps.findIndex(v=>v.id===r):-1,c=d&&p>=0?d.steps[p]:void 0;return a&&d&&c?{activity:a,story:d,step:c,stepIndex:p}:void 0}if(t.includes("."))return;const n=B(e).filter(o=>o.step.id===t);return n.length===1?n[0]:void 0},E=(e,t)=>{if(t!==void 0){for(const i of H(e)){const n=i.screen.previews.find(o=>o.id===t);if(n)return{owner:{kind:"screen",...i},preview:n}}for(const i of B(e)){const n=F(i.step).find(o=>o.id===t);if(n)return{owner:{kind:"step",...i},preview:n}}}},It=e=>[...H(e).flatMap(t=>t.screen.previews),...B(e).flatMap(t=>F(t.step))],_t=e=>It(e).flatMap(t=>(t.notes??[]).map(i=>i.id)),B=e=>e.activities.flatMap(t=>t.stories.flatMap(i=>i.steps.map((n,o)=>({activity:t,story:i,step:n,stepIndex:o})))),Pt=e=>B(e).map(t=>t.step.id),Oe=y(u(),x(1)),Dt=e=>{const t=qi(b({noteId:Oe}),e.payload);return`${e.type}|${t.success?t.output.noteId:JSON.stringify(e.payload)}`},m={SET_ACTIVITY_NAME:w("SET_ACTIVITY_NAME","activity",b({name:y(u(),x(1))})),SET_ACTIVITY_DESCRIPTION:w("SET_ACTIVITY_DESCRIPTION","activity",b({description:u()})),SET_STORY_NAME:w("SET_STORY_NAME","story",b({name:y(u(),x(1))})),SET_STORY_DESCRIPTION:w("SET_STORY_DESCRIPTION","story",b({description:u()})),SET_STEP_NAME:w("SET_STEP_NAME","step",b({name:y(u(),x(1))})),SET_STEP_DESCRIPTION:w("SET_STEP_DESCRIPTION","step",b({description:u()})),SET_PREVIEW_KIND:w("SET_PREVIEW_KIND","preview",b({kind:ue(ht)})),SET_PREVIEW_VIEWPORT:w("SET_PREVIEW_VIEWPORT","preview",b({viewport:ue(vt)})),SET_PREVIEW_LABEL:w("SET_PREVIEW_LABEL","preview",b({label:u()})),REORDER_ACTIVITY:w("REORDER_ACTIVITY","activity",b({after:se(u())}),{mode:"sequence"}),REORDER_STORY:w("REORDER_STORY","story",b({after:se(u())}),{mode:"sequence"}),REORDER_STEP:w("REORDER_STEP","step",b({after:se(u())}),{mode:"sequence"}),MOVE_STORY:w("MOVE_STORY","story",b({toActivity:y(u(),x(1)),after:se(u())}),{mode:"sequence"}),MOVE_STEP:w("MOVE_STEP","step",b({toStory:y(u(),x(1)),after:se(u())}),{mode:"sequence"}),ADD_ACTIVITY:w("ADD_ACTIVITY","page",b({id:_,name:y(u(),x(1)),description:g(u())}),{dedupeKey:oe}),ADD_STORY:w("ADD_STORY","activity",b({id:_,name:y(u(),x(1)),description:g(u())}),{dedupeKey:oe}),ADD_STEP:w("ADD_STEP","story",b({id:_,name:y(u(),x(1)),description:g(u()),panes:g(N(Dn))}),{dedupeKey:oe}),ADD_PREVIEW:w("ADD_PREVIEW","step",yt,{dedupeKey:oe}),DELETE_ACTIVITY:w("DELETE_ACTIVITY","activity",b({})),DELETE_STORY:w("DELETE_STORY","story",b({})),DELETE_STEP:w("DELETE_STEP","step",b({})),DELETE_PREVIEW:w("DELETE_PREVIEW","preview",b({})),ADD_UI_NOTE:w("ADD_UI_NOTE",O,b({id:_,body:Ne,createdAt:g(gt)}),{dedupeKey:oe}),SET_UI_NOTE_BODY:w("SET_UI_NOTE_BODY",O,b({noteId:Oe,body:Ne}),{dedupeKey:Dt}),DELETE_UI_NOTE:w("DELETE_UI_NOTE",O,b({noteId:Oe}),{dedupeKey:Dt})},W={setActivityName:(e,t)=>({type:"SET_ACTIVITY_NAME",target:{type:"activity",id:e},payload:{name:t}}),setActivityDescription:(e,t)=>({type:"SET_ACTIVITY_DESCRIPTION",target:{type:"activity",id:e},payload:{description:t}}),setStoryName:(e,t)=>({type:"SET_STORY_NAME",target:{type:"story",id:e},payload:{name:t}}),setStoryDescription:(e,t)=>({type:"SET_STORY_DESCRIPTION",target:{type:"story",id:e},payload:{description:t}}),setStepName:(e,t)=>({type:"SET_STEP_NAME",target:{type:"step",id:e},payload:{name:t}}),setStepDescription:(e,t)=>({type:"SET_STEP_DESCRIPTION",target:{type:"step",id:e},payload:{description:t}}),setPreviewViewport:(e,t)=>({type:"SET_PREVIEW_VIEWPORT",target:{type:"preview",id:e},payload:{viewport:t}}),setPreviewKind:(e,t)=>({type:"SET_PREVIEW_KIND",target:{type:"preview",id:e},payload:{kind:t}}),setPreviewLabel:(e,t)=>({type:"SET_PREVIEW_LABEL",target:{type:"preview",id:e},payload:{label:t}}),reorderActivity:(e,t)=>({type:"REORDER_ACTIVITY",target:{type:"activity",id:e},payload:{after:t}}),reorderStory:(e,t)=>({type:"REORDER_STORY",target:{type:"story",id:e},payload:{after:t}}),reorderStep:(e,t)=>({type:"REORDER_STEP",target:{type:"step",id:e},payload:{after:t}}),moveStep:(e,t,i)=>({type:"MOVE_STEP",target:{type:"step",id:e},payload:{toStory:t,after:i}}),moveStory:(e,t,i)=>({type:"MOVE_STORY",target:{type:"story",id:e},payload:{toActivity:t,after:i}}),addActivity:(e,t,i)=>({type:"ADD_ACTIVITY",target:{type:"page",id:"prototype"},payload:{id:e,name:t,...i===void 0?{}:{description:i}}}),addStory:(e,t,i,n)=>({type:"ADD_STORY",target:{type:"activity",id:e},payload:{id:t,name:i,...n===void 0?{}:{description:n}}}),addStep:(e,t,i,n)=>({type:"ADD_STEP",target:{type:"story",id:e},payload:{id:t,name:i,...n===void 0?{}:{panes:n}}}),addPreview:(e,t)=>({type:"ADD_PREVIEW",target:{type:"step",id:e},payload:{...t}}),deleteActivity:e=>({type:"DELETE_ACTIVITY",target:{type:"activity",id:e},payload:{}}),deleteStory:e=>({type:"DELETE_STORY",target:{type:"story",id:e},payload:{}}),deleteStep:e=>({type:"DELETE_STEP",target:{type:"step",id:e},payload:{}}),deletePreview:e=>({type:"DELETE_PREVIEW",target:{type:"preview",id:e},payload:{}}),addUiNote:(e,t,i,n)=>({type:"ADD_UI_NOTE",target:{type:O,id:re(e)},payload:{id:t,body:i,...n===void 0?{}:{createdAt:n}}}),setUiNoteBody:(e,t,i)=>({type:"SET_UI_NOTE_BODY",target:{type:O,id:re(e)},payload:{noteId:t,body:i}}),deleteUiNote:(e,t)=>({type:"DELETE_UI_NOTE",target:{type:O,id:re(e)},payload:{noteId:t}})},Rt=(e,t)=>{const i=Fi(m,t);if(i===null)return null;const n=i.target.id;switch(i.type){case"SET_ACTIVITY_NAME":return G(e,n,o=>({...o,name:i.payload.name}));case"SET_ACTIVITY_DESCRIPTION":return G(e,n,o=>({...o,description:i.payload.description}));case"SET_STORY_NAME":return j(e,n,o=>({...o,name:i.payload.name}));case"SET_STORY_DESCRIPTION":return j(e,n,o=>({...o,description:i.payload.description}));case"SET_STEP_NAME":return ge(e,n,o=>({...o,name:i.payload.name}));case"SET_STEP_DESCRIPTION":return ge(e,n,o=>({...o,description:i.payload.description}));case"SET_PREVIEW_KIND":return ee(e,n,o=>({...o,kind:i.payload.kind}));case"SET_PREVIEW_VIEWPORT":return ee(e,n,o=>({...o,viewport:i.payload.viewport}));case"SET_PREVIEW_LABEL":return ee(e,n,o=>({...o,label:i.payload.label}));case"REORDER_ACTIVITY":{const{after:o}=i.payload,s=de(e.activities,n,o);return s===null?null:{...e,activities:s}}case"REORDER_STORY":{const{after:o}=i.payload,s=$(e,n);if(!s)return null;const r=o===null?null:$(e,o);if(o!==null&&(!r||r.activity!==s.activity))return null;const a=de(s.activity.stories,s.story.id,r?.story.id??null);return a===null?null:G(e,s.activity.id,d=>({...d,stories:a}))}case"REORDER_STEP":{const{after:o}=i.payload,s=S(e,n);if(!s)return null;const r=o===null?null:S(e,o);if(o!==null&&(!r||r.story!==s.story))return null;const a=de(s.story.steps,s.step.id,r?.step.id??null);return a===null?null:j(e,C(s.activity.id,s.story.id),d=>({...d,steps:a}))}case"MOVE_STORY":{const{toActivity:o,after:s}=i.payload,r=$(e,n);if(!r)return null;const a=e.activities.find(v=>v.id===o);if(!a)return null;const d=s===null?null:$(e,s);if(s!==null&&(!d||d.activity!==a))return null;const p=d?.story.id??null;if(r.activity.id===o){const v=de(r.activity.stories,r.story.id,p);return v===null?null:G(e,o,f=>({...f,stories:v}))}if(a.stories.some(v=>v.id===r.story.id))return null;const c=Me(a.stories,r.story,p);return Ce(e,v=>v.id===r.activity.id?{...v,stories:v.stories.filter(f=>f.id!==At(n))}:v.id===o?{...v,stories:c}:v)}case"MOVE_STEP":{const{toStory:o,after:s}=i.payload,r=S(e,n);if(!r)return null;const a=$(e,o);if(!a)return null;const d=s===null?null:S(e,s);if(s!==null&&(!d||d.story!==a.story))return null;const p=d?.step.id??null;if(r.story===a.story){const v=de(r.story.steps,r.step.id,p);return v===null?null:j(e,o,f=>({...f,steps:v}))}if(a.story.steps.some(v=>v.id===r.step.id))return null;const c=Me(a.story.steps,r.step,p);return Ce(e,v=>({...v,stories:v.stories.map(f=>f===r.story?{...f,steps:f.steps.filter(I=>I.id!==At(n))}:f===a.story?{...f,steps:c}:f)}))}case"ADD_ACTIVITY":{const o=i.payload;if(e.activities.some(r=>r.id===o.id))return e;const s={id:o.id,name:o.name,...o.description===void 0?{}:{description:o.description},stories:[]};return{...e,activities:[...e.activities,s]}}case"ADD_STORY":{const o=i.payload,s=e.activities.find(a=>a.id===n);if(!s)return null;if(s.stories.some(a=>a.id===o.id))return e;const r={id:o.id,name:o.name,...o.description===void 0?{}:{description:o.description},steps:[]};return G(e,n,a=>({...a,stories:[...a.stories,r]}))}case"ADD_STEP":{const o=i.payload,s=$(e,n)?.story;if(!s)return null;if(s.steps.some(d=>d.id===o.id))return e;const r=o.panes??[],a={id:o.id,name:o.name,...o.description===void 0?{}:{description:o.description},panes:r};return Bn(e,a)?j(e,n,d=>({...d,steps:[...d.steps,a]})):null}case"ADD_PREVIEW":{const o=i.payload,s=S(e,n)?.step;return s?F(s).some(r=>r.id===o.id)?e:E(e,o.id)?null:ge(e,n,r=>({...r,panes:[...r.panes,{material:o}]})):null}case"DELETE_ACTIVITY":{const o=n;return e.activities.some(s=>s.id===o)?{...e,activities:e.activities.filter(s=>s.id!==o)}:null}case"DELETE_STORY":{const o=$(e,n);return o?G(e,o.activity.id,s=>({...s,stories:s.stories.filter(r=>r.id!==o.story.id)})):null}case"DELETE_STEP":{const o=S(e,n);return o?j(e,C(o.activity.id,o.story.id),s=>({...s,steps:s.steps.filter(r=>r.id!==o.step.id)})):null}case"DELETE_PREVIEW":{const o=E(e,n);return o?Nt(e,o.owner,s=>s.filter(r=>r.id!==o.preview.id)):null}case"ADD_UI_NOTE":{const{id:o,body:s,createdAt:r}=i.payload,a=Q(n),d=a===void 0?void 0:E(e,a.previewId);if(a===void 0||d===void 0)return null;if(d.preview.notes?.some(c=>c.id===o&&c.selector===a.selector))return e;if(_t(e).includes(o))return null;const p={id:o,selector:a.selector,...a.text===void 0?{}:{text:a.text},body:s,...r===void 0?{}:{createdAt:r}};return ee(e,d.preview.id,c=>({...c,notes:[...c.notes??[],p]}))}case"SET_UI_NOTE_BODY":{const{noteId:o,body:s}=i.payload,r=Q(n),a=r===void 0?void 0:E(e,r.previewId);return a?.preview.notes?.some(d=>d.id===o)?ee(e,a.preview.id,d=>({...d,notes:(d.notes??[]).map(p=>p.id===o?{...p,body:s}:p)})):null}case"DELETE_UI_NOTE":{const{noteId:o}=i.payload,s=Q(n),r=s===void 0?void 0:E(e,s.previewId);return r?.preview.notes?.some(a=>a.id===o)?ee(e,r.preview.id,a=>{const d=(a.notes??[]).filter(v=>v.id!==o),{notes:p,...c}=a;return d.length===0?c:{...c,notes:d}}):null}default:return Gi(i)}},Ce=(e,t)=>({...e,activities:e.activities.map(t)}),G=(e,t,i)=>{const n=t;return e.activities.some(o=>o.id===n)?Ce(e,o=>o.id===n?i(o):o):null},j=(e,t,i)=>{const n=$(e,t);if(!n)return null;const o=n.story.id;return G(e,n.activity.id,s=>({...s,stories:s.stories.map(r=>r.id===o?i(r):r)}))},ge=(e,t,i)=>{const n=S(e,t);if(!n)return null;const o=n.step.id;return j(e,C(n.activity.id,n.story.id),s=>({...s,steps:s.steps.map(r=>r.id===o?i(r):r)}))},ee=(e,t,i)=>{const n=E(e,t);if(!n)return null;const o=n.preview.id;return Nt(e,n.owner,s=>s.map(r=>r.id===o?i(r):r))},Bn=(e,t)=>{const i=F(t).map(n=>n.id);return Yn(e,t)===null&&new Set(i).size===i.length&&!i.some(n=>E(e,n))},Nt=(e,t,i)=>{if(t.kind==="step")return ge(e,ae(t),o=>{const s=new Map(i([...F(o)]).map(r=>[r.id,r]));return{...o,panes:o.panes.flatMap(r=>{if(J(r))return[r];const a=s.get(r.material.id);return a?[{material:a}]:[]})}});const n=t.screen.id;return{...e,apps:e.apps.map(o=>o.id===t.app.id?{...o,screens:o.screens.map(s=>s.id===n?{...s,previews:i(s.previews)}:s)}:o)}},de=(e,t,i)=>{const n=e.findIndex(r=>r.id===t);if(n<0||i!==null&&!e.some(r=>r.id===i))return null;if(t===i)return[...e];const o=e[n];if(o===void 0)return null;const s=e.filter(r=>r.id!==t);return Me(s,o,i)},Me=(e,t,i)=>{const n=[...e],o=i===null?-1:n.findIndex(s=>s.id===i);return n.splice(o+1,0,t),n},Ot={"iphone-se":"iPhone SE","iphone-16":"iPhone 16","iphone-16-pro-max":"iPhone 16 Pro Max","pixel-7":"Pixel 7","galaxy-s24":"Galaxy S24","ipad-mini":"iPad mini","ipad-air-11":'iPad Air 11"',"ipad-pro-11":'iPad Pro 11"',"ipad-pro-13":'iPad Pro 13"'},Wn={"laptop-13":'13" laptop',"laptop-15":'15" laptop',"full-hd":"Full HD","monitor-27":'27" monitor',ultrawide:"Ultrawide"},qn={"laptop-13":"13 \u30A4\u30F3\u30C1 \u30CE\u30FC\u30C8","laptop-15":"15 \u30A4\u30F3\u30C1 \u30CE\u30FC\u30C8","full-hd":"\u30D5\u30EB HD","monitor-27":"27 \u30A4\u30F3\u30C1 \u30E2\u30CB\u30BF\u30FC",ultrawide:"\u30A6\u30EB\u30C8\u30E9\u30EF\u30A4\u30C9"},me=ji({en:{renameActivity:"Rename Activity",updateActivityDescription:"Update Activity description",renameStory:"Rename UserStory",updateStoryDescription:"Update UserStory description",renameStep:"Rename Step",updateStepDescription:"Update Step description",changePreviewKind:"Change Preview kind",changePreviewViewport:"Change Preview viewport",changePreviewLabel:"Change Preview label",moveStory:"Move UserStory",moveStep:"Move Step",deleteTitle:"Delete",reorderTitle:e=>`Reorder ${e}`,addTitle:e=>`Add ${e}`,toFront:"\u2192 To the front",afterName:e=>`\u2192 Right after "${e}"`,unknownTarget:"(unknown target)",activityGroup:"Activity",storyGroup:"UserStory",stepGroup:"Step",screenGroup:"Screen",openInApp:"Open this screen in the app view",previewGroup:"Preview",pageGroup:"Page",uiGroup:"UI",targetLabel:(e,t)=>`${e} \xB7 ${t}`,targetMissing:(e,t)=>`${e} \xB7 ${t} (missing)`,noActivityBefore:"There are no Activities yet. Add ",noActivityAfter:" to the base JSON, or ask the agent.",deleteStepAria:"Delete step",addStepButton:"+ Step",stepNameLabel:"Step name",descriptionLabel:"Description",descriptionPlaceholder:"What happens in this Step (click to edit)",newStepName:"New step",viewLabel:"View",viewScenario:"Scenario",viewApp:"App",viewScenarioHint:"Follow one user story step by step",viewAppHint:"Use the UI as one app, whatever the scenario",appScreens:"Screens",appScreensHint:"Pick a screen to start from, then move around through the UI itself.",appSelectLabel:"App",appOutsideBrowser:"Outside the browser",noStepBefore:"There are no Steps yet. A Prototype has the meaning structure ",noStepAfter:" \u2014 one Step is one moment of the story: the screen the user is on and what they have at hand. Add a Step to the base JSON, and its screen will appear here.",noScreens:"This product has no screens yet. Declare its apps and their screens under apps[].screens in the base JSON, and they will appear here.",noPreviewMetadata:"No preview metadata \u2014 ask the agent to add it.",storyWithoutSteps:"This UserStory has no Steps yet, so there is no screen to show. Add one with + Step, or ask the agent to prototype it.",pageActor:e=>`Used by ${e}`,maximize:"Maximize",restore:"Restore size",maximizeHint:"Show the preview alone across the tab \xB7 Esc to restore",situation:"Situation",uiComment:"Comment on UI",uiCommentHint:"Click any part of the preview to comment on it \xB7 Esc to finish",uiCommentPin:(e,t)=>`Comment ${e}: ${t}`,uiCommentAs:"What it is",uiCommentFeedback:"Review comment",uiCommentFeedbackHint:"Sent to the Agent as a message. Gone once it is reflected.",uiCommentNote:"Note",uiCommentNoteHint:"Kept on the element as part of the prototype, shown as a badge in the scenario view.",uiNoteSubmit:"Keep",uiNotes:e=>e===1?"1 note":`${e} notes`,uiNotesOn:e=>`Notes on ${e}`,uiNoteDate:e=>Ct("en-US",e),deleteUiNoteAria:"Delete the note",editUiNoteAria:"Edit the note",editUiNoteLabel:"Note",editUiNoteHint:"Ctrl/Cmd + Enter to save, Esc to close",saveUiNote:"Save",cancelUiNote:"Cancel",closeUiNotes:"Close",addUiNote:"Add a note",editUiNote:"Edit a note",deleteUiNote:"Delete a note",mailFrom:"From",mailTo:"To",mailCc:"Cc",mailDate:"Date",demo:"Demo",demoHint:"Use the app in a browser across the tab, with nothing else on screen \xB7 Esc to finish",exitDemo:"Exit demo",browserBack:"Back",browserForward:"Forward",browserReload:"Reload",browserAddress:"Address",browserTabs:"Tabs",newTab:"New tab",closeTab:"Close tab",browserProfile:e=>`Profile: ${e}`,browserGuest:"Guest",newTabShortcuts:"Pages of this app",unreachableTitle:"This site can\u2019t be reached",unreachableBody:"No page of the prototype has this address.",device:"Device",deviceHint:"The window the app runs in: a page taller than it scrolls inside, as on the device",deviceName:e=>Ot[e]??Wn[e]??e,deviceZoom:e=>`Shown at ${e}% to fit`,actions:"Actions",actionsHint:"Make the screen do something in one go, e.g. fill its form with sample data"},ja:{renameActivity:"Activity \u540D\u3092\u5909\u66F4",updateActivityDescription:"Activity \u306E\u8AAC\u660E\u3092\u66F4\u65B0",renameStory:"UserStory \u540D\u3092\u5909\u66F4",updateStoryDescription:"UserStory \u306E\u8AAC\u660E\u3092\u66F4\u65B0",renameStep:"Step \u540D\u3092\u5909\u66F4",updateStepDescription:"Step \u306E\u8AAC\u660E\u3092\u66F4\u65B0",changePreviewKind:"Preview \u306E\u7A2E\u5225\u3092\u5909\u66F4",changePreviewViewport:"Preview \u306E\u30D3\u30E5\u30FC\u30DD\u30FC\u30C8\u3092\u5909\u66F4",changePreviewLabel:"Preview \u306E\u30E9\u30D9\u30EB\u3092\u5909\u66F4",moveStory:"UserStory \u3092\u79FB\u52D5",moveStep:"Step \u3092\u79FB\u52D5",deleteTitle:"\u524A\u9664",reorderTitle:e=>`${e} \u306E\u9806\u5E8F\u3092\u5909\u66F4`,addTitle:e=>`${e} \u3092\u8FFD\u52A0`,toFront:"\u2192 \u5148\u982D\u3078",afterName:e=>`\u2192 "${e}" \u306E\u76F4\u5F8C\u3078`,unknownTarget:"(unknown target)",activityGroup:"Activity",storyGroup:"UserStory",stepGroup:"Step",screenGroup:"\u753B\u9762",openInApp:"\u3053\u306E\u753B\u9762\u3092\u30A2\u30D7\u30EA\u30D3\u30E5\u30FC\u3067\u958B\u304F",previewGroup:"Preview",pageGroup:"Page",uiGroup:"UI",targetLabel:(e,t)=>`${e} \xB7 ${t}`,targetMissing:(e,t)=>`${e} \xB7 ${t} (missing)`,noActivityBefore:"Activity \u304C\u307E\u3060\u3042\u308A\u307E\u305B\u3093\u3002base JSON \u306E ",noActivityAfter:" \u3092\u8FFD\u52A0\u3059\u308B\u304B\u3001Agent \u306B\u4F9D\u983C\u3057\u3066\u304F\u3060\u3055\u3044\u3002",deleteStepAria:"\u30B9\u30C6\u30C3\u30D7\u3092\u524A\u9664",addStepButton:"+ Step",stepNameLabel:"Step \u540D",descriptionLabel:"\u8AAC\u660E",descriptionPlaceholder:"\u3053\u306E Step \u3067\u4F55\u304C\u8D77\u304D\u308B\u304B\uFF08\u30AF\u30EA\u30C3\u30AF\u3057\u3066\u7DE8\u96C6\uFF09",newStepName:"\u65B0\u3057\u3044\u30B9\u30C6\u30C3\u30D7",viewLabel:"\u8868\u793A",viewScenario:"\u30B7\u30CA\u30EA\u30AA",viewApp:"\u30A2\u30D7\u30EA",viewScenarioHint:"\u30E6\u30FC\u30B6\u30FC\u30B9\u30C8\u30FC\u30EA\u30FC\u306B\u6CBF\u3063\u3066 Step \u3092\u9806\u306B\u305F\u3069\u308B",viewAppHint:"\u30B7\u30CA\u30EA\u30AA\u306B\u95A2\u4FC2\u306A\u304F\u3001UI \u3092 1 \u3064\u306E\u30A2\u30D7\u30EA\u3068\u3057\u3066\u89E6\u308B",appScreens:"\u753B\u9762",appScreensHint:"\u8D77\u70B9\u306B\u3059\u308B\u753B\u9762\u3092\u9078\u3073\u3001\u3042\u3068\u306F UI \u306E\u30EA\u30F3\u30AF\u3067\u79FB\u52D5\u3057\u307E\u3059\u3002",appSelectLabel:"\u30A2\u30D7\u30EA",appOutsideBrowser:"\u30D6\u30E9\u30A6\u30B6\u4EE5\u5916",noStepBefore:"Step \u304C\u307E\u3060\u3042\u308A\u307E\u305B\u3093\u3002Prototype \u306F ",noStepAfter:" \u306E\u610F\u5473\u69CB\u9020\u3092\u6301\u3061\u30011 Step = \u30B7\u30CA\u30EA\u30AA\u306E 1 \u5834\u9762\uFF08\u30E6\u30FC\u30B6\u30FC\u304C\u3044\u308B\u753B\u9762\u3068\u3001\u624B\u5143\u306B\u3042\u308B\u3082\u306E\uFF09\u3067\u3059\u3002base JSON \u306B Step \u3092\u8FFD\u52A0\u3059\u308B\u3068\u3001\u3053\u3053\u306B\u305D\u306E\u753B\u9762\u304C\u73FE\u308C\u307E\u3059\u3002",noScreens:"\u3053\u306E\u30D7\u30ED\u30C0\u30AF\u30C8\u306B\u306F\u307E\u3060\u753B\u9762\u304C\u3042\u308A\u307E\u305B\u3093\u3002base JSON \u306E apps[].screens \u306B\u30A2\u30D7\u30EA\u3068\u753B\u9762\u3092\u5BA3\u8A00\u3059\u308B\u3068\u3001\u3053\u3053\u306B\u73FE\u308C\u307E\u3059\u3002",noPreviewMetadata:"preview metadata \u304C\u3042\u308A\u307E\u305B\u3093 \u2014 \u8FFD\u52A0\u306F Agent \u306B\u4F9D\u983C\u3057\u3066\u304F\u3060\u3055\u3044",storyWithoutSteps:"\u3053\u306E UserStory \u306B\u306F\u307E\u3060 Step \u304C\u306A\u304F\u3001\u898B\u305B\u308B\u753B\u9762\u304C\u3042\u308A\u307E\u305B\u3093\u3002+ Step \u3067\u8FFD\u52A0\u3059\u308B\u304B\u3001Agent \u306B\u30D7\u30ED\u30C8\u30BF\u30A4\u30D7\u3092\u4F9D\u983C\u3057\u3066\u304F\u3060\u3055\u3044\u3002",pageActor:e=>`\u5229\u7528\u8005: ${e}`,maximize:"\u6700\u5927\u5316",restore:"\u5143\u306E\u30B5\u30A4\u30BA\u306B\u623B\u3059",maximizeHint:"\u30D7\u30EC\u30D3\u30E5\u30FC\u3060\u3051\u3092\u30BF\u30D6\u3044\u3063\u3071\u3044\u306B\u8868\u793A \xB7 Esc \u3067\u623B\u308B",situation:"\u72B6\u6CC1",uiComment:"UI \u306B\u30B3\u30E1\u30F3\u30C8",uiCommentHint:"\u30D7\u30EC\u30D3\u30E5\u30FC\u306E\u8981\u7D20\u3092\u30AF\u30EA\u30C3\u30AF\u3057\u3066\u30B3\u30E1\u30F3\u30C8 \xB7 Esc \u3067\u7D42\u4E86",uiCommentPin:(e,t)=>`\u30B3\u30E1\u30F3\u30C8 ${e}: ${t}`,uiCommentAs:"\u30B3\u30E1\u30F3\u30C8\u306E\u7A2E\u985E",uiCommentFeedback:"\u30EC\u30D3\u30E5\u30FC\u30B3\u30E1\u30F3\u30C8",uiCommentFeedbackHint:"Agent \u3078\u306E\u30E1\u30C3\u30BB\u30FC\u30B8\u3068\u3057\u3066\u9001\u4FE1\u3055\u308C\u307E\u3059\u3002\u53CD\u6620\u3055\u308C\u308B\u3068\u6D88\u3048\u307E\u3059\u3002",uiCommentNote:"\u30E1\u30E2",uiCommentNoteHint:"\u30D7\u30ED\u30C8\u30BF\u30A4\u30D7\u306E\u4E00\u90E8\u3068\u3057\u3066\u8981\u7D20\u306B\u6B8B\u308A\u3001\u30B7\u30CA\u30EA\u30AA\u30D3\u30E5\u30FC\u3067\u30D0\u30C3\u30B8\u3068\u3057\u3066\u8868\u793A\u3055\u308C\u307E\u3059\u3002",uiNoteSubmit:"\u6B8B\u3059",uiNotes:e=>`\u30E1\u30E2 ${e} \u4EF6`,uiNotesOn:e=>`${e} \u306E\u30E1\u30E2`,uiNoteDate:e=>Ct("ja-JP",e),deleteUiNoteAria:"\u30E1\u30E2\u3092\u524A\u9664",editUiNoteAria:"\u30E1\u30E2\u3092\u7DE8\u96C6",editUiNoteLabel:"\u30E1\u30E2",editUiNoteHint:"Ctrl/Cmd + Enter \u3067\u4FDD\u5B58\u3001Esc \u3067\u9589\u3058\u308B",saveUiNote:"\u4FDD\u5B58",cancelUiNote:"\u30AD\u30E3\u30F3\u30BB\u30EB",closeUiNotes:"\u9589\u3058\u308B",addUiNote:"\u30E1\u30E2\u3092\u8FFD\u52A0",editUiNote:"\u30E1\u30E2\u3092\u7DE8\u96C6",deleteUiNote:"\u30E1\u30E2\u3092\u524A\u9664",mailFrom:"\u5DEE\u51FA\u4EBA",mailTo:"\u5B9B\u5148",mailCc:"Cc",mailDate:"\u65E5\u6642",demo:"\u30C7\u30E2",demoHint:"\u307B\u304B\u306B\u4F55\u3082\u51FA\u3055\u305A\u3001\u30BF\u30D6\u3044\u3063\u3071\u3044\u306E\u30D6\u30E9\u30A6\u30B6\u3067\u30A2\u30D7\u30EA\u3092\u89E6\u308B \xB7 Esc \u3067\u7D42\u4E86",exitDemo:"\u30C7\u30E2\u3092\u7D42\u4E86",browserBack:"\u623B\u308B",browserForward:"\u9032\u3080",browserReload:"\u518D\u8AAD\u307F\u8FBC\u307F",browserAddress:"\u30A2\u30C9\u30EC\u30B9",browserTabs:"\u30BF\u30D6",newTab:"\u65B0\u3057\u3044\u30BF\u30D6",closeTab:"\u30BF\u30D6\u3092\u9589\u3058\u308B",browserProfile:e=>`\u30D7\u30ED\u30D5\u30A3\u30FC\u30EB: ${e}`,browserGuest:"\u30B2\u30B9\u30C8",newTabShortcuts:"\u3053\u306E\u30A2\u30D7\u30EA\u306E\u30DA\u30FC\u30B8",unreachableTitle:"\u3053\u306E\u30B5\u30A4\u30C8\u306B\u30A2\u30AF\u30BB\u30B9\u3067\u304D\u307E\u305B\u3093",unreachableBody:"\u30D7\u30ED\u30C8\u30BF\u30A4\u30D7\u306B\u3053\u306E\u30A2\u30C9\u30EC\u30B9\u306E\u30DA\u30FC\u30B8\u306F\u3042\u308A\u307E\u305B\u3093\u3002",device:"\u30C7\u30D0\u30A4\u30B9",deviceHint:"\u30A2\u30D7\u30EA\u3092\u52D5\u304B\u3059\u753B\u9762\u306E\u5927\u304D\u3055\u3002\u53CE\u307E\u3089\u306A\u3044\u30DA\u30FC\u30B8\u306F\u5B9F\u6A5F\u3068\u540C\u3058\u304F\u753B\u9762\u306E\u4E2D\u3067\u30B9\u30AF\u30ED\u30FC\u30EB\u3059\u308B",deviceName:e=>Ot[e]??qn[e]??e,deviceZoom:e=>`\u53CE\u307E\u308B\u3088\u3046 ${e}% \u3067\u8868\u793A`,actions:"\u30A2\u30AF\u30B7\u30E7\u30F3",actionsHint:"\u30D5\u30A9\u30FC\u30E0\u306B\u30B5\u30F3\u30D7\u30EB\u30C7\u30FC\u30BF\u3092\u5165\u308C\u308B\u306A\u3069\u3001\u753B\u9762\u306B\u7528\u610F\u3055\u308C\u305F\u64CD\u4F5C\u3092\u4E00\u5EA6\u306B\u884C\u3046"}}),Ct=(e,t)=>new Intl.DateTimeFormat(e,{dateStyle:"medium",timeStyle:"short"}).format(new Date(t)),Fn=["scenario","app"],V="view",le=e=>e[V]==="app"?"app":"scenario",Mt=e=>({[V]:e==="app"?"app":null}),pe=(e,t)=>e===void 0?`\u2192 "${t}"`:`"${e}" \u2192 "${t}"`,Gn=e=>({SET_ACTIVITY_NAME:(t,i)=>({title:e.renameActivity,tone:"update",body:pe(U(i,t.target.id)?.name,k(m.SET_ACTIVITY_NAME,t).name)}),SET_ACTIVITY_DESCRIPTION:(t,i)=>({title:e.updateActivityDescription,tone:"update",body:ye(U(i,t.target.id)?.description,k(m.SET_ACTIVITY_DESCRIPTION,t).description)}),SET_STORY_NAME:(t,i)=>({title:e.renameStory,tone:"update",body:pe($(i,t.target.id)?.story.name,k(m.SET_STORY_NAME,t).name)}),SET_STORY_DESCRIPTION:(t,i)=>({title:e.updateStoryDescription,tone:"update",body:ye($(i,t.target.id)?.story.description,k(m.SET_STORY_DESCRIPTION,t).description)}),SET_STEP_NAME:(t,i)=>({title:e.renameStep,tone:"update",body:pe(S(i,t.target.id)?.step.name,k(m.SET_STEP_NAME,t).name)}),SET_STEP_DESCRIPTION:(t,i)=>({title:e.updateStepDescription,tone:"update",body:ye(S(i,t.target.id)?.step.description,k(m.SET_STEP_DESCRIPTION,t).description)}),SET_PREVIEW_KIND:(t,i)=>({title:e.changePreviewKind,tone:"update",body:pe(E(i,t.target.id)?.preview.kind,k(m.SET_PREVIEW_KIND,t).kind)}),SET_PREVIEW_VIEWPORT:(t,i)=>({title:e.changePreviewViewport,tone:"update",body:pe(E(i,t.target.id)?.preview.viewport,k(m.SET_PREVIEW_VIEWPORT,t).viewport)}),SET_PREVIEW_LABEL:t=>({title:e.changePreviewLabel,tone:"update",body:`\u2192 "${k(m.SET_PREVIEW_LABEL,t).label}"`}),REORDER_ACTIVITY:t=>Ue(e,e.activityGroup,k(m.REORDER_ACTIVITY,t).after),REORDER_STORY:t=>Ue(e,e.storyGroup,k(m.REORDER_STORY,t).after),REORDER_STEP:t=>Ue(e,e.stepGroup,k(m.REORDER_STEP,t).after),MOVE_STORY:(t,i)=>({title:e.moveStory,tone:"move",body:`\u2192 ${U(i,k(m.MOVE_STORY,t).toActivity)?.name??k(m.MOVE_STORY,t).toActivity}`}),MOVE_STEP:(t,i)=>({title:e.moveStep,tone:"move",body:`\u2192 ${$(i,k(m.MOVE_STEP,t).toStory)?.story.name??k(m.MOVE_STEP,t).toStory}`}),ADD_ACTIVITY:t=>we(e,e.activityGroup,k(m.ADD_ACTIVITY,t).name),ADD_STORY:t=>we(e,e.storyGroup,k(m.ADD_STORY,t).name),ADD_STEP:t=>we(e,e.stepGroup,k(m.ADD_STEP,t).name),ADD_PREVIEW:t=>we(e,e.previewGroup,k(m.ADD_PREVIEW,t).label??k(m.ADD_PREVIEW,t).id),DELETE_ACTIVITY:(t,i)=>be(e,U(i,t.target.id)?.name),DELETE_STORY:(t,i)=>be(e,$(i,t.target.id)?.story.name),DELETE_STEP:(t,i)=>be(e,S(i,t.target.id)?.step.name),DELETE_PREVIEW:(t,i)=>be(e,E(i,t.target.id)?.preview.label),ADD_UI_NOTE:t=>({title:e.addUiNote,tone:"create",body:`+ "${Le(k(m.ADD_UI_NOTE,t).body)}"`}),SET_UI_NOTE_BODY:(t,i)=>{const{noteId:n,body:o}=k(m.SET_UI_NOTE_BODY,t);return{title:e.editUiNote,tone:"update",body:ye(Yt(i,n)?.body,o)}},DELETE_UI_NOTE:(t,i)=>{const{noteId:n}=k(m.DELETE_UI_NOTE,t),o=Yt(i,n);return{title:e.deleteUiNote,tone:"delete",body:o===void 0?e.unknownTarget:`\u2212 "${Le(o.body)}"`}}}),ye=(e,t)=>{const i=t.length>90?`${t.slice(0,90)}\u2026`:t;return e===void 0||e===""?`\u2192 "${i}"`:`"${Le(e)}" \u2192 "${i}"`},Le=e=>e.length>60?`${e.slice(0,60)}\u2026`:e,Ue=(e,t,i)=>({title:e.reorderTitle(t),tone:"move",body:i===null?e.toFront:e.afterName(i)}),we=(e,t,i)=>({title:e.addTitle(t),tone:"create",body:`+ "${i}"`}),be=(e,t)=>({title:e.deleteTitle,tone:"delete",body:t===void 0?e.unknownTarget:`\u2212 "${t}"`}),Lt=(e,t,i,n)=>{const o=Gn(e),s=Object.hasOwn(o,t.type)?o[t.type]:void 0,r=s?s(t,n??i):{title:t.type,tone:"meta"};return{title:r.title,targetLabel:Vt(e,i,t.target),tone:r.tone,...r.body===void 0?{}:{summary:r.body}}},Ut=e=>`${e.type} ${Y(e.target)} ${JSON.stringify(e.payload)}`,Vt=(e,t,i)=>{switch(i.type){case"activity":{const n=U(t,i.id);return n?e.targetLabel(e.activityGroup,n.name):e.targetMissing(e.activityGroup,i.id)}case"story":{const n=$(t,i.id)?.story;return n?e.targetLabel(e.storyGroup,n.name):e.targetMissing(e.storyGroup,i.id)}case"step":{const n=S(t,i.id)?.step;return n?e.targetLabel(e.stepGroup,n.name):e.targetMissing(e.stepGroup,i.id)}case"screen":{const n=L(t,i.id)?.screen;return n?e.targetLabel(e.screenGroup,n.title):e.targetMissing(e.screenGroup,i.id)}case"preview":{const n=E(t,i.id)?.preview;return n?e.targetLabel(e.previewGroup,n.label??n.id):e.targetMissing(e.previewGroup,i.id)}case"page":return e.targetLabel(e.pageGroup,He(t));case O:{const n=Q(i.id),o=n?E(t,n.previewId)?.preview:void 0;return n&&o?e.targetLabel(e.uiGroup,Ve(o,n)):e.targetMissing(e.uiGroup,i.id)}default:return e.targetLabel(i.type,i.id)}},Ve=(e,t)=>{const i=t.text===void 0?t.selector:`"${t.text}"`;return`${e.label??e.id} \u203A ${i}`},zt=(e,t)=>{const i=[];for(const n of e){if(n.target.type!==O)continue;const o=Q(n.target.id);!o||!t.includes(o.previewId)||i.push({id:n.id,previewId:o.previewId,selector:o.selector,number:i.length+1,body:Qe(n)})}return i},jn=(e,t)=>t.flatMap(i=>{const n=E(e,i)?.preview,o=new Map;for(const s of n?.notes??[])o.set(s.selector,[...o.get(s.selector)??[],s]);return n===void 0?[]:[...o].map(([s,r])=>({previewId:i,selector:s,label:Ve(n,{selector:s,...Kn(r)}),notes:r}))}),Kn=e=>{const t=[...e].reverse().find(i=>i.text!==void 0)?.text;return t===void 0?{}:{text:t}},Yt=(e,t)=>It(e).flatMap(i=>i.notes??[]).find(i=>i.id===t),Ht=(e,t)=>zt(e,t).length,Xn=/^[a-z][a-z0-9+.-]*:/i,Zn=e=>{const t=e.baseUrl?.trim(),i=Ki(e.title??"");return`${(t?t.startsWith("http")?t:`https://${t}`:`https://${i==="item"?"page":i}.example.com`).replace(/\/+$/,"")}/`},ke=(e,t)=>{const i=Zn(e);if(!t.url)return`${i}${t.id}`;if(Xn.test(t.url))return t.url;try{return decodeURI(new URL(t.url,i).href)}catch{return t.url}},Jn=e=>{switch(e.type){case"activity":return{[V]:null,activity:e.id};case"story":return{[V]:null,activity:null,story:e.id};case"step":return{[V]:null,activity:null,story:null,step:e.id};case"screen":return{screen:e.id};default:return null}},Bt=(e,t)=>{const i=e.kind==="screen"?[{type:"screen",id:e.screen.id}]:[{type:"activity",id:e.activity.id},{type:"story",id:C(e.activity.id,e.story.id)},...e.kind==="step"?[{type:"step",id:ae(e)}]:[]];for(const n of t?.panes??[])n.kind==="screen"&&i.push({type:"screen",id:n.screen.screen.id});return[...new Set(i.map(Y))].join(" ")},ze=",",Wt=e=>e.preview?.split(ze)??[],Qn=(e,t)=>e.kind===t.kind&&e.viewport===t.viewport,qt=(e,t,i)=>{const n=t.find(s=>i.includes(s.id));if(n)return n;const o=i.flatMap(s=>E(e,s)?.preview??[]);return t.find(s=>o.some(r=>Qn(s,r)))??t[0]},Ft=(e,t,i,n)=>{const o=t.screen.previews,s=i===void 0?qt(e,o,Wt(n)):o.find(a=>a.id===i);if(!s)return;const r=i===void 0&&o.length>1;return{kind:"screen",screen:t,preview:s,pinned:i!==void 0,tabs:r?o:[]}},Gt=e=>({layout:e.length>1?"side-by-side":"single",panes:e,shown:e.map(t=>t.preview)}),jt=(e,t,i)=>t.panes.flatMap(n=>{if(!J(n))return[{kind:"material",preview:n.material}];const o=L(e,n.screen),s=o&&Ft(e,o,n.preview,i);return s?[s]:[]}),Ye=(e,t,i)=>{if(t.kind==="screen"){const n=Ft(e,t,void 0,i);return Gt(n?[n]:[])}return Gt(jt(e,t.step,i))},eo=(e,t)=>e.panes.flatMap(i=>i.kind!=="screen"||i.tabs.length===0?[]:[i.tabs.some(n=>n.id===t)?t:i.preview.id]).join(ze),Kt=(e,t)=>{const i=new Map;for(const n of t){const o=E(e,n)?.owner;if(o?.kind!=="screen"||o.screen.actions.length===0)continue;const s=i.get(o.screen.id)??{screen:o.screen,previewIds:[]};s.previewIds.push(n),i.set(o.screen.id,s)}return[...i.values()].map(({screen:n,previewIds:o})=>({screen:n,previewIds:o,actions:n.actions}))},to=(e,t)=>[...F(t),...ve(e,t).flatMap(i=>i.screen.previews)],io=["activity","story","step","screen","preview"],no=(e,t,i)=>{switch(t){case"activity":return U(e,i)!==void 0;case"story":return $(e,i)!==void 0||e.activities.some(n=>n.stories.some(o=>o.id===i));case"step":return S(e,i)!==void 0||B(e).some(n=>n.step.id===i);case"screen":return L(e,i)!==void 0;case"preview":return E(e,i)!==void 0;default:return!1}},oo=(e,t)=>{let i;if(t.navigate!==null)i=t.navigate.includes("=")?t.navigate:`step=${t.navigate}`;else{const s=t.href?.trim()??"";if(s===""||s==="#"||s.toLowerCase().startsWith("javascript:"))return"no-destination";if(!s.startsWith("#"))return null;i=s}const n=_e(i),o=io.filter(s=>n[s]!==void 0);return o.length===0?t.navigate===null?null:"unknown-target":o.every(s=>no(e,s,n[s]??""))?null:"unknown-target"},so=(e,t)=>{const i=t.mail??{},n=[{label:e.mailFrom,value:i.from},{label:e.mailTo,value:i.to},{label:e.mailCc,value:i.cc},{label:e.mailDate,value:i.date}].flatMap(r=>r.value===void 0||r.value.trim()===""?[]:[{label:r.label,value:r.value}]),o=i.from?.replace(/<[^>]*>/g,"").replace(/["']/g,"").trim()||i.from?.trim(),s=o?Array.from(o)[0]?.toUpperCase():void 0;return{...i.subject===void 0||i.subject.trim()===""?{}:{subject:i.subject},...o?{sender:o}:{},...s===void 0?{}:{initial:s},rows:n}},Xt=(e,t)=>{const i=[];for(const n of t.activities){i.push({value:Y({type:"activity",id:n.id}),label:n.name,group:e.activityGroup});for(const o of n.stories){i.push({value:Y({type:"story",id:C(n.id,o.id)}),label:`${n.name} \u203A ${o.name}`,group:e.storyGroup});for(const s of o.steps)i.push({value:Y({type:"step",id:fe(n,o,s)}),label:`${o.name} \u203A ${s.name}`,group:e.stepGroup})}}for(const{app:n,screen:o}of H(t))i.push({value:Y({type:"screen",id:o.id}),label:`${n.name} \u203A ${o.title}`,group:e.screenGroup});return i},ro=(e,t,i)=>{const n=te(t,i);if(n?.kind==="screen"){const{screen:o}=n;return{value:Y({type:"screen",id:o.id}),label:o.title,group:e.screenGroup}}return n?.kind!=="step"?null:{value:Y({type:"step",id:ae(n)}),label:n.step.name,group:e.stepGroup}},te=(e,t)=>{if(le(t)==="app"){const s=L(e,t.screen);return s?{kind:"screen",...s}:void 0}const i=S(e,t.step);if(i)return{kind:"step",...i};const n=U(e,t.activity),o=n?.stories.find(s=>s.id===t.story||C(n.id,s.id)===t.story);return n&&o?{kind:"story",activity:n,story:o}:void 0},Zt=(e,t)=>{const i=(d,p)=>p===void 0?{title:d}:{actor:p,title:d};if(t.kind==="screen")return i(t.screen.title,t.app.actor);const{activity:n,story:o,step:s}=t,r=ve(e,s),a=r.length===1?r[0]:void 0;return i(a?.screen.title??s.name,s.actor??o.actor??n.actor??a?.app.actor)},ao=(e,t)=>{const i=t.actor??e.actor;return i===void 0?{title:t.name}:{actor:i,title:t.name}},He=e=>e.title??"UX Prototype",Jt=(e,t)=>(t?e.preview=t:delete e.preview,e),lo=(e,t,i)=>{if(!t)return;const n=jt(e,t,i).flatMap(o=>o.kind==="screen"&&!o.pinned?[o.preview.id]:[]);return n.length===0?void 0:n.join(ze)},Qt=(e,t)=>{const i=()=>{if(t.step===void 0&&t.story===void 0)return;const s=ei(e,{...t,[V]:""}),r=S(e,s.step);return r&&ve(e,r.step)[0]},n=L(e,t.screen)??i()??H(e)[0],o={...t,[V]:"app"};for(const s of["activity","story","step"])delete o[s];return n?o.screen=n.screen.id:delete o.screen,Jt(o,n&&qt(e,n.screen.previews,Wt(t))?.id)},po=(e,t,i)=>{const n=r=>Hn(r.step,t);if(i&&n(i))return i;const o=i?.story.steps??[],s=r=>{const a=o[r];return i&&a?{...i,step:a,stepIndex:r}:void 0};for(let r=(i?.stepIndex??0)+1;r<o.length;r+=1){const a=s(r);if(a&&n(a))return a}for(let r=(i?.stepIndex??0)-1;r>=0;r-=1){const a=s(r);if(a&&n(a))return a}return B(e).find(n)},ei=(e,t)=>{const i=U(e,t.activity),n=t.story,o=i?.stories.find(z=>z.id===n||C(i.id,z.id)===n),s=o&&i?{activity:i,story:o}:$(e,n),r=t.step,d=(s&&r?S(e,`${C(s.activity.id,s.story.id)}.${r}`):void 0)??S(e,r),p=t.screen,c=p===void 0?void 0:po(e,p,d);if(p!==void 0&&!c&&L(e,p))return Qt(e,{...t,[V]:"app"});const v=c??d,f=v?.activity??s?.activity??i??e.activities[0],I=v?.story??(s&&s.activity===f?s.story:void 0)??f?.stories[0],P=v?.step??I?.steps[0],T={...t};return delete T.screen,f?T.activity=f.id:delete T.activity,I&&f?T.story=$(e,I.id)?I.id:C(f.id,I.id):delete T.story,P&&I&&f?T.step=S(e,P.id)?P.id:fe(f,I,P):delete T.step,delete T[V],Jt(T,lo(e,P,t))},co=["activity","story","step","screen"],xe=(e,t)=>le(t)==="app"?Qt(e,t):ei(e,t),uo=(e,t)=>{const i=t.screen.previews.find(s=>s.kind==="browser");if(!i)return;let n;try{n=new URL(ke(e,i),"https://page.example.com")}catch{return}const o=n.pathname.split("/").filter(s=>s!=="").map(s=>{try{return decodeURIComponent(s)}catch{return s}});return{origin:n.origin,segments:o}},ti=()=>({screens:[],children:new Map}),Be=(e,t,i)=>{const[n,...o]=e.children.entries();if(e.screens.length===0&&n&&o.length===0&&i!=="/"){const[s,r]=n;return Be(r,`${t}/${s}`,`${i}/${s}`)}return{segment:t,path:i,screens:e.screens,children:[...e.children.entries()].map(([s,r])=>Be(r,`/${s}`,`${i==="/"?"":i}/${s}`))}},ho=e=>{const t=new Map;for(const[i,n]of e){const o=t.get(n.origin)??ti();t.set(n.origin,o);let s=o;for(const r of n.segments){const a=s.children.get(r)??ti();s.children.set(r,a),s=a}s.screens.push(i)}return[...t.entries()].map(([i,n])=>({origin:i,root:Be(n,"/","/")}))},vo=(e,t)=>{const i=t.screens.map(s=>({app:t,screen:s})),n=[],o=[];for(const s of i){const r=uo(e,s);r?n.push([s,r]):o.push(s)}return{app:t,screens:i,trees:ho(n),others:o}},ii=e=>e.apps.map(t=>vo(e,t)).filter(t=>t.screens.length>0),ni=(e,t)=>t?.kind!=="screen"?e[0]:e.find(i=>i.app.id===t.app.id)??e[0],fo=(e,t)=>{switch(t.type){case"activity":return U(e,t.id)!==void 0;case"story":return $(e,t.id)!==void 0;case"step":return S(e,t.id)!==void 0;case"screen":return L(e,t.id)!==void 0;case"preview":return E(e,t.id)!==void 0;case"page":return!0;case O:{const i=Q(t.id);return i!==void 0&&E(e,i.previewId)!==void 0}default:return!1}},oi=e=>{const t=me(e);return{kind:"view",name:"prototype",label:"UX Prototype",addable:!1,parseBase:$t,emptyBase:Tt,actions:m,apply:Rt,hasTarget:fo,canonicalTarget:(i,n)=>{if(n.type==="step"){const o=S(i,n.id);return o?{...n,id:ae(o)}:n}if(n.type==="story"){const o=$(i,n.id);return o?{...n,id:C(o.activity.id,o.story.id)}:n}if(n.type==="preview"){const o=E(i,n.id);return o?{...n,id:o.preview.id}:n}return n},describe:(i,n,o)=>Lt(t,i,n,o),serialize:Ut,resolveNavigation:xe,navigationHierarchy:co,navigationFor:(i,n)=>Jn(n),commentTargets:(i,n)=>Xt(t,i),currentTarget:(i,n)=>ro(t,i,n),title:He}},go=(e,t)=>{const i=t.flatMap(n=>{const o=Math.max(n.left,e.left)-e.left,s=Math.max(n.top,e.top)-e.top,r=Math.min(n.right,e.right)-e.left-o,a=Math.min(n.bottom,e.bottom)-e.top-s;return r>0&&a>0?[`M${o} ${s}h${r}v${a}h-${r}Z`]:[]});return i.length===0?"none":`path(evenodd, 'M0 0H${e.width}V${e.height}H0Z ${i.join(" ")}')`},Ee="data-dpk-modal",mo=e=>{try{return e.matches(":modal")}catch{return!1}},si=e=>{e.setAttribute(Ee,""),e.open||e.show()},ri=e=>{Object.hasOwn(e,"showModal")||Object.defineProperty(e,"showModal",{configurable:!0,value:()=>si(e)})},ai=(e,t)=>{if(!mo(t))return;const i=n=>{n.target===t&&(n.stopImmediatePropagation(),e.removeEventListener("close",i,!0))};e.addEventListener("close",i,!0),t.close(),si(t)},di=(e,t)=>{try{return Array.from(e.querySelectorAll(t))}catch{return[]}},yo=(e,t)=>{const i=Object.getOwnPropertyDescriptor(Object.getPrototypeOf(e),"value");i?.set?i.set.call(e,t):e.value=t},wo=e=>e instanceof HTMLInputElement&&(e.type==="checkbox"||e.type==="radio"),bo=(e,t)=>{if(wo(e)){const n=typeof t=="boolean"?t:e.value===t;return typeof t=="string"&&!n?!1:(e.checked=n,!0)}const i=String(t);return e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement?(yo(e,i),!0):(e.textContent=i,!1)},ko=(e,t)=>{const i=[];for(const[n,o]of Object.entries(t)){const s=di(e,n);s.length===0&&i.push(n);for(const r of s)bo(r,o)&&(r.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),r.dispatchEvent(new Event("change",{bubbles:!0})))}return i},xo=(e,t)=>{const i=[];for(const n of t){const[o]=di(e,n);o instanceof HTMLElement?o.click():i.push(n)}return i},Eo='a, button, input, select, textarea, label, summary, [role="button"], [role="link"], [role="tab"]',li=/^-?[A-Za-z_][\w-]*$/,pi=40,So=(e,t)=>{const i=e.closest(Eo);return i!==null&&i!==t&&t.contains(i)?i:e},Se=e=>{const t=e.replace(/\s+/g," ").trim();if(t==="")return;const i=Array.from(t);return i.length>pi?`${i.slice(0,pi).join("")}\u2026`:t},$o=e=>{const t=e.getAttribute("aria-label")??e.getAttribute("title");if(t)return Se(t);const i=e.tagName.toLowerCase();return Se(i==="input"||i==="textarea"||i==="select"?e.getAttribute("placeholder")??e.getAttribute("name")??"":i==="img"?e.getAttribute("alt")??"":e.textContent??"")},To=e=>{const t=e.getAttribute("id");if(t&&li.test(t))return`#${t}`;const i=e.tagName.toLowerCase(),n=Array.from(e.classList).filter(a=>li.test(a)).slice(0,2).map(a=>`.${a}`).join(""),o=e.parentElement,s=o?Array.from(o.children).filter(a=>a.tagName===e.tagName):[],r=s.length>1?`:nth-of-type(${s.indexOf(e)+1})`:"";return`${i}${n}${r}`},Ao=(e,t,i)=>{try{const n=e.querySelectorAll(t);return n.length===1&&n[0]===i}catch{return!1}},Io=(e,t)=>{const i=[];let n=e;for(;n!==null&&n!==t;){const s=To(n);if(i.unshift(s),s.startsWith("#")||Ao(t,i.join(" > "),e))break;n=n.parentElement}const o=$o(e);return{selector:i.length===0?":scope":i.join(" > "),tag:e.tagName.toLowerCase(),...o===void 0?{}:{text:o}}},_o=(e,t)=>{if(t===":scope")return e;try{return e.querySelector(t)}catch{return null}},ci=(e,t)=>{const i=xe(e,t),n=te(e,i);if(n?.kind!=="screen")return null;const[o]=Ye(e,n,i).shown;return o?.kind!=="browser"?null:{screen:n.screen.id,preview:o.id}},$e=(e,t)=>{const i=te(e,xe(e,{[V]:"app",...t}));return i?.kind==="screen"?i:void 0},Po=(e,t,i)=>{const n=dt(t,i);if(n===null)return null;const o=lt(n);for(const{screen:s}of H(e))for(const r of s.previews){if(r.kind!=="browser")continue;const a=dt(ke(e,r),i);if(a!==null&&lt(a)===o)return{screen:s.id,preview:r.id}}return null},Do=(e,t,i)=>t===void 0||t.kind==="new-tab"?i.newTab:t.kind==="unreachable"?rt(t.url):$e(e,t.page)?.screen.title??i.newTab,ui=(e,t)=>{if(t===void 0||t.kind==="new-tab")return"";if(t.kind==="unreachable")return t.url;const i=$e(e,t.page)?.screen.previews.find(n=>n.id===t.page.preview);return i===void 0?"":ke(e,i)},hi=e=>{const t=at(e);for(let i=t.index;i>=0;i-=1){const n=t.history[i];if(n?.kind==="page")return n.page}for(const i of e.tabs){const n=i.history[i.index];if(n?.kind==="page")return n.page}},Ro=(e,t)=>t===void 0?void 0:$e(e,t)?.app.actor,vi=(e,t,i,n=null)=>{const o=at(t),s=o.history[o.index],r=Ro(e,hi(t)??n??void 0);return{tabs:t.tabs.map(a=>({id:a.id,title:Do(e,a.history[a.index],i),url:ui(e,a.history[a.index]),active:a.id===o.id})),entry:s,url:ui(e,s),canBack:hn(t),canForward:un(t),...r===void 0?{}:{profile:r}}},No=e=>hi(e)??null,Oo=(e,t)=>{const i=t===null?void 0:$e(e,t),n=ni(ii(e),i),o=[],s=(r,a)=>{for(const{screen:d}of a.screens){const p=d.previews.find(c=>c.kind==="browser");p!==void 0&&o.push({title:d.title,url:`${r}${a.path==="/"?"":a.path}`,page:{screen:d.id,preview:p.id}})}for(const d of a.children)s(r,d)};for(const r of n?.trees??[])s(rt(r.origin),r.root);return o},A=(e,t,i,n)=>({id:t,deviceClass:e,width:i,height:n}),fi=[A("phone","iphone-se",375,667),A("phone","iphone-16",393,852),A("phone","iphone-16-pro-max",440,956),A("phone","pixel-7",412,915),A("phone","galaxy-s24",360,780),A("tablet","ipad-mini",744,1133),A("tablet","ipad-air-11",820,1180),A("tablet","ipad-pro-11",834,1194),A("tablet","ipad-pro-13",1024,1366),A("desktop","laptop-13",1280,800),A("desktop","laptop-15",1440,900),A("desktop","full-hd",1920,1080),A("desktop","monitor-27",2560,1440),A("desktop","ultrawide",3440,1440)],Co={phone:A("phone","iphone-16",393,852),tablet:A("tablet","ipad-pro-11",834,1194),desktop:A("desktop","laptop-13",1280,800)},gi=e=>e==="mobile"?"phone":e==="tablet"?"tablet":"desktop",Mo=e=>e!=="plain",mi=e=>fi.filter(t=>t.deviceClass===e),Lo=(e,t)=>{const i=gi(e),n=t[i];return mi(i).find(o=>o.id===n)??Co[i]},Uo=(e,t)=>{const i=fi.find(n=>n.id===t);return i===void 0||e[i.deviceClass]===t?e:{...e,[i.deviceClass]:t}},Vo=(e,t)=>`${e.deviceName(t.id)} \xB7 ${t.width}\xD7${t.height}`,zo=(e,t)=>{const i=[1,t.width/e.width];t.height!==void 0&&i.push(t.height/e.height);const n=Math.min(...i);return!Number.isFinite(n)||n<=0?1:Math.max(.1,Math.floor(n*100)/100)},yi=(e,t,i)=>{const{state:n,navigation:o}=e,s=te(n,o),r=le(o);return l`
+    <div class="nav">
+      ${Bo(e,t,r)}
+      ${r==="app"?Wo(e,t,s,i.app):s!==void 0&&s.kind!=="screen"?Go(e,t,s,i):l`<p class="nav-empty">${t.noActivityBefore}<code>activities</code>${t.noActivityAfter}</p>`}
+    </div>
+  `},Yo={scenario:"viewScenario",app:"viewApp"},Ho={scenario:"viewScenarioHint",app:"viewAppHint"},Bo=(e,t,i)=>l`<nav class="dpk-segmented view-switch" aria-label=${t.viewLabel}>
+  ${Fn.map(n=>l`<a
+        class="view-option"
+        href=${e.hashFor(Mt(n))}
+        title=${t[Ho[n]]}
+        aria-current=${n===i?"page":h}
+        data-view=${n}
+        >${t[Yo[n]]}</a
+      >`)}
+</nav>`,Wo=(e,t,i,n)=>{const o=i?.kind==="screen"?i:void 0,s=ii(e.state),r=ni(s,i),a={context:e,currentId:o?.screen.id},d=r?.others??[];return l`
+    ${s.length>1&&r?qo(e,t,s,r,n):h}
+    ${s.length===1&&r?.app.description?l`<p class="app-description">${r.app.description}</p>`:h}
+    <div class="steps-head">
+      <span class="dpk-label">${t.appScreens}</span>
+      <span class="dpk-label">${r?.screens.length??0}</span>
+    </div>
+    <p class="app-hint">${t.appScreensHint}</p>
+    ${r?.trees.map(p=>l`<section class="app-tree">
+        <h3 class="app-origin">${Fo(p.origin)}</h3>
+        <ul class="tree">
+          ${wi(a,p.root,0)}
+        </ul>
+      </section>`)}
+    ${d.length===0?h:l`<section class="app-group">
+            ${(r?.trees.length??0)>0?l`<h3 class="app-group-heading">${t.appOutsideBrowser}</h3>`:h}
+            <ul class="steps app-screens">
+              ${d.map(p=>{const c=bi(a,p);return l`<li class="step-row" data-current=${String(c)}>
+                  <a class="step-link" href=${xi(e,p)} aria-current=${c?"page":h}>
+                    <span class="step-name">${p.screen.title}</span>
+                    ${Ei(e,p)}
+                  </a>
+                </li>`})}
+            </ul>
+          </section>`}
+    ${o?.screen.description?l`<div class="detail">
+            <div class="screen-description dpk-prose">${Pe(De(o.screen.description))}</div>
+          </div>`:h}
+  `},qo=(e,t,i,n,o)=>l`<div class="field">
+  <span class="dpk-label">${t.appSelectLabel}</span>
+  ${o.render({options:i.map((s,r)=>({value:String(r),label:s.app.name})),value:String(i.indexOf(n)),onChange:s=>{const r=i[Number(s)]?.screens[0];r&&e.navigate(ki(r))},ariaLabel:t.appSelectLabel})}
+  ${n.app.description?l`<p class="app-description">${n.app.description}</p>`:h}
+</div>`,wi=(e,t,i)=>l`<li
+  class="tree-node"
+>
+  ${t.screens.length===0&&i===0?h:t.screens.length===0?l`<div class="tree-row" data-depth=${String(i)} data-current="false">
+            <span class="tree-link" title=${t.path}><code class="tree-path">${t.segment}</code></span>
+          </div>`:t.screens.map(n=>{const o=bi(e,n);return l`<div class="tree-row" data-depth=${String(i)} data-current=${String(o)}>
+              <a
+                class="tree-link"
+                href=${xi(e.context,n)}
+                title=${t.path}
+                aria-current=${o?"page":h}
+              >
+                <code class="tree-path">${t.segment}</code>
+                <span class="tree-title">${n.screen.title}</span>
+                ${Ei(e.context,n)}
+              </a>
+            </div>`})}
+  ${t.children.length>0?l`<ul class="tree">
+          ${t.children.map(n=>wi(e,n,i+1))}
+        </ul>`:h}
+</li>`,bi=(e,t)=>t.screen.id===e.currentId,ki=e=>({screen:e.screen.id,preview:null}),xi=(e,t)=>e.hashFor(ki(t)),Ei=(e,t)=>{const i=e.commentCount({type:"screen",id:t.screen.id})+Ht(e.comments,t.screen.previews.map(n=>n.id));return i>0?l`<span class="step-note">${i}</span>`:h},Fo=e=>e.replace(/^[a-z][a-z0-9+.-]*:\/\//i,""),Go=(e,t,i,n)=>{const{state:o}=e,{activity:s,story:r}=i,a=r.steps,d=i.kind==="step"?i.step:void 0,p=i.kind==="step"?ae(i):void 0;return l`
+    <div class="field">
+      <span class="dpk-label">Activity</span>
+      ${n.activity.render({options:o.activities.map(c=>({value:c.id,label:c.name})),value:s.id,onChange:c=>e.navigate({activity:c,story:null,step:null}),ariaLabel:"Activity"})}
+    </div>
+    <div class="field">
+      <span class="dpk-label">User Story</span>
+      ${n.story.render({options:s.stories.map(c=>({value:c.id,label:c.name})),value:r.id,onChange:c=>e.navigate({activity:s.id,story:c,step:null}),ariaLabel:"User Story"})}
+    </div>
+    <div class="steps-head">
+      <span class="dpk-label">Step</span>
+      <span class="dpk-label">${a.length}</span>
+    </div>
+    <ol class="steps">
+      ${Xi(a,c=>fe(s,r,c),(c,v)=>{const f=fe(s,r,c),I=e.commentCount({type:"step",id:f})+Ht(e.comments,to(o,c).map(P=>P.id));return l`
+            <li class="step-row" data-current=${String(c.id===d?.id)}>
+              <a class="step-link" href=${e.hashFor({activity:s.id,story:r.id,step:c.id})}>
+                <span class="step-index">${String(v+1).padStart(2,"0")}</span>
+                <span class="step-name">${c.name}</span>
+                ${I>0?l`<span class="step-note">${I}</span>`:h}
+              </a>
+              <span class="row-tools">
+                <button
+                  class="dpk-icon-btn"
+                  type="button"
+                  aria-label=${t.deleteStepAria}
+                  @click=${()=>e.dispatch(W.deleteStep(f))}
+                >
+                  ${Re()}
+                </button>
+              </span>
+            </li>
+          `})}
+    </ol>
+    <button class="dpk-btn" type="button" @click=${()=>Ko(e,t,C(s.id,r.id))}>
+      ${t.addStepButton}
+    </button>
+    ${d?pt(p,l`<div class="detail">
+              <div class="detail-row">
+                <span class="dpk-label">${t.stepNameLabel}</span>
+                <span class="detail-value">
+                  <dpk-inline-edit
+                    .value=${d.name}
+                    .label=${t.stepNameLabel}
+                    @dpk-commit=${et(c=>e.dispatch(W.setStepName(p??d.id,c)))}
+                  ></dpk-inline-edit>
+                </span>
+              </div>
+              <div class="detail-row">
+                <span class="dpk-label">${t.descriptionLabel}</span>
+                <span class="detail-value">
+                  <dpk-inline-edit
+                    multiline
+                    markdown
+                    .value=${d.description??""}
+                    .placeholder=${t.descriptionPlaceholder}
+                    .label=${t.descriptionLabel}
+                    @dpk-commit=${et(c=>e.dispatch(W.setStepDescription(p??d.id,c)))}
+                  ></dpk-inline-edit>
+                </span>
+              </div>
+              ${jo(e,t,d)}
+            </div>`):h}
+  `},jo=(e,t,i)=>{const n=ve(e.state,i);return n.length===0?h:l`<div class="detail-row">
+    <span class="dpk-label">${t.screenGroup}</span>
+    <span class="detail-value">
+      ${n.map(({app:o,screen:s})=>l`<div class="step-screen-entry">
+            <a
+              class="step-screen"
+              href=${e.hashFor({...Mt("app"),screen:s.id})}
+              title=${t.openInApp}
+              >${o.name} › ${s.title}</a
+            >
+            ${s.description?l`<div class="screen-description dpk-prose">
+                    ${Pe(De(s.description))}
+                  </div>`:h}
+          </div>`)}
+    </span>
+  </div>`},Ko=(e,t,i)=>{const n=tt("new-step",Pt(e.state));e.dispatch(W.addStep(i,n,t.newStepName)).ok&&e.navigate({story:i,step:n})},Xo=q(In),Zo=q(Zi),Si=(e,t,i="bar")=>l`<button
+    class=${i==="demo"?"demo-control actions-toggle":"dpk-btn actions-toggle"}
+    type="button"
+    data-role="actions"
+    aria-haspopup="menu"
+    aria-expanded=${String(t.open)}
+    title=${e.actionsHint}
+    @click=${t.toggle}
+  >
+    ${Xo()} ${e.actions} ${Zo()}
+  </button>`,Jo=e=>{const t=e.currentTarget;if(!(t instanceof HTMLElement))return;const i=[...t.querySelectorAll('[role="menuitem"]')],n=i.findIndex(a=>a===e.composedPath()[0]),o=e.key==="ArrowDown"?1:e.key==="ArrowUp"?-1:0,s=e.key==="Home"?0:e.key==="End"?i.length-1:o===0?-1:(n+o+i.length)%i.length,r=i[s];r!==void 0&&(e.preventDefault(),r.focus())},Qo=(e,t)=>{if(!t.open||t.groups.length===0)return h;const i=t.groups.length>1;return l`<div
+    class="comment-pop actions-menu"
+    popover="manual"
+    role="menu"
+    aria-label=${e.actions}
+    @keydown=${Jo}
+  >
+    ${t.groups.map(n=>l`<div class="actions-group" role="group" aria-label=${n.screen.title}>
+        ${i?l`<span class="actions-group-title" aria-hidden="true">${n.screen.title}</span>`:h}
+        ${n.actions.map(o=>l`<button
+            class="actions-item"
+            type="button"
+            role="menuitem"
+            data-action=${o.id}
+            @click=${()=>t.run(n.screen.id,o.id)}
+          >
+            <span class="actions-label">${o.label}</span>
+            ${o.description===void 0?h:l`<span class="actions-description">${o.description}</span>`}
+          </button>`)}
+      </div>`)}
+  </div>`},$i=(e,t,i="bar")=>{const n=t.mode.kind!=="off";return l`<button
+    class=${`${i==="demo"?"demo-control":n?"dpk-btn dpk-btn--accent":"dpk-btn"} ui-comment-toggle`}
+    type="button"
+    aria-pressed=${n?"true":"false"}
+    title=${e.uiCommentHint}
+    @click=${()=>t.send({kind:"toggle"})}
+  >
+    ${it()} ${e.uiComment}
+  </button>`},es=(e,t)=>t.mode.kind==="off"?h:l`<p class="ui-comment-hint" role="status">${it()} ${e.uiCommentHint}</p>`,ts=(e,t)=>t.mode.kind==="off"?h:l`<div class="ui-layer" aria-hidden="true">
+    <div class="ui-catcher"></div>
+    <div class="ui-box ui-hover" hidden></div>
+    <div class="ui-box ui-picked" hidden></div>
+    ${t.pins.map(i=>l`<span
+          class="ui-pin"
+          hidden
+          data-preview=${i.previewId}
+          data-selector=${i.selector}
+          title=${e.uiCommentPin(i.number,i.body)}
+          >${i.number}</span
+        >`)}
+  </div>`,is=e=>e==="feedback"||e==="note",ns=(e,t)=>{const i=t.mode;if(i.kind!=="composing")return h;const n=vn(i.body,t.notes,{key:`ui:${i.target.previewId}/${i.target.selector}`,...t.targetLabel===void 0?{}:{label:t.targetLabel},choice:{label:e.uiCommentAs,value:i.as,options:[{value:"feedback",label:e.uiCommentFeedback,hint:e.uiCommentFeedbackHint},{value:"note",label:e.uiCommentNote,hint:e.uiCommentNoteHint}]},...i.as==="note"?{submitLabel:e.uiNoteSubmit}:{}});return l`${pt(`${i.target.previewId}/${i.target.selector}`,fn(t.composer,n,o=>{o.kind==="input"?t.send({kind:"input",body:o.body}):o.kind==="comment"?t.submit(o.body):o.kind==="choose"?is(o.value)&&t.send({kind:"choose",as:o.value}):t.send({kind:"dismiss"})}))}`},Ti=(e,t)=>l`<div class="demo-controls">
+    ${t.actions.groups.length>0?Si(e,t.actions,"demo"):h}
+    ${$i(e,t.uiComment,"demo")}
+    <button class="demo-control demo-exit" type="button" title=${e.exitDemo} @click=${t.onExit}>
+      ${Re()} ${e.exitDemo} <kbd>Esc</kbd>
+    </button>
+  </div>`,Ai={mobile:"390px",tablet:"834px",desktop:"1180px",fluid:"100%"},Ii={mobile:"620px",tablet:"640px",desktop:"520px",fluid:"420px"},os={browser:0,native:22,mail:0,plain:0},_i=(e,t,i)=>{const n=`--frame-width:${Ai[t]};--frame-min-height:${Ii[t]}`;if(i?.kind!=="device")return n;const o=os[e];return`${n};--device-width:${i.width+o}px;--device-height:${i.height+o}px;zoom:${i.zoom}`},ss=e=>({back:e.browserBack,forward:e.browserForward,reload:e.browserReload,address:e.browserAddress,tabs:e.browserTabs,newTab:e.newTab,closeTab:e.closeTab,profile:e.browserProfile,guest:e.browserGuest,shortcuts:e.newTabShortcuts,unreachableTitle:e.unreachableTitle,unreachableBody:e.unreachableBody}),rs=(e,t)=>l`<slot name=${`preview:${e.id}`}></slot> ${t?h:l`<div class="frame-placeholder">
+            <span class="dpk-label">light dom preview</span>
+            <code>&lt;div slot="preview" data-preview-id="${e.id}"&gt;</code>
+          </div>`}`,as=(e,t,i)=>{const{preview:n,viewport:o}=i,s={view:i.view,phone:o==="mobile",switcher:i.switcher,shortcuts:i.shortcuts.map(r=>({...r,href:e.hashFor(r.page)})),labels:ss(t),...i.demo===void 0?{}:{extra:Ti(t,i.demo)},send:i.send};return l`<figure
+    class="frame browser"
+    data-kind="browser"
+    data-viewport=${o}
+    ?data-loading=${i.loading}
+    ?data-empty=${n!==void 0&&!i.hasContent}
+    data-window=${i.window.kind}
+    style=${_i("browser",o,i.window)}
+  >
+    ${gn(s)}
+    <div class="viewport browser-page">
+      ${mn(s,n===void 0?void 0:rs(n,i.hasContent))}
+    </div>
+    ${yn(s)}
+  </figure>`},ie=e=>`${e.previewId}/${e.selector}`,ds=(e,t)=>t.badges.length===0?h:l`<div class="ui-notes">
+    ${t.badges.map(i=>{const n=t.open!==null&&ie(t.open)===ie(i);return l`<button
+        class="ui-note-badge"
+        type="button"
+        hidden
+        data-preview=${i.previewId}
+        data-selector=${i.selector}
+        data-key=${ie(i)}
+        aria-label=${e.uiNotesOn(i.label)}
+        aria-expanded=${n?"true":"false"}
+        title=${e.uiNotes(i.notes.length)}
+        @click=${()=>t.toggle(i)}
+      >
+        ${nt()}<span>${i.notes.length}</span>
+      </button>`})}
+  </div>`,ls=(e,t)=>{const i=t.open;return i===null?h:l`<div
+    class="comment-pop ui-notes-pop"
+    popover="manual"
+    role="dialog"
+    aria-label=${e.uiNotesOn(i.label)}
+    data-key=${ie(i)}
+  >
+    <div class="ui-notes-head">
+      ${nt()}
+      <strong class="comment-target" title=${i.label}>${i.label}</strong>
+      <button
+        class="dpk-icon-btn"
+        type="button"
+        data-role="close-notes"
+        aria-label=${e.closeUiNotes}
+        @click=${t.close}
+      >
+        ${Re()}
+      </button>
+    </div>
+    <ol class="ui-note-list">
+      ${i.notes.map(n=>t.editing?.noteId===n.id?l`<li data-id=${n.id}>${ps(e,t,t.editing)}</li>`:l`<li data-id=${n.id}>
+              <div class="ui-note-main">
+                <p class="ui-note-body">${n.body}</p>
+                ${n.createdAt===void 0?h:l`<time class="ui-note-time" datetime=${n.createdAt}>${e.uiNoteDate(n.createdAt)}</time>`}
+              </div>
+              <button
+                class="dpk-icon-btn"
+                type="button"
+                data-role="edit-note"
+                aria-label=${e.editUiNoteAria}
+                title=${e.editUiNoteAria}
+                @click=${()=>t.edit(n.id,n.body)}
+              >
+                ${Ji()}
+              </button>
+              <button
+                class="dpk-icon-btn"
+                type="button"
+                data-role="delete-note"
+                aria-label=${e.deleteUiNoteAria}
+                @click=${()=>t.remove(i,n.id)}
+              >
+                ${Qi()}
+              </button>
+            </li>`)}
+    </ol>
+  </div>`},ps=(e,t,i)=>l`
+  <div class="ui-note-editor">
+    <textarea
+      class="dpk-textarea"
+      aria-label=${e.editUiNoteLabel}
+      title=${e.editUiNoteHint}
+      .value=${i.body}
+      @input=${n=>{n.currentTarget instanceof HTMLTextAreaElement&&t.input(n.currentTarget.value)}}
+      @keydown=${n=>{n.isComposing||(n.key==="Enter"&&(n.metaKey||n.ctrlKey)?(n.preventDefault(),t.save()):n.key==="Escape"&&(n.preventDefault(),n.stopPropagation(),t.cancel()))}}
+    ></textarea>
+    <div class="ui-note-editor-actions">
+      <button class="dpk-btn dpk-btn--ghost" type="button" data-dpk-text-discard @click=${t.cancel}>
+        ${e.cancelUiNote}
+      </button>
+      <button
+        class="dpk-btn dpk-btn--accent"
+        type="button"
+        data-role="save-note"
+        ?disabled=${i.body.trim()===""}
+        @click=${t.save}
+      >
+        ${e.saveUiNote}
+      </button>
+    </div>
+  </div>
+`,Pi=(e,t,i)=>{const{state:n,navigation:o}=e,s=te(n,o),r=s===void 0||s.kind==="story"?void 0:s,a=le(o)==="app",d=Ni(n,[]);if(s?.kind==="story"){const{activity:R,story:Te}=s;return l`
+      <div class="stage">
+        <section class="stage-story" data-dpk-target=${Bt(s,null)}>
+          ${Di(t,ao(R,Te))}
+          ${Te.description?l`<div class="story-description dpk-prose">${Pe(De(Te.description))}</div>`:h}
+          <p class="stage-empty">${t.storyWithoutSteps}</p>
+        </section>
+        ${d}
+      </div>
+    `}if(!r)return l`
+      <div class="stage">
+        ${a?l`<p class="stage-empty">${t.noScreens}</p>`:l`<p class="stage-empty">
+                ${t.noStepBefore}<strong>Activity › UserStory › Step</strong>${t.noStepAfter}
+              </p>`}
+        ${d}
+      </div>
+    `;const p=Ye(n,r,o),{layout:c,panes:v,shown:f}=p,[I]=c==="single"?v:[],P=i.uiComment,T=i.lift,z=T?.mode==="demo",K=i.browser,Fe=K!==null&&K.view.entry?.kind!=="page"?[]:f,[X]=Fe,ce=(X??f[0])?.viewport??"desktop",Ge=z&&K!==null&&ce!=="mobile",je={onExit:i.onToggleDemo,uiComment:P,actions:i.actions},Vi=X??f[0],Ke=K!==null?"browser":Vi?.kind??"browser",Xe=z&&Ke==="browser"&&gi(ce)==="desktop",Z=i.devices,ne=Z===null||Xe||!Mo(Ke)?null:Lo(ce,Z.choice),Ze=ne!==null&&Z!==null?{kind:"device",width:ne.width,height:ne.height,zoom:Z.zoom}:Xe?{kind:"fill"}:null;return l`
+    ${T===null?h:l`<div class="stage-placeholder" style=${`height:${T.height}px`}></div>`}
+    <div
+      class=${T===null?"stage":z?"stage is-demo":"stage is-maximized"}
+      data-ui-comment=${P.mode.kind}
+      popover=${T===null?h:"manual"}
+      @wheel=${T===null?h:{handleEvent:i.onLiftedWheel,passive:!1}}
+    >
+      ${z?Ge?h:Ti(t,je):l`<div class="stage-bar">
+              ${Di(t,Zt(n,r))}
+              <div class="stage-tools">
+                ${I?.kind==="screen"&&I.tabs.length>0?Ri(e,p,I):h}
+                ${ne!==null&&Z!==null?gs(t,ne,Z,i.deviceSelect):h}
+                ${i.actions.groups.length>0?Si(t,i.actions):h}
+                ${f.length>0?$i(t,P):h}
+                ${f.length===0?h:a?ms(t,i.onToggleDemo):ys(t,T!==null,i.onToggleMaximize)}
+              </div>
+            </div>`}
+      ${r.kind==="step"&&r.step.situation!==void 0?vs(t,r.step.situation):h}
+      ${z?h:es(t,P)}
+      <div
+        class="canvas"
+        data-layout=${c}
+        data-dpk-target=${Bt(r,p)}
+        @click=${{handleEvent:i.canvasEvents.click,capture:!0}}
+        @pointermove=${{handleEvent:i.canvasEvents.pointermove,capture:!0}}
+        @pointerleave=${i.canvasEvents.pointerleave}
+        @wheel=${{handleEvent:i.canvasEvents.wheel,passive:!1}}
+        @scroll=${{handleEvent:i.canvasEvents.scroll,capture:!0}}
+      >
+        ${K!==null?as(e,t,{...K,...X===void 0?{}:{preview:X},...Ge?{demo:je}:{},hasContent:X===void 0||i.hasPreviewContent(X.id),viewport:ce,window:Ze??{kind:"fill"}}):c==="side-by-side"?l`<div class="panes">
+                  ${v.map(R=>l`<div class="pane" data-viewport=${R.preview.viewport} data-pane=${R.kind}>
+                        ${fs(e,p,R)}
+                        ${We(e,t,R.preview,i.hasPreviewContent(R.preview.id))}
+                      </div>`)}
+                </div>`:f.map(R=>We(e,t,R,i.hasPreviewContent(R.id),Ze))}
+        ${f.length===0?l`<p class="dpk-label">${t.noPreviewMetadata}</p>`:h}
+        ${ds(t,i.uiNotes)} ${ts(t,P)}
+      </div>
+      ${ns(t,P)} ${ls(t,i.uiNotes)} ${Qo(t,i.actions)}
+      ${Ni(n,Fe.map(R=>R.id))}
+    </div>
+  `},cs=q(An),us=q(Sn),hs={phone:q($n),tablet:q(Tn),desktop:q(En)},Di=(e,t)=>l`<div class="page-head">
+    ${t.actor===void 0?h:l`<span class="page-actor" role="note" aria-label=${e.pageActor(t.actor)} title=${t.actor}>
+            ${cs()} <span class="page-actor-name">${t.actor}</span>
+          </span>`}
+    <h2 class="page-title">${t.title}</h2>
+  </div>`,vs=(e,t)=>l`<aside class="situation">
+    <span class="situation-label">${e.situation}</span>
+    <p class="situation-text">${t}</p>
+  </aside>`,Ri=(e,t,i)=>l`<div class="dpk-segmented tabs" role="tablist">
+    ${i.tabs.map(n=>{const o=n.id===i.preview.id;return l`<a
+        class="tab"
+        role="tab"
+        data-current=${String(o)}
+        aria-selected=${o?"true":"false"}
+        href=${e.hashFor({preview:eo(t,n.id)})}
+        >${n.label??n.viewport}</a
+      >`})}
+  </div>`,fs=(e,t,i)=>i.kind==="material"?i.preview.label===void 0?h:l`<span class="pane-label" title=${i.preview.label}>${i.preview.label}</span>`:l`<div class="pane-head">
+    <span class="pane-label" title=${i.screen.screen.title}>${i.screen.screen.title}</span>
+    ${i.tabs.length>0?Ri(e,t,i):h}
+  </div>`,gs=(e,t,i,n)=>{const o=Math.round(i.zoom*100);return l`<span class="device-pick" title=${e.deviceHint}>
+    ${hs[t.deviceClass]()}
+    ${n.render({options:mi(t.deviceClass).map(s=>({value:s.id,label:Vo(e,s)})),value:t.id,onChange:s=>i.onPick(s),ariaLabel:e.device,className:"device-select"})}
+    ${o<100?l`<span class="device-zoom" title=${e.deviceZoom(o)}>${o}%</span>`:h}
+  </span>`},ms=(e,t)=>l`<button class="dpk-btn stage-demo" type="button" title=${e.demoHint} @click=${t}>
+    ${us()} ${e.demo}
+  </button>`,ys=(e,t,i)=>l`<button
+    class="dpk-btn stage-maximize"
+    type="button"
+    aria-pressed=${t?"true":"false"}
+    title=${e.maximizeHint}
+    @click=${i}
+  >
+    ${t?l`${en()} ${e.restore}`:l`${tn()} ${e.maximize}`}
+  </button>`,We=(e,t,i,n,o=null)=>l`
+    <figure
+      class="frame"
+      data-kind=${i.kind}
+      data-viewport=${i.viewport}
+      data-window=${o?.kind??h}
+      ?data-empty=${!n}
+      style=${_i(i.kind,i.viewport,o)}
+    >
+      ${i.kind==="browser"?l`<div class="dpk-browser-frame-bar">
+              <span class="dpk-browser-frame-url">${ke(e.state,i)}</span>
+            </div>`:i.kind==="mail"?ws(so(t,i)):h}
+      <div class="viewport">
+        ${i.kind==="native"?bs():h}
+        <slot name=${`preview:${i.id}`}></slot>
+        ${n?h:l`<div class="frame-placeholder">
+                <span class="dpk-label">light dom preview</span>
+                <code>&lt;div slot="preview" data-preview-id="${i.id}"&gt;</code>
+              </div>`}
+      </div>
+    </figure>
+  `,ws=e=>l`<header class="dpk-received-mail">
+    ${e.subject===void 0?h:l`<h3 class="dpk-received-mail-subject">${e.subject}</h3>`}
+    <div class="dpk-received-mail-envelope">
+      ${e.initial===void 0?h:l`<span class="dpk-avatar" data-size="lg" aria-hidden="true">${e.initial}</span>`}
+      <dl class="dpk-received-mail-meta">
+        ${e.rows.map(t=>l`<div>
+              <dt>${t.label}</dt>
+              <dd>${t.value}</dd>
+            </div>`)}
+      </dl>
+    </div>
+  </header>`,bs=()=>l`<div class="dpk-status-bar"><span>9:41</span></div>`,Ni=(e,t)=>{const n=[...H(e).flatMap(o=>o.screen.previews),...B(e).flatMap(o=>F(o.step))].filter(o=>!t.includes(o.id));return n.length===0?l`${h}`:l`<div class="parked" aria-hidden="true">
+    ${n.map(o=>l`<slot name=${`preview:${o.id}`}></slot>`)}
+  </div>`},ks=nn`
+  :host {
+    --dpk-prototype-accent: var(--dpk-blue);
+  }
+
+  /* ---------------------------------------------------------------- sidebar */
+
+  .nav {
+    display: grid;
+    gap: 14px;
+    align-content: start;
+    min-width: 188px;
+  }
+
+  .field {
+    display: grid;
+    gap: 5px;
+  }
+
+  /* Scenario or app: the segmented atom, stretched across the top of the sidebar. */
+  .view-switch {
+    display: flex;
+  }
+
+  .view-option {
+    flex: 1 1 0;
+    text-align: center;
+  }
+
+  .app-hint {
+    margin: -6px 0 0;
+    font-size: 11.5px;
+    line-height: 1.55;
+    color: var(--dpk-ink-faint);
+  }
+
+  .app-group {
+    display: grid;
+    gap: 4px;
+  }
+
+  .app-group-heading {
+    margin: 0;
+    padding-left: 9px;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--dpk-ink-soft);
+  }
+
+  .app-description {
+    margin: 2px 0 0;
+    font-size: 11.5px;
+    line-height: 1.5;
+    color: var(--dpk-ink-faint);
+  }
+
+  .step-screen {
+    color: var(--dpk-ink);
+    font-size: 12.5px;
+    font-weight: 550;
+  }
+
+  .screen-description {
+    font-size: 12.5px;
+    line-height: 1.6;
+    color: var(--dpk-ink);
+  }
+
+  .app-tree {
+    display: grid;
+    gap: 4px;
+  }
+
+  .app-origin {
+    margin: 0;
+    padding-left: 9px;
+    font-family: var(--dpk-mono);
+    font-size: 10.5px;
+    font-weight: 500;
+    color: var(--dpk-ink-faint);
+    overflow-wrap: anywhere;
+  }
+
+  .tree {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 2px;
+  }
+
+  /* A path below another one is indented under it, with a guide line. */
+  .tree .tree {
+    margin-left: 14px;
+    padding-left: 6px;
+    border-left: 1px solid var(--dpk-rule);
+  }
+
+  .tree-node {
+    display: grid;
+    gap: 2px;
+  }
+
+  .tree-row {
+    position: relative;
+    border-radius: var(--dpk-radius-sm);
+    transition: background 140ms ease;
+  }
+
+  .tree-row:has(a):hover {
+    background: var(--dpk-paper-inset);
+  }
+
+  .tree-row[data-current='true'] {
+    background: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--dpk-prototype-accent) 10%, var(--dpk-paper-raised)),
+      color-mix(in srgb, var(--dpk-prototype-accent) 5%, var(--dpk-paper-raised))
+    );
+    box-shadow:
+      inset 0 0 0 1px color-mix(in srgb, var(--dpk-prototype-accent) 22%, transparent),
+      var(--dpk-shadow-xs);
+  }
+
+  .tree-link {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    gap: 2px 8px;
+    padding: 6px 4px 6px 9px;
+    text-decoration: none;
+    color: var(--dpk-ink-soft);
+    font-size: 12.5px;
+  }
+
+  .tree-path {
+    font-family: var(--dpk-mono);
+    font-size: 11.5px;
+    color: var(--dpk-ink);
+    overflow-wrap: anywhere;
+  }
+
+  span.tree-link .tree-path {
+    color: var(--dpk-ink-faint);
+  }
+
+  .tree-title {
+    min-width: 0;
+    color: var(--dpk-ink-soft);
+  }
+
+  .tree-row[data-current='true'] .tree-path,
+  .tree-row[data-current='true'] .tree-title {
+    color: var(--dpk-ink);
+    font-weight: 550;
+  }
+
+  .tree-link .step-note {
+    align-self: center;
+  }
+
+  .tree-link:focus-visible {
+    outline: none;
+    border-radius: var(--dpk-radius-sm);
+    box-shadow: var(--dpk-focus);
+  }
+
+  .steps.app-screens {
+    max-height: none;
+  }
+
+  .steps-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    padding-bottom: 5px;
+    border-bottom: 1px solid var(--dpk-rule);
+  }
+
+  .steps {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    /* A row is no wider than the list: a long step name ends in an ellipsis. */
+    grid-template-columns: minmax(0, 1fr);
+    gap: 2px;
+    max-height: 38vh;
+    overflow: auto;
+  }
+
+  .step-row {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 0 4px 0 9px;
+    border-radius: var(--dpk-radius-sm);
+    transition:
+      background 140ms ease,
+      box-shadow 140ms ease;
+  }
+
+  .step-row:hover {
+    background: var(--dpk-paper-inset);
+  }
+
+  .step-row[data-current='true'] {
+    background: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--dpk-prototype-accent) 10%, var(--dpk-paper-raised)),
+      color-mix(in srgb, var(--dpk-prototype-accent) 5%, var(--dpk-paper-raised))
+    );
+    box-shadow:
+      inset 0 0 0 1px color-mix(in srgb, var(--dpk-prototype-accent) 22%, transparent),
+      var(--dpk-shadow-xs);
+  }
+
+  .step-link {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    align-items: center;
+    gap: 7px;
+    padding: 7px 0;
+    text-decoration: none;
+    color: var(--dpk-ink-soft);
+    font-size: 12.5px;
+    font-weight: 460;
+  }
+
+  .step-row[data-current='true'] .step-link {
+    color: var(--dpk-ink);
+    font-weight: 550;
+  }
+
+  .step-index {
+    flex: 0 0 auto;
+    min-width: 17px;
+    padding: 1px 4px;
+    border-radius: var(--dpk-radius-xs);
+    background: var(--dpk-paper-inset);
+    font-family: var(--dpk-mono);
+    font-size: 9.5px;
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+    color: var(--dpk-ink-faint);
+    transition:
+      background 140ms ease,
+      color 140ms ease;
+  }
+
+  .step-row[data-current='true'] .step-index {
+    background: linear-gradient(180deg, var(--dpk-blue), var(--dpk-blue-strong));
+    color: #fff;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
+  }
+
+  .step-name {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .step-note {
+    margin-left: auto;
+    min-width: 16px;
+    padding: 1px 5px;
+    border-radius: 999px;
+    background: var(--dpk-accent);
+    color: var(--dpk-accent-ink);
+    font-family: var(--dpk-mono);
+    font-size: 9px;
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+  }
+
+  .row-tools {
+    display: flex;
+    gap: 0;
+    opacity: 0;
+    transition: opacity 120ms ease;
+  }
+
+  .step-row:hover .row-tools,
+  .step-row[data-current='true'] .row-tools {
+    opacity: 1;
+  }
+
+  .detail {
+    display: grid;
+    /* As wide as the panel, not as a description's widest table or code line: those scroll. */
+    grid-template-columns: minmax(0, 1fr);
+    gap: 12px;
+    padding: 12px 12px 14px;
+    border: 1px solid var(--dpk-rule);
+    border-radius: var(--dpk-radius);
+    background: var(--dpk-paper-raised);
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-sm);
+  }
+
+  .detail-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 4px;
+  }
+
+  .detail-value {
+    font-size: 12.5px;
+    color: var(--dpk-ink-soft);
+  }
+
+  .nav-empty {
+    font-size: 12px;
+    line-height: 1.6;
+    color: var(--dpk-ink-faint);
+  }
+
+  /* ------------------------------------------------------------------ stage */
+
+  .stage {
+    display: grid;
+    /* One column no wider than the main area: a wide row of panes scrolls inside the canvas. */
+    grid-template-columns: minmax(0, 1fr);
+    gap: 14px;
+    width: 100%;
+    min-width: 0;
+  }
+
+  /* A tighter top than the shell's leaves the preview more of the main column. */
+  :host {
+    --dpk-main-padding: 12px 24px 24px;
+  }
+
+  .stage-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px 16px;
+    min-width: 0;
+    flex-wrap: wrap;
+  }
+
+  /*
+   * The page head and its tools stick to the top of the main column, so they
+   * stay in reach while a tall preview scrolls under them; the situation and
+   * the canvas scroll on. The bar spans the column edge to edge (cancelling
+   * the body's padding) on a frosted ground the content passes beneath. Above
+   * the UI-comment layer, below the memo, which opens over everything.
+   */
+  .stage:not(.is-maximized) > .stage-bar {
+    position: sticky;
+    top: 0;
+    z-index: 5;
+    margin: -12px -24px 0;
+    padding: 10px 24px;
+    border-bottom: 1px solid var(--dpk-rule);
+    background: color-mix(in srgb, var(--dpk-paper-raised) 92%, transparent);
+    backdrop-filter: saturate(1.6) blur(14px);
+  }
+
+  /* ------------------------------------------------------------- page head */
+
+  .page-head {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+    animation: dpk-page-head-in 260ms var(--dpk-ease) backwards;
+  }
+
+  @keyframes dpk-page-head-in {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+  }
+
+  .page-actor {
+    display: inline-flex;
+    /* A long role name gives way to the title first, down to a recognizable stub. */
+    flex: 0 1000 auto;
+    min-width: 72px;
+    align-items: center;
+    gap: 6px;
+    height: 26px;
+    padding: 0 11px 0 8px;
+    border-radius: 999px;
+    background: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--dpk-blue) 16%, var(--dpk-paper-raised)),
+      color-mix(in srgb, var(--dpk-blue) 9%, var(--dpk-paper-raised))
+    );
+    box-shadow:
+      var(--dpk-bevel),
+      inset 0 0 0 1px color-mix(in srgb, var(--dpk-blue) 32%, transparent),
+      var(--dpk-shadow-xs);
+    color: var(--dpk-blue);
+    font-size: 12px;
+    font-weight: 650;
+    letter-spacing: 0.01em;
+    white-space: nowrap;
+    max-width: 280px;
+  }
+
+  .page-actor-name {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .page-actor svg {
+    flex: none;
+    width: 13px;
+    height: 13px;
+    opacity: 0.9;
+  }
+
+  .page-title {
+    margin: 0;
+    min-width: 0;
+    overflow: hidden;
+    font-size: 19px;
+    font-weight: 700;
+    line-height: 1.3;
+    letter-spacing: -0.02em;
+    color: var(--dpk-ink);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Wraps on a phone rather than pushing the last tools off the screen. */
+  .stage-tools {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    margin-left: auto;
+  }
+
+  .stage-maximize svg,
+  .stage-demo svg {
+    width: 13px;
+    height: 13px;
+  }
+
+  .stage-demo {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .actions-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .actions-toggle svg {
+    width: 13px;
+    height: 13px;
+  }
+
+  .actions-toggle svg:last-child {
+    width: 12px;
+    height: 12px;
+    margin-left: -2px;
+    opacity: 0.7;
+  }
+
+  .actions-toggle[aria-expanded='true'] {
+    opacity: 1;
+    color: var(--dpk-ink);
+  }
+
+  /* A menu of what each screen on stage can do in one go. */
+  .actions-menu {
+    gap: 8px;
+    width: max-content;
+    min-width: 220px;
+    max-width: min(320px, calc(100vw - 24px));
+    padding: 6px;
+  }
+
+  .actions-group {
+    display: grid;
+    gap: 2px;
+  }
+
+  .actions-group + .actions-group {
+    padding-top: 6px;
+    border-top: 1px solid var(--dpk-rule);
+  }
+
+  .actions-group-title {
+    padding: 4px 10px 2px;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--dpk-ink-faint);
+  }
+
+  .actions-item {
+    display: grid;
+    gap: 2px;
+    width: 100%;
+    padding: 8px 10px;
+    border: 0;
+    border-radius: var(--dpk-radius-sm);
+    background: transparent;
+    color: var(--dpk-ink);
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .actions-item:hover,
+  .actions-item:focus-visible {
+    background: var(--dpk-accent-soft);
+  }
+
+  .actions-item:focus-visible {
+    outline: none;
+    box-shadow: var(--dpk-focus);
+  }
+
+  .actions-label {
+    font-weight: 600;
+  }
+
+  .actions-description {
+    font-size: 11.5px;
+    line-height: 1.45;
+    color: var(--dpk-ink-soft);
+  }
+
+  /* The app view's device: a pill like the rendition tabs, with the zoom it is drawn at. */
+  .device-pick {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    height: 32px;
+    padding: 0 6px 0 10px;
+    box-sizing: border-box;
+    border: 1px solid var(--dpk-rule);
+    border-radius: 999px;
+    background: var(--dpk-paper-sunken);
+    box-shadow: inset 0 1px 2px rgba(20, 28, 44, 0.04);
+    color: var(--dpk-ink-soft);
+  }
+
+  .device-pick:focus-within {
+    box-shadow: var(--dpk-focus);
+  }
+
+  .device-pick svg {
+    flex: none;
+    width: 14px;
+    height: 14px;
+  }
+
+  .device-select {
+    min-width: 0;
+    padding: 0 4px 0 0;
+    border: 0;
+    background: transparent;
+    color: var(--dpk-ink);
+    font: 600 12px/1 var(--dpk-body);
+  }
+
+  .device-zoom {
+    padding: 3px 7px;
+    border-radius: 999px;
+    background: var(--dpk-paper-raised);
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
+    font: 600 10.5px/1 var(--dpk-mono);
+    font-variant-numeric: tabular-nums;
+    color: var(--dpk-ink-soft);
+  }
+
+  .stage-empty {
+    max-width: 62ch;
+    padding: 16px 18px;
+    border: 1px dashed var(--dpk-rule-strong);
+    border-radius: var(--dpk-radius-lg);
+    background: var(--dpk-paper-sunken);
+    font-size: 13px;
+    line-height: 1.7;
+    color: var(--dpk-ink-soft);
+  }
+
+  /* A story that has no steps yet: its heading, what it is for, and why no frame. */
+  .stage-story {
+    display: grid;
+    gap: 12px;
+    justify-items: start;
+  }
+
+  .story-description {
+    max-width: 62ch;
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.7;
+    color: var(--dpk-ink);
+  }
+
+  /* -------------------------------------------------------------- situation */
+
+  /*
+   * What is going on around the previews: a stage direction, read before them.
+   * The band spans the stage at any width (a maximized stage too); only the
+   * text keeps a readable line length.
+   */
+  .situation {
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+    margin: -4px 0 -2px;
+    padding: 8px 14px 8px 10px;
+    border: 1px solid color-mix(in srgb, var(--dpk-prototype-accent) 16%, var(--dpk-rule));
+    border-radius: var(--dpk-radius);
+    background: color-mix(in srgb, var(--dpk-prototype-accent) 5%, var(--dpk-paper-raised));
+    box-shadow: var(--dpk-bevel);
+  }
+
+  .situation-label {
+    flex: none;
+    padding: 2px 8px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--dpk-prototype-accent) 13%, transparent);
+    font-size: 10.5px;
+    font-weight: 650;
+    letter-spacing: 0.06em;
+    color: var(--dpk-prototype-accent);
+  }
+
+  .situation-text {
+    max-width: 90ch;
+    margin: 0;
+    min-width: 0;
+    font-size: 13px;
+    line-height: 1.65;
+    color: var(--dpk-ink);
+    white-space: pre-line;
+    overflow-wrap: anywhere;
+  }
+
+  /* ----------------------------------------------------------------- canvas */
+
+  /*
+   * The work surface the frame sits on: a quiet dot lattice that reads as a
+   * canvas rather than empty page background, giving the frame somewhere to
+   * cast its shadow.
+   */
+  .canvas {
+    display: flex;
+    justify-content: center;
+    padding: 30px;
+    border: 1px solid var(--dpk-rule);
+    border-radius: var(--dpk-radius-xl);
+    background: var(--dpk-dots), var(--dpk-paper-sunken);
+    box-shadow: inset 0 1px 3px var(--dpk-shade-1);
+  }
+
+  /* ---------------------------------------------------------- comment on UI */
+
+  .ui-comment-toggle svg,
+  .ui-comment-hint svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .ui-comment-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .ui-comment-hint {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: -4px 0 -2px;
+    padding: 7px 12px;
+    border-radius: var(--dpk-radius);
+    background: var(--dpk-accent-soft);
+    color: var(--dpk-accent-strong, var(--dpk-accent));
+    font-size: 12.5px;
+    font-weight: 550;
+  }
+
+  .canvas {
+    position: relative;
+  }
+
+  .stage:not([data-ui-comment='off']) .canvas ::slotted(*) {
+    cursor: crosshair;
+  }
+
+  /* Sized to the canvas's scroll area by the element; the boxes and pins show through. */
+  .ui-catcher {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 4;
+    cursor: crosshair;
+  }
+
+  /* Positioned against the canvas by the element, which measures the author's markup. */
+  .ui-layer {
+    display: contents;
+  }
+
+  .ui-box {
+    position: absolute;
+    z-index: 2;
+    box-sizing: border-box;
+    border-radius: 4px;
+    pointer-events: none;
+  }
+
+  .ui-hover {
+    outline: 2px solid var(--dpk-accent);
+    outline-offset: 1px;
+    background: color-mix(in srgb, var(--dpk-accent) 8%, transparent);
+  }
+
+  .ui-picked {
+    outline: 2px solid var(--dpk-accent);
+    outline-offset: 2px;
+    background: color-mix(in srgb, var(--dpk-accent) 14%, transparent);
+    box-shadow: 0 0 0 6px color-mix(in srgb, var(--dpk-accent) 18%, transparent);
+  }
+
+  .ui-pin {
+    position: absolute;
+    z-index: 3;
+    display: grid;
+    place-items: center;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 5px;
+    box-sizing: border-box;
+    transform: translate(-50%, -50%);
+    border: 2px solid var(--dpk-paper-raised);
+    border-radius: 999px 999px 999px 2px;
+    background: var(--dpk-accent);
+    color: var(--dpk-accent-ink);
+    box-shadow: var(--dpk-shadow-sm);
+    font-family: var(--dpk-mono);
+    font-size: 10px;
+    font-weight: 700;
+    pointer-events: none;
+  }
+
+  .ui-box[hidden],
+  .ui-pin[hidden] {
+    display: none;
+  }
+
+  /* ---------------------------------------------------------- notes on the UI */
+
+  /* Positioned against the canvas by the element, like the pins; blue, so a note never reads as feedback. */
+  .ui-notes {
+    display: contents;
+  }
+
+  .ui-note-badge {
+    position: absolute;
+    z-index: 3;
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    height: 20px;
+    padding: 0 6px 0 5px;
+    box-sizing: border-box;
+    transform: translate(-50%, -50%);
+    border: 2px solid var(--dpk-paper-raised);
+    border-radius: 999px;
+    background: var(--dpk-blue);
+    color: #fff;
+    box-shadow: var(--dpk-shadow-sm);
+    font-family: var(--dpk-mono);
+    font-size: 10px;
+    font-weight: 700;
+    line-height: 1;
+    cursor: pointer;
+  }
+
+  .ui-note-badge svg {
+    width: 11px;
+    height: 11px;
+  }
+
+  .ui-note-badge:hover,
+  .ui-note-badge[aria-expanded='true'] {
+    background: var(--dpk-blue-strong);
+  }
+
+  .ui-note-badge:focus-visible {
+    outline: 2px solid var(--dpk-focus);
+    outline-offset: 1px;
+  }
+
+  .ui-note-badge[hidden] {
+    display: none;
+  }
+
+  .ui-notes-head {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  /* The badge's icon and blue: the list reads as the badge opened. */
+  .ui-notes-head > svg {
+    flex: none;
+    width: 14px;
+    height: 14px;
+    color: var(--dpk-blue);
+  }
+
+  .ui-notes-head .comment-target {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ui-note-list {
+    display: grid;
+    gap: 6px;
+    max-height: 240px;
+    margin: 0;
+    padding: 0;
+    overflow: auto;
+    list-style: none;
+  }
+
+  .ui-note-list li {
+    display: flex;
+    align-items: flex-start;
+    gap: 4px;
+    padding: 8px 4px 8px 10px;
+    border-radius: var(--dpk-radius-sm);
+    background: var(--dpk-paper-sunken);
+  }
+
+  .ui-note-main {
+    display: grid;
+    flex: 1 1 auto;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  .ui-note-body {
+    margin: 0;
+    color: var(--dpk-ink);
+    font-size: 12.5px;
+    line-height: 1.6;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  .ui-note-time {
+    color: var(--dpk-ink-faint);
+    font-family: var(--dpk-mono);
+    font-size: 10.5px;
+  }
+
+  /* Rewrite and delete sit together at the end of the row. */
+  .ui-note-list li .dpk-icon-btn + .dpk-icon-btn {
+    margin-left: -4px;
+  }
+
+  .ui-note-list li:has(.ui-note-editor) {
+    padding: 6px;
+  }
+
+  .ui-note-editor {
+    display: grid;
+    flex: 1 1 auto;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  .ui-note-editor textarea {
+    min-height: 72px;
+    background: var(--dpk-paper-raised);
+    font-size: 12.5px;
+  }
+
+  .ui-note-editor-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 6px;
+  }
+
+  /*
+   * Side by side: what the user sees together, in one row. A fixed viewport
+   * keeps its width as long as the row allows it, a fluid one takes the rest;
+   * a row wider than the canvas scrolls sideways instead of squeezing a device.
+   */
+  .panes {
+    display: flex;
+    align-items: flex-start;
+    justify-content: safe center;
+    gap: 28px;
+    width: 100%;
+    min-width: 0;
+    overflow-x: auto;
+    padding-bottom: 4px;
+  }
+
+  /*
+   * A row wider than the stage fades out at the edge it scrolls toward, so the
+   * panes past it read as a scroll away rather than cut off. The scroll timeline
+   * is inactive while the row fits, which leaves it unmasked.
+   */
+  @supports (animation-timeline: scroll()) {
+    .panes {
+      animation: panes-edge linear both;
+      animation-timeline: scroll(self inline);
+    }
+
+    @keyframes panes-edge {
+      0% {
+        mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
+      }
+      2%,
+      98% {
+        mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
+      }
+      100% {
+        mask-image: linear-gradient(90deg, transparent, #000 40px);
+      }
+    }
+  }
+
+  /* A device shrinks at most to a width its layout still reads at, then the row scrolls. */
+  .pane {
+    display: grid;
+    /* The pane's width is the device's: a long label never widens it. */
+    grid-template-columns: minmax(0, 1fr);
+    gap: 8px;
+    flex: 0 1 var(--pane-width);
+    min-width: min(var(--pane-width), 720px);
+  }
+
+  .pane[data-viewport='mobile'] {
+    --pane-width: 390px;
+  }
+
+  .pane[data-viewport='tablet'] {
+    --pane-width: 834px;
+  }
+
+  .pane[data-viewport='desktop'] {
+    --pane-width: 1180px;
+  }
+
+  .pane[data-viewport='fluid'] {
+    flex: 1 1 0;
+    min-width: 240px;
+  }
+
+  .pane .frame {
+    width: 100%;
+  }
+
+  .pane-head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  .pane-head .tabs {
+    padding: 2px;
+  }
+
+  .pane-head .tab {
+    padding: 3px 11px;
+    font-size: 11.5px;
+  }
+
+  /* One line over the pane; hovering names the whole label. */
+  .pane-label {
+    justify-self: start;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: 2px 9px;
+    border-radius: 999px;
+    background: var(--dpk-paper-raised);
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
+    font-size: 11.5px;
+    font-weight: 600;
+    color: var(--dpk-ink-soft);
+  }
+
+  /*
+   * Maximized: the stage covers the tab — the page head, the tabs and the canvas
+   * alone. It is also a manual popover in the top layer, so the UA popover box
+   * (fit-content, margin, border, padding, colors) is reset here. The canvas
+   * scrolls instead of the page, and a browser preview is at least as tall as
+   * the tab allows; a phone keeps its device shape. Whatever sits above the
+   * canvas (the situation, the comment-on-UI hint) keeps its own height, and the
+   * canvas takes the rest.
+   */
+  .stage.is-maximized {
+    position: fixed;
+    inset: 0;
+    z-index: 2147483000;
+    display: flex;
+    flex-direction: column;
+    width: auto;
+    height: auto;
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    padding: 16px 20px 20px;
+    border: 0;
+    color: var(--dpk-ink);
+    background: var(--dpk-paper);
+    overflow: hidden;
+  }
+
+  .stage.is-maximized > * {
+    flex: none;
+  }
+
+  .canvas:has(> .frame[data-window='device']) {
+    align-items: flex-start;
+    /* A device wider than the stage is drawn smaller to fit it, so it never widens the page. */
+    min-width: 0;
+    contain: inline-size;
+  }
+
+  .stage.is-maximized > .canvas {
+    flex: 1 1 0;
+    min-height: 0;
+    align-items: flex-start;
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+
+  .stage.is-maximized .frame:not([data-kind='native'], [data-kind='plain']) {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+  }
+
+  .stage.is-maximized .frame:not([data-kind='native'], [data-kind='plain']) .viewport {
+    flex: 1 0 auto;
+  }
+
+  /*
+   * Demo: the app view's browser alone across the tab, as if the reader were
+   * using the app — no title, no tools, no canvas around it. The browser fills
+   * the tab and its page scrolls inside the viewport; a phone stays phone wide.
+   */
+  .stage.is-demo {
+    position: fixed;
+    inset: 0;
+    z-index: 2147483000;
+    display: flex;
+    flex-direction: column;
+    width: auto;
+    height: auto;
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    color: var(--dpk-ink);
+    background: var(--dpk-paper-sunken);
+    overflow: hidden;
+  }
+
+  .stage.is-demo > .canvas {
+    flex: 1 1 0;
+    min-height: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: var(--dpk-dots), var(--dpk-paper-sunken);
+    box-shadow: none;
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+
+  .stage.is-demo .frame[data-window='fill'] {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  /* A device keeps its size, in the middle of the tab (the element leaves 24px around it). */
+  .stage.is-demo > .canvas > .frame[data-window='device'] {
+    margin: auto;
+  }
+
+  .stage.is-demo > .canvas > .frame:not([data-window]) {
+    margin: 24px auto;
+  }
+
+  /*
+   * The demo's controls (commenting on the UI, the way out). Over a phone or a
+   * frame outside the browser, they float at the top right.
+   */
+  .demo-controls {
+    position: absolute;
+    top: 12px;
+    right: 16px;
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .demo-control {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    height: 30px;
+    padding: 0 10px;
+    border: 1px solid var(--dpk-rule-strong);
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--dpk-paper-raised) 82%, transparent);
+    backdrop-filter: blur(10px);
+    box-shadow: var(--dpk-shadow);
+    color: var(--dpk-ink-soft);
+    font: 600 12px/1 var(--dpk-body);
+    cursor: pointer;
+    opacity: 0.55;
+    transition:
+      opacity 160ms var(--dpk-ease),
+      color 160ms var(--dpk-ease);
+  }
+
+  .demo-exit {
+    padding-right: 8px;
+  }
+
+  .demo-control:hover,
+  .demo-control:focus-visible {
+    opacity: 1;
+    color: var(--dpk-ink);
+  }
+
+  .demo-control:focus-visible {
+    outline: none;
+    box-shadow: var(--dpk-focus), var(--dpk-shadow);
+  }
+
+  /* Commenting stays in sight: a click on the app now picks an element instead of using it. */
+  .demo-control[aria-pressed='true'] {
+    opacity: 1;
+    border-color: var(--dpk-accent-strong);
+    background: var(--dpk-accent);
+    color: var(--dpk-accent-ink);
+  }
+
+  .demo-control svg {
+    width: 12px;
+    height: 12px;
+  }
+
+  /* A desktop browser has them at the free end of the tab strip, like window controls. */
+  .browser-tabs .demo-controls {
+    position: static;
+    flex: none;
+    align-self: center;
+    margin: 0 0 3px auto;
+  }
+
+  .browser-tabs .demo-control {
+    height: 26px;
+  }
+
+  .browser-tabs .demo-control:not([aria-pressed='true']) {
+    opacity: 0.85;
+  }
+
+  .demo-exit kbd {
+    padding: 2px 5px;
+    border: 1px solid var(--dpk-rule-strong);
+    border-radius: var(--dpk-radius-xs);
+    background: var(--dpk-paper-sunken);
+    font: 600 10px/1 var(--dpk-mono);
+  }
+
+  /* ------------------------------------------------------------------ frame */
+
+  .frame {
+    width: min(var(--frame-width), 100%);
+    max-width: 100%;
+    margin: 0;
+    border: 1px solid var(--dpk-rule);
+    border-radius: var(--dpk-radius-lg);
+    background: var(--dpk-paper-raised);
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-lg);
+    overflow: hidden;
+    /* However high the mock stacks its own layers, they stay under what the stage draws over the frame. */
+    isolation: isolate;
+    transition: box-shadow 200ms var(--dpk-ease);
+  }
+
+  /*
+   * Native previews are recognised by their device shape: a slim bezel, a status
+   * bar with a punch-hole camera, and a home indicator. No address bar.
+   */
+  .frame[data-kind='native'] {
+    padding: 10px;
+    border-color: #22262e;
+    border-radius: 28px;
+    background: linear-gradient(160deg, #2e3440, #1a1d24);
+    box-shadow:
+      var(--dpk-shadow-lg),
+      inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  }
+
+  .frame[data-kind='native'] .viewport {
+    overflow: hidden;
+    border-radius: 18px;
+  }
+
+  /* A phone is portrait: derive the screen height from its width (~1:2.05)
+     instead of reusing the browser preview heights. */
+  .frame[data-kind='native'][data-viewport='mobile'] .viewport {
+    min-height: calc((var(--frame-width, 390px) - 16px) * 2.05);
+  }
+
+  /*
+   * A plain preview is not a screen: no chrome, no bezel, no frame of its own.
+   * The light DOM draws the whole object (a memo, a FAX, a paper form) and the
+   * canvas is its desk, so it is as tall as its content.
+   */
+  .frame[data-kind='plain'] {
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    overflow: visible;
+  }
+
+  .frame[data-kind='plain'] .viewport {
+    min-height: 0;
+    background: transparent;
+  }
+
+  .frame[data-kind='plain'][data-empty] .viewport {
+    min-height: 180px;
+  }
+
+  /* Home indicator. */
+  .frame[data-kind='native'] .viewport::after {
+    content: '';
+    position: absolute;
+    bottom: 8px;
+    left: 50%;
+    width: 88px;
+    height: 4px;
+    transform: translateX(-50%);
+    border-radius: 999px;
+    background: rgba(138, 146, 160, 0.55);
+  }
+
+  /*
+   * The preview is never scrolled on its own: it shows everything it contains and
+   * the page scrolls as a whole. The flex column keeps a short mock filling
+   * the frame's minimum height without pinning a maximum.
+   */
+  .viewport {
+    position: relative;
+    contain: layout;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-height: var(--frame-min-height, 480px);
+    /* A preview is the product's screen, not the kit's chrome: it stays light in a dark theme. */
+    color-scheme: light;
+    background: #fff;
+    /* …and so does its ink: the kit's dark-theme text color would be invisible on it. */
+    color: #1f2430;
+  }
+
+  /*
+   * The author's wrapper becomes the frame's filling layer: a one-cell grid makes
+   * its height definite, so a mock that asks for height:100% fills the frame
+   * instead of collapsing to its content.
+   */
+  /*
+   * The author's wrapper is a stretch row: a mock fills a short frame and grows
+   * the frame when its own content is taller. Stretching (rather than a
+   * percentage height) is what makes the fill reliable.
+   */
+  /* Only the viewport carries the minimum height; the wrapper grows to fill it. */
+  .viewport ::slotted(*) {
+    display: grid;
+    flex: 1 0 auto;
+    min-width: 0;
+  }
+
+  /*
+   * The app view is a simulation: a screen runs in a window of a fixed size (a
+   * device's screen, or the whole demo) and what does not fit scrolls inside
+   * the author's wrapper, the way the real page scrolls under the device's own
+   * chrome — the status bar, the address bar and a phone browser's bottom bar
+   * stay where they are. The viewport contains layout, so a mock's
+   * fixed position element (a tab bar, a modal) stays on the device screen.
+   */
+  .frame[data-window] {
+    display: flex;
+    flex: none;
+    flex-direction: column;
+    box-sizing: border-box;
+    max-width: none;
+  }
+
+  .frame[data-window='device'] {
+    width: var(--device-width);
+    height: var(--device-height);
+  }
+
+  .frame[data-kind][data-window] .viewport {
+    flex: 1 1 0;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .frame[data-window] .viewport ::slotted(*) {
+    flex: 1 1 0;
+    min-height: 0;
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+
+  .frame-placeholder {
+    position: absolute;
+    inset: 12px;
+    display: grid;
+    align-content: center;
+    justify-items: center;
+    gap: 8px;
+    padding: 12px;
+    text-align: center;
+    color: var(--dpk-ink-faint);
+    border: 1px dashed var(--dpk-rule-strong);
+    border-radius: var(--dpk-radius);
+    background: var(--dpk-dots), var(--dpk-paper-sunken);
+  }
+
+  .frame-placeholder code {
+    padding: 3px 7px;
+    border: 1px solid var(--dpk-rule);
+    border-radius: var(--dpk-radius-xs);
+    background: var(--dpk-paper-raised);
+    font-family: var(--dpk-mono);
+    font-size: 10px;
+  }
+
+  .parked {
+    display: none;
+  }
+`,xs=`
+  /*
+   * The wrapper is a stretch grid (see \`.viewport ::slotted(*)\`): one child
+   * fills the frame, but several would share the extra height as gaps between
+   * them, so they stack from the top instead (a \`<style>\` or \`<script>\` beside
+   * the one child draws nothing and does not count). A shadow tree cannot see a
+   * slotted element's children, hence the document rule; \`:where\` lets the
+   * author's own \`align-content\` win.
+   */
+  :where(
+      dpk-view-prototype
+        > [data-preview-id]:has(> :not(style, script, template, link) ~ :not(style, script, template, link))
+    ) {
+    align-content: start;
+  }
+
+  dpk-view-prototype > [data-preview-id]:has(dialog[${Ee}][open]) {
+    position: relative;
+  }
+
+  dpk-view-prototype > [data-preview-id]:has(dialog[${Ee}][open])::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    background: color-mix(in srgb, var(--dpk-ink, #111827) 38%, transparent);
+  }
+
+  dpk-view-prototype > [data-preview-id] dialog[${Ee}][open] {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    max-width: calc(100% - 32px);
+    max-height: calc(100% - 32px);
+    margin: auto;
+  }
+`,qe={kind:"off"},Es=(e,t)=>{switch(t.kind){case"toggle":return e.kind==="off"?{kind:"picking",as:"feedback"}:qe;case"exit":return qe;case"pick":return e.kind==="off"?e:{kind:"composing",target:t.target,body:e.kind==="composing"?e.body:"",as:e.as};case"input":return e.kind==="composing"?{...e,body:t.body}:e;case"choose":return e.kind==="off"||e.as===t.as?e:{...e,as:t.as};case"dismiss":case"submitted":return e.kind==="off"?e:{kind:"picking",as:e.as};default:return e}},Ss={width:300,height:300},$s=360,Ts={width:280,height:360},As={width:300,height:320},Oi=(e,t)=>({previewId:e.previewId,selector:t.selector,...t.text===void 0?{}:{text:t.text}}),Ci=".comment-pop:not(.ui-notes-pop)",Mi="dpk-view-prototype-document-styles",Is=24,_s=()=>{if(document.getElementById(Mi)!==null)return;const e=Object.assign(document.createElement("style"),{id:Mi,textContent:xs});document.head.append(e)},Ps=(e,t,i)=>{const n=getComputedStyle(e),o=/auto|scroll/.test(n.overflowX)&&e.scrollWidth>e.clientWidth,s=/auto|scroll/.test(n.overflowY)&&e.scrollHeight>e.clientHeight,r=t<0?e.scrollLeft>0:t>0&&e.scrollLeft+e.clientWidth<e.scrollWidth-1,a=i<0?e.scrollTop>0:i>0&&e.scrollTop+e.clientHeight<e.scrollHeight-1;return o&&r||s&&a},Ds=e=>{if(e.assignedSlot!==null)return e.assignedSlot;if(e.parentElement!==null)return e.parentElement;const t=e.getRootNode();return t instanceof ShadowRoot?t.host:null};class Li extends ot{static{this.styles=[ot.styles,on,sn,ln,pn,cn,wn,ks]}#e=qe;#b=!1;#l=null;#s=[];#k=new rn(this);#K={app:new he(this),activity:new he(this),story:new he(this)};#X=new he(this);#O=!1;#i=null;#o=null;#C=!1;#h=!1;#x=!1;#r=null;#E=null;#S={};#$=1;#v=typeof ResizeObserver>"u"?null:new ResizeObserver(()=>{this.#q(),this.#y()});#p=null;#c=null;#f=null;#T=!1;#n=null;#A=null;#g=null;#t=null;#m=null;#M=typeof MutationObserver>"u"?null:new MutationObserver(()=>this.#ce());#d=null;constructor(){super(),new st(this,{open:()=>this.#f!==null,closesOn:t=>!t.some(i=>i instanceof Element&&this.#Q(i)),ownsEscape:()=>!0,dismiss:()=>this.#I(!0)}),new st(this,{open:()=>this.#n!==null,closesOn:t=>!t.some(i=>i instanceof Element&&(i.classList.contains("ui-notes-pop")||i.classList.contains("ui-note-badge"))),ownsEscape:()=>!0,dismiss:()=>this.#_(!0)})}definitionFor(t){return oi(t)}connectedCallback(){super.connectedCallback(),window.addEventListener("keydown",this.#H),window.addEventListener("resize",this.#D),this.addEventListener("toggle",this.#F,!0),this.addEventListener("click",this.#w,!0),this.addEventListener("auxclick",this.#w,!0),this.#M?.observe(this,{subtree:!0,childList:!0,attributes:!0,characterData:!0}),_s()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this.#H),window.removeEventListener("resize",this.#D),this.removeEventListener("toggle",this.#F,!0),this.removeEventListener("click",this.#w,!0),this.removeEventListener("auxclick",this.#w,!0),this.#v?.disconnect(),this.#p=null,this.#M?.disconnect(),this.#d!==null&&cancelAnimationFrame(this.#d),this.#d=null,this.#j()}renderRegions(t){const i=me(this.locale),n=te(t.state,t.navigation),o=le(t.navigation)==="app";this.#i!==null&&this.#i.mode==="demo"!==o&&this.#G();const s=o?this.#ye(t,i):null;return this.#C=s!==null,this.#s=n!==void 0&&n.kind!=="story"&&(s===null||s.view.entry?.kind==="page")?Ye(t.state,n,t.navigation).shown.map(r=>r.id):[],this.#r!==null&&this.#r.page!==this.#s.join(" ")&&this.#j(),{sidebar:yi(t,i,this.#K),main:Pi(t,i,{deviceSelect:this.#X,hasPreviewContent:r=>this.#Se(r),lift:this.#i,onToggleMaximize:()=>this.#N(this.#i===null?"maximized":null),onToggleDemo:()=>this.#N(this.#i===null?"demo":null),onLiftedWheel:this.#me,browser:s===null?null:{...s,loading:this.#r!==null},devices:o?{choice:this.#S,zoom:this.#$,onPick:r=>{this.#S=Uo(this.#S,r),this.requestUpdate()}}:null,uiComment:this.#ie(t),uiNotes:this.#oe(t,o),actions:this.#Z(t),canvasEvents:{click:this.#ae,pointermove:this.#de,pointerleave:this.#le,wheel:this.#pe,scroll:this.#D}})}}updated(){super.updated(),this.#fe(),this.#he(),this.#ue(),this.#q();const t=this.#e;if(t.kind==="composing"&&!this.#s.includes(t.target.previewId)){this.#u({kind:"dismiss"});return}this.#ge(),this.#ee(),this.#x&&(this.#x=!1,this.renderRoot.querySelector('.browser-tab[aria-selected="true"]')?.focus()),this.#y(),this.#se();const i=t.kind==="composing"&&!this.#b;if(this.#b=t.kind==="composing",t.kind!=="composing"||this.#l===null)return;const n=this.renderRoot.querySelector(Ci);n&&(this.#k.open(n,this.#l,Ss,{placement:"right-start"}),i&&n.querySelector("textarea")?.focus({preventScroll:!0}))}#Z(t){const i=Kt(t.state,this.#s),n=i.map(s=>s.screen.id).join(" "),o=i.length>0&&this.#c===n;return{groups:i,open:o,toggle:()=>o?this.#I(!1):this.#J(n),run:(s,r)=>this.#te(s,r)}}#J(t){this.#c=t,this.requestUpdate()}#I(t){this.#c!==null&&(this.#c=null,this.#T=t,this.requestUpdate())}#Q(t){return t.classList.contains("actions-menu")||t.getAttribute("data-role")==="actions"}#ee(){const t=this.renderRoot.querySelector(".actions-menu"),i=this.renderRoot.querySelector('[data-role="actions"]');if(t===null){this.#f=null,this.#T&&i?.focus({preventScroll:!0}),this.#T=!1;return}t===this.#f||i===null||(this.#f=t,this.#k.open(t,i,Ts),t.querySelector('[role="menuitem"]')?.focus({preventScroll:!0}))}#te(t,i){this.#I(!0);const n=Kt(this.derivation.state,this.#s).find(d=>d.screen.id===t),o=n?.actions.find(d=>d.id===i);if(n===void 0||o===void 0)return;const r=this.#P().filter(d=>n.previewIds.includes(d.getAttribute("data-preview-id")??"")).map(d=>{const p=[...ko(d,o.fill??{}),...xo(d,o.click??[])];return d.dispatchEvent(new CustomEvent("dpk-action",{bubbles:!0,detail:{id:o.id,screen:n.screen.id}})),p}),a=(r[0]??[]).filter(d=>r.every(p=>p.includes(d)));a.length!==0&&console.warn(`[dev-process-kit] <dpk-view-prototype>: action "${o.id}" of screen "${n.screen.id}" found nothing on screen for: ${a.join(", ")}`)}#ie(t){const i=this.#e,n=i.kind==="composing"?i.target:void 0,o=n?E(t.state,n.previewId)?.preview:void 0,s=n?re(n):void 0,r=i.kind==="composing"&&i.as==="note"?(o?.notes??[]).filter(a=>a.selector===n?.selector).map(a=>a.body):t.comments.filter(a=>a.target.type===O&&a.target.id===s).map(a=>Qe(a));return{mode:i,pins:i.kind==="off"?[]:zt(t.comments,this.#s),...n&&o?{targetLabel:Ve(o,n)}:{},notes:r,composer:bn(this.locale),send:a=>this.#u(a),submit:a=>this.#ne(t.state,a)}}#u(t){const i=Es(this.#e,t);i!==this.#e&&(this.#e=i,i.kind!=="composing"&&(this.#l=null),i.kind!=="off"&&(this.#n=null),this.requestUpdate())}#ne(t,i){const n=this.#e;if(n.kind!=="composing")return;(n.as==="note"?this.dispatch(W.addUiNote(n.target,tt("note",_t(t)),i,new Date().toISOString())):this.dispatch({type:an,target:{type:O,id:re(n.target)},payload:{body:i}})).ok&&this.#u({kind:"submitted"})}#oe(t,i){const n=i?[]:jn(t.state,this.#s),o=this.#e.kind==="off"&&this.#n!==null?n.find(r=>ie(r)===this.#n)??null:null;o===null&&(this.#n=null);const s=this.#t;return s!==null&&!o?.notes.some(r=>r.id===s.noteId)&&(this.#t=null),{badges:n,open:o,toggle:r=>{const a=ie(r);this.#n===a?this.#_(!1):(this.#n=a,this.#t=null,this.requestUpdate())},close:()=>this.#_(!0),remove:(r,a)=>{const d=r.notes.find(p=>p.id===a);d!==void 0&&this.dispatch(W.deleteUiNote(Oi(r,d),a))},editing:this.#t,edit:(r,a)=>{this.#t={noteId:r,body:a},this.#m={noteId:r,part:"editor"},this.requestUpdate()},input:r=>{this.#t!==null&&(this.#t={...this.#t,body:r}),this.requestUpdate()},save:()=>{const r=this.#t,a=o?.notes.find(p=>p.id===r?.noteId),d=r?.body.trim()??"";o===null||r===null||a===void 0||d===""||(d!==a.body&&this.dispatch(W.setUiNoteBody(Oi(o,a),a.id,d)),this.#L())},cancel:()=>this.#L()}}#L(){this.#t!==null&&(this.#m={noteId:this.#t.noteId,part:"edit"},this.#t=null,this.requestUpdate())}#_(t){this.#n!==null&&(this.#g=t?this.#n:null,this.#n=null,this.requestUpdate())}#se(){const t=this.renderRoot.querySelector(".ui-notes-pop");if(t===null){this.#A=null,this.#g!==null&&this.#U(this.#g)?.focus({preventScroll:!0}),this.#g=null;return}const i=this.#U(t.dataset.key??""),n=this.#m;this.#m=null,n!==null&&t.querySelector(`li[data-id="${CSS.escape(n.noteId)}"]`)?.querySelector(n.part==="editor"?"textarea":'[data-role="edit-note"]')?.focus({preventScroll:!0}),!(t===this.#A||i===null)&&(this.#A=t,this.#k.open(t,i,As,{placement:"bottom-start"}),t.querySelector('[data-role="close-notes"]')?.focus({preventScroll:!0}))}#U(t){return Array.from(this.renderRoot.querySelectorAll(".ui-note-badge")).find(i=>i.dataset.key===t)??null}#V(t){const i=t.composedPath(),n=i[0];if(n instanceof Element&&n.classList.contains("ui-catcher"))return this.#re(t.clientX,t.clientY);const o=i.find(s=>s instanceof Element&&s.parentElement===this&&s.hasAttribute("data-preview-id"));return!o||!(n instanceof Element)||!o.contains(n)?null:this.#Y(n,o)}#re(t,i){const n=this.#z(t,i);return n===null?null:this.#Y(n.element,n.wrapper)}#z(t,i){if(typeof document.elementsFromPoint!="function")return null;const n=this.#P();for(const o of document.elementsFromPoint(t,i)){const s=n.find(r=>r.contains(o));if(s!==void 0)return{element:o,wrapper:s}}return null}#Y(t,i){const n=i.getAttribute("data-preview-id");if(!n)return null;const o=So(t,i),s=Io(o,i);return{element:o,target:{previewId:n,selector:s.selector,...s.text===void 0?{}:{text:s.text}}}}#P(){return Array.from(this.children).filter(t=>{const i=t.getAttribute("data-preview-id");return i!==null&&this.#s.includes(i)})}#ae=t=>{if(this.#e.kind==="off")return;const i=this.#V(t);i&&(t.preventDefault(),t.stopPropagation(),this.#l=i.element,this.#u({kind:"pick",target:i.target}))};#de=t=>{if(this.#e.kind==="off")return;const i=this.#V(t);this.#R(".ui-hover",i?.element??null)};#le=()=>{this.#R(".ui-hover",null)};#pe=t=>{const i=t.composedPath()[0];if(!(i instanceof Element)||!i.classList.contains("ui-catcher"))return;const n=this.renderRoot.querySelector(".canvas");let o=this.#z(t.clientX,t.clientY)?.element??null;for(;o!==null&&o!==n;){if(Ps(o,t.deltaX,t.deltaY)){t.preventDefault(),o.scrollBy({left:t.deltaX,top:t.deltaY});return}o=Ds(o)}};#H=t=>{t.key!=="Escape"||t.defaultPrevented||(this.#e.kind!=="off"?this.#u({kind:"exit"}):this.#N(null))};#D=()=>{this.#y()};#ce(){this.#d!==null||typeof requestAnimationFrame!="function"||(this.#d=requestAnimationFrame(()=>{this.#d=null,this.#y()}))}#y(){const t=this.renderRoot.querySelector(".canvas");if(t&&this.#B(t,".ui-note-badge","left"),this.#e.kind==="off"||(this.#R(".ui-picked",this.#l),!t))return;const i=this.renderRoot.querySelector(".ui-catcher");if(i){i.style.width=`${t.scrollWidth}px`,i.style.height=`${t.scrollHeight}px`;const n=[...this.renderRoot.querySelectorAll(".demo-controls")].map(o=>o.getBoundingClientRect());i.style.clipPath=go(i.getBoundingClientRect(),n)}this.#B(t,".ui-pin","right")}#B(t,i,n){for(const o of this.renderRoot.querySelectorAll(i)){const s=this.#ve(o.dataset.preview??""),a=(s?_o(s,o.dataset.selector??""):null)?.getBoundingClientRect();if(!a||a.width===0&&a.height===0){o.hidden=!0;continue}const d=this.#W(t);o.hidden=!1,o.style.left=`${a[n]-d.left}px`,o.style.top=`${a.top-d.top}px`}}#R(t,i){const n=this.renderRoot.querySelector(t),o=this.renderRoot.querySelector(".canvas");if(!n||!o)return;const s=i?.getBoundingClientRect();if(!s){n.hidden=!0;return}const r=this.#W(o);n.hidden=!1,n.style.left=`${s.left-r.left}px`,n.style.top=`${s.top-r.top}px`,n.style.width=`${s.width}px`,n.style.height=`${s.height}px`}#W(t){const i=t.getBoundingClientRect();return{left:i.left+t.clientLeft-t.scrollLeft,top:i.top+t.clientTop-t.scrollTop}}#ue(){const t=this.renderRoot.querySelector(".canvas");t===this.#p||this.#v===null||(this.#p!==null&&this.#v.unobserve(this.#p),this.#p=t,t!==null&&this.#v.observe(t))}#q(){const t=this.renderRoot.querySelector('.frame[data-window="device"]'),i=t?.closest(".canvas");if(!t||!(i instanceof HTMLElement))return;const n=getComputedStyle(t),o={width:parseFloat(n.getPropertyValue("--device-width")),height:parseFloat(n.getPropertyValue("--device-height"))},s=getComputedStyle(i),r=i.clientWidth-parseFloat(s.paddingLeft)-parseFloat(s.paddingRight),a=this.#i?.mode==="demo",d=a?Is*2:0,p=zo(o,{width:r-d,...a?{height:i.clientHeight-d}:{}});p!==this.#$&&(this.#$=p,this.requestUpdate())}#he(){for(const t of this.querySelectorAll(":scope > [data-preview-id]"))for(const i of t.querySelectorAll("dialog"))ri(i),ai(this,i)}#F=t=>{const i=t.target;!(i instanceof HTMLDialogElement)||!i.open||Array.from(this.children).some(n=>n.hasAttribute("data-preview-id")&&n.contains(i))&&(ri(i),ai(this,i))};#ve(t){return Array.from(this.children).find(i=>i.getAttribute("data-preview-id")===t)}#fe(){if(this.#O||this.renderRoot.querySelector(".stage")===null)return;this.#O=!0;const t=this.derivation.state,i=[];for(const n of Array.from(this.children)){const o=n.getAttribute("data-preview-id");if(o!==null)for(const s of n.querySelectorAll("a, [data-dpk-navigate]")){const r=oo(t,{href:s.getAttribute("href"),navigate:s.getAttribute("data-dpk-navigate")});if(r===null)continue;const a=(s.textContent??"").replace(/\s+/g," ").trim().slice(0,40),d=s.getAttribute("data-dpk-navigate")??s.getAttribute("href")??"(no href)";i.push(`  ${o}: <${s.tagName.toLowerCase()}> "${a}" \u2192 ${d} (${r})`)}}i.length!==0&&console.warn(`[dev-process-kit] <dpk-view-prototype>: ${i.length} link(s) in the previews lead nowhere. Point each at the screen it opens (data-dpk-navigate="screen=\u2026"); a link that only moves the scenario on can name a step (data-dpk-navigate="step=\u2026") or a user story (data-dpk-navigate="story=\u2026"):
+`+i.join(`
+`))}#N(t){if(t===(this.#i?.mode??null))return;const i=this.renderRoot.querySelector(".stage"),n=this.#i?.height??i?.offsetHeight??0;this.#G(),t!==null&&(this.#i={mode:t,height:n}),this.#c=null,this.#n=null,t!==null&&this.#e.kind==="composing"&&(dn(this.renderRoot.querySelector(Ci)),this.#b=!1),this.requestUpdate()}#G(){this.#i=null,this.#E=null}#ge(){const t=this.renderRoot.querySelector(".stage");if(!(this.#i===null||!t||typeof t.showPopover!="function")&&t!==this.#E){this.#E=t;try{t.showPopover()}catch{}}}#me=t=>{const i=this.renderRoot.querySelector(".canvas");(i===null||!t.composedPath().includes(i))&&t.preventDefault()};#ye(t,i){const n=ci(t.state,t.navigation);this.#o=this.#o===null?n===null?null:kn(n):ct(this.#o,{kind:"observe",page:n});const o=this.#o;if(o===null)return null;const s=ut(o),r=s?.kind!=="page"&&o.seen!==null;if(n===null&&!r)return null;const a=No(o)??n;return{view:vi(t.state,o,i,a),shortcuts:s?.kind==="new-tab"?Oo(t.state,a):[],switcher:this.#h,send:d=>this.#be(d)}}#a(t){if(this.#o===null)return;const i=ct(this.#o,t);if(i===this.#o)return;this.#o=i;const n=ut(i);n?.kind==="page"&&this.#we(n.page),this.requestUpdate()}#we(t){this.navigate({screen:t.screen??null,preview:t.preview??null})}#be(t){switch(t.kind){case"reload":this.#xe();return;case"address":this.#ke(t.input);return;case"back":case"forward":case"new-tab":this.#h=!1,this.#a({kind:t.kind});return;case"switcher":this.#h=t.open,this.requestUpdate();return;case"activate":this.#h=!1,this.#x=t.focus===!0,this.#a({kind:"activate",id:t.id}),this.requestUpdate();return;case"close-tab":this.#a({kind:t.kind,id:t.id});return;case"visit":this.#a({kind:"visit",page:t.page});return;default:return}}#ke(t){const i=this.#o;if(i===null)return;const n=this.derivation.state,o=vi(n,i,me(this.locale)).url||"https://page.example.com/",s=Po(n,t,o);if(s!==null){this.#a({kind:"visit",page:s});return}this.#a({kind:"unreachable",url:xn(t,o)})}#xe(){if(this.#r!==null)return;const t=setTimeout(()=>{this.#r=null;for(const i of this.#P()){for(const n of i.querySelectorAll("form"))n.reset();for(const n of i.querySelectorAll("dialog"))n.close();i.scrollTop=0,i.dispatchEvent(new CustomEvent("dpk-reload",{bubbles:!0}))}this.renderRoot.querySelector(".browser .viewport")?.scrollTo?.({top:0}),this.requestUpdate()},$s);this.#r={page:this.#s.join(" "),timer:t},this.requestUpdate()}#j(){this.#r!==null&&(clearTimeout(this.#r.timer),this.#r=null)}#w=t=>{if(!this.#C||this.#e.kind!=="off"||this.#o===null||t.type==="auxclick"&&t.button!==1)return;const i=this.#Ee(t);if(i===null)return;const n=t.metaKey||t.ctrlKey||t.button===1;if(!i.blank&&!n)return;t.preventDefault(),t.stopPropagation();const o=ci(this.derivation.state,_e(this.hashFor(i.patch)));if(o===null){n||this.navigate(i.patch);return}this.#a({kind:"open-tab",entry:{kind:"page",page:o},background:n})};#Ee(t){const i=t.composedPath();if(!i.some(o=>o instanceof Element&&o.parentElement===this&&o.hasAttribute("data-preview-id")))return null;for(const o of i){if(!(o instanceof Element)||o===this)break;const s=o.getAttribute("data-dpk-navigate"),r=o instanceof HTMLAnchorElement?o.getAttribute("href"):null,a=s??(r?.startsWith("#")?r:null);if(a===null)continue;const d=s!==null&&!s.includes("=")?`step=${s}`:a;return{patch:{..._e(d)},blank:o.getAttribute("target")==="_blank"}}return null}#Se(t){return Array.from(this.querySelectorAll("[data-preview-id]")).some(i=>i.getAttribute("data-preview-id")===t)}}const Ui=()=>{customElements.get("dpk-view-prototype")||customElements.define("dpk-view-prototype",Li)},Rs=Object.freeze(Object.defineProperty({__proto__:null,DpkViewPrototype:Li,VIEWPORT_MIN_HEIGHT:Ii,VIEWPORT_WIDTH:Ai,allScreens:H,allStepIds:Pt,applyPrototypeAction:Rt,definePrototypeElement:Ui,describePrototypeAction:Lt,emptyPrototypeBase:Tt,findActivity:U,findPreview:E,findScreen:L,findStep:S,findStory:$,flattenSteps:B,parsePrototypeBase:$t,prototypeAction:W,prototypeActions:m,prototypeBaseSchema:xt,prototypeCommentTargets:Xt,prototypeDefinitionFor:oi,prototypeMessages:me,prototypePageHeading:Zt,prototypeTargetLabel:Vt,prototypeTitle:He,renderFrame:We,renderNav:yi,renderStage:Pi,resolvePrototypeNavigation:xe,serializePrototypeAction:Ut},Symbol.toStringTag,{value:"Module"}));export{Ui as d,Rs as i};