@vasfal/vellum 0.1.0 → 0.1.2

package/.next/static/chunks/3uci2qhsbp444.js

@@ -1,50 +0,0 @@
-(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,96661,5014,e=>{"use strict";let t=(...e)=>e.filter((e,t,r)=>!!e&&""!==e.trim()&&r.indexOf(e)===t).join(" ").trim();e.s(["mergeClasses",0,t],96661);var r=e.i(71645),n={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"};let i=(0,r.createContext)({}),a=(0,r.forwardRef)(({color:e,size:a,strokeWidth:o,absoluteStrokeWidth:s,className:l="",children:c,iconNode:d,...u},p)=>{let{size:h=24,strokeWidth:m=2,absoluteStrokeWidth:f=!1,color:g="currentColor",className:x=""}=(0,r.useContext)(i)??{},y=s??f?24*Number(o??m)/Number(a??h):o??m;return(0,r.createElement)("svg",{ref:p,...n,width:a??h??n.width,height:a??h??n.height,stroke:e??g,strokeWidth:y,className:t("lucide",x,l),...!c&&!(e=>{for(let t in e)if(t.startsWith("aria-")||"role"===t||"title"===t)return!0;return!1})(u)&&{"aria-hidden":"true"},...u},[...d.map(([e,t])=>(0,r.createElement)(e,t)),...Array.isArray(c)?c:[c]])});e.s(["default",0,a],5014)},56420,e=>{"use strict";var t=e.i(71645),r=e.i(96661);let n=e=>{let t=e.replace(/^([A-Z])|[\s-_]+(\w)/g,(e,t,r)=>r?r.toUpperCase():t.toLowerCase());return t.charAt(0).toUpperCase()+t.slice(1)};var i=e.i(5014);e.s(["default",0,(e,a)=>{let o=(0,t.forwardRef)(({className:o,...s},l)=>(0,t.createElement)(i.default,{ref:l,iconNode:a,className:(0,r.mergeClasses)(`lucide-${n(e).replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}`,`lucide-${e}`,o),...s}));return o.displayName=n(e),o}],56420)},46805,48383,e=>{"use strict";async function t(e,t){var r;let n,i=(r=t,n=e=>String(e).padStart(2,"0"),`${r.getFullYear()}-${n(r.getMonth()+1)}-${n(r.getDate())}-${n(r.getHours())}-${n(r.getMinutes())}`),a=i,o=1;for(;o<1e3;){try{await e.getDirectoryHandle(a)}catch(t){if(t instanceof DOMException&&"NotFoundError"===t.name)return{dir:await e.getDirectoryHandle(a,{create:!0}),name:a};throw t}o+=1,a=`${i}-${o}`}throw Error(`Could not create a unique session folder for "${i}"`)}e.s(["createSessionDir",0,t],48383);let r="recording.webm";async function n(e,n){let{dir:i,name:a}=await t(e,n),o=await i.getFileHandle(r,{create:!0}),s=await o.createWritable(),l=Promise.resolve();return{sessionDirName:a,relativePath:`${a}/${r}`,write:e=>l=l.then(()=>s.write(e)),close:async()=>{await l,await s.close()}}}e.s(["createRecordingSink",0,n,"pickWorkspaceDirectory",0,function(){return window.showDirectoryPicker({mode:"readwrite"})}],46805)},44987,e=>{"use strict";let t="video/webm; codecs=vp9,opus";e.s(["VELLUM_MIME",0,t,"VELLUM_TIMESLICE_MS",0,1e3,"createRecorder",0,function({stream:e,onChunk:r,onError:n}){if(!MediaRecorder.isTypeSupported(t))throw Error(`MediaRecorder cannot record "${t}" in this browser`);let i=new MediaRecorder(e,{mimeType:t,videoBitsPerSecond:25e5});return i.addEventListener("dataavailable",e=>{e.data.size>0&&r(e.data)}),i.addEventListener("error",e=>{let t=e.error;n?.(t??Error("MediaRecorder error"))}),{start:()=>i.start(1e3),pause:()=>i.pause(),resume:()=>i.resume(),stop:()=>new Promise(e=>{i.addEventListener("stop",()=>e(),{once:!0}),i.stop()}),state:()=>i.state}}])},34781,e=>{"use strict";var t=e.i(71645);let r=`
-  :root { color-scheme: dark; }
-  body {
-    margin: 0;
-    background: oklch(0.145 0 0);
-    color: oklch(0.985 0 0);
-    font-family: ui-sans-serif, system-ui, sans-serif;
-    -webkit-font-smoothing: antialiased;
-  }
-  @keyframes vellum-rec-pulse {
-    0%, 100% { opacity: 1; transform: scale(1); }
-    50% { opacity: 0.35; transform: scale(0.82); }
-  }
-  .vellum-rec-dot { animation: vellum-rec-pulse 1.6s ease-in-out infinite; }
-
-  .vellum-pip-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 34px;
-    height: 34px;
-    padding: 0;
-    background: oklch(0.205 0 0);
-    color: oklch(0.985 0 0);
-    border: 1px solid oklch(1 0 0 / 8%);
-    border-radius: 7px;
-    cursor: pointer;
-    transition: background-color 150ms ease-out, transform 150ms ease-out;
-  }
-  .vellum-pip-btn:hover { background: oklch(0.245 0 0); }
-  .vellum-pip-btn:active { transform: scale(0.95); }
-  .vellum-pip-btn:disabled {
-    background: oklch(0.205 0 0);
-    color: oklch(0.47 0 0);
-    cursor: not-allowed;
-  }
-  /* Stop = high-emphasis (inverted), the primary action of the widget. */
-  .vellum-pip-btn[data-variant="stop"] {
-    background: oklch(0.985 0 0);
-    color: oklch(0.145 0 0);
-    border-color: transparent;
-  }
-  .vellum-pip-btn[data-variant="stop"]:hover { background: oklch(0.9 0 0); }
-`;e.s(["useDocumentPip",0,function({onClose:e}={}){let[n,i]=(0,t.useState)(null),a=(0,t.useSyncExternalStore)(()=>()=>{},()=>"documentPictureInPicture"in window,()=>!1),o=(0,t.useRef)(e);(0,t.useEffect)(()=>{o.current=e});let s=(0,t.useCallback)(async({width:e,height:t})=>{let n=window.documentPictureInPicture;if(!n)return null;let a=await n.requestWindow({width:e,height:t}),s=a.document.createElement("style");return s.textContent=r,a.document.head.appendChild(s),a.addEventListener("pagehide",()=>{i(null),o.current?.()},{once:!0}),i(a),a},[]),l=(0,t.useCallback)(()=>{n?.close()},[n]),c=(0,t.useRef)(null);return(0,t.useEffect)(()=>{c.current=n},[n]),(0,t.useEffect)(()=>()=>c.current?.close(),[]),{isSupported:a,pipWindow:n,open:s,close:l}}])},44123,38292,1788,28523,21357,29272,40822,e=>{"use strict";var t=e.i(18050),r=e.i(56420);let n=(0,r.default)("mic",[["path",{d:"M12 19v3",key:"npa21l"}],["path",{d:"M19 10v2a7 7 0 0 1-14 0v-2",key:"1vc78b"}],["rect",{x:"9",y:"2",width:"6",height:"13",rx:"3",key:"s6n7sd"}]]);e.s(["Mic",0,n],38292);let i=(0,r.default)("mic-off",[["path",{d:"M12 19v3",key:"npa21l"}],["path",{d:"M15 9.34V5a3 3 0 0 0-5.68-1.33",key:"1gzdoj"}],["path",{d:"M16.95 16.95A7 7 0 0 1 5 12v-2",key:"cqa7eg"}],["path",{d:"M18.89 13.23A7 7 0 0 0 19 12v-2",key:"16hl24"}],["path",{d:"m2 2 20 20",key:"1ooewy"}],["path",{d:"M9 9v3a3 3 0 0 0 5.12 2.12",key:"r2i35w"}]]);e.s(["MicOff",0,i],1788);let a=(0,r.default)("pause",[["rect",{x:"14",y:"3",width:"5",height:"18",rx:"1",key:"kaeet6"}],["rect",{x:"5",y:"3",width:"5",height:"18",rx:"1",key:"1wsw3u"}]]);e.s(["Pause",0,a],28523);let o=(0,r.default)("play",[["path",{d:"M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z",key:"10ikf1"}]]);e.s(["Play",0,o],21357);let s=(0,r.default)("square",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}]]);e.s(["Square",0,s],29272);var l=e.i(71645);function c(e){let t=Math.floor(e/1e3),r=t%60,n=Math.floor(t/60)%60,i=Math.floor(t/3600),a=e=>String(e).padStart(2,"0");return i>0?`${i}:${a(n)}:${a(r)}`:`${n}:${a(r)}`}e.s(["formatElapsed",0,c,"useRecordingElapsed",0,function(){let e=(0,l.useRef)(0),t=(0,l.useRef)(null),r=(0,l.useRef)("inactive"),[n,i]=(0,l.useState)(0),[a,o]=(0,l.useState)(!1),s=(0,l.useCallback)(()=>e.current+(null!==t.current?performance.now()-t.current:0),[]),c=(0,l.useCallback)(n=>{let a=r.current;if(n===a)return;let l=performance.now();"recording"===n?("inactive"===a&&(e.current=0),t.current=l):null!==t.current&&(e.current+=l-t.current,t.current=null),r.current=n,i(s()),o("recording"===n)},[s]);return(0,l.useEffect)(()=>{if(!a)return;let e=window.setInterval(()=>i(s()),200);return()=>window.clearInterval(e)},[a,s]),{elapsedMs:n,setState:c}}],40822);let d="oklch(0.985 0 0)",u="oklch(0.708 0 0)";e.s(["PipRecorderControls",0,function({recState:e,elapsedMs:r,micEnabled:l,onPauseResume:p,onStop:h,onToggleMic:m}){let f="recording"===e,g="paused"===e,x=f||g,y=g?`1.5px solid ${d}`:"none",b=x?d:u;return(0,t.jsxs)("div",{style:{boxSizing:"border-box",width:"100%",height:"100vh",display:"flex",alignItems:"center",gap:"12px",padding:"0 14px"},children:[(0,t.jsxs)("div",{style:{display:"flex",alignItems:"center",gap:"9px",minWidth:0},children:[(0,t.jsx)("span",{className:f?"vellum-rec-dot":void 0,style:{width:"9px",height:"9px",borderRadius:"50%",background:f?d:g?"transparent":"oklch(0.47 0 0)",border:y,boxSizing:"border-box",flexShrink:0}}),(0,t.jsxs)("span",{style:{display:"flex",flexDirection:"column",lineHeight:1.1},children:[(0,t.jsx)("span",{style:{fontSize:"9px",fontWeight:600,letterSpacing:"0.1em",color:b,fontFamily:"ui-monospace, 'Geist Mono', monospace"},children:f?"REC":g?"PAUSED":"IDLE"}),(0,t.jsx)("span",{style:{fontSize:"19px",fontVariantNumeric:"tabular-nums",fontFamily:"ui-monospace, 'Geist Mono', monospace",letterSpacing:"0.02em",color:b},children:c(r)})]})]}),(0,t.jsx)("span",{style:{flex:1}}),(0,t.jsx)("button",{type:"button",className:"vellum-pip-btn",onClick:m,"aria-label":l?"Mute microphone":"Unmute microphone",title:l?"Mic on":"Mic off",style:l?void 0:{color:u},children:l?(0,t.jsx)(n,{size:16,strokeWidth:1.75}):(0,t.jsx)(i,{size:16,strokeWidth:1.75})}),(0,t.jsx)("button",{type:"button",className:"vellum-pip-btn",onClick:p,disabled:!x,"aria-label":g?"Resume recording":"Pause recording",title:g?"Resume":"Pause",children:g?(0,t.jsx)(o,{size:16,strokeWidth:1.75}):(0,t.jsx)(a,{size:16,strokeWidth:1.75})}),(0,t.jsx)("button",{type:"button",className:"vellum-pip-btn","data-variant":"stop",onClick:h,disabled:!x,"aria-label":"Stop recording",title:"Stop",children:(0,t.jsx)(s,{size:15,strokeWidth:2,fill:"currentColor"})})]})}],44123)},85702,e=>{"use strict";var t=e.i(18050),r=e.i(71645),n=e.i(74080),i=e.i(44987),a=e.i(34781),o=e.i(44123),s=e.i(46805),l=e.i(40822);function c({recState:e,elapsedMs:r}){let n="recording"===e,i="paused"===e,a="inactive"===e?"#666":"#ededed";return(0,t.jsxs)("div",{style:{display:"flex",alignItems:"center",gap:"12px"},children:[(0,t.jsx)("style",{children:`
-        @keyframes vellum-rec-pulse {
-          0%, 100% { opacity: 1; transform: scale(1); }
-          50% { opacity: 0.35; transform: scale(0.82); }
-        }
-        .vellum-rec-dot { animation: vellum-rec-pulse 1.6s ease-in-out infinite; }
-      `}),(0,t.jsxs)("span",{style:{display:"inline-flex",alignItems:"center",gap:"7px"},children:[(0,t.jsx)("span",{className:n?"vellum-rec-dot":void 0,style:{width:"9px",height:"9px",borderRadius:"50%",background:n?"#ededed":i?"transparent":"#3a3a3a",border:i?"1.5px solid #ededed":"none",boxSizing:"border-box"}}),(0,t.jsx)("span",{style:{fontSize:"11px",fontWeight:600,letterSpacing:"0.08em",color:a,fontFamily:"ui-monospace, 'Geist Mono', monospace"},children:n?"REC":i?"PAUSED":"IDLE"})]}),(0,t.jsx)("span",{style:{fontSize:"22px",fontVariantNumeric:"tabular-nums",fontFamily:"ui-monospace, 'Geist Mono', monospace",letterSpacing:"0.02em",color:a},children:(0,l.formatElapsed)(r)})]})}let d={background:"#ededed",color:"#0a0a0a",border:"none",borderRadius:"6px",padding:"8px 14px",fontSize:"13px",fontWeight:500,cursor:"pointer"},u={...d,background:"#2a2a2a",color:"#666",cursor:"not-allowed"};e.s(["default",0,function(){let[e,p]=(0,r.useState)(!1),[h,m]=(0,r.useState)(!0),[f,g]=(0,r.useState)("inactive"),{elapsedMs:x,setState:y}=(0,l.useRecordingElapsed)(),[b,k]=(0,r.useState)(0),[w,v]=(0,r.useState)(0),[S,M]=(0,r.useState)(null),[j,$]=(0,r.useState)([]),E=(0,r.useRef)(null),R=(0,r.useRef)(null),C=(0,r.useRef)(null),P=(0,r.useRef)(null),L=(0,r.useRef)(null),z=(0,r.useRef)([]),[D,W]=(0,r.useState)(null),[I,U]=(0,r.useState)(null),T=(0,r.useRef)(null),A=(0,r.useRef)(null),F=(0,r.useCallback)(e=>{console.log(`[record-test] ${e}`),$(t=>[...t,e])},[]),N=(0,a.useDocumentPip)({onClose:()=>F("PiP controls closed — recording continues via in-page controls")}),V=(0,r.useCallback)(()=>{L.current&&"inactive"!==L.current.state()&&(L.current.stop(),L.current=null,g("inactive"),y("inactive")),R.current?.getTracks().forEach(e=>e.stop()),C.current?.getTracks().forEach(e=>e.stop()),R.current=null,C.current=null,P.current=null,E.current&&(E.current.srcObject=null),p(!1),N.close(),F("capture stopped — all tracks ended")},[F,y,N]),O=(0,r.useCallback)(async()=>{try{F("requesting screen via getDisplayMedia (native picker)…");let e=await navigator.mediaDevices.getDisplayMedia({video:{width:{max:2560},height:{max:1440},frameRate:{ideal:30,max:30}},audio:!1});R.current=e;let t=e.getVideoTracks()[0],r=t.getSettings(),n=Math.max(r.width??0,r.height??0),a=Math.min(r.width??0,r.height??0);F(`screen track: ${r.width}\xd7${r.height} @ ${r.frameRate}fps (long ${n}, short ${a}) — cap ≤2560\xd71440: `+(n<=2560&&a<=1440?"OK":"OVER CAP")),F("requesting microphone via getUserMedia (on by default)…");let o=await navigator.mediaDevices.getUserMedia({audio:!0,video:!1});C.current=o;let s=o.getAudioTracks()[0];s.enabled=h,F(`mic track: "${s.label}" enabled=${s.enabled}`);let l=new MediaStream([...e.getVideoTracks(),...o.getAudioTracks()]);P.current=l,F(`combined stream: ${l.getVideoTracks().length} video + ${l.getAudioTracks().length} audio track`),F(`MediaRecorder.isTypeSupported("${i.VELLUM_MIME}") = ${MediaRecorder.isTypeSupported(i.VELLUM_MIME)}`),E.current&&(E.current.srcObject=l),t.addEventListener("ended",()=>{F("screen track ended (native Stop sharing) — cleaning up"),V()}),p(!0)}catch(r){let e=r instanceof Error?r.name:"Unknown",t=r instanceof Error?r.message:String(r);F(`capture failed: ${e} — ${t}`),V()}},[F,h,V]),_=(0,r.useCallback)(()=>{let e=!h,t=C.current?.getAudioTracks()[0];t&&(t.enabled=e),F(`mic ${e?"ON":"OFF"}${t?` (track.enabled=${e})`:" — no active track yet"}`),m(e)},[F,h]),q=(0,r.useCallback)(async()=>{try{let e=await (0,s.pickWorkspaceDirectory)();T.current=e,W(e.name),F(`workspace folder chosen: "${e.name}" (read+write granted)`)}catch(t){let e=t instanceof Error?t.name:"Unknown";if("AbortError"===e)return void F("folder pick cancelled");F(`folder pick failed: ${e}`)}},[F]),H=(0,r.useCallback)(async()=>{let e=P.current;if(!e)return void F("cannot record — no active capture");z.current=[],k(0),v(0),U(null),M(e=>(e&&URL.revokeObjectURL(e),null));let t=T.current;if(t)try{let e=await (0,s.createRecordingSink)(t,new Date);A.current=e,U(e.relativePath),F(`streaming to disk → ${e.relativePath} (committed on Stop)`)}catch(t){let e=t instanceof Error?t.message:String(t);F(`failed to open disk sink: ${e} — recording in-memory only`),A.current=null}else A.current=null,F("no folder chosen — recording in-memory only (Choose folder to stream to disk)");try{let t=(0,i.createRecorder)({stream:e,onChunk:e=>{z.current.push(e),k(e=>e+1),v(t=>t+e.size),A.current&&A.current.write(e).catch(e=>{let t=e instanceof Error?e.message:String(e);F(`disk write failed: ${t}`)}),F(`chunk #${z.current.length}: ${e.size} bytes${A.current?" → disk":""}`)},onError:e=>F(`recorder error: ${e.name} — ${e.message}`)});L.current=t,t.start(),g("recording"),y("recording"),F(`recording started — mime=${i.VELLUM_MIME}, timeslice=${i.VELLUM_TIMESLICE_MS}ms`)}catch(t){let e=t instanceof Error?t.message:String(t);F(`failed to start recorder: ${e}`)}},[F,y]),B=(0,r.useCallback)(()=>{let e=L.current;e&&("recording"===e.state()?(e.pause(),g("paused"),y("paused"),F("recording paused")):"paused"===e.state()&&(e.resume(),g("recording"),y("recording"),F("recording resumed")))},[F,y]),K=(0,r.useCallback)(async()=>{let e=L.current;if(!e)return;await e.stop(),L.current=null,g("inactive"),y("inactive");let t=A.current;if(t){try{await t.close(),F(`disk file committed → ${t.relativePath}`)}catch(t){let e=t instanceof Error?t.message:String(t);F(`failed to commit disk file: ${e}`)}A.current=null}let r=new Blob(z.current,{type:i.VELLUM_MIME});M(URL.createObjectURL(r)),F(`recording stopped — assembled ${z.current.length} chunks → ${r.size} bytes, type="${r.type}"`),N.close()},[F,y,N]),G=(0,r.useCallback)(async()=>{try{await N.open({width:320,height:72}),F("PiP controls opened — floats above all windows, works when tab is unfocused")}catch(t){let e=t instanceof Error?t.message:String(t);F(`failed to open PiP controls: ${e} — use the in-page controls`)}},[F,N]),Z=e&&"inactive"===f;return(0,t.jsxs)("main",{style:{minHeight:"100vh",background:"#0a0a0a",color:"#ededed",fontFamily:"ui-sans-serif, system-ui, sans-serif",padding:"32px",display:"flex",flexDirection:"column",gap:"16px",maxWidth:"880px",margin:"0 auto"},children:[(0,t.jsxs)("header",{children:[(0,t.jsx)("h1",{style:{fontSize:"15px",fontWeight:600,margin:0},children:"TASK-10 · TASK-11 · capture + record test"}),(0,t.jsx)("p",{style:{fontSize:"13px",color:"#888",margin:"4px 0 0"},children:"screen + mic → MediaStream → MediaRecorder (VP9/Opus, ~2.5 Mbps, chunked). Not product UI."})]}),(0,t.jsxs)("div",{style:{display:"flex",gap:"8px",alignItems:"center",flexWrap:"wrap"},children:[e?(0,t.jsx)("button",{onClick:V,style:d,children:"Stop capture"}):(0,t.jsx)("button",{onClick:O,style:d,children:"Start capture"}),(0,t.jsxs)("label",{style:{display:"flex",gap:"6px",alignItems:"center",fontSize:"13px",color:"#bbb"},children:[(0,t.jsx)("input",{type:"checkbox",checked:h,onChange:_}),"Microphone ",h?"on":"off"]}),(0,t.jsx)("span",{style:{width:"1px",height:"20px",background:"#2a2a2a"}}),(0,t.jsx)("button",{onClick:q,style:d,children:"Choose folder"}),(0,t.jsx)("span",{style:{fontSize:"12px",color:"#888",fontFamily:"ui-monospace, monospace"},children:D?`folder: ${D}`:"no folder — in-memory only"}),(0,t.jsx)("span",{style:{width:"1px",height:"20px",background:"#2a2a2a"}}),(0,t.jsx)("button",{onClick:H,disabled:!Z,style:Z?d:u,children:"● Record"}),(0,t.jsx)("button",{onClick:B,disabled:"inactive"===f,style:"inactive"===f?u:d,children:"paused"===f?"Resume":"Pause"}),(0,t.jsx)("button",{onClick:K,disabled:"inactive"===f,style:"inactive"===f?u:d,children:"Stop recording"}),(0,t.jsxs)("span",{style:{fontSize:"12px",color:"#888",fontFamily:"ui-monospace, monospace"},children:[b," chunks · ",(w/1024).toFixed(0)," KB",I?` \xb7 → ${I}`:""]})]}),(0,t.jsx)("div",{style:{display:"flex",gap:"8px",alignItems:"center"},children:N.isSupported?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("button",{onClick:G,disabled:!e||null!==N.pipWindow,style:e&&null===N.pipWindow?d:u,children:"Pop out controls"}),(0,t.jsx)("span",{style:{fontSize:"12px",color:"#888",fontFamily:"ui-monospace, monospace"},children:N.pipWindow?"controls floating in PiP window":"always-on-top widget — works when this tab is unfocused"})]}):(0,t.jsx)("span",{style:{fontSize:"12px",color:"#888"},children:"Document Picture-in-Picture unavailable in this browser — in-page controls only (Chromium required)."})}),(0,t.jsx)(c,{recState:f,elapsedMs:x}),(0,t.jsx)("video",{ref:E,autoPlay:!0,muted:!0,playsInline:!0,style:{width:"100%",aspectRatio:"16 / 9",background:"#111",borderRadius:"6px",border:"1px solid #222"}}),S&&(0,t.jsxs)("div",{style:{display:"flex",flexDirection:"column",gap:"8px"},children:[(0,t.jsxs)("p",{style:{fontSize:"12px",color:"#888",margin:0,fontFamily:"ui-monospace, monospace"},children:["recorded playback (",(w/1024).toFixed(0)," KB):"]}),(0,t.jsx)("video",{src:S,controls:!0,playsInline:!0,style:{width:"100%",aspectRatio:"16 / 9",background:"#111",borderRadius:"6px",border:"1px solid #222"}}),(0,t.jsx)("a",{href:S,download:"vellum-record-test.webm",style:{...d,width:"fit-content",textDecoration:"none"},children:"Download .webm"})]}),(0,t.jsx)("pre",{style:{fontFamily:"ui-monospace, 'Geist Mono', monospace",fontSize:"12px",lineHeight:1.6,color:"#9a9a9a",background:"#0f0f0f",border:"1px solid #1d1d1d",borderRadius:"6px",padding:"12px",margin:0,whiteSpace:"pre-wrap",minHeight:"120px"},children:0===j.length?"// console log mirror — press Start capture":j.map((e,t)=>`${t+1}  ${e}`).join("\n")}),N.pipWindow&&(0,n.createPortal)((0,t.jsx)(o.PipRecorderControls,{recState:f,elapsedMs:x,micEnabled:h,onPauseResume:B,onStop:K,onToggleMic:_}),N.pipWindow.document.body)]})}])}]);