1try{let e="u">typeof window?window:"u">typeof global?global:"u">typeof globalThis?globalThis:"u">typeof self?self:{},r=(new e.Error).stack;r&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[r]="fa02f63f-7681-40b2-984d-64a48ce08760",e._sentryDebugIdIdentifier="sentry-dbid-fa02f63f-7681-40b2-984d-64a48ce08760")}catch(e){}("u">typeof window?window:"u">typeof global?global:"u">typeof globalThis?globalThis:"u">typeof self?self:{}).SENTRY_RELEASE={id:"16.4.1"};"use strict";(self.webpackChunkcloud_web=self.webpackChunkcloud_web||[]).push([["src_pages_code-mode_CodeModePage_tsx"],{10893:(e,r,t)=>{t.r(r),t.d(r,{CodeModePage:()=>tF});var i=t(86070),n=t(53107),l=t(30758),a=t(45503),o=t(29993),s=t(7699),d=t(22474);let c=e=>null==e||Number.isNaN(e)?"-":`${Math.round(100*e)/100}`,u=e=>{if(null==e||Number.isNaN(e))return"-";let r=1>=Math.abs(e)?100*e:e;return`${c(r)}%`},p=e=>{var r;return null!=(r=null==e?void 0:e.toUpperCase())?r:"-"},x=e=>null==e?"-":e?"On":"Off",f=e=>null==e||0===e.length?"-":e,h=e=>null!==e.text&&void 0!==e.text,g=(e,r)=>null!=e[r],y=["fixLeft","fixWidth","fixRight","fixTop","fixHeight","fixBottom","constrainProportions"],_=["passTouch","isMask"],v=e=>{if(null===e.anchorX||void 0===e.anchorX||null===e.anchorY||void 0===e.anchorY)return"-";let r=u(e.anchorX),t=u(e.anchorY);return r===t?r:`${r}, ${t}`},m=e=>[[{label:"X",value:c(e.x)},{label:"Width",value:c(e.width)},{label:"Opacity",value:u(e.opacity)},{label:"Radius",value:(e=>{let r=[e.radiusTopLeft,e.radiusTopRight,e.radiusBottomRight,e.radiusBottomLeft].filter(e=>null!=e);if(0===r.length)return"-";let t=r[0];return r.every(e=>e===t)?c(t):"Mixed"})(e)}],[{label:"Y",value:c(e.y)},{label:"Height",value:c(e.height)},{label:"Origin",value:v(e)}]],b=e=>{let r;return[[{label:"ScaleX",value:u(e.scaleX)},{label:"Rotation",value:"-"===(r=c(e.rotation))?r:`${r}\xb0`},{label:"Opacity",value:u(e.opacity)}],[{label:"ScaleY",value:u(e.scaleY)},{label:"3D Rotation",value:"-"},{label:"Origin",value:v(e)}]]},w=e=>{var r;return[[{label:"Color",value:p(e.borderColor)},{label:"Width",value:c(e.borderWidth)}],[{label:"Opacity",value:u(e.borderOpacity)},{label:"Position",value:null!=(r=e.borderPosition)?r:"-"}]]},j=e=>[[{label:"Color",value:p(e.shadowColor)},{label:"Opacity",value:u(e.shadowOpacity)},{label:"Blur",value:c(e.shadowBlur)}],[{label:"Offset X",value:c(e.shadowOffsetX)},{label:"Offset Y",value:c(e.shadowOffsetY)}]],k=e=>{var r,t,i,n;return[[{label:"Horizontal",value:null!=(r=null==(i=e.constraints)?void 0:i.horizontal)?r:"-"},{label:"Proportions",value:x(e.constrainProportions)},{label:"Left",value:x(e.fixLeft)},{label:"Width",value:x(e.fixWidth)},{label:"Right",value:x(e.fixRight)}],[{label:"Vertical",value:null!=(t=null==(n=e.constraints)?void 0:n.vertical)?t:"-"},{label:"Top",value:x(e.fixTop)},{label:"Height",value:x(e.fixHeight)},{label:"Bottom",value:x(e.fixBottom)}]]},C=e=>[...!0===e.borderEnabled?["border"]:[],...!0===e.shadowEnabled?["shadow"]:[],"transform",...null!=e.constraints||y.some(r=>g(e,r))?["constraints"]:[],..._.some(r=>g(e,r))?["layerOptions"]:[]],A=(e,r)=>[e,...r.flat().map(({label:e,value:r})=>`${e}: ${r}`)],I={xid_tap:"ic_tap_24",xid_double_tap:"ic_double_tap_24",xid_touch_down:"ic_touch_down_24",xid_touch_up:"ic_touch_up_24",xid_long_press:"ic_long_press_24",xid_fling:"ic_fling_24",xid_pull:"ic_pull_24",xid_drag:"ic_drag_24",xid_pinch:"ic_pinch_24",xid_rotate:"ic_rotate_counter_24",xid_chain:"ic_chain_24",xid_range:"ic_range_between_24",xid_on_load:"ic_start_24",xid_start:"ic_start_24",xid_receive:"ic_receive_24",xid_tilt:"ic_tilt_24",xid_compass:"ic_compass_24",xid_sound:"ic_sound_wave_24",xid_force_touch:"ic_3d_touch_24",xid_mouse_over:"ic_mouse_over_24",xid_mouse_out:"ic_mouse_out_24",xid_key:"ic_press_24",xid_press:"ic_press_24",xid_focus:"ic_focus_24",xid_return_key:"ic_return_24",xid_proximity:"ic_proximity_24",xid_change:"ic_detect_24",xid_detect:"ic_detect_24",xid_voice:"ic_mic_24"},S={xid_move:"ic_move_24",xid_res_move:"ic_move_24",xid_scale:"ic_scale_24",xid_res_scale:"ic_scale_24",xid_res_rotate:"ic_rotate_counter_24",xid_rotate_3d:"ic_3d_rotate_left_24",xid_res_rotate_3d:"ic_3d_rotate_left_24",xid_opacity:"ic_opacity_24",xid_res_opacity:"ic_opacity_24",xid_color:"ic_color_24",xid_res_color:"ic_color_24",xid_radius:"ic_radius_24",xid_res_radius:"ic_radius_24",xid_border:"ic_border_24",xid_res_border:"ic_border_24",xid_shadow:"ic_shadow_24",xid_res_shadow:"ic_shadow_24",xid_scroll:"ic_drop_up_downward_24",xid_res_scroll:"ic_drop_up_downward_24",xid_reorder:"ic_reorder_24",xid_res_reorder:"ic_reorder_24",xid_playback:"ic_play_24",xid_res_playback:"ic_play_24",xid_media_source:"ic_image_24",xid_res_media_source:"ic_image_24",xid_volume:"ic_speaker_on_24",xid_res_volume:"ic_speaker_on_24",xid_send:"ic_send_24",xid_res_send:"ic_send_24",xid_link:"ic_link_24",xid_res_link:"ic_link_24",xid_jump:"ic_jump_24",xid_res_jump:"ic_jump_24",xid_condition:"ic_condition_24",xid_text:"ic_text_24",xid_res_text:"ic_text_24",xid_vibrate:"ic_vibrate_24",xid_res_vibrate:"ic_vibrate_24",xid_stop:"ic_stop_24",xid_res_stop:"ic_stop_24",xid_assign:"ic_formular_24",xid_res_assign:"ic_formular_24",xid_camera:"ic_camera_24",xid_res_camera:"ic_camera_24",xid_reset:"ic_reset",xid_res_reset:"ic_reset",xid_ios_effect:"ic_blur_24",xid_res_ios_effect:"ic_blur_24",xid_res_speak:"ic_text_to_speech_24",xid_speak:"ic_text_to_speech_24",xid_res_voice:"ic_mic_24",xid_res_focus:"ic_focus_24"},$={xid_tap:"Tap",xid_double_tap:"Double Tap",xid_touch_down:"Touch Down",xid_touch_up:"Touch Up",xid_long_press:"Long Press",xid_fling:"Fling",xid_pull:"Pull",xid_drag:"Drag",xid_pinch:"Pinch",xid_rotate:"Rotate",xid_chain:"Chain",xid_range:"Range",xid_on_load:"Start",xid_start:"Start",xid_receive:"Receive",xid_tilt:"Tilt",xid_compass:"Compass",xid_sound:"Sound",xid_force_touch:"3D Touch",xid_mouse_over:"Mouse Over",xid_mouse_out:"Mouse Out",xid_key:"Press",xid_press:"Press",xid_focus:"Focus",xid_return_key:"Return",xid_proximity:"Proximity",xid_change:"Detect",xid_detect:"Detect",xid_voice:"Voice Command"},T={xid_move:"Move",xid_res_move:"Move",xid_scale:"Scale",xid_res_scale:"Scale",xid_rotate:"Rotate",xid_res_rotate:"Rotate",xid_rotate_3d:"3D Rotate",xid_res_rotate_3d:"3D Rotate",xid_opacity:"Opacity",xid_res_opacity:"Opacity",xid_color:"Color",xid_res_color:"Color",xid_radius:"Radius",xid_res_radius:"Radius",xid_border:"Border",xid_res_border:"Border",xid_shadow:"Shadow",xid_res_shadow:"Shadow",xid_scroll:"Scroll",xid_res_scroll:"Scroll",xid_reorder:"Reorder",xid_res_reorder:"Reorder",xid_playback:"Playback",xid_res_playback:"Playback",xid_media_source:"Media Source",xid_res_media_source:"Media Source",xid_volume:"Volume",xid_res_volume:"Volume",xid_send:"Send",xid_res_send:"Send",xid_link:"Link",xid_res_link:"Link",xid_jump:"Jump",xid_res_jump:"Jump",xid_condition:"Condition",xid_text:"Text",xid_res_text:"Text",xid_vibrate:"Vibrate",xid_res_vibrate:"Vibrate",xid_stop:"Stop",xid_res_stop:"Stop",xid_assign:"Formula",xid_res_assign:"Formula",xid_camera:"Camera",xid_res_camera:"Camera",xid_reset:"Reset",xid_res_reset:"Reset",xid_ios_effect:"Backgroun
1d Blur",xid_res_ios_effect:"Background Blur",xid_speak:"Speak",xid_res_speak:"Speak",xid_res_voice:"Listen",xid_res_focus:"Focus"},E="https://www.protopie.io/learn/docs/mcp-code-mcp-introduction",R=[{agent:"claude-code",label:"Claude Code",setup_content:`claude mcp add protopie-code-mcp -- npx @protopie.io/code-mcp && 2npx -y @protopie.io/code-mcp install-skill -a claude-code`},{agent:"codex",label:"Codex",setup_content:`codex mcp add protopie-code-mcp -- npx @protopie.io/code-mcp && 3npx -y @protopie.io/code-mcp install-skill -a codex`},{agent:"antigravity",label:"Antigravity",setup_content:"npm install -g @protopie.io/code-mcp"},{agent:"other",label:"Other Agents",setup_content:`Set up "ProtoPie Code MCP" in the environment you are running in. Read the install guide and follow its "For AI agents" section exactly: ${E}`,setup_content_type:"prompt"}],L="layer",M=(e,r)=>{if(!e)return"Interaction";let t="RESPONSE"===r?T:$;return t[e]?t[e]:e.replace(/^xid_res_/,"").replace(/^xid_/,"").split("_").filter(Boolean).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(" ")},z=e=>null==e||Number.isNaN(e)?null:`${Math.round(1e3*e)}ms`,N=e=>null==e?null:"number"==typeof e?c(e):"boolean"==typeof e?e?"On":"Off":"string"==typeof e&&e.length>0?e:null,P=(e,r)=>{if(!e)return null;for(let i of e){var t;if(i.id===r)return i.name;let e=P(null!=(t=i.children)?t:i.layers,r);if(e)return e}return null},O=e=>{var r,t,i,n;let l=null!=(r=e.typeName)?r:M(e.type,"TRIGGER"),a=null!=(t=e.layerName)?t:L;return{id:`${e.eventId}`,interaction:{type:null!=(i=e.type)?i:"trigger",typeName:null!=(n=e.typeName)?n:M(e.type,"TRIGGER"),targetType:"TRIGGER",triggerLayerId:e.layerId,responseLayerIds:e.children.map(e=>e.layerId).filter(e=>!!e),rawData:e.rawData},targetType:"TRIGGER",typeName:l,title:`${l} "${a}"`,targetName:a,responseCount:e.children.length,details:[]}},D=(e,r)=>{var t,i,n,l;let a=null!=(t=r.typeName)?t:M(r.type,"RESPONSE"),o=null!=(i=r.layerName)?i:L;return{id:`${r.eventId}`,interaction:{type:null!=(n=r.type)?n:"response",typeName:null!=(l=r.typeName)?l:M(r.type,"RESPONSE"),targetType:"RESPONSE",triggerLayerId:e.layerId,responseLayerIds:r.layerId?[r.layerId]:[],rawData:r.rawData},targetType:"RESPONSE",typeName:a,title:a.toUpperCase(),targetName:o,details:(e=>{var r,t,i;let n=e.rawData;if(!n)return[];let l=[],a=e.endTime>e.startTime?`${Math.round(e.endTime-e.startTime)}ms`:null,o=e.delay>0?`${Math.round(e.delay)}ms`:null,s="number"==typeof n.duration?z(n.duration):null,d="number"==typeof n.delay&&n.delay>0?z(n.delay):null,c=N(null!=(r=n.easingFunction)?r:n.easing);for(let[e,r]of((null!=s?s:a)&&l.push({label:"Duration",value:null!=(t=null!=s?s:a)?t:""}),c&&l.push({label:"Easing",value:c}),(null!=d?d:o)&&l.push({label:"Delay",value:null!=(i=null!=d?d:o)?i:""}),[["rotation","Rotation"],["scaleX","Scale X"],["scaleY","Scale Y"],["x","X"],["y","Y"],["width","Width"],["height","Height"],["opacity","Opacity"]])){let t=N(n[e]);t&&l.push({label:r,value:t})}return l})(r)}},G=e=>new Set([e.triggerLayerId,...e.responseLayerIds].filter(e=>!!e)),H=e=>{var r;return(null==(r=e[0])?void 0:r.typeName)==="Start"?"Start":"Group"};var F=t(11546),B=t(16326),U=t(65128),V=t(9142);let Y=V.Ay.div` 4 position: relative; 5 display: flex; 6 align-items: center; 7 justify-content: center; 8 flex: 1; 9 min-width: 0; 10 height: 100%; 11 padding: 40px 24px; 12 background-color: var(--gray-100, #f5f5f5); 13 overflow: hidden; 14 box-sizing: border-box; 15`,X=V.Ay.div` 16 position: relative; 17 width: 100%; 18 height: 100%; 19 20 .pie-view { 21 display: flex; 22 align-items: center; 23 justify-content: center; 24 } 25`,q=V.Ay.div` 26 position: absolute; 27 inset: 0; 28 display: flex; 29 align-items: center; 30 justify-content: center; 31 pointer-events: none; 32`,Z=V.Ay.div` 33 position: absolute; 34 left: 24px; 35 bottom: 24px; 36 display: flex; 37 align-items: center; 38 height: 32px; 39 padding: 0 4px; 40 background: var(--background-surface-primary, #ffffff); 41 border: 1px solid var(--border-neutral-seperator-subtle, #e6e6e6); 42 border-radius: 8px; 43 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); 44 z-index: 1; 45`,W=V.Ay.button` 46 display: flex; 47 align-items: center; 48 justify-content: center; 49 width: 24px; 50 height: 24px; 51 padding: 0; 52 color: var(--fill-interactive-primary, #555555); 53 background: transparent; 54 border: 0; 55 border-radius: 4px; 56 cursor: pointer; 57 58 &:hover:not(:disabled) { 59 background: var(--background-interactive-secondary-hover, rgba(0, 0, 0, 0.05)); 60 } 61 62 &:disabled { 63 color: var(--fill-interactive-disabled, #bbbbbb); 64 cursor: default; 65 } 66`,K=V.Ay.input` 67 width: 40px; 68 height: 24px; 69 padding: 0; 70 color: var(--gray-700, #555555); 71 font-family: inherit; 72 font-weight: 400; 73 font-size: 12px; 74 line-height: 16px; 75 text-align: center; 76 background: transparent; 77 border: 0; 78 border-radius: 4px; 79 outline: none; 80 81 &:hover:not(:disabled):not(:focus) { 82 background: var(--background-interactive-secondary-hover, rgba(0, 0, 0, 0.05)); 83 } 84 85 &:focus { 86 background: var(--background-surface-primary, #ffffff); 87 outline: 1px solid var(--border-interactive-primary, #2680eb); 88 } 89 90 &:disabled { 91 color: var(--fill-interactive-disabled, #bbbbbb); 92 cursor: default; 93 } 94`;var J=t(92489);let Q=(0,l.createContext)({isReady:!1,initError:null}),ee=(0,l.createContext)({init:async()=>{},destroy:()=>{},getManager:()=>null}),er=({children:e})=>{let r=(0,l.useRef)(null),n=(0,l.useRef)(null),[a,o]=(0,l.useState)({isReady:!1,initError:null}),s=(0,l.useCallback)(()=>{var e;null==(e=r.current)||e.destroy(),r.current=null,n.current=null,o({isReady:!1,initError:null})},[]),d=(0,l.useCallback)(async({pieModel:e,resourceProvider:i})=>{if("u"<typeof window)return;if(n.current)return n.current;let l=(async()=>{try{let{CodeModeManager:n}=await Promise.resolve().then(t.t.bind(t,25611,23));
94r.current&&(r.current.destroy(),r.current=null),r.current=new n({pieModel:e,resourceProvider:i,imageUrlBase:(0,J.EB)("/images/engine"),webEngineImageUrlBase:(0,J.EB)("/images/engine")}),o({isReady:!0,initError:null})}catch(i){r.current=null;let e="string"==typeof i?i:U.bF,t=i instanceof Error?i:Error(e);throw o({isReady:!1,initError:t}),t}finally{n.current=null}})();return n.current=l,l},[]),c=(0,l.useCallback)(()=>r.current,[]),u=(0,l.useMemo)(()=>({init:d,destroy:s,getManager:c}),[d,s,c]);return(0,l.useEffect)(()=>()=>{var e;null==(e=r.current)||e.destroy(),r.current=null},[]),(0,i.jsx)(Q.Provider,{value:a,children:(0,i.jsx)(ee.Provider,{value:u,children:e})})},et=()=>(0,l.useContext)(Q),ei=()=>(0,l.useContext)(ee),en=e=>null===e?"100%":`${Math.round(100*e)}%`,el=async({manager:e,host:r,isMounted:i,onCreated:n,onResizeTimerCreated:l})=>{let{CodeModePreview:a}=await Promise.resolve().then(t.t.bind(t,25611,23));if(!i())return;let o=new a(e,r,{backgroundColor:"#F5F5F5"});n(o),requestAnimationFrame(()=>{i()&&(o.onResize(),l(window.setTimeout(()=>{o.onResize()},U.iL)))})},ea=({isLoading:e})=>{let r=(0,l.useRef)(null),t=(0,l.useRef)(null),[n,a]=(0,l.useState)(null),[o,s]=(0,l.useState)("100%"),[d,c]=(0,l.useState)(!1),{isReady:u}=et(),{getManager:p}=ei(),x=(0,l.useCallback)(()=>{var e;null==(e=t.current)||e.destroy(),t.current=null,a(null)},[]),f=(0,l.useCallback)(e=>{"number"==typeof e?a(e):a(null)},[]),h=(0,l.useCallback)(()=>{var e;f(null==(e=p())?void 0:e.zoomOut())},[f,p]),g=(0,l.useCallback)(()=>{var e;f(null==(e=p())?void 0:e.zoomIn())},[f,p]),y=(0,l.useCallback)(e=>{var r,t,i,n;let l=Number.parseFloat(e.replace("%","").trim());if(!Number.isFinite(l))return null!=(i=null==(n=p())?void 0:n.getZoom())?i:null;let a=Math.min(Math.max(l,13),25600);return null!=(r=null==(t=p())?void 0:t.setZoom(a/100))?r:null},[p]),_=(0,l.useCallback)(e=>{s(e.target.value)},[]),v=(0,l.useCallback)(e=>{c(!0),e.target.select()},[]),m=(0,l.useCallback)(e=>{c(!1),f(y(e.target.value))},[f,y]),b=(0,l.useCallback)(e=>{if("Enter"===e.key){e.preventDefault(),e.currentTarget.blur();return}"Escape"===e.key&&(e.preventDefault(),s(en(n)),e.currentTarget.blur())},[n]);(0,l.useEffect)(()=>{if(!u||e||!r.current)return;let t=r.current,i=e=>{var r;if(!e.ctrlKey&&!e.metaKey)return;e.preventDefault();let t=p();if(!t)return;let i=(null!=(r=t.getZoom())?r:1)*Math.exp(-(.01*e.deltaY));f(t.setZoom(i))};return t.addEventListener("wheel",i,{passive:!1}),()=>t.removeEventListener("wheel",i)},[u,e,p,f]),(0,l.useEffect)(()=>{if(!u||!r.current)return;let e=p();if(!e)return;f(e.getZoom());let i=!0,n=null;return el({manager:e,host:r.current,isMounted:()=>i,onCreated:e=>{t.current=e},onResizeTimerCreated:e=>{n=e}}),()=>{i=!1,null!==n&&clearTimeout(n),x()}},[u,p,f,x]),(0,l.useEffect)(()=>{d||s(en(n))},[n,d]);let w=e||!u||null!==n&&n<=.13,j=e||!u||null!==n&&n>=256,k=e||!u;return(0,i.jsxs)(Y,{children:[(0,i.jsx)(X,{ref:r,"data-testid":"canvas-preview-host"}),(0,i.jsxs)(Z,{"aria-label":"Canvas zoom controls",children:[(0,i.jsx)(W,{type:"button","aria-label":"Zoom out",disabled:w,onClick:h,children:(0,i.jsx)(F.Icon,{name:"ic_subtract_24",size:16,color:"currentColor","aria-hidden":"true"})}),(0,i.jsx)(K,{type:"text",inputMode:"numeric","aria-label":"Zoom level",value:o,disabled:k,onChange:_,onFocus:v,onBlur:m,onKeyDown:b}),(0,i.jsx)(W,{type:"button","aria-label":"Zoom in",disabled:j,onClick:g,children:(0,i.jsx)(F.Icon,{name:"ic_add_24",size:16,color:"currentColor","aria-hidden":"true"})})]}),e&&(0,i.jsx)(q,{children:(0,i.jsx)(B.m,{size:32})})]})},eo=V.Ay.div` 95 display: flex; 96 flex-direction: column; 97 width: 100vw; 98 height: 100vh; 99 background-color: var(--gray-100, #f5f5f5); 100 overflow: hidden; 101`,es=V.Ay.div` 102 display: flex; 103 flex: 1; 104 min-height: 0; 105`;var ed=t(6659),ec=t(72079),eu=t(14150),ep=t(31147),ex=t(87229),ef=t(86206),eh=t(27792);let eg=V.Ay.header` 106 position: relative; 107 display: flex; 108 align-items: center; 109 justify-content: space-between; 110 height: 56px; 111 padding: 0 16px; 112 background-color: var(--gray-white, #ffffff); 113 border-bottom: 1px solid var(--gray-250, #e0e0e0); 114 flex-shrink: 0; 115`,ey=V.Ay.div` 116 display: flex; 117 align-items: center; 118 gap: 4px; 119 min-width: 0; 120`,e_=V.Ay.div` 121 display: flex; 122 align-items: center; 123 gap: 4px; 124 height: 40px; 125 padding: 0 8px 0 12px; 126 border-radius: 4px; 127`,ev=V.Ay.span` 128 font-weight: 600; 129 font-size: 12px; 130 line-height: 16px; 131 color: var(--gray-750, #373737); 132 white-space: nowrap; 133`,em=V.Ay.span` 134 font-weight: 600; 135 font-size: 12px; 136 line-height: 16px; 137 color: var(--gray-450, #999999); 138`,eb=V.Ay.span` 139 font-weight: 600; 140 font-size: 12px; 141 line-height: 16px; 142 color: var(--gray-450, #999999); 143 white-space: nowrap; 144`;V.Ay.div` 145 position: absolute; 146 left: 50%; 147 bottom: 0; 148 transform: translateX(-50%); 149 display: flex; 150 align-items: center; 151 padding: 0 24px; 152`;let ew=V.Ay.div` 153 display: flex; 154 align-items: center; 155 gap: 16px; 156`,ej=(0,V.Ay)(eh.g)` 157 padding: 0 16px; 158`,ek=(0,V.Ay)(ep.My)` 159 ${ef._t} { 160 right: 0; 161 } 162 163 ${ex.MX} { 164 margin-left: 0; 165 } 166`,eC=({projectName:e,copyLinkUrl:r,onBack:t,onPreview:n})=>{let[a,o]=(0,l.useState)(!1);return(0,i.jsxs)(eg,{children:[(0,i.jsxs)(ey,{children:[(0,i.jsx)(ec.K,{name:"ic_arrow_backward_24",size:32,color:"var(--fill-interactive-primary, #373737)",onClick:t,"aria-label":"Back"}),(0,i.jsxs)(e_,{children:[(0,i.jsx)(ev,{children:e}),(0,i.jsx)(em,{children:"/"}),(0,i.jsx)(eb,{children:"Dev View"}),(0,i.jsx)(eu.E,{text:"Beta",size:"small",type:"pill"})]})]}),(0,i.jsxs)(ew,{children:[(0,i.jsx)(ed.$,{startIcon:"ic_preview_24",variant:"outlined",color:"secondary",size:"medium",onClick:n,children:"Preview"}),(0,i.jsx)(ej,{copyLinkUrl:r,disabled:!r}),(0,i.jsx)(ek,{isVisible:a,onClick:()=>{o(e=>!e)},onOutsidePopupClick:()=>{o(!1)}})]})]})};var eA=t(33657);let eI=/^[A-Za-z0-9_-]+$/,eS=e=>!!e&&eI.test(e),e$=e=>{if(!e)return!1;let r=e.split("/");return r.length<=2&&r.every(e=>eS(e))},eT=({host:e,pieId:r})=>e&&r?new URL(`/p/${r}/code`,(e=>{let r=e.length;for(;r>0&&"/"===e[r-1];)r-=1;return e.slice(0,r)})(e)).toString():null;var eE=t(25611);let eR=(e,r)=>{for(let i of e){var t;if(i.id===r)return i;let e=eR(null!=(t=i.children)?t:[],r);if(e)return e}return null},eL=e=>{let r=[];for(let t=e.length-1;t>=0;t-=1){let i=e[t];r.push(i.children?{...i,children:eL(i.children)}:i)}return r};var eM=t(95203),ez=t(97491),eN=t(17597),eP=t(58594),eO=t(19904),eD=t(58067),eG=t(54219),eH=t(45958);let eF=Error("No version available for this pie"),eB=(0,V.AH)` 167 scrollbar-width: thin; 168 scrollbar-color: transparent transparent; 169 170 &::-webkit-scrollbar {
171 width: 6px; 172 height: 6px; 173 } 174 175 &::-webkit-scrollbar-thumb { 176 background-color: transparent; 177 border-radius: 4px; 178 transition: background-color 0.15s ease-out; 179 } 180 181 &::-webkit-scrollbar-track { 182 background: transparent; 183 } 184 185 &:hover { 186 scrollbar-color: rgba(0, 0, 0, 0.3) transparent; 187 } 188 189 &:hover::-webkit-scrollbar-thumb { 190 background-color: rgba(55, 55, 55, 0.2); 191 } 192`,eU=V.Ay.section` 193 display: flex; 194 flex-direction: column; 195 flex: 1; 196 min-height: 0; 197 background-color: var(--gray-white, #ffffff); 198`,eV=V.Ay.div` 199 display: flex; 200 align-items: center; 201 height: 32px; 202 padding: 12px 16px 4px; 203 font-weight: 600; 204 font-size: 13px; 205 line-height: 16px; 206 color: var(--gray-900, #181818); 207`,eY=V.Ay.ul` 208 display: flex; 209 flex-direction: column; 210 flex: 1; 211 min-height: 0; 212 overflow-y: auto; 213 ${eB} 214`,eX=V.Ay.li` 215 position: relative; 216 display: flex; 217 align-items: center; 218 gap: 8px; 219 width: 100%; 220 height: 32px; 221 padding: 8px 16px; 222 padding-left: ${({$depth:e})=>16+24*e}px; 223 cursor: pointer; 224 225 ${({$selected:e})=>e&&(0,V.AH)` 226 background-color: var(--purple-600, #6d4ff0); 227 color: var(--gray-white, #ffffff); 228 `} 229 230 ${({$highlighted:e,$selected:r})=>e&&!r&&(0,V.AH)` 231 background-color: var(--opacity-purple400-8, #8c7dff14); 232 `} 233 234 ${({$interactionHighlighted:e,$selected:r})=>e&&(0,V.AH)` 235 box-shadow: inset 2px 0 0 0 var(--border-interactive-brand, #8169ff); 236 ${!r&&(0,V.AH)` 237 background-color: var(--opacity-purple400-8, #8c7dff14); 238 `} 239 `} 240 241 ${({$faded:e})=>e&&(0,V.AH)` 242 opacity: 0.5; 243 `} 244 245 &:hover { 246 background-color: ${({$selected:e})=>e?"var(--purple-600, #6d4ff0)":"var(--gray-100, #f5f5f5)"}; 247 } 248`,eq=V.Ay.button` 249 display: flex; 250 align-items: center; 251 justify-content: center; 252 width: 16px; 253 height: 16px; 254 padding: 0; 255 background: none; 256 border: 0; 257 cursor: ${({$isPlaceholder:e})=>e?"default":"pointer"}; 258 flex-shrink: 0; 259`,eZ=V.Ay.span` 260 display: flex; 261 align-items: center; 262 justify-content: center; 263 width: 16px; 264 height: 16px; 265 flex-shrink: 0; 266 opacity: ${({$faded:e})=>e?.5:1}; 267`,eW=V.Ay.span` 268 flex: 1; 269 font-size: 12px; 270 line-height: 16px; 271 color: ${({$color:e})=>e}; 272 white-space: nowrap; 273 overflow: hidden; 274 text-overflow: ellipsis; 275`,eK=V.Ay.button` 276 display: flex; 277 align-items: center; 278 justify-content: center; 279 width: 24px; 280 height: 24px; 281 padding: 4px; 282 background: none; 283 border: 0; 284 cursor: pointer; 285 flex-shrink: 0; 286`,eJ={AUDIO:"ic_audio_24",CAMERA:"ic_camera_24",COMPONENT:"ic_component_instance_local_24",CONTAINER:"ic_container_24",IMAGE:"ic_image_24",IOS_EFFECT:"ic_shape_24",LOTTIE:"ic_lottie_24",OVAL:"ic_oval_24",RECT:"ic_rectangle_24",SCENE:"ic_scene_portrait_24",SHAPE:"ic_shape_24",TEXT:"ic_text_24",TEXT_INPUT:"ic_input_24",VIDEO:"ic_video_24"},eQ=e=>eJ[e],e0=e=>"COMPONENT"===e?"var(--Teal-700, #309696)":"var(--fill-interactive-primary, #373737)",e1=({layers:e,onLayerClick:r,onToggleExpand:t,onToggleVisibility:n})=>(0,i.jsxs)(eU,{children:[(0,i.jsx)(eV,{children:"Layers"}),(0,i.jsx)(eY,{children:e.map(e=>{let l="var(--Teal-700, #309696)",a=e.componentColored?l:e0(e.iconType),o="var(--gray-900, #181818)";return e.componentColored&&(o=l),e.selected&&(o="var(--gray-white, #ffffff)"),(0,i.jsxs)(eX,{$selected:e.selected,$highlighted:e.ancestorHighlighted||e.descendantHighlighted||e.hovered,$interactionHighlighted:e.interactionHighlighted,$depth:e.depth,$faded:e.faded,onClick:()=>null==r?void 0:r(e.id),children:[e.expandable?(0,i.jsx)(eq,{type:"button","aria-label":`${e.name} toggle expand`,onClick:i=>{i.stopPropagation(),null==r||r(e.id),null==t||t(e.id)},children:(0,i.jsx)(F.Icon,{name:e.expanded?"ic_drop_downward_24":"ic_drop_forward_24",size:16,color:e.selected?"var(--gray-white, #ffffff)":"var(--fill-interactive-primary, #373737)"})}):(0,i.jsx)(eq,{as:"span",$isPlaceholder:!0}),(0,i.jsx)(eZ,{$faded:e.faded,children:(0,i.jsx)(F.Icon,{name:eQ(e.iconType),size:16,color:a})}),(0,i.jsx)(eW,{$color:o,children:e.name}),e.hidden&&(0,i.jsx)(eK,{type:"button","aria-label":"Toggle visibility",onClick:r=>{r.stopPropagation(),null==n||n(e.id)},children:(0,i.jsx)(F.Icon,{name:"ic_visibility_off_24",size:16,color:"var(--fill-interactive-primary, #373737)"})})]},e.id)})})]}),e2=V.Ay.aside` 287 display: flex; 288 flex-direction: column; 289 width: 284px; 290 height: 100%; 291 background-color: var(--gray-white, #ffffff); 292 border-right: 1px solid var(--gray-250, #e0e0e0); 293 flex-shrink: 0; 294`,e4=V.Ay.div` 295 display: flex; 296 flex: 1; 297 align-items: center; 298 justify-content: center; 299`,e6=V.Ay.section` 300 position: relative; 301 display: flex; 302 flex-direction: column; 303 width: 100%; 304 background-color: var(--gray-white, #ffffff); 305 border-bottom: ${1}px solid var(--gray-250, #e0e0e0); 306 flex-shrink: 0; 307`,e5=V.Ay.div` 308 display: flex; 309 align-items: center; 310 height: ${32}px; 311 padding: 8px 16px 4px; 312 font-weight: 600; 313 font-size: 13px; 314 line-height: 16px; 315 color: var(--gray-900, #181818); 316`,e8=V.Ay.ul` 317 display: flex; 318 flex-direction: column; 319 flex: 1; 320 min-height: 0; 321 padding: 4px 16px 0; 322 overflow-y: auto; 323 ${eB} 324`,e3=V.Ay.div` 325 position: absolute; 326 left: 0; 327 right: 0; 328 bottom: -3px; 329 display: flex; 330 align-items: center; 331 justify-content: center; 332 height: 6px; 333 cursor: ns-resize; 334 z-index: 1; 335 336 ${({$resizing:e})=>e&&(0,V.AH)` 337 > span { 338 background-color: var(--purple-500, #8169ff); 339 } 340 `} 341`,e7=V.Ay.span` 342 display: block; 343 width: 100%; 344 height: 1px; 345 background-color: transparent; 346 transition: background-color 0.15s ease; 347 348 ${e3}:hover & { 349 background-color: var(--purple-500, #8169ff); 350 } 351`,e9=V.Ay.button` 352 display: flex; 353 align-items: center; 354 gap: 8px; 355 width: 100%; 356 padding: 8px; 357 background-color: ${({$current:e})=>e?"#e3deff80":"transparent"}; 358 border: 0; 359 border-radius: 4px; 360 cursor: pointer; 361 text-align: left; 362 363 &:hover { 364 background-color: ${({$current:e})=>e?"#e3deff80":"var(--gray-100, #f5f5f5)"}; 365 } 366`,re=V.Ay.div` 367 display: flex; 368 align-items: center; 369 justify-content: center; 370 width: 64px; 371 height: 64px; 372 padding: 2px; 373 background-color: var(--gray-100, #f5f5f5); 374 overflow: hidden; 375 flex-shrink: 0; 376 377 img { 378 max-width: 100%; 379 max-height: 100%; 380 object-fit: contain; 381 } 382`,rr=V.Ay.span` 383 flex: 1; 384 font-weight: ${({$current:e})=>e?600:400}; 385 font-size: 12px; 386 line-height: 16px; 387 color: ${({$current:e})=>e?"var(--purple-500, #8169ff)":"var(--gray-900, #181818)"}; 388`,rt=({scenes:e,currentSceneId:r,onSelect:t,height:n,minHeight:a=132,maxHeight:o=400,onHeightChange:s})=>{let{isResizing:d,start:c}=(({value:e,min:r,max:t,onChange:i})=>{let[n,a]=(0,l.useState)(!1),o=(0,l.useRef)(null),s=(0,l.useRef)({min:r,max:t,onChange:i});(0,l.useEffect)(()=>{s.current={min:r,max:t,onChange:i}},[r,t,i]);let d=(0,l.useCallback)(r=>{r.preventDefault(),o.current={startY:r.clientY,startValue:e},a(!0)},[e]),c=(0,l.useCallback)(e=>{let r,t,i=o.current;if(!i)return;let n=s.current;n.onChange((r=i.startValue+(e.clientY-i.startY),t=n.min,Math.min(n.max,Math.max(t,r))))},[]),u=(0,l.useCallback)(()=>{o.current=null,a(!1)},[]);return(0,l.useEffect)(()=>
388{if(n)return document.body.style.cursor="ns-resize",document.body.style.userSelect="none",window.addEventListener("mousemove",c),window.addEventListener("mouseup",u),()=>{window.removeEventListener("mousemove",c),window.removeEventListener("mouseup",u),document.body.style.cursor="",document.body.style.userSelect=""}},[n,c,u]),{isResizing:n,start:d}})({value:n,min:a,max:o,onChange:s}),u=(0,l.useMemo)(()=>({height:n}),[n]);return(0,i.jsxs)(e6,{style:u,children:[(0,i.jsx)(e5,{children:"Scenes"}),(0,i.jsx)(e8,{children:e.map(e=>{let n=e.id===r;return(0,i.jsxs)(e9,{type:"button",$current:n,onClick:()=>null==t?void 0:t(e.id),children:[(0,i.jsx)(re,{children:e.thumbnailUrl?(0,i.jsx)("img",{src:e.thumbnailUrl,alt:e.name}):null}),(0,i.jsx)(rr,{$current:n,children:e.name})]},e.id)})}),(0,i.jsx)(e3,{role:"separator","aria-orientation":"horizontal",$resizing:d,onMouseDown:c,children:(0,i.jsx)(e7,{})})]})},ri=({scenes:e,currentSceneId:r,onSceneSelect:t,layers:n,onLayerClick:a,onToggleExpand:o,onToggleVisibility:s,isLoading:d})=>{let[c,u]=(0,l.useState)(292);return d?(0,i.jsx)(e2,{children:(0,i.jsx)(e4,{children:(0,i.jsx)(B.m,{size:24})})}):(0,i.jsxs)(e2,{children:[(0,i.jsx)(rt,{scenes:e,currentSceneId:r,onSelect:t,height:c,minHeight:125,maxHeight:400,onHeightChange:u}),(0,i.jsx)(e1,{layers:n,onLayerClick:a,onToggleExpand:o,onToggleVisibility:s})]})};var rn=t(83042),rl=t.n(rn),ra=t(70584);let ro=V.Ay.div` 389 display: flex; 390 flex-direction: column; 391 width: 100%; 392`,rs=V.Ay.div` 393 display: flex; 394 justify-content: center; 395 width: 100%; 396 min-height: 0; 397 padding: 60px 16px 0; 398`,rd=V.Ay.p` 399 margin: 0; 400 font-weight: 500; 401 font-size: 12px; 402 line-height: 16px; 403 color: var(--text-quinary, #999999); 404 text-align: center; 405 white-space: pre-line; 406`,rc=V.Ay.section` 407 display: flex; 408 flex-direction: column; 409 gap: 16px; 410 width: 100%; 411 padding: 20px 16px; 412 border-bottom: 1px solid var(--border-neutral-seperator-strong, #e0e0e0); 413`,ru=(0,V.Ay)(rc)` 414 padding-top: 20px; 415`,rp=V.Ay.p` 416 margin: 0; 417 font-weight: 600; 418 font-size: 14px; 419 line-height: 16px; 420 color: var(--text-tertiary, #555555); 421`,rx=V.Ay.div` 422 display: flex; 423 align-items: flex-start; 424 width: 100%; 425`,rf=V.Ay.div` 426 display: flex; 427 flex-direction: column; 428 gap: 16px; 429 width: 126px; 430 min-width: 0; 431 overflow: hidden; 432`,rh=V.Ay.div` 433 display: flex; 434 align-items: flex-start; 435 gap: 4px; 436 min-width: 0; 437 overflow: hidden; 438`,rg=V.Ay.span` 439 flex: 0 0 auto; 440 font-family: ${ra.xG}; 441 font-weight: 600; 442 font-size: 14px; 443 line-height: normal; 444 color: var(--text-quaternary, #707070); 445 white-space: nowrap; 446`,ry=V.Ay.span` 447 min-width: 0; 448 font-family: ${ra.xG}; 449 font-weight: 600; 450 font-size: 14px; 451 line-height: normal; 452 color: var(--yellow-400, #f99b1e); 453 white-space: nowrap; 454 overflow: hidden; 455 text-overflow: ellipsis; 456`,r_=(0,V.Ay)(rh)` 457 align-items: center; 458`,rv=V.Ay.div` 459 display: flex; 460 align-items: center; 461 gap: 8px; 462 min-width: 0; 463 overflow: hidden; 464`,rm=V.Ay.div` 465 display: flex; 466 align-items: center; 467 gap: 3px; 468 min-width: 0; 469 overflow: hidden; 470`,rb=V.Ay.span` 471 flex: 0 0 auto; 472 width: 10px; 473 height: 10px; 474 background-color: ${({$color:e})=>null!=e?e:"var(--background-interactive-inverse, #ffffff)"}; 475 border: 1px solid var(--text-quaternary, #707070); 476 border-radius: 2px; 477`,rw=(0,V.Ay)(rg)` 478 min-width: 0; 479 overflow: hidden; 480 text-overflow: ellipsis; 481`,rj=V.Ay.div` 482 display: flex; 483 flex-direction: column; 484 width: 100%; 485 padding: 8px; 486 background-color: var(--background-surface-tertiary, #fafafa); 487 border-radius: 4px; 488`,rk=(0,V.Ay)(rg)` 489 display: block; 490 width: 100%; 491 white-space: pre-wrap; 492 word-break: break-word; 493`,rC=V.Ay.button` 494 display: flex; 495 align-items: center; 496 gap: 0; 497 width: 100%; 498 height: 40px; 499 padding: 8px 16px; 500 color: var(--text-quaternary, #707070); 501 background: transparent; 502 border: 0; 503 border-bottom: 1px solid var(--border-neutral-seperator-strong, #e0e0e0); 504 cursor: pointer; 505`,rA=V.Ay.span` 506 font-weight: 600; 507 font-size: 14px; 508 line-height: normal; 509 color: inherit; 510 white-space: nowrap; 511`,rI=V.Ay.section` 512 width: 100%; 513 border-bottom: 1px solid var(--border-neutral-seperator-strong, #e0e0e0); 514 515 ${rc}:last-child, 516 ${rC}:last-child { 517 border-bottom: 0; 518 } 519`,rS=({label:e,value:r})=>(0,i.jsxs)(rh,{children:[(0,i.jsx)(rg,{children:e}),(0,i.jsx)(ry,{children:r})]}),r$=({columns:e})=>(0,i.jsx)(rx,{children:e.map(e=>(0,i.jsx)(rf,{children:e.map(e=>(0,i.jsx)(rS,{label:e.label,value:e.value},e.label))},e.map(e=>e.label).join("/")))}),rT=({title:e,columns:r,compact:t})=>(0,i.jsxs)(t?ru:rc,{children:[e&&(0,i.jsx)(rp,{children:e}),(0,i.jsx)(r$,{columns:r})]});var rE=t(38326);let rR=V.Ay.div` 520 display: flex; 521 align-items: center; 522 width: 100%; 523 min-height: 40px; 524 padding: 8px 16px 0; 525 background-color: var(--background-surface-primary, #ffffff); 526 border-bottom: ${({$isOpen:e,$withClosedDivider:r})=>r&&!e?"1px solid var(--border-neutral-seperator-strong, #e0e0e0)":"0"}; 527`,rL=V.Ay.div` 528 display: flex; 529 align-items: center; 530 gap: 0; 531 margin-left: auto; 532`,rM=V.Ay.button` 533 display: flex; 534 align-items: center; 535 gap: 4px; 536 min-width: 0; 537 height: 32px; 538 padding: 0; 539 color: var(--text-primary, #181818); 540 background: transparent; 541 border: 0; 542 cursor: pointer; 543`,rz=V.Ay.p` 544 margin: 0; 545 font-weight: 600; 546 font-size: 14px; 547 line-height: 16px; 548 color: inherit; 549`,rN=V.Ay.button` 550 position: relative; 551 display: flex; 552 align-items: center; 553 justify-content: center; 554 width: 24px; 555 height: 24px; 556 padding: 0; 557 color: var(--fill-interactive-primary, #373737); 558 background-color: ${({$filled:e})=>e?"var(--background-interactive-secondary-hover, rgba(0, 0, 0, 0.05))":"transparent"}; 559 border: 0; 560 border-radius: 4px; 561 cursor: pointer; 562 563 &:hover { 564 background-color: var(--background-interactive-secondary-hover, rgba(0, 0, 0, 0.05)); 565 } 566`,rP=e=>{let r=(0,i.jsx)(rN,{type:"button","aria-label":e.label,$filled:e.filled,onClick:e.onClick,children:(0,i.jsx)(F.Icon,{name:e.iconName,size:18,color:"var(--fill-interactive-primary, #373737)"})},e.label);return e.tooltip?(0,i.jsx)(rE.m_,{content:e.tooltip,position:"right",children:r},e.label):r},rO=({title:e,isOpen:r,onToggle:t,actionItems:n,closedIconName:l="ic_caret_forward_24",openIconName:a="ic_caret_downward_24",withClosedDivider:o})=>{let s=!!(null==n?void 0:n.length);return(0,i.jsxs)(rR,{$isOpen:r,$withClosedDivider:o,children:[(0,i.jsxs)(rM,{type:"button","aria-expanded":r,onClick:t,children:[(0,i.jsx)(F.Icon,{name:r?a:l,size:12,color:"var(--fill-interactive-primary, #373737)"}),(0,i.jsx)(rz,{children:e})]}),s&&(0,i.jsx)(rL,{children:null==n?void 0:n.map(rP)})]})},rD=({layer:e})=>(0,i.jsx)(rT,{compact:!0,columns:m(e)}),rG=({layer:e})=>(0,i.jsxs)(rc,{children:[(0,i.jsx)(rp,{children:"Layer Options"}),(0,i.jsx)(rS,{label:"Lower layers touchable",value:x(e.passTouch)}),(0,i.jsx)(rS,{label:"Mask",value:x(e.isMask)})]}),rH=({layer:e})=>(0,i.jsxs)(rc,{children:[(0,i.jsx)(rp,{children:"Fill"}),(0,i.jsxs)(r_,{children:[(0,i.jsx)(rg,{children:"Color"}),(0,i.jsxs)(rv,{children:[(0,i.jsxs)(rm,{children:[(0,i.jsx)(rb,{$color:e.fillColor}),(0,i.jsx)(rw,{children:p(e.fillColor)})]}),(0,i.jsx)(ry,{children:u(e.fillOpacity)})]})]})]}),rF=({layer:e})=>(0,i.jsxs)(rc,{children:[(0,i.jsx)(rp,{children:"Text Value"}),(0,i.jsx)(rj,{children:(0,i.jsx)(rk,{children:f(e.text)})})]}),rB=({count:e,isOpen:r,onToggle:t})=>(0,i.jsxs)(rC,{type:"button","aria-expanded":r,onClick:t,children:[(0,i.jsx)(F.Icon,{name:"ic_more_vertical_24",size:24,color:"var(--text-quaternary, #707070)"}),(0,i.jsx)(rA,{children:`${e} more`})]}),rU={border:e=>(0,i.jsx)(rT,{title:"Border",columns:w(e)},"border"),shadow:e=>(0,i.jsx)(rT,{title:"Shadow",columns:j(e)},"shadow"),transform:e=>(0,i.jsx)(rT,{title:"Transform",columns:b(e)},"transform"),constraints:e=>(0,i.jsx)(rT,{title:"Constraints",columns:k(e)},"constraints"),layerOptions:e=>(0,i.jsx)(rG,{layer:e},"layer-options")},rV=({layer:e})=>{let[r,t]=(0,l.useState)(!0),[n,a]=(0,l.useState)(!1),o=C(e).map(r=>rU[r](e));return(0,l.useEffect)(()=>{a(!1)},[e.id]),(0,i.jsxs)(rI,{children:[(0,i.jsx)(rO,{title:"Design",actionItems:[{iconName:"ic_copy_alt_24",label:"Copy properties",tooltip:"
566Copy properties",onClick:()=>rl()([A("Geometry",m(e)),["Fill",`Color: ${p(e.fillColor)}`,`Opacity: ${u(e.fillOpacity)}`],...h(e)?[["Text Value",f(e.text)]]:[],...C(e).map(r=>"border"===r?A("Border",w(e)):"shadow"===r?A("Shadow",j(e)):"transform"===r?A("Transform",b(e)):"constraints"===r?A("Constraints",k(e)):["Layer Options",`Lower layers touchable: ${x(e.passTouch)}`,`Mask: ${x(e.isMask)}`])].map(e=>e.join(` 567`)).join(` 568 569`))}],isOpen:r,onToggle:()=>t(e=>!e)}),r&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(rD,{layer:e}),(0,i.jsx)(rH,{layer:e}),h(e)&&(0,i.jsx)(rF,{layer:e}),o.length>0&&(0,i.jsxs)(i.Fragment,{children:[!n&&(0,i.jsx)(rB,{count:o.length,isOpen:n,onToggle:()=>a(e=>!e)}),n&&o]})]})]})};var rY=t(51792),rX=t(78160),rq=t(51509),rZ=t(35188),rW=t(98027),rK=t(55413),rJ=t(10501);let rQ=V.Ay.div` 570 display: flex; 571 flex-direction: column; 572 gap: 8px; 573 width: 100%; 574`,r0=V.Ay.div` 575 font-family: Inter, sans-serif; 576 font-weight: 600; 577 font-size: 14px; 578 line-height: 16px; 579 color: var(--text-tertiary, #555555); 580`,r1=V.Ay.div` 581 display: flex; 582 padding: 16px; 583 border: 1px solid var(--background-canvas, #e9e9e9); 584 border-radius: 4px; 585`,r2=V.Ay.div` 586 display: grid; 587 grid-template-columns: 1fr 1fr; 588 row-gap: 8px; 589 column-gap: 16px; 590 width: 100%; 591`,r4=V.Ay.div` 592 display: flex; 593 align-items: center; 594 min-height: 24px; 595`,r6=(0,V.Ay)(ec.K)` 596 position: absolute; 597 top: 4px; 598 right: 4px; 599 width: 32px; 600 height: 32px; 601 opacity: 0; 602 transition: opacity 120ms ease; 603`,r5=V.Ay.div` 604 position: relative; 605 display: ${({$multiline:e})=>e?"block":"flex"}; 606 align-items: ${({$multiline:e})=>e?"stretch":"center"}; 607 justify-content: flex-start; 608 width: 100%; 609 min-height: 40px; 610 padding: 4px 80px 4px 8px; 611 font-family: ${ra.xG}; 612 font-weight: 400; 613 font-size: 12px; 614 line-height: 16px; 615 color: var(--text-primary, #181818); 616 text-align: left; 617 white-space: pre-wrap; 618 background-color: var(--background-surface-secondary, #efefef); 619 border: 0; 620 border-radius: 4px; 621 622 &:hover ${r6} { 623 opacity: 1; 624 } 625`;V.Ay.span` 626 color: ${({$tokenType:e})=>"key"===e?"#ce066a":"value"===e?"#436909":"#666666"}; 627`;let r8=({open:e,onClose:r})=>{var t;let[n,a]=(0,l.useState)(R[0].agent),{showAlert:o}=(0,eO.MW)(),s=null!=(t=R.find(({agent:e})=>e===n))?t:R[0],d="prompt"===s.setup_content_type;return(0,i.jsxs)(rX.A,{open:e,onClose:r,style:{width:544},children:[(0,i.jsx)(rq.c,{children:(0,i.jsx)(rq.L,{children:"Add ProtoPie to Your Tool"})}),(0,i.jsxs)(rZ.R,{style:{gap:12},children:[(0,i.jsxs)(rQ,{children:[(0,i.jsx)(r0,{children:"1. Select your agent"}),(0,i.jsx)(r1,{children:(0,i.jsx)(rK.z,{name:"setup-agent",value:n,onChange:e=>a(e),style:{width:"100%"},children:(0,i.jsx)(r2,{children:R.map(({agent:e,label:r})=>(0,i.jsx)(r4,{children:(0,i.jsx)(rJ.s,{value:e,children:r})},e))})})})]}),(0,i.jsxs)(rQ,{children:[(0,i.jsx)(r0,{children:d?"2. Copy the setup prompt":"2. Run the install command"}),(0,i.jsxs)(r5,{$multiline:d,children:[s.setup_content,(0,i.jsx)(r6,{name:"ic_copy_24",size:24,color:"var(--fill-interactive-primary, #373737)","aria-label":"Copy",title:"Copy",onClick:()=>{rl()(s.setup_content),o({title:d?"Install Prompt copied successfully":"Install command copied successfully"})}})]})]})]}),(0,i.jsxs)(rW.E,{layout:"stretch",children:[(0,i.jsx)(ed.$,{size:"large",variant:"outlined",color:"secondary",onClick:r,children:"Cancel"}),(0,i.jsx)(ed.$,{size:"large",color:"primary",onClick:r,children:"Done"})]})]})},r3=V.Ay.div` 628 width: 100%; 629`,r7=V.Ay.section` 630 display: flex; 631 flex-direction: column; 632 gap: 16px; 633 width: 100%; 634 padding: 0 16px 16px; 635 border-bottom: ${({$withDivider:e})=>e?"1px solid var(--border-neutral-seperator-strong, #e0e0e0)":"0"}; 636`,r9=V.Ay.p` 637 margin: 0; 638 font-weight: 600; 639 font-size: 14px; 640 line-height: 16px; 641 color: var(--text-tertiary, #555555); 642`,te=V.Ay.div` 643 display: flex; 644 flex-direction: column; 645 gap: 8px; 646 width: 100%; 647`,tr=V.Ay.div` 648 display: flex; 649 align-items: center; 650 width: 100%; 651 height: 30px; 652 min-width: 0; 653 padding: 8px; 654 font-family: ${ra.xG}; 655 font-weight: 400; 656 font-size: 10px; 657 line-height: 14px; 658 color: var(--blue-600, #0057b8); 659 white-space: nowrap; 660 overflow: hidden; 661 text-overflow: ellipsis; 662 background-color: var(--background-surface-secondary, #efefef); 663 border: 1px solid var(--border-neutral-seperator-strong, #e0e0e0); 664 border-radius: 8px; 665`,tt=V.Ay.p` 666 margin: 0; 667 font-weight: 400; 668 font-size: 11px; 669 line-height: 12px; 670 color: ${({$tone:e})=>"danger"===e?"var(--text-danger,#FC5356)":"var(--text-tertiary, #555555)"}; 671`,ti=V.Ay.button` 672 display: flex; 673 align-items: center; 674 justify-content: center; 675 width: 100%; 676 height: 24px; 677 padding: 8px 16px; 678 font-weight: 600; 679 font-size: 12px; 680 line-height: 16px; 681 color: var(--text-primary, #181818); 682 background-color: transparent; 683 border: 1px solid var(--border-interactive-strong-enabled, #bbbbbb); 684 border-radius: 4px; 685 cursor: pointer; 686 687 &:disabled { 688 color: var(--text-disabled, #bbbbbb); 689 background-color: var(--background-interactive-secondary-disabled, #f5f5f5);
690 cursor: not-allowed; 691 } 692 693 &:hover:not(:disabled) { 694 background-color: var(--background-interactive-secondary-hover, rgba(0, 0, 0, 0.05)); 695 } 696`,tn=({deepLinkUrl:e,helperText:r,helperTone:t="default",copyDisabled:n,displayLinkContent:a=!0,withContentDivider:o,withClosedHeaderDivider:s})=>{let[d,c]=(0,l.useState)(!0),[u,p]=(0,l.useState)(!1),{showAlert:x}=(0,eO.MW)(),f=(e=>{if(!e)return"";try{let r=new URL(e);return`â¦${r.pathname}${r.search}`}catch(r){return e}})(e),h=n||!e,g=a?r:"MCP links require Pro or Enterprise plan and Download Access. Ask the Pie owner.",y=a?t:"danger";return(0,i.jsxs)(r3,{children:[(0,i.jsx)(rO,{title:"MCP",isOpen:d,onToggle:()=>c(e=>!e),closedIconName:"ic_caret_downward_24",openIconName:"ic_caret_upward_24",withClosedDivider:s,actionItems:[{iconName:"ic_help_24",label:"Open MCP documentation",onClick:()=>{window.open(E,"_blank","noopener,noreferrer")}},{iconName:"ic_settings_24",label:"Set up agents",tooltip:"Set up agents",onClick:()=>p(!0)}]}),d&&(0,i.jsxs)(r7,{$withDivider:o,children:[(0,i.jsx)(r9,{children:"Selection details"}),(0,i.jsxs)(te,{children:[a&&(0,i.jsx)(tr,{children:f}),g&&(0,i.jsx)(tt,{$tone:y,children:g})]}),a&&(0,i.jsx)(ti,{type:"button",onClick:()=>{if(!e)return;rl()(e),x({title:"Dev view link copied successfully"});let r=(e=>{if(!e)return null;try{var r,t,i;let n=new URL(e),l=null==(i=/\/p\/([^/]+)\/code/.exec(n.pathname))?void 0:i[1],a=null!=(r=n.searchParams.get("scene"))?r:void 0,o=null!=(t=n.searchParams.get("layer"))?t:void 0;return{pieId:l,sceneId:a,layerId:o,scope:o?"layer":a?"scene":"pie"}}catch(e){return null}})(e);(null==r?void 0:r.pieId)&&rY.J.mcpLinkCopied({pie_id:r.pieId,url_type:r.scope,scene_id:r.sceneId,layer_id:r.layerId})},disabled:h,children:"Copy link"})]}),(0,i.jsx)(r8,{open:u,onClose:()=>p(!1)})]})},tl=({selectedLayerInfo:e,mcpDeepLinkUrl:r,mcpHelperText:t,mcpCopyDisabled:n,displayMcpLinkContent:l})=>(0,i.jsxs)(ro,{children:[(0,i.jsx)(rI,{children:(0,i.jsx)(tn,{deepLinkUrl:r,helperText:t,copyDisabled:n,displayLinkContent:l})}),e?(0,i.jsx)(rV,{layer:e}):(0,i.jsx)(rs,{children:(0,i.jsx)(rd,{children:`Select a layer 697to view design properties`})})]}),ta=V.Ay.div` 698 display: flex; 699 align-items: center; 700 justify-content: center; 701 flex: 1; 702 min-height: 0; 703`,to=V.Ay.p` 704 margin: 0; 705 padding: 16px; 706 font-weight: 500; 707 font-size: 14px; 708 line-height: 20px; 709 color: var(--text-quaternary, #707070); 710 text-align: center; 711 white-space: pre-line; 712`,ts=V.Ay.div` 713 display: flex; 714 flex-direction: column; 715 width: 100%; 716`,td=V.Ay.div` 717 display: flex; 718 flex-direction: column; 719 gap: 10px; 720 width: 100%; 721 padding: 6px 15px; 722`,tc=V.Ay.div` 723 position: relative; 724 display: flex; 725 flex-direction: column; 726 width: 252px; 727 overflow: hidden; 728 border: 1px solid var(--border-neutral-seperator-strong, #e0e0e0); 729 border-radius: 8px; 730 731 ${({$selected:e})=>e&&(0,V.AH)` 732 &::before { 733 content: ''; 734 position: absolute; 735 top: 0; 736 bottom: 0; 737 left: 0; 738 z-index: 1; 739 width: 4px; 740 background-color: rgba(140, 125, 255, 0.3); 741 pointer-events: none; 742 } 743 `} 744`,tu=V.Ay.button` 745 display: flex; 746 align-items: center; 747 width: 100%; 748 height: 24px; 749 padding: 0 12px; 750 background-color: var(--background-surface-secondary, #efefef); 751 border: 0; 752 border-bottom: 1px solid var(--background-surface-secondary, #efefef); 753 font-weight: 600; 754 font-size: 10px; 755 line-height: 12px; 756 color: var(--text-quinary, #999999); 757 text-align: left; 758 cursor: pointer; 759 760 ${({$selected:e})=>e&&(0,V.AH)` 761 color: var(--gray-white, #ffffff); 762 background-color: var(--border-interactive-brand, #8169ff); 763 border-bottom-color: var(--border-interactive-brand, #8169ff); 764 `} 765`,tp=V.Ay.div` 766 --interaction-title-color: var(--text-primary, #181818); 767 --interaction-muted-color: var(--text-quinary, #999999); 768 --interaction-detail-value-color: var(--text-quaternary, #707070); 769 770 display: flex; 771 flex-wrap: nowrap; 772 align-items: ${({$targetType:e})=>"TRIGGER"===e?"center":"flex-start"}; 773 gap: ${({$targetType:e})=>"TRIGGER"===e?"4px":"12px"}; 774 width: 100%; 775 box-sizing: border-box; 776 min-height: ${({$targetType:e})=>"TRIGGER"===e?"32px":"0"}; 777 padding: ${({$targetType:e})=>"TRIGGER"===e?"7px 11px":"8px 12px"}; 778 color: var(--text-primary, #181818); 779 text-align: left; 780 background-color: ${({$targetType:e})=>"TRIGGER"===e?"var(--background-interactive-secondary-default, #f5f5f5)":"transparent"}; 781 border: 0; 782 border-top: 1px solid var(--border-neutral-seperator-strong, #e0e0e0); 783 cursor: pointer; 784 785 ${({$selected:e})=>e&&(0,V.AH)` 786 --interaction-title-color: var(--gray-white, #ffffff); 787 --interaction-muted-color: var(--gray-white, #ffffff); 788 --interaction-detail-value-color: var(--gray-white, #ffffff); 789 790 color: var(--gray-white, #ffffff); 791 background-color: var(--border-interactive-brand, #8169ff); 792 border: 1px solid var(--border-interactive-brand, #8169ff); 793 border-radius: 0; 794 `} 795 796 ${({$highlighted:e,$selected:r})=>e&&!r&&(0,V.AH)` 797 border: 1px solid var(--border-interactive-brand, #8169ff); 798 border-radius: 0; 799 `} 800 801 &[data-emphasized='true'] + & { 802 border-top-color: transparent; 803 } 804 805 &:first-of-type:not([data-emphasized='true']) { 806 border-top: 0; 807 } 808 809 &:last-child[data-emphasized='true'] { 810 border-bottom-right-radius: 7px; 811 border-bottom-left-radius: 7px; 812 } 813`,tx=V.Ay.button` 814 display: flex; 815 align-items: center; 816 justify-content: center; 817 flex: 0 0 auto; 818 width: 16px; 819 height: 16px; 820 padding: 0; 821 background: none; 822 border: 0; 823 cursor: pointer; 824`,tf=V.Ay.span` 825 display: flex; 826 align-items: center; 827 justify-content: center; 828 flex: 0 0 auto; 829 width: 16px; 830 height: 16px; 831`,th=V.Ay.div` 832 display: flex; 833 flex-direction: column; 834 gap: 2px; 835 min-width: 0; 836 flex: 1 1 auto;
837`,tg=V.Ay.div` 838 display: flex; 839 align-items: center; 840 flex-wrap: nowrap; 841 width: 100%; 842 min-width: 0; 843 gap: 4px; 844`,ty=V.Ay.p` 845 flex: 1 1 auto; 846 min-width: 0; 847 margin: 0; 848 font-weight: 500; 849 font-size: 12px; 850 line-height: 16px; 851 color: var(--interaction-title-color); 852 white-space: nowrap; 853 overflow: hidden; 854 text-overflow: ellipsis; 855`,t_=V.Ay.span` 856 font-weight: 600; 857 font-size: 11px; 858 line-height: 12px; 859`,tv=V.Ay.span` 860 font-weight: 400; 861 font-size: 11px; 862 line-height: 12px; 863 color: var(--interaction-muted-color); 864`,tm=V.Ay.span` 865 flex: 0 0 auto; 866 margin-left: auto; 867 font-weight: 400; 868 font-size: 10px; 869 line-height: 12px; 870 color: var(--interaction-muted-color); 871`,tb=V.Ay.div` 872 display: flex; 873 flex-direction: column; 874 gap: 2px; 875 margin-top: 2px; 876`,tw=V.Ay.p` 877 margin: 0; 878 font-weight: 400; 879 font-size: 10px; 880 line-height: 12px; 881 color: var(--interaction-muted-color); 882`,tj=V.Ay.span` 883 font-weight: 500; 884 color: var(--interaction-detail-value-color); 885`,tk=({item:e})=>(0,i.jsxs)(ty,{children:[(0,i.jsx)(t_,{children:e.title}),e.targetName&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(tv,{children:" on "}),(0,i.jsx)(t_,{children:e.targetName})]})]}),tC=({item:e,selected:r,highlighted:t,expanded:n,onClick:l,onToggleExpand:a})=>{var o;let s,d,c,u="TRIGGER"===e.targetType,p=r?"var(--gray-white, #ffffff)":"var(--fill-interactive-primary, #373737)";return(0,i.jsxs)(tp,{role:"button",tabIndex:0,$targetType:e.targetType,$selected:r,$highlighted:t,"data-emphasized":r||t?"true":void 0,onClick:()=>l(e),children:[u&&(0,i.jsx)(tx,{type:"button","aria-label":!1===n?"Expand responses":"Collapse responses","aria-expanded":!1!==n,onClick:r=>{r.stopPropagation(),null==a||a(e.id)},children:(0,i.jsx)(F.Icon,{name:!1===n?"ic_caret_forward_24":"ic_caret_downward_24",size:12,color:p})}),(0,i.jsx)(tf,{children:(0,i.jsx)(F.Icon,{name:(s=e.interaction.type.toLowerCase(),d="TRIGGER"===e.targetType?I:S,c="TRIGGER"===e.targetType?"ic_tap_24":"ic_move_24",null!=(o=d[s])?o:c),size:16,color:p,"aria-hidden":"true"})}),(0,i.jsxs)(th,{children:[(0,i.jsxs)(tg,{children:["TRIGGER"===e.targetType?(0,i.jsx)(ty,{children:e.title}):(0,i.jsx)(tk,{item:e}),void 0!==e.responseCount&&(0,i.jsx)(tm,{children:`${e.responseCount} responses`})]}),e.details.length>0&&(0,i.jsx)(tb,{children:e.details.map(e=>(0,i.jsxs)(tw,{children:[`${e.label}: `,(0,i.jsx)(tj,{children:e.value})]},e.label))})]})]})},tA=({interactionGroups:e,selectedInteractionId:r,highlightedInteractionIds:t,onInteractionSelect:n,selectedGroupId:a,onGroupSelect:o,mcpDeepLinkUrl:s,mcpHelperText:d,mcpCopyDisabled:c,displayMcpLinkContent:u})=>{let[p,x]=(0,l.useState)(!0),[f,h]=(0,l.useState)(new Set),g=(0,l.useMemo)(()=>e.flatMap(e=>e.items),[e]);(0,l.useEffect)(()=>{!r||g.some(e=>e.id===r)||null==n||n(null)},[n,g,r]);let y=e=>{null==n||n({id:e.id,interaction:e.interaction})},_=(0,l.useCallback)(e=>{h(r=>{let t=new Set(r);return t.has(e)?t.delete(e):t.add(e),t})},[]);return(0,i.jsxs)(ts,{children:[(0,i.jsx)(tn,{deepLinkUrl:s,helperText:d,copyDisabled:c,displayLinkContent:u,withContentDivider:!0,withClosedHeaderDivider:!0}),(0,i.jsx)(rO,{title:"Interactions",isOpen:p,onToggle:()=>x(e=>!e),withClosedDivider:!0}),p&&(0===e.length?(0,i.jsx)(ta,{children:(0,i.jsx)(to,{children:"No interactions"})}):(0,i.jsx)(td,{children:e.map(e=>{var n;let l;return(0,i.jsxs)(tc,{$selected:e.id===a,children:[(0,i.jsx)(tu,{type:"button",$selected:e.id===a,onClick:()=>{null==o||o({id:e.id,layerIds:[...(e=>{let r=new Set;for(let t of e.items)for(let e of G(t.interaction))r.add(e);return r})(e)]})},children:e.label}),(n=e.items,l=!1,n.filter(e=>"TRIGGER"===e.targetType?(l=f.has(e.id),!0):!l)).map(e=>{var n;return(0,i.jsx)(tC,{item:e,selected:e.id===r,highlighted:null!=(n=null==t?void 0:t.has(e.id))&&n,expanded:"TRIGGER"===e.targetType?!f.has(e.id):void 0,onClick:y,onToggleExpand:"TRIGGER"===e.targetType?_:void 0},e.id)})]},e.id)})}))]})},tI=V.Ay.aside` 886 display: flex; 887 flex-direction: column; 888 width: 284px; 889 height: 100%; 890 background-color: var(--gray-white, #ffffff); 891 border-left: 1px solid var(--gray-250, #e0e0e0); 892 flex-shrink: 0; 893`,tS=V.Ay.div` 894 display: flex; 895 align-items: center; 896 height: 40px; 897 padding: 8px 24px 0; 898 border-bottom: 1px solid var(--gray-150, #efefef); 899`,t$=V.Ay.div` 900 display: flex; 901 flex-direction: column; 902 flex: 1; 903 min-height: 0; 904 overflow-y: auto; 905 ${eB} 906`,tT=V.Ay.div` 907 display: flex; 908 flex-direction: column; 909 align-items: flex-start; 910 padding: 16px; 911 border-bottom: 1px solid var(--gray-250, #e0e0e0); 912`,tE=V.Ay.div` 913 display: flex; 914 flex-direction: column; 915 gap: 8px; 916 width: 252px; 917 height: 60px; 918 padding: 16px; 919 background-color: var(--gray-150, #efefef); 920 border: 1px solid var(--gray-150, #efefef); 921 border-radius: 8px; 922`,tR=V.Ay.div` 923 display: flex; 924 align-items: center; 925 gap: 8px; 926 height: 28px; 927`,tL=V.Ay.p` 928 flex: 1; 929 margin: 0; 930 font-weight: 500; 931 font-size: 14px; 932 line-height: 16px; 933 color: var(--gray-900, #181818); 934 white-space: nowrap; 935 overflow: hidden; 936 text-overflow: ellipsis; 937`,tM=V.Ay.div` 938 display: flex; 939 align-items: center; 940 justify-content: center; 941 flex: 1; 942 min-height: 0; 943`,tz=V.Ay.p` 944 margin: 0; 945 padding: 16px; 946 font-weight: 500; 947 font-size: 14px; 948 line-height: 20px; 949 color: var(--text-quaternary, #707070); 950 text-align: center; 951`,tN=V.Ay.div` 952 display: flex; 953 align-items: center; 954 gap: 24px; 955 height: ${({$size:e})=>"md"===e?"56px":"32px"}; 956`,tP=V.Ay.button` 957 display: flex; 958 align-items: center; 959 justify-content: center; 960 height: 100%; 961 padding: 0; 962 background: none; 963 border: 0; 964 border-bottom: ${({$size:e})=>"md"===e?"3px":"2px"}
964 solid transparent; 965 cursor: pointer; 966 font-weight: 600; 967 font-size: ${({$size:e})=>"md"===e?"16px":"14px"}; 968 line-height: ${({$size:e})=>"md"===e?"20px":"16px"}; 969 color: ${({$current:e})=>e?"var(--purple-500, #8169ff)":"var(--gray-750, #373737)"}; 970 971 ${({$current:e})=>e&&(0,V.AH)` 972 border-bottom-color: var(--purple-500, #8169ff); 973 `} 974 975 &:hover:not(:disabled) { 976 color: ${({$current:e})=>e?"var(--purple-500, #8169ff)":"var(--gray-550, #707070)"}; 977 } 978`,tO=({items:e,currentKey:r,onChange:t,size:n="md",className:l})=>(0,i.jsx)(tN,{className:l,$size:n,children:e.map(e=>(0,i.jsx)(tP,{type:"button",$current:e.key===r,$size:n,onClick:()=>null==t?void 0:t(e.key),children:e.label},e.key))}),tD=[{key:"inspector",label:"Inspector"},{key:"interactions",label:"Interactions"}],tG=({currentTab:e,onTabChange:r,selectedLayerInfo:t,interactionGroups:n=[],currentSceneName:l,isLoading:a,errorMessage:o,selectedInteractionId:s,highlightedInteractionIds:d,onInteractionSelect:c,selectedGroupId:u,onGroupSelect:p,mcpDeepLinkUrl:x,mcpHelperText:f,mcpCopyDisabled:h,displayMcpLinkContent:g})=>{var y;let _=null!=(y=null==t?void 0:t.name)?y:l,v=t?eQ((0,eE.getLayerIconType)(t)):null,m=t?e0((0,eE.getLayerIconType)(t)):void 0;return(0,i.jsxs)(tI,{children:[(0,i.jsx)(tS,{children:(0,i.jsx)(tO,{items:tD,currentKey:e,onChange:r,size:"sm"})}),(0,i.jsxs)(t$,{children:[!a&&!o&&!!_&&(0,i.jsx)(tT,{children:(0,i.jsx)(tE,{children:(0,i.jsxs)(tR,{children:[v&&(0,i.jsx)(F.Icon,{name:v,size:16,color:m}),(0,i.jsx)(tL,{children:_})]})})}),a||o?(0,i.jsx)(tM,{children:a?(0,i.jsx)(B.m,{size:24}):(0,i.jsx)(tz,{children:o})}):(0,i.jsxs)(i.Fragment,{children:["inspector"===e&&(0,i.jsx)(tl,{selectedLayerInfo:t,mcpDeepLinkUrl:x,mcpHelperText:f,mcpCopyDisabled:h,displayMcpLinkContent:g}),"interactions"===e&&(0,i.jsx)(tA,{interactionGroups:n,selectedInteractionId:s,highlightedInteractionIds:d,onInteractionSelect:c,selectedGroupId:u,onGroupSelect:p,mcpDeepLinkUrl:x,mcpHelperText:f,mcpCopyDisabled:h,displayMcpLinkContent:g})]})]})]})},tH=()=>{var e,r,t,c,u,p,x;let{pieId:f}=(0,a.g)(),h=(0,a.Zp)(),g=(0,a.zy)(),{pie:y,pieModel:_,resources:v,thumbnails:m,isLoading:b,error:w,displayMcpLinkContent:j}=(e=>{var r,t,i,n,o;let{accessOption:s,checkPieAccess:d,isAccessOptionLoading:c}=(({pieId:e})=>{let r=(0,a.Zp)(),t=(0,a.zy)(),i=(0,eG.Be)(e=>e.user),n=(0,eG.Be)(e=>e.isLoading),{showErrorAlert:o}=(0,eO.MW)(),{handlePieAccessError:s}=(0,eD.y)(),d=(0,l.useMemo)(()=>{var e;return null!=(e=new URLSearchParams(t.search).get("code"))?e:void 0},[t.search]),[c,u]=(0,l.useState)(null),[p,x]=(0,l.useState)(!0);(0,l.useEffect)(()=>{let r=!0;return(async()=>
978{if(x(!0),!e){u(null),x(!1);return}let t=await eH.F.getPiePassword(e,null==i?void 0:i.id);r&&(u(t),x(!1))})(),()=>{r=!1}},[e,null==i?void 0:i.id]);let f=(0,l.useCallback)(({pieAccess:t,error:l})=>{if(s({error:l,pieId:e})||n||i||!t)return;let{visible:a,downloadable:d,prototypeOnly:c}=t;a||d||c||(o({title:"Please log in or sign up to access this page",duration:eP.rN.MEDIUM}),r("/",{replace:!0}))},[n,s,r,e,i,o]);return{accessOption:(0,l.useMemo)(()=>({password:null!=c?c:void 0,code:d}),[d,c]),checkPieAccess:f,isAccessOptionLoading:p}})({pieId:e}),u=!c,p=((e,r,t)=>{let{findPie:i}=(0,eN.tr)();return(0,ez.v)(eM.nd.pie(null!=e?e:"",r.code),()=>i(e,r),{enabled:!!e&&t})})(e,s,u),x=(null==(n=p.data)||null==(i=n.pie)?void 0:i.lastRevisionNo)?`${p.data.pie.lastRevisionNo}`:void 0,f=((e,r,t,i)=>{let{findPieResourcesAndThumbnailsModelByVersionNo:n}=(0,eN.tr)();return(0,ez.v)(eM.nd.pieModel(null!=e?e:"",null!=r?r:"",t.code),()=>n(e,r,t),{enabled:!!e&&!!r&&i})})(e,x,s,u),h=!!p.data&&!x,g=null!=(r=null!=(t=p.error)?t:f.error)?r:h?eF:null;return(0,l.useEffect)(()=>{var e;d({pieAccess:null==(e=p.data)?void 0:e.pieAccess,error:g})},[d,g,null==(o=p.data)?void 0:o.pieAccess]),(0,l.useMemo)(()=>{var e,r,t,i,n,l,a;let o=c||p.isLoading||!!x&&f.isLoading,s=!!p.data&&(({isTeamMember:e,pieAccess:r})=>e||!0===r.downloadable)({isTeamMember:!!p.data.team,pieAccess:p.data.pieAccess});return{pie:null!=(e=p.data)?e:null,pieModel:(a=null==(i=f.data)?void 0:i.model)?{...a,scenes:a.scenes.map(e=>{var r;return{...e,interactions:null!=(r=e.interactions)?r:[]}})}:null,resources:null!=(r=null==(n=f.data)?void 0:n.resources)?r:[],thumbnails:null!=(t=null==(l=f.data)?void 0:l.thumbnails)?t:[],isLoading:o,error:g,displayMcpLinkContent:s}},[p.data,p.isLoading,f.data,f.isLoading,c,g,x])})(f),{getManager:k,init:C}=ei(),{isReady:A,initError:I}=et(),S=(0,o.K)(e=>{var r;return null==(r=e.about)?void 0:r.servers.http}),$=b||!A&&!w&&!I,T=null!=(e=null!=(r=null==w?void 0:w.message)?r:null==I?void 0:I.message)?e:null,[E,R]=(0,l.useState)("inspector"),[L,z]=(0,l.useState)(null),[N,F]=(0,l.useState)(null),B=(0,l.useRef)(!1),U=(0,l.useMemo)(()=>(0,d.Q)(v,m),[v,m]),V=(0,l.useMemo)(()=>L?G(L.interaction):void 0,[L]),Y=(0,l.useCallback)(e=>{F(r=>(null==r?void 0:r.id)===e.id?null:e),z(null)},[]);(0,l.useEffect)(()=>{_&&C({pieModel:_,resourceProvider:U}).catch(e=>{console.error("Failed to init CodeModeManager",e)})},[_,U,C]);let{scenes:X,currentSceneId:q,layers:Z,interactionTree:W,selectedLayerId:K,selectedLayerInfo:J,selectedSceneId:Q,selectScene:ee,selectLayer:er,toggleExpand:en,toggleVisibility:el}=(({thumbnails:e,interactionLayerIds:r})=>{var t;let{isReady:i}=et(),{getManager:n}=ei(),[a,o]=(0,l.useState)([]),[s,d]=(0,l.useState)(""),[c,u]=(0,l.useState)([]),[p,x]=(0,l.useState)([]),[f,h]=(0,l.useState)(null),g=null!=(t=null==f?void 0:f.id)?t:null,[y,_]=(0,l.useState)(null),[v,m]=(0,l.useState)(null),[b,w]=(0,l.useState)(new Set),[j,k]=(0,l.useState)(0),C=(0,l.useCallback)(()=>{h(null),w(new Set)},[]),A=(0,l.useCallback)(e=>{let r=e.getCurrentSceneId(),t=e.getSceneLayerTree(r);o(e.getScenes()),d(r),u(eL(t)),x(e.getInteractionTree()),C()},[C]),I=(0,l.useCallback)((e,r)=>{let t=e.getSceneLayerTree(r);d(r),u(eL(t)),x(e.getInteractionTree()),C()},[C]),S=(0,l.useCallback)(e=>{_(null),h(e)},[]),$=(0,l.useCallback)(e=>{var r;m(null!=(r=null==e?void 0:e.id)?r:null)},[]),T=(0,l.useCallback)(()=>{k(e=>e+1)},[]);(0,l.useEffect)(()=>{if(!i)return;let e=n();e&&A(e)},[i,n,A]),(0,l.useEffect)(()=>{if(!i)return;let e=n();if(!e)return;let r=[e.onSceneChange(r=>I(e,r)),e.onLayerSelectRaw(r=>{S(r),x(e.getInteractionTree())}),e.onLayerHover($),e.onVisibilityChange(T)];return()=>{r.forEach(e=>e())}},[i,n,I,S,$,T]);let E=(0,l.useCallback)(e=>{var r;C(),null==(r=n())||r.selectScene(e),_(e)},[n,C]),R=(0,l.useCallback)(e=>{let r=n();if(!r)return!1;let t=eR(c,e);return!!t&&(_(null),h(t),r.selectLayer(s,e),!0)},[n,s,c]),L=(0,l.useCallback)(e=>{w(r=>{let t=new Set(r);return t.has(e)?t.delete(e):t.add(e),t})},[]),M=(0,l.useCallback)(e=>{let r=n();if(!r)return;let t=r.getLayerVisibility(s,e);r.setLayerVisibility(s,e,!t)},[n,s]),z=(0,l.useMemo)(()=>{let e=n();if(!e||!s)return new Set;let t=new Set;
978return g&&e.getLayerAncestors(s,g).forEach(e=>t.add(e)),null==r||r.forEach(r=>{e.getLayerAncestors(s,r).forEach(e=>t.add(e))}),t},[n,g,s,r]),N=(0,l.useMemo)(()=>{let e=n();if(!e||!s)return new Set;let t=new Set;return null==r||r.forEach(r=>{e.getLayerAncestors(s,r).forEach(e=>t.add(e))}),t},[n,s,r]),P=(0,l.useCallback)(e=>{let r=n();return!!r&&!!s&&!r.getLayerVisibility(s,e)},[n,s,j]),O=(0,l.useMemo)(()=>new Map(e.map(e=>[e.id,e.url])),[e]),D=(0,l.useMemo)(()=>a.map(e=>({id:e.id,name:e.name,thumbnailUrl:e.thumbnailId?O.get(e.thumbnailId):void 0})),[a,O]),G=(0,l.useMemo)(()=>{var e;let t,i;return e={selectedId:g,ancestorIds:z,highlightedAncestorIds:N,expandedIds:b,isHidden:P,interactionLayerIds:r},t=[],(i=(r,n,l,a,o)=>{for(let f of r){var s,d,c,u,p,x;let r=(0,eE.getLayerIconType)(f),h=(null!=(s=null==(u=f.children)?void 0:u.length)?s:0)>0,g=f.id===e.selectedId,y=e.ancestorIds.has(f.id),_=null!=(d=null==(p=e.highlightedAncestorIds)?void 0:p.has(f.id))?d:y,v=h&&(e.expandedIds.has(f.id)||y),m=e.isHidden(f.id),b=null!=(c=null==(x=e.interactionLayerIds)?void 0:x.has(f.id))&&c,w=o||"COMPONENT"===r,j=m||l;t.push({id:f.id,name:f.name,iconType:r,depth:n,expandable:h,expanded:v,selected:g,ancestorHighlighted:_&&!g,descendantHighlighted:a,interactionHighlighted:b,componentColored:w,faded:j,hidden:m}),h&&v&&f.children&&i(f.children,n+1,j,a||g,w)}})(c,0,!1,!1,!1),t},[c,g,z,N,b,P,r]);return{scenes:D,currentSceneId:s,layers:(0,l.useMemo)(()=>v?G.map(e=>e.id!==v||e.selected?e:{...e,hovered:!0}):G,[G,v]),interactionTree:p,selectedLayerId:g,selectedLayerInfo:f,selectedSceneId:y,selectScene:E,selectLayer:R,toggleExpand:L,toggleVisibility:M}})({thumbnails:m,interactionLayerIds:V}),ed=(0,l.useMemo)(()=>((e,r,t=[])=>{let i,n,l,a,o=null==e?void 0:e.scenes.find(e=>e.id===r),{collectTriggerNodes:s}=(i=-1,n=(r,t,n,l=0)=>{var a;let o="number"==typeof r.delay?1e3*r.delay:0,s="number"==typeof r.duration?1e3*r.duration:0,d=l+o;return{eventId:i-=1,targetType:n,targetId:r.id,sceneId:t,namespace:"",startTime:d,endTime:d+s,delay:o,count:0,averageDuration:s,typeName:M(r.type,n),type:r.type,layerName:((e,r,t)=>{var i,n;if(!t)return null;let l=null==e?void 0:e.scenes.find(e=>e.id===r),a=P(null!=(i=null==l?void 0:l.layers)?i:null==l?void 0:l.children,t);if(a)return a;for(let r of null!=(n=null==e?void 0:e.components)?n:[]){let e=P(r.rootLayer?[r.rootLayer]:r.layers,t);if(e)return e}return t})(e,t,r.layerId),layerId:null!=(a=r.layerId)?a:null,rawData:r,children:[]}},l=(e,r)=>{var t,i;let l=n(e,r,"TRIGGER");return l.children=[...null!=(t=e.responses)?t:[],...(null!=(i=e.conditions)?i:[]).flatMap(e=>{var r;return null!=(r=e.responses)?r:[]})].map(e=>n(e,r,"RESPONSE",l.startTime)),l},{collectTriggerNodes:a=(e,r)=>{let t=[];for(let n of e){if("xid_trigger_group"===n.type){var i;t.push(...a(null!=(i=n.triggers)?i:[],r));continue}t.push(l(n,r))}return t}}),d=new Map(t.filter(e=>e.sceneId===r).map(e=>[e.targetId,e]));if(!o)return t.filter(e=>e.sceneId===r).map(e=>{let r=[O(e),...e.children.map(r=>D(e,r))];return{id:`group-${e.eventId}`,label:H(r),items:r}});let c=e=>{if("xid_trigger_group"===e.type){var t;return(null!=(t=e.triggers)?t:[]).flatMap(c)}let i=d.get(e.id);return i?[i]:s([e],r)};return o.interactions.flatMap(e=>{let r=c(e).flatMap(e=>[O(e),...e.children.filter(e=>{var r;return(null!=(r=e.typeName)?r:M(e.type,"RESPONSE"))!=="Annotation"}).map(r=>D(e,r))]);return 0===r.length?[]:[{id:`group-${e.id}`,label:((e,r)=>{if("xid_trigger_group"===e.type){var t;let r=null==(t=e.viewName)?void 0:t.trim();if(r)return r}return H(r)})(e,r),items:r}]})})(_,q,W),[W,_,q]),ec=(0,l.useCallback)(e=>{var r,t,i,n;let l=e?"RESPONSE"===(r=e.interaction).targetType?null!=(t=r.responseLayerIds[0])?t:r.triggerLayerId:null!=(i=null!=(n=r.triggerLayerId)?n:r.responseLayerIds[0])?i:null:null;l&&er(l)&&(B.current=!0),z(e),e&&F(null)},[er]),eu=(0,l.useMemo)(()=>L?new Set:((e,r)=>{let t=new Set;if(!r)return t;for(let i of e)for(let e of i.items)G(e.interaction).has(r)&&t.add(e.id);return t})(ed,K),[ed,K,L]),{codeModeUrl:ep,deepLinkUrl:ex,deepLinkHelperText:ef}=(({cloudHost:e,pieId:r,revisionNo:t,isReady:i,scenes:n,currentSceneId:a,selectedLayerId:o,selectedLayerInfo:s,selectedSceneId:d,selectScene:c,selectLayer:u})=>{let[p,x]=(0,eA.ok)(),[f,h]=(0,l.useState)({type:"pie"}),[g,y]=(0,l.useState)(null),_=(0,l.useRef)(!1),v=(0,l.useRef)(null);(0,l.useEffect)(()=>
978{if(_.current||!i||0===n.length)return;_.current=!0;let e=p.get("scene"),r=p.get("layer");e&&eS(e)&&n.some(r=>r.id===e)?(h({type:"scene",sceneId:e}),c(e),r&&e$(r)&&y(r)):h({type:"pie"})},[i,n,p,c]),(0,l.useEffect)(()=>{g&&"pie"!==f.type&&a===f.sceneId&&(h(u(g)?{type:"layer",sceneId:f.sceneId,layerId:g}:{type:"scene",sceneId:f.sceneId}),y(null))},[a,g,f,u]),(0,l.useEffect)(()=>{if(a){if(!v.current){v.current=a;return}v.current!==a&&(v.current=a,h({type:"scene",sceneId:a}))}},[a]),(0,l.useEffect)(()=>{a&&o&&h({type:"layer",sceneId:a,layerId:o})},[a,o]),(0,l.useEffect)(()=>{a&&!o&&"layer"===f.type&&h({type:"scene",sceneId:a})},[a,f.type,o]),(0,l.useEffect)(()=>{d&&!o&&h({type:"scene",sceneId:d})},[o,d]),(0,l.useEffect)(()=>{if(!t||!_.current&&(p.has("scene")||p.has("layer")||p.has("component")))return;let e=new URLSearchParams;e.set("revision",t),("scene"===f.type||"layer"===f.type)&&e.set("scene",f.sceneId),"layer"===f.type&&e.set("layer",f.layerId),p.toString()!==e.toString()&&x(e,{replace:!0})},[t,f,p,x]);let m="pie"===f.type?null:f.sceneId,b="layer"===f.type?f.layerId:null,w=(0,l.useMemo)(()=>(({host:e,pieId:r,revisionNo:t,sceneId:i,layerId:n})=>{if(!e||!r||!(e=>{if(null==e||""===e)return!1;let r=Number(e);return Number.isSafeInteger(r)&&r>0})(t))return null;let l=eT({host:e,pieId:r});if(!l)return null;let a=new URL(l);if(a.searchParams.set("revision",`${t}`),i){if(!eS(i))return null;a.searchParams.set("scene",i)}if(n){if(!i||!e$(n))return null;a.searchParams.set("layer",n)}return a.searchParams.delete("component"),a.toString()})({host:e,pieId:r,revisionNo:t,sceneId:m,layerId:b}),[e,b,r,t,m]);return{codeModeUrl:(0,l.useMemo)(()=>eT({host:e,pieId:r}),[e,r]),deepLinkUrl:w,deepLinkHelperText:(0,l.useMemo)(()=>(e=>{switch((({sceneId:e,layerId:r,isComponentLayer:t})=>r?t?"component":"layer":e?"scene":"pie")(e)){case"component":return"Includes this component only â its elements and interactions.";case"layer":return"Includes this layer only â its elements and interactions.";
978case"scene":return"Includes this scene only â its elements and interactions.";default:return"Includes the entire prototype â all scenes, elements, and interactions."}})({sceneId:m,layerId:b,isComponentLayer:!!b&&!!(null==s?void 0:s.componentId)}),[b,m,null==s?void 0:s.componentId])}})({cloudHost:S,pieId:f,revisionNo:(null==y||null==(u=y.pie)?void 0:u.lastRevisionNo)?`${y.pie.lastRevisionNo}`:void 0,isReady:A,scenes:X,currentSceneId:q,selectedLayerId:K,selectedLayerInfo:J,selectedSceneId:Q,selectScene:ee,selectLayer:er});(0,l.useEffect)(()=>{if(B.current){B.current=!1;return}z(null),F(null)},[null==J?void 0:J.id]),(0,l.useEffect)(()=>{let e=k();if(e)return L?e.showInteractionGuideline(L.interaction):e.hideInteractionGuideline(),()=>{e.hideInteractionGuideline()}},[k,L]);let eh=(0,l.useMemo)(()=>{var e,r;return null!=(e=null==(r=X.find(e=>e.id===q))?void 0:r.name)?e:""},[q,X]),eg=null!=(t=null==y||null==(p=y.pie)?void 0:p.name)?t:"",ey=(0,l.useCallback)(()=>{h(`/p/${f}`)},[h,f]),e_=(0,l.useCallback)(()=>{if("default"===g.key){var e;let r=null==y||null==(e=y.project)?void 0:e.id;h(r?`/pr/${r}`:"/");return}h(-1)},[h,g.key,null==y||null==(x=y.project)?void 0:x.id]);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.mg,{children:(0,i.jsx)("title",{children:(0,s.Yp)("Dev View")})}),(0,i.jsxs)(eo,{children:[(0,i.jsx)(eC,{projectName:eg,copyLinkUrl:ep,onBack:e_,onPreview:ey}),(0,i.jsxs)(es,{children:[(0,i.jsx)(ri,{scenes:X,currentSceneId:q,onSceneSelect:ee,layers:Z,onLayerClick:er,onToggleExpand:en,onToggleVisibility:el,isLoading:$}),(0,i.jsx)(ea,{isLoading:$}),(0,i.jsx)(tG,{currentTab:E,onTabChange:R,selectedLayerInfo:J,interactionGroups:ed,currentSceneName:eh,isLoading:$,errorMessage:T,selectedInteractionId:null==L?void 0:L.id,highlightedInteractionIds:eu,onInteractionSelect:ec,selectedGroupId:null!=(c=null==N?void 0:N.id)?c:null,onGroupSelect:Y,mcpDeepLinkUrl:ex,mcpHelperText:ef,mcpCopyDisabled:$||!!T||!ex,displayMcpLinkContent:j})]})]})]})},tF=()=>(0,i.jsx)(er,{children:(0,i.jsx)(tH,{})})}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.