@marimo-team/frontend 0.23.9-dev46 → 0.23.9-dev47

package/dist/assets/{vega-component-BTe5wXGH.js → vega-component-COOhhZ3h.js}

@@ -1 +1 @@
-import{s as Z}from"./chunk-LvLJmgfZ.js";import{n as C}from"./useEvent-D91BmmQi.js";import{t as Y}from"./react-Bj1aDYRI.js";import"./react-dom-CSu739Rf.js";import{t as tt}from"./compiler-runtime-B3qBwwSJ.js";import{t as et}from"./debounce-DhnxH9Rh.js";import{_,d as V}from"./useEventListener-DvoEXWke.js";import{n as H}from"./config-DdDKNgb1.js";import{t as nt}from"./cn-DCUzRj2J.js";import{t as rt}from"./jsx-runtime-BqBOg78p.js";import"./fullscreen-eipL3i3Y.js";import{t as at}from"./tooltip-DTV9tlSr.js";import{r as it}from"./button-BbCh-29a.js";import{d as N}from"./arrays-DYDL-3-i.js";import{u as ot}from"./toDate-B5A0DFEz.js";import"./session-0B5NBztP.js";import{r as lt}from"./useTheme-CI2eq4XN.js";import{t as ct}from"./isValid-CklTTytn.js";import{a as st,r as mt,t as pt}from"./utils-DCL4n9wx.js";import{n as ut}from"./vega-loader.browser-C8wT63Va.js";import{t as ft}from"./react-vega-CXIQBUis.js";import"./defaultLocale-BLUna9fQ.js";import"./defaultLocale-DzliDDTm.js";import{r as dt,t as ht}from"./alert-yTS3WpF4.js";import{n as gt}from"./error-banner-LdWZDbqd.js";import{t as yt}from"./formats-b7Sf6DAK.js";import{n as vt}from"./useAsyncData-bgszE9F0.js";import{t as F}from"./useDeepCompareMemoize-zUHU--0D.js";import{t as kt}from"./semaphore-FlZezxaf.js";var bt=tt(),S=Z(Y(),1);function wt(t){return t.data&&"url"in t.data&&(t.data.url=H(t.data.url).href),t}const u={arc:"arc",area:"area",bar:"bar",image:"image",line:"line",point:"point",rect:"rect",rule:"rule",text:"text",tick:"tick",trail:"trail",circle:"circle",square:"square",geoshape:"geoshape"};var W=new Set(["boxplot","errorband","errorbar"]);const x={getMarkType(t){let e=typeof t=="string"?t:t.type;if(W.has(e))throw Error("Not supported");return e},isInteractive(t){let e=typeof t=="string"?t:t.type;return!W.has(e)},makeClickable(t){let e=typeof t=="string"?t:t.type;return e in u?typeof t=="string"?{type:t,cursor:"pointer",tooltip:!0}:{...t,type:e,cursor:"pointer",tooltip:!0}:t},getOpacity(t){return typeof t=="string"?null:"opacity"in t&&typeof t.opacity=="number"?t.opacity:null}},v={point(t){return t==null?"select_point":`select_point_${t}`},interval(t){return t==null?"select_interval":`select_interval_${t}`},legendSelection(t){return`legend_selection_${t}`},binColoring(t){return t==null?"bin_coloring":`bin_coloring_${t}`},HIGHLIGHT:"highlight",PAN_ZOOM:"pan_zoom",hasPoint(t){return t.some(e=>e.startsWith("select_point"))},hasInterval(t){return t.some(e=>e.startsWith("select_interval"))},hasLegend(t){return t.some(e=>e.startsWith("legend_selection"))},hasPanZoom(t){return t.some(e=>e.startsWith("pan_zoom"))},isBinColoring(t){return t.startsWith("bin_coloring")}},j={highlight(){return{name:v.HIGHLIGHT,select:{type:"point",on:"mouseover"}}},interval(t,e){return{name:v.interval(e),select:{type:"interval",encodings:D(t),mark:{fill:"#669EFF",fillOpacity:.07,stroke:"#669EFF",strokeOpacity:.4},on:"[mousedown[!event.metaKey], mouseup] > mousemove[!event.metaKey]",translate:"[mousedown[!event.metaKey], mouseup] > mousemove[!event.metaKey]"}}},point(t,e){return{name:v.point(e),select:{type:"point",encodings:D(t),on:"click[!event.metaKey]"}}},binColoring(t){return{name:v.binColoring(t),select:{type:"point",on:"click[!event.metaKey]"}}},legend(t){return{name:v.legendSelection(t),select:{type:"point",fields:[t]},bind:"legend"}},panZoom(){return{name:v.PAN_ZOOM,bind:"scales",select:{type:"interval",on:"[mousedown[event.metaKey], window:mouseup] > window:mousemove!",translate:"[mousedown[event.metaKey], window:mouseup] > window:mousemove!",zoom:"wheel![event.metaKey]"}}}};function D(t){switch(x.getMarkType(t.mark)){case u.image:case u.trail:return;case u.area:case u.arc:return["color"];case u.bar:{let e=St(t);return e==="horizontal"?["y"]:e==="vertical"?["x"]:void 0}case u.circle:case u.geoshape:case u.line:case u.point:case u.rect:case u.rule:case u.square:case u.text:case u.tick:return["x","y"]}}function P(t){return"params"in t&&t.params&&t.params.length>0?N(t.params.filter(e=>e==null?!1:"select"in e&&e.select!==void 0).map(e=>e.name)):"layer"in t?N(t.layer.flatMap(P)):"vconcat"in t?N(t.vconcat.flatMap(P)):"hconcat"in t?N(t.hconcat.flatMap(P)):[]}function St(t){var a,i;if(!t||!("mark"in t))return;let e=(a=t.encoding)==null?void 0:a.x,n=(i=t.encoding)==null?void 0:i.y;if(e&&"type"in e&&e.type==="nominal")return"vertical";if(n&&"type"in n&&n.type==="nominal"||e&&"aggregate"in e)return"horizontal";if(n&&"aggregate"in n)return"vertical"}function xt(t){if(!t.encoding)return[];let e=[];for(let n of Object.values(t.encoding))n&&typeof n=="object"&&"bin"in n&&n.bin&&"field"in n&&typeof n.field=="string"&&e.push(n.field);return e}function G(t){if(!t||!("encoding"in t))return[];let{encoding:e}=t;return e?Object.entries(e).flatMap(n=>{let[a,i]=n;return!i||!At.has(a)?[]:"field"in i&&typeof i.field=="string"?[i.field]:"condition"in i&&i.condition&&typeof i.condition=="object"&&"field"in i.condition&&i.condition.field&&typeof i.condition.field=="string"?[i.condition.field]:[]}):[]}var At=new Set(["color","fill","fillOpacity","opacity","shape","size"]);function $(t,e,n,a){let i=n.filter(o=>v.isBinColoring(o)),r={and:(i.length>0?i:n).map(o=>({param:o}))};if(t==="opacity"){let o=x.getOpacity(a)||1;return{...e,opacity:{condition:{test:r,value:o},value:o/5}}}else return e}function _t(t){if(!("select"in t)||!t.select)return JSON.stringify(t);let e=t.select;if(typeof e=="string")return JSON.stringify({type:e,bind:t.bind});let n={type:e.type,encodings:"encodings"in e&&e.encodings?[...e.encodings].toSorted():void 0,fields:"fields"in e&&e.fields?[...e.fields].toSorted():void 0,bind:t.bind};return JSON.stringify(n)}function q(t){let e=E(t);if(e.length===0)return t;let n=jt(e);return n.length===0?t:{...L(K(t,new Set(n.map(a=>a.name))),n.map(a=>a.name)),params:[...t.params||[],...n]}}function E(t){let e=[];if("vconcat"in t&&Array.isArray(t.vconcat))for(let n of t.vconcat)e.push(...E(n));else if("hconcat"in t&&Array.isArray(t.hconcat))for(let n of t.hconcat)e.push(...E(n));else{if("layer"in t)return[];"mark"in t&&"params"in t&&t.params&&t.params.length>0&&e.push({params:t.params})}return e}function jt(t){if(t.length===0)return[];let e=new Map,n=t.length;for(let{params:i}of t){let r=new Set;for(let o of i){let s=_t(o);r.has(s)||(r.add(s),e.has(s)||e.set(s,{count:0,param:o}),e.get(s).count++)}}let a=[];for(let[,{count:i,param:r}]of e)i===n&&a.push(r);return a}function K(t,e){if("vconcat"in t&&Array.isArray(t.vconcat))return{...t,vconcat:t.vconcat.map(n=>K(n,e))};if("hconcat"in t&&Array.isArray(t.hconcat))return{...t,hconcat:t.hconcat.map(n=>K(n,e))};if("mark"in t&&"params"in t&&t.params){let n=t.params,a=[];for(let i of n){if(!i||typeof i!="object"||!("name"in i)){a.push(i);continue}e.has(i.name)||a.push(i)}if(a.length===0){let{params:i,...r}=t;return r}return{...t,params:a}}return t}function L(t,e){return"vconcat"in t&&Array.isArray(t.vconcat)?{...t,vconcat:t.vconcat.map(n=>L(n,e))}:"hconcat"in t&&Array.isArray(t.hconcat)?{...t,hconcat:t.hconcat.map(n=>L(n,e))}:"layer"in t?t:"mark"in t&&x.isInteractive(t.mark)?{...t,mark:x.makeClickable(t.mark),encoding:$("opacity",t.encoding||{},e,t.mark)}:t}function T(t,e){var s,h;let{chartSelection:n=!0,fieldSelection:a=!0}=e;if(!n&&!a)return t;(s=t.params)!=null&&s.some(l=>l.bind==="legend")&&(a=!1);let i=(h=t.params)==null?void 0:h.some(l=>!l.bind);i&&(n=!1);let r="vconcat"in t||"hconcat"in t;if(i&&r)return t;if("vconcat"in t){let l=t.vconcat.map(m=>"mark"in m?T(m,{chartSelection:n,fieldSelection:a}):m);return q({...t,vconcat:l})}if("hconcat"in t){let l=t.hconcat.map(m=>"mark"in m?T(m,{chartSelection:n,fieldSelection:a}):m);return q({...t,hconcat:l})}if("layer"in t){let l=t.params&&t.params.length>0,m=a!==!1&&!l,k=[];if(m){let p=t.layer.flatMap(f=>"mark"in f?G(f):[]);k=[...new Set(p)],Array.isArray(a)&&(k=k.filter(f=>a.includes(f)))}let w=t.layer.map((p,f)=>{if(!("mark"in p))return p;let g=p;if(f===0&&k.length>0){let O=k.map(M=>j.legend(M));g={...g,params:[...g.params||[],...O]}}return g=z(g,n,f),g=J(g),f===0&&(g=B(g)),g});return{...t,layer:w}}if(!("mark"in t)||!x.isInteractive(t.mark))return t;let o=t;return o=Ot(o,a),o=z(o,n,void 0),o=J(o),o=B(o),o}function Ot(t,e){if(e===!1)return t;let n=G(t);Array.isArray(e)&&(n=n.filter(r=>e.includes(r)));let a=n.map(r=>j.legend(r)),i=[...t.params||[],...a];return{...t,params:i}}function z(t,e,n){if(e===!1)return t;let a;try{a=x.getMarkType(t.mark)}catch{return t}if(a==="geoshape")return t;let i=xt(t),r=e===!0?i.length>0?["point"]:Mt(a):[e];if(!r||r.length===0)return t;let o=r.map(h=>h==="interval"?j.interval(t,n):j.point(t,n)),s=[...t.params||[],...o];return i.length>0&&r.includes("point")&&s.push(j.binColoring(n)),{...t,params:s}}function B(t){let e;try{e=x.getMarkType(t.mark)}catch{}if(e==="geoshape")return t;let n=t.params||[];return n.some(a=>a.bind==="scales")?t:{...t,params:[...n,j.panZoom()]}}function J(t){let e="encoding"in t?t.encoding:void 0,n=t.params||[],a=n.map(i=>i.name);return n.length===0||!x.isInteractive(t.mark)?t:{...t,mark:x.makeClickable(t.mark),encoding:$("opacity",e||{},a,t.mark)}}function Mt(t){switch(t){case"arc":case"area":return["point"];case"text":case"bar":return["point","interval"];case"line":return;default:return["point","interval"]}}var Nt=5;async function Pt(t){if(!t)return t;let e="datasets"in t?{...t.datasets}:{},n=new kt(Nt),a=async r=>{if(!r)return r;if("layer"in r){let l=await Promise.all(r.layer.map(a));r={...r,layer:l}}if("hconcat"in r){let l=await Promise.all(r.hconcat.map(a));r={...r,hconcat:l}}if("vconcat"in r){let l=await Promise.all(r.vconcat.map(a));r={...r,vconcat:l}}if("spec"in r&&(r={...r,spec:await a(r.spec)}),!r.data||!("url"in r.data))return r;let o;try{o=H(r.data.url)}catch{return r}let s=r.data.format,h=await n.run(()=>st(o.href,s));return e[o.pathname]=h,{...r,data:{name:o.pathname}}},i=await a(t);return Object.keys(e).length===0?i:{...i,datasets:e}}var d=Z(rt(),1);ut("arrow",yt);var It=t=>{let e=(0,bt.c)(12),{value:n,setValue:a,chartSelection:i,fieldSelection:r,spec:o,embedOptions:s}=t,h,l;e[0]===o?(h=e[1],l=e[2]):(h=async()=>Pt(o),l=[o],e[0]=o,e[1]=h,e[2]=l);let{data:m,error:k}=vt(h,l);if(k){let p;return e[3]===k?p=e[4]:(p=(0,d.jsx)(gt,{error:k}),e[3]=k,e[4]=p),p}if(!m)return null;let w;return e[5]!==i||e[6]!==s||e[7]!==r||e[8]!==m||e[9]!==a||e[10]!==n?(w=(0,d.jsx)(Ct,{value:n,setValue:a,chartSelection:i,fieldSelection:r,spec:m,embedOptions:s}),e[5]=i,e[6]=s,e[7]=r,e[8]=m,e[9]=a,e[10]=n,e[11]=w):w=e[11],w},Ct=({value:t,setValue:e,chartSelection:n,fieldSelection:a,spec:i,embedOptions:r})=>{let{theme:o}=lt(),s=(0,S.useRef)(null),h=(0,S.useRef)(void 0),[l,m]=(0,S.useState)(),k=(0,S.useMemo)(()=>r&&"actions"in r?r.actions:{source:!1,compiled:!1},[r]),w=F(i),p=(0,S.useMemo)(()=>T(wt(w),{chartSelection:n,fieldSelection:a}),[w,n,a]),f=(0,S.useMemo)(()=>P(p),[p]),g=C(c=>{e({...t,...c})}),O=(0,S.useMemo)(()=>et((c,y)=>{_.debug("[Vega signal]",c,y);let b=V.mapValues(y,Kt);b=V.mapValues(b,Et),g({[c]:b})},100),[g]),M=F(f),I=(0,S.useMemo)(()=>M.reduce((c,y)=>(v.PAN_ZOOM===y||v.isBinColoring(y)||c.push({signalName:y,handler:(b,X)=>O(b,X)}),c),[]),[M,O]),R=C(c=>{_.error(c),_.debug(p),m(c)}),Q=C(c=>{_.debug("[Vega view] created",c),h.current=c,m(void 0)}),U=()=>{let c=[];return v.hasPoint(f)&&c.push(["Point selection","click to select a point; hold shift for multi-select"]),v.hasInterval(f)&&c.push(["Interval selection","click and drag to select an interval"]),v.hasLegend(f)&&c.push(["Legend selection","click to select a legend item; hold shift for multi-select"]),v.hasPanZoom(f)&&c.push(["Pan","hold the meta key and drag"],["Zoom","hold the meta key and scroll"]),c.length===0?null:(0,d.jsx)(at,{delayDuration:300,side:"left",content:(0,d.jsx)("div",{className:"text-xs flex flex-col",children:c.map((y,b)=>(0,d.jsxs)("div",{children:[(0,d.jsxs)("span",{className:"font-bold tracking-wide",children:[y[0],":"]})," ",y[1]]},b))}),children:(0,d.jsx)(ot,{className:"absolute bottom-1 right-0 m-2 h-4 w-4 cursor-help text-muted-foreground hover:text-foreground"})})},A=ft({ref:s,spec:p,options:{theme:o==="dark"?"dark":void 0,actions:k,mode:"vega-lite",tooltip:mt.call,renderer:"canvas"},onError:R,onEmbed:Q});return(0,S.useEffect)(()=>(I.forEach(({signalName:c,handler:y})=>{try{A==null||A.view.addSignalListener(c,y)}catch(b){_.error(b)}}),()=>{I.forEach(({signalName:c,handler:y})=>{try{A==null||A.view.removeSignalListener(c,y)}catch(b){_.error(b)}})}),[A,I]),(0,d.jsxs)(d.Fragment,{children:[l&&(0,d.jsxs)(ht,{variant:"destructive",children:[(0,d.jsx)(dt,{children:l.message}),(0,d.jsx)("div",{className:"text-md",children:l.stack})]}),(0,d.jsxs)("div",{className:nt("relative"),onPointerDown:it.stopPropagation(),children:[(0,d.jsx)("div",{ref:s,"data-container-width":pt(p)}),U()]})]})};function Et(t){return t instanceof Set?[...t]:t}function Kt(t){return Array.isArray(t)?t.map(e=>e instanceof Date&&ct(e)?new Date(e).getTime():e):t}var Lt=It;export{Lt as default};
+import{s as Z}from"./chunk-LvLJmgfZ.js";import{n as C}from"./useEvent-D91BmmQi.js";import{t as Y}from"./react-Bj1aDYRI.js";import"./react-dom-CSu739Rf.js";import{t as tt}from"./compiler-runtime-B3qBwwSJ.js";import{t as et}from"./debounce-DhnxH9Rh.js";import{_,d as V}from"./useEventListener-DvoEXWke.js";import{n as H}from"./config-ClMcu_sV.js";import{t as nt}from"./cn-DCUzRj2J.js";import{t as rt}from"./jsx-runtime-BqBOg78p.js";import"./fullscreen-eipL3i3Y.js";import{t as at}from"./tooltip-DTV9tlSr.js";import{r as it}from"./button-BbCh-29a.js";import{d as N}from"./arrays-DYDL-3-i.js";import{u as ot}from"./toDate-B5A0DFEz.js";import"./session-0B5NBztP.js";import{r as lt}from"./useTheme-CI2eq4XN.js";import{t as ct}from"./isValid-CklTTytn.js";import{a as st,r as mt,t as pt}from"./utils-DCL4n9wx.js";import{n as ut}from"./vega-loader.browser-C8wT63Va.js";import{t as ft}from"./react-vega-CXIQBUis.js";import"./defaultLocale-BLUna9fQ.js";import"./defaultLocale-DzliDDTm.js";import{r as dt,t as ht}from"./alert-yTS3WpF4.js";import{n as gt}from"./error-banner-LdWZDbqd.js";import{t as yt}from"./formats-b7Sf6DAK.js";import{n as vt}from"./useAsyncData-bgszE9F0.js";import{t as F}from"./useDeepCompareMemoize-zUHU--0D.js";import{t as kt}from"./semaphore-FlZezxaf.js";var bt=tt(),S=Z(Y(),1);function wt(t){return t.data&&"url"in t.data&&(t.data.url=H(t.data.url).href),t}const u={arc:"arc",area:"area",bar:"bar",image:"image",line:"line",point:"point",rect:"rect",rule:"rule",text:"text",tick:"tick",trail:"trail",circle:"circle",square:"square",geoshape:"geoshape"};var W=new Set(["boxplot","errorband","errorbar"]);const x={getMarkType(t){let e=typeof t=="string"?t:t.type;if(W.has(e))throw Error("Not supported");return e},isInteractive(t){let e=typeof t=="string"?t:t.type;return!W.has(e)},makeClickable(t){let e=typeof t=="string"?t:t.type;return e in u?typeof t=="string"?{type:t,cursor:"pointer",tooltip:!0}:{...t,type:e,cursor:"pointer",tooltip:!0}:t},getOpacity(t){return typeof t=="string"?null:"opacity"in t&&typeof t.opacity=="number"?t.opacity:null}},v={point(t){return t==null?"select_point":`select_point_${t}`},interval(t){return t==null?"select_interval":`select_interval_${t}`},legendSelection(t){return`legend_selection_${t}`},binColoring(t){return t==null?"bin_coloring":`bin_coloring_${t}`},HIGHLIGHT:"highlight",PAN_ZOOM:"pan_zoom",hasPoint(t){return t.some(e=>e.startsWith("select_point"))},hasInterval(t){return t.some(e=>e.startsWith("select_interval"))},hasLegend(t){return t.some(e=>e.startsWith("legend_selection"))},hasPanZoom(t){return t.some(e=>e.startsWith("pan_zoom"))},isBinColoring(t){return t.startsWith("bin_coloring")}},j={highlight(){return{name:v.HIGHLIGHT,select:{type:"point",on:"mouseover"}}},interval(t,e){return{name:v.interval(e),select:{type:"interval",encodings:D(t),mark:{fill:"#669EFF",fillOpacity:.07,stroke:"#669EFF",strokeOpacity:.4},on:"[mousedown[!event.metaKey], mouseup] > mousemove[!event.metaKey]",translate:"[mousedown[!event.metaKey], mouseup] > mousemove[!event.metaKey]"}}},point(t,e){return{name:v.point(e),select:{type:"point",encodings:D(t),on:"click[!event.metaKey]"}}},binColoring(t){return{name:v.binColoring(t),select:{type:"point",on:"click[!event.metaKey]"}}},legend(t){return{name:v.legendSelection(t),select:{type:"point",fields:[t]},bind:"legend"}},panZoom(){return{name:v.PAN_ZOOM,bind:"scales",select:{type:"interval",on:"[mousedown[event.metaKey], window:mouseup] > window:mousemove!",translate:"[mousedown[event.metaKey], window:mouseup] > window:mousemove!",zoom:"wheel![event.metaKey]"}}}};function D(t){switch(x.getMarkType(t.mark)){case u.image:case u.trail:return;case u.area:case u.arc:return["color"];case u.bar:{let e=St(t);return e==="horizontal"?["y"]:e==="vertical"?["x"]:void 0}case u.circle:case u.geoshape:case u.line:case u.point:case u.rect:case u.rule:case u.square:case u.text:case u.tick:return["x","y"]}}function P(t){return"params"in t&&t.params&&t.params.length>0?N(t.params.filter(e=>e==null?!1:"select"in e&&e.select!==void 0).map(e=>e.name)):"layer"in t?N(t.layer.flatMap(P)):"vconcat"in t?N(t.vconcat.flatMap(P)):"hconcat"in t?N(t.hconcat.flatMap(P)):[]}function St(t){var a,i;if(!t||!("mark"in t))return;let e=(a=t.encoding)==null?void 0:a.x,n=(i=t.encoding)==null?void 0:i.y;if(e&&"type"in e&&e.type==="nominal")return"vertical";if(n&&"type"in n&&n.type==="nominal"||e&&"aggregate"in e)return"horizontal";if(n&&"aggregate"in n)return"vertical"}function xt(t){if(!t.encoding)return[];let e=[];for(let n of Object.values(t.encoding))n&&typeof n=="object"&&"bin"in n&&n.bin&&"field"in n&&typeof n.field=="string"&&e.push(n.field);return e}function G(t){if(!t||!("encoding"in t))return[];let{encoding:e}=t;return e?Object.entries(e).flatMap(n=>{let[a,i]=n;return!i||!At.has(a)?[]:"field"in i&&typeof i.field=="string"?[i.field]:"condition"in i&&i.condition&&typeof i.condition=="object"&&"field"in i.condition&&i.condition.field&&typeof i.condition.field=="string"?[i.condition.field]:[]}):[]}var At=new Set(["color","fill","fillOpacity","opacity","shape","size"]);function $(t,e,n,a){let i=n.filter(o=>v.isBinColoring(o)),r={and:(i.length>0?i:n).map(o=>({param:o}))};if(t==="opacity"){let o=x.getOpacity(a)||1;return{...e,opacity:{condition:{test:r,value:o},value:o/5}}}else return e}function _t(t){if(!("select"in t)||!t.select)return JSON.stringify(t);let e=t.select;if(typeof e=="string")return JSON.stringify({type:e,bind:t.bind});let n={type:e.type,encodings:"encodings"in e&&e.encodings?[...e.encodings].toSorted():void 0,fields:"fields"in e&&e.fields?[...e.fields].toSorted():void 0,bind:t.bind};return JSON.stringify(n)}function q(t){let e=E(t);if(e.length===0)return t;let n=jt(e);return n.length===0?t:{...L(K(t,new Set(n.map(a=>a.name))),n.map(a=>a.name)),params:[...t.params||[],...n]}}function E(t){let e=[];if("vconcat"in t&&Array.isArray(t.vconcat))for(let n of t.vconcat)e.push(...E(n));else if("hconcat"in t&&Array.isArray(t.hconcat))for(let n of t.hconcat)e.push(...E(n));else{if("layer"in t)return[];"mark"in t&&"params"in t&&t.params&&t.params.length>0&&e.push({params:t.params})}return e}function jt(t){if(t.length===0)return[];let e=new Map,n=t.length;for(let{params:i}of t){let r=new Set;for(let o of i){let s=_t(o);r.has(s)||(r.add(s),e.has(s)||e.set(s,{count:0,param:o}),e.get(s).count++)}}let a=[];for(let[,{count:i,param:r}]of e)i===n&&a.push(r);return a}function K(t,e){if("vconcat"in t&&Array.isArray(t.vconcat))return{...t,vconcat:t.vconcat.map(n=>K(n,e))};if("hconcat"in t&&Array.isArray(t.hconcat))return{...t,hconcat:t.hconcat.map(n=>K(n,e))};if("mark"in t&&"params"in t&&t.params){let n=t.params,a=[];for(let i of n){if(!i||typeof i!="object"||!("name"in i)){a.push(i);continue}e.has(i.name)||a.push(i)}if(a.length===0){let{params:i,...r}=t;return r}return{...t,params:a}}return t}function L(t,e){return"vconcat"in t&&Array.isArray(t.vconcat)?{...t,vconcat:t.vconcat.map(n=>L(n,e))}:"hconcat"in t&&Array.isArray(t.hconcat)?{...t,hconcat:t.hconcat.map(n=>L(n,e))}:"layer"in t?t:"mark"in t&&x.isInteractive(t.mark)?{...t,mark:x.makeClickable(t.mark),encoding:$("opacity",t.encoding||{},e,t.mark)}:t}function T(t,e){var s,h;let{chartSelection:n=!0,fieldSelection:a=!0}=e;if(!n&&!a)return t;(s=t.params)!=null&&s.some(l=>l.bind==="legend")&&(a=!1);let i=(h=t.params)==null?void 0:h.some(l=>!l.bind);i&&(n=!1);let r="vconcat"in t||"hconcat"in t;if(i&&r)return t;if("vconcat"in t){let l=t.vconcat.map(m=>"mark"in m?T(m,{chartSelection:n,fieldSelection:a}):m);return q({...t,vconcat:l})}if("hconcat"in t){let l=t.hconcat.map(m=>"mark"in m?T(m,{chartSelection:n,fieldSelection:a}):m);return q({...t,hconcat:l})}if("layer"in t){let l=t.params&&t.params.length>0,m=a!==!1&&!l,k=[];if(m){let p=t.layer.flatMap(f=>"mark"in f?G(f):[]);k=[...new Set(p)],Array.isArray(a)&&(k=k.filter(f=>a.includes(f)))}let w=t.layer.map((p,f)=>{if(!("mark"in p))return p;let g=p;if(f===0&&k.length>0){let O=k.map(M=>j.legend(M));g={...g,params:[...g.params||[],...O]}}return g=z(g,n,f),g=J(g),f===0&&(g=B(g)),g});return{...t,layer:w}}if(!("mark"in t)||!x.isInteractive(t.mark))return t;let o=t;return o=Ot(o,a),o=z(o,n,void 0),o=J(o),o=B(o),o}function Ot(t,e){if(e===!1)return t;let n=G(t);Array.isArray(e)&&(n=n.filter(r=>e.includes(r)));let a=n.map(r=>j.legend(r)),i=[...t.params||[],...a];return{...t,params:i}}function z(t,e,n){if(e===!1)return t;let a;try{a=x.getMarkType(t.mark)}catch{return t}if(a==="geoshape")return t;let i=xt(t),r=e===!0?i.length>0?["point"]:Mt(a):[e];if(!r||r.length===0)return t;let o=r.map(h=>h==="interval"?j.interval(t,n):j.point(t,n)),s=[...t.params||[],...o];return i.length>0&&r.includes("point")&&s.push(j.binColoring(n)),{...t,params:s}}function B(t){let e;try{e=x.getMarkType(t.mark)}catch{}if(e==="geoshape")return t;let n=t.params||[];return n.some(a=>a.bind==="scales")?t:{...t,params:[...n,j.panZoom()]}}function J(t){let e="encoding"in t?t.encoding:void 0,n=t.params||[],a=n.map(i=>i.name);return n.length===0||!x.isInteractive(t.mark)?t:{...t,mark:x.makeClickable(t.mark),encoding:$("opacity",e||{},a,t.mark)}}function Mt(t){switch(t){case"arc":case"area":return["point"];case"text":case"bar":return["point","interval"];case"line":return;default:return["point","interval"]}}var Nt=5;async function Pt(t){if(!t)return t;let e="datasets"in t?{...t.datasets}:{},n=new kt(Nt),a=async r=>{if(!r)return r;if("layer"in r){let l=await Promise.all(r.layer.map(a));r={...r,layer:l}}if("hconcat"in r){let l=await Promise.all(r.hconcat.map(a));r={...r,hconcat:l}}if("vconcat"in r){let l=await Promise.all(r.vconcat.map(a));r={...r,vconcat:l}}if("spec"in r&&(r={...r,spec:await a(r.spec)}),!r.data||!("url"in r.data))return r;let o;try{o=H(r.data.url)}catch{return r}let s=r.data.format,h=await n.run(()=>st(o.href,s));return e[o.pathname]=h,{...r,data:{name:o.pathname}}},i=await a(t);return Object.keys(e).length===0?i:{...i,datasets:e}}var d=Z(rt(),1);ut("arrow",yt);var It=t=>{let e=(0,bt.c)(12),{value:n,setValue:a,chartSelection:i,fieldSelection:r,spec:o,embedOptions:s}=t,h,l;e[0]===o?(h=e[1],l=e[2]):(h=async()=>Pt(o),l=[o],e[0]=o,e[1]=h,e[2]=l);let{data:m,error:k}=vt(h,l);if(k){let p;return e[3]===k?p=e[4]:(p=(0,d.jsx)(gt,{error:k}),e[3]=k,e[4]=p),p}if(!m)return null;let w;return e[5]!==i||e[6]!==s||e[7]!==r||e[8]!==m||e[9]!==a||e[10]!==n?(w=(0,d.jsx)(Ct,{value:n,setValue:a,chartSelection:i,fieldSelection:r,spec:m,embedOptions:s}),e[5]=i,e[6]=s,e[7]=r,e[8]=m,e[9]=a,e[10]=n,e[11]=w):w=e[11],w},Ct=({value:t,setValue:e,chartSelection:n,fieldSelection:a,spec:i,embedOptions:r})=>{let{theme:o}=lt(),s=(0,S.useRef)(null),h=(0,S.useRef)(void 0),[l,m]=(0,S.useState)(),k=(0,S.useMemo)(()=>r&&"actions"in r?r.actions:{source:!1,compiled:!1},[r]),w=F(i),p=(0,S.useMemo)(()=>T(wt(w),{chartSelection:n,fieldSelection:a}),[w,n,a]),f=(0,S.useMemo)(()=>P(p),[p]),g=C(c=>{e({...t,...c})}),O=(0,S.useMemo)(()=>et((c,y)=>{_.debug("[Vega signal]",c,y);let b=V.mapValues(y,Kt);b=V.mapValues(b,Et),g({[c]:b})},100),[g]),M=F(f),I=(0,S.useMemo)(()=>M.reduce((c,y)=>(v.PAN_ZOOM===y||v.isBinColoring(y)||c.push({signalName:y,handler:(b,X)=>O(b,X)}),c),[]),[M,O]),R=C(c=>{_.error(c),_.debug(p),m(c)}),Q=C(c=>{_.debug("[Vega view] created",c),h.current=c,m(void 0)}),U=()=>{let c=[];return v.hasPoint(f)&&c.push(["Point selection","click to select a point; hold shift for multi-select"]),v.hasInterval(f)&&c.push(["Interval selection","click and drag to select an interval"]),v.hasLegend(f)&&c.push(["Legend selection","click to select a legend item; hold shift for multi-select"]),v.hasPanZoom(f)&&c.push(["Pan","hold the meta key and drag"],["Zoom","hold the meta key and scroll"]),c.length===0?null:(0,d.jsx)(at,{delayDuration:300,side:"left",content:(0,d.jsx)("div",{className:"text-xs flex flex-col",children:c.map((y,b)=>(0,d.jsxs)("div",{children:[(0,d.jsxs)("span",{className:"font-bold tracking-wide",children:[y[0],":"]})," ",y[1]]},b))}),children:(0,d.jsx)(ot,{className:"absolute bottom-1 right-0 m-2 h-4 w-4 cursor-help text-muted-foreground hover:text-foreground"})})},A=ft({ref:s,spec:p,options:{theme:o==="dark"?"dark":void 0,actions:k,mode:"vega-lite",tooltip:mt.call,renderer:"canvas"},onError:R,onEmbed:Q});return(0,S.useEffect)(()=>(I.forEach(({signalName:c,handler:y})=>{try{A==null||A.view.addSignalListener(c,y)}catch(b){_.error(b)}}),()=>{I.forEach(({signalName:c,handler:y})=>{try{A==null||A.view.removeSignalListener(c,y)}catch(b){_.error(b)}})}),[A,I]),(0,d.jsxs)(d.Fragment,{children:[l&&(0,d.jsxs)(ht,{variant:"destructive",children:[(0,d.jsx)(dt,{children:l.message}),(0,d.jsx)("div",{className:"text-md",children:l.stack})]}),(0,d.jsxs)("div",{className:nt("relative"),onPointerDown:it.stopPropagation(),children:[(0,d.jsx)("div",{ref:s,"data-container-width":pt(p)}),U()]})]})};function Et(t){return t instanceof Set?[...t]:t}function Kt(t){return Array.isArray(t)?t.map(e=>e instanceof Date&&ct(e)?new Date(e).getTime():e):t}var Lt=It;export{Lt as default};

