https://myechoboard.com/assets/CanvasList-DrtRjiMM.js

1import{r as e,j as s}from"./vendor-react-C9yDzYQD.js";import{PageHeader as a}from"./PageHeader-Dt7JKE_V.js";import{supabase as r}from"./supabase-client-_h80EYw_.js";import{a as t,u as n,b as l}from"./vendor-query-DpPswXvj.js";import{u as o}from"./useAuth-Dz3EPsxs.js";import{a as i}from"./startup-platform-OWIpYyjW.js";import{u as d,L as c}from"./vendor-router-X7RJKav4.js";import{B as m}from"./button-CcIRk75H.js";import{D as u,f as x,a as h,c as p}from"./dialog-DHNNRuDw.js";import{I as g}from"./input-CJADGzyX.js";import{A as f,a as b,b as j,c as v,d as y,e as N,f as w,g as C}from"./alert-dialog-BZjXuitG.js";import{D as k,a as S,b as _,d as $,g as D,h as A,c as F,e as L}from"./dropdown-menu-BEBSGtMc.js";import{a as E}from"./runtime-utils-GN4cODRt.js";import{b as q}from"./image-utils-AdRSPECl.js";import{E as P,g as T,a as O,b as R,Q as M,c as z,d as K,C as U,e as Q,m as I,f as B}from"./canvasFormats-DrEJnqdk.js";import{S as W}from"./sparkles-COPkKMBj.js";import{P as Y}from"./plus-CNl86JwM.js";import{C as H}from"./check-MQhLD6FV.js";import{G as V}from"./grid-2x2-DcDlkZpn.js";import{L as G}from"./list-DLxCUw4K.js";import{S as J}from"./search-D7ByVMw5.js";import{X as Z}from"./x-lNdY5pWw.js";import{A as X}from"./arrow-up-down-Bhc8xPGx.js";import{c as ee}from"./createLucideIcon-DNcTU-zM.js";import{f as se,a as ae}from"./vendor-date-D4HAbvGT.js";import{E as re}from"./ellipsis-D4MBwnVX.js";import{P as te}from"./pencil-uXnRhiXs.js";import{C as ne}from"./copy-BrZVoqd7.js";import{T as le}from"./trash-2-B7zVZuh_.js";const oe=ee("LayoutTemplate",[["rect",{width:"18",height:"7",x:"3",y:"3",rx:"1",key:"f1a2em"}],["rect",{width:"9",height:"7",x:"3",y:"14",rx:"1",key:"jqznyg"}],["rect",{width:"5",height:"7",x:"16",y:"14",rx:"1",key:"q5h2i8"}]]);const ie={all:"All formats",portrait:"Portrait",square:"Square",landscape:"Landscape"},de={updated:"Recently edited",created:"Recently created",name:"Name A–Z"};function ce(e){var s;if(!(null==(s=e.elements)?void 0:s.length))return"Blank canvas";const a=e.elements.length;return`${a} ${1===a?"layer":"layers"}`}function me({canvas:e,compact:a=!1}){const r=O(e.aspect_ratio),t=`${r.w} / ${r.h}`;return s.jsxs("div",{className:E("relative flex items-center justify-center overflow-hidden bg-[radial-gradient(circle_at_top_left,hsl(var(--primary)/0.09),transparent_45%),linear-gradient(145deg,hsl(var(--muted)/0.68),hsl(var(--muted)/0.24))]",a?"h-16 w-20 shrink-0 rounded-xl":"aspect-[4/3] w-full rounded-[1.15rem]"),children:[s.jsx("div",{className:E("absolute inset-0 opacity-40 [background-image:radial-gradient(circle,hsl(var(--foreground)/0.12)_1px,transparent_1px)] [background-size:16px_16px]",a&&"opacity-20")}),s.jsx("div",{className:E("relative flex max-h-[82%] max-w-[82%] items-center justify-center overflow-hidden bg-background shadow-[0_16px_40px_rgba(0,0,0,0.16)] ring-1 ring-foreground/5",a?"min-h-8 min-w-8 rounded-[3px]":"min-h-24 min-w-20 rounded-md"),style:{aspectRatio:t},children:e.thumbnail_url?s.jsx("img",{src:q(e.thumbnail_url,a?"thumbnail":"medium")||e.thumbnail_url,className:"h-full w-full object-cover",alt:"",loading:"lazy",decoding:"async"}):s.jsxs("div",{className:"flex h-full w-full flex-col items-center justify-center gap-2 bg-background p-3 text-muted-foreground",children:[s.jsx(oe,{className:E(a?"h-4 w-4":"h-7 w-7"),strokeWidth:1.5}),!a&&s.jsx("span",{className:"text-[10px] font-semibold",children:"Ready to create"})]})}),!a&&s.jsx("span",{className:"absolute bottom-3 right-3 rounded-full border border-foreground

1/5 bg-background/85 px-2.5 py-1 text-[10px] font-semibold text-muted-foreground shadow-sm backdrop-blur",children:B(e.aspect_ratio)})]})}function ue({canvas:e,onDuplicate:a,onRename:r,onDelete:t,isDuplicating:n}){return s.jsxs(k,{children:[s.jsx(S,{asChild:!0,children:s.jsx(m,{variant:"ghost",size:"icon",className:"h-9 w-9 rounded-full text-muted-foreground hover:bg-background hover:text-foreground","aria-label":`Actions for ${e.name}`,children:s.jsx(re,{className:"h-4 w-4"})})}),s.jsxs(_,{align:"end",className:"w-44 rounded-xl p-1.5",children:[s.jsx(F,{asChild:!0,className:"rounded-lg",children:s.jsx(c,{to:`/canvas/${e.id}`,children:"Open canvas"})}),s.jsxs(F,{className:"rounded-lg",onSelect:()=>r(e),children:[s.jsx(te,{className:"h-4 w-4"}),"Rename"]}),s.jsxs(F,{className:"rounded-lg",disabled:n,onSelect:()=>a(e),children:[s.jsx(ne,{className:"h-4 w-4"}),"Duplicate"]}),s.jsx(L,{}),s.jsxs(F,{className:"rounded-lg text-destructive focus:bg-destructive/10 focus:text-destructive",onSelect:()=>t(e),children:[s.jsx(le,{className:"h-4 w-4"}),"Delete"]})]})]})}function xe(e){const{canvas:a}=e;return s.jsxs("article",{className:"group min-w-0",children:[s.jsxs("div",{className:"relative",children:[s.jsx(c,{to:`/canvas/${a.id}`,className:"block rounded-[1.25rem] outline-none transition-transform duration-200 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-4 group-hover:-translate-y-0.5","aria-label":`Open ${a.name}`,children:s.jsx(me,{canvas:a})}),s.jsx("div",{className:"absolute right-3 top-3 opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100",children:s.jsx("div",{className:"rounded-full border border-foreground

1/5 bg-background/90 shadow-sm backdrop-blur",children:s.jsx(ue,{...e})})})]}),s.jsx("div",{className:"flex items-start gap-3 px-1 pb-1 pt-3",children:s.jsxs("div",{className:"min-w-0 flex-1",children:[s.jsx(c,{to:`/canvas/${a.id}`,className:"block truncate text-[15px] font-semibold tracking-tight text-foreground outline-none hover:text-primary focus-visible:text-primary",children:a.name}),s.jsxs("p",{className:"mt-1 flex items-center gap-1.5 text-xs text-muted-foreground",children:[s.jsx("span",{children:se(new Date(a.updated_at),{addSuffix:!0})}),s.jsx("span",{"aria-hidden":"true",children:"·"}),s.jsx("span",{children:ce(a)})]})]})})]})}function he(e){const{canvas:a}=e;return s.jsxs("article",{className:"group flex items-center gap-4 rounded-2xl border border-border/65 bg-card/55 p-3 transition-colors hover:border-border hover:bg-card",children:[s.jsx(c,{to:`/canvas/${a.id}`,className:"rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-primary",children:s.jsx(me,{canvas:a,compact:!0})}),s.jsxs("div",{className:"min-w-0 flex-1",children:[s.jsx(c,{to:`/canvas/${a.id}`,className:"block truncate font-semibold hover:text-primary",children:a.name}),s.jsx("p",{className:"mt-1 truncate text-xs text-muted-foreground",children:ce(a)})]}),s.jsx("div",{className:"hidden w-32 text-sm text-muted-foreground sm:block",children:Q(a.aspect_ratio)}),s.jsx("div",{className:"hidden w-40 text-sm text-muted-foreground md:block",children:ae(new Date(a.updated_at),"MMM d, yyyy")}),s.jsx(ue,{...e})]})}function pe({format:e,selected:a,onSelect:r,compact:t=!1}){return s.jsxs("button",{type:"button",onClick:r,className:E("relative rounded-2xl border text-left outline-none transition-all focus-visible:ring-2 focus-visible:ring-primary",t?"p-3":"p-4",a?"border-primary bg-primary/[0.07] shadow-sm":"border-border/70 bg-muted/20 hover:border-border hover:bg-muted/40"),"aria-pressed":a,children:[s.jsx("span",{className:"block pr-5 text-sm font-semibold",children:e.label}),!t&&s.jsx("span",{className:"mt-1 block text-xs text-muted-foreground",children:e.description}),s.jsxs("span",{className:E("block text-[11px] font-medium text-muted-foreground",t?"mt-1.5":"mt-3"),children:[e.width," × ",e.height]}),a&&s.jsx("span",{className:"absolute right-3 top-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-primary-foreground",children:s.jsx(H,{className:"h-3 w-3"})})]})}const ge=()=>{const{canvases:c=[],isLoading:F,createCanvas:L,deleteCanvas:q,duplicateCanvas:Q,renameCanvas:B}=function(){const{toast:e}=o(),s=t(),a=d(),c=i(),{data:m,isLoading:u}=n({queryKey:["canvases"],queryFn:async()=>{const{data:e,error:s}=await r.from("canvases").select("*").order("updated_at",{ascending:!1});if(s)throw s;return e},staleTime:c?6e5:12e4,gcTime:c?12e5:18e5,refetchOnMount:!c&&"always",refetchOnWindowFocus:!1});return{canvases:m,isLoading:u,createCanvas:l({mutationFn:async e=>{let{data:{user:s},error:a}=await r.auth.getUser();if(!s){const e=await r.auth.refreshSession();s=e.data.user,a=e.error}if(a||!s)throw a||new Error("Your session expired. Please sign in again.");const{data:t,error:n}=await r.from("canvases").insert({user_id:s.id,name:e.name||"Untitled Canvas",type:e.type||"freeform",aspect_ratio:e.aspect_ratio||"9:16",elements:e.elements||[]}).select().single();if(n)throw n;return t},onSuccess:r=>{s.invalidateQueries({queryKey:["canvases"]}),e({title:"Canvas created"}),a(`/canvas/${r.id}`)},onError:s=>{const a=function(e){if(e&&"object"==typeof e){const s=e,a=[s.message,s.details,s.hint].filter(e=>"string"==typeof e&&e.trim().length>0);if(a.length)return Array.from(new Set(a)).join(" ")}return e instanceof Error?e.message:"Please try again."}(s);e({title:"Failed to create canvas",description:a,variant:"error"})}}),deleteCanvas:l({mutationFn:async e=>{const{error:s}=await r.from("canvases").delete().eq("id",e);if(s)throw s},onSuccess:()=>{s.invalidateQueries({queryKey:["canvases"]}),e({title:"Canvas deleted"})},onError:s=>{e({title:"Failed to delete canvas",variant:"error"})}}),duplicateCanvas:l({mutationFn:async e=>{const{data:s,error:a}

1=await r.from("canvases").insert({name:`${e.name} copy`,type:e.type||"freeform",aspect_ratio:e.aspect_ratio,elements:e.elements||[],thumbnail_url:e.thumbnail_url||null}).select().single();if(a)throw a;return s},onSuccess:()=>{s.invalidateQueries({queryKey:["canvases"]}),e({title:"Canvas duplicated"})},onError:s=>{e({title:"Failed to duplicate canvas",variant:"error"})}}),renameCanvas:l({mutationFn:async({id:e,name:s})=>{const a=s.trim();if(!a)throw new Error("Canvas name cannot be empty");const{error:t}=await r.from("canvases").update({name:a}).eq("id",e);if(t)throw t},onSuccess:()=>{s.invalidateQueries({queryKey:["canvases"]}),e({title:"Canvas renamed"})},onError:s=>{e({title:"Failed to rename canvas",variant:"error"})}})}}(),[ee,se]=e.useState(!1),[ae,re]=e.useState(""),[te,ne]=e.useState("16:9"),[le,ce]=e.useState("All"),[me,ue]=e.useState("px"),[ge,fe]=e.useState(1920),[be,je]=e.useState(1080),[ve,ye]=e.useState([]),[Ne,we]=e.useState(""),[Ce,ke]=e.useState("all"),[Se,_e]=e.useState("updated"),[$e,De]=e.useState("grid"),[Ae,Fe]=e.useState(null),[Le,Ee]=e.useState(null),[qe,Pe]=e.useState(""),Te=e.useMemo(()=>"All"===le?P:P.filter(e=>e.useCase===le),[le]),Oe=e.useMemo(()=>ve.map(e=>{const s=T(e);if(s)return s;const a=O(e);return{id:e,label:"Custom size",width:a.w,height:a.h,description:"Recently used custom dimensions",group:"quick",useCase:"Moodboard"}}).slice(0,3),[ve]);e.useEffect(()=>{try{const e=JSON.parse(window.localStorage.getItem("echo-canvas-recent-formats")||"[]");Array.isArray(e)&&ye(e.filter(e=>"string"==typeof e).slice(0,3))}catch{ye([])}},[]);const Re=e.useMemo(()=>{const e=Ne.trim().toLocaleLowerCase();return[...c.filter(s=>{const a=!e||s.name.toLocaleLowerCase().includes(e),r="all"===Ce||R(s.aspect_ratio)===Ce;return a&&r})].sort((e,s)=>{if("name"===Se)return e.name.localeCompare(s.name);const a="created"===Se?"created_at":"updated_at";return new Date(s[a]).getTime()-new Date(e[a]).getTime()})},[c,Ce,Ne,Se]),Me=e=>{se(e),e||window.setTimeout(()=>{re(""),ne("16:9"),ce("All")},300)},ze=async e=>{if(L.isPending)return;let s=[];const a="custom"===te?I(K(ge,me),K(be,me)):te;try{await L.mutateAsync({name:ae.trim()||"Untitled Canvas",aspect_ratio:a,type:"freeform",elements:s});const e=[a,...ve.filter(e=>e!==a)].slice(0,3);ye(e),window.localStorage.setItem("echo-canvas-recent-formats",JSON.stringify(e)),Me(!1)}catch{}},Ke=e=>({canvas:e,onDuplicate:e=>Q.mutate(e),onRename:e=>{Ee(e),Pe(e.name)},onDelete:Fe,isDuplicating:Q.isPending});return s.jsxs("div",{className:"min-h-screen bg-background pb-28",children:[s.jsx(a,{}),s.jsxs("main",{className:"mx-auto w-full max-w-[1440px] px-4 py-7 sm:px-6 lg:px-10 lg:py-10",children:[s.jsxs("header",{className:"flex flex-col gap-5 border-b border-border/60 pb-7 sm:flex-row sm:items-end sm:justify-between",children:[s.jsxs("div",{children:[s.jsxs("div",{className:"mb-2 flex items-center gap-2 text-sm font-medium text-primary",children:[s.jsx(W,{className:"h-4 w-4"}),"Canvas"]}),s.jsx("h1",{className:"text-3xl font-bold tracking-[-0.035em] sm:text-4xl",children:"Your creations"}),s.jsx("p",{className:"mt-2 text-sm text-muted-foreground",children:F?"Loading your visual workspace…":`${c.length} ${1===c.length?"canvas":"canvases"} · Turn saved inspiration into something new.`})]}),s.jsxs(u,{open:ee,onOpenChange:Me,children:[s.jsx(x,{asChild:!0,children:s.jsxs(m,{className:"h-11 gap-2 self-start rounded-full px-5 shadow-float sm:self-auto",children:[s.jsx(Y,{className:"h-4 w-4"}),"New canvas"]})}),s.jsxs(h,{className:"grid h-[92vh] max-h-[780px] gap-0 overflow-hidden rounded-3xl border-border/70 bg-background/95 p-0 backdrop-blur-xl sm:max-w-[860px]",style:{display:"grid",gridTemplateRows:"auto minmax(0, 1fr) auto"},children:[s.jsxs("div",{className:"border-b border-border/60 p-6",children:[s.jsx(p,{className:"text-xl",children:"Start a blank canvas"}),s.jsx("p",{className:"mt-1.5 text-sm text-muted-foreground",children:"Choose what you want to make. You can add Echoes as soon as the editor opens."})]}),s.jsxs("div",{className:"min-h-0 space-y-7 overflow-y-auto p-6",children:[s.jsxs("div",{className:"space-y-3",children:[s.jsxs("label",{htmlFor:"canvas-name",className:"text-sm font-medium",children:["Canvas name ",s.jsx("span",{className:"font-normal text-muted-foreground",children:"(optional)"})]}),s.jsx(g,{id:"canvas-name",placeholder:"Untitled Canvas",value:ae,onChange:e=>re(e.target.value),onKeyDown:e=>{"Enter"===e.key&&ze()},className:"h-11 rounded-xl border-border/70 bg-muted/25",autoFocus:!0})]}),Oe.length>0&&s.jsxs("fieldset",{className:"space-y-3",children:[s.jsx("legend",{className:"text-sm font-medium",children:"Recently used"}),s.jsx("div",{className:"grid grid-cols-2 gap-2 sm:grid-cols-3",children:Oe.map(e=>s.jsx(pe,{format:e,compact:!0,selected:te===e.id,onSelect:()=>ne(e.id)},`recent-${e.id}`))})]}),s.jsxs("fieldset",{className:"space-y-3",children:[s.jsx("legend",{className:"text-sm font-medium",children:"Qu

1ick formats"}),s.jsxs("div",{className:"grid grid-cols-2 gap-3 lg:grid-cols-4",children:[M.map(e=>s.jsx(pe,{format:e,compact:!0,selected:te===e.id,onSelect:()=>ne(e.id)},e.id)),s.jsxs("button",{type:"button",onClick:()=>ne("custom"),className:E("relative rounded-2xl border p-3 text-left outline-none transition-all focus-visible:ring-2 focus-visible:ring-primary","custom"===te?"border-primary bg-primary/[0.07] shadow-sm":"border-border/70 bg-muted/20 hover:border-border hover:bg-muted/40"),"aria-pressed":"custom"===te,children:[s.jsx("span",{className:"block text-sm font-semibold",children:"Custom Size"}),s.jsx("span",{className:"mt-1.5 block text-[11px] font-medium text-muted-foreground",children:"Width, height, and units"}),"custom"===te&&s.jsx("span",{className:"absolute right-3 top-3 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-primary-foreground",children:s.jsx(H,{className:"h-3 w-3"})})]})]})]}),"custom"===te&&s.jsxs("div",{className:"rounded-2xl border border-primary/25 bg-primary/[0.04] p-4",children:[s.jsxs("div",{className:"mb-3 flex items-center justify-between gap-3",children:[s.jsx("span",{className:"text-sm font-semibold",children:"Custom dimensions"}),s.jsx("div",{className:"flex rounded-lg border border-border/70 bg-background p-0.5",children:["px","mm","in"].map(e=>s.jsx("button",{type:"button",onClick:()=>{const s=K(ge,me),a=K(be,me);ue(e),fe(z(s,e)),je(z(a,e))},className:E("rounded-md px-2.5 py-1 text-xs font-semibold uppercase",me===e?"bg-primary text-primary-foreground":"text-muted-foreground"),children:e},e))})]}),s.jsxs("div",{className:"grid grid-cols-[1fr_auto_1fr_auto] items-end gap-2",children:[s.jsxs("label",{className:"space-y-1.5 text-xs text-muted-foreground",children:["Width",s.jsx(g,{type:"number",min:"1",value:ge,onChange:e=>fe(Math.max(1,Number(e.target.value))),className:"mt-1 h-10 rounded-xl bg-background"})]}),s.jsx("button",{type:"button",onClick:()=>{fe(be),je(ge)},className:"mb-1 h-9 rounded-lg border border-border/70 px-2 text-xs font-semibold text-muted-foreground hover:text-foreground","aria-label":"Swap orientation",children:"↔"}),s.jsxs("label",{className:"space-y-1.5 text-xs text-muted-foreground",children:["Height",s.jsx(g,{type:"number",min:"1",value:be,onChange:e=>je(Math.max(1,Number(e.target.value))),className:"mt-1 h-10 rounded-xl bg-background"})]}),s.jsx("span",{className:"mb-3 text-xs font-semibold uppercase text-muted-foreground",children:me})]}),"px"!==me&&s.jsxs("p",{className:"mt-2 text-[11px] text-muted-foreground",children:["Print dimensions use 300 DPI · ",K(ge,me)," × ",K(be,me)," px"]})]}),s.jsxs("fieldset",{className:"space-y-3",children:[s.jsxs("div",{className:"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",children:[s.jsx("legend",{className:"text-sm font-medium",children:"Use cases"}),s.jsx("div",{className:"flex flex-wrap gap-1.5",children:["All",...U].map(e=>s.jsx("button",{type:"button",onClick:()=>ce(e),className:E("rounded-full border px-2.5 py-1 text-[11px] font-semibold transition-colors",le===e?"border-primary bg-primary text-primary-foreground":"border-border/70 text-muted-foreground hover:text-foreground"),children:e},e))})]}),s.jsx("div",{className:"grid grid-cols-1 gap-3 sm:grid-cols-2",children:Te.map(e=>s.jsx(pe,{format:e,selected:te===e.id,onSelect:()=>ne(e.id)},e.id))})]})]}),s.jsxs("div",{className:"flex items-center justify-between border-t border-border/60 bg-muted/10 p-5 sm:px-6",children:[s.jsx("p",{className:"hidden text-xs text-muted-foreground sm:block",children:"You can rename it anytime."}),s.jsx(m,{onClick:()=>{ze()},className:"ml-auto rounded-full px-7",disabled:L.isPending,children:L.isPending?"Creating…":"Create canvas"})]})]})]})]}),s.jsxs("section",{className:"pt-7","aria-labelledby":"all-canvases-heading",children:[s.jsxs("div",{className:"mb-5 flex flex-col gap-4",children:[s.jsxs("div",{className:"flex items-center justify-between",children:[s.jsxs("div",{children:[s.jsx("h2",{id:"all-canvases-heading",className:"text-xl font-semibold tracking-tight",children:"All canvase

1s"}),!F&&s.jsx("p",{className:"mt-1 text-xs text-muted-foreground",children:Re.length===c.length?`${c.length} total`:`${Re.length} of ${c.length}`})]}),s.jsxs("div",{className:"hidden items-center rounded-full border border-border/70 bg-muted/20 p-1 sm:flex",children:[s.jsx(m,{variant:"ghost",size:"icon",onClick:()=>De("grid"),className:E("h-8 w-8 rounded-full","grid"===$e&&"bg-background text-foreground shadow-sm"),"aria-label":"Grid view","aria-pressed":"grid"===$e,children:s.jsx(V,{className:"h-3.5 w-3.5"})}),s.jsx(m,{variant:"ghost",size:"icon",onClick:()=>De("list"),className:E("h-8 w-8 rounded-full","list"===$e&&"bg-background text-foreground shadow-sm"),"aria-label":"List view","aria-pressed":"list"===$e,children:s.jsx(G,{className:"h-4 w-4"})})]})]}),s.jsxs("div",{className:"flex flex-col gap-3 lg:flex-row lg:items-center",children:[s.jsxs("div",{className:"relative min-w-0 flex-1 lg:max-w-md",children:[s.jsx(J,{className:"pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"}),s.jsx(g,{type:"search",value:Ne,onChange:e=>we(e.target.value),placeholder:"Search canvases",className:"h-11 rounded-full border-border/70 bg-muted/20 pl-10 pr-10"}),Ne&&s.jsx("button",{type:"button",onClick:()=>we(""),className:"absolute right-3 top-1/2 -translate-y-1/2 rounded-full p-1 text-muted-foreground hover:bg-muted hover:text-foreground","aria-label":"Clear search",children:s.jsx(Z,{className:"h-3.5 w-3.5"})})]}),s.jsxs("div",{className:"flex min-w-0 gap-2 overflow-x-auto pb-1 lg:pb-0",children:[s.jsxs(k,{children:[s.jsx(S,{asChild:!0,children:s.jsx(m,{variant:"outline",className:"h-11 shrink-0 gap-2 rounded-full border-border/70 bg-background px-4",children:ie[Ce]})}),s.jsxs(_,{align:"start",className:"w-48 rounded-xl p-1.5",children:[s.jsx($,{className:"text-xs text-muted-foreground",children:"Format"}),s.jsx(D,{value:Ce,onValueChange:e=>ke(e),children:Object.keys(ie).map(e=>s.jsx(A,{value:e,className:"rounded-lg",children:ie[e]},e))})]})]}),s.jsxs(k,{children:[s.jsx(S,{asChild:!0,children:s.jsxs(m,{variant:"outline",className:"h-11 shrink-0 gap-2 rounded-full border-border/70 bg-background px-4",children:[s.jsx(X,{className:"h-3.5 w-3.5"}),de[Se]]})}),s.jsxs(_,{align:"start",className:"w-52 rounded-xl p-1.5",children:[s.jsx($,{className:"text-xs text-muted-foreground",children:"Sort by"}),s.jsx(D,{value:Se,onValueChange:e=>_e(e),children:Object.keys(de).map(e=>s.jsx(A,{value:e,className:"rounded-lg",children:de[e]},e))})]})]})]})]})]}),F?s.jsx("div",{className:"grid grid-cols-1 gap-x-5 gap-y-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",children:Array.from({length:8},(e,a)=>s.jsxs("div",{className:"space-y-3",children:[s.jsx("div",{className:"aspect-[4/3] animate-pulse rounded-[1.25rem] bg-muted/55"}),s.jsx("div",{className:"h-4 w-2/3 animate-pulse rounded bg-muted/55"}),s.jsx("div",{className:"h-3 w-1/2 animate-pulse rounded bg-muted/35"})]},a))}):0===c.length?s.jsxs("div",{className:"flex flex-col items-center justify-center rounded-[2rem] border border-dashed border-border bg-muted/10 px-6 py-20 text-center",children:[s.jsx("div",{className:"mb-5 flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10 text-primary",children:s.jsx(oe,{className:"h-7 w-7"})}),s.jsx("h3",{className:"text-xl font-semibold",children:"Turn inspiration into a canvas"}),s.jsx("p",{className:"mt-2 max-w-md text-sm leading-6 text-muted-foreground",children:"Start with a format, then bring in Echoes from your boards to build a moodboard, story, or visual direction."}),s.jsxs(m,{onClick:()=>se(!0),className:"mt-6 rounded-full px-5",children:[s.jsx(Y,{className:"mr-2 h-4 w-4"}),"Create your first canvas"]})]}):0===Re.length?s.jsxs("div",{className:"flex flex-col items-center justify-center rounded-[2rem] border border-dashed border-border bg-muted/10 px-6 py-16 text-center",children:[s.jsx(J,{className:"mb-4 h-7 w-7 text-muted-foreground"}),s.jsx("h3",{className:"font-semibold",children:"No matching canvases"}),s.jsx("p",{className:"mt-2 text-sm text-muted-foreground",children:"Try another name or remove the format filter."}),s.jsx(m,{variant:"outline",onClick:()=>{we(""),ke("all")},className:"mt-5 rounded-full",children:"Clear filters"})]}):"grid"===$e?s.jsx("div",{className:"grid grid-cols-1 gap-x-5 gap-y-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",children:Re.map(e=>

1s.jsx(xe,{...Ke(e)},e.id))}):s.jsx("div",{className:"space-y-2",children:Re.map(e=>s.jsx(he,{...Ke(e)},e.id))})]})]}),s.jsx(u,{open:Boolean(Le),onOpenChange:e=>{e||(Ee(null),Pe(""))},children:s.jsxs(h,{className:"rounded-2xl sm:max-w-md",children:[s.jsx(p,{children:"Rename canvas"}),s.jsxs("form",{className:"space-y-5",onSubmit:e=>{e.preventDefault(),Le&&qe.trim()&&B.mutate({id:Le.id,name:qe},{onSuccess:()=>{Ee(null),Pe("")}})},children:[s.jsxs("div",{className:"space-y-2",children:[s.jsx("label",{htmlFor:"rename-canvas",className:"text-sm font-medium",children:"Canvas name"}),s.jsx(g,{id:"rename-canvas",value:qe,onChange:e=>Pe(e.target.value),autoFocus:!0,maxLength:160,className:"h-11 rounded-xl"})]}),s.jsxs("div",{className:"flex justify-end gap-2",children:[s.jsx(m,{type:"button",variant:"outline",className:"rounded-full",onClick:()=>{Ee(null),Pe("")},children:"Cancel"}),s.jsx(m,{type:"submit",className:"rounded-full",disabled:!qe.trim()||B.isPending,children:"Save name"})]})]})]})}),s.jsx(f,{open:Boolean(Ae),onOpenChange:e=>!e&&Fe(null),children:s.jsxs(b,{className:"rounded-2xl",children:[s.jsxs(j,{children:[s.jsxs(v,{children:["Delete “",null==Ae?void 0:Ae.name,"”?"]}),s.jsx(y,{children:"This permanently deletes the editable canvas. Echoes used inside it will stay in your library."})]}),s.jsxs(N,{children:[s.jsx(w,{children:"Cancel"}),s.jsx(C,{className:"bg-destructive text-destructive-foreground hover:bg-destructive/90",onClick:()=>{Ae&&q.mutate(Ae.id),Fe(null)},children:"Delete canvas"})]})]})})]})};export{ge as default};