https://harbor-os.com/assets/AmbientSoundControl-BGHljg_B.js

1import{r as l,b9 as Te,j as n,G as Le,X as q,eU as Ue,aK as Oe,bM as Xe,bK as Be,dw as Ye,fC as We,dB as He,aF as _e,aL as Ke,et as Ve,bH as $e,fc as qe,eR as Qe,c7 as Ge,fj as Je}from"./vendor-BeA4siBz.js";import{waitForNodeAssets as Ze,buildExclusionFilter as et}from"./screenshot-CBkGMLmK.js";import{z as pe,B as C,I as tt}from"./index-C2NQ_9nj.js";import{u as st,A as nt}from"./use-ambient-sound-Bmp7Ues6.js";let Q=!1;const G=new Set;function dt(x){Q!==x&&(Q=x,G.forEach(d=>d()))}function ht(){return l.useSyncExternalStore(x=>(G.add(x),()=>{G.delete(x)}),()=>Q,()=>!1)}const it="hs3:open-quick-actions";function ut(){typeof window>"u"||window.dispatchEvent(new CustomEvent(it))}const at=["#FF0000","#00FF00","#2563EB","#FFFF00","#FF00FF","#000000","#FFFFFF"],we={nw:"nwse-resize",n:"ns-resize",ne:"nesw-resize",e:"ew-resize",se:"nwse-resize",s:"ns-resize",sw:"nesw-resize",w:"ew-resize"};function xt({isOpen:x,onClose:d,onCapture:U}){const[b,F]=l.useState("capturing"),[I,J]=l.useState(null),[m,A]=l.useState(null),[Z,O]=l.useState(!1),[S,X]=l.useState(null),[v,B]=l.useState(null),[p,Y]=l.useState("select"),[W,ye]=l.useState("#FF0000"),[ee]=l.useState(3),[N,j]=l.useState([]),[M,z]=l.useState(null),[H,E]=l.useState(""),[f,R]=l.useState(null),[g,w]=l.useState(null),[P,te]=l.useState(!1),[D,se]=l.useState(null),[T,L]=l.useState({x:0,y:0}),[ne,_]=l.useState(null),[be,ie]=l.useState(!1),ve=l.useRef(null),k=l.useRef(null),K=l.useRef(null);l.useEffect(()=>{x&&(F("capturing"),J(null),A(null),X(null),B(null),j([]),Y("select"),R(null),E(""),O(!1),w(null),_(null),ie(!1),(async()=>{try{await new Promise(u=>setTimeout(u,50));const s=document.getElementById("root")||document.body;await Ze(s);const a=await We(s,{backgroundColor:"#ffffff",pixelRatio:1,filter:et(["iframe","[data-screenshot-overlay]","[data-support-widget]","[data-floating-panel]",".screenshot-overlay",".support-widget",".floating-ai-panel"])}),e=s.getBoundingClientRect(),i=document.createElement("canvas");i.width=window.innerWidth,i.height=window.innerHeight;const o=i.getContext("2d");if(!o)throw new Error("Could not create capture canvas");o.fillStyle="#ffffff",o.fillRect(0,0,i.width,i.height),o.drawImage(a,-e.left,-e.top,window.innerWidth,window.innerHeight,0,0,window.innerWidth,window.innerHeight);const r=i.toDataURL("image/png",.95);J(r),F("selecting")}catch(s){console.error("Full page capture failed:",s),d()}})())},[x]);const ae=l.useCallback(()=>m?{x:Math.min(m.startX,m.endX),y:Math.min(m.startY,m.endY),width:Math.abs(m.endX-m.startX),height:Math.abs(m.endY-m.startY)}:null,[m]),je=t=>{b==="selecting"&&(t.preventDefault(),O(!0),A({startX:t.clientX,startY:t.clientY,endX:t.clientX,endY:t.clientY}))},Me=t=>{!Z||b!=="selecting"||A(s=>s?{...s,endX:t.clientX,endY:t.clientY}:null)},Ne=()=>{if(!Z||b!=="selecting")return;O(!1);const t=ae();t&&t.width>=20&&t.height>=20?ke(t):A(null)},ke=t=>{if(!I)return;const s=new Image;s.onload=()=>{const a=document.createElement("canvas");a.width=t.width,a.height=t.height;const e=a.getContext("2d");e&&(e.drawImage(s,t.x,t.y,t.width,t.height,0,0,t.width,t.height),X(a.toDataURL("image/png")),B({width:t.width,height:t.height}),F("editing"))},s.src=I},oe=t=>{var s;if(t.tool==="pen"||t.tool==="eraser"){if(!t.points||t.points.length===0)return null;const a=t.points.map(i=>i.x),e=t.points.map(i=>i.y);return{x:Math.min(...a)-5,y:Math.min(...e)-5,width:Math.max(...a)-Math.min(...a)+10,height:Math.max(...e)-Math.min(...e)+10}}else{if(t.start&&t.end)return{x:Math.min(t.start.x,t.end.x),y:Math.min(t.start.y,t.end.y),width:Math.abs(t.end.x-t.start.x)||50,height:Math.abs(t.end.y-t.start.y)||20};if(t.tool==="text"&&t.start)return{x:t.start.x-5,y:t.start.y-20,width:(((s=t.text)==null?void 0:s.length)||5)*12,height:30}}return null},le=(t,s)=>{for(let a=N.length-1;a>=0;a--){const e=N[a],i=oe(e);if(i&&t>=i.x&&t<=i.x+i.width&&s>=i.y&&s<=i.y+i.height)return e}return null},Se=(t,s,a)=>{const e={...t};return e.points&&(e.points=e.points.map(i=>({x:i.x+s,y:i.y+a}))),e.start&&(e.start={x:e.start.x+s,y:e.start.y+a}),e.end&&(e.end={x:e.end.x+s,y:e.end.y+a}),e},Ce=(t,s,a,e)=>{const i={...t};if(i.start&&i.end){const o=Math.min(i.start.x,i.end.x),r=Math.max(i.start.x,i.end.x),u=Math.min(i.start.y,i.end.y),y=Math.max(i.start.y,i.end.y);let xe=o,me=r,fe=u,ge=y;s.includes("w")&&(xe+=a),s.includes("e")&&(me+=a),s.includes("n")&&(fe+=e),s.includes("s")&&(ge+=e),i.start={x:xe,y:fe},i.end={x:me,y:ge}}return i},Ae=t=>{var o;const s=(o=k.current)==null?void 0:o.getBoundingClientRect();if(!s)return;const a=t.clientX-s.left,e=t.clientY-s.top;if(p==="select"){const r=le(a,e);r?(w(r.id),te(!0),L({x:a,y:e})):w(null);return}if(p==="text"){R({x:a,y:e}),w(null);return}w(null);const i={id:Date.now().toString(),tool:p,color:W,strokeWidth:ee,points:p==="pen"||p==="eraser"?[{x:a,y:e}]:void 0,start:{x:a,y:e},end:{x:a,y:e}};z(i)},Ee=t=>{var i;const s=(i=k.current)==null?void 0:i.getBoundingClientRect();if(!s)return;const a=t.clientX-s.left,e=t.clientY-s.top;if(p==="select"&&!P&&!D){const o=le(a,e);ie(!!o)}if(P&&g){const o=a-T.x,r=e-T.y;L({x:a,y:e}),j(u=>u.map(y=>y.id===g?Se(y,o,r):y));return}if(D&&g){const o=a-T.x,r=e-T.y;L({x:a,y:e}),j(u=>u.map(y=>y.id===g?Ce(y,D,o,r):y));return}M&&(M.tool==="pen"||M.tool==="eraser"?z(o=>o?{...o,points:[...o.points||[],{x:a,y:e}]}:null):z(o=>o?{...o,end:{x:a,y:e}}:null))},Re=()=>{if(P){te(!1);return}if(D){se(null);return}M&&(j(t=>[...t,M]),z(null))},Fe=(t,s)=>{var e;s.stopPropagation();const a=(e=k.current)==null?void 0:e.getBoundingClientRect();a&&(se(t),L({x:s.clientX-a.left,y:s.clientY-a.top}))},Ie=()=>{if(!H.trim()||!f)return;const t={id:Date.now().toString(),tool:"text",color:W,strokeWidth:ee,start:f,text:H};j(s=>[...s,t]),E(""),R(null)},re=()=>{g&&(j(t=>t.filter(s=>s.id!==g)),w(null))},ce=l.useCallback(()=>{const t=k.current;if(!t||!S)return;const s=t.getContext("2d");if(!s)return;

1s.clearRect(0,0,t.width,t.height),(M?[...N,M]:N).forEach(e=>{switch(s.strokeStyle=e.color,s.fillStyle=e.color,s.lineWidth=e.strokeWidth,s.lineCap="round",s.lineJoin="round",e.tool){case"pen":e.points&&e.points.length>1&&(s.beginPath(),s.moveTo(e.points[0].x,e.points[0].y),e.points.forEach(i=>s.lineTo(i.x,i.y)),s.stroke());break;case"eraser":e.points&&e.points.length>1&&(s.globalCompositeOperation="destination-out",s.beginPath(),s.lineWidth=e.strokeWidth*3,s.moveTo(e.points[0].x,e.points[0].y),e.points.forEach(i=>s.lineTo(i.x,i.y)),s.stroke(),s.globalCompositeOperation="source-over");break;case"arrow":if(e.start&&e.end){const o=e.end.x-e.start.x,r=e.end.y-e.start.y,u=Math.atan2(r,o);s.beginPath(),s.moveTo(e.start.x,e.start.y),s.lineTo(e.end.x,e.end.y),s.stroke(),s.beginPath(),s.moveTo(e.end.x,e.end.y),s.lineTo(e.end.x-15*Math.cos(u-Math.PI/6),e.end.y-15*Math.sin(u-Math.PI/6)),s.lineTo(e.end.x-15*Math.cos(u+Math.PI/6),e.end.y-15*Math.sin(u+Math.PI/6)),s.closePath(),s.fill()}break;case"rect":e.start&&e.end&&s.strokeRect(e.start.x,e.start.y,e.end.x-e.start.x,e.end.y-e.start.y);break;case"circle":if(e.start&&e.end){const i=Math.abs(e.end.x-e.start.x)/2,o=Math.abs(e.end.y-e.start.y)/2,r=e.start.x+(e.end.x-e.start.x)/2,u=e.start.y+(e.end.y-e.start.y)/2;s.beginPath(),s.ellipse(r,u,i,o,0,0,2*Math.PI),s.stroke()}break;case"text":e.start&&e.text&&(s.font=`${e.strokeWidth*6}px Arial`,s.fillText(e.text,e.start.x,e.start.y));break}})},[N,M,S]);l.useEffect(()=>{ce()},[ce]);const de=()=>{j(t=>t.slice(0,-1)),w(null)},he=()=>{X(null),B(null),A(null),j([]),Y("select"),w(null),F("selecting")},V=async t=>{if(!S||!v)return;w(null),await new Promise(i=>setTimeout(i,50));const s=document.createElement("canvas");s.width=v.width,s.height=v.height;const a=s.getContext("2d");if(!a)return;const e=new Image;e.src=S,await new Promise(i=>{e.onload=i}),a.drawImage(e,0,0),k.current&&a.drawImage(k.current,0,0),s.toBlob(async i=>{if(i){if(t==="download"){const o=URL.createObjectURL(i),r=document.createElement("a");r.href=o,r.download=`screenshot-${Date.now()}.png`,r.click(),URL.revokeObjectURL(o)}else if(t==="copy")try{await navigator.clipboard.write([new ClipboardItem({"image/png":i})])}catch{const o=URL.createObjectURL(i),r=document.createElement("a");r.href=o,r.download=`screenshot-${Date.now()}.png`,r.click(),URL.revokeObjectURL(o)}else U(i),window.dispatchEvent(new CustomEvent("openSupportWidget",{detail:{screenshot:i}}));d()}},"image/png")},$=l.useCallback(t=>{t.key==="Escape"?f?(R(null),E("")):b==="editing"?he():d():t.key==="Delete"||t.key==="Backspace"?g&&!f&&re():t.ctrlKey&&t.key==="z"&&de()},[d,b,f,g]);if(l.useEffect(()=>{if(x)return document.addEventListener("keydown",$),()=>{document.removeEventListener("keydown",$)}},[x,$]),l.useEffect(()=>{f&&K.current&&setTimeout(()=>{var t;(t=K.current)==null||t.focus()},10)},[f]),!x)return null;const c=ae(),ue=N.find(t=>t.id===g),h=ue?oe(ue):null,ze=[{id:"select",icon:He,label:"Select & Move"},{id:"pen",icon:_e,label:"Draw"},{id:"arrow",icon:Ke,label:"Arrow"},{id:"rect",icon:Ve,label:"Rectangle"},{id:"circle",icon:$e,label:"Circle"},{id:"text",icon:qe,label:"Text"},{id:"eraser",icon:Qe,label:"Eraser"}],Pe=()=>ne?we[ne]:p==="select"?P?"grabbing":be?"move":"default":"crosshair",De=()=>{if(!h||p!=="select")return null;const t=[{handle:"nw",style:{left:-5,top:-5}},{handle:"n",style:{left:h.width/2-5,top:-5}},{handle:"ne",style:{left:h.width-5,top:-5}},{handle:"e",style:{left:h.width-5,top:h.height/2-5}},{handle:"se",style:{left:h.width-5,top:h.height-5}},{handle:"s",style:{left:h.width/2-5,top:h.height-5}},{handle:"sw",style:{left:-5,top:h.height-5}},{handle:"w",style:{left:-5,top:h.height/2-5}}];return n.jsxs("div",{className:"absolute pointer-events-none",style:{left:h.x,top:h.y,width:h.width,height:h.height},children:[n.jsx("div",{className:"absolute inset-0 border-2 border-dashed border-[#2563EB]"}),t.map(({handle:s,style:a})=>n.jsx("div",{className:"absolute w-[10px] h-[10px] bg-white border-2 border-[#2563EB] rounded-sm pointer-events-auto",style:{...a,cursor:we[s]},onMouseDown:e=>Fe(s,e),onMouseEnter:()=>_(s),onMouseLeave:()=>_(null)},s))]})};return Te.createPortal(n.jsxs("div",{ref:ve,"data-screenshot-overlay":!0,className:"fixed inset-0 z-[9999]",children:[b==="capturing"&&n.jsx("div",{className:"w-full h-full bg-black/70 flex items-center justify-center",children:n.jsxs("div",{className:"text-center text-white",children:[n.jsx(Le,{className:"w-12 h-12 animate-spin mx-auto mb-4"}),n.jsx("p",{className:"text-lg font-medium",children:"Capturing screen..."}),n.jsx("p",{className:"text-sm text-white/70 mt-1",children:"Hold on, freezing the page"})]})}),b==="selecting"&&I&&n.jsxs("div",{className:"w-full h-full relative",style:{cursor:"crosshair"},onMouseDown:je,onMouseMove:Me,onMouseUp:Ne,children:[n.jsx("img",{src:I,alt:"Frozen screenshot",className:"w-full h-full object-cover pointer-events-none",draggable:!1}),n.jsxs("svg",{className:"absolute inset-0 w-full h-full pointer-events-none",children:[n.jsx("defs",{children:n.jsxs("mask",{id:"selection-mask",children:[n.jsx("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"white"}),c&&c.width>0&&c.height>0&&n.jsx("rect",{x:c.x,y:c.y,width:c.width,height:c.height,fill:"black"})]})}),n.jsx("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"rgba(0,0,0,0.5)",mask:"url(#selection-mask)"}),c&&c.width>0&&c.height>0&&n.jsx("rect",{x:c.x,y:c.y,width:c.width,height:c.height,fill:"none",stroke:"#2563EB",strokeWidth:"2",strokeDasharray:"6 3"})]}),n.jsxs("div",{className:"absolute top-4 left-1/2 -translate-x-1/2 bg-black/80 text-white px-6 py-3 rounded-lg shadow-lg flex items-center gap-4",children:[n.jsx("p",{className:"text-sm font-medium",children:"Draw a rectangle to select the area y

1ou want to capture"}),n.jsx("button",{onClick:d,className:"p-1 hover:bg-white/20 rounded",children:n.jsx(q,{className:"w-4 h-4"})})]}),c&&c.width>20&&c.height>20&&n.jsxs("div",{className:"absolute bg-black/80 text-white text-xs px-2 py-1 rounded pointer-events-none",style:{left:c.x,top:c.y-24},children:[Math.round(c.width)," x ",Math.round(c.height)]})]}),b==="editing"&&S&&v&&n.jsxs("div",{className:"w-full h-full bg-slate-800 flex flex-col",children:[n.jsxs("div",{className:"bg-slate-900 border-b border-slate-700 px-4 py-2 flex items-center justify-between",children:[n.jsxs("div",{className:"flex items-center gap-1",children:[ze.map(({id:t,icon:s,label:a})=>n.jsx("button",{onClick:()=>Y(t),className:pe("p-2 rounded-md transition-colors",p===t?"bg-blue-600 text-white":"text-slate-400 hover:text-white hover:bg-slate-700"),title:a,children:n.jsx(s,{className:"w-4 h-4"})},t)),n.jsx("div",{className:"w-px h-6 bg-slate-700 mx-2"}),at.map(t=>n.jsx("button",{onClick:()=>ye(t),className:pe("w-6 h-6 rounded-full border-2 transition-transform",W===t?"border-white scale-110":"border-slate-600"),style:{backgroundColor:t}},t)),n.jsx("div",{className:"w-px h-6 bg-slate-700 mx-2"}),n.jsx("button",{onClick:de,disabled:N.length===0,className:"p-2 text-slate-400 hover:text-white hover:bg-slate-700 rounded-md disabled:opacity-30",title:"Undo (Ctrl+Z)",children:n.jsx(Ue,{className:"w-4 h-4"})}),g&&n.jsx("button",{onClick:re,className:"p-2 text-red-400 hover:text-red-300 hover:bg-slate-700 rounded-md",title:"Delete selected",children:n.jsx(Oe,{className:"w-4 h-4"})})]}),n.jsxs("div",{className:"flex items-center gap-2",children:[n.jsx(C,{size:"sm",variant:"ghost",onClick:he,className:"text-slate-400 hover:text-white gap-1",children:"Re-select"}),n.jsxs(C,{size:"sm",variant:"ghost",onClick:()=>V("copy"),className:"text-slate-300 hover:text-white gap-1",children:[n.jsx(Xe,{className:"w-4 h-4"}),"Copy"]}),n.jsxs(C,{size:"sm",variant:"ghost",onClick:()=>V("download"),className:"text-slate-300 hover:text-white gap-1",children:[n.jsx(Be,{className:"w-4 h-4"}),"Save"]}),n.jsxs(C,{size:"sm",onClick:()=>V("chat"),className:"bg-blue-600 hover:bg-blue-700 text-white gap-1",children:[n.jsx(Ye,{className:"w-4 h-4"}),"Send to Support"]}),n.jsx("button",{onClick:d,className:"p-2 text-slate-400 hover:text-white hover:bg-slate-700 rounded-md ml-2",children:n.jsx(q,{className:"w-4 h-4"})})]})]}),n.jsx("div",{className:"flex-1 overflow-auto flex items-center justify-center p-8",children:n.jsxs("div",{className:"relative inline-block shadow-2xl",children:[n.jsx("img",{src:S,alt:"Screenshot",style:{width:v.width,height:v.height},className:"block",draggable:!1}),n.jsx("canvas",{ref:k,width:v.width,height:v.height,className:"absolute inset-0",style:{cursor:Pe()},onMouseDown:Ae,onMouseMove:Ee,onMouseUp:Re}),De(),f&&n.jsx("div",{className:"absolute",style:{left:f.x,top:f.y-10},children:n.jsxs("form",{onSubmit:t=>{t.preventDefault(),Ie()},className:"flex gap-1",children:[n.jsx(tt,{ref:K,value:H,onChange:t=>E(t.target.value),className:"h-7 text-sm w-40 bg-white",placeholder:"Type text...",autoFocus:!0}),n.jsx(C,{type:"submit",size:"sm",className:"h-7 px-2",children:"Add"}),n.jsx(C,{type:"button",size:"sm",variant:"ghost",className:"h-7 px-2",onClick:()=>{R(null),E("")},children:n.jsx(q,{className:"w-3 h-3"})})]})})]})})]})]}),document.body)}function mt({className:x=""}){const d=st();return n.jsxs("div",{className:`flex items-center gap-3 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 ${x}`,"data-testid":"ambient-sound-control",children:[n.jsx("button",{type:"button",onClick:d.toggle,"aria-pressed":d.enabled,"aria-label":d.enabled?"Mute ambient sound":"Play ambient sound",title:d.enabled?"Mute ambient sound":"Play ambient sound",className:`shrink-0 rounded-lg p-2 transition-colors ${d.enabled?"bg-teal-100":"bg-gray-200"}`,"data-testid":"button-ambient-sound-toggle",children:d.enabled?n.jsx(Ge,{className:"h-4 w-4 text-teal-600","aria-hidden":!0}):n.jsx(Je,{className:"h-4 w-4 text-gray-500","aria-hidden":!0})}),n.jsxs("div",{className:"min-w-0 flex-1",children:[n.jsx("div",{className:"text-sm font-medium text-gray-900",children:"Ambient Sound"}),d.enabled?n.jsx("input",{type:"range",min:"0",max:nt,step:"0.01",value:d.volume,onChange:U=>d.setVolume(parseFloat(U.target.value)),"aria-label":"Ambient sound volume",className:"mt-1 h-1 w-full cursor-pointer accent-teal-600","data-testid":"input-ambient-sound-volume"}):n.jsx("div",{className:"text-xs text-gray-500",children:"Ocean ambient off"})]})]})}export{mt as A,it as O,xt as S,ut as r,dt as s,ht as u};