package/dist/index.html

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-gYS1m_ap.js"></script>
+    <script type="module" crossorigin src="./assets/index-awsLWRjZ.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-BPPi7vOr.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-LvLJmgfZ.js">
     <link rel="modulepreload" crossorigin href="./assets/react-Bj1aDYRI.js">
@@ -104,7 +104,7 @@
     <link rel="modulepreload" crossorigin href="./assets/DeferredRequestRegistry-CNldVcrP.js">
     <link rel="modulepreload" crossorigin href="./assets/constants-DMpttj8Q.js">
     <link rel="modulepreload" crossorigin href="./assets/session-0B5NBztP.js">
-    <link rel="modulepreload" crossorigin href="./assets/config-DdDKNgb1.js">
+    <link rel="modulepreload" crossorigin href="./assets/config-ClMcu_sV.js">
     <link rel="modulepreload" crossorigin href="./assets/requests-DIwGYs0l.js">
     <link rel="modulepreload" crossorigin href="./assets/useLifecycle-DieWOfXE.js">
     <link rel="modulepreload" crossorigin href="./assets/useNonce-DfoVjkkH.js">
@@ -133,7 +133,7 @@
     <link rel="modulepreload" crossorigin href="./assets/debounce-DhnxH9Rh.js">
     <link rel="modulepreload" crossorigin href="./assets/database-zap-kIkTfzTX.js">
     <link rel="modulepreload" crossorigin href="./assets/main-B0OX4z33.js">
