https://app.dynamicode.ai/_next/static/chunks/4187.d3f9fd3ba735f94a.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4187],{4187:(e,t,a)=>{a.r(t),a.d(t,{DiagramsTab:()=>V});var r=a(95155),s=a(12115),n=a(73321),i=a(50910),l=a(96035),c=a(80723),o=a(6296),d=a(51914),m=a(68459),u=a(78340);let h=(0,u.A)("files",[["path",{d:"M15 2a2 2 0 0 1 1.414.586l4 4A2 2 0 0 1 21 8v7a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z",key:"1vo8kb"}],["path",{d:"M15 2v4a2 2 0 0 0 2 2h4",key:"sud9ri"}],["path",{d:"M5 7a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h8a2 2 0 0 0 1.732-1",key:"l4dndm"}]]);var x=a(69260),f=a(89239),g=a(79743),p=a(78450),j=a(41387),v=a(82840),b=a(6695);let w=".dynamicode/diagrams";var y=a(26708),N=a(35625),k=a(48934),C=a(53517);async function $(e,t){let a=`${t}: ${e.statusText}`;try{let t=await e.json();t.error&&"string"==typeof t.error?a=t.error:t.message&&(a=t.message)}catch{}return a}async function A(e){let t=(0,C.UF)(`/api/v1/projects/${e}/diagrams`),a=await fetch(t,{credentials:"include",cache:"no-store"});if(!a.ok)throw Error(await $(a,"Failed to fetch diagrams"));let r=await a.json();return Array.isArray(r)?r:[]}async function S(e,t){let a=(0,C.UF)(`/api/v1/projects/${e}/diagrams/content?name=${encodeURIComponent(t)}`),r=await fetch(a,{credentials:"include",cache:"no-store"});if(!r.ok)throw Error(await $(r,"Failed to read diagram"));return r.json()}async function E(e,t){let a=(0,C.UF)(`/api/v1/projects/${e}/diagrams`),r=await fetch(a,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:t}),credentials:"include"});if(!r.ok)throw Error(await $(r,"Failed to create diagram"));return r.json()}async function F(e,t){let a=(0,C.UF)(`/api/v1/projects/${e}/diagrams?name=${encodeURIComponent(t)}`),r=await fetch(a,{method:"DELETE",credentials:"include"});if(!r.ok)throw Error(await $(r,"Failed to delete diagram"))}let M=e=>["diagrams",e];var L=a(13545),R=a(6962),z=a(69220),I=a(22651),D=a(32880),P=a(40980);let U=0,T=!1;function Y(e){return Math.min(8,Math.max(.2,e))}function q(e,t){let a=URL.createObjectURL(e),r=document.createElement("a");r.href=a,r.download=t,document.body.appendChild(r),r.click(),r.remove(),URL.revokeObjectURL(a)}function O({content:e,name:t="diagram",fileKey:n,className:i}){let[l,c]=(0,s.useState)(null),[o,d]=(0,s.useState)(null),[m,u]=(0,s.useState)(!0),[h,x]=(0,s.useState)(null),[f,g]=(0,s.useState)(1),[p,j]=(0,s.useState)({x:0,y:0}),v=(0,s.useRef)(""),b=(0,s.useRef)(null),w=(0,s.useRef)(new Map),y=(0,s.useRef)(null),N=(0,s.useRef)(null),[k,C]=(0,s.useState)(!1);(0,s.useEffect)(()=>{let t=e.trim();if(v.current=t,!t){c(null),d(null),u(!1);return}let r=!1;return u(!0),d(null),(async()=>{try{let e=(await Promise.all([a.e(44334),a.e(34223),a.e(28776)]).then(a.bind(a,28776))).default;T||(e.initialize({startOnLoad:!1,securityLevel:"strict",theme:"default"}),T=!0);let s=`mermaid-render-${++U}`,{svg:n}=await e.render(s,t),i=document.getElementById(s);i&&i.remove(),r||v.current!==t||(c(n),x(function(e){let t=e.match(/viewBox="([^"]+)"/);if(t){let e=t[1].split(/[\s,]+/).map(Number);if(4===e.length&&e[2]>0&&e[3]>0)return{width:e[2],height:e[3]}}let a=e.match(/\swidth="([0-9.]+)/),r=e.match(/\sheight="([0-9.]+)/);return{width:a?parseFloat(a[1]):800,height:r?parseFloat(r[1]):600}}(n)),d(null),u(!1))}catch(e){r||v.current!==t||(d(e instanceof Error?e.message:String(e)),c(null),u(!1))}})(),()=>{r=!0}},[e]),(0,s.useEffect)(()=>{g(1),j({x:0,y:0})},[n]);let $=(0,s.useMemo)(()=>{var e,t;let a;return l&&h?(e=Math.round(h.width*f),t=Math.round(h.height*f),a=`width:${e}px;height:${t}px;max-width:none;max-height:none`,l.replace(/<svg\b([^>]*)>/,(r,s)=>{let n=s.replace(/\swidth="[^"]*"/g,"").replace(/\sheight="[^"]*"/g,"");return/\sstyle="([^"]*)"/.test(n)?n=n.replace(/\sstyle="([^"]*)"/,(e,t)=>` style="${t};${a}"`):n+=` style="${a}"`,`<svg${n} width="${e}" height="${t}">`})):l??""},[l,h,f]);(0,s.useEffect)(()=>{let e=b.current;if(!e)return;let t=e=>{e.preventDefault();let t=e.deltaY<0?1.1:1/1.1;g(e=>Y(e*t))};return e.addEventListener("wheel",t,{passive:!1}),()=>e.removeEventListener("wheel",t)},[l,o,m]);let A=()=>{g(1),j({x:0,y:0})},S=(0,s.useRef)(f),E=(0,s.useRef)(p);(0,s.useEffect)(()=>{S.current=f},[f]),(0,s.useEffect)(()=>{E.current=p},[p]);let F=(0,s.useCallback)(()=>{let[e,t]=[...w.current.values()];return e&&t?Math.hypot(e.x-t.x,e.y-t.y):0},[]),M=(0,s.useCallback)((e,t)=>{y.current={startX:e,startY:t,panX:E.current.x,panY:E.current.y},C(!0)},[]),O=(0,s.useCallback)(e=>{w.current.set(e.pointerId,{x:e.clientX,y:e.clientY});try{e.currentTarget.setPointerCapture(e.pointerId)}catch{}1===w.current.size?M(e.clientX,e.clientY):2===w.current.size&&(y.current=null,C(!1),N.current={startDist:F(),startZoom:S.current})},[M,F]),X=(0,s.useCallback)(e=>{if(w.current.has(e.pointerId)){if(w.current.set(e.pointerId,{x:e.clientX,y:e.clientY}),N.current&&w.current.size>=2){let e=F();N.current.startDist>0&&g(Y(N.current.startZoom*(e/N.current.startDist)));return}

