@marimo-team/frontend 0.22.4-dev0 → 0.22.4-dev10

package/dist/assets/{vega-component-CdvEZvzS.js → vega-component-BLi2Qo88.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-BbSyBDA8.js";import{_,d as T}from"./useEventListener-DGjKht0c.js";import{n as V}from"./config-CmaJdl9U.js";import{t as nt}from"./cn-DYvqRARy.js";import{t as rt}from"./jsx-runtime-Blw4afVn.js";import"./fullscreen-k58KVlT-.js";import{t as at}from"./tooltip-DmqhBBs6.js";import{r as it}from"./button-BKVLeSTX.js";import{d as N}from"./arrays-DAC2orgH.js";import{u as ot}from"./toDate-BGIVWsZ9.js";import"./session-DDorezMU.js";import{r as lt}from"./useTheme-wMq5x3Hi.js";import{t as ct}from"./isValid-CtiDIjiD.js";import{a as st,r as mt,t as pt}from"./utils-COwZ1qVI.js";import{n as ut}from"./vega-loader.browser-CRZ52CKf.js";import{t as ft}from"./react-vega-o-uiEUqD.js";import"./defaultLocale-D_rSvXvJ.js";import"./defaultLocale-C92Rrpmf.js";import{r as dt,t as ht}from"./alert-DrrhKX67.js";import{n as gt}from"./error-banner-B3Vr5jH0.js";import{n as yt}from"./useAsyncData-BPlezez1.js";import{t as vt}from"./formats-Cl4zm1Jf.js";import{t as H}from"./useDeepCompareMemoize-Bj2wGMJg.js";var kt=tt(),S=z(Y(),1);function bt(t){return t.data&&"url"in t.data&&(t.data.url=V(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 F=new Set(["boxplot","errorband","errorbar"]);const x={getMarkType(t){let e=typeof t=="string"?t:t.type;if(F.has(e))throw Error("Not supported");return e},isInteractive(t){let e=typeof t=="string"?t:t.type;return!F.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}},y={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:y.HIGHLIGHT,select:{type:"point",on:"mouseover"}}},interval(t,e){return{name:y.interval(e),select:{type:"interval",encodings:W(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:y.point(e),select:{type:"point",encodings:W(t),on:"click[!event.metaKey]"}}},binColoring(t){return{name:y.binColoring(t),select:{type:"point",on:"click[!event.metaKey]"}}},legend(t){return{name:y.legendSelection(t),select:{type:"point",fields:[t]},bind:"legend"}},panZoom(){return{name:y.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 W(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=wt(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 wt(t){var a,r;if(!t||!("mark"in t))return;let e=(a=t.encoding)==null?void 0:a.x,n=(r=t.encoding)==null?void 0:r.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 St(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 D(t){if(!t||!("encoding"in t))return[];let{encoding:e}=t;return e?Object.entries(e).flatMap(n=>{let[a,r]=n;return!r||!xt.has(a)?[]:"field"in r&&typeof r.field=="string"?[r.field]:"condition"in r&&r.condition&&typeof r.condition=="object"&&"field"in r.condition&&r.condition.field&&typeof r.condition.field=="string"?[r.condition.field]:[]}):[]}var xt=new Set(["color","fill","fillOpacity","opacity","shape","size"]);function G(t,e,n,a){let r=n.filter(o=>y.isBinColoring(o)),i={and:(r.length>0?r:n).map(o=>({param:o}))};if(t==="opacity"){let o=x.getOpacity(a)||1;return{...e,opacity:{condition:{test:i,value:o},value:o/5}}}else return e}function At(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 $(t){let e=E(t);if(e.length===0)return t;let n=_t(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 _t(t){if(t.length===0)return[];let e=new Map,n=t.length;for(let{params:r}of t){let i=new Set;for(let o of r){let l=At(o);i.has(l)||(i.add(l),e.has(l)||e.set(l,{count:0,param:o}),e.get(l).count++)}}let a=[];for(let[,{count:r,param:i}]of e)r===n&&a.push(i);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 r of n){if(!r||typeof r!="object"||!("name"in r)){a.push(r);continue}e.has(r.name)||a.push(r)}if(a.length===0){let{params:r,...i}=t;return i}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:G("opacity",t.encoding||{},e,t.mark)}:t}function Z(t,e){var l,k;let{chartSelection:n=!0,fieldSelection:a=!0}=e;if(!n&&!a)return t;(l=t.params)!=null&&l.some(s=>s.bind==="legend")&&(a=!1);let r=(k=t.params)==null?void 0:k.some(s=>!s.bind);r&&(n=!1);let i="vconcat"in t||"hconcat"in t;if(r&&i)return t;if("vconcat"in t){let s=t.vconcat.map(m=>"mark"in m?Z(m,{chartSelection:n,fieldSelection:a}):m);return $({...t,vconcat:s})}if("hconcat"in t){let s=t.hconcat.map(m=>"mark"in m?Z(m,{chartSelection:n,fieldSelection:a}):m);return $({...t,hconcat:s})}if("layer"in t){let s=t.params&&t.params.length>0,m=a!==!1&&!s,v=[];if(m){let p=t.layer.flatMap(f=>"mark"in f?D(f):[]);v=[...new Set(p)],Array.isArray(a)&&(v=v.filter(f=>a.includes(f)))}let w=t.layer.map((p,f)=>{if(!("mark"in p))return p;let h=p;if(f===0&&v.length>0){let O=v.map(M=>j.legend(M));h={...h,params:[...h.params||[],...O]}}return h=q(h,n,f),h=R(h),f===0&&(h=J(h)),h});return{...t,layer:w}}if(!("mark"in t)||!x.isInteractive(t.mark))return t;let o=t;return o=jt(o,a),o=q(o,n,void 0),o=R(o),o=J(o),o}function jt(t,e){if(e===!1)return t;let n=D(t);Array.isArray(e)&&(n=n.filter(i=>e.includes(i)));let a=n.map(i=>j.legend(i)),r=[...t.params||[],...a];return{...t,params:r}}function q(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 r=St(t),i=e===!0?r.length>0?["point"]:Ot(a):[e];if(!i||i.length===0)return t;let o=i.map(k=>k==="interval"?j.interval(t,n):j.point(t,n)),l=[...t.params||[],...o];return r.length>0&&i.includes("point")&&l.push(j.binColoring(n)),{...t,params:l}}function J(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 R(t){let e="encoding"in t?t.encoding:void 0,n=t.params||[],a=n.map(r=>r.name);return n.length===0||!x.isInteractive(t.mark)?t:{...t,mark:x.makeClickable(t.mark),encoding:G("opacity",e||{},a,t.mark)}}function Ot(t){switch(t){case"arc":case"area":return["point"];case"text":case"bar":return["point","interval"];case"line":return;default:return["point","interval"]}}async function Mt(t){if(!t)return t;let e="datasets"in t?{...t.datasets}:{},n=async r=>{if(!r)return r;if("layer"in r){let l=await Promise.all(r.layer.map(n));r={...r,layer:l}}if("hconcat"in r){let l=await Promise.all(r.hconcat.map(n));r={...r,hconcat:l}}if("vconcat"in r){let l=await Promise.all(r.vconcat.map(n));r={...r,vconcat:l}}if("spec"in r&&(r={...r,spec:await n(r.spec)}),!r.data||!("url"in r.data))return r;let i;try{i=V(r.data.url)}catch{return r}let o=await st(i.href,r.data.format);return e[i.pathname]=o,{...r,data:{name:i.pathname}}},a=await n(t);return Object.keys(e).length===0?a:{...a,datasets:e}}var d=z(rt(),1);ut("arrow",vt);var Nt=t=>{let e=(0,kt.c)(12),{value:n,setValue:a,chartSelection:r,fieldSelection:i,spec:o,embedOptions:l}=t,k,s;e[0]===o?(k=e[1],s=e[2]):(k=async()=>Mt(o),s=[o],e[0]=o,e[1]=k,e[2]=s);let{data:m,error:v}=yt(k,s);if(v){let p;return e[3]===v?p=e[4]:(p=(0,d.jsx)(gt,{error:v}),e[3]=v,e[4]=p),p}if(!m)return null;let w;return e[5]!==r||e[6]!==l||e[7]!==i||e[8]!==m||e[9]!==a||e[10]!==n?(w=(0,d.jsx)(Pt,{value:n,setValue:a,chartSelection:r,fieldSelection:i,spec:m,embedOptions:l}),e[5]=r,e[6]=l,e[7]=i,e[8]=m,e[9]=a,e[10]=n,e[11]=w):w=e[11],w},Pt=({value:t,setValue:e,chartSelection:n,fieldSelection:a,spec:r,embedOptions:i})=>{let{theme:o}=lt(),l=(0,S.useRef)(null),k=(0,S.useRef)(void 0),[s,m]=(0,S.useState)(),v=(0,S.useMemo)(()=>i&&"actions"in i?i.actions:{source:!1,compiled:!1},[i]),w=H(r),p=(0,S.useMemo)(()=>Z(bt(w),{chartSelection:n,fieldSelection:a}),[w,n,a]),f=(0,S.useMemo)(()=>P(p),[p]),h=C(c=>{e({...t,...c})}),O=(0,S.useMemo)(()=>et((c,g)=>{_.debug("[Vega signal]",c,g);let b=T.mapValues(g,Ct);b=T.mapValues(b,It),h({[c]:b})},100),[h]),M=H(f),I=(0,S.useMemo)(()=>M.reduce((c,g)=>(y.PAN_ZOOM===g||y.isBinColoring(g)||c.push({signalName:g,handler:(b,X)=>O(b,X)}),c),[]),[M,O]),B=C(c=>{_.error(c),_.debug(p),m(c)}),Q=C(c=>{_.debug("[Vega view] created",c),k.current=c,m(void 0)}),U=()=>{let c=[];return y.hasPoint(f)&&c.push(["Point selection","click to select a point; hold shift for multi-select"]),y.hasInterval(f)&&c.push(["Interval selection","click and drag to select an interval"]),y.hasLegend(f)&&c.push(["Legend selection","click to select a legend item; hold shift for multi-select"]),y.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((g,b)=>(0,d.jsxs)("div",{children:[(0,d.jsxs)("span",{className:"font-bold tracking-wide",children:[g[0],":"]})," ",g[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:l,spec:p,options:{theme:o==="dark"?"dark":void 0,actions:v,mode:"vega-lite",tooltip:mt.call,renderer:"canvas"},onError:B,onEmbed:Q});return(0,S.useEffect)(()=>(I.forEach(({signalName:c,handler:g})=>{try{A==null||A.view.addSignalListener(c,g)}catch(b){_.error(b)}}),()=>{I.forEach(({signalName:c,handler:g})=>{try{A==null||A.view.removeSignalListener(c,g)}catch(b){_.error(b)}})}),[A,I]),(0,d.jsxs)(d.Fragment,{children:[s&&(0,d.jsxs)(ht,{variant:"destructive",children:[(0,d.jsx)(dt,{children:s.message}),(0,d.jsx)("div",{className:"text-md",children:s.stack})]}),(0,d.jsxs)("div",{className:nt("relative"),onPointerDown:it.stopPropagation(),children:[(0,d.jsx)("div",{ref:l,"data-container-width":pt(p)}),U()]})]})};function It(t){return t instanceof Set?[...t]:t}function Ct(t){return Array.isArray(t)?t.map(e=>e instanceof Date&&ct(e)?new Date(e).getTime():e):t}var Et=Nt;export{Et 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-BbSyBDA8.js";import{_,d as T}from"./useEventListener-DGjKht0c.js";import{n as V}from"./config-DCMsCquu.js";import{t as nt}from"./cn-DYvqRARy.js";import{t as rt}from"./jsx-runtime-Blw4afVn.js";import"./fullscreen-k58KVlT-.js";import{t as at}from"./tooltip-DmqhBBs6.js";import{r as it}from"./button-BKVLeSTX.js";import{d as N}from"./arrays-DAC2orgH.js";import{u as ot}from"./toDate-BGIVWsZ9.js";import"./session-DDorezMU.js";import{r as lt}from"./useTheme-B1JCa4JT.js";import{t as ct}from"./isValid-CtiDIjiD.js";import{a as st,r as mt,t as pt}from"./utils-COwZ1qVI.js";import{n as ut}from"./vega-loader.browser-CRZ52CKf.js";import{t as ft}from"./react-vega-o-uiEUqD.js";import"./defaultLocale-D_rSvXvJ.js";import"./defaultLocale-C92Rrpmf.js";import{r as dt,t as ht}from"./alert-DrrhKX67.js";import{n as gt}from"./error-banner-B3Vr5jH0.js";import{n as yt}from"./useAsyncData-BPlezez1.js";import{t as vt}from"./formats-Cl4zm1Jf.js";import{t as H}from"./useDeepCompareMemoize-Bj2wGMJg.js";var kt=tt(),S=z(Y(),1);function bt(t){return t.data&&"url"in t.data&&(t.data.url=V(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 F=new Set(["boxplot","errorband","errorbar"]);const x={getMarkType(t){let e=typeof t=="string"?t:t.type;if(F.has(e))throw Error("Not supported");return e},isInteractive(t){let e=typeof t=="string"?t:t.type;return!F.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}},y={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:y.HIGHLIGHT,select:{type:"point",on:"mouseover"}}},interval(t,e){return{name:y.interval(e),select:{type:"interval",encodings:W(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:y.point(e),select:{type:"point",encodings:W(t),on:"click[!event.metaKey]"}}},binColoring(t){return{name:y.binColoring(t),select:{type:"point",on:"click[!event.metaKey]"}}},legend(t){return{name:y.legendSelection(t),select:{type:"point",fields:[t]},bind:"legend"}},panZoom(){return{name:y.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 W(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=wt(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 wt(t){var a,r;if(!t||!("mark"in t))return;let e=(a=t.encoding)==null?void 0:a.x,n=(r=t.encoding)==null?void 0:r.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 St(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 D(t){if(!t||!("encoding"in t))return[];let{encoding:e}=t;return e?Object.entries(e).flatMap(n=>{let[a,r]=n;return!r||!xt.has(a)?[]:"field"in r&&typeof r.field=="string"?[r.field]:"condition"in r&&r.condition&&typeof r.condition=="object"&&"field"in r.condition&&r.condition.field&&typeof r.condition.field=="string"?[r.condition.field]:[]}):[]}var xt=new Set(["color","fill","fillOpacity","opacity","shape","size"]);function G(t,e,n,a){let r=n.filter(o=>y.isBinColoring(o)),i={and:(r.length>0?r:n).map(o=>({param:o}))};if(t==="opacity"){let o=x.getOpacity(a)||1;return{...e,opacity:{condition:{test:i,value:o},value:o/5}}}else return e}function At(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 $(t){let e=E(t);if(e.length===0)return t;let n=_t(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 _t(t){if(t.length===0)return[];let e=new Map,n=t.length;for(let{params:r}of t){let i=new Set;for(let o of r){let l=At(o);i.has(l)||(i.add(l),e.has(l)||e.set(l,{count:0,param:o}),e.get(l).count++)}}let a=[];for(let[,{count:r,param:i}]of e)r===n&&a.push(i);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 r of n){if(!r||typeof r!="object"||!("name"in r)){a.push(r);continue}e.has(r.name)||a.push(r)}if(a.length===0){let{params:r,...i}=t;return i}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:G("opacity",t.encoding||{},e,t.mark)}:t}function Z(t,e){var l,k;let{chartSelection:n=!0,fieldSelection:a=!0}=e;if(!n&&!a)return t;(l=t.params)!=null&&l.some(s=>s.bind==="legend")&&(a=!1);let r=(k=t.params)==null?void 0:k.some(s=>!s.bind);r&&(n=!1);let i="vconcat"in t||"hconcat"in t;if(r&&i)return t;if("vconcat"in t){let s=t.vconcat.map(m=>"mark"in m?Z(m,{chartSelection:n,fieldSelection:a}):m);return $({...t,vconcat:s})}if("hconcat"in t){let s=t.hconcat.map(m=>"mark"in m?Z(m,{chartSelection:n,fieldSelection:a}):m);return $({...t,hconcat:s})}if("layer"in t){let s=t.params&&t.params.length>0,m=a!==!1&&!s,v=[];if(m){let p=t.layer.flatMap(f=>"mark"in f?D(f):[]);v=[...new Set(p)],Array.isArray(a)&&(v=v.filter(f=>a.includes(f)))}let w=t.layer.map((p,f)=>{if(!("mark"in p))return p;let h=p;if(f===0&&v.length>0){let O=v.map(M=>j.legend(M));h={...h,params:[...h.params||[],...O]}}return h=q(h,n,f),h=R(h),f===0&&(h=J(h)),h});return{...t,layer:w}}if(!("mark"in t)||!x.isInteractive(t.mark))return t;let o=t;return o=jt(o,a),o=q(o,n,void 0),o=R(o),o=J(o),o}function jt(t,e){if(e===!1)return t;let n=D(t);Array.isArray(e)&&(n=n.filter(i=>e.includes(i)));let a=n.map(i=>j.legend(i)),r=[...t.params||[],...a];return{...t,params:r}}function q(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 r=St(t),i=e===!0?r.length>0?["point"]:Ot(a):[e];if(!i||i.length===0)return t;let o=i.map(k=>k==="interval"?j.interval(t,n):j.point(t,n)),l=[...t.params||[],...o];return r.length>0&&i.includes("point")&&l.push(j.binColoring(n)),{...t,params:l}}function J(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 R(t){let e="encoding"in t?t.encoding:void 0,n=t.params||[],a=n.map(r=>r.name);return n.length===0||!x.isInteractive(t.mark)?t:{...t,mark:x.makeClickable(t.mark),encoding:G("opacity",e||{},a,t.mark)}}function Ot(t){switch(t){case"arc":case"area":return["point"];case"text":case"bar":return["point","interval"];case"line":return;default:return["point","interval"]}}async function Mt(t){if(!t)return t;let e="datasets"in t?{...t.datasets}:{},n=async r=>{if(!r)return r;if("layer"in r){let l=await Promise.all(r.layer.map(n));r={...r,layer:l}}if("hconcat"in r){let l=await Promise.all(r.hconcat.map(n));r={...r,hconcat:l}}if("vconcat"in r){let l=await Promise.all(r.vconcat.map(n));r={...r,vconcat:l}}if("spec"in r&&(r={...r,spec:await n(r.spec)}),!r.data||!("url"in r.data))return r;let i;try{i=V(r.data.url)}catch{return r}let o=await st(i.href,r.data.format);return e[i.pathname]=o,{...r,data:{name:i.pathname}}},a=await n(t);return Object.keys(e).length===0?a:{...a,datasets:e}}var d=z(rt(),1);ut("arrow",vt);var Nt=t=>{let e=(0,kt.c)(12),{value:n,setValue:a,chartSelection:r,fieldSelection:i,spec:o,embedOptions:l}=t,k,s;e[0]===o?(k=e[1],s=e[2]):(k=async()=>Mt(o),s=[o],e[0]=o,e[1]=k,e[2]=s);let{data:m,error:v}=yt(k,s);if(v){let p;return e[3]===v?p=e[4]:(p=(0,d.jsx)(gt,{error:v}),e[3]=v,e[4]=p),p}if(!m)return null;let w;return e[5]!==r||e[6]!==l||e[7]!==i||e[8]!==m||e[9]!==a||e[10]!==n?(w=(0,d.jsx)(Pt,{value:n,setValue:a,chartSelection:r,fieldSelection:i,spec:m,embedOptions:l}),e[5]=r,e[6]=l,e[7]=i,e[8]=m,e[9]=a,e[10]=n,e[11]=w):w=e[11],w},Pt=({value:t,setValue:e,chartSelection:n,fieldSelection:a,spec:r,embedOptions:i})=>{let{theme:o}=lt(),l=(0,S.useRef)(null),k=(0,S.useRef)(void 0),[s,m]=(0,S.useState)(),v=(0,S.useMemo)(()=>i&&"actions"in i?i.actions:{source:!1,compiled:!1},[i]),w=H(r),p=(0,S.useMemo)(()=>Z(bt(w),{chartSelection:n,fieldSelection:a}),[w,n,a]),f=(0,S.useMemo)(()=>P(p),[p]),h=C(c=>{e({...t,...c})}),O=(0,S.useMemo)(()=>et((c,g)=>{_.debug("[Vega signal]",c,g);let b=T.mapValues(g,Ct);b=T.mapValues(b,It),h({[c]:b})},100),[h]),M=H(f),I=(0,S.useMemo)(()=>M.reduce((c,g)=>(y.PAN_ZOOM===g||y.isBinColoring(g)||c.push({signalName:g,handler:(b,X)=>O(b,X)}),c),[]),[M,O]),B=C(c=>{_.error(c),_.debug(p),m(c)}),Q=C(c=>{_.debug("[Vega view] created",c),k.current=c,m(void 0)}),U=()=>{let c=[];return y.hasPoint(f)&&c.push(["Point selection","click to select a point; hold shift for multi-select"]),y.hasInterval(f)&&c.push(["Interval selection","click and drag to select an interval"]),y.hasLegend(f)&&c.push(["Legend selection","click to select a legend item; hold shift for multi-select"]),y.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((g,b)=>(0,d.jsxs)("div",{children:[(0,d.jsxs)("span",{className:"font-bold tracking-wide",children:[g[0],":"]})," ",g[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:l,spec:p,options:{theme:o==="dark"?"dark":void 0,actions:v,mode:"vega-lite",tooltip:mt.call,renderer:"canvas"},onError:B,onEmbed:Q});return(0,S.useEffect)(()=>(I.forEach(({signalName:c,handler:g})=>{try{A==null||A.view.addSignalListener(c,g)}catch(b){_.error(b)}}),()=>{I.forEach(({signalName:c,handler:g})=>{try{A==null||A.view.removeSignalListener(c,g)}catch(b){_.error(b)}})}),[A,I]),(0,d.jsxs)(d.Fragment,{children:[s&&(0,d.jsxs)(ht,{variant:"destructive",children:[(0,d.jsx)(dt,{children:s.message}),(0,d.jsx)("div",{className:"text-md",children:s.stack})]}),(0,d.jsxs)("div",{className:nt("relative"),onPointerDown:it.stopPropagation(),children:[(0,d.jsx)("div",{ref:l,"data-container-width":pt(p)}),U()]})]})};function It(t){return t instanceof Set?[...t]:t}function Ct(t){return Array.isArray(t)?t.map(e=>e instanceof Date&&ct(e)?new Date(e).getTime():e):t}var Et=Nt;export{Et 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-B_DGbLw5.js"></script>
+    <script type="module" crossorigin src="./assets/index-CaFbHOEK.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-DItdS47A.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-LvLJmgfZ.js">
     <link rel="modulepreload" crossorigin href="./assets/react-Bj1aDYRI.js">
@@ -98,17 +98,17 @@
     <link rel="modulepreload" crossorigin href="./assets/isArrayLikeObject-ODovYgPQ.js">
     <link rel="modulepreload" crossorigin href="./assets/merge-BOaDhCTH.js">
     <link rel="modulepreload" crossorigin href="./assets/zod-H_cgTO0M.js">
-    <link rel="modulepreload" crossorigin href="./assets/utils-DKaC_ndw.js">
+    <link rel="modulepreload" crossorigin href="./assets/utils-8btzWeZg.js">
     <link rel="modulepreload" crossorigin href="./assets/Deferred-DMWKlZOV.js">
     <link rel="modulepreload" crossorigin href="./assets/uuid-DercMavo.js">
     <link rel="modulepreload" crossorigin href="./assets/DeferredRequestRegistry-KOgQgaJP.js">
     <link rel="modulepreload" crossorigin href="./assets/constants-tOPFFcLZ.js">
     <link rel="modulepreload" crossorigin href="./assets/session-DDorezMU.js">
-    <link rel="modulepreload" crossorigin href="./assets/config-CmaJdl9U.js">
+    <link rel="modulepreload" crossorigin href="./assets/config-DCMsCquu.js">
     <link rel="modulepreload" crossorigin href="./assets/requests-9-v2bhoi.js">
     <link rel="modulepreload" crossorigin href="./assets/useLifecycle-N3bfh_O1.js">
     <link rel="modulepreload" crossorigin href="./assets/useNonce-CbdaHKzX.js">
-    <link rel="modulepreload" crossorigin href="./assets/useTheme-wMq5x3Hi.js">
+    <link rel="modulepreload" crossorigin href="./assets/useTheme-B1JCa4JT.js">
     <link rel="modulepreload" crossorigin href="./assets/arrays-DAC2orgH.js">
     <link rel="modulepreload" crossorigin href="./assets/strings-pfr2N700.js">
     <link rel="modulepreload" crossorigin href="./assets/once-hq2TLzOp.js">
@@ -134,7 +134,7 @@
     <link rel="modulepreload" crossorigin href="./assets/debounce-BbSyBDA8.js">
     <link rel="modulepreload" crossorigin href="./assets/database-zap-BxfYZ6ML.js">
     <link rel="modulepreload" crossorigin href="./assets/main-BNL5rxQw.js">
-    <link rel="modulepreload" crossorigin href="./assets/cells-CcsG9Aum.js">
+    <link rel="modulepreload" crossorigin href="./assets/cells-C9wzDxwr.js">
     <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-dxChUL02.js">
     <link rel="modulepreload" crossorigin href="./assets/kbd-BbX-cXm5.js">
     <link rel="modulepreload" crossorigin href="./assets/useInstallPackage-EEg9LCNy.js">
@@ -148,33 +148,33 @@
     <link rel="modulepreload" crossorigin href="./assets/usePress-YLit4doY.js">
     <link rel="modulepreload" crossorigin href="./assets/input-DjrybsRY.js">
     <link rel="modulepreload" crossorigin href="./assets/ImperativeModal-DSu22ncS.js">
-    <link rel="modulepreload" crossorigin href="./assets/cell-link-Cimoe3Fv.js">
+    <link rel="modulepreload" crossorigin href="./assets/cell-link-CUOy8qvK.js">
     <link rel="modulepreload" crossorigin href="./assets/multi-map-MSuUqmbC.js">
     <link rel="modulepreload" crossorigin href="./assets/alert-DrrhKX67.js">
     <link rel="modulepreload" crossorigin href="./assets/chevron-right-CgvDWFE3.js">
     <link rel="modulepreload" crossorigin href="./assets/dropdown-menu-DrHAuMTb.js">
     <link rel="modulepreload" crossorigin href="./assets/links-NCBzUApL.js">
-    <link rel="modulepreload" crossorigin href="./assets/datasource-D9nfSxKS.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-BBVlYaRC.js">
+    <link rel="modulepreload" crossorigin href="./assets/datasource-o22Gadpo.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-BeEg2EJ6.js">
     <link rel="modulepreload" crossorigin href="./assets/sparkles-DczT6OBt.js">
-    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-dTNCLY-Q.js">
+    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-EEO_bAbD.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-C8iWa1qI.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-DFMsQ6MJ.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-icon-CG2ao3lW.js">
     <link rel="modulepreload" crossorigin href="./assets/spinner-AR54Ic3-.js">
-    <link rel="modulepreload" crossorigin href="./assets/html-to-image-BRbQwG7G.js">
-    <link rel="modulepreload" crossorigin href="./assets/focus-C5u0JQUq.js">
+    <link rel="modulepreload" crossorigin href="./assets/html-to-image-DN6TNqeX.js">
+    <link rel="modulepreload" crossorigin href="./assets/focus-4jo_CuOp.js">
     <link rel="modulepreload" crossorigin href="./assets/useAsyncData-BPlezez1.js">
     <link rel="modulepreload" crossorigin href="./assets/LazyAnyLanguageCodeMirror-BEdv0N9X.js">
     <link rel="modulepreload" crossorigin href="./assets/micromark-factory-space-BygYYKhs.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-5FQGJX7Z-OcP0iC1i.js">
-    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-B91NzmVT.js">
+    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-B-YFfOW1.js">
     <link rel="modulepreload" crossorigin href="./assets/command-C0h2HiOh.js">
     <link rel="modulepreload" crossorigin href="./assets/popover-AtoFZ7i4.js">
     <link rel="modulepreload" crossorigin href="./assets/errors-DVkmLSXX.js">
-    <link rel="modulepreload" crossorigin href="./assets/download-BFQaUFKI.js">
-    <link rel="modulepreload" crossorigin href="./assets/useRunCells-Du76UV1R.js">
-    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-C5GEp4ca.js">
+    <link rel="modulepreload" crossorigin href="./assets/download-Bpd05cN4.js">
+    <link rel="modulepreload" crossorigin href="./assets/useRunCells-DQQ6CB8T.js">
+    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-CvgwqLt6.js">
     <link rel="modulepreload" crossorigin href="./assets/table-D5iZuBiR.js">
     <link rel="modulepreload" crossorigin href="./assets/useIframeCapabilities-YemHpw31.js">
     <link rel="modulepreload" crossorigin href="./assets/error-banner-B3Vr5jH0.js">
@@ -192,44 +192,44 @@
     <link rel="modulepreload" crossorigin href="./assets/table-qC3alE1r.js">
     <link rel="modulepreload" crossorigin href="./assets/message-circle-ehj_MdGz.js">
     <link rel="modulepreload" crossorigin href="./assets/react-resizable-panels.browser.esm-D0qmuH5W.js">
-    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-Ctdzcd2D.js">
+    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-heEAqE8H.js">
     <link rel="modulepreload" crossorigin href="./assets/chart-no-axes-column-CsXoiEZx.js">
     <link rel="modulepreload" crossorigin href="./assets/square-function-DIHpmVFo.js">
     <link rel="modulepreload" crossorigin href="./assets/spec-CFx2bitO.js">
     <link rel="modulepreload" crossorigin href="./assets/ellipsis-vertical-DEH0lwkn.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-cw-CoFbRtMK.js">
-    <link rel="modulepreload" crossorigin href="./assets/components-DpxyscxU.js">
-    <link rel="modulepreload" crossorigin href="./assets/column-preview-BlmqVfbV.js">
+    <link rel="modulepreload" crossorigin href="./assets/components-CtW4EQ0a.js">
+    <link rel="modulepreload" crossorigin href="./assets/column-preview-D9viH8oS.js">
     <link rel="modulepreload" crossorigin href="./assets/icons-UbXYeuXE.js">
-    <link rel="modulepreload" crossorigin href="./assets/floating-outline-Cfa1ESSb.js">
-    <link rel="modulepreload" crossorigin href="./assets/useAddCell-mJ1PkF-E.js">
+    <link rel="modulepreload" crossorigin href="./assets/floating-outline-CEoUA-ND.js">
+    <link rel="modulepreload" crossorigin href="./assets/useAddCell-TIHLIw_p.js">
     <link rel="modulepreload" crossorigin href="./assets/objectWithoutPropertiesLoose-DaPAPabU.js">
     <link rel="modulepreload" crossorigin href="./assets/esm-BV1ClmM0.js">
     <link rel="modulepreload" crossorigin href="./assets/eye-off-DgRJ-xBZ.js">
     <link rel="modulepreload" crossorigin href="./assets/plus-DWrQrVLZ.js">
-    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-oFCRG7Wt.js">
+    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-BNv35LAm.js">
     <link rel="modulepreload" crossorigin href="./assets/file-headphone-5_PGMxRL.js">
     <link rel="modulepreload" crossorigin href="./assets/file-DaJ4JeZH.js">
     <link rel="modulepreload" crossorigin href="./assets/image-CpSydGUq.js">
-    <link rel="modulepreload" crossorigin href="./assets/file-icons-DSJsG_mI.js">
-    <link rel="modulepreload" crossorigin href="./assets/switch-DqrqDBdD.js">
+    <link rel="modulepreload" crossorigin href="./assets/file-icons-BJUn_Zwi.js">
+    <link rel="modulepreload" crossorigin href="./assets/switch-BOBVe-9H.js">
     <link rel="modulepreload" crossorigin href="./assets/events-BRAWQiYK.js">
-    <link rel="modulepreload" crossorigin href="./assets/globals-DK8gKReW.js">
+    <link rel="modulepreload" crossorigin href="./assets/globals-CinMfY9h.js">
     <link rel="modulepreload" crossorigin href="./assets/share-DkQqqFqC.js">
     <link rel="modulepreload" crossorigin href="./assets/blob-CpeNXBj-.js">
     <link rel="modulepreload" crossorigin href="./assets/memoize-BwAF2XN5.js">
     <link rel="modulepreload" crossorigin href="./assets/get-D7jeR2wg.js">
     <link rel="modulepreload" crossorigin href="./assets/_baseSet-49dbm-yb.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-BpEWsL00.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-Cybx0BE_.js">
     <link rel="modulepreload" crossorigin href="./assets/label-C89F4v17.js">
-    <link rel="modulepreload" crossorigin href="./assets/textarea-DJEKmYtw.js">
+    <link rel="modulepreload" crossorigin href="./assets/textarea-DoPazz3x.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-ccw-DxvV30QW.js">
     <link rel="modulepreload" crossorigin href="./assets/trash-2-CwDX6_Ac.js">
-    <link rel="modulepreload" crossorigin href="./assets/form-DkNMeOSQ.js">
-    <link rel="modulepreload" crossorigin href="./assets/renderShortcut-Bjt8kSBs.js">
+    <link rel="modulepreload" crossorigin href="./assets/form-yizCLBQu.js">
+    <link rel="modulepreload" crossorigin href="./assets/renderShortcut-9B7Z8taX.js">
     <link rel="modulepreload" crossorigin href="./assets/field-C6i22m8B.js">
     <link rel="modulepreload" crossorigin href="./assets/VisuallyHidden-DVY6OceZ.js">
-    <link rel="modulepreload" crossorigin href="./assets/useBoolean-DN8PHql0.js">
+    <link rel="modulepreload" crossorigin href="./assets/useBoolean-Dvk5-C1P.js">
     <link rel="modulepreload" crossorigin href="./assets/useDeepCompareMemoize-Bj2wGMJg.js">
     <link rel="modulepreload" crossorigin href="./assets/types-BUmn6Kar.js">
     <link rel="modulepreload" crossorigin href="./assets/fileToBase64-D7Ur9Qxq.js">
@@ -245,7 +245,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-BkdonYlq.css">
+    <link rel="stylesheet" crossorigin href="./assets/index-BNN_F0CC.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

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

package/src/components/editor/TracebackModalContainer.tsx

@@ -0,0 +1,22 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import React from "react";
+import { useAtom } from "jotai";
+import { tracebackModalAtom } from "@/core/errors/traceback-atom";
+import { TracebackModal } from "./errors/traceback-modal";
+
+export const TracebackModalContainer: React.FC = () => {
+  const [tracebackData, setTracebackData] = useAtom(tracebackModalAtom);
+
+  if (!tracebackData) {
+    return null;
+  }
+
+  return (
+    <TracebackModal
+      isOpen={true}
+      onClose={() => setTracebackData(null)}
+      traceback={tracebackData.traceback}
+      errorMessage={tracebackData.errorMessage}
+    />
+  );
+};

package/src/components/editor/errors/traceback-modal.tsx

@@ -0,0 +1,87 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import React from "react";
+import { Button } from "@/components/ui/button";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { CopyIcon } from "lucide-react";
+import { toast } from "@/components/ui/use-toast";
+
+interface TracebackModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  traceback: string;
+  errorMessage: string;
+}
+
+export const TracebackModal: React.FC<TracebackModalProps> = ({
+  isOpen,
+  onClose,
+  traceback,
+  errorMessage,
+}) => {
+  const handleCopy = async () => {
+    // Strip HTML tags for clipboard
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = traceback;
+    const textContent = tempDiv.textContent || tempDiv.innerText || "";
+
+    try {
+      await navigator.clipboard.writeText(textContent);
+      toast({
+        title: "Copied to clipboard",
+        description: "Traceback has been copied to your clipboard.",
+      });
+    } catch {
+      toast({
+        title: "Failed to copy",
+        description: "Could not copy to clipboard.",
+        variant: "danger",
+      });
+    }
+  };
+
+  return (
+    <AlertDialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <AlertDialogContent className="max-w-4xl max-h-[80vh]">
+        <AlertDialogHeader>
+          <AlertDialogTitle className="text-destructive">
+            {errorMessage}
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            Click the traceback to select and copy.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <div className="my-4 overflow-auto">
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-sm font-medium text-muted-foreground">
+              Traceback
+            </span>
+            <Button
+              variant="outline"
+              size="xs"
+              onClick={handleCopy}
+              className="flex items-center gap-1"
+            >
+              <CopyIcon className="h-3 w-3" />
+              Copy
+            </Button>
+          </div>
+          <div
+            className="font-code text-sm p-4 bg-muted rounded border overflow-auto max-h-[50vh] cursor-text select-text"
+            dangerouslySetInnerHTML={{ __html: traceback }}
+          />
+        </div>
+        <AlertDialogFooter>
+          <AlertDialogAction onClick={onClose}>Close</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};

package/src/components/editor/output/MarimoErrorOutput.tsx

@@ -477,6 +477,7 @@ export const MarimoErrorOutput = ({
               );
             }
 
+            // All other exceptions
             return (
               <li className="my-2" key={`exception-${idx}`}>
                 {error.raising_cell == null ? (
@@ -484,14 +485,33 @@ export const MarimoErrorOutput = ({
                     <p className="text-muted-foreground">
                       {processTextForUrls(error.msg, `exception-${idx}`)}
                     </p>
-                    <div className="text-muted-foreground mt-2">
-                      See the console area for a traceback.
-                    </div>
+                    {"traceback" in error && error.traceback ? (
+                      <div
+                        className="font-code text-sm mt-2 p-3 bg-muted rounded border overflow-auto max-h-[50vh] cursor-text select-text"
+                        // biome-ignore lint/security/noDangerouslySetInnerHtml: traceback from backend
+                        dangerouslySetInnerHTML={{
+                          __html: error.traceback,
+                        }}
+                      />
+                    ) : (
+                      <div className="text-muted-foreground mt-2">
+                        See the console area for a traceback.
+                      </div>
+                    )}
                   </div>
                 ) : (
                   <div>
                     {processTextForUrls(error.msg, `exception-${idx}`)}
                     <CellLinkError cellId={error.raising_cell} />
+                    {"traceback" in error && error.traceback && (
+                      <div
+                        className="font-code text-sm mt-2 p-3 bg-muted rounded border overflow-auto max-h-[50vh] cursor-text select-text"
+                        // biome-ignore lint/security/noDangerouslySetInnerHtml: traceback from backend
+                        dangerouslySetInnerHTML={{
+                          __html: error.traceback,
+                        }}
+                      />
+                    )}
                   </div>
                 )}
               </li>

package/src/components/editor/renderers/vertical-layout/vertical-layout.tsx

@@ -32,7 +32,7 @@ import type { CellData, CellRuntimeState } from "@/core/cells/types";
 import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
 import { useResolvedMarimoConfig } from "@/core/config/config";
 import { CSSClasses, KnownQueryParams } from "@/core/constants";
-import type { OutputMessage } from "@/core/kernel/messages";
+import type { MarimoError, OutputMessage } from "@/core/kernel/messages";
 import { kernelStateAtom } from "@/core/kernel/state";
 import { showCodeInRunModeAtom } from "@/core/meta/state";
 import { isErrorMime } from "@/core/mime";
@@ -121,6 +121,7 @@ const VerticalLayoutRenderer: React.FC<VerticalLayoutProps> = ({
         staleInputs={cell.staleInputs}
         name={cell.name}
         kiosk={kioskMode}
+        showErrorTracebacks={userConfig.runtime.show_tracebacks ?? false}
       />
     );
   };
@@ -330,6 +331,7 @@ interface VerticalCellProps extends Pick<
   showCode: boolean;
   name: string;
   kiosk: boolean;
+  showErrorTracebacks: boolean;
 }
 
 const VerticalCell = memo(
@@ -350,6 +352,7 @@ const VerticalCell = memo(
     mode,
     name,
     kiosk,
+    showErrorTracebacks,
   }: VerticalCellProps) => {
     const cellRef = useRef<HTMLDivElement>(null);
 
@@ -427,7 +430,18 @@ const VerticalCell = memo(
     }
 
     const outputIsError = isErrorMime(output?.mimetype);
-    const hidden = errored || interrupted || stopped || outputIsError;
+    // When show_tracebacks is enabled, show error outputs inline
+    // instead of hiding them
+    const hasTraceback =
+      showErrorTracebacks &&
+      outputIsError &&
+      Array.isArray(output?.data) &&
+      output.data.some(
+        (e: MarimoError) =>
+          e.type === "exception" && "traceback" in e && e.traceback,
+      );
+    const hidden =
+      (errored || interrupted || stopped || outputIsError) && !hasTraceback;
     if (hidden) {
       return null;
     }

package/src/components/ui/toast.tsx

@@ -118,7 +118,9 @@ ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
 type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
 
-type ToastActionElement = React.ReactElement<typeof ToastAction>;
+type ToastActionElement = React.ReactElement<
+  React.ComponentProps<typeof ToastAction>
+>;
 
 export {
   type ToastProps,

package/src/core/MarimoApp.tsx

@@ -13,6 +13,7 @@ import { CssVariables } from "@/theme/ThemeProvider";
 import { reactLazyWithPreload } from "@/utils/lazy";
 import { ErrorBoundary } from "../components/editor/boundary/ErrorBoundary";
 import { KernelStartupErrorModal } from "../components/editor/KernelStartupErrorModal";
+import { TracebackModalContainer } from "../components/editor/TracebackModalContainer";
 import { ModalProvider } from "../components/modal/ImperativeModal";
 import { Toaster } from "../components/ui/toaster";
 import { TooltipProvider } from "../components/ui/tooltip";
@@ -105,6 +106,7 @@ const Providers = memo(({ children }: PropsWithChildren) => {
                 <Toaster />
                 <TailwindIndicator />
                 <KernelStartupErrorModal />
+                <TracebackModalContainer />
               </ModalProvider>
             </LocaleProvider>
           </SlotzProvider>

package/src/core/cells/__tests__/apply-transaction.test.ts

@@ -267,6 +267,34 @@ describe("applyTransactionChanges edge cases", () => {
     `);
   });
 
+  it("delete-cell for nonexistent cell does not crash subsequent changes", () => {
+    setup("a", "b", "c");
+    const [, b] = state.cellIds.inOrderIds;
+    // Simulate the scenario from the bug report: a delete-cell for a cell ID
+    // that was never added to the frontend, followed by a create-cell and
+    // a set-code update.  The delete should be silently skipped, and the rest
+    // of the transaction should still apply.
+    apply([
+      { type: "delete-cell", cellId: cellId("nonexistent") },
+      {
+        type: "create-cell",
+        cellId: cellId("VrZA"),
+        code: "import altair as alt",
+        name: "",
+        config: { hide_code: true },
+      },
+      { type: "set-code", cellId: b, code: "updated" },
+    ]);
+    expect(pretty(state)).toMatchInlineSnapshot(`
+      "
+      0: 'a'
+      1: 'updated'
+      2: 'c'
+      VrZA: 'import altair as alt' [hide_code]
+      "
+    `);
+  });
+
   it("empty changes is a no-op", () => {
     setup("a", "b");
     apply([]);

package/src/core/cells/cells.ts

@@ -6,6 +6,7 @@ import { type Atom, atom, useAtom, useAtomValue } from "jotai";
 import { atomFamily, selectAtom, splitAtom } from "jotai/utils";
 import { createRef, type ReducerWithoutAction } from "react";
 import type { CellHandle } from "@/components/editor/notebook-cell";
+import type { CollapsibleTree } from "@/utils/id-tree";
 import {
   type CellColumnId,
   type CellIndex,
@@ -578,7 +579,18 @@ const {
       return state;
     }
 
-    const column = state.cellIds.findWithId(cellId);
+    let column: CollapsibleTree<CellId>;
+    try {
+      column = state.cellIds.findWithId(cellId);
+    } catch (error) {
+      // Expected for kernel-only cells or out-of-order transactions.
+      Logger.warn("Skipping delete for missing cellId", {
+        cellId,
+        error,
+      });
+      return state;
+    }
+
     const cellIndex = column.indexOfOrThrow(cellId);
     const focusIndex = cellIndex === 0 ? 1 : cellIndex - 1;
     let scrollKey: CellId | null = null;

package/src/core/cells/logs.ts

@@ -7,6 +7,10 @@ import { Strings } from "@/utils/strings";
 import type { CellMessage, OutputMessage } from "../kernel/messages";
 import { isErrorMime } from "../mime";
 import type { CellId } from "./ids";
+import { store } from "../state/jotai";
+import { tracebackModalAtom } from "../errors/traceback-atom";
+import React from "react";
+import { ToastAction } from "@/components/ui/toast";
 
 export interface CellLog {
   timestamp: number;
@@ -72,17 +76,52 @@ export function getCellLogsForMessage(cell: CellMessage): CellLog[] {
       });
     });
 
-    const shouldToast = cell.output.data.some(
-      (error) => error.type === "internal",
+    // Find exception errors and check for traceback
+    const exceptionErrors = cell.output.data.filter(
+      (error) =>
+        ("type" in error && error.type === "exception") ||
+        error.type === "internal",
     );
-    if (!didAlreadyToastError && shouldToast) {
+
+    if (exceptionErrors.length > 0 && !didAlreadyToastError) {
       didAlreadyToastError = true;
-      toast({
-        title: "An internal error occurred",
-        description: "See console for details.",
-        className:
-          "text-xs text-background bg-(--red-10) py-2 pl-3 *:flex *:gap-3",
-      });
+
+      // Find first error with a traceback
+      const errorWithTraceback = exceptionErrors.find(
+        (error) => error.traceback,
+      );
+
+      if (errorWithTraceback) {
+        // Show toast with action button to open modal
+        const handleClick = () => {
+          store.set(tracebackModalAtom, {
+            traceback: errorWithTraceback.traceback,
+            errorMessage:
+              errorWithTraceback.msg || "An internal error occurred",
+          });
+        };
+
+        toast({
+          title: "An internal error occurred",
+          description:
+            errorWithTraceback.msg || "Click 'View' to see traceback",
+          variant: "danger",
+          action: React.createElement(
+            ToastAction,
+            {
+              altText: "View traceback",
+              onClick: handleClick,
+            },
+            "View",
+          ),
+        });
+      } else {
+        toast({
+          title: "An internal error occurred",
+          description: "See console for details.",
+          variant: "danger",
+        });
+      }
     }
   }
 

package/src/core/config/__tests__/config-schema.test.ts

@@ -90,6 +90,7 @@ test("default UserConfig - empty", () => {
         "default_sql_output": "auto",
         "on_cell_change": "autorun",
         "reactive_tests": true,
+        "show_tracebacks": false,
         "watcher_on_save": "lazy",
       },
       "save": {
@@ -160,6 +161,7 @@ test("default UserConfig - one level", () => {
         "default_sql_output": "auto",
         "on_cell_change": "autorun",
         "reactive_tests": true,
+        "show_tracebacks": false,
         "watcher_on_save": "lazy",
       },
       "save": {

package/src/core/config/config-schema.ts

@@ -126,6 +126,7 @@ export const UserConfigSchema = z
         default_auto_download: z
           .array(z.enum(AUTO_DOWNLOAD_FORMATS))
           .prefault([]),
+        show_tracebacks: z.boolean().prefault(false),
       })
       .prefault({}),
     display: z