-    <link rel="modulepreload" crossorigin href="./assets/cells-CFd8A4_A.js">
+    <link rel="modulepreload" crossorigin href="./assets/cells-BsaJrRWi.js">
     <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-DyYDV0HI.js">
     <link rel="modulepreload" crossorigin href="./assets/kbd-CTUAEnEx.js">
     <link rel="modulepreload" crossorigin href="./assets/useInstallPackage-DUF4IRRI.js">
@@ -147,35 +147,35 @@
     <link rel="modulepreload" crossorigin href="./assets/usePress-DQ_tAz5W.js">
     <link rel="modulepreload" crossorigin href="./assets/input-C3Hrdlqq.js">
     <link rel="modulepreload" crossorigin href="./assets/ImperativeModal-B3Th7k4R.js">
-    <link rel="modulepreload" crossorigin href="./assets/cell-link-CW22jH60.js">
+    <link rel="modulepreload" crossorigin href="./assets/cell-link-B1pHtGWp.js">
     <link rel="modulepreload" crossorigin href="./assets/multi-map-CUuNtzHt.js">
     <link rel="modulepreload" crossorigin href="./assets/alert-yTS3WpF4.js">
     <link rel="modulepreload" crossorigin href="./assets/chevron-right-CG5QYXYk.js">
     <link rel="modulepreload" crossorigin href="./assets/dropdown-menu-CR7cnzLX.js">
     <link rel="modulepreload" crossorigin href="./assets/links-D1JoyKTt.js">
