@transitive-sdk/utils-web 0.10.3 → 0.11.0

package/dist/utils-web.js

@@ -1 +1,1530 @@
-var Xe=Object.create;var K=Object.defineProperty;var Ze=Object.getOwnPropertyDescriptor;var Re=Object.getOwnPropertyNames;var et=Object.getPrototypeOf,tt=Object.prototype.hasOwnProperty;var v=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),ge=(t,e)=>{for(var s in e)K(t,s,{get:e[s],enumerable:!0})},G=(t,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of Re(e))!tt.call(t,o)&&o!==s&&K(t,o,{get:()=>e[o],enumerable:!(r=Ze(e,o))||r.enumerable});return t},y=(t,e,s)=>(G(t,e,"default"),s&&G(s,e,"default")),w=(t,e,s)=>(s=t!=null?Xe(et(t)):{},G(e||!t||!t.__esModule?K(s,"default",{value:t,enumerable:!0}):s,t)),st=t=>G(K({},"__esModule",{value:!0}),t);var pe=v((Rt,be)=>{be.exports=()=>{try{return require("react-web-component-style-loader/exports").styleElements}catch{return[]}}});var ye=v((es,me)=>{me.exports=function(e){if(!e.attributes)return{};let s={},r,n=[...e.attributes].map(c=>({[c.name]:c.value}));for(r of n){let c=Object.keys(r)[0],i=c.replace(/-([a-z])/g,a=>a[1].toUpperCase());s[i]=r[c]}return s}});var qe=v((ts,$e)=>{var rt=require("react"),nt=require("react-dom"),ot=require("react-shadow-dom-retarget-events"),it=pe(),ct=ye(),at={attachedCallback:"webComponentAttached",connectedCallback:"webComponentConnected",disconnectedCallback:"webComponentDisconnected",adoptedCallback:"webComponentAdopted"};$e.exports={create:(t,e,s=!0,r=void 0)=>{let o=class extends HTMLElement{instance=null;callConstructorHook(){this.instance.webComponentConstructed&&this.instance.webComponentConstructed.apply(this.instance,[this])}callLifeCycleHook(n,c=[]){let i=at[n];i&&this.instance&&this.instance[i]&&this.instance[i].apply(this.instance,c)}connectedCallback(){let n=this,c=n;if(s){let i=n.attachShadow({mode:"open"});c=document.createElement("div"),it().forEach(h=>{i.appendChild(h.cloneNode(i))}),i.appendChild(c),ot(i)}nt.render(rt.createElement(t,ct(n)),c,function(){n.instance=this,n.callConstructorHook(),n.callLifeCycleHook("connectedCallback")})}disconnectedCallback(){this.callLifeCycleHook("disconnectedCallback")}adoptedCallback(n,c){this.callLifeCycleHook("adoptedCallback",[n,c])}call(n,c){return r?.current?.[n]?.call(r?.current,c)}getConfig(){return this.instance.state.config}};return customElements.define(e,o),o}}});var Ce=v((rs,Te)=>{Te.exports={rosReleases:{kinetic:{rosVersion:1,ubuntuCodename:"xenial"},melodic:{rosVersion:1,ubuntuCodename:"bionic"},noetic:{rosVersion:1,ubuntuCodename:"focal"},dashing:{rosVersion:2},eloquent:{rosVersion:2},foxy:{rosVersion:2},galactic:{rosVersion:2},humble:{rosVersion:2},iron:{rosVersion:2},rolling:{rosVersion:2}}}});var X=v((ns,Le)=>{var ut=require("semver/functions/compare"),Ee=require("semver/ranges/min-version"),L={get:require("lodash/get"),set:require("lodash/set"),unset:require("lodash/unset"),forEach:require("lodash/forEach"),map:require("lodash/map"),isEmpty:require("lodash/isEmpty"),eq:require("lodash/isEqual"),isPlainObject:require("lodash/isPlainObject"),merge:require("lodash/merge")},B=require("loglevel"),W=require("chalk"),lt=Ce();B.setAll=t=>Object.values(B.getLoggers()).forEach(e=>e.setLevel(t));var Se={warn:W.yellow,error:W.red,info:W.green,debug:W.gray},ht=t=>Se[t]?Se[t](t):t,dt=B.methodFactory;B.methodFactory=(t,e,s)=>{let r=dt(t,e,s);if(typeof window<"u"){let n=`${s} ${t}`;return(...c)=>r(`[${n}]`,...c)}let o=`${s} ${ht(t)}`;return(...n)=>r(`[${W.blue(new Date().toISOString())} ${o}]`,...n)};var ft=B.getLogger,gt=t=>JSON.parse(JSON.stringify(t)),bt=t=>JSON.parse(atob(t.split(".")[1])),pt=t=>{try{return JSON.parse(t)}catch{return null}},we=(t,e,s)=>{t&&(s(t),t[e]?.forEach(r=>we(r,e,s)))},xe=(t,e,s,r=[])=>{s(t,r);let o=e[0];if(o){let n=t[o];n&&xe(n,e.slice(1),s,r.concat(o))}},mt=t=>new Promise(e=>{setTimeout(e,t)}),Oe=(t,e=[],s={})=>(L.forEach(t,(r,o)=>{let n=e.concat(String(o));(L.isPlainObject(r)||r instanceof Array)&&r!==null?Oe(r,n,s):s[De(n)]=r}),s),Pe=(t,e,s,r=[],o={})=>{if(e.length==0||e[0]=="#"){s(t,r,o);return}let n=e[0];if(n){for(let c in t)if(c==n||n=="*"||n.startsWith("+")){let i=n.startsWith("+")&&n.length>1?Object.assign({},o,{[n.slice(1)]:c}):o;Pe(t[c],e.slice(1),s,r.concat([c]),i)}}},ve=(t,e,s)=>{if(e.length==0)return t;let r=e.shift();e.length==0?t[r]=s:(t[r]||(t[r]={}),ve(t[r],e,s))},Me=t=>t.replace(/%/g,"%25").replace(/\//g,"%2F"),_e=t=>t.replace(/%25/g,"%").replace(/%2F/g,"/"),De=t=>{let e=s=>s.startsWith("+")?"+":s;return`/${t.map(e).map(Me).join("/")}`},M=t=>{let e=t.split("/").map(_e);return e.length>0&&e[0].length==0&&e.shift(),e.length>0&&e.at(-1).length==0&&e.pop(),e},ke=(t,e)=>{let s=(n,c)=>{if(n.length==0||n[0][0]=="#"||c.length==0)return!0;if(n[0]==c[0])return s(n.slice(1),c.slice(1));if(n[0][0]=="+"){let i=s(n.slice(1),c.slice(1));return i&&Object.assign({[n[0].slice(1)]:c[0]},i)}return!1},r=M(t),o=M(e);return s(r,o)},yt=(t,e)=>{let s=M(e),r=M(t);return Fe(s,r)&&s.length<r.length},Fe=(t,e)=>t.length==0?!0:t[0]==e[0]&&Fe(t.slice(1),e.slice(1)),$t=t=>{let e=t.split(":");return{organization:e[0],client:e[1],sub:e.slice(2)}},qt=t=>{let e=M(t);return{organization:e[0],device:e[1],capabilityScope:e[2],capabilityName:e[3],capability:`${e[2]}/${e[3]}`,version:e[4],sub:e.slice(5)}},Tt=t=>t.length==0?null:JSON.parse(t.toString("utf-8")),Ct=(t,e,s,r=1e3)=>{let o=[],n=i=>{e.forEach(a=>ke(`${a}/#`,i)&&o.push(i))};t.on("message",n),e.forEach(i=>{typeof i=="string"?t.subscribe(`${i}/#`):console.warn("Ignoring",i,"since it is not a string.")});let c=typeof Buffer<"u"?Buffer.alloc(0):null;setTimeout(()=>{t.removeListener("message",n),e.forEach(a=>t.unsubscribe(`${a}/#`));let i=o.length;console.log(`clearing ${i} retained messages from ${e}`),o.forEach(a=>{t.publish(a,c,{retain:!0})}),s&&s(i)},r)},Et=()=>Math.random().toString(36).slice(2),Y=(t,e)=>ut(Ee(t),Ee(e)),St=(t,e=void 0,s={})=>{if(!t)return e?L.set({},e,t):t;let r=Object.keys(t).filter(c=>(!s.maxVersion||Y(c,s.maxVersion)<=0)&&(!s.minVersion||Y(s.minVersion,c)<=0)).sort(Y),o={},n=e&&M(e);return r.forEach(c=>{let i=n?L.get(t[c],n):t[c];L.merge(o,i)}),n?L.set({},n,o):o},wt=["B","KB","MB","GB","TB"],xt=t=>{if(!t)return"--";let e=0;for(;t>1024;)t/=1024,e++;return`${t.toFixed(2)} ${wt[e]}`},Ot=t=>{if(!t)return"--";let e={};t>3600&&(e.h=Math.floor(t/3600),t=t%3600),t>60&&(e.m=Math.floor(t/60),t=t%60),e.s=Math.floor(t);let s="";return e.h>0&&(s+=`${e.h}h `),e.m>0&&(s+=`${e.m}m `),!e.h&&(s+=`${e.s}s`),s.trim()};Le.exports={parseMQTTUsername:$t,parseMQTTTopic:qt,pathToTopic:De,topicToPath:M,toFlatObject:Oe,topicMatch:ke,mqttParsePayload:Tt,getRandomId:Et,versionCompare:Y,loglevel:B,getLogger:ft,mergeVersions:St,mqttClearRetained:Ct,isSubTopicOf:yt,clone:gt,setFromPath:ve,forMatchIterator:Pe,encodeTopicElement:Me,decodeTopicElement:_e,constants:lt,visit:we,wait:mt,formatBytes:xt,formatDuration:Ot,tryJSONParse:pt,decodeJWT:bt,visitAncestor:xe}});var se=v((os,Ve)=>{var T={get:require("lodash/get"),set:require("lodash/set"),unset:require("lodash/unset"),forEach:require("lodash/forEach"),map:require("lodash/map"),isEmpty:require("lodash/isEmpty"),eq:require("lodash/isEqual"),isPlainObject:require("lodash/isPlainObject"),merge:require("lodash/merge")},{topicToPath:I,pathToTopic:Pt,toFlatObject:vt,topicMatch:Be,forMatchIterator:Mt}=X(),te=(t,e)=>{if(!e||e.length==0)return;T.unset(t,e);let s=e.slice(0,-1),r=s.length==0?t:T.get(t,s);return T.isEmpty(r)?te(t,s):e},_t=(t,e)=>(T.forEach(e,(s,r)=>{let o=I(r);s==null?te(t,o):T.set(t,o,s)}),t),Ae=(t,e)=>{if(e.length==0)return;let s=e[0];if(s)for(let r in t)r!=s&&s!="*"&&!s.startsWith("+")?delete t[r]:Ae(t[r],e.slice(1))},ee=class{#e={};#t=[];#s=[];constructor(e={}){this.#e=e}updateFromArray(e,s,r={}){let o=T.get(this.#e,e);if(s==null){if(o==null)return{};te(this.#e,e)}else{if(T.eq(o,s))return{};T.set(this.#e,e,s)}let n=Pt(e),c={[n]:s},i;if(s instanceof Object){let a=vt(s);i={},T.forEach(a,(h,d)=>{i[`${n}${d}`]=h})}else i=c;return this.#t.forEach(a=>a(c,r)),this.#s.forEach(a=>a(i,r)),i}update(e,s,r){if(typeof e=="string")return this.updateFromTopic(e,s,r);if(e instanceof Array)return this.updateFromArray(e,s,r);throw new Error("unrecognized path expression")}updateFromTopic(e,s,r){return this.updateFromArray(I(e),s,r)}updateFromModifier(e,s){return T.map(e,(r,o)=>this.updateFromTopic(o,r,s))}subscribe(e){e instanceof Function?this.#t.push(e):console.warn("DataCache.subscribe expects a function as argument. Did you mean to use subscribePath?")}subscribePath(e,s){this.#t.push((r,o)=>{T.forEach(r,(n,c)=>{let i=Be(e,c);i&&s(n,c,i,o)})})}subscribePathFlat(e,s){this.#s.push((r,o)=>{T.forEach(r,(n,c)=>{let i=Be(e,c);i&&s(n,c,i,o)})})}unsubscribe(e){this.#t=this.#t.filter(s=>s!=e)}get(e=[]){return e.length==0?this.#e:T.get(this.#e,e)}getByTopic(e){return this.get(I(e))}filter(e){let s=JSON.parse(JSON.stringify(this.get()));return Ae(s,e),s}filterByTopic(e){return this.filter(I(e))}forMatch(e,s){let r=I(e);this.forPathMatch(r,s)}forPathMatch(e,s){Mt(this.get(),e,s)}};Ve.exports={DataCache:ee,updateObject:_t}});var ce=v((cs,Qe)=>{"use strict";var{mqttParsePayload:Dt,topicMatch:re,topicToPath:x,pathToTopic:U,toFlatObject:ne,getLogger:kt,mergeVersions:Ft,parseMQTTTopic:Lt,isSubTopicOf:is,versionCompare:Bt,encodeTopicElement:At,visitAncestor:Vt}=X(),{DataCache:Ne}=se(),O=require("lodash"),p=kt("MqttSync"),oe="$SYS/broker/uptime",A="$_",Nt=()=>{},Ht=t=>typeof t=="object"?JSON.parse(JSON.stringify(t)):t,He=t=>t.endsWith("/#")?t:t.endsWith("/")?t.concat("#"):t.concat("/#"),Je=t=>t.replace(/\/\//g,"/"),ie=class{data=new Ne;subscribedPaths={};publishedPaths={};publishedMessages=new Ne;publishQueue=new Map;heartbeatWaitersOnce=[];heartbeats=0;beforeDisconnectHooks=[];constructor({mqttClient:e,onChange:s,ignoreRetain:r,migrate:o,onReady:n,sliceTopic:c,onHeartbeatGranted:i}){this.mqtt=e,this.mqtt.on("message",(a,h,d)=>{let u=h&&h.toString();if(p.debug("got message",a,u.slice(0,180),u.length>180?`... (${u.length} bytes)`:"",d.retain),a==oe)this.heartbeats>0&&(this.heartbeatWaitersOnce.forEach(f=>f()),this.heartbeatWaitersOnce=[]),this.heartbeats==1&&!o&&n&&n(),this.heartbeats++;else if(d.retain||r){let f=x(a);p.debug("processing message",a,f),c&&(f=f.slice(c),a=U(f));let b=Dt(h);if(this.isPublished(a))this.publishedMessages.updateFromArray([...f,A],b),this.data.update(a,b,{external:!0});else if(this.isSubscribed(a)){p.debug("applying received update",a);let m=this.data.update(a,b);s&&Object.keys(m).length>0&&s(m)}}}),this.mqtt.subscribe(oe,{rap:!0},(a,h)=>{p.debug(oe,{granted:h}),h&&h.length>0&&i?.()}),o?.length>0&&this.migrate(o,()=>{p.debug("done migrating",n),n&&this.waitForHeartbeatOnce(n)})}publishAtLevel(e,s,r){p.debug(`publishingAtLevel ${r}`,e,s),r>0?O.forEach(s,(o,n)=>{let c=`${e}/${At(n)}`;p.debug(`publishing ${c}`),this.publishAtLevel(c,o,r-1)}):this.mqtt.publish(e,JSON.stringify(s),{retain:!0},o=>{o&&p.warn("Error when publishing migration result",o)})}migrate(e,s=void 0){let r=e.length;if(r==0){s&&s();return}let o=()=>--r==0&&s&&s();e.forEach(({topic:n,newVersion:c,transform:i=void 0,flat:a=!1,level:h=0})=>{p.debug("migrating",n,c);let{organization:d,device:u,capability:f,sub:b}=Lt(n),m=`/${d}/${u}/${f}`,C=b.length==0?"/#":U(b),E=`${m}/+${C}`;this.subscribe(E,D=>{if(D){p.warn("Error during migration",D),o();return}this.waitForHeartbeatOnce(()=>{p.debug("got heartbeat",n,E);let H=this.data.getByTopic(m);if(!H){this.unsubscribe(E),o();return}let j=Ft(H,C,{maxVersion:c}),k=O.get(j,x(C)),F=i?i(k):k,J=Je(`${m}/${c}/${C}`);if(p.debug("publishing merged",J),a){let S=ne(F),P=x(J);O.forEach(S,(Q,de)=>{let Ye=U(P.concat(x(de)));this.mqtt.publish(Ye,JSON.stringify(Q),{retain:!0},fe=>{fe&&p.warn(`Error when publishing migration result for ${de}`,fe)})})}else this.publishAtLevel(J,F,h);this.unsubscribe(E),this.waitForHeartbeatOnce(()=>{let P=Object.keys(H).filter(Q=>Bt(Q,c)<0).map(Q=>Je(`${m}/${Q}/${C}`));p.debug({prefixesToClear:P}),this.clear(P),o()})})})})}clear(e,s=void 0,r={}){let o=[],n=i=>{e.forEach(a=>re(`${a}/#`,i)&&(!r.filter||r.filter(i))&&o.push(i))};this.mqtt.on("message",n),e.forEach(i=>{typeof i=="string"?this.mqtt.subscribe(`${i}/#`):p.warn("Ignoring",i,"since it is not a string.")});let c=typeof Buffer<"u"?Buffer.alloc(0):null;this.waitForHeartbeatOnce(()=>{this.mqtt.removeListener("message",n),e.forEach(a=>this.mqtt.unsubscribe(`${a}/#`));let i=o.length;p.debug(`clearing ${i} retained messages from ${e}`),o.forEach(a=>{this.mqtt.publish(a,c,{retain:!0})}),s&&s(i)})}waitForHeartbeatOnce(e){setTimeout(()=>this.heartbeatWaitersOnce.push(e),1)}isSubscribed(e){return Object.keys(this.subscribedPaths).some(s=>re(s,e))}isPublished(e){return Object.keys(this.publishedPaths).some(s=>re(s,e)&&!this.publishedPaths[s].atomic)}subscribe(e,s=Nt){if(e=He(e),p.debug("subscribing to",e),this.subscribedPaths[e]){p.debug("already subscribed to",e),s();return}this.mqtt.subscribe(e,{rap:!0},(r,o)=>{p.debug("subscribe",e,"granted:",o),o&&o.some(n=>n.topic==e&&n.qos<128)?(this.subscribedPaths[e]=1,s(null)):s(`not permitted to subscribe to topic ${e}, ${JSON.stringify(o)}`)})}unsubscribe(e){this.subscribedPaths[e]&&(this.mqtt.unsubscribe(e),delete this.subscribedPaths[e])}_actuallyPublish(e,s){return this.mqtt.connected?(p.debug("actually publishing",e),this.mqtt.publish(e,s==null?null:JSON.stringify(s),{retain:!0}),!0):(p.warn("not connected, not publishing",e),!1)}_processQueue_rec(e){if(this.publishQueue.size>0){let[s,r]=this.publishQueue.entries().next().value;this._actuallyPublish(s,r)?(this.publishQueue.delete(s),this._processQueue_rec(e)):setTimeout(()=>this._processQueue_rec(e),5e3)}else e()}_processQueue(){this._processing||(this._processing=!0,this._processQueue_rec(()=>this._processing=!1))}setThrottle(e){this._processQueueThrottled=O.throttle(this._processQueue.bind(this),e)}clearThrottle(){delete this._processQueueThrottled}addToQueue(e,s){this.publishQueue.set(e,s)}_enqueue(e,s){p.debug("enqueuing",e),this.addToQueue(e,s),this._processQueueThrottled?this._processQueueThrottled():this._processQueue();let r=x(e);this.publishedMessages.updateFromArray([...r,A],s==null?null:Ht(s))}publish(e,s={atomic:!1}){if(e=He(e),O.isEqual(this.publishedPaths[e],s))return!1;if(this.publishedPaths[e]=s,s.atomic)return this.data.subscribePath(e,(r,o,n,c)=>{if(c?.external)return;p.debug("processing change (atomic)",o,e);let i=e.slice(0,e.length-2),a=U(x(o).slice(0,x(i).length));this._enqueue(a,this.data.getByTopic(a))}),!0;this.mqtt.subscribe(e),this.data.subscribePath(e,(r,o,n,c)=>{if(c?.external)return;p.debug("processing change",o);let i=x(o),a=this.publishedMessages.get(i);O.each(a,(d,u)=>{if(u==A)return!0;let f=Object.keys(ne(d)).filter(b=>b.endsWith(A));p.debug("flat->atomic: ",{toClear:f},u),f.forEach(b=>{let m=b.slice(0,-(A.length+1)),C=`${o}/${u}/${m}`;this._enqueue(C,null)})});let h=this.publishedMessages.get();return Vt(h,i.slice(0,-1),(d,u)=>{let f=d[A];if(f&&O.isObject(f)){p.debug("atomic->flat",{oldVal:f});let b=U(u);this._enqueue(b,null);let m=ne(f);O.each(m,(C,E)=>{let D=`${b}${E}`;this._enqueue(D,C)})}}),this._enqueue(o,r),!0})}beforeDisconnect(){this.beforeDisconnectHooks.forEach(e=>e(this))}onBeforeDisconnect(e){this.beforeDisconnectHooks.push(e)}};Qe.exports=ie});var N={};ge(N,{Code:()=>zt,ErrorBoundary:()=>he,InlineCode:()=>jt,LevelBadge:()=>Ut,MqttSync:()=>Ie,Timer:()=>Gt,TimerContext:()=>Ke,TransitiveCapability:()=>Kt,createWebComponent:()=>Xt,fetchJson:()=>ze,parseCookie:()=>Ue,useCapability:()=>le,useMqttSync:()=>ue,useTopics:()=>Wt,useTransitive:()=>Qt});module.exports=st(N);var g=w(require("react")),_=require("react-bootstrap"),Ge=w(qe());var l={};ge(l,{MqttSync:()=>Ie,fetchJson:()=>ze,parseCookie:()=>Ue});y(l,w(X()));y(l,w(se()));var We=w(ce()),Ie=We.default,Ue=t=>t.split(";").map(e=>e.split("=")).reduce((e,s)=>(e[decodeURIComponent(s[0].trim())]=s[1]&&decodeURIComponent(s[1].trim()),e),{}),ze=(t,e,s={})=>{fetch(t,{method:s.method||(s.body?"post":"get"),mode:"cors",cache:"no-cache",headers:{"Content-Type":"application/json",...s.headers},redirect:"follow",referrerPolicy:"no-referrer",body:s.body?JSON.stringify(s.body):void 0}).then(r=>{let o=!r.ok&&`fetching ${t} failed: ${r.status} ${r.statusText}`;r.json().then(n=>e(o,n)).catch(n=>{throw new Error(n)})}).catch(r=>e(`error: ${r}`))};var q=w(require("react")),R=w(require("lodash")),je=w(require("mqtt-browser"));var Jt=ce(),$=(0,l.getLogger)("utils-web/hooks");$.setLevel("info");$.setLevel("debug");var ue=({jwt:t,id:e,mqttUrl:s})=>{let[r,o]=(0,q.useState)("connecting"),[n,c]=(0,q.useState)(),[i,a]=(0,q.useState)({}),[h,d]=(0,q.useState)(!1);return(0,q.useEffect)(()=>{let u=(0,l.decodeJWT)(t),f=je.default.connect(s,{username:JSON.stringify({id:e,payload:u}),password:t});return f.on("connect",()=>{$.debug("connected");let b=new Jt({mqttClient:f,ignoreRetain:!0,onHeartbeatGranted:()=>d(!0)});c(b),o("connected"),b.data.subscribe(R.default.throttle(()=>a((0,l.clone)(b.data.get())),50))}),f.on("error",b=>{$.error(b),o(`error: ${b}`)}),()=>{$.info("cleaning up useMQTTSync"),n&&n.beforeDisconnect?(n.beforeDisconnect(),n.waitForHeartbeatOnce(()=>f.end())):f.end()}},[t,e]),{status:r,ready:h,StatusComponent:()=>q.default.createElement("div",null,r),mqttSync:n,data:i}},Qt=({jwt:t,id:e,host:s,ssl:r,capability:o,versionNS:n})=>{let[c,i]=o.split("/"),{device:a}=(0,l.decodeJWT)(t),h=[e,a,c,i],d=(0,l.pathToTopic)(h),u=[...h,n],f=(0,l.pathToTopic)(u),b=`${r&&JSON.parse(r)?"wss":"ws"}://mqtt.${s}`;return{...ue({jwt:t,id:e,mqttUrl:b}),device:a,prefixPath:h,prefix:d,prefixPathVersion:u,prefixVersion:f}},Wt=({jwt:t,host:e="transitiverobotics.com",ssl:s=!0,topics:r=[]})=>{let[o,n]=(0,q.useState)();!R.default.isEqual(o,r)&&n(r);let{device:c,id:i,capability:a}=(0,l.decodeJWT)(t);if(c=="_fleet"){$.warn("useTopics only works for device JWTs, not _fleet ones");return}let h=`/${i}/${c}/@transitive-robotics/_robot-agent/+/status`,{mqttSync:d,data:u,status:f,ready:b,StatusComponent:m}=ue({jwt:t,id:i,mqttUrl:`ws${s?"s":""}://mqtt.${e}`});(0,q.useEffect)(()=>{b&&d.subscribe(h,S=>S&&console.warn(S))},[d,b]);let C=(0,l.mergeVersions)(u[i]?.[c]["@transitive-robotics"]["_robot-agent"],"status").status,E=C?.runningPackages,[D,H]=a.split("/"),j=E?.[D]?.[H],k=j&&Object.values(j).filter(Boolean)[0],F=`/${i}/${c}/${a}/${k}`;(0,q.useEffect)(()=>{$.debug("topics",r),k&&r.forEach(S=>{$.debug(`subscribing to ${F}${S}`),d.subscribe(`${F}${S}`,P=>P&&$.warn(P))})},[o,k,d]);let J=R.default.get(u,(0,l.topicToPath)(F));return{data:u?.[i]?.[c],mqttSync:d,agentStatus:C,topicData:J}},Z={},ae={},le=({capability:t,name:e,userId:s,deviceId:r,host:o="transitiverobotics.com",ssl:n=!0})=>{let[c,i]=(0,q.useState)({loaded:!1}),a=(d,u)=>{$.debug(`custom component ${e}: ${d}`),ae[e]=u,i(f=>({...f,loadedModule:u,loaded:!!u}))},h=(...d)=>Z[e].forEach(u=>u(...d));return(0,q.useEffect)(()=>{if($.debug(`loading custom component ${e}`),ae[e])return a("already loaded",ae[e]);if(Z[e])return $.debug("already loading"),Z[e].push(a);Z[e]=[a];let d=`http${n?"s":""}://portal.${o}`,u=new URLSearchParams({userId:s,deviceId:r}),f=`${d}/running/${t}/dist/${e}`;import(`${f}.esm.js?${u.toString()}`).then(b=>h("loaded esm",b),b=>{$.warn(`No ESM module found for ${e}, loading iife`),import(`${f}.js?${u.toString()}`).then(m=>h("loaded iife",m),m=>$.error(`Failed to load ${e} iife`,m))})},[t,e,s,r]),c};var V={badge:{width:"4em"},code:{color:"#700",borderLeft:"3px solid #aaa",padding:"0.5em 0px 0.5em 2em",backgroundColor:"#f0f0f0",borderRadius:"4px",marginTop:"0.5em"},inlineCode:{color:"#700",margin:"0px 0.5em 0px 0.5em"}},It=[g.default.createElement(_.Badge,{bg:"success",style:V.badge},"OK"),g.default.createElement(_.Badge,{bg:"warning",style:V.badge},"Warn"),g.default.createElement(_.Badge,{bg:"danger",style:V.badge},"Error"),g.default.createElement(_.Badge,{bg:"secondary",style:V.badge},"Stale")],Ut=({level:t})=>It[t]||g.default.createElement("span",null,t),zt=({children:t})=>g.default.createElement("pre",{style:V.code},t),jt=({children:t})=>g.default.createElement("tt",{style:V.inlineCode},t),z={},Ke=g.default.createContext({}),Gt=({duration:t,onTimeout:e,onStart:s,setOnDisconnect:r,children:o})=>{t=t||60;let[n,c]=(0,g.useState)(t),[i,a]=(0,g.useState)(!1),h=(0,g.useMemo)(()=>Math.random().toString(36).slice(2),[]),d=()=>{console.log("stopping timer for",h),e&&setTimeout(e,1),clearInterval(z[h]),z[h]=null,a(!1)},u=()=>{let b=z[h];return console.log(b,z,n),!b&&n>0&&(a(!0),z[h]=setInterval(()=>c(m=>{if(--m>0)return m;d()}),1e3),s&&setTimeout(s,1)),d};(0,g.useEffect)(()=>{n>0&&!i&&u()},[n]),(0,g.useEffect)(()=>d,[]),r&&r(()=>{d()});let f=()=>c(t);return g.default.createElement(Ke.Provider,{value:{reset:f,duration:t,timer:n}},n>0?g.default.createElement("div",null,o,n<60&&g.default.createElement("div",null,"Timeout in: ",n," seconds")):g.default.createElement("div",null,"Timed out. ",g.default.createElement(_.Button,{onClick:f},"Resume")))},Kt=({jwt:t,host:e="transitiverobotics.com",ssl:s=!0,...r})=>{let{id:o,device:n,capability:c}=(0,l.decodeJWT)(t),i=n=="_fleet"?"fleet":"device",h=`${c.split("/")[1]}-${i}`,{loaded:d}=le({capability:c,name:h,userId:o||r.userId,deviceId:n,host:e,ssl:s}),u=(0,g.useRef)();(0,g.useEffect)(()=>{u.current?.instance?.setState(b=>({...b,id:o,jwt:t,host:e,ssl:s,...r}))},[u.current,o,t,e,s,...Object.values(r)]);let f=(0,g.useMemo)(()=>({id:o,jwt:t,host:e,ssl:s,...r}),[]);return d?g.default.createElement(h,{...f,ref:u}):g.default.createElement("div",null,"Loading ",h)},he=class extends g.default.Component{constructor(e){super(e),this.state={hasError:!1}}static getDerivedStateFromError(e){return{hasError:!0}}componentDidCatch(e,s){console.warn("ErrorBoundary caught:",e,s)}render(){return this.state.hasError?g.default.createElement("div",null,this.props.message||"Something went wrong here."):this.props.children}},Yt=t=>t.$$typeof==Symbol.for("react.forward_ref")||t.prototype?.render,Xt=(t,e,s="0.0.0",r={})=>{let o=Yt(t)?g.default.createRef():null;class n extends g.default.Component{onDisconnect=null;state={};setOnDisconnect(i){this.onDisconnect=i}webComponentConstructed(i){let a=new MutationObserver(h=>{let d={};h.forEach(({attributeName:u})=>{d[u]=i.getAttribute(u)}),this.setState(u=>({...u,...d}))}).observe(i,{attributes:!0})}webComponentDisconnected(){this.setState({_disconnected:!0});try{this.onDisconnect&&this.onDisconnect()}catch(i){console.log("Error during onDisconnect of web-component",i)}}setConfig(i){this.setState({config:i})}render(){let i=r.stylesheets||["https://cdn.jsdelivr.net/gh/transitiverobotics/transitive-utils@0.8.3/web/css/bootstrap_transitive-bs-root.min.css"];return g.default.createElement("div",{id:`cap-${e}-${s}`,className:r.className||"transitive-bs-root"},g.default.createElement("style",null,i.map(a=>`@import url(${a});`)),!this.state._disconnected&&g.default.createElement(t,{ref:o,...this.props,...this.state,setOnDisconnect:this.setOnDisconnect.bind(this),setConfig:this.setConfig.bind(this)}))}}return Ge.default.create(n,e,r.shadowDOM||!1,o)};y(N,l,module.exports);
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// client/react-web-component/getStyleElementsFromReactWebComponentStyleLoader.js
+var require_getStyleElementsFromReactWebComponentStyleLoader = __commonJS({
+  "client/react-web-component/getStyleElementsFromReactWebComponentStyleLoader.js"(exports, module2) {
+    module2.exports = () => {
+      try {
+        return require("react-web-component-style-loader/exports").styleElements;
+      } catch (e) {
+        return [];
+      }
+    };
+  }
+});
+
+// client/react-web-component/extractAttributes.js
+var require_extractAttributes = __commonJS({
+  "client/react-web-component/extractAttributes.js"(exports, module2) {
+    module2.exports = function extractAttributes(nodeMap) {
+      if (!nodeMap.attributes) {
+        return {};
+      }
+      let obj = {};
+      let attribute;
+      const attributesAsNodeMap = [...nodeMap.attributes];
+      const attributes = attributesAsNodeMap.map((attribute2) => ({ [attribute2.name]: attribute2.value }));
+      for (attribute of attributes) {
+        const key = Object.keys(attribute)[0];
+        const camelCasedKey = key.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+        obj[camelCasedKey] = attribute[key];
+      }
+      return obj;
+    };
+  }
+});
+
+// client/react-web-component/index.js
+var require_react_web_component = __commonJS({
+  "client/react-web-component/index.js"(exports, module2) {
+    var React3 = require("react");
+    var ReactDOM = require("react-dom");
+    var retargetEvents = require("react-shadow-dom-retarget-events");
+    var getStyleElementsFromReactWebComponentStyleLoader = require_getStyleElementsFromReactWebComponentStyleLoader();
+    var extractAttributes = require_extractAttributes();
+    var lifeCycleHooks = {
+      attachedCallback: "webComponentAttached",
+      connectedCallback: "webComponentConnected",
+      disconnectedCallback: "webComponentDisconnected",
+      adoptedCallback: "webComponentAdopted"
+    };
+    module2.exports = {
+      /*
+       * @param {JSX.Element} wrapper: the wrapper component class to be instantiated and wrapped
+       * @param {string} tagName - The name of the web component. Has to be minus "-" delimited.
+       * @param {boolean} useShadowDom - If the value is set to "true" the web component will use the `shadowDom`. The default value is true.
+       */
+      create: (wrapper, tagName, useShadowDom = true, compRef = void 0) => {
+        const proto = class extends HTMLElement {
+          instance = null;
+          // the instance we create of the wrapper
+          callConstructorHook() {
+            if (this.instance["webComponentConstructed"]) {
+              this.instance["webComponentConstructed"].apply(this.instance, [this]);
+            }
+          }
+          callLifeCycleHook(hook, params = []) {
+            const method = lifeCycleHooks[hook];
+            if (method && this.instance && this.instance[method]) {
+              this.instance[method].apply(this.instance, params);
+            }
+          }
+          connectedCallback() {
+            const self = this;
+            let mountPoint = self;
+            if (useShadowDom) {
+              const shadowRoot = self.attachShadow({ mode: "open" });
+              mountPoint = document.createElement("div");
+              const styles2 = getStyleElementsFromReactWebComponentStyleLoader();
+              styles2.forEach((style) => {
+                shadowRoot.appendChild(style.cloneNode(shadowRoot));
+              });
+              shadowRoot.appendChild(mountPoint);
+              retargetEvents(shadowRoot);
+            }
+            ReactDOM.render(
+              // This is where we instantiate the actual component (in its wrapper)
+              React3.createElement(wrapper, extractAttributes(self)),
+              mountPoint,
+              function() {
+                self.instance = this;
+                self.callConstructorHook();
+                self.callLifeCycleHook("connectedCallback");
+              }
+            );
+          }
+          disconnectedCallback() {
+            this.callLifeCycleHook("disconnectedCallback");
+          }
+          adoptedCallback(oldDocument, newDocument) {
+            this.callLifeCycleHook("adoptedCallback", [oldDocument, newDocument]);
+          }
+          /* call a function defined in the component, either as a class method, or
+          * via useImperativeHandle */
+          call(functionName, args) {
+            return compRef?.current?.[functionName]?.call(compRef?.current, args);
+          }
+          /* predefined function to retrieve the pre-defined config object of the
+           * state, populated via the pre-defined `setConfig` method given as prop
+           * to the wrapped component. */
+          getConfig() {
+            return this.instance.state.config;
+          }
+        };
+        customElements.define(tagName, proto);
+        return proto;
+      }
+    };
+  }
+});
+
+// ../common/constants.js
+var require_constants = __commonJS({
+  "../common/constants.js"(exports, module2) {
+    module2.exports = {
+      rosReleases: {
+        kinetic: { rosVersion: 1, ubuntuCodename: "xenial" },
+        melodic: { rosVersion: 1, ubuntuCodename: "bionic" },
+        noetic: { rosVersion: 1, ubuntuCodename: "focal" },
+        dashing: { rosVersion: 2 },
+        eloquent: { rosVersion: 2 },
+        foxy: { rosVersion: 2 },
+        galactic: { rosVersion: 2 },
+        humble: { rosVersion: 2 },
+        iron: { rosVersion: 2 },
+        rolling: { rosVersion: 2 }
+      }
+    };
+  }
+});
+
+// ../common/common.js
+var require_common = __commonJS({
+  "../common/common.js"(exports, module2) {
+    var semverCompare = require("semver/functions/compare");
+    var semverMinVersion = require("semver/ranges/min-version");
+    var _2 = {
+      get: require("lodash/get"),
+      set: require("lodash/set"),
+      unset: require("lodash/unset"),
+      forEach: require("lodash/forEach"),
+      map: require("lodash/map"),
+      isEmpty: require("lodash/isEmpty"),
+      eq: require("lodash/isEqual"),
+      isPlainObject: require("lodash/isPlainObject"),
+      merge: require("lodash/merge")
+    };
+    var loglevel = require("loglevel");
+    var chalk = require("chalk");
+    var constants = require_constants();
+    loglevel.setAll = (level) => Object.values(loglevel.getLoggers()).forEach((l) => l.setLevel(level));
+    var methodColors = {
+      warn: chalk.yellow,
+      error: chalk.red,
+      info: chalk.green,
+      debug: chalk.gray
+    };
+    var coloredMethod = (method) => methodColors[method] ? methodColors[method](method) : method;
+    var originalFactory = loglevel.methodFactory;
+    loglevel.methodFactory = (methodName, level, loggerName) => {
+      const rawMethod = originalFactory(methodName, level, loggerName);
+      if (typeof window != "undefined") {
+        const context2 = `${loggerName} ${methodName}`;
+        return (...args) => rawMethod(`[${context2}]`, ...args);
+      }
+      const context = `${loggerName} ${coloredMethod(methodName)}`;
+      return (...args) => rawMethod(
+        `[${chalk.blue((/* @__PURE__ */ new Date()).toISOString())} ${context}]`,
+        ...args
+      );
+    };
+    var getLogger2 = loglevel.getLogger;
+    var clone2 = (obj) => JSON.parse(JSON.stringify(obj));
+    var decodeJWT3 = (jwt) => JSON.parse(atob(jwt.split(".")[1]));
+    var tryJSONParse = (string) => {
+      try {
+        return JSON.parse(string);
+      } catch (e) {
+        return null;
+      }
+    };
+    var visit = (object, childField, visitor) => {
+      if (!object)
+        return;
+      visitor(object);
+      object[childField]?.forEach((child) => visit(child, childField, visitor));
+    };
+    var visitAncestor = (object, path, visitor, prefix = []) => {
+      visitor(object, prefix);
+      const next = path[0];
+      if (next) {
+        const sub = object[next];
+        if (sub) {
+          visitAncestor(sub, path.slice(1), visitor, prefix.concat(next));
+        }
+      }
+    };
+    var wait = (delay) => new Promise((resolve) => {
+      setTimeout(resolve, delay);
+    });
+    var toFlatObject = (obj, prefix = [], rtv = {}) => {
+      _2.forEach(obj, (value, key) => {
+        const newPrefix = prefix.concat(String(key));
+        if ((_2.isPlainObject(value) || value instanceof Array) && value !== null) {
+          toFlatObject(value, newPrefix, rtv);
+        } else {
+          rtv[pathToTopic2(newPrefix)] = value;
+        }
+      });
+      return rtv;
+    };
+    var forMatchIterator = (obj, path, callback, pathSoFar = [], matchSoFar = {}) => {
+      if (path.length == 0 || path[0] == "#") {
+        callback(obj, pathSoFar, matchSoFar);
+        return;
+      }
+      const next = path[0];
+      if (next) {
+        for (let key in obj) {
+          if (key == next || next == "*" || next.startsWith("+")) {
+            const match = next.startsWith("+") && next.length > 1 ? Object.assign({}, matchSoFar, { [next.slice(1)]: key }) : matchSoFar;
+            forMatchIterator(
+              obj[key],
+              path.slice(1),
+              callback,
+              pathSoFar.concat([key]),
+              match
+            );
+          }
+        }
+      }
+    };
+    var setFromPath = (obj, path, value) => {
+      if (path.length == 0)
+        return obj;
+      const next = path.shift();
+      if (path.length == 0) {
+        obj[next] = value;
+      } else {
+        if (!obj[next])
+          obj[next] = {};
+        setFromPath(obj[next], path, value);
+      }
+    };
+    var encodeTopicElement = (x) => x.replace(/%/g, "%25").replace(/\//g, "%2F");
+    var decodeTopicElement = (x) => x.replace(/%25/g, "%").replace(/%2F/g, "/");
+    var pathToTopic2 = (pathArray) => {
+      const dropWildcardIds = (x) => x.startsWith("+") ? "+" : x;
+      return `/${pathArray.map(dropWildcardIds).map(encodeTopicElement).join("/")}`;
+    };
+    var topicToPath2 = (topic) => {
+      const path = topic.split("/").map(decodeTopicElement);
+      path.length > 0 && path[0].length == 0 && path.shift();
+      path.length > 0 && path.at(-1).length == 0 && path.pop();
+      return path;
+    };
+    var topicMatch = (selector, topic) => {
+      const byArray = (s, p) => {
+        if (s.length == 0)
+          return true;
+        if (s[0][0] == "#")
+          return true;
+        if (p.length == 0)
+          return true;
+        if (s[0] == p[0])
+          return byArray(s.slice(1), p.slice(1));
+        if (s[0][0] == "+") {
+          const sub = byArray(s.slice(1), p.slice(1));
+          return sub && Object.assign({ [s[0].slice(1)]: p[0] }, sub);
+        }
+        return false;
+      };
+      const selectorArray = topicToPath2(selector);
+      const pathArray = topicToPath2(topic);
+      return byArray(selectorArray, pathArray);
+    };
+    var isSubTopicOf = (sub, parent) => {
+      const pPath = topicToPath2(parent);
+      const sPath = topicToPath2(sub);
+      return isPrefixOf(pPath, sPath) && pPath.length < sPath.length;
+    };
+    var isPrefixOf = (prefixArray, array) => {
+      if (prefixArray.length == 0)
+        return true;
+      return prefixArray[0] == array[0] && isPrefixOf(prefixArray.slice(1), array.slice(1));
+    };
+    var parseMQTTUsername = (username) => {
+      const parts = username.split(":");
+      return {
+        organization: parts[0],
+        client: parts[1],
+        sub: parts.slice(2)
+      };
+    };
+    var parseMQTTTopic = (topic) => {
+      const parts = topicToPath2(topic);
+      return {
+        organization: parts[0],
+        device: parts[1],
+        capabilityScope: parts[2],
+        capabilityName: parts[3],
+        capability: `${parts[2]}/${parts[3]}`,
+        version: parts[4],
+        sub: parts.slice(5)
+      };
+    };
+    var mqttParsePayload = (payload) => payload.length == 0 ? null : JSON.parse(payload.toString("utf-8"));
+    var mqttClearRetained = (mqttClient, prefixes, callback, delay = 1e3) => {
+      const toDelete = [];
+      const collectToDelete = (topic) => {
+        prefixes.forEach(
+          (prefix) => (
+            // mqttTopicMatch(topic, `${prefix}/#`) && toDelete.push(topic)
+            topicMatch(`${prefix}/#`, topic) && toDelete.push(topic)
+          )
+        );
+      };
+      mqttClient.on("message", collectToDelete);
+      prefixes.forEach((prefix) => {
+        if (typeof prefix == "string") {
+          mqttClient.subscribe(`${prefix}/#`);
+        } else {
+          console.warn("Ignoring", prefix, "since it is not a string.");
+        }
+      });
+      const nullValue = typeof Buffer != "undefined" ? Buffer.alloc(0) : null;
+      setTimeout(() => {
+        mqttClient.removeListener("message", collectToDelete);
+        prefixes.forEach((prefix) => mqttClient.unsubscribe(`${prefix}/#`));
+        const count = toDelete.length;
+        console.log(`clearing ${count} retained messages from ${prefixes}`);
+        toDelete.forEach((topic) => {
+          mqttClient.publish(topic, nullValue, { retain: true });
+        });
+        callback && callback(count);
+      }, delay);
+    };
+    var getRandomId = () => Math.random().toString(36).slice(2);
+    var versionCompare = (a, b) => semverCompare(semverMinVersion(a), semverMinVersion(b));
+    var mergeVersions2 = (versionsObject, subTopic = void 0, options = {}) => {
+      if (!versionsObject) {
+        return subTopic ? _2.set({}, subTopic, versionsObject) : versionsObject;
+      }
+      const versions = Object.keys(versionsObject).filter((ver) => (!options.maxVersion || versionCompare(ver, options.maxVersion) <= 0) && (!options.minVersion || versionCompare(options.minVersion, ver) <= 0)).sort(versionCompare);
+      const merged = {};
+      const subPath = subTopic && topicToPath2(subTopic);
+      versions.forEach((nextVersion) => {
+        const newValue = subPath ? _2.get(versionsObject[nextVersion], subPath) : versionsObject[nextVersion];
+        _2.merge(merged, newValue);
+      });
+      return subPath ? _2.set({}, subPath, merged) : merged;
+    };
+    var units = ["B", "KB", "MB", "GB", "TB"];
+    var formatBytes = (bytes) => {
+      if (!bytes)
+        return "--";
+      let i = 0;
+      while (bytes > 1024) {
+        bytes /= 1024;
+        i++;
+      }
+      return `${bytes.toFixed(2)} ${units[i]}`;
+    };
+    var formatDuration = (seconds) => {
+      if (!seconds)
+        return "--";
+      const parts = {};
+      if (seconds > 3600) {
+        parts.h = Math.floor(seconds / 3600);
+        seconds = seconds % 3600;
+      }
+      if (seconds > 60) {
+        parts.m = Math.floor(seconds / 60);
+        seconds = seconds % 60;
+      }
+      parts.s = Math.floor(seconds);
+      let rtv = "";
+      parts.h > 0 && (rtv += `${parts.h}h `);
+      parts.m > 0 && (rtv += `${parts.m}m `);
+      !parts.h && (rtv += `${parts.s}s`);
+      return rtv.trim();
+    };
+    module2.exports = {
+      parseMQTTUsername,
+      parseMQTTTopic,
+      pathToTopic: pathToTopic2,
+      topicToPath: topicToPath2,
+      toFlatObject,
+      topicMatch,
+      mqttParsePayload,
+      getRandomId,
+      versionCompare,
+      loglevel,
+      getLogger: getLogger2,
+      mergeVersions: mergeVersions2,
+      mqttClearRetained,
+      isSubTopicOf,
+      clone: clone2,
+      setFromPath,
+      forMatchIterator,
+      encodeTopicElement,
+      decodeTopicElement,
+      constants,
+      visit,
+      wait,
+      formatBytes,
+      formatDuration,
+      tryJSONParse,
+      decodeJWT: decodeJWT3,
+      visitAncestor
+    };
+  }
+});
+
+// ../common/DataCache.js
+var require_DataCache = __commonJS({
+  "../common/DataCache.js"(exports, module2) {
+    var _2 = {
+      get: require("lodash/get"),
+      set: require("lodash/set"),
+      unset: require("lodash/unset"),
+      forEach: require("lodash/forEach"),
+      map: require("lodash/map"),
+      isEmpty: require("lodash/isEmpty"),
+      eq: require("lodash/isEqual"),
+      isPlainObject: require("lodash/isPlainObject"),
+      merge: require("lodash/merge")
+    };
+    var { topicToPath: topicToPath2, pathToTopic: pathToTopic2, toFlatObject, topicMatch, forMatchIterator } = require_common();
+    var unset = (obj, path) => {
+      if (!path || path.length == 0)
+        return;
+      _2.unset(obj, path);
+      const parentPath = path.slice(0, -1);
+      const parent = parentPath.length == 0 ? obj : _2.get(obj, parentPath);
+      if (_2.isEmpty(parent)) {
+        return unset(obj, parentPath);
+      } else {
+        return path;
+      }
+    };
+    var updateObject = (obj, modifier) => {
+      _2.forEach(modifier, (value, topic) => {
+        const path = topicToPath2(topic);
+        if (value == null) {
+          unset(obj, path);
+        } else {
+          _2.set(obj, path, value);
+        }
+      });
+      return obj;
+    };
+    var selectFromObject = (obj, path) => {
+      if (path.length == 0)
+        return;
+      const next = path[0];
+      if (next) {
+        for (let key in obj) {
+          if (key != next && next != "*" && !next.startsWith("+")) {
+            delete obj[key];
+          } else {
+            selectFromObject(obj[key], path.slice(1));
+          }
+        }
+      }
+    };
+    var DataCache = class {
+      #data = {};
+      #listeners = [];
+      #flatListeners = [];
+      constructor(data = {}) {
+        this.#data = data;
+      }
+      /** Update the object with the given value at the given path, remove empty;
+        return the flat changes (see toFlatObject). Add `tags` to updates to mark
+        them somehow based on the context, e.g., so that some subscriptions can choose
+      to ignore updates with a certain tag.
+      */
+      updateFromArray(path, value, tags = {}) {
+        const current = _2.get(this.#data, path);
+        if (value == null) {
+          if (current === void 0 || current === null) {
+            return {};
+          } else {
+            unset(this.#data, path);
+          }
+        } else {
+          if (_2.eq(current, value)) {
+            return {};
+          }
+          _2.set(this.#data, path, value);
+        }
+        const topic = pathToTopic2(path);
+        const obj = { [topic]: value };
+        let flatChanges;
+        if (value instanceof Object) {
+          const flatValue = toFlatObject(value);
+          flatChanges = {};
+          _2.forEach(flatValue, (atomic, flatKey) => {
+            flatChanges[`${topic}${flatKey}`] = atomic;
+          });
+        } else {
+          flatChanges = obj;
+        }
+        this.#listeners.forEach((fn) => fn(obj, tags));
+        this.#flatListeners.forEach((fn) => fn(flatChanges, tags));
+        return flatChanges;
+      }
+      /** Update the value at the given path (array or dot separated string) */
+      update(path, value, tags) {
+        if (typeof path == "string") {
+          return this.updateFromTopic(path, value, tags);
+        } else if (path instanceof Array) {
+          return this.updateFromArray(path, value, tags);
+        } else {
+          throw new Error("unrecognized path expression");
+        }
+      }
+      /** Set value from the given topic (with or without leading or trailing slash) */
+      updateFromTopic(topic, value, tags) {
+        return this.updateFromArray(topicToPath2(topic), value, tags);
+      }
+      /** Update data from a modifier object where keys are topic names to be
+        interpreted as paths, and values are the values to set */
+      updateFromModifier(modifier, tags) {
+        return _2.map(modifier, (value, topic) => this.updateFromTopic(topic, value, tags));
+      }
+      /** Add a callback for all change events. */
+      subscribe(callback) {
+        if (callback instanceof Function) {
+          this.#listeners.push(callback);
+        } else {
+          console.warn("DataCache.subscribe expects a function as argument. Did you mean to use subscribePath?");
+        }
+      }
+      /** Subscribe to a specific topic only. Callback receives
+      `value, key, matched, tags`. */
+      subscribePath(topic, callback) {
+        this.#listeners.push((changes, tags) => {
+          _2.forEach(changes, (value, key) => {
+            const matched = topicMatch(topic, key);
+            matched && callback(value, key, matched, tags);
+          });
+        });
+      }
+      /** Same as subscribePath but always get all changes in flat form */
+      subscribePathFlat(topic, callback) {
+        this.#flatListeners.push((changes, tags) => {
+          _2.forEach(changes, (value, key) => {
+            const matched = topicMatch(topic, key);
+            matched && callback(value, key, matched, tags);
+          });
+        });
+      }
+      /** Remove a callback previously registered using `subscribe`. */
+      unsubscribe(callback) {
+        this.#listeners = this.#listeners.filter((f) => f != callback);
+      }
+      /** Get sub-value at path, or entire object if none given */
+      get(path = []) {
+        return path.length == 0 ? this.#data : _2.get(this.#data, path);
+      }
+      /** Get sub-value specified by topic */
+      getByTopic(topic) {
+        return this.get(topicToPath2(topic));
+      }
+      /** Filter the object using path with wildcards */
+      filter(path) {
+        const rtv = JSON.parse(JSON.stringify(this.get()));
+        selectFromObject(rtv, path);
+        return rtv;
+      }
+      /** Filter the object using topic with wildcards */
+      filterByTopic(topic) {
+        return this.filter(topicToPath2(topic));
+      }
+      /** For each topic match, invoke the callback with the value, topic, and match
+      just like subscribePath, but on the current data rather than future changes. */
+      forMatch(topic, callback) {
+        const path = topicToPath2(topic);
+        this.forPathMatch(path, callback);
+      }
+      /** For each path match, invoke the callback with the value, topic, and match
+      just like subscribePath */
+      forPathMatch(path, callback) {
+        forMatchIterator(this.get(), path, callback);
+      }
+    };
+    module2.exports = {
+      DataCache,
+      updateObject
+    };
+  }
+});
+
+// ../common/MqttSync.js
+var require_MqttSync = __commonJS({
+  "../common/MqttSync.js"(exports, module2) {
+    "use strict";
+    var {
+      mqttParsePayload,
+      topicMatch,
+      topicToPath: topicToPath2,
+      pathToTopic: pathToTopic2,
+      toFlatObject,
+      getLogger: getLogger2,
+      mergeVersions: mergeVersions2,
+      parseMQTTTopic,
+      isSubTopicOf,
+      versionCompare,
+      encodeTopicElement,
+      visitAncestor
+    } = require_common();
+    var { DataCache } = require_DataCache();
+    var _2 = require("lodash");
+    var log2 = getLogger2("MqttSync");
+    var HEARTBEAT_TOPIC = "$SYS/broker/uptime";
+    var specialKey = "$_";
+    var noop = () => {
+    };
+    var clone2 = (payload) => {
+      if (typeof payload == "object") {
+        return JSON.parse(JSON.stringify(payload));
+      } else {
+        return payload;
+      }
+    };
+    var ensureHashSuffix = (topic) => topic.endsWith("/#") ? topic : topic.endsWith("/") ? topic.concat("#") : topic.concat("/#");
+    var resolveDoubleSlashes = (path) => path.replace(/\/\//g, "/");
+    var MqttSync3 = class {
+      data = new DataCache();
+      /* Directory of paths we've subscribed to in this class; this matters
+        because the same mqtt client may have subscriptions to paths that we don't
+      care to store (sync). */
+      subscribedPaths = {};
+      publishedPaths = {};
+      // not used in atomic mode
+      /* Store messages retained on mqtt so we can publish what is necessary to
+      achieve the "should-be" state. Note that we cannot use a structured document
+      for storing these publishedMessages since we need to be able to store separate
+      values at non-leaf nodes in the object (just like mqtt, where you can have
+      /a/b = 1 and /a/b/c = 1 at the same time). Note: not used in atomic mode.
+      Note: we use specialKey in this DataCache to allow overlapping
+      topics (e.g., `/a/b/$_ = 1` and `/a/$_ = {b: 2}`)
+      */
+      publishedMessages = new DataCache();
+      /* The order in which we send retained messages matters, which is why we use
+      a queue for sending things. Note that we here use the property of Map that it
+      remembers insertion order of keys. */
+      publishQueue = /* @__PURE__ */ new Map();
+      /* List of callbacks waiting for next heartbeat, gets purged with each
+      heartbeat */
+      heartbeatWaitersOnce = [];
+      heartbeats = 0;
+      beforeDisconnectHooks = [];
+      constructor({
+        mqttClient,
+        onChange,
+        ignoreRetain,
+        migrate,
+        onReady,
+        sliceTopic,
+        onHeartbeatGranted
+      }) {
+        this.mqtt = mqttClient;
+        this.mqtt.on("message", (topic, payload, packet) => {
+          const payloadString = payload && payload.toString();
+          log2.debug(
+            "got message",
+            topic,
+            payloadString.slice(0, 180),
+            payloadString.length > 180 ? `... (${payloadString.length} bytes)` : "",
+            packet.retain
+          );
+          if (topic == HEARTBEAT_TOPIC) {
+            if (this.heartbeats > 0) {
+              this.heartbeatWaitersOnce.forEach((cb) => cb());
+              this.heartbeatWaitersOnce = [];
+            }
+            if (this.heartbeats == 1 && !migrate && onReady)
+              onReady();
+            this.heartbeats++;
+          } else if (packet.retain || ignoreRetain) {
+            let path = topicToPath2(topic);
+            log2.debug("processing message", topic, path);
+            if (sliceTopic) {
+              path = path.slice(sliceTopic);
+              topic = pathToTopic2(path);
+            }
+            const json = mqttParsePayload(payload);
+            if (this.isPublished(topic)) {
+              this.publishedMessages.updateFromArray([...path, specialKey], json);
+              this.data.update(topic, json, { external: true });
+            } else if (this.isSubscribed(topic)) {
+              log2.debug("applying received update", topic);
+              const changes = this.data.update(topic, json);
+              onChange && Object.keys(changes).length > 0 && onChange(changes);
+            }
+          }
+        });
+        this.mqtt.subscribe(HEARTBEAT_TOPIC, { rap: true }, (err, granted) => {
+          log2.debug(HEARTBEAT_TOPIC, { granted });
+          granted && granted.length > 0 && onHeartbeatGranted?.();
+        });
+        migrate?.length > 0 && this.migrate(migrate, () => {
+          log2.debug("done migrating", onReady);
+          onReady && this.waitForHeartbeatOnce(onReady);
+        });
+      }
+      /**
+      * Publish all values at the given level of the given object under the given
+      * topic (plus sub-key, of course).
+      * TODO: Is this OK, or do we need to go through this.publish?
+      */
+      publishAtLevel(topic, value, level) {
+        log2.debug(`publishingAtLevel ${level}`, topic, value);
+        if (level > 0) {
+          _2.forEach(value, (subValue, subKey) => {
+            const subTopic = `${topic}/${encodeTopicElement(subKey)}`;
+            log2.debug(`publishing ${subTopic}`);
+            this.publishAtLevel(subTopic, subValue, level - 1);
+          });
+        } else {
+          this.mqtt.publish(topic, JSON.stringify(value), { retain: true }, (err) => {
+            err && log2.warn("Error when publishing migration result", err);
+          });
+        }
+      }
+      /** Migrate a list of `{topic, newVersion, transform}`. The version number in
+      topic will be ignored, and all versions' values will be merged, applied in
+      order, such that the latest version is applied last. */
+      migrate(list, onReady = void 0) {
+        let toGo = list.length;
+        if (toGo == 0) {
+          onReady && onReady();
+          return;
+        }
+        const oneDown = () => --toGo == 0 && onReady && onReady();
+        list.forEach(({
+          topic,
+          newVersion,
+          transform = void 0,
+          flat = false,
+          level = 0
+        }) => {
+          log2.debug("migrating", topic, newVersion);
+          const { organization, device, capability, sub } = parseMQTTTopic(topic);
+          const prefix = `/${organization}/${device}/${capability}`;
+          const suffix = sub.length == 0 ? "/#" : pathToTopic2(sub);
+          const subTopic = `${prefix}/+${suffix}`;
+          this.subscribe(subTopic, (err) => {
+            if (err) {
+              log2.warn("Error during migration", err);
+              oneDown();
+              return;
+            }
+            this.waitForHeartbeatOnce(() => {
+              log2.debug("got heartbeat", topic, subTopic);
+              const all = this.data.getByTopic(prefix);
+              if (!all) {
+                this.unsubscribe(subTopic);
+                oneDown();
+                return;
+              }
+              const merged = mergeVersions2(all, suffix, { maxVersion: newVersion });
+              const suffixMergedValue = _2.get(merged, topicToPath2(suffix));
+              const transformed = transform ? transform(suffixMergedValue) : suffixMergedValue;
+              const newTopic = resolveDoubleSlashes(`${prefix}/${newVersion}/${suffix}`);
+              log2.debug("publishing merged", newTopic);
+              if (flat) {
+                const flatObj = toFlatObject(transformed);
+                const newPath = topicToPath2(newTopic);
+                _2.forEach(flatObj, (value, key) => {
+                  const keyTopic = pathToTopic2(newPath.concat(topicToPath2(key)));
+                  this.mqtt.publish(
+                    keyTopic,
+                    JSON.stringify(value),
+                    { retain: true },
+                    (err2) => {
+                      err2 && log2.warn(
+                        `Error when publishing migration result for ${key}`,
+                        err2
+                      );
+                    }
+                  );
+                });
+              } else {
+                this.publishAtLevel(newTopic, transformed, level);
+              }
+              this.unsubscribe(subTopic);
+              this.waitForHeartbeatOnce(() => {
+                const oldVersions = Object.keys(all).filter((v) => versionCompare(v, newVersion) < 0);
+                const prefixesToClear = oldVersions.map((oldV) => resolveDoubleSlashes(`${prefix}/${oldV}/${suffix}`));
+                log2.debug({ prefixesToClear });
+                this.clear(prefixesToClear);
+                oneDown();
+              });
+            });
+          });
+        });
+      }
+      /** Delete all retained messages in a certain topic prefix, waiting for
+          a mqtt broker heartbeat to collect existing retained. Use with care, never
+          delete topics not owned by us. Harmless within capabilities, which are
+          namespaced already.
+      
+          `options.filter(topic)`: a function that can be provided to further,
+          programmatically filter the set of topics to clear, e.g., to onlt clear
+        topics of old versions.
+      
+        Note: This may not yet work in robot-capabilities, since the subscription
+        prefix and received topic prefix don't match (the device prefix is added to
+        subscription by localMQTT.
+        */
+      clear(prefixes, callback = void 0, options = {}) {
+        const toDelete = [];
+        const collectToDelete = (topic) => {
+          prefixes.forEach(
+            (prefix) => topicMatch(`${prefix}/#`, topic) && (!options.filter || options.filter(topic)) && toDelete.push(topic)
+          );
+        };
+        this.mqtt.on("message", collectToDelete);
+        prefixes.forEach((prefix) => {
+          if (typeof prefix == "string") {
+            this.mqtt.subscribe(`${prefix}/#`);
+          } else {
+            log2.warn("Ignoring", prefix, "since it is not a string.");
+          }
+        });
+        const nullValue = typeof Buffer != "undefined" ? Buffer.alloc(0) : null;
+        this.waitForHeartbeatOnce(() => {
+          this.mqtt.removeListener("message", collectToDelete);
+          prefixes.forEach((prefix) => this.mqtt.unsubscribe(prefix));
+          const count = toDelete.length;
+          log2.debug(`clearing ${count} retained messages from ${prefixes}`);
+          toDelete.forEach((topic) => {
+            this.mqtt.publish(topic, nullValue, { retain: true });
+          });
+          callback && callback(count);
+        });
+      }
+      /** register a callback for the next heartbeat from the broker */
+      waitForHeartbeatOnce(callback) {
+        setTimeout(() => this.heartbeatWaitersOnce.push(callback), 1);
+      }
+      /** check whether we are subscribed to the given topic */
+      isSubscribed(topic) {
+        return Object.keys(this.subscribedPaths).some((subscribedTopic) => topicMatch(subscribedTopic, topic));
+      }
+      /** Check whether we are publishing the given topic in a non-atomic way.
+      This is used to determine whether to store the published value or not. */
+      isPublished(topic) {
+        return Object.keys(this.publishedPaths).some(
+          (subscribedTopic) => topicMatch(subscribedTopic, topic) && !this.publishedPaths[subscribedTopic].atomic
+        );
+      }
+      /** Subscribe to the given topic (and all sub-topics). The callback will
+      indicate success/failure, *not* a message on the topic. */
+      subscribe(topic, callback = noop) {
+        topic = ensureHashSuffix(topic);
+        log2.debug("subscribing to", topic);
+        if (this.subscribedPaths[topic]) {
+          log2.debug("already subscribed to", topic);
+          callback();
+          return;
+        }
+        this.mqtt.subscribe(topic, { rap: true }, (err, granted) => {
+          log2.debug("subscribe", topic, "granted:", granted);
+          if (granted && granted.some((grant) => grant.topic == topic && grant.qos < 128)) {
+            this.subscribedPaths[topic] = 1;
+            callback(null);
+          } else {
+            callback(`not permitted to subscribe to topic ${topic}, ${JSON.stringify(granted)}`);
+          }
+        });
+      }
+      unsubscribe(topic) {
+        topic = ensureHashSuffix(topic);
+        if (this.subscribedPaths[topic]) {
+          this.mqtt.unsubscribe(topic);
+          delete this.subscribedPaths[topic];
+        }
+      }
+      /** Publish retained to MQTT, store as published, and return a promise */
+      _actuallyPublish(topic, value) {
+        if (!this.mqtt.connected) {
+          log2.warn("not connected, not publishing", topic);
+          return false;
+        }
+        log2.debug("actually publishing", topic);
+        this.mqtt.publish(
+          topic,
+          value == null ? null : JSON.stringify(value),
+          // aka "unparse payload"
+          { retain: true }
+        );
+        return true;
+      }
+      /** Send all items in the queue in sequence, if any and if not already
+      running. */
+      // async _processQueue() {
+      //   if (this._processing) return; // already running (and probably waiting)
+      //
+      //   this._processing = true;
+      //   while (this.publishQueue.length > 0) {
+      //     const {topic, value} = this.publishQueue.shift();
+      //     await this._actuallyPublish(topic, value);
+      //   }
+      //   this._processing = false;
+      // }
+      // when using Map
+      _processQueue_rec(cb) {
+        if (this.publishQueue.size > 0) {
+          const [topic, value] = this.publishQueue.entries().next().value;
+          if (this._actuallyPublish(topic, value)) {
+            this.publishQueue.delete(topic);
+            this._processQueue_rec(cb);
+          } else {
+            setTimeout(() => this._processQueue_rec(cb), 5e3);
+          }
+        } else {
+          cb();
+        }
+      }
+      _processQueue() {
+        if (this._processing)
+          return;
+        this._processing = true;
+        this._processQueue_rec(() => this._processing = false);
+      }
+      /** Set delay between processing of publishing queue in milliseconds. This
+      allows you to effectively throttle the rate at which this instance will
+      publish changes. Note that updates to a topic already in the queue will not
+      cause multiple publications. Only the latest value will be published.
+      @param {number} [delay] - Number of milliseconds to wait between processing
+      of publish queue.
+      */
+      setThrottle(delay) {
+        this._processQueueThrottled = _2.throttle(this._processQueue.bind(this), delay);
+      }
+      /** Clear the set throttling delay. */
+      clearThrottle() {
+        delete this._processQueueThrottled;
+      }
+      addToQueue(topic, value) {
+        this.publishQueue.set(topic, value);
+      }
+      /** Add to publication queue */
+      _enqueue(topic, value) {
+        log2.debug("enqueuing", topic);
+        this.addToQueue(topic, value);
+        if (this._processQueueThrottled) {
+          this._processQueueThrottled();
+        } else {
+          this._processQueue();
+        }
+        const path = topicToPath2(topic);
+        this.publishedMessages.updateFromArray(
+          [...path, specialKey],
+          value == null ? null : clone2(value)
+        );
+      }
+      /** Register a listener for path in data. Make sure to populate the data
+          before calling this or set the data all at once afterwards.
+      
+          With option "atomic" this will always send the whole sub-document,
+          not flat changes. Useful, e.g., for desiredPackages, see
+          https://github.com/chfritz/transitive/issues/85.
+      
+          @return true if publication added (false, e.g., when already present)
+        */
+      publish(topic, options = { atomic: false }) {
+        topic = ensureHashSuffix(topic);
+        if (_2.isEqual(this.publishedPaths[topic], options)) {
+          return false;
+        }
+        this.publishedPaths[topic] = options;
+        if (options.atomic) {
+          this.data.subscribePath(topic, (value, key, matched, tags) => {
+            if (tags?.external)
+              return;
+            log2.debug("processing change (atomic)", key, topic);
+            const topicWithoutHash = topic.slice(0, topic.length - 2);
+            const groundedTopic = pathToTopic2(
+              // get length of topic (how many levels of selectors), get that many
+              // levels from key prefix
+              topicToPath2(key).slice(0, topicToPath2(topicWithoutHash).length)
+            );
+            this._enqueue(groundedTopic, this.data.getByTopic(groundedTopic));
+          });
+          return true;
+        }
+        this.mqtt.subscribe(topic);
+        this.data.subscribePath(topic, (value, key, matched, tags) => {
+          if (tags?.external)
+            return;
+          log2.debug("processing change", key);
+          const path = topicToPath2(key);
+          const publishedSub = this.publishedMessages.get(path);
+          _2.each(publishedSub, (oldSubVal, oldSubKey) => {
+            if (oldSubKey == specialKey)
+              return true;
+            const toClear = Object.keys(toFlatObject(oldSubVal)).filter((subkey) => subkey.endsWith(specialKey));
+            log2.debug("flat->atomic: ", { toClear }, oldSubKey);
+            toClear.forEach((oldSubSubKey) => {
+              const oldKey = oldSubSubKey.slice(0, -(specialKey.length + 1));
+              const clearKey = `${key}/${oldSubKey}/${oldKey}`;
+              this._enqueue(clearKey, null);
+            });
+          });
+          const published = this.publishedMessages.get();
+          visitAncestor(published, path.slice(0, -1), (subObj, prefix) => {
+            const oldVal = subObj[specialKey];
+            if (oldVal && _2.isObject(oldVal)) {
+              log2.debug("atomic->flat", { oldVal });
+              const prefixTopic = pathToTopic2(prefix);
+              this._enqueue(prefixTopic, null);
+              const flat = toFlatObject(oldVal);
+              _2.each(flat, (flatValue, flatKey) => {
+                const oldFlatKey = `${prefixTopic}${flatKey}`;
+                this._enqueue(oldFlatKey, flatValue);
+              });
+            }
+          });
+          this._enqueue(key, value);
+          return true;
+        });
+      }
+      /** Run all registered hooks before disconnecting */
+      beforeDisconnect() {
+        this.beforeDisconnectHooks.forEach((fn) => fn(this));
+      }
+      /** register a new hook to be called before disconnecting */
+      onBeforeDisconnect(fn) {
+        this.beforeDisconnectHooks.push(fn);
+      }
+    };
+    module2.exports = MqttSync3;
+  }
+});
+
+// index.js
+var web_exports = {};
+__export(web_exports, {
+  CapabilityContext: () => CapabilityContext,
+  CapabilityContextProvider: () => CapabilityContextProvider,
+  Code: () => Code,
+  ErrorBoundary: () => ErrorBoundary,
+  InlineCode: () => InlineCode,
+  LevelBadge: () => LevelBadge,
+  MqttSync: () => MqttSync,
+  Timer: () => Timer,
+  TimerContext: () => TimerContext,
+  TransitiveCapability: () => TransitiveCapability,
+  createWebComponent: () => createWebComponent,
+  fetchJson: () => fetchJson,
+  parseCookie: () => parseCookie,
+  useCapability: () => useCapability,
+  useMqttSync: () => useMqttSync,
+  useTopics: () => useTopics,
+  useTransitive: () => useTransitive
+});
+module.exports = __toCommonJS(web_exports);
+
+// client/shared.jsx
+var import_react2 = __toESM(require("react"));
+var import_react_bootstrap = require("react-bootstrap");
+var import_react_web_component = __toESM(require_react_web_component());
+
+// client/client.js
+var client_exports = {};
+__export(client_exports, {
+  MqttSync: () => MqttSync,
+  fetchJson: () => fetchJson,
+  parseCookie: () => parseCookie
+});
+__reExport(client_exports, __toESM(require_common()));
+__reExport(client_exports, __toESM(require_DataCache()));
+var import_MqttSync = __toESM(require_MqttSync());
+var MqttSync = import_MqttSync.default;
+var parseCookie = (str) => str.split(";").map((v) => v.split("=")).reduce((acc, v) => {
+  acc[decodeURIComponent(v[0].trim())] = v[1] && decodeURIComponent(v[1].trim());
+  return acc;
+}, {});
+var fetchJson = (url, callback, options = {}) => {
+  fetch(url, {
+    method: options.method || (options.body ? "post" : "get"),
+    mode: "cors",
+    cache: "no-cache",
+    // Maybe we'll need this (when embedding)?
+    // credentials: 'same-origin', // include, *same-origin, omit
+    headers: {
+      "Content-Type": "application/json",
+      ...options.headers
+    },
+    redirect: "follow",
+    referrerPolicy: "no-referrer",
+    body: options.body ? JSON.stringify(options.body) : void 0
+  }).then((res) => {
+    const error = !res.ok && `fetching ${url} failed: ${res.status} ${res.statusText}`;
+    res.json().then((data) => callback(error, data)).catch((err) => {
+      throw new Error(err);
+    });
+  }).catch((error) => callback(`error: ${error}`));
+};
+
+// client/hooks.jsx
+var import_react = __toESM(require("react"));
+var import_lodash = __toESM(require("lodash"));
+var import_mqtt_browser = __toESM(require("mqtt-browser"));
+var MqttSync2 = require_MqttSync();
+var log = (0, client_exports.getLogger)("utils-web/hooks");
+log.setLevel("info");
+log.setLevel("debug");
+var useMqttSync = ({ jwt, id, mqttUrl, appReact }) => {
+  const { useState: useState3, useRef: useRef2, useEffect: useEffect3 } = appReact || import_react.default;
+  const [status, setStatus] = useState3("connecting");
+  const [mqttSync, setMqttSync] = useState3();
+  const [data, setData] = useState3({});
+  const [heartbeatGranted, setHeartbeatGranted] = useState3(false);
+  useEffect3(() => {
+    const payload = (0, client_exports.decodeJWT)(jwt);
+    const client = import_mqtt_browser.default.connect(mqttUrl, {
+      username: JSON.stringify({ id, payload }),
+      password: jwt
+    });
+    client.on("connect", () => {
+      log.debug("connected");
+      const mqttSyncClient = new MqttSync2({
+        mqttClient: client,
+        ignoreRetain: true,
+        onHeartbeatGranted: () => setHeartbeatGranted(true)
+      });
+      setMqttSync(mqttSyncClient);
+      setStatus("connected");
+      mqttSyncClient.data.subscribe(import_lodash.default.throttle(() => setData((0, client_exports.clone)(mqttSyncClient.data.get())), 50));
+    });
+    client.on("error", (error) => {
+      log.error(error);
+      setStatus(`error: ${error}`);
+    });
+    return () => {
+      log.info("cleaning up useMQTTSync");
+      if (mqttSync && mqttSync.beforeDisconnect) {
+        mqttSync.beforeDisconnect();
+        mqttSync.waitForHeartbeatOnce(() => client.end());
+      } else {
+        client.end();
+      }
+    };
+  }, [jwt, id]);
+  return {
+    status,
+    // ready: status == 'connected',
+    ready: heartbeatGranted,
+    StatusComponent: () => /* @__PURE__ */ import_react.default.createElement("div", null, status),
+    mqttSync,
+    // Note: mqttSync.data is not reactive.
+    data
+    // This is a reactive data-source (to use meteor terminology).
+  };
+};
+var useTransitive = ({ jwt, id, host, ssl, capability, versionNS, appReact }) => {
+  const [scope, capabilityName] = capability.split("/");
+  const { device } = (0, client_exports.decodeJWT)(jwt);
+  const prefixPath = [id, device, scope, capabilityName];
+  const prefix = (0, client_exports.pathToTopic)(prefixPath);
+  const prefixPathVersion = [...prefixPath, versionNS];
+  const prefixVersion = (0, client_exports.pathToTopic)(prefixPathVersion);
+  const mqttUrl = `${ssl && JSON.parse(ssl) ? "wss" : "ws"}://mqtt.${host}`;
+  const fromMqttSync = useMqttSync({ jwt, id, mqttUrl, appReact });
+  return {
+    ...fromMqttSync,
+    device,
+    prefixPath,
+    prefix,
+    prefixPathVersion,
+    prefixVersion
+  };
+};
+var useTopics = ({
+  jwt,
+  host = "transitiverobotics.com",
+  ssl = true,
+  topics = [],
+  appReact
+}) => {
+  log.debug({ appReact });
+  const { useState: useState3, useEffect: useEffect3 } = appReact || import_react.default;
+  const [topicList, setTopicList] = useState3();
+  !import_lodash.default.isEqual(topicList, topics) && setTopicList(topics);
+  const { device, id, capability } = (0, client_exports.decodeJWT)(jwt);
+  if (device == "_fleet") {
+    log.warn("useTopics only works for device JWTs, not _fleet ones");
+    return;
+  }
+  const agentPrefix = `/${id}/${device}/@transitive-robotics/_robot-agent/+/status`;
+  const { mqttSync, data, status, ready, StatusComponent } = useMqttSync({ jwt, id, mqttUrl: `ws${ssl ? "s" : ""}://mqtt.${host}`, appReact });
+  useEffect3(() => {
+    if (ready) {
+      mqttSync.subscribe(agentPrefix, (err) => err && console.warn(err));
+    }
+  }, [mqttSync, ready]);
+  const agentStatus = (0, client_exports.mergeVersions)(
+    data[id]?.[device]["@transitive-robotics"]["_robot-agent"],
+    "status"
+  ).status;
+  const runningPackages = agentStatus?.runningPackages;
+  const [scope, capName] = capability.split("/");
+  const versions = runningPackages?.[scope]?.[capName];
+  const runningVersion = versions && Object.values(versions).filter(Boolean)[0];
+  const prefix = `/${id}/${device}/${capability}/${runningVersion}`;
+  useEffect3(() => {
+    log.debug("topics", topics);
+    if (runningVersion) {
+      topics.forEach((topic) => {
+        log.debug(`subscribing to ${prefix}${topic}`);
+        mqttSync.subscribe(
+          `${prefix}${topic}`,
+          (err) => err && log.warn(err)
+        );
+      });
+    }
+  }, [topicList, runningVersion, mqttSync]);
+  const topicData = import_lodash.default.get(data, (0, client_exports.topicToPath)(prefix));
+  return { data: data?.[id]?.[device], mqttSync, agentStatus, topicData };
+};
+var listeners = {};
+var loadedModules = {};
+var useCapability = ({
+  capability,
+  name,
+  userId,
+  deviceId,
+  host = "transitiverobotics.com",
+  ssl = true,
+  appReact
+}) => {
+  const { useState: useState3, useEffect: useEffect3 } = appReact || import_react.default;
+  const [returns, setReturns] = useState3({ loaded: false });
+  const done = (message, theModule) => {
+    log.debug(`custom component ${name}: ${message}`);
+    loadedModules[name] = theModule;
+    setReturns((x) => ({ ...x, loadedModule: theModule, loaded: !!theModule }));
+  };
+  const notifyListeners = (...args) => listeners[name].forEach((l) => l(...args));
+  useEffect3(() => {
+    log.debug(`loading custom component ${name}`);
+    if (loadedModules[name]) {
+      return done("already loaded", loadedModules[name]);
+    }
+    if (listeners[name]) {
+      log.debug("already loading");
+      listeners[name].push(done);
+      return;
+    }
+    listeners[name] = [done];
+    const baseUrl = `http${ssl ? "s" : ""}://portal.${host}`;
+    const params = new URLSearchParams({ userId, deviceId });
+    const fileBasename = `${baseUrl}/running/${capability}/dist/${name}`;
+    import(
+      /* webpackIgnore: true */
+      `${fileBasename}.esm.js?${params.toString()}`
+    ).then(
+      (esm) => notifyListeners("loaded esm", esm),
+      (error) => {
+        log.warn(`No ESM module found for ${name}, loading iife`, error);
+        import(
+          /* webpackIgnore: true */
+          `${fileBasename}.js?${params.toString()}`
+        ).then(
+          (iife) => notifyListeners("loaded iife", iife),
+          (error2) => log.error(`Failed to load ${name} iife`, error2)
+        );
+      }
+    );
+  }, [capability, name, userId, deviceId]);
+  return returns;
+};
+
+// client/shared.jsx
+var styles = {
+  badge: {
+    width: "4em"
+  },
+  code: {
+    color: "#700",
+    borderLeft: "3px solid #aaa",
+    padding: "0.5em 0px 0.5em 2em",
+    backgroundColor: "#f0f0f0",
+    borderRadius: "4px",
+    marginTop: "0.5em"
+  },
+  inlineCode: {
+    color: "#700",
+    margin: "0px 0.5em 0px 0.5em"
+  }
+};
+var levelBadges = [
+  /* @__PURE__ */ import_react2.default.createElement(import_react_bootstrap.Badge, { bg: "success", style: styles.badge }, "OK"),
+  /* @__PURE__ */ import_react2.default.createElement(import_react_bootstrap.Badge, { bg: "warning", style: styles.badge }, "Warn"),
+  /* @__PURE__ */ import_react2.default.createElement(import_react_bootstrap.Badge, { bg: "danger", style: styles.badge }, "Error"),
+  /* @__PURE__ */ import_react2.default.createElement(import_react_bootstrap.Badge, { bg: "secondary", style: styles.badge }, "Stale")
+];
+var LevelBadge = ({ level }) => levelBadges[level] || /* @__PURE__ */ import_react2.default.createElement("span", null, level);
+var Code = ({ children }) => /* @__PURE__ */ import_react2.default.createElement("pre", { style: styles.code }, children);
+var InlineCode = ({ children }) => /* @__PURE__ */ import_react2.default.createElement("tt", { style: styles.inlineCode }, children);
+var intervals = {};
+var TimerContext = import_react2.default.createContext({});
+var Timer = ({ duration, onTimeout, onStart, setOnDisconnect, children }) => {
+  duration = duration || 60;
+  const [timer, setTimer] = (0, import_react2.useState)(duration);
+  const [running, setRunning] = (0, import_react2.useState)(false);
+  const id = (0, import_react2.useMemo)(() => Math.random().toString(36).slice(2), []);
+  const stop = () => {
+    console.log("stopping timer for", id);
+    onTimeout && setTimeout(onTimeout, 1);
+    clearInterval(intervals[id]);
+    intervals[id] = null;
+    setRunning(false);
+  };
+  const startTimer = () => {
+    const interval = intervals[id];
+    console.log(interval, intervals, timer);
+    if (!interval && timer > 0) {
+      setRunning(true);
+      intervals[id] = setInterval(() => setTimer((t) => {
+        if (--t > 0) {
+          return t;
+        } else {
+          stop();
+        }
+      }), 1e3);
+      onStart && setTimeout(onStart, 1);
+    }
+    return stop;
+  };
+  (0, import_react2.useEffect)(() => {
+    timer > 0 && !running && startTimer();
+  }, [timer]);
+  (0, import_react2.useEffect)(() => stop, []);
+  setOnDisconnect && setOnDisconnect(() => {
+    stop();
+  });
+  const reset = () => setTimer(duration);
+  return /* @__PURE__ */ import_react2.default.createElement(TimerContext.Provider, { value: { reset, duration, timer } }, timer > 0 ? /* @__PURE__ */ import_react2.default.createElement("div", null, children, timer < 60 && /* @__PURE__ */ import_react2.default.createElement("div", null, "Timeout in: ", timer, " seconds")) : /* @__PURE__ */ import_react2.default.createElement("div", null, "Timed out. ", /* @__PURE__ */ import_react2.default.createElement(import_react_bootstrap.Button, { onClick: reset }, "Resume")));
+};
+var TransitiveCapability = ({
+  jwt,
+  host = "transitiverobotics.com",
+  ssl = true,
+  ...config
+}) => {
+  const { id, device, capability } = (0, client_exports.decodeJWT)(jwt);
+  const type = device == "_fleet" ? "fleet" : "device";
+  const capName = capability.split("/")[1];
+  const name = `${capName}-${type}`;
+  const { loaded } = useCapability({
+    capability,
+    name,
+    userId: id || config.userId,
+    // accept both id and userId, see #492
+    deviceId: device,
+    host,
+    ssl
+  });
+  const ref = (0, import_react2.useRef)();
+  (0, import_react2.useEffect)(() => {
+    ref.current?.instance?.setState((s) => ({ ...s, id, jwt, host, ssl, ...config }));
+  }, [ref.current, id, jwt, host, ssl, ...Object.values(config)]);
+  const propClone = (0, import_react2.useMemo)(() => ({ id, jwt, host, ssl, ...config }), []);
+  if (!loaded)
+    return /* @__PURE__ */ import_react2.default.createElement("div", null, "Loading ", name);
+  return import_react2.default.createElement(name, { ...propClone, ref });
+};
+var ErrorBoundary = class extends import_react2.default.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.warn("ErrorBoundary caught:", error, errorInfo);
+  }
+  render() {
+    return this.state.hasError ? /* @__PURE__ */ import_react2.default.createElement("div", null, this.props.message || "Something went wrong here.") : this.props.children;
+  }
+};
+var CapabilityContext = import_react2.default.createContext({});
+var LoadedCapabilityContextProvider = (props) => {
+  const { children, jwt, id, host, ssl, loadedModule } = props;
+  const context = loadedModule.provideContext?.({
+    jwt,
+    id,
+    host,
+    ssl,
+    appReact: import_react2.default
+  });
+  return /* @__PURE__ */ import_react2.default.createElement(CapabilityContext.Provider, { value: { ...context } }, children);
+};
+var CapabilityContextProvider = ({ children, jwt, host = void 0, ssl = void 0 }) => {
+  const { id, device, capability } = (0, client_exports.decodeJWT)(jwt);
+  const type = device == "_fleet" ? "fleet" : "device";
+  const capName = capability.split("/")[1];
+  const name = `${capName}-${type}`;
+  const { loaded, loadedModule } = useCapability({
+    capability,
+    name,
+    userId: id,
+    deviceId: device,
+    appReact: import_react2.default,
+    host,
+    ssl
+  });
+  if (!loadedModule)
+    return /* @__PURE__ */ import_react2.default.createElement("div", null, "Loading ", capability);
+  return /* @__PURE__ */ import_react2.default.createElement(LoadedCapabilityContextProvider, { ...{ jwt, id, host, ssl, loadedModule } }, children);
+};
+var componentPermitsRefs = (Component) => Component.$$typeof == Symbol.for("react.forward_ref") || Component.prototype?.render;
+var createWebComponent = (Component, name, version = "0.0.0", options = {}) => {
+  const compRef = componentPermitsRefs(Component) ? import_react2.default.createRef() : null;
+  class Wrapper extends import_react2.default.Component {
+    onDisconnect = null;
+    state = {};
+    /* function used by `Component` to register a onDisconnect handler */
+    setOnDisconnect(fn) {
+      this.onDisconnect = fn;
+    }
+    webComponentConstructed(instance) {
+      const observer = new MutationObserver((mutationRecords) => {
+        const update = {};
+        mutationRecords.forEach(({ attributeName }) => {
+          update[attributeName] = instance.getAttribute(attributeName);
+        });
+        this.setState((old) => ({ ...old, ...update }));
+      }).observe(instance, { attributes: true });
+    }
+    webComponentDisconnected() {
+      this.setState({ _disconnected: true });
+      try {
+        this.onDisconnect && this.onDisconnect();
+      } catch (e) {
+        console.log("Error during onDisconnect of web-component", e);
+      }
+    }
+    /* method exposed to the wrapped component via prop that allows setting
+    * the "config" state variable inside the wrapper (not the component
+    * itself). This config is retrieved by the portal for inclusion in the
+    * embedding instructions. */
+    setConfig(config) {
+      this.setState({ config });
+    }
+    render() {
+      const stylesheets = options.stylesheets || [
+        // 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css'
+        // Bootstrap 5.3.2 css scoped to `.transitive-bs-root`:
+        "https://cdn.jsdelivr.net/gh/transitiverobotics/transitive-utils@0.8.3/web/css/bootstrap_transitive-bs-root.min.css"
+      ];
+      return /* @__PURE__ */ import_react2.default.createElement(
+        "div",
+        {
+          id: `cap-${name}-${version}`,
+          className: options.className || "transitive-bs-root"
+        },
+        /* @__PURE__ */ import_react2.default.createElement("style", null, stylesheets.map((url) => `@import url(${url});`)),
+        !this.state._disconnected && /* @__PURE__ */ import_react2.default.createElement(
+          Component,
+          {
+            ref: compRef,
+            ...this.props,
+            ...this.state,
+            setOnDisconnect: this.setOnDisconnect.bind(this),
+            setConfig: this.setConfig.bind(this)
+          }
+        )
+      );
+    }
+  }
+  ;
+  return import_react_web_component.default.create(
+    Wrapper,
+    name,
+    options.shadowDOM || false,
+    compRef
+  );
+};
+
+// index.js
+__reExport(web_exports, client_exports, module.exports);