https://app.planify.design/assets/CanvasCreationsTab-C52o8gcK.js

1import{u as Wt,r as i,j as t}from"./index-bQIww7Oy.js";import{c as Xt,aZ as vt,N as T,t as L,F as wt,al as yt,E as j,gM as Gt,Z as Ct,ba as jt,ao as Vt,Q as Yt,ab as Zt,aa as Qt,ah as Jt,aL as en,hM as tn,j$ as nn,k0 as sn,k1 as rn,k2 as an,k3 as on,k4 as Nt}from"./App-DCJwlLbs.js";import{b as ln,g as cn,i as St,c as dn,l as mn,a as _t,C as un,d as hn,e as fn}from"./CreationAnnotationPin-BdoQKvju.js";import{S as xn,a as pn,c as gn,h as bn}from"./displayOrder-Cr9IrszL.js";import{T as vn,a as wn}from"./resolvePrimaryAttachment-DXLB9dJ9.js";import{M as yn}from"./map-pin-BLQXCvPn.js";import"./recovery-CCRcLomd.js";import"./ReviewPortalVisibilityButton-BtRbCkGV.js";import"./ungroup-BxbnLTDv.js";const Cn=52,jn=40,Nn=240*1e3,kt=60*1e3,ze=3e3*1e3;function Et(g,c){const f=(g||"").trim();return f.length<=c?f:`${f.slice(0,c).trimEnd()}…`}function Sn(g){return g.map(c=>[c.id,c.display_order??"",c.title??"",c.client_reaction??""].join("�")).join(`
2`)}function _n(g){return g.map(c=>[c.id,c.creation_id,c.content,c.updated_at??"",c.pin_x??"",c.pin_y??"",c.pin_number??""].join("�")).join(`
3`)}function Pt(g){return[...g].sort((c,f)=>{const N=bn(c.display_order,f.display_order);return N!==0?N:(c.id||"").localeCompare(f.id||"")})}function Tt(g){const c=g.pin_x!=null&&g.pin_x!==""?Number(g.pin_x):null,f=g.pin_y!=null&&g.pin_y!==""?Number(g.pin_y):null,N=g.pin_number!=null&&g.pin_number!==""?Number(g.pin_number):null;return{...g,pin_x:c!=null&&Number.isFinite(c)?c:null,pin_y:f!=null&&Number.isFinite(f)?f:null,pin_number:N!=null&&Number.isFinite(N)&&N>0?N:null}}function zn(g){const{portalSessionToken:c,isActive:f=!0,initialCreations:N=[],previewReadOnly:b=!1,initialCreationId:R=null,initialCommentId:be=null,focusNonce:ae=0,onHandled:ve,onRefreshRef:Oe}=g,{t:s,i18n:Me}=Wt("common",{useSuspense:!1}),{toast:I}=Xt(),[d,oe]=i.useState(()=>Pt(N)),[B,F]=i.useState([]),[u,D]=i.useState(N?.[0]?.id||""),[le,Be]=i.useState(""),[Lt,$e]=i.useState(!1),[$,ce]=i.useState(!1),[we,qe]=i.useState(null),[ye,He]=i.useState({}),[Rt,Ce]=i.useState({}),[Z,je]=i.useState({}),[Ue,Ne]=i.useState(!1),Se=i.useRef(new Set),_e=i.useRef(new Set),[Ke,Q]=i.useState(!1),[ke,It]=i.useState(!1),J=i.useRef(null),q=i.useRef(null),z=i.useRef(!1),H=i.useRef(null),[de,ee]=i.useState(!1),[me,We]=i.useState(!1),[A,U]=i.useState(null),[ue,K]=i.useState(""),[he,W]=i.useState(null),[Ft,Ee]=i.useState(0),[Xe,X]=i.useState(null),[Ge,te]=i.useState(null),[Ve,Ye]=i.useState(null),[Ze,Pe]=i.useState(null),[Te,fe]=i.useState(""),[ne,Qe]=i.useState(null),[Je,ie]=i.useState(!1),et=i.useRef(u);et.current=u;const xe=i.useRef(f);xe.current=f;const pe=i.useRef(async()=>{}),Le=i.useRef(0),tt=i.useRef(f),nt=i.useRef(""),it=i.useRef(""),se=i.useRef({}),Re=i.useRef({}),re=i.useRef(null),[G,st]=i.useState({left:!1,right:!1}),h=i.useMemo(()=>d.find(e=>e.id===u)||null,[d,u]),O=i.useMemo(()=>{const e=(h?.title||"").trim();return e||s("canvasCreations")||"Creation"},[h?.title,s]),S=i.useMemo(()=>[...B.filter(n=>n.creation_id===u)].sort((n,r)=>{const a=new Date(n.created_at).getTime(),o=new Date(r.created_at).getTime();return Number.isNaN(a)||Number.isNaN(o)?0:a!==o?a-o:(n.id||"").localeCompare(r.id||"")}),[B,u]),rt=i.useMemo(()=>ln(S),[S]),at=i.useMemo(()=>cn(S),[S]),At=e=>{try{const n=new Date(e),r=(Me.resolvedLanguage||Me.language||"en").split(/[-_]/)[0]||"en";return n.toLocaleString(r,{month:"short",day:"numeric",year:"numeric",hour:"2-digit",minute:"2-digit"})}catch{return""}},Dt=at.length>0;i.useEffect(()=>{We(!1)},[u]);const ot=i.useCallback(()=>{const e=()=>{document.querySelectorAll('[data-comments-thread-scroll="portal-creations-tab"]').forEach(n=>{n.scrollTop=n.scrollHeight})};e(),requestAnimationFrame(e),requestAnimationFrame(()=>requestAnimationFrame(e))},[]);i.useLayoutEffect(()=>{ot()},[ot,u,S,Je]);const M=h&&ye[h.id]||null;i.useEffect(()=>{if(!M)return;let e=null;const n=requestAnimationFrame(()=>{const r=H.current;r&&(e=new ResizeObserver(()=>Ee(a=>a+1)),e.observe(r))});return()=>{cancelAnimationFrame(n),e?.disconnect()}},[M,u]);const w=i.useMemo(()=>d.findIndex(e=>e.id===u),[d,u]),Ie=w>0,Fe=w>=0&&w<d.length-1,lt=()=>{Ie&&d[w-1]&&D(d[w-1].id)},ct=()=>{Fe&&d[w+1]&&D(d[w+1].id)},zt=i.useCallback(e=>{J.current=e.touches[0].clientX,q.current=null,z.current=!1},[]),Ot=i.useCallback(e=>{q.current=e.touches[0].clientX},[]),Mt=i.useCallback(()=>

3{if(d.length<=1||J.current===null||q.current===null){J.current=null,q.current=null;return}const e=J.current-q.current,n=50;e>n&&w<d.length-1?(D(d[w+1].id),z.current=!0):e<-n&&w>0&&(D(d[w-1].id),z.current=!0),J.current=null,q.current=null},[d,w]),_=i.useCallback(()=>{const e=re.current;if(!e){st(o=>o.left||o.right?{left:!1,right:!1}:o);return}const n=e.scrollWidth-e.clientWidth,r=e.scrollLeft>4,a=n-e.scrollLeft>4;st(o=>o.left===r&&o.right===a?o:{left:r,right:a})},[]),dt=i.useCallback(e=>{const n=re.current;if(!n)return;const r=n.querySelector("button"),a=window.getComputedStyle(n),o=Number.parseFloat(a.columnGap||a.gap||"0")||0,m=r?r.offsetWidth+o:96,x=Math.max(1,Math.floor((n.clientWidth+o)/m)-1);n.scrollBy({left:e*m*x,behavior:"smooth"})},[]),mt=d.length<=1?null:t.jsxs("div",{className:"relative w-full min-w-0 max-w-full shrink-0",children:[t.jsx("div",{ref:re,className:"flex w-full min-w-0 touch-pan-x gap-2 overflow-x-auto overscroll-x-contain px-1 pb-1 [-webkit-overflow-scrolling:touch] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden sm:gap-3",onScroll:_,children:d.map(e=>{const n=Rt[e.id]||ye[e.id]||null,r=Z[e.id],a=e.id===u;return t.jsx("button",{type:"button","data-filmstrip-active":a?"true":void 0,onClick:()=>{D(e.id),r&&ut(e.id)},"aria-label":e.title||s("canvasCreations")||"Creation","aria-current":a?"true":void 0,className:`aspect-video w-20 shrink-0 cursor-pointer overflow-hidden rounded-md transition-opacity sm:w-24 ${a?"border-2 border-slate-900 opacity-100 shadow-sm":"border border-transparent opacity-50 hover:opacity-100"}`,children:n?t.jsx("img",{src:n,alt:"",className:"pointer-events-none h-full w-full select-none object-cover",loading:"lazy",decoding:"async",draggable:!1}):r?t.jsxs("div",{className:"flex h-full w-full flex-col items-center justify-center gap-1 bg-amber-50 px-1",children:[t.jsx(vt,{className:"h-5 w-5 text-amber-700","aria-hidden":!0}),t.jsx("span",{className:"text-center text-[10px] leading-tight text-amber-900",children:s("retry")||"Retry"})]}):t.jsx("div",{className:"flex h-full w-full items-center justify-center bg-gray-200",children:t.jsx(T,{className:"h-5 w-5 animate-spin text-gray-500"})})},e.id)})}),t.jsx("div",{className:L("pointer-events-none absolute inset-y-0 left-0 z-[1] w-12 bg-gradient-to-r from-slate-50 via-slate-50/80 to-transparent transition-opacity",G.left?"opacity-100":"opacity-0"),"aria-hidden":!0}),t.jsx("div",{className:L("pointer-events-none absolute inset-y-0 right-0 z-[1] w-12 bg-gradient-to-l from-slate-50 via-slate-50/80 to-transparent transition-opacity",G.right?"opacity-100":"opacity-0"),"aria-hidden":!0}),t.jsx("button",{type:"button",tabIndex:G.left?0:-1,onClick:()=>dt(-1),className:L("absolute left-0 top-1/2 z-[2] inline-flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-800 shadow-md transition-opacity md:h-8 md:w-8",G.left?"opacity-100":"pointer-events-none opacity-0"),"aria-label":s("previous")||"Previous",children:t.jsx(wt,{className:"h-5 w-5 md:h-4 md:w-4"})}),t.jsx("button",{type:"button",tabIndex:G.right?0:-1,onClick:()=>dt(1),className:L("absolute right-0 top-1/2 z-[2] inline-flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-800 shadow-md transition-opacity md:h-8 md:w-8",G.right?"opacity-100":"pointer-events-none opacity-0"),"aria-label":s("next")||"Next",children:t.jsx(yt,{className:"h-5 w-5 md:h-4 md:w-4"})})]}),k=async(e=!1)=>{e||($e(!0),Ne(!1));try{const n=await nn(c),r=Pt(n?.creations||[]),a=(n?.comments||[]).map(p=>Tt(p)),o=Sn(r),m=_n(a),x=o!==nt.current,l=m!==it.current;x&&(nt.current=o,oe(r)),l&&(it.current=m,F(a));const C={};for(const p of r){const v=typeof p.thumbnail_signed_url=="string"?p.thumbnail_signed_url.trim():"";v&&(C[p.id]=v)}const E=Date.now();Ce(p=>{let v=!1;const Y={...p};for(const[P,gt]of Object.entries(C)){const bt=se.current[P];p[P]&&bt!=null&&E-bt<ze||(se.current[P]=E,p[P]!==gt&&(Y[P]=gt,v=!0))}return v?Y:p});const y=r.map(p=>p.id).filter(p=>{const v=Re.current[p];return v!=null&&E-v>=ze});y.length>0&&(async()=>{for(let v=0;v<y.length;v+=3){const Y=y.slice(v,v+3);await Promise.all(Y.map(P=>V(P,{force:!0})))}})(),Ne(!1),Le.current=Date.now();const Kt=et.current;r.length>0&&!r.some(p=>p.id===Kt)&&D(r[0].id);const De=r.map(p=>p.id).filter(p=>!C[p]);De.length>0&&(async()=>{for(let v=0;v<De.length;v+=3){const Y=De.slice(v,v+3);await Promise.all(Y.map(P=>V(P)))}})()}catch(n){console.error("Failed to load canvas creations",n),e||(Ne(!0),I({title:s("failedToLoad")||"Failed to load",description:s("canvasCreationsLoadFailed")||s("failedToLoadReviewDataPleaseTryA")||"Could not load creations. Check your connection and try again.",variant:"destructive"}))}finally{e||$e(!1)}};pe.current=k,Oe&&(Oe.current=()=>k(!0));const V=async(e,n)=>{const r=n?.force===!0;if(!(!r&&ye[e])&&!(!r&&Z[e])&&!Se.current.has(e)){Se.current.add(e);try{const a=await sn(c,{creationId:e,ttlSeconds:3600}),o=typeof a?.signed_url=="string"?a.signed_url:null,m=typeof a?.thumbnail_signed_url=="string"&&a.thumbnail_signed_url||o,x=Date.now();He(l=>!r&&l[e]||!o?l:(Re.current[e]=x,{...l,[e]:o})),Ce(l=>{const C=se.current[e];return!!l[e]&&C!=null&&x-C<ze||!r&&l[e]||!m?l:(se.current[e]=x,{...l,[e]:m})}),je(l=>{if(!l[e])return l;const C={...l};return delete C[e],C})}catch(a){console.error("Failed to load creation image",a),je(o=>({...o,[e]:!0})),_e.current.has(e)||(_e.current.add(e),I({title:s("failedToLoad")||"Failed to load",description:s("canvasCreationsImageLoadFailed")||s("failedToLoadImages")||"Could not load this image. Try again in a moment.",variant:"destructive"}))}finally{Se.current.delete(e)}}},ut=e=>{He(n=>{const r={...n};return delete r[e],r}),Ce(n=>{const r={...n};return delete r[e],r}),je(n=>{const r={...n};return delete r[e],r}),_e.current.delete(e),delete Re.current[e],delete se.current[e],V(e,{force:!0})};i.useEffect(()=>{k()},[c]),i.useEffect(()=>{xe.current=f},[f]),i.useEffect(()=>{const e=f&&!tt.current;tt.current=f,!(!c||!e)&&(Date.now()-Le.current<kt||pe.current(!0))},[f,c]),i.useEffect(()=>{if(!c||!f)return;const e=window.setInterval(()=>{xe.current&&(typeof document<"u"&&document.visibilityState!=="visible"||pe.current(!0))},Nn);return()=>window.clearInterval(e)},[f,c]),i.useEffect(()=>{if(!c||!f)return;const e=()=>{xe.current&&document.visibilityState==="visible"&&(Date.now()-Le.current<kt||pe.current(!0))};return document.addEventListener("visibilitychange",e),()=>document.removeEventListener("visibilitychange",e)},[f,c]),i.useEffect(()=>{if(typeof window>"u"||!window.matchMedia)return;const e=window.matchMedia("(min-width: 1024px)"),n=()=>{e.matches&&ie(!1)};

3return e.addEventListener("change",n),()=>e.removeEventListener("change",n)},[]),i.useEffect(()=>{if(!u||d.length===0)return;const e=d.findIndex(n=>n.id===u);e<0||(V(u),e>0&&V(d[e-1].id),e<d.length-1&&V(d[e+1].id))},[u,d,c]),i.useEffect(()=>{!R||!ae||d.some(e=>e.id===R)&&D(R)},[R,ae,d]),i.useEffect(()=>{const e=window.matchMedia("(max-width: 639px)"),n=()=>It(e.matches);return n(),e.addEventListener?.("change",n),()=>e.removeEventListener?.("change",n)},[]),i.useEffect(()=>{ee(!1),U(null),K(""),W(null),te(null)},[u]),i.useEffect(()=>{b&&(ee(!1),U(null),K(""),W(null))},[b]),i.useEffect(()=>{const e=()=>Ee(n=>n+1);return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]);const ht=async e=>{if(b||!h)return;const n=h.id,r=h.client_reaction||null,a=r===e?null:e;oe(o=>o.map(m=>m.id===n?{...m,client_reaction:a}:m)),qe(n);try{const m=(await rn(c,{creationId:n,reaction:e}))?.reaction??a;oe(x=>x.map(l=>l.id===n?{...l,client_reaction:m}:l)),ve?.(n)}catch(o){console.error("Failed to save reaction",o),oe(m=>m.map(x=>x.id===n?{...x,client_reaction:r}:x)),I({title:s("failedToLoad")||"Error",description:s("creationReactionFailed")||"Could not save your reaction. Please try again.",variant:"destructive"})}finally{qe(null)}},ft=async()=>{if(b||!h||!le.trim()||$)return;const e=h.id,n=le.trim(),r=`temp-${Date.now()}`;Be(""),ce(!0),F(a=>[...a,{id:r,creation_id:e,author_type:"client",author_name:null,content:n,created_at:new Date().toISOString(),pin_x:null,pin_y:null}]);try{await Nt(c,{creationId:e,content:n}),await k(!0),ve?.(e)}catch(a){console.error("Failed to submit comment",a),F(o=>o.filter(m=>m.id!==r)),I({title:s("failedToLoad")||"Error",description:s("proposalPublishFailed")||"Failed to save comment.",variant:"destructive"})}finally{ce(!1)}},Bt=async()=>{if(b||!h||!A||!ue.trim()||$)return;const e=h.id,n=ue.trim(),r=`temp-${Date.now()}`,{x:a,y:o}=A;K(""),U(null),W(null),ee(!1),ce(!0),F(m=>[...m,{id:r,creation_id:e,author_type:"client",author_name:null,content:n,created_at:new Date().toISOString(),pin_x:a,pin_y:o}]);try{const m=await Nt(c,{creationId:e,content:n,pinX:a,pinY:o});if("error"in m)throw new Error(m.error);const x=m.comment;if(x?.id){const l=Tt(x);F(C=>C.map(E=>E.id===r?l:E))}else await k(!0);ve?.(e)}catch(m){console.error("Failed to submit pinned comment",m),F(x=>x.filter(l=>l.id!==r)),I({title:s("failedToLoad")||"Error",description:s("proposalPublishFailed")||"Failed to save comment.",variant:"destructive"})}finally{ce(!1)}},$t=async e=>{if(b)return;const n=B.find(a=>a.id===e&&a.creation_id===u);if(!n||n.author_type!=="client"){I({title:s("failedToLoad")||"Error",description:s("commentDeleteFailed")||"Could not delete this comment. Please try again.",variant:"destructive"});return}Ye(e);const r=B;F(a=>a.filter(o=>o.id!==e)),Ze===e&&(Pe(null),fe(""));try{await an(c,{commentId:e}),await k(!0)}catch(a){console.error("Failed to delete client comment",a),F(r),I({title:s("failedToLoad")||"Error",description:s("commentDeleteFailed")||"Could not delete this comment. Please try again.",variant:"destructive"})}finally{Ye(null)}},qt=(e,n)=>{Pe(n),fe(e)},Ae=()=>{Pe(null),fe("")},Ht=async(e,n)=>{if(b||ne)return;const r=Te.trim();if(r){if(r===(n??"").trim()){Ae();return}Qe(e);try{const a=await on(c,{commentId:e,content:r});if("error"in a)throw new Error(a.error);Ae(),await k(!0)}catch(a){console.error("Failed to update client comment",a),I({title:s("failedToLoad")||"Error",description:s("commentEditFailed")||"Could not save this comment. Please try again.",variant:"destructive"})}finally{Qe(null)}}},ge=i.useCallback(e=>{X(e),window.setTimeout(()=>X(null),2e3)},[]);i.useEffect(()=>{if(!ae||!be||!R||u!==R)return;const e=B.find(n=>n.id===be&&n.creation_id===R);if(e){if(e.pin_x!=null&&e.pin_y!=null){ke&&ie(!0),ge(e.id);return}ke&&ie(!0),requestAnimationFrame(()=>{document.getElementById(`canvas-creation-comment-${e.id}`)?.scrollIntoView({behavior:"smooth",block:"center"}),X(e.id),window.setTimeout(()=>{X(n=>n===e.id?null:n)},1800)})}},[B,ge,ae,be,R,ke,u]),i.useLayoutEffect(()=>{const e=re.current;if(!e||!u){_();return}const n=e.querySelector('[data-filmstrip-active="true"]');if(n){const a=n.offsetLeft,o=a+n.offsetWidth;a<e.scrollLeft+8?e.scrollLeft=Math.max(0,a-8):o>e.scrollLeft+e.clientWidth-8&&(e.scrollLeft=o-e.clientWidth+8)}_()},[u,d.length,_]),i.useEffect(()=>{const e=re.current;if(!e)return;_();const n=typeof ResizeObserver<"u"?new ResizeObserver(()=>_()):null;return n?.observe(e),window.addEventListener("resize",_),()=>{n?.disconnect(),window.removeEventListener("resize",_)}},[d.length,_]);const Ut=!!(h&&M&&u&&!Z[u]);if(Lt&&d.length===0)return t.jsxs("div",{className:"flex items-center justify-center py-12 text-sm text-gray-500",children:[t.jsx(T,{className:"mr-2 h-4 w-4 animate-spin"}),s("loading")||"Loading..."]});if(Ue&&d.length===0)return t.jsxs("div",{className:"rounded-lg border border-red-200 bg-red-50/90 px-4 py-10 text-center text-sm text-red-900 space-y-4",children:[t.jsx("p",{className:"font-medium",children:s("canvasCreationsLoadFailed")||s("failedToLoadReviewDataPleaseTryA")||"Could not load creations. Check your connection and try again."}),t.jsx(j,{type:"button",variant:"outline",className:"rounded-xl border-red-300",onClick:()=>void k(),children:s("retry")||"Retry"})]});if(d.length===0)return t.jsx("div",{className:"rounded-lg border border-dashed border-gray-300 px-4 py-10 text-center text-sm text-gray-600",children:s("noCreationsYet")||"No creations sent yet"});const xt=t.jsxs("div",{children:[t.jsxs("div",{className:"flex w-full flex-row gap-2",children:[t.jsxs(j,{variant:"outline",className:`h-auto min-h-12 flex-1 min-w-0 touch-manipulation rounded-xl px-2 py-3 text-sm transition-transform active:scale-95 sm:px-3 [&_svg]:!h-5 [&_svg]:!w-5 ${h?.client_reaction==="up"?"border-emerald-600 bg-emerald-600 !text-white hover:bg-emerald-700 hover:!text-white hover:border-emerald-700 [&_span]:!text-white [&_svg]:!text-white":"border-emerald-200 bg-white text-emerald-700 hover:bg-emerald-50 [&_svg]:!text-emerald-600"}`,disabled:b||!h||we===h?.id,onClick:()=>void ht("up"),children:[t.jsx(vn,{className:`mr-1.5 h-5 w-5 shrink-0 sm:mr-2 ${h?.client_reaction==="up"?"fill-current":""}`}),t.jsx("span",{className:"whitespace-normal text-center leading-tight",children:s("creationReactionUp")||"I like it"})]}),t.jsxs(j,{variant:"outline",className:`h-auto min-h-12 flex-1 min-w-0 touch-manipulation rounded-xl px-2 py-3 text-sm transition-transform active:scale-95 sm:px-3 [&_svg]:!h-5 [&_svg]:!w-5 ${h?.client_reaction==="down"?"border-red-600 bg-red-600 !text-white hover:bg-red-700 hover:!text-white hover:border-red-700 [&_span]:!text-white [&_svg]:!text-white":"border-red-200 bg-white text-red-700 hover:bg-red-50 [&_svg]:!text-red-600"}`,disabled:b||!h||we===h?.id,onClick:()=>void ht("down"),children:[t.jsx(wn,{className:`mr-1.5 h-5 w-5 shrink-0 sm:mr-2 ${h?.client_reaction==="down"?"fill-current":""}`}),t.jsx("span",{className:"whitespace-normal text-center leading-tight",children:s("creationReactionDown")||"

3Not for me"})]})]}),we===h?.id?t.jsxs("div",{className:"mt-2 flex items-center text-xs text-gray-500",children:[t.jsx(T,{className:"mr-1.5 h-3.5 w-3.5 animate-spin"}),s("saving")||"Saving..."]}):null]}),pt=t.jsxs("div",{className:"flex min-h-0 flex-1 flex-col",children:[t.jsx("div",{className:"shrink-0 border-b border-slate-100 px-5 py-3 text-sm font-medium text-gray-900",children:s("comments")||"Comments"}),t.jsx("div",{"data-comments-thread-scroll":"portal-creations-tab",className:"flex min-h-0 flex-1 flex-col gap-3 overflow-x-hidden overflow-y-auto p-5",children:S.length===0?t.jsx("div",{className:"text-sm text-gray-500",children:s("noCommentsYet")||"No comments yet."}):S.map(e=>{const n=e.pin_x!=null&&e.pin_y!=null,r=n&&St(e),a=rt.get(e.id),o=Xe===e.id,m=Ge===e.id,x=e.author_type==="client",l=Ze===e.id,C=x&&!b,E=e.has_been_edited===!0;return t.jsxs("div",{id:`canvas-creation-comment-${e.id}`,className:L(`min-w-0 max-w-[92%] rounded-2xl px-3 py-2 transition-shadow ${x?"ml-auto bg-slate-100 text-slate-800":"mr-auto bg-slate-800 text-white"}`,n&&!l&&"cursor-pointer",(o||m)&&"ring-2 ring-violet-500 ring-offset-2"),onClick:n&&!l?()=>ge(e.id):void 0,onPointerEnter:n&&!l?()=>te(e.id):void 0,onPointerLeave:n&&!l?()=>te(y=>y===e.id?null:y):void 0,children:[t.jsxs("div",{className:"flex min-w-0 items-start justify-between gap-1.5",children:[t.jsxs("div",{className:"flex min-w-0 flex-1 items-center gap-1.5",children:[n?t.jsx("button",{type:"button",className:dn(e.author_type),"aria-label":r?s("creationPinTooltipPending")||"Saving mark…":`${s("scrollToPin")||"Show on image"} #${a}`,onClick:y=>{y.stopPropagation(),ge(e.id)},children:r?t.jsx(T,{className:"h-3 w-3 animate-spin","aria-hidden":!0}):a}):null,t.jsx("span",{className:"truncate text-[11px] font-semibold opacity-80",children:e.author_type==="designer"?s("designer")||"Designer":s("client")||"Client"})]}),C&&!l?t.jsxs("div",{className:"flex shrink-0 items-center gap-0.5",children:[t.jsx("button",{type:"button",className:"rounded p-0.5 text-slate-500 hover:bg-slate-200 hover:text-slate-800",title:s("editComment")||"Edit","aria-label":s("editComment")||"Edit",onClick:y=>{y.stopPropagation(),qt(e.content,e.id)},children:t.jsx(Gt,{className:"h-3.5 w-3.5"})}),t.jsx("button",{type:"button",className:"rounded p-0.5 text-slate-500 hover:bg-slate-200 hover:text-slate-800",title:s("deleteMarkedNote")||"Delete note","aria-label":s("deleteMarkedNote")||"Delete note",disabled:Ve===e.id,onClick:y=>{y.stopPropagation(),$t(e.id)},children:Ve===e.id?t.jsx(T,{className:"h-3.5 w-3.5 animate-spin"}):t.jsx(Ct,{className:"h-3.5 w-3.5"})})]}):null]}),l?t.jsxs("div",{className:"mt-1 space-y-2",onClick:y=>y.stopPropagation(),children:[t.jsx(jt,{value:Te,onChange:y=>fe(y.target.value),rows:3,className:"min-h-[72px] resize-none border-slate-300 bg-white text-sm text-slate-900 placeholder:text-slate-500",maxLength:500,disabled:ne===e.id}),t.jsxs("div",{className:"flex justify-end gap-1",children:[t.jsx(j,{type:"button",variant:"ghost",size:"sm",className:"h-8 px-2",disabled:ne===e.id,onClick:()=>Ae(),children:t.jsx(Ct,{className:"h-3.5 w-3.5"})}),t.jsx(j,{type:"button",size:"sm",className:"h-8 px-2",disabled:ne===e.id||!Te.trim(),onClick:()=>void Ht(e.id,e.content),children:ne===e.id?t.jsx(T,{className:"h-3.5 w-3.5 animate-spin"}):t.jsx(Vt,{className:"h-3.5 w-3.5"})})]})]}):t.jsx("div",{className:"mt-1 min-w-0 whitespace-pre-wrap break-all text-sm leading-relaxed",children:e.content}),t.jsxs("div",{className:"mt-1 text-[10px] opacity-60",children:[At(e.created_at),E?` (${s("commentEdited")||"edited"})`:""]})]},e.id)})}),t.jsx("div",{className:"shrink-0 border-t border-slate-100 bg-slate-50/50 p-5",children:t.jsxs("div",{className:"flex gap-2",children:[t.jsx(Yt,{value:le,onChange:e=>Be(e.target.value),placeholder:s("addCreationComment")||"Add a comment...",className:"h-10 rounded-xl",readOnly:b,disabled:b,onKeyDown:e=>{b||e.key==="Enter"&&(e.preventDefault(),ft())}}),t.jsx(j,{className:"h-10 rounded-xl px-4",onClick:()=>void ft(),disabled:b||!le.trim()||$,children:$?t.jsx(T,{className:"h-4 w-4 animate-spin"}):s("sendReply")||"Send"})]})})]});return t.jsxs("div",{className:"creations-gallery w-full min-w-0 max-w-full",children:[Ue?t.jsxs("div",{className:"mb-3 flex flex-col gap-2 rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-950 sm:flex-row sm:items-center sm:justify-between",role:"alert",children:[t.jsx("span",{children:s("canvasCreationsLoadFailed")||"L

3atest creations could not be refreshed. What you see may be out of date."}),t.jsx(j,{type:"button",size:"sm",variant:"outline",className:"shrink-0 border-amber-400",onClick:()=>void k(),children:s("retry")||"Retry"})]}):null,t.jsxs("div",{className:"flex w-full min-w-0 max-w-full flex-col overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm lg:h-[clamp(16rem,min(70dvh,calc(100dvh-18rem)),min(78dvh,calc(100dvh-13rem)))] lg:min-h-[600px] lg:flex-row xl:h-[clamp(17rem,min(74dvh,calc(100dvh-17rem)),min(82dvh,calc(100dvh-12rem)))]",children:[t.jsxs("div",{className:"flex h-[clamp(24rem,75dvh,52rem)] w-full min-w-0 flex-col overflow-hidden bg-slate-50/50 lg:h-auto lg:min-h-0 lg:flex-1",children:[h?t.jsxs("div",{className:"shrink-0 border-b border-slate-200 bg-white px-4 py-3 sm:px-6 sm:py-4",children:[t.jsx("h2",{className:"mb-2 truncate text-center text-sm font-semibold text-slate-900 sm:hidden",title:O,children:Et(O,Cn)}),t.jsxs("div",{className:L("flex flex-wrap items-center justify-center gap-2","sm:grid sm:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] sm:items-center sm:gap-3"),children:[t.jsx("h2",{className:"hidden min-w-0 truncate text-left text-sm font-semibold text-slate-900 sm:block",title:O,children:Et(O,jn)}),t.jsxs("div",{className:"flex flex-wrap items-center justify-center gap-2 sm:gap-3",children:[Ut?t.jsxs(t.Fragment,{children:[t.jsxs("button",{type:"button",disabled:b,className:L("inline-flex touch-manipulation items-center justify-center gap-1.5 whitespace-nowrap rounded-full border border-transparent px-3.5 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-zinc-500 dark:focus-visible:ring-offset-zinc-900","bg-gray-900 text-white hover:bg-gray-800",b&&"cursor-not-allowed opacity-50",de&&"ring-2 ring-gray-300 ring-offset-2 ring-offset-white dark:ring-zinc-600 dark:ring-offset-zinc-900"),onClick:()=>{b||(ee(e=>!e),U(null),W(null),K(""))},children:[t.jsx(yn,{className:"h-3.5 w-3.5 shrink-0","aria-hidden":!0}),s("markOnImage")||"Mark on image"]}),Dt?t.jsx(j,{type:"button",variant:"outline",size:"sm",className:L("touch-manipulation rounded-full border px-4 py-2 text-sm font-medium shadow-sm transition-all duration-200",me?"border-violet-400/90 bg-violet-50 text-violet-900 hover:bg-violet-100/90 hover:text-violet-950 focus-visible:text-violet-950 [&_svg]:text-violet-900 hover:[&_svg]:text-violet-950":"border-slate-200/95 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50 hover:shadow-md"),onClick:()=>We(e=>!e),"aria-pressed":me,children:me?t.jsxs(t.Fragment,{children:[t.jsx(Zt,{className:"mr-2 h-4 w-4 shrink-0 opacity-90","aria-hidden":!0}),s("showCreationPinsOnImage")||"Show marks"]}):t.jsxs(t.Fragment,{children:[t.jsx(Qt,{className:"mr-2 h-4 w-4 shrink-0 opacity-90","aria-hidden":!0}),s("hideCreationPinsOnImage")||"Hide marks"]})}):null]}):null,d.length>1&&w>=0?t.jsxs("div",{className:"rounded-full bg-black/70 px-2.5 py-1 text-xs font-medium text-white tabular-nums backdrop-blur-sm","aria-live":"polite",children:[w+1," ",s("creationCountOf")," ",d.length]}):null]}),t.jsx("div",{className:"hidden sm:block","aria-hidden":!0})]})]}):null,t.jsx("div",{className:"relative min-h-[12rem] flex-1",children:t.jsx("div",{className:"absolute inset-3 sm:inset-6",children:t.jsxs("div",{className:"relative h-full w-full min-w-0",children:[Ie&&t.jsx("button",{type:"button",onClick:lt,className:"absolute left-1 md:left-4 top-1/2 -translate-y-1/2 z-20 inline-flex items-center justify-center w-[48px] h-[48px] min-w-[48px] max-w-[48px] min-h-[48px] max-h-[48px] md:w-[40px] md:h-[40px] md:min-w-[40px] md:max-w-[40px] md:min-h-[40px] md:max-h-[40px] rounded-full bg-white shadow-md text-slate-800 md:hover:scale-105 transition-transform flex-shrink-0 border border-slate-100 max-md:hover:scale-100","aria-label":s("previous")||"Previous",children:t.jsx(wt,{className:"h-6 w-6 md:h-

35 md:w-5"})}),Fe&&t.jsx("button",{type:"button",onClick:ct,className:"absolute right-1 md:right-4 top-1/2 -translate-y-1/2 z-20 inline-flex items-center justify-center w-[48px] h-[48px] min-w-[48px] max-w-[48px] min-h-[48px] max-h-[48px] md:w-[40px] md:h-[40px] md:min-w-[40px] md:max-w-[40px] md:min-h-[40px] md:max-h-[40px] rounded-full bg-white shadow-md text-slate-800 md:hover:scale-105 transition-transform flex-shrink-0 border border-slate-100 max-md:hover:scale-100","aria-label":s("next")||"Next",children:t.jsx(yt,{className:"h-6 w-6 md:h-5 md:w-5"})}),M?t.jsxs(t.Fragment,{children:[t.jsx("div",{role:"button",tabIndex:0,className:L("relative flex h-full min-h-0 w-full min-w-0 justify-center overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm outline-none",de&&!b?"cursor-crosshair":"cursor-zoom-in"),onClick:e=>{if(b){if(z.current)return;Q(!0);return}if(de&&H.current){const n=hn(e,H.current);n&&(U(n),W(fn(e.clientX,e.clientY)));return}z.current||Q(!0)},onKeyDown:e=>{if(b){if(e.key==="Enter"||e.key===" "){if(e.preventDefault(),z.current)return;Q(!0)}return}if(de){(e.key==="Enter"||e.key===" ")&&e.preventDefault();return}if(e.key==="Enter"||e.key===" "){if(e.preventDefault(),z.current)return;Q(!0)}},onTouchStart:zt,onTouchMove:Ot,onTouchEnd:Mt,children:t.jsxs("div",{className:"relative h-full w-full min-h-0 min-w-0 max-w-full",children:[t.jsx("img",{ref:H,src:M,alt:O,className:"pointer-events-auto absolute inset-0 z-0 h-full w-full min-h-0 min-w-0 max-h-full max-w-full object-contain",style:{touchAction:"manipulation"},draggable:!1,onLoad:e=>{Ee(n=>n+1),mn(e.currentTarget,"client-portal")}}),t.jsxs("div",{className:"pointer-events-none absolute inset-0 z-[1]",children:[void 0,t.jsx(Jt,{delayDuration:280,children:me?null:at.map(e=>{const n=S.find(l=>l.id===e);if(!n||n.pin_x==null||n.pin_y==null)return null;const r=_t(n.pin_x,n.pin_y,H.current),a=St(n),o=rt.get(n.id)??0,m=(n.content||"").trim(),x=Xe===n.id||Ge===n.id;return t.jsx(un,{pinDomId:`canvas-creation-pin-${n.id}`,style:r,pinN:o,pending:a,authorType:n.author_type,tooltipBody:m,tooltipEmpty:s("creationPinTooltipNoText"),isEmphasized:x,onActivate:l=>{l.stopPropagation(),X(n.id),document.getElementById(`canvas-creation-comment-${n.id}`)?.scrollIntoView({behavior:"smooth",block:"nearest"}),window.setTimeout(()=>X(null),2e3)},onSyncEnter:()=>te(n.id),onSyncLeave:()=>te(l=>l===n.id?null:l)},n.id)})}),A?t.jsx("div",{className:"pointer-events-none absolute flex h-7 w-7 shrink-0 items-center justify-center",style:_t(A.x,A.y,H.current),"aria-hidden":!0,children:t.jsx("span",{className:"flex h-full w-full animate-creation-pin-enter-once items-center justify-center rounded-full border-2 border-dashed border-indigo-400/90 bg-indigo-50 text-[12px] font-bold leading-none text-indigo-800 shadow-sm",children:"+"},`${A.x}-${A.y}`)}):null]})]})}),A&&he?t.jsxs("div",{className:"fixed z-[90] rounded-xl border border-slate-200 bg-white p-3 shadow-xl",style:{left:he.left,top:he.top,width:he.width,maxWidth:"min(280px, calc(100vw - 24px))"},role:"dialog","aria-label":s("noteOnImage")||"Spot note on image",onClick:e=>e.stopPropagation(),children:[t.jsx("div",{className:"mb-2 text-xs font-medium text-slate-600",children:s("noteOnImage")||"Spot note on image"}),t.jsx(jt,{value:ue,onChange:e=>K(e.target.value),rows:3,className:"mb-2 min-h-[72px] rounded-lg text-sm",placeholder:s("addCreationComment")||"Add a comment...",autoFocus:!0}),t.jsxs("div",{className:"flex justify-end gap-2",children:[t.jsx(j,{type:"button",variant:"outline",size:"sm",className:"rounded-lg",onClick:()=>{U(null),W(null),K(""),ee(!1)},children:s("cancel")||"Cancel"}),t.jsx(j,{type:"button",size:"sm",className:"rounded-lg",disabled:!ue.trim()||$,onClick:()=>void Bt(),children:$?t.jsx(T,{className:"h-4 w-4 animate-spin"}):s("sendReply")||"Send"})]})]}):null]}):u&&Z[u]?t.jsxs("div",{className:"flex flex-col items-center justify-center gap-3 py-14 px-4 text-center text-sm text-amber-950",children:[t.jsx(vt,{className:"h-10 w-10 text-amber-600","aria-hidden":!0}),t.jsx("p",{children:s("canvasCreationsImageLoadFailed")||s("failedToLoadImages")||"Could not load this image. Check your connection and try again."}),t.jsx(j,{type:"button",variant:"outline",className:"rounded-xl",onClick:()=>ut(u),children:s("retry")||"Retry"})]}):t.jsxs("div",{className:"flex items-center justify-center py-14 text-sm text-gray-500",children:[t.jsx(T,{className:"mr-2 h-4 w-4 animate-spin"}),s("loading")||"Loading..."]})]})})}),mt?t.jsx("div",{className:"shrink-0 px-3 pb-3 sm:px-6 sm:pb-4",children:mt}):null]}),t.jsxs("aside",{className:"hidden min-h-0 w-[340px] shrink-0 flex-col overflow-hidden border-l border-slate-200 bg-white lg:flex",children:[t.jsx("div",{className:"shrink-0 border-b border-slate-100 p-5",children:xt}),pt]}),t.jsxs("div",{className:"shrink-0 space-y-2 border-t border-slate-200 bg-white p-4 lg:hidden",children:[xt,t.jsxs(j,{type:"button",variant:"outline",className:"w-full h-12 rounded-xl border-slate-200 bg-white text-slate-800 hover:bg-slate-50",onClick:()=>ie(!0),children:[t.jsx(en,{className:"mr-2 h-5 w-5 shrink-0","aria-hidden":!0}),t.jsx("span",{className:"flex-1 text-left",children:s("comments")||"Comments"}),S.length>0?t.jsx("span",{className:"ml-2 inline-flex h-6 min-w-[24px] items-center justify-center rounded-full bg-slate-900 px-2 text-xs font-semibold text-white",children:S.length}):null]})]})]}),t.jsx(tn,{open:Ke,onOpenChange:e=>{e||Q(!1)},imageUrl:M,loading:Ke&&!!h&&!M&&!Z[h.id],title:O,imageAlt:O,allowImageZoom:!0,onPrevious:d.length>1&&Ie?()=>{lt()}:void 0,onNext:d.length>1&&Fe?()=>{ct()}:void 0,currentIndex:d.length>1&&w>=0?w:void 0,totalCount:d.length>1?d.length:void 0}),t.jsx(xn,{open:Je,onOpenChange:ie,children:t.jsxs(pn,{side:"right",className:"lg:hidden w-[92vw] max-w-[440px] p-0 flex flex-col bg-white",overlayClassName:"lg:hidden",children:[t.jsx(gn,{className:"sr-only",children:s("comments")||"Comments"}),pt]})})]})}export{zn as CanvasCreationsTab};