-    <link rel="modulepreload" crossorigin href="./assets/useRunCells-DQDFDt2R.js">
+    <link rel="modulepreload" crossorigin href="./assets/useRunCells-BiCBGyeW.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-LK56fFow.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-BwrPA9zQ.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-icon-OjtDb4gO.js">
-    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-CP7UDK5X.js">
-    <link rel="modulepreload" crossorigin href="./assets/datasource-DiYrzHFG.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-CEiXUajw.js">
+    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-ChwPJgPd.js">
+    <link rel="modulepreload" crossorigin href="./assets/datasource-DjDpJnbt.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-D-2KaAHK.js">
     <link rel="modulepreload" crossorigin href="./assets/package-Tv6ztuzw.js">
     <link rel="modulepreload" crossorigin href="./assets/sparkles-lWUAsPhp.js">
-    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-DWt3lI06.js">
+    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-B0h5OVW9.js">
     <link rel="modulepreload" crossorigin href="./assets/spinner-Bhir8k53.js">
-    <link rel="modulepreload" crossorigin href="./assets/html-to-image-CJxTFjQz.js">
-    <link rel="modulepreload" crossorigin href="./assets/focus-DjmSWsDI.js">
+    <link rel="modulepreload" crossorigin href="./assets/html-to-image-BWL3Ct4n.js">
+    <link rel="modulepreload" crossorigin href="./assets/focus-q38vUCl-.js">
     <link rel="modulepreload" crossorigin href="./assets/useAsyncData-bgszE9F0.js">
     <link rel="modulepreload" crossorigin href="./assets/LazyAnyLanguageCodeMirror-BEvXb3VX.js">
     <link rel="modulepreload" crossorigin href="./assets/micromark-factory-space-BygYYKhs.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-5FQGJX7Z-D9iBG0F7.js">
