@marimo-team/frontend 0.18.5-dev198 → 0.18.5-dev200

package/dist/assets/kiosk-mode-lhqhA8En.js

@@ -0,0 +1 @@
+import{s}from"./chunk-LvLJmgfZ.js";import{u as e}from"./useEvent-DlWF5OMa.js";import{t as l}from"./react-BGmjiNul.js";import{t as u}from"./invariant-C6yE60hi.js";import{r as n}from"./mode-BOijHAOc.js";var o=s(l(),1),a=(0,o.createContext)(null);const c=a.Provider;function i(){let r=(0,o.useContext)(a);return u(r!==null,"usePanelSection must be used within a PanelSectionProvider"),r}function m(){return i()==="sidebar"?"vertical":"horizontal"}const d=r=>{let{children:t}=r;return e(n)?null:t},f=r=>{let{children:t}=r;return e(n)?t:null};export{i as a,m as i,f as n,c as r,d as t};

package/dist/assets/scratchpad-panel-DWsu0wnU.js

@@ -0,0 +1 @@
+import{s as oe}from"./chunk-LvLJmgfZ.js";import{d as be,l as ye,n as V,p as ae,u as we}from"./useEvent-DlWF5OMa.js";import{t as Ne}from"./react-BGmjiNul.js";import{C as ke,Kr as ze,M as Ce,ei as Se,fn as Oe,ti as n,__tla as Ae}from"./cells-Dk_j8HX9.js";import"./react-dom-C9fstfnp.js";import{t as se}from"./compiler-runtime-DeeZ7FnK.js";import"./tooltip-CrRUCOBw.js";import{f as ie}from"./hotkeys-uKX61F1_.js";import{v as Ie}from"./utils-CJJIceVn.js";import{t as Me}from"./constants-Bkp4R3bQ.js";import"./config-babG4OBR.js";import{t as Le}from"./jsx-runtime-DN_bIXfG.js";import{t as z}from"./button-DuYGqRtX.js";import{t as le}from"./cn-C1rgT0yh.js";import"./dist-CAcX026F.js";import{n as Pe,__tla as Ee}from"./JsonOutput-BCHaEg3R.js";import"./cjs-Bj40p_Np.js";import"./main-CwSdzVhm.js";import"./useNonce-EAuSVK-5.js";import{r as Re}from"./requests-C0HaHO6a.js";import{t as me}from"./createLucideIcon-CW2xpJ57.js";import{d as De,__tla as He}from"./layout-DenYhPfS.js";import{n as Ve,t as qe,__tla as Te}from"./LazyAnyLanguageCodeMirror-jpEDlD0M.js";import"./download-Dsuja3On.js";import"./markdown-renderer-COkLQ1b5.js";import{u as Ge}from"./toDate-5JckKRQn.js";import{t as Ke,__tla as Ue}from"./cell-editor-B-NH54Cv.js";import{t as Be}from"./play-BJDBXApx.js";import{t as Fe}from"./spinner-C1czjtp7.js";import"./dist-HGZzCB0y.js";import"./dist-CVj-_Iiz.js";import"./dist-BVf1IY4_.js";import"./dist-Cq_4nPfh.js";import"./dist-RKnr9SNh.js";import{r as Je}from"./useTheme-DfP1CWaW.js";import"./Combination-D1TsGrBC.js";import{t as C}from"./tooltip-CvjcEpZC.js";import"./dates-CdsE1R40.js";import"./popover-DtnzNVk-.js";import"./vega-loader.browser-C8wT63Va.js";import"./defaultLocale-BLUna9fQ.js";import"./defaultLocale-DzliDDTm.js";import"./purify.es-N-2faAGj.js";import{__tla as Qe}from"./chunk-OGVTOU66-CjNLT2C3.js";import"./katex-AwOI3EvM.js";import"./marked.esm-CHnOtnr3.js";import"./es-DjCjT1hB.js";import{o as We}from"./focus-U1ePwk4d.js";import{a as Xe}from"./renderShortcut-D0Pei-OA.js";import"./esm-B3JckBtM.js";import{n as Ye,r as Ze,t as ne}from"./react-resizable-panels.browser.esm-BqxQegSf.js";import"./name-cell-input-Cf2CUXDm.js";import"./Inputs-DmoeP8nh.js";import{__tla as $e}from"./loro_wasm_bg-CghhyG7y.js";import"./ws-itdlXHqs.js";import"./dist-BRZzJw_5.js";import"./dist-P7JHert4.js";import"./dist-CoiWxjLF.js";import"./dist-cVYW_wBR.js";import"./dist-BAmo7Mv9.js";import"./dist-3oAtECdQ.js";import"./dist-D6Pwf0VF.js";import"./dist-D9HMoxdZ.js";import"./dist-JtCdI6tY.js";import"./esm-CCqLcax5.js";import{a as et,i as tt,t as rt}from"./kiosk-mode-lhqhA8En.js";let ce,ot=Promise.all([(()=>{try{return Ae}catch{}})(),(()=>{try{return Ee}catch{}})(),(()=>{try{return He}catch{}})(),(()=>{try{return Te}catch{}})(),(()=>{try{return Ue}catch{}})(),(()=>{try{return Qe}catch{}})(),(()=>{try{return $e}catch{}})()]).then(async()=>{var de=me("eraser",[["path",{d:"M21 21H8a2 2 0 0 1-1.42-.587l-3.994-3.999a2 2 0 0 1 0-2.828l10-10a2 2 0 0 1 2.829 0l5.999 6a2 2 0 0 1 0 2.828L12.834 21",key:"g5wo59"}],["path",{d:"m5.082 11.09 8.828 8.828",key:"1wx5vj"}]]),pe=me("history",[["path",{d:"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",key:"1357e3"}],["path",{d:"M3 3v5h5",key:"1xhq8a"}],["path",{d:"M12 7v5l4 2",key:"1fdv2h"}]]),he=se(),q=oe(Ne(),1),fe=15;const T=ze("marimo:scratchpadHistory:v1",[],Oe),ue=ae(!1),xe=ae(null,(e,s,i)=>{if(i=i.trim(),!i)return;let m=e(T);s(T,[i,...m.filter(c=>c!==i)].slice(0,fe))});var t=oe(Le(),1),_e={hide_code:!1,disabled:!1};const ve=()=>{var re;let e=(0,he.c)(60),s=Ce(),[i]=Ie(),{theme:m}=Je(),c=(0,q.useRef)(null),G=We(),{createNewCell:K,updateCellCode:d}=ke(),{sendRunScratchpad:p}=Re(),S=tt(),U=et(),l=s.cellRuntime[n],B=l==null?void 0:l.output,O=l==null?void 0:l.status,F=l==null?void 0:l.consoleOutputs,r=((re=s.cellData.__scratch__)==null?void 0:re.code)??"",J=be(xe),[a,h]=ye(ue),f=we(T),A;e[0]!==J||e[1]!==r||e[2]!==p?(A=()=>{p({code:r}),J(r)},e[0]=J,e[1]=r,e[2]=p,e[3]=A):A=e[3];let u=V(A),I;e[4]!==r||e[5]!==K||e[6]!==G?(I=()=>{r.trim()&&K({code:r,before:!1,cellId:G??"__end__"})},e[4]=r,e[5]=K,e[6]=G,e[7]=I):I=e[7];let Q=V(I),M;e[8]!==p||e[9]!==d?(M=()=>{d({cellId:n,code:"",formattingChange:!1}),p({code:""});let o=c.current;o&&o.dispatch({changes:{from:0,to:o.state.doc.length,insert:""}})},e[8]=p,e[9]=d,e[10]=M):M=e[10];let W=V(M),L;e[11]!==h||e[12]!==d?(L=o=>{h(!1),d({cellId:n,code:o,formattingChange:!1});let k=c.current;k&&k.dispatch({changes:{from:0,to:k.state.doc.length,insert:o}})},e[11]=h,e[12]=d,e[13]=L):L=e[13];let X=V(L),[Y,ge]=(0,q.useState)(),P;e[14]!==X||e[15]!==f||e[16]!==a||e[17]!==m?(P=()=>a?(0,t.jsx)("div",{className:"absolute inset-0 z-100 bg-background p-3 border-none overflow-auto",children:(0,t.jsx)("div",{className:"overflow-auto flex flex-col gap-3",children:f.map((o,k)=>(0,t.jsx)("div",{className:"border rounded-md hover:shadow-sm cursor-pointer hover:border-input overflow-hidden",onClick:()=>X(o),children:(0,t.jsx)(q.Suspense,{children:(0,t.jsx)(qe,{language:"python",theme:m,basicSetup:{highlightActiveLine:!1,highlightActiveLineGutter:!1},value:o.trim(),editable:!1,readOnly:!0})})},k))})}):null,e[14]=X,e[15]=f,e[16]=a,e[17]=m,e[18]=P):P=e[18];let Z=P,E;e[19]!==W||e[20]!==Q||e[21]!==u||e[22]!==f.length||e[23]!==a||e[24]!==h||e[25]!==O?(E=()=>(0,t.jsxs)("div",{className:"flex items-center shrink-0 border-b",children:[(0,t.jsx)(C,{content:Xe("cell.run"),children:(0,t.jsx)(z,{"data-testid":"scratchpad-run-button",onClick:u,disabled:a,variant:"text",size:"xs",children:(0,t.jsx)(Be,{color:"var(--grass-11)",size:16})})}),(0,t.jsx)(C,{content:"Clear code and outputs",children:(0,t.jsx)(z,{disabled:a,size:"xs",variant:"text",onClick:W,children:(0,t.jsx)(de,{size:16})})}),(0,t.jsx)(rt,{children:(0,t.jsx)(C,{content:"Insert code",children:(0,t.jsx)(z,{disabled:a,size:"xs",variant:"text",onClick:Q,children:(0,t.jsx)(Ve,{size:16})})})}),(O==="running"||O==="queued")&&(0,t.jsx)(Fe,{className:"inline",size:"small"}),(0,t.jsx)("div",{className:"flex-1"}),(0,t.jsx)(C,{content:"Toggle history",children:(0,t.jsx)(z,{size:"xs",variant:"text",className:le(a&&"bg-(--sky-3) rounded-none"),onClick:()=>h(!a),disabled:f.length===0,children:(0,t.jsx)(pe,{size:16})})}),(0,t.jsx)(C,{content:(0,t.jsx)("span",{className:"block max-w-prose",children:"Use this scratchpad to experiment with code without restrictions on variable names. Variables defined here aren't saved to notebook memory, and the code is not saved in the notebook file."}),children:(0,t.jsx)(z,{size:"xs",variant:"text",children:(0,t.jsx)(Ge,{size:16})})})]}),e[19]=W,e[20]=Q,e[21]=u,e[22]=f.length,e[23]=a,e[24]=h,e[25]=O,e[26]=E):E=e[26];let $=E,je=S==="vertical",R;e[27]===Symbol.for("react.memo_cache_sentinel")?(R=Se.create(n),e[27]=R):R=e[27];let x;e[28]===$?x=e[29]:(x=$(),e[28]=$,e[29]=x);let D;e[30]===Symbol.for("react.memo_cache_sentinel")?(D=o=>{c.current=o},e[30]=D):D=e[30];let _;e[31]!==r||e[32]!==u||e[33]!==Y||e[34]!==m||e[35]!==i?(_=(0,t.jsx)("div",{className:"flex-1 overflow-auto",children:(0,t.jsx)(Ke,{theme:m,showPlaceholder:!1,id:n,code:r,config:_e,status:"idle",serializedEditorState:null,runCell:u,userConfig:i,editorViewRef:c,setEditorView:D,hidden:!1,showHiddenCode:ie.NOOP,languageAdapter:Y,setLanguageAdapter:ge})}),e[31]=r,e[32]=u,e[33]=Y,e[34]=m,e[35]=i,e[36]=_):_=e[36];let v;e[37]===Z?v=e[38]:(v=Z(),e[37]=Z,e[38]=v);let g;e[39]!==v||e[40]!==x||e[41]!==_?(g=(0,t.jsx)(ne,{defaultSize:40,minSize:20,maxSize:70,children:(0,t.jsxs)("div",{className:"h-full flex flex-col overflow-hidden relative",children:[x,_,v]})}),e[39]=v,e[40]=x,e[41]=_,e[42]=g):g=e[42];let ee=je?"h-1":"w-1",j;e[43]===ee?j=e[44]:(j=le("bg-border hover:bg-primary/50 transition-colors",ee),e[43]=ee,e[44]=j);let b;e[45]===j?b=e[46]:(b=(0,t.jsx)(Ze,{className:j}),e[45]=j,e[46]=b);let y;e[47]===B?y=e[48]:(y=(0,t.jsx)("div",{className:"flex-1 overflow-auto",children:(0,t.jsx)(Pe,{allowExpand:!1,output:B,className:Me.outputArea,cellId:n,stale:!1,loading:!1})}),e[47]=B,e[48]=y);let w;e[49]===F?w=e[50]:(w=(0,t.jsx)("div",{className:"overflow-auto shrink-0 max-h-[50%]",children:(0,t.jsx)(De,{consoleOutputs:F,className:"overflow-auto",stale:!1,cellName:"_",onSubmitDebugger:ie.NOOP,cellId:n,debuggerActive:!1})}),e[49]=F,e[50]=w);let N;e[51]!==y||e[52]!==w?(N=(0,t.jsx)(ne,{defaultSize:60,minSize:20,children:(0,t.jsxs)("div",{className:"h-full flex flex-col divide-y overflow-hidden",children:[y,w]})}),e[51]=y,e[52]=w,e[53]=N):N=e[53];let H;return e[54]!==S||e[55]!==U||e[56]!==g||e[57]!==b||e[58]!==N?(H=(0,t.jsx)("div",{className:"flex flex-col h-full overflow-hidden",id:R,children:(0,t.jsxs)(Ye,{direction:S,className:"h-full",children:[g,b,N]},U)}),e[54]=S,e[55]=U,e[56]=g,e[57]=b,e[58]=N,e[59]=H):H=e[59],H};let te;te=se(),ce=()=>{let e=(0,te.c)(1),s;return e[0]===Symbol.for("react.memo_cache_sentinel")?(s=(0,t.jsx)(ve,{}),e[0]=s):s=e[0],s}});export{ot as __tla,ce as default};