1y.current&&1===w.current.size&&j({x:y.current.panX+(e.clientX-y.current.startX),y:y.current.panY+(e.clientY-y.current.startY)})}},[F]),Z=(0,s.useCallback)(e=>{w.current.delete(e.pointerId);try{e.currentTarget.releasePointerCapture(e.pointerId)}catch{}if(w.current.size<2&&(N.current=null),1===w.current.size){let[e]=[...w.current.values()];e&&M(e.x,e.y)}else 0===w.current.size&&(y.current=null,C(!1))},[M]),_=()=>{l&&q(new Blob([l],{type:"image/svg+xml;charset=utf-8"}),`${t}.svg`)},B=async()=>{if(l)try{let e=new DOMParser().parseFromString(l,"image/svg+xml").querySelector("svg");if(!e)throw Error("no svg element");let a=parseFloat(e.getAttribute("width")||"0"),r=parseFloat(e.getAttribute("height")||"0"),s=e.getAttribute("viewBox");if((!a||!r)&&s){let e=s.split(/[\s,]+/).map(Number);a=a||e[2]||0,r=r||e[3]||0}a=a||800,r=r||600,e.setAttribute("width",String(a)),e.setAttribute("height",String(r));let n=new XMLSerializer().serializeToString(e),i=URL.createObjectURL(new Blob([n],{type:"image/svg+xml;charset=utf-8"})),c=new Image;await new Promise((e,t)=>{c.onload=()=>e(),c.onerror=()=>t(Error("image load failed")),c.src=i});let o=document.createElement("canvas");o.width=Math.round(2*a),o.height=Math.round(2*r);let d=o.getContext("2d");if(!d)throw Error("canvas 2d unavailable");d.scale(2,2),d.fillStyle="#ffffff",d.fillRect(0,0,a,r),d.drawImage(c,0,0,a,r),URL.revokeObjectURL(i),o.toBlob(e=>{e&&q(e,`${t}.png`)},"image/png")}catch{_()}};return!m||l||o?o?(0,r.jsxs)("div",{className:(0,P.cn)("flex flex-col gap-3",i),children:[(0,r.jsxs)("div",{className:"inline-flex w-fit items-center gap-2 rounded-full bg-destructive/10 px-3 py-1 text-xs font-medium text-destructive",children:[(0,r.jsx)(L.A,{className:"h-3.5 w-3.5"}),"Invalid Mermaid — showing source"]}),(0,r.jsx)("pre",{className:"overflow-auto rounded-md border bg-muted/40 p-4 text-xs leading-relaxed",children:e})]}):(0,r.jsxs)("div",{className:(0,P.cn)("relative h-full w-full touch-none select-none overflow-hidden bg-muted/20",

1i),children:[(0,r.jsxs)("div",{className:"absolute right-2 top-2 z-20 flex gap-1.5",children:[(0,r.jsxs)("button",{type:"button",onClick:_,className:"inline-flex items-center gap-1 rounded-md border bg-background/85 px-2.5 py-1.5 text-xs shadow-sm backdrop-blur hover:bg-accent",title:"Download SVG (vector)",children:[(0,r.jsx)(R.A,{className:"h-3.5 w-3.5"}),"SVG"]}),(0,r.jsxs)("button",{type:"button",onClick:B,className:"inline-flex items-center gap-1 rounded-md border bg-background/85 px-2.5 py-1.5 text-xs shadow-sm backdrop-blur hover:bg-accent",title:"Download PNG (raster)",children:[(0,r.jsx)(R.A,{className:"h-3.5 w-3.5"}),"PNG"]})]}),(0,r.jsxs)("div",{className:"absolute bottom-2 right-2 z-20 flex items-center gap-1 rounded-md border bg-background/85 p-1 shadow-sm backdrop-blur",children:[(0,r.jsx)("button",{type:"button",onClick:()=>g(e=>Y(e/1.2)),className:"rounded p-2 hover:bg-accent",title:"Zoom out","aria-label":"Zoom out",children:(0,r.jsx)(z.A,{className:"h-4 w-4"})}),(0,r.jsxs)("button",{type:"button",onClick:A,className:"min-w-[3rem] rounded px-1 py-1.5 text-center text-xs tabular-nums hover:bg-accent",title:"Reset zoom & pan",children:[Math.round(100*f),"%"]}),(0,r.jsx)("button",{type:"button",onClick:()=>g(e=>Y(1.2*e)),className:"rounded p-2 hover:bg-accent",title:"Zoom in","aria-label":"Zoom in",children:(0,r.jsx)(I.A,{className:"h-4 w-4"})}),(0,r.jsx)("button",{type:"button",onClick:A,className:"rounded p-2 hover:bg-accent",title:"Fit / reset","aria-label":"Fit / reset",children:(0,r.jsx)(D.A,{className:"h-4 w-4"})})]}),(0,r.jsx)("div",{ref:b,onPointerDown:O,onPointerMove:X,onPointerUp:Z,onPointerCancel:Z,className:(0,P.cn)("flex h-full w-full items-center justify-center",k?"cursor-grabbing":"cursor-grab"),children:(0,r.jsx)("div",{className:"flex items-center justify-center",style:{transform:`translate(${p.x}px, ${p.y}px)`,transition:k||N.current?"none":"transform 80ms ease-out"},children:(0,r.jsx)("div",{className:"flex items-center justify-center",dangerouslySetInnerHTML:{__html:$}})})})]}):(0,r.jsx)("div",{className:(0,P.cn)("flex items-center justify-center p-8 text-sm text-muted-foreground",i),children:"Rendering diagram…"})}var X=a(81477);function Z({diagram:e,active:t,onSelect:a,onDelete:s}){let n,i=e.name.replace(/\.mmd$/,"");return(0,r.jsx)(X.Zp,{role:"button",tabIndex:0,onClick:a,onKeyDown:e=>{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),a())},className:(0,P.cn)("group cursor-pointer transition-colors hover:border-primary/50",t&&"border-primary ring-1 ring-primary"),children:(0,r.jsxs)(X.Wu,{className:"flex flex-col gap-3 p-4",children:[(0,r.jsxs)("div",{className:"flex items-start justify-between",children:[(0,r.jsx)("div",{className:"flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary",children:(0,r.jsx)(x.A,{className:"h-5 w-5"})}),(0,r.jsx)("button",{type:"button","aria-label":"Delete diagram",onClick:e=>{e.stopPropagation(),s()},className:"rounded-md p-1.5 text-muted-foreground opacity-0 transition-opacity hover:bg-destructive/10 hover:text-destructive group-hover:opacity-100",children:(0,r.jsx)(m.A,{className:"h-4 w-4"})})]}),(0,r.jsxs)("div",{className:"min-w-0",children:[(0,r.jsx)("div",{className:"truncate font-medium",title:i,children:i}),e.modified&&(0,r.jsx)("div",{className:"mt-0.5 text-xs text-muted-foreground",children:Number.isNaN((n=new Date(e.modified)).getTime())?"":n.toLocaleDateString(void 0,{month:"short",day:"numeric",hour:"2-digit",minute:"2-digit"})})]})]})})}let _=(0,u.A)("file-plus-2",[["path",{d:"M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4",key:"1pf5j1"}],["path",{d:"M14 2v4a2 2 0 0 0 2 2h4",key:"tnqrlb"}],["path",{d:"M3 15h6",key:"4e2qda"}],["path",{d:"M6 12v6",key:"1u72j0"}]]);var B=a(33210);function K({diagrams:e,isLoading:t,activeFile:a,onSelect:s,onCreate:n,onCollapse:i}){return(0,r.jsxs)("div",{className:"flex h-full flex-col",children:[(0,r.jsxs)("div",{className:"flex h-12 items-center gap-1.5 border-b px-2",children:[(0,r.jsx)(h,{className:"ml-1 h-4 w-4 text-muted-foreground"}),(0,r.jsx)("span",{className:"text-sm font-medium",children:"Files"}),(0,r.jsxs)("div",{className:"ml-auto flex items-center gap-0.5",children:[(0,r.jsx)(f.$,{size:"icon",variant:"ghost",className:"h-8 w-8",onClick:n,disabled:t,title:"New diagram","aria-label":"New diagram",children:(0,r.jsx)(_,{className:"h-4 w-4"})}),i&&(0,r.jsx)("button",{type:"button",onClick:i,title:"Close","aria-label":"Close files",className:"rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-foreground",children:(0,r.jsx)(B.A,{className:"h-4 w-4"})})]})]}),(0,r.jsx)("div",{className:"min-h-0 flex-1 overflow-y-auto p-1.5",children:t&&0===e.length?(0,r.jsxs)("div",{className:"flex items-center justify-center gap-2 p-4 text-xs text-muted-foreground",children:[(0,r.jsx)(o.A,{className:"h-3.5 w-3.5 animate-spin"}),"Loading…"]}):0===e.length?(0,r.jsxs)("div",{className:"p-4 text-center text-xs text-muted-foreground",children:["No diagrams yet. Click ",(0,r.jsx)("span",{className:"font-medium",children:"New"})," or ask the assistant to create one."]}):(0,r.jsx)("ul",{className:"space-y-0.5",children:e.map(e=>{let t=e.name.replace(/\.mmd$/,""),n=e.name===a;return(0,r.jsx)("li",{children:(0,r.jsxs)("button",{type:"button",onClick:()=>s(e.name),className:(0,P.cn)("flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-accent",n&&"bg-accent text-accent-foreground"),children:[(0,r.jsx)(x.A,{className:(0,P.cn)("h-4 w-4 shrink-0",n?"text-primary":"text-muted-foreground")}),(0,r.jsx)("span",{className:"truncate",title:t,children:t})]})},e.path)})})})]})}function V({project:e}

1){let t,a,u=e.project_id,C=(0,n.useRouter)(),$=(0,n.useSearchParams)(),{toast:L}=(0,b.dj)(),R=(0,i.c)("diagrams"),z=(0,i.c)("common"),{data:I=[],isLoading:D}=function(e,t=!0){return(0,y.I)({queryKey:M(e),queryFn:()=>A(e),enabled:!!e&&t,refetchInterval:5e3,staleTime:2e3})}(u),P=(t=(0,N.jE)(),(0,k.n)({mutationFn:e=>E(u,e),onSuccess:()=>{t.invalidateQueries({queryKey:M(u)})}})),U=(a=(0,N.jE)(),(0,k.n)({mutationFn:e=>F(u,e),onSuccess:()=>{a.invalidateQueries({queryKey:M(u)})}})),T=$.get("file"),Y=e=>{let t=new URLSearchParams($.toString());e?t.set("file",e):t.delete("file");let a=t.toString();C.replace(a?`?${a}`:"?",{scroll:!1})},{data:q,isLoading:X}=function(e,t,a=!0){return(0,y.I)({queryKey:["diagram-content",e,t??""],queryFn:()=>S(e,t),enabled:!!e&&!!t&&a,refetchInterval:4e3,staleTime:1500})}(u,T),_=q?.content??"",B=async()=>{let e=I.length+1,t=0===I.length?"diagram":`diagram-${e}`,a=new Set(I.map(e=>e.name.replace(/\.mmd$/,"")));for(;a.has(t);)e+=1,t=`diagram-${e}`;try{let e=await P.mutateAsync(t);Y(e.name)}catch(e){L({title:R("createFailed"),description:e instanceof Error?e.message:R("unknownError"),variant:"destructive"})}},V=async e=>{if(window.confirm(R("deleteConfirm",{name:e})))try{await U.mutateAsync(e),e===T&&Y(null),L({title:R("deleted"),description:e})}catch(e){L({title:R("deleteFailed"),description:e instanceof Error?e.message:R("unknownError"),variant:"destructive"})}},G=I.find(e=>

1e.name===T)??null,[H,Q]=(0,s.useState)(()=>window.matchMedia("(min-width: 1280px)").matches);(0,s.useEffect)(()=>{let e=window.matchMedia("(min-width: 1280px)"),t=()=>Q(e.matches);return t(),e.addEventListener("change",t),()=>e.removeEventListener("change",t)},[]);let{isVisible:J,toggle:W}=(0,v.A)(),ee=(0,s.useCallback)(e=>(function({message:e,files:t,selectedFile:a,selectedContent:r}){let s=t.length>0?t.map(e=>`- ${e.name}`).join("\n"):"(none yet)",n=a?`
2The user is currently viewing: ${a}`:"\nThe user is not viewing a specific file yet.",i=a&&null!=r&&""!==r?`
3
4Current content of ${a}:
5\`\`\`mmd
6${r}
7\`\`\``:"",l=[`[You are the diagramming assistant for this project. You own the directory ${w} (Mermaid .mmd files only).`," You may create, edit, split, rename, or delete any .mmd file there to fulfill the request.\n Rules:\n - Always write complete, valid Mermaid that renders without errors.\n - Use kebab-case filenames with a .mmd extension (letters, digits, dashes only; no spaces).",` - Only touch files under ${w}/; never edit source code or other files.`,` - After editing, the file on disk is the source of truth — write the final diagram to the file with your file tools.]`,"",`Current files in ${w}:`,s,n].join("\n");return`${l}${i}
8
9${e.trim()}`})({message:e,files:I,selectedFile:T,selectedContent:_}),[I,T,_]),[et,ea]=(0,s.useState)(()=>{let e=localStorage.getItem("diagrams-right-collapsed");return null===e||"1"===e});return(0,s.useEffect)(()=>{localStorage.setItem("diagrams-right-collapsed",et?"1":"0")},[et]),(0,r.jsxs)("div",{className:"relative flex h-full flex-row",children:[(0,r.jsx)(j.jR,{project:e,containerOnline:!0,sessionType:"diagram",kindLabel:R("singular"),composeMessage:ee}),(0,r.jsxs)("main",{className:"flex min-w-0 flex-1 flex-col",children:[(0,r.jsxs)("div",{className:"flex h-12 items-center gap-2 border-b px-2",children:[!J&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(f.$,{variant:"outline",size:"sm",className:"h-8 gap-2",onClick:W,children:[(0,r.jsx)(l.A,{className:"h-4 w-4"}),(0,r.jsx)("span",{className:"hidden sm:inline",children:R("chat")})]}),(0,r.jsx)(g.w,{orientation:"vertical",className:"h-6"})]}),(0,r.jsx)("div",{className:"flex min-w-0 flex-1 items-center gap-2",children:0===I.length?(0,r.jsx)("span",{className:"text-sm font-medium",children:R("title")}):T&&G?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(f.$,{variant:"ghost",size:"sm",className:"h-8 gap-1 px-2",onClick:()=>Y(null),children:[(0,r.jsx)(c.A,{className:"h-4 w-4"}),(0,r.jsx)("span",{className:"hidden sm:inline",children:R("grid")})]}),(0,r.jsx)("span",{className:"truncate text-sm font-medium",children:G.name.replace(/\.mmd$/,"")})]}):(0,r.jsx)("h2",{className:"text-sm font-semibold",children:R("all")})}),I.length>0&&!T&&(0,r.jsxs)(f.$,{size:"sm",className:"h-8 gap-1",onClick:B,disabled:P.isPending,children:[P.isPending?(0,r.jsx)(o.A,{className:"h-4 w-4 animate-spin"}):(0,r.jsx)(d.A,{className:"h-4 w-4"}),(0,r.jsx)("span",{className:"hidden sm:inline",children:z("create")})]}),T&&G&&(0,r.jsxs)(f.$,{variant:"ghost",size:"sm",className:"h-8 gap-1 px-2 text-muted-foreground hover:text-destructive",onClick:()=>V(G.name),children:[(0,r.jsx)(m.A,{className:"h-4 w-4"}),(0,r.jsx)("span",{className:"hidden sm:inline",children:z("delete")})]}),et&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(g.w,{orientation:"vertical",className:"h-6"}),(0,r.jsxs)(f.$,{variant:"outline",size:"sm",className:"h-8 gap-2",onClick:()=>ea(!1),children:[(0,r.jsx)(h,{className:"h-4 w-4"}),(0,r.jsx)("span",{className:"hidden sm:inline",children:R("files")})]})]})]}),(0,r.jsx)("div",{className:"min-h-0 flex-1",children:0===I.length?(0,r.jsx)("div",{className:"flex h-full items-center justify-center p-6",children:(0,r.jsx)(p.p,{icon:x.A,title:R("emptyTitle"),description:R("emptyDescription"),benefits:[R("benef

9itArchitecture"),R("benefitChat"),R("benefitFiles")],ctaLabel:R("createNew"),onCtaClick:B})}):T&&G?(0,r.jsx)("div",{className:"h-full p-6",children:X&&!_?(0,r.jsxs)("div",{className:"flex h-full items-center justify-center text-sm text-muted-foreground",children:[(0,r.jsx)(o.A,{className:"mr-2 h-4 w-4 animate-spin"}),z("loading")]}):(0,r.jsx)(O,{content:_,name:G.name.replace(/\.mmd$/,""),fileKey:G.name,className:"h-full"})}):(0,r.jsx)("div",{className:"h-full overflow-auto p-4",children:D?(0,r.jsxs)("div",{className:"flex items-center justify-center p-12 text-sm text-muted-foreground",children:[(0,r.jsx)(o.A,{className:"mr-2 h-4 w-4 animate-spin"}),"Loading diagrams…"]}):(0,r.jsx)("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",children:I.map(e=>(0,r.jsx)(Z,{diagram:e,onSelect:()=>Y(e.name),onDelete:()=>V(e.name)},e.path))})})})]}),!et&&(H?(0,r.jsx)("aside",{className:"hidden w-[300px] shrink-0 flex-col border-l bg-background md:flex",children:(0,r.jsx)(K,{diagrams:I,isLoading:D,activeFile:T,onSelect:Y,onCreate:B,onCollapse:()=>ea(!0)})}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("div",{className:"absolute inset-0 z-30 bg-black/40",onClick:()=>ea(!0),"aria-hidden":!0}),(0,r.jsx)("aside",{className:"absolute inset-y-0 right-0 z-40 flex w-[min(320px,92vw)] flex-col border-l bg-background shadow-xl",children:(0,r.jsx)(K,{diagrams:I,isLoading:D,activeFile:T,onSelect:Y,onCreate:B,onCollapse:()=>ea(!0)})})]}))]})}}}]);