-    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-B1eFOa7V.js">
+    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-CU5Lbyax.js">
     <link rel="modulepreload" crossorigin href="./assets/command-KARR7KMq.js">
     <link rel="modulepreload" crossorigin href="./assets/field-zLmMOSA4.js">
     <link rel="modulepreload" crossorigin href="./assets/popover-Bz_0Vkyf.js">
     <link rel="modulepreload" crossorigin href="./assets/errors-vr57w7Ul.js">
-    <link rel="modulepreload" crossorigin href="./assets/download-BaGnGHOq.js">
+    <link rel="modulepreload" crossorigin href="./assets/download-DT8gf0PL.js">
     <link rel="modulepreload" crossorigin href="./assets/table-BGPSHfig.js">
     <link rel="modulepreload" crossorigin href="./assets/useIframeCapabilities-CcI1zSdn.js">
     <link rel="modulepreload" crossorigin href="./assets/error-banner-LdWZDbqd.js">
@@ -196,40 +196,40 @@
     <link rel="modulepreload" crossorigin href="./assets/plus-BgB18UzY.js">
     <link rel="modulepreload" crossorigin href="./assets/trash-2-rVklqqFF.js">
     <link rel="modulepreload" crossorigin href="./assets/react-resizable-panels.browser.esm-CV8-hvjx.js">