package/dist/assets/snippets-panel-Dv7eGWsB.js

@@ -0,0 +1 @@
+import{s as I}from"./chunk-LvLJmgfZ.js";import"./useEvent-DlWF5OMa.js";import{t as P}from"./react-BGmjiNul.js";import{C as q}from"./cells-Dk_j8HX9.js";import"./react-dom-C9fstfnp.js";import{t as $}from"./compiler-runtime-DeeZ7FnK.js";import{n as D}from"./constants-Bkp4R3bQ.js";import"./config-babG4OBR.js";import{t as F}from"./jsx-runtime-DN_bIXfG.js";import{i as G,t as y}from"./button-DuYGqRtX.js";import{t as T}from"./cn-C1rgT0yh.js";import{at as W}from"./dist-CAcX026F.js";import"./cjs-Bj40p_Np.js";import"./main-CwSdzVhm.js";import"./useNonce-EAuSVK-5.js";import{r as A}from"./requests-C0HaHO6a.js";import{n as M,t as B}from"./LazyAnyLanguageCodeMirror-jpEDlD0M.js";import{h as J}from"./select-D0g5GnIs.js";import{t as K}from"./spinner-C1czjtp7.js";import{t as L}from"./plus-CHesBJpY.js";import"./dist-HGZzCB0y.js";import"./dist-CVj-_Iiz.js";import"./dist-BVf1IY4_.js";import"./dist-Cq_4nPfh.js";import"./dist-RKnr9SNh.js";import{r as R}from"./useTheme-DfP1CWaW.js";import"./Combination-D1TsGrBC.js";import{t as U}from"./tooltip-CvjcEpZC.js";import{a as V,c as Y,i as Q,n as X,r as Z}from"./dialog-DUEuLcT2.js";import{n as ee}from"./ImperativeModal-q6QlC2aZ.js";import{n as te}from"./error-banner-DU5Qb8a8.js";import{t as se}from"./RenderHTML-BUhX0rkG.js";import"./purify.es-N-2faAGj.js";import{n as re}from"./useAsyncData-BJJJOr9W.js";import{a as le,o as oe,r as ie,t as ae,u as ne}from"./command-gUA-HncX.js";import{o as me}from"./focus-U1ePwk4d.js";import{n as ce,r as de,t as E}from"./react-resizable-panels.browser.esm-BqxQegSf.js";import{t as pe}from"./empty-state-B0XJ9ZUi.js";import{a as he,i as fe,t as H}from"./kiosk-mode-lhqhA8En.js";var O=$(),C=I(P(),1),s=I(F(),1);const xe=t=>{let e=(0,O.c)(6),{children:r}=t,{openModal:i,closeModal:o}=ee(),l;e[0]!==o||e[1]!==i?(l=()=>i((0,s.jsx)(ue,{onClose:o})),e[0]=o,e[1]=i,e[2]=l):l=e[2];let a;return e[3]!==r||e[4]!==l?(a=(0,s.jsx)(G,{onClick:l,children:r}),e[3]=r,e[4]=l,e[5]=a):a=e[5],a};var ue=t=>{let e=(0,O.c)(4),{onClose:r}=t,i;e[0]===Symbol.for("react.memo_cache_sentinel")?(i=(0,s.jsx)(Y,{children:"Contribute a Snippet"}),e[0]=i):i=e[0];let o;e[1]===Symbol.for("react.memo_cache_sentinel")?(o=(0,s.jsxs)(V,{children:[i,(0,s.jsxs)(Z,{children:["Have a useful snippet you want to share with the community? Make a pull request"," ",(0,s.jsx)("a",{href:D.githubPage,target:"_blank",className:"underline",children:"on GitHub"}),"."]})]}),e[1]=o):o=e[1];let l;return e[2]===r?l=e[3]:(l=(0,s.jsxs)(X,{className:"max-w-md",children:[o,(0,s.jsx)(Q,{children:(0,s.jsx)(y,{"data-testid":"snippet-close-button",variant:"default",onClick:r,children:"Close"})})]}),e[2]=r,e[3]=l),l},k=$(),je=[W.lineWrapping],ve=()=>{let t=(0,k.c)(24),{readSnippets:e}=A(),[r,i]=C.useState(),o=fe(),l=he(),a;t[0]===e?a=t[1]:(a=()=>e(),t[0]=e,t[1]=a);let c;t[2]===Symbol.for("react.memo_cache_sentinel")?(c=[],t[2]=c):c=t[2];let{data:N,error:j,isPending:g}=re(a,c);if(j){let m;return t[3]===j?m=t[4]:(m=(0,s.jsx)(te,{error:j}),t[3]=j,t[4]=m),m}if(g||!N){let m;return t[5]===Symbol.for("react.memo_cache_sentinel")?(m=(0,s.jsx)(K,{size:"medium",centered:!0}),t[5]=m):m=t[5],m}let _=o==="vertical",v;t[6]===Symbol.for("react.memo_cache_sentinel")?(v=(0,s.jsx)(le,{placeholder:"Search snippets...",className:"h-6 m-1",rootClassName:"flex-1 border-r"}),t[6]=v):v=t[6];let h,f;t[7]===Symbol.for("react.memo_cache_sentinel")?(h=(0,s.jsxs)("div",{className:"flex items-center w-full border-b",children:[v,(0,s.jsx)(xe,{children:(0,s.jsx)("button",{className:"float-right px-2 m-0 h-full hover:bg-accent hover:text-accent-foreground",children:(0,s.jsx)(L,{className:"h-4 w-4"})})})]}),f=(0,s.jsx)(ie,{children:"No results"}),t[7]=h,t[8]=f):(h=t[7],f=t[8]);let b;t[9]===Symbol.for("react.memo_cache_sentinel")?(b=m=>i(m),t[9]=b):b=t[9];let d;t[10]===N.snippets?d=t[11]:(d=(0,s.jsx)(E,{defaultSize:40,minSize:20,maxSize:70,children:(0,s.jsxs)(ae,{className:"h-full rounded-none",children:[h,f,(0,s.jsx)(Ne,{onSelect:b,snippets:N.snippets})]})}),t[10]=N.snippets,t[11]=d);let u=_?"h-1":"w-1",p;t[12]===u?p=t[13]:(p=T("bg-border hover:bg-primary/50 transition-colors",u),t[12]=u,t[13]=p);let x;t[14]===p?x=t[15]:(x=(0,s.jsx)(de,{className:p}),t[14]=p,t[15]=x);let n;t[16]===r?n=t[17]:(n=(0,s.jsx)(E,{defaultSize:60,minSize:20,children:(0,s.jsx)(C.Suspense,{children:(0,s.jsx)("div",{className:"h-full snippet-viewer flex flex-col overflow-hidden",children:r?(0,s.jsx)(be,{snippet:r,onClose:()=>i(void 0)},r.title):(0,s.jsx)(pe,{title:"",description:"Click on a snippet to view its content."})})})}),t[16]=r,t[17]=n);let S;return t[18]!==o||t[19]!==l||t[20]!==n||t[21]!==d||t[22]!==x?(S=(0,s.jsx)("div",{className:"flex-1 overflow-hidden h-full",children:(0,s.jsxs)(ce,{direction:o,className:"h-full",children:[d,x,n]},l)}),t[18]=o,t[19]=l,t[20]=n,t[21]=d,t[22]=x,t[23]=S):S=t[23],S},be=t=>{let e=(0,k.c)(33),{snippet:r,onClose:i}=t,{theme:o}=R(),{createNewCell:l}=q(),a=me(),c;e[0]!==l||e[1]!==a||e[2]!==r.sections?(c=()=>{for(let n of[...r.sections].reverse())n.code&&l({code:n.code,before:!1,cellId:a??"__end__",skipIfCodeExists:!0})},e[0]=l,e[1]=a,e[2]=r.sections,e[3]=c):c=e[3];let N=c,j;e[4]!==l||e[5]!==a?(j=n=>{l({code:n,before:!1,cellId:a??"__end__"})},e[4]=l,e[5]=a,e[6]=j):j=e[6];let g=j,_;e[7]===r.title?_=e[8]:(_=(0,s.jsx)("span",{children:r.title}),e[7]=r.title,e[8]=_);let v;e[9]===Symbol.for("react.memo_cache_sentinel")?(v=(0,s.jsx)(J,{className:"h-4 w-4"}),e[9]=v):v=e[9];let h;e[10]===i?h=e[11]:(h=(0,s.jsx)(y,{size:"sm",variant:"ghost",onClick:i,className:"h-6 w-6 p-0 hover:bg-muted-foreground/10",children:v}),e[10]=i,e[11]=h);let f;e[12]!==_||e[13]!==h?(f=(0,s.jsxs)("div",{className:"text-sm font-semibold bg-muted border-y px-2 py-1 flex justify-between items-center",children:[_,h]}),e[12]=_,e[13]=h,e[14]=f):f=e[14];let b;e[15]===Symbol.for("react.memo_cache_sentinel")?(b=(0,s.jsx)(M,{className:"ml-2 h-4 w-4"}),e[15]=b):b=e[15];let d;e[16]===N?d=e[17]:(d=(0,s.jsx)("div",{className:"flex justify-end",children:(0,s.jsx)(H,{children:(0,s.jsxs)(y,{className:"float-right",size:"xs",variant:"outline",onClick:N,children:["Insert snippet",b]})})}),e[16]=N,e[17]=d);let u;if(e[18]!==g||e[19]!==r.sections||e[20]!==r.title||e[21]!==o){let n;e[23]!==g||e[24]!==r.title||e[25]!==o?(n=S=>{let{code:m,html:z,id:w}=S;return z?(0,s.jsx)("div",{children:se({html:z})},`${r.title}-${w}`):m?(0,s.jsxs)("div",{className:"relative hover-actions-parent pr-2",children:[(0,s.jsx)(H,{children:(0,s.jsx)(U,{content:"Insert snippet",children:(0,s.jsx)(y,{className:"absolute -top-2 -right-1 z-10 hover-action px-2 bg-background",size:"sm",variant:"outline",onClick:()=>{g(m)},children:(0,s.jsx)(M,{className:"h-5 w-5"})})})}),(0,s.jsx)(C.Suspense,{children:(0,s.jsx)(B,{theme:o==="dark"?"dark":"light",language:"python",className:"cm border rounded overflow-hidden",extensions:je,value:m,readOnly:!0},`${r.title}-${w}`)})]},`${r.title}-${w}`):null},e[23]=g,e[24]=r.title,e[25]=o,e[26]=n):n=e[26],u=r.sections.map(n),e[18]=g,e[19]=r.sections,e[20]=r.title,e[21]=o,e[22]=u}else u=e[22];let p;e[27]!==d||e[28]!==u?(p=(0,s.jsxs)("div",{className:"px-2 py-2 space-y-4 overflow-auto flex-1",children:[d,u]}),e[27]=d,e[28]=u,e[29]=p):p=e[29];let x;return e[30]!==p||e[31]!==f?(x=(0,s.jsxs)(s.Fragment,{children:[f,p]}),e[30]=p,e[31]=f,e[32]=x):x=e[32],x},Ne=t=>{let e=(0,k.c)(7),{snippets:r,onSelect:i}=t,o;if(e[0]!==i||e[1]!==r){let a;e[3]===i?a=e[4]:(a=c=>(0,s.jsx)(oe,{className:"rounded-none",onSelect:()=>i(c),children:(0,s.jsx)("div",{className:"flex flex-row gap-2 items-center",children:(0,s.jsx)("span",{className:"mt-1 text-accent-foreground",children:c.title})})},c.title),e[3]=i,e[4]=a),o=r.map(a),e[0]=i,e[1]=r,e[2]=o}else o=e[2];let l;return e[5]===o?l=e[6]:(l=(0,s.jsx)(ne,{className:"flex flex-col overflow-auto",children:o}),e[5]=o,e[6]=l),l};export{ve 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-BbKR2dcf.js"></script>
+    <script type="module" crossorigin src="./assets/index-MoQWZ3Gl.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-BW0IMuFq.js">
     <link rel="modulepreload" crossorigin href="./assets/hotkeys-uKX61F1_.js">
     <link rel="modulepreload" crossorigin href="./assets/defaultLocale-BLUna9fQ.js">
@@ -257,7 +257,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-DKHp2cKJ.css">
+    <link rel="stylesheet" crossorigin href="./assets/index-BQNCH-dG.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

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

package/src/components/editor/chrome/panels/snippets-panel.tsx

@@ -3,6 +3,7 @@
 import { CommandList } from "cmdk";
 import { BetweenHorizontalStartIcon, PlusIcon, XIcon } from "lucide-react";
 import React from "react";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import {
   Command,
   CommandEmpty,
@@ -29,12 +30,15 @@ import { useTheme } from "@/theme/useTheme";
 import { cn } from "@/utils/cn";
 import { HideInKioskMode } from "../../kiosk-mode";
 import { ContributeSnippetButton } from "../components/contribute-snippet-button";
+import { usePanelOrientation, usePanelSection } from "./panel-context";
 
 const extensions = [EditorView.lineWrapping];
 
 const SnippetsPanel: React.FC = () => {
   const { readSnippets } = useRequestClient();
   const [selectedSnippet, setSelectedSnippet] = React.useState<Snippet>();
+  const orientation = usePanelOrientation();
+  const section = usePanelSection();
   const {
     data: snippets,
     error,
@@ -51,49 +55,60 @@ const SnippetsPanel: React.FC = () => {
     return <Spinner size="medium" centered={true} />;
   }
 
+  const isVertical = orientation === "vertical";
+
   return (
-    <div className="flex-1 overflow-hidden">
-      <Command
-        className={cn(
-          "border-b rounded-none",
-          selectedSnippet ? "h-1/3" : "h-full",
-        )}
-      >
-        <div className="flex items-center w-full">
-          <CommandInput
-            placeholder="Search snippets..."
-            className="h-6 m-1"
-            rootClassName="flex-1 border-r"
-          />
-          <ContributeSnippetButton>
-            <button className="float-right border-b px-2 m-0 h-full hover:bg-accent hover:text-accent-foreground">
-              <PlusIcon className="h-4 w-4" />
-            </button>
-          </ContributeSnippetButton>
-        </div>
+    <div className="flex-1 overflow-hidden h-full">
+      <PanelGroup key={section} direction={orientation} className="h-full">
+        {/* Snippet list panel */}
+        <Panel defaultSize={40} minSize={20} maxSize={70}>
+          <Command className="h-full rounded-none">
+            <div className="flex items-center w-full border-b">
+              <CommandInput
+                placeholder="Search snippets..."
+                className="h-6 m-1"
+                rootClassName="flex-1 border-r"
+              />
+              <ContributeSnippetButton>
+                <button className="float-right px-2 m-0 h-full hover:bg-accent hover:text-accent-foreground">
+                  <PlusIcon className="h-4 w-4" />
+                </button>
+              </ContributeSnippetButton>
+            </div>
 
-        <CommandEmpty>No results</CommandEmpty>
-        <SnippetList
-          onSelect={(snippet) => setSelectedSnippet(snippet)}
-          snippets={snippets.snippets}
-        />
-      </Command>
-      <Suspense>
-        <div className="h-2/3 snippet-viewer flex flex-col">
-          {selectedSnippet ? (
-            <SnippetViewer
-              key={selectedSnippet.title}
-              snippet={selectedSnippet}
-              onClose={() => setSelectedSnippet(undefined)}
-            />
-          ) : (
-            <PanelEmptyState
-              title=""
-              description="Click on a snippet to view its content."
+            <CommandEmpty>No results</CommandEmpty>
+            <SnippetList
+              onSelect={(snippet) => setSelectedSnippet(snippet)}
+              snippets={snippets.snippets}
             />
+          </Command>
+        </Panel>
+        <PanelResizeHandle
+          className={cn(
+            "bg-border hover:bg-primary/50 transition-colors",
+            isVertical ? "h-1" : "w-1",
           )}
-        </div>
-      </Suspense>
+        />
+        {/* Snippet viewer panel */}
+        <Panel defaultSize={60} minSize={20}>
+          <Suspense>
+            <div className="h-full snippet-viewer flex flex-col overflow-hidden">
+              {selectedSnippet ? (
+                <SnippetViewer
+                  key={selectedSnippet.title}
+                  snippet={selectedSnippet}
+                  onClose={() => setSelectedSnippet(undefined)}
+                />
+              ) : (
+                <PanelEmptyState
+                  title=""
+                  description="Click on a snippet to view its content."
+                />
+              )}
+            </div>
+          </Suspense>
+        </Panel>
+      </PanelGroup>
     </div>
   );
 };