-    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-B2v_Stn9.js">
+    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-BJaeXQim.js">
     <link rel="modulepreload" crossorigin href="./assets/chart-no-axes-column-nqk474t8.js">
     <link rel="modulepreload" crossorigin href="./assets/square-function-uY_yJr5g.js">
     <link rel="modulepreload" crossorigin href="./assets/spec-CPQR_o92.js">
     <link rel="modulepreload" crossorigin href="./assets/ellipsis-vertical-CkwWkOQL.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-cw-DHwG4Mac.js">
     <link rel="modulepreload" crossorigin href="./assets/tree-actions-BM_EJr3E.js">
-    <link rel="modulepreload" crossorigin href="./assets/components-BYC1jwIq.js">
-    <link rel="modulepreload" crossorigin href="./assets/column-preview-CCTTw4tm.js">
+    <link rel="modulepreload" crossorigin href="./assets/components-BzBUxUz0.js">
+    <link rel="modulepreload" crossorigin href="./assets/column-preview-BPismotx.js">
     <link rel="modulepreload" crossorigin href="./assets/icons-Ol38nIbL.js">
-    <link rel="modulepreload" crossorigin href="./assets/radio-group-PmOgsvro.js">
-    <link rel="modulepreload" crossorigin href="./assets/floating-outline-CEy7C9R6.js">
+    <link rel="modulepreload" crossorigin href="./assets/radio-group-DlVSuZ_1.js">
+    <link rel="modulepreload" crossorigin href="./assets/floating-outline-BN9sAcQ0.js">
     <link rel="modulepreload" crossorigin href="./assets/objectWithoutPropertiesLoose-DfWeGRFv.js">
     <link rel="modulepreload" crossorigin href="./assets/esm-CqWdmSnV.js">
-    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-A3C9oCts.js">
+    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-D3_kHsDx.js">
     <link rel="modulepreload" crossorigin href="./assets/file-headphone-BrQspHac.js">
     <link rel="modulepreload" crossorigin href="./assets/file-BrdxGLRX.js">
     <link rel="modulepreload" crossorigin href="./assets/image-DQHXdEQn.js">
-    <link rel="modulepreload" crossorigin href="./assets/file-icons-CIKQdTpO.js">
-    <link rel="modulepreload" crossorigin href="./assets/switch-35WUzMpb.js">
+    <link rel="modulepreload" crossorigin href="./assets/file-icons-BiMOJy0r.js">
+    <link rel="modulepreload" crossorigin href="./assets/switch-BiU_sAcn.js">
     <link rel="modulepreload" crossorigin href="./assets/events-CPoJAfgx.js">
-    <link rel="modulepreload" crossorigin href="./assets/globals-FM_XB1In.js">
+    <link rel="modulepreload" crossorigin href="./assets/globals-7JnRMGd4.js">
     <link rel="modulepreload" crossorigin href="./assets/share-DMwTZOTH.js">
     <link rel="modulepreload" crossorigin href="./assets/blob-Bgnx1kuY.js">
     <link rel="modulepreload" crossorigin href="./assets/memoize-Tp7rARFe.js">
     <link rel="modulepreload" crossorigin href="./assets/get-C-qh_et5.js">
     <link rel="modulepreload" crossorigin href="./assets/_baseSet-CxV9N1bc.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-CAn3OpIa.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-BTTshiKq.js">
     <link rel="modulepreload" crossorigin href="./assets/label-xHqFtfdz.js">
-    <link rel="modulepreload" crossorigin href="./assets/textarea-DQ0XiNGe.js">
+    <link rel="modulepreload" crossorigin href="./assets/textarea-DwltG8V6.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-ccw-C-n2VFP5.js">
-    <link rel="modulepreload" crossorigin href="./assets/form-PMq9H-I_.js">
+    <link rel="modulepreload" crossorigin href="./assets/form-BtBTvVVd.js">
     <link rel="modulepreload" crossorigin href="./assets/renderShortcut-CcFk3m01.js">
-    <link rel="modulepreload" crossorigin href="./assets/useBoolean-_e4hdH_M.js">
+    <link rel="modulepreload" crossorigin href="./assets/useBoolean-Bp18o6XG.js">
     <link rel="modulepreload" crossorigin href="./assets/useDeepCompareMemoize-zUHU--0D.js">
     <link rel="modulepreload" crossorigin href="./assets/types-W8WWuumF.js">
     <link rel="modulepreload" crossorigin href="./assets/semaphore-FlZezxaf.js">
@@ -248,7 +248,7 @@
     <link rel="stylesheet" crossorigin href="./assets/cells-jmgGt1lS.css">
     <link rel="stylesheet" crossorigin href="./assets/markdown-renderer-DdDKmWlR.css">
     <link rel="stylesheet" crossorigin href="./assets/JsonOutput-B7vuddcd.css">
-    <link rel="stylesheet" crossorigin href="./assets/index-DAfPvCnw.css">
+    <link rel="stylesheet" crossorigin href="./assets/index-BIw7BKLH.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.23.9-dev46",
+  "version": "0.23.9-dev47",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/editor/Disconnected.tsx

@@ -1,69 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { ArrowRightSquareIcon } from "lucide-react";
-import { API } from "@/core/network/api";
-import { Banner } from "@/plugins/impl/common/error-banner";
-import { prettyError } from "@/utils/errors";
-import { reloadSafe } from "@/utils/reload-safe";
-import { Button } from "../ui/button";
-import { toast } from "../ui/use-toast";
-
 interface DisconnectedProps {
   reason: string;
-  canTakeover: boolean | undefined;
 }
 
-export const Disconnected = ({
-  reason,
-  canTakeover = false,
-}: DisconnectedProps) => {
-  const handleTakeover = async () => {
-    try {
-      const searchParams = new URL(window.location.href).searchParams;
-      await API.post(`/kernel/takeover?${searchParams.toString()}`, {});
-
-      // Refresh the page to reconnect
-      reloadSafe();
-    } catch (error) {
-      toast({
-        title: "Failed to take over session",
-        description: prettyError(error),
-        variant: "danger",
-      });
-    }
-  };
-
-  if (canTakeover) {
-    return (
-      <div className="flex justify-center">
-        <Banner
-          kind="info"
-          className="mt-10 flex flex-col rounded p-3 max-w-[800px] mx-4"
-        >
-          <div className="flex justify-between">
-            <span className="font-bold text-xl flex items-center mb-2">
-              Notebook already connected
-            </span>
-          </div>
-          <div className="flex justify-between items-end text-base gap-20">
-            <span>{reason}</span>
-            {canTakeover && (
-              <Button
-                onClick={handleTakeover}
-                variant="outline"
-                data-testid="takeover-button"
-                className="shrink-0"
-              >
-                <ArrowRightSquareIcon className="w-4 h-4 mr-2" />
-                Take over session
-              </Button>
-            )}
-          </div>
-        </Banner>
-      </div>
-    );
-  }
-
+export const Disconnected = ({ reason }: DisconnectedProps) => {
   return (
     <div className="font-mono text-center text-base text-(--red-11)">
       <p>{reason}</p>

package/src/components/editor/__tests__/viewer-banner.test.tsx

@@ -0,0 +1,89 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { layoutStateAtom } from "@/core/layout/layout";
+import { kioskModeAtom, viewStateAtom } from "@/core/mode";
+import { API } from "@/core/network/api";
+import { ViewerBanner } from "../viewer-banner";
+
+describe("ViewerBanner", () => {
+  it("renders nothing when not in kiosk mode", () => {
+    const store = createStore();
+    store.set(kioskModeAtom, false);
+    const { container } = render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <ViewerBanner />
+        </TooltipProvider>
+      </Provider>,
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("renders nothing for an intentional kiosk client (?kiosk=true)", () => {
+    const store = createStore();
+    store.set(kioskModeAtom, true);
+    window.history.pushState({}, "", "/?kiosk=true");
+    try {
+      const { container } = render(
+        <Provider store={store}>
+          <TooltipProvider>
+            <ViewerBanner />
+          </TooltipProvider>
+        </Provider>,
+      );
+      expect(container).toBeEmptyDOMElement();
+    } finally {
+      window.history.pushState({}, "", "/");
+    }
+  });
+
+  it("renders nothing in a non-vertical layout (grid/slides)", () => {
+    const store = createStore();
+    store.set(kioskModeAtom, true);
+    store.set(layoutStateAtom, { selectedLayout: "grid", layoutData: {} });
+    const { container } = render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <ViewerBanner />
+        </TooltipProvider>
+      </Provider>,
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("renders nothing in present mode", () => {
+    const store = createStore();
+    store.set(kioskModeAtom, true);
+    store.set(viewStateAtom, { mode: "present", cellAnchor: null });
+    const { container } = render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <ViewerBanner />
+        </TooltipProvider>
+      </Provider>,
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("shows take over and posts without reload when viewing", () => {
+    const store = createStore();
+    store.set(kioskModeAtom, true);
+    const post = vi.spyOn(API, "post").mockResolvedValue({} as never);
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <ViewerBanner />
+        </TooltipProvider>
+      </Provider>,
+    );
+    const button = screen.getByTestId("takeover-button");
+    button.click();
+    expect(post).toHaveBeenCalledWith(
+      expect.stringContaining("/kernel/takeover"),
+      {},
+    );
+  });
+});

package/src/components/editor/header/__tests__/status.test.tsx

@@ -90,19 +90,4 @@ describe("StatusOverlay disconnect indicator", () => {
       expect(onReconnect).not.toHaveBeenCalled();
     },
   );
-
-  it("does not render the disconnect icon when another tab has taken over", () => {
-    const onReconnect = vi.fn();
-    const { queryByTestId } = renderOverlay(
-      {
-        state: WebSocketState.CLOSED,
-        code: WebSocketClosedReason.ALREADY_RUNNING,
-        reason: "another browser tab is already connected to the kernel",
-        canTakeover: true,
-      },
-      onReconnect,
-    );
-
-    expect(queryByTestId("disconnected-indicator")).toBeNull();
-  });
 });

package/src/components/editor/header/app-header.tsx

@@ -18,10 +18,7 @@ export const AppHeader: React.FC<PropsWithChildren<Props>> = ({
     <div className={className}>
       {children}
       {connection.state === WebSocketState.CLOSED && (
-        <Disconnected
-          reason={connection.reason}
-          canTakeover={connection.canTakeover}
-        />
+        <Disconnected reason={connection.reason} />
       )}
     </div>
   );

package/src/components/editor/header/status.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { useAtomValue } from "jotai";
-import { HourglassIcon, LockIcon, UnlinkIcon } from "lucide-react";
+import { HourglassIcon, UnlinkIcon } from "lucide-react";
 import React from "react";
 import { Tooltip } from "@/components/ui/tooltip";
 import { notebookScrollToRunning } from "@/core/cells/actions";
@@ -24,13 +24,13 @@ export const StatusOverlay: React.FC<{
   const isOpen = connection.state === WebSocketState.OPEN;
   // Only KERNEL_DISCONNECTED is recoverable by a retry. Other terminal
   // reasons (MALFORMED_QUERY, KERNEL_STARTUP_ERROR) would deterministically
-  // fail the same way; ALREADY_RUNNING is handled by `LockedIcon` below.
+  // fail the same way.
   const canReconnect =
     isClosed && connection.code === WebSocketClosedReason.KERNEL_DISCONNECTED;
 
   return (
     <>
-      {isClosed && !connection.canTakeover && <NoiseBackground />}
+      {isClosed && <NoiseBackground />}
       <div
         className={cn(
           "z-50 top-4 left-4",
@@ -38,12 +38,11 @@ export const StatusOverlay: React.FC<{
         )}
       >
         {isOpen && isRunning && <RunningIcon />}
-        {isClosed && !connection.canTakeover && (
+        {isClosed && (
           <DisconnectedIcon
             onReconnect={canReconnect ? onReconnect : undefined}
           />
         )}
-        {isClosed && connection.canTakeover && <LockedIcon />}
       </div>
     </>
   );
@@ -79,14 +78,6 @@ const DisconnectedIcon: React.FC<{ onReconnect?: () => void }> = ({
   );
 };
 
-const LockedIcon = () => (
-  <Tooltip content="Notebook locked">
-    <div className={topLeftStatus}>
-      <LockIcon className="w-[25px] h-[25px] text-(--blue-11)" />
-    </div>
-  </Tooltip>
-);
-
 const RunningIcon = () => {
   const scratchpadOnly = useAtomValue(onlyScratchpadIsRunningAtom);
   const tooltip = scratchpadOnly

package/src/components/editor/viewer-banner.tsx

@@ -0,0 +1,82 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useAtomValue } from "jotai/react";
+import { ArrowRightSquareIcon, EyeIcon } from "lucide-react";
+import { KnownQueryParams } from "@/core/constants";
+import { useLayoutState } from "@/core/layout/layout";
+import { kioskModeAtom, viewStateAtom } from "@/core/mode";
+import { API } from "@/core/network/api";
+import { Banner } from "@/plugins/impl/common/error-banner";
+import { prettyError } from "@/utils/errors";
+import { Button } from "../ui/button";
+import { Tooltip } from "../ui/tooltip";
+import { toast } from "../ui/use-toast";
+
+export const ViewerBanner = () => {
+  const isViewing = useAtomValue(kioskModeAtom);
+  const { selectedLayout } = useLayoutState();
+  const { mode } = useAtomValue(viewStateAtom);
+
+  // Only a demoted editor (a second tab auto-routed to read-only) is offered
+  // takeover. A client that explicitly requested kiosk (?kiosk=true: embeds,
+  // slide previews, dashboards) is an intentional viewer and gets no banner.
+  const isIntentionalKiosk = new URL(window.location.href).searchParams.has(
+    KnownQueryParams.kiosk,
+  );
+
+  // Takeover is an editing affordance: only surface it in the default vertical
+  // reading view. Grid/slides layouts and present mode are app-style views
+  // where a floating take-over banner is out of place.
+  if (
+    !isViewing ||
+    isIntentionalKiosk ||
+    selectedLayout !== "vertical" ||
+    mode === "present"
+  ) {
+    return null;
+  }
+
+  const handleTakeover = async () => {
+    try {
+      const searchParams = new URL(window.location.href).searchParams;
+      // No reload: the server replies with consumer-capabilities
+      // (edit: true), which flips kiosk mode off and hides this banner.
+      await API.post(`/kernel/takeover?${searchParams.toString()}`, {});
+    } catch (error) {
+      toast({
+        title: "Failed to take over session",
+        description: prettyError(error),
+        variant: "danger",
+      });
+    }
+  };
+
+  return (
+    <div className="absolute top-2 left-2 z-50 w-fit print:hidden">
+      <Banner
+        kind="info"
+        className="flex items-center gap-2 rounded px-2 py-1 text-xs shadow-sm"
+      >
+        <span className="flex items-center gap-1 text-muted-foreground">
+          <EyeIcon className="w-3.5 h-3.5 shrink-0" />
+          You are currently connected as a reader.
+        </span>
+        <Tooltip
+          content="Switch editing to this tab. The current editor becomes read-only."
+          side="bottom"
+        >
+          <Button
+            onClick={handleTakeover}
+            variant="outline"
+            size="xs"
+            data-testid="takeover-button"
+            className="shrink-0"
+          >
+            <ArrowRightSquareIcon className="w-3 h-3 mr-1" />
+            Take over
+          </Button>
+        </Tooltip>
+      </Banner>
+    </div>
+  );
+};

package/src/core/edit-app.tsx

@@ -12,6 +12,7 @@ import { Controls } from "@/components/editor/controls/Controls";
 import { AppHeader } from "@/components/editor/header/app-header";
 import { FilenameForm } from "@/components/editor/header/filename-form";
 import { MultiCellActionToolbar } from "@/components/editor/navigation/multi-cell-action-toolbar";
+import { ViewerBanner } from "@/components/editor/viewer-banner";
 import { cn } from "@/utils/cn";
 import { Paths } from "@/utils/paths";
 import { AppContainer } from "../components/editor/app-container";
@@ -164,6 +165,8 @@ export const EditApp: React.FC<AppProps> = ({
           )}
         </AppHeader>
 
+        <ViewerBanner />
+
         {/* Don't render until we have a single cell */}
         {hasCells && (
           <CellsRenderer appConfig={appConfig} mode={viewState.mode}>

package/src/core/islands/bootstrap.ts

@@ -255,6 +255,8 @@ function handleMessage(
         handleWidgetMessage(MODEL_MANAGER, msg.data);
         return;
 
+      case "consumer-capabilities":
+        return;
       default:
         logNever(msg);
         return;

package/src/core/kernel/__tests__/handlers.test.ts

@@ -90,6 +90,7 @@ describe("buildCellData", () => {
         terminal: false,
       },
       auto_instantiated: false,
+      consumer_capabilities: { edit: true, interact: true },
     };
 
     const cells = buildCellData(kernelReadyData);
@@ -158,6 +159,7 @@ describe("buildCellData", () => {
         terminal: false,
       },
       auto_instantiated: false,
+      consumer_capabilities: { edit: true, interact: true },
     };
 
     const cells = buildCellData(kernelReadyData);
@@ -191,6 +193,7 @@ describe("buildCellData", () => {
         terminal: false,
       },
       auto_instantiated: false,
+      consumer_capabilities: { edit: true, interact: true },
     };
 
     const cells = buildCellData(kernelReadyData);
@@ -223,6 +226,7 @@ describe("buildLayoutState", () => {
         terminal: false,
       },
       auto_instantiated: false,
+      consumer_capabilities: { edit: true, interact: true },
     };
 
     const cells = buildCellData(kernelReadyData);
@@ -271,6 +275,7 @@ describe("buildLayoutState", () => {
         terminal: false,
       },
       auto_instantiated: false,
+      consumer_capabilities: { edit: true, interact: true },
     };
 
     const cells = buildCellData(kernelReadyData);

package/src/core/websocket/__tests__/useMarimoKernelConnection.test.ts

@@ -31,19 +31,6 @@ describe("classifyCloseEvent", () => {
   });
 
   describe("terminal closes (server-initiated)", () => {
-    it("MARIMO_ALREADY_CONNECTED → terminal + closeTransport, with takeover", () => {
-      const decision = classify("MARIMO_ALREADY_CONNECTED");
-      expect(decision.kind).toBe("terminal");
-      expect(decision.status).toMatchObject({
-        state: WebSocketState.CLOSED,
-        code: WebSocketClosedReason.ALREADY_RUNNING,
-        canTakeover: true,
-      });
-      if (decision.kind === "terminal") {
-        expect(decision.closeTransport).toBe(true);
-      }
-    });
-
     it.each([
       "MARIMO_WRONG_KERNEL_ID",
       "MARIMO_NO_FILE_KEY",