llm-ui-objects
Version:
Interactive object components for LLM-powered writing interfaces
1 lines • 66.2 kB
JavaScript
"use strict";var n=require("react"),e=require("styled-components"),t=require("react-quill"),r=function(n,e){return r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(n,e){n.__proto__=e}||function(n,e){for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&(n[t]=e[t])},r(n,e)};var i=function(){return i=Object.assign||function(n){for(var e,t=1,r=arguments.length;t<r;t++)for(var i in e=arguments[t])Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n},i.apply(this,arguments)};function o(n,e,t){if(t||2===arguments.length)for(var r,i=0,o=e.length;i<o;i++)!r&&i in e||(r||(r=Array.prototype.slice.call(e,0,i)),r[i]=e[i]);return n.concat(r||Array.prototype.slice.call(e))}function l(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}"function"==typeof SuppressedError&&SuppressedError;var a,c,u,d,s,f,p,x,m,g,h,b=n.createContext({cells:[],addCell:function(n,e){return""},removeCell:function(n){},updateCell:function(n,e){},toggleCell:function(n,e){},linkCells:function(n,e){},unlinkCell:function(n){},generators:[],addGenerator:function(n){return""},removeGenerator:function(n){},updateGenerator:function(n,e){},toggleGenerator:function(n,e){},onGenerate:function(n){},generations:[],updateGenerationsData:function(n,e){},linkCellToGenerator:function(n,e){},unlinkCellFromGenerator:function(n){},linkGeneratorToLens:function(n,e){},unlinkGeneratorFromLens:function(n){},lenses:[],addLens:function(n){return""},removeLens:function(n){},changeLensType:function(n,e){},linkLenses:function(n,e){},unlinkLens:function(n){},resetLens:function(n){},hoveredId:null,setHoveredId:function(n){}}),v=function(n){return n+"-"+Math.random().toString(36).substring(7)+"-"+Date.now().toString(36).substring(7)},y=e.div(a||(a=l(["\n display: flex;\n border: solid 2px ",";\n border-","-width: 12px;\n border-radius: 8px;\n flex: 1;\n cursor: pointer;\n"],["\n display: flex;\n border: solid 2px ",";\n border-","-width: 12px;\n border-radius: 8px;\n flex: 1;\n cursor: pointer;\n"])),(function(n){var e=n.active;return n.selected?"rgb(0, 194, 255)":e?"#0066ff":"#ddd"}),(function(n){var e=n.tabDirection;return e||"top"})),w=e.div(c||(c=l(["\n display: flex;\n border: solid 2px ",";\n background-color: ",";\n color: ",";\n border-radius: 8px;\n cursor: pointer;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n"],["\n display: flex;\n border: solid 2px ",";\n background-color: ",";\n color: ",";\n border-radius: 8px;\n cursor: pointer;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n"])),(function(n){var e=n.active,t=n.selected,r=n.hovered;return t?"rgb(0, 194, 255)":e?"#0066ff":r?"#0066ff66":"#aaa"}),(function(n){var e=n.active,t=n.selected,r=n.hovered;return t?"rgb(0, 194, 255)":e?"#0066ff":r?"#0066ff22":"#fff"}),(function(n){return n.active?"#fff":"#999"})),k=e.textarea(u||(u=l(["\n font-family: inherit;\n font-size: 14px;\n color: #555;\n resize: none;\n padding: 4px 8px;\n margin: 0;\n border: none;\n border-radius: 8px;\n flex: 1;\n\n &:focus {\n outline: none;\n }\n"],["\n font-family: inherit;\n font-size: 14px;\n color: #555;\n resize: none;\n padding: 4px 8px;\n margin: 0;\n border: none;\n border-radius: 8px;\n flex: 1;\n\n &:focus {\n outline: none;\n }\n"]))),E=function(e){var t=e.id,r=e.text,i=e.isActive,o=e.isMinimized,l=e.isSelected,a=e.isHovered,c=e.tabDirection,u=e.minimizedText,d=e.onClick,s=e.onMouseEnter,f=e.onMouseLeave,p=e.style,x=n.useContext(b),m=x.updateCell,g=x.toggleCell,h=n.useState(r),v=h[0],E=h[1];n.useEffect((function(){var n=document.getElementById(t+"-textarea");n&&(n.style.height="auto",n.style.height=n.scrollHeight-8+"px")}),[v]);var z=function(n){n.stopPropagation(),1===n.detail?(l&&g(t,"isSelected"),d?d(n):g(t,"isActive")):2===n.detail&&g(t,"isSelected")},C=function(n){s&&s(n),g(t,"isHovered")},S=function(n){f&&f(n),g(t,"isHovered")};return o?n.createElement(w,{id:t,className:"llmuiobj-cell-min","data-testid":t,active:i?1:0,selected:l?1:0,hovered:a?1:0,onClick:z,onMouseEnter:C,onMouseLeave:S,style:p},u):n.createElement(y,{id:t,className:"llmuiobj-cell","data-testid":t,active:i?1:0,selected:l?1:0,hovered:a?1:0,tabDirection:c,onClick:z,onMouseEnter:C,onMouseLeave:S,style:p},n.createElement(k,{id:t+"-textarea",value:v,onChange:function(n){m(t,n.target.value),E(n.target.value)}}))},z=e.div(d||(d=l(["\n display: flex;\n flex-direction: column;\n gap: 8px;\n width: 100%;\n height: 100%;\n"],["\n display: flex;\n flex-direction: column;\n gap: 8px;\n width: 100%;\n height: 100%;\n"]))),C=e.div(s||(s=l(["\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 8px;\n width: 100%;\n"],["\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 8px;\n width: 100%;\n"]))),S=e.div(f||(f=l(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n flex-grow: 1;\n"],["\n display: flex;\n flex-direction: row;\n gap: 8px;\n flex-grow: 1;\n"]))),I=e.div(p||(p=l(["\n display: flex;\n"],["\n display: flex;\n"]))),j=e.button(x||(x=l(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 32px;\n width: 32px;\n border-radius: 8px;\n background-color: #0088ff99;\n color: #ffffff;\n font-size: 24px;\n font-weight: bold;\n border: none;\n cursor: pointer;\n &:hover {\n background-color: #0088ff;\n }\n &:disabled {\n background-color: #dddddd;\n cursor: auto; \n }\n"],["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 32px;\n width: 32px;\n border-radius: 8px;\n background-color: #0088ff99;\n color: #ffffff;\n font-size: 24px;\n font-weight: bold;\n border: none;\n cursor: pointer;\n &:hover {\n background-color: #0088ff;\n }\n &:disabled {\n background-color: #dddddd;\n cursor: auto; \n }\n"]))),M=e.button(m||(m=l(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 32px;\n width: 160px;\n border-radius: 8px;\n background-color: #0088ff99;\n color: #ffffff;\n font-size: 16px;\n border: none;\n cursor: pointer;\n &:hover {\n background-color: #0088ff;\n }\n &:disabled {\n background-color: #dddddd;\n cursor: auto; \n }\n"],["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 32px;\n width: 160px;\n border-radius: 8px;\n background-color: #0088ff99;\n color: #ffffff;\n font-size: 16px;\n border: none;\n cursor: pointer;\n &:hover {\n background-color: #0088ff;\n }\n &:disabled {\n background-color: #dddddd;\n cursor: auto; \n }\n"]))),G=e.div(g||(g=l(["\n display: flex;\n flex-direction: column;\n gap: ","px;\n"],["\n display: flex;\n flex-direction: column;\n gap: ","px;\n"])),(function(n){return n.cellHeight})),A=e.div(h||(h=l(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n width: 100%;\n"],["\n display: flex;\n flex-direction: row;\n gap: 8px;\n width: 100%;\n"]))),L=e.div(H||(H=l(["\n ","\n"],["\n ","\n"])),(function(n){var e=n.textColor;return e?"& span { color: ".concat(e," !important; }"):""})),T=function(n){function e(){return null!==n&&n.apply(this,arguments)||this}return function(n,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function t(){this.constructor=n}r(n,e),n.prototype=null===e?Object.create(e):(t.prototype=e.prototype,new t)}(e,n),e.create=function(e){var t=n.create.call(this,e);return t.setAttribute("id",e.id),t.setAttribute("style",e.style),t},e.value=function(n){return{id:n.getAttribute("id"),style:n.getAttribute("style")}},e.prototype.format=function(t,r){t===e.blotName&&r?(this.domNode.setAttribute("id",r.id),this.domNode.setAttribute("style",r.style)):n.prototype.format.call(this,t,r)},e}(t.Quill.import("blots/inline"));T.blotName="cell",T.tagName="span",t.Quill.register("formats/cell",T);var H,O,N,P,D,R,B,V,K,_,F,q,W,J,Z,X,Y,Q,U,$,nn,en,tn,rn,on,ln,an,cn,un,dn,sn,fn,pn,xn,mn,gn,hn,bn=["bold","italic","strike","underline","color","background","font","code","cell"],vn=e.div(O||(O=l(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n gap: ",";\n margin-top: ",";\n"],["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n gap: ",";\n margin-top: ",";\n"])),(function(n){return"small"===n.size?"4px":"medium"===n.size?"6px":"8px"}),(function(n){return"small"===n.size?"4px":"medium"===n.size?"6px":"8px"})),yn=e.div(N||(N=l(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background-color: rgba(255, 255, 255, 0.50);\n border-radius: ",";\n height: ",";\n width: ",";\n padding: ",";\n cursor: pointer;\n &:hover {\n box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);\n }\n"],["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background-color: rgba(255, 255, 255, 0.50);\n border-radius: ",";\n height: ",";\n width: ",";\n padding: ",";\n cursor: pointer;\n &:hover {\n box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);\n }\n"])),(function(n){return"small"===n.size?"2px":"medium"==n.size?"4px":"6px"}),(function(n){return"small"===n.size?"32px":"medium"==n.size?"48px":"64px"}),(function(n){return"small"===n.size?"32px":"medium"==n.size?"48px":"64px"}),(function(n){return"small"===n.size?"0 2px 2px 2px":"medium"==n.size?"0 3px 3px 3px":"0 4px 4px 4px"})),wn=e.div(P||(P=l(["\n font-size: ",";\n color: #555555;\n margin-bottom: 2px;\n"],["\n font-size: ",";\n color: #555555;\n margin-bottom: 2px;\n"])),(function(n){return"small"===n.size?"8px":"medium"===n.size?"12px":"16px"})),kn=e.div(D||(D=l(["\n font-size: ",";\n width: 90%;\n text-align: center;\n color: #333333;\n background-color: rgba(255, 255, 255, 0.75);\n flex: 1;\n border-radius: ",";\n display: flex;\n align-items: center;\n justify-content: center;\n"],["\n font-size: ",";\n width: 90%;\n text-align: center;\n color: #333333;\n background-color: rgba(255, 255, 255, 0.75);\n flex: 1;\n border-radius: ",";\n display: flex;\n align-items: center;\n justify-content: center;\n"])),(function(n){return"small"===n.size?"16px":"medium"===n.size?"20px":"24px"}),(function(n){return"small"===n.size?"2px":"medium"==n.size?"3px":"4px"})),En=function(e){e.id;var t=e.name,r=e.nickname,i=e.type,o=e.value;e.allowedValues;var l=e.valueNicknames;e.defaultValue;var a=e.size,c=e.onClick;return"nominal"===i&&(o=l?l[o]:o),n.createElement(yn,{size:a,onClick:c},n.createElement(wn,{size:a},r||t.toLowerCase()),n.createElement(kn,{size:a},o))},zn=e.div(R||(R=l(["\n position: absolute;\n top: ","px;\n left: ","px;\n background-color: rgba(255, 255, 255, 0.95);\n border-radius: ",";\n height: ",";\n width: ",";\n border: solid "," ",";\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);\n display: flex;\n flex-direction: column;\n font-size: ",";\n text-align: left;\n cursor: pointer;\n z-index: 3;\n"],["\n position: absolute;\n top: ","px;\n left: ","px;\n background-color: rgba(255, 255, 255, 0.95);\n border-radius: ",";\n height: ",";\n width: ",";\n border: solid "," ",";\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);\n display: flex;\n flex-direction: column;\n font-size: ",";\n text-align: left;\n cursor: pointer;\n z-index: 3;\n"])),(function(n){return"small"===n.size?12+38*n.row:"medium"===n.size?17+57*n.row:22+76*n.row}),(function(n){return"small"===n.size?4+40*n.column:"medium"==n.size?6+60*n.column:8+80*n.column}),(function(n){return"small"===n.size?"2px":"medium"==n.size?"4px":"6px"}),(function(n){return"small"===n.size?"34px":"medium"==n.size?"51px":"68px"}),(function(n){return"small"===n.size?"120px":"medium"==n.size?"180px":"220px"}),(function(n){return n.color}),(function(n){return"small"===n.size?"1px":"2px"}),(function(n){return"small"===n.size?"10px":"medium"===n.size?"16px":"20px"})),Cn=e.div(B||(B=l(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n width: calc(100% - ",");\n padding: ",";\n\n & > input[type=text] {\n font-size: ",";\n width: 20%;\n text-align: center;\n border: solid 1px #cccccc;\n border-radius: 4px;\n }\n\n & > input[type=range] {\n width: 100%;\n -webkit-appearance: none;\n padding-top: ",";\n }\n & > input[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: ",";\n height: ",";\n border-radius: 50%;\n background-color: #0066ffdd;\n cursor: pointer;\n transition: 0.5s;\n margin-top: ",";\n &:hover {\n background-color: #0066ff;\n }\n }\n & > input[type=range]::-webkit-slider-runnable-track {\n -webkit-appearance: none;\n height: ",";\n border-radius: 20px;\n width: 100%;\n background: #dddddd;\n background-image: linear-gradient(#0066ffaa, #0066ffaa);\n background-size: ","% 100%;\n background-repeat: no-repeat;\n }\n & > select {\n width: 100%;\n font-size: ",";\n border: solid 1px #cccccc;\n border-radius: 4px;\n }\n"],["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n width: calc(100% - ",");\n padding: ",";\n\n & > input[type=text] {\n font-size: ",";\n width: 20%;\n text-align: center;\n border: solid 1px #cccccc;\n border-radius: 4px;\n }\n\n & > input[type=range] {\n width: 100%;\n -webkit-appearance: none;\n padding-top: ",";\n }\n & > input[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: ",";\n height: ",";\n border-radius: 50%;\n background-color: #0066ffdd;\n cursor: pointer;\n transition: 0.5s;\n margin-top: ",";\n &:hover {\n background-color: #0066ff;\n }\n }\n & > input[type=range]::-webkit-slider-runnable-track {\n -webkit-appearance: none;\n height: ",";\n border-radius: 20px;\n width: 100%;\n background: #dddddd;\n background-image: linear-gradient(#0066ffaa, #0066ffaa);\n background-size: ","% 100%;\n background-repeat: no-repeat;\n }\n & > select {\n width: 100%;\n font-size: ",";\n border: solid 1px #cccccc;\n border-radius: 4px;\n }\n"])),(function(n){return"small"===n.size?"8px":"medium"===n.size?"16px":"24px"}),(function(n){return"small"===n.size?"0 4px":"medium"==n.size?"0 8px":"0 12px"}),(function(n){return"small"===n.size?"10px":"medium"==n.size?"14px":"18px"}),(function(n){return"small"===n.size?"2px":"medium"===n.size?"4px":"6px"}),(function(n){return"small"===n.size?"8px":"medium"===n.size?"12px":"16px"}),(function(n){return"small"===n.size?"8px":"medium"===n.size?"12px":"16px"}),(function(n){return"small"===n.size?"-2px":"medium"===n.size?"-3px":"-4px"}),(function(n){return"small"===n.size?"4px":"medium"===n.size?"6px":"8px"}),(function(n){return n.filled}),(function(n){return"small"===n.size?"10px":"medium"==n.size?"14px":"18px"})),Sn=function(e){var t=e.parameter,r=e.size,i=e.row,o=e.column,l=e.color,a=e.changeHandler,c=n.useState(void 0!==t.value&&"string"!=typeof t.value?t.value.toString():""),u=c[0],d=c[1];n.useEffect((function(){d(void 0!==t.value&&"string"!=typeof t.value?t.value.toString():"")}),[t.value]);var s=function(){var n=parseFloat(u);if(isNaN(n))d(t.value&&"string"!=typeof t.value?t.value.toString():"");else{var e=t.allowedValues;n>e[1]?n=e[1]:n<e[0]&&(n=e[0]),"discrete"===t.type&&(n=Math.round(n)),a(n)}},f=0;return"nominal"!==t.type&&(f=t.value/(t.allowedValues[1]-t.allowedValues[0])*100),n.createElement(zn,{size:r,row:i,column:o,color:l},n.createElement(Cn,{size:r,onMouseDown:function(n){return n.stopPropagation()},onClick:function(n){return n.stopPropagation()}},n.createElement("div",null,t.name.slice(0,12)),"nominal"!==t.type?n.createElement("input",{value:u,onChange:function(n){return d(n.target.value)},onKeyDown:function(n){return"Enter"==n.key&&s()},onBlur:s,type:"text"}):""),n.createElement(Cn,{size:r,filled:f,onMouseDown:function(n){return n.stopPropagation()},onClick:function(n){return n.stopPropagation()}},"nominal"!==t.type?n.createElement("input",{type:"range",min:t.allowedValues[0],max:t.allowedValues[1],value:t.value,step:"discrete"==t.type?1:.05,onChange:function(n){return a(parseFloat(n.target.value))}}):n.createElement("select",{defaultValue:t.value,onChange:function(n){return a(n.target.value)}},t.allowedValues.map((function(e,t){return n.createElement("option",{key:t,value:e},e)})))))},In=e.div(V||(V=l(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background-color: ",";\n border-radius: ",";\n padding: ",";\n box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);\n width: fit-content;\n height: fit-content;\n position: relative;\n cursor: pointer;\n"],["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background-color: ",";\n border-radius: ",";\n padding: ",";\n box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);\n width: fit-content;\n height: fit-content;\n position: relative;\n cursor: pointer;\n"])),(function(n){return n.color}),(function(n){return"small"===n.size?"4px":"medium"==n.size?"6px":"8px"}),(function(n){return"small"===n.size?"2px 4px 4px 4px":"medium"==n.size?"3px 6px 6px 6px":"4px 8px 8px 8px"})),jn=e.div(K||(K=l(["\n font-size: ",";\n line-height: 1;\n color: white;\n user-select: none;\n"],["\n font-size: ",";\n line-height: 1;\n color: white;\n user-select: none;\n"])),(function(n){return"small"===n.size?"8px":"medium"===n.size?"12px":"16px"})),Mn=e.svg(_||(_=l(["\n position: absolute;\n top: calc(50% - ",");\n left: calc(50% - ",");\n height: ",";\n width: ",";\n z-index: 2;\n"],["\n position: absolute;\n top: calc(50% - ",");\n left: calc(50% - ",");\n height: ",";\n width: ",";\n z-index: 2;\n"])),(function(n){return"small"===n.size?"16px":"medium"==n.size?"24px":"32px"}),(function(n){return"small"===n.size?"16px":"medium"==n.size?"24px":"32px"}),(function(n){return"small"===n.size?"32px":"medium"==n.size?"48px":"64px"}),(function(n){return"small"===n.size?"32px":"medium"==n.size?"48px":"64px"})),Gn=e.div(F||(F=l(["\n position: absolute;\n top: -","px;\n left: -","px;\n height: calc(100% + ","px);\n width: calc(100% + ","px);\n border: solid rgb(0, 194, 255) ","px;\n border-radius: ","px;\n box-sizing: border-box;\n box-shadow: 0 0 2px 2px rgba(0, 194, 255, 0.3);\n"],["\n position: absolute;\n top: -","px;\n left: -","px;\n height: calc(100% + ","px);\n width: calc(100% + ","px);\n border: solid rgb(0, 194, 255) ","px;\n border-radius: ","px;\n box-sizing: border-box;\n box-shadow: 0 0 2px 2px rgba(0, 194, 255, 0.3);\n"])),(function(n){return"large"!==n.size?4:6}),(function(n){return"large"!==n.size?4:6}),(function(n){return"large"!==n.size?8:12}),(function(n){return"large"!==n.size?8:12}),(function(n){return"large"!==n.size?2:3}),(function(n){return"small"===n.size?6:"medium"==n.size?8:10})),An=n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 256 512"},n.createElement("path",{d:"M.1 29.3C-1.4 47 11.7 62.4 29.3 63.9l8 .7C70.5 67.3 96 95 96 128.3V224H64c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v95.7c0 33.3-25.5 61-58.7 63.8l-8 .7C11.7 449.6-1.4 465 .1 482.7s16.9 30.7 34.5 29.2l8-.7c34.1-2.8 64.2-18.9 85.4-42.9c21.2 24 51.2 40.1 85.4 42.9l8 .7c17.6 1.5 33.1-11.6 34.5-29.2s-11.6-33.1-29.2-34.5l-8-.7C185.5 444.7 160 417 160 383.7V288h32c17.7 0 32-14.3 32-32s-14.3-32-32-32H160V128.3c0-33.3 25.5-61 58.7-63.8l8-.7c17.6-1.5 30.7-16.9 29.2-34.5S239-1.4 221.3 .1l-8 .7C179.2 3.6 149.2 19.7 128 43.7c-21.2-24-51.2-40-85.4-42.9l-8-.7C17-1.4 1.6 11.7 .1 29.3z"})),Ln=n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 512 512"},n.createElement("path",{d:"M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"})),Tn=e.div(q||(q=l(["\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding-right: 4px;\n max-height: 100%;\n\n overflow-y: auto;\n\n &::-webkit-scrollbar {\n width: 4px;\n }\n &::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n }\n &::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 4px;\n }\n"],["\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding-right: 4px;\n max-height: 100%;\n\n overflow-y: auto;\n\n &::-webkit-scrollbar {\n width: 4px;\n }\n &::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n }\n &::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 4px;\n }\n"]))),Hn=e.div(W||(W=l(["\n display: flex;\n flex-direction: row;\n gap: 4px;\n"],["\n display: flex;\n flex-direction: row;\n gap: 4px;\n"]))),On=e.div(J||(J=l(["\n min-width: 24px;\n height: ",";\n border-radius: 4px;\n border: solid 2px ",";\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n fill: ",";\n\n &:hover {\n border-color: #0088ffcc;\n fill: #0088ffcc;\n }\n"],["\n min-width: 24px;\n height: ",";\n border-radius: 4px;\n border: solid 2px ",";\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n fill: ",";\n\n &:hover {\n border-color: #0088ffcc;\n fill: #0088ffcc;\n }\n"])),(function(n){return n.opened?"inherit":"24px"}),(function(n){return n.opened?"#0088ff":"#cccccc"}),(function(n){return n.opened?"#0088ff":"#cccccc"})),Nn=e.div(Z||(Z=l(["\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex-shrink: 1;\n justify-content: center;\n border: solid 2px #0088ff66;\n border-radius: 4px;\n padding: 4px 8px;\n color: #555555;\n font-size: 14px;\n max-height: 200px;\n overflow-y: auto;\n word-break: break-word;\n white-space: pre-wrap;\n\n &::-webkit-scrollbar {\n width: 4px;\n }\n &::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n }\n &::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 4px;\n }\n"],["\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex-shrink: 1;\n justify-content: center;\n border: solid 2px #0088ff66;\n border-radius: 4px;\n padding: 4px 8px;\n color: #555555;\n font-size: 14px;\n max-height: 200px;\n overflow-y: auto;\n word-break: break-word;\n white-space: pre-wrap;\n\n &::-webkit-scrollbar {\n width: 4px;\n }\n &::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n }\n &::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 4px;\n }\n"]))),Pn=e.div(X||(X=l(["\n display: flex;\n flex-direction: row;\n flex: 1;\n gap: 8px;\n"],["\n display: flex;\n flex-direction: row;\n flex: 1;\n gap: 8px;\n"]))),Dn=e.div(Y||(Y=l(["\n width: ",";\n height: ",";\n background-color: #dddddd;\n border-radius: 4px;\n cursor: pointer;\n &:hover {\n background-color: #0088ffcc;\n }\n"],["\n width: ",";\n height: ",";\n background-color: #dddddd;\n border-radius: 4px;\n cursor: pointer;\n &:hover {\n background-color: #0088ffcc;\n }\n"])),(function(n){return n.minimized?"28px":"4px"}),(function(n){return n.minimized?"4px":"inherit"})),Rn=e.div(Q||(Q=l(["\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 8px;\n"],["\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 8px;\n"]))),Bn=e.div(U||(U=l(["\n border: solid 2px #cccccc;\n border-radius: 8px;\n padding: 4px 8px;\n color: #555555;\n cursor: pointer;\n font-size: 14px;\n font-weight: ",";\n\n ","\n"],["\n border: solid 2px #cccccc;\n border-radius: 8px;\n padding: 4px 8px;\n color: #555555;\n cursor: pointer;\n font-size: 14px;\n font-weight: ",";\n\n ","\n"])),(function(n){return n.viewed?"normal":"bold"}),(function(n){return n.hovered&&"\n border-color: #0088ff;\n background-color: #0088ff22;\n "})),Vn=function(n){for(var e="",t=0;t<n.length;t++){var r=n[t];e+=r.name+"="+r.value,t<n.length-1&&(e+=";")}return e},Kn=function(e){var t=e.generations,r=e.onGenerationClick,i=n.useContext(b),l=i.hoveredId,a=i.setHoveredId,c=n.useState([]),u=c[0],d=c[1],s=n.useState([]),f=s[0],p=s[1],x=n.useState([]),m=x[0],g=x[1],h=function(n){for(var e={},t=0;t<n.length;t++){var r=n[t],i=r.inputText,o=Vn(r.parameters);i in e||(e[i]={}),o in e[i]||(e[i][o]=[]),e[i][o].push({id:r.id,content:r.content})}return e}(t);return n.createElement(Tn,null,0===t.length&&n.createElement("div",{style:{display:"flex",paddingTop:"5%",justifyContent:"center",alignItems:"center",height:"100%",color:"#ccc"}},"No generations yet..."),Object.keys(h).map((function(e,t){return[n.createElement(Hn,{key:t+"-i"},n.createElement(On,{opened:m.includes("input-".concat(t))?1:0,onClick:function(){var n="input-".concat(t);m.includes(n)?g(m.filter((function(e){return e!==n}))):g(o(o([],m,!0),[n],!1))}},An),m.includes("input-".concat(t))&&n.createElement(Nn,null,e)),n.createElement(Pn,{key:t+"-s"},n.createElement(Dn,{minimized:f.includes("input-".concat(t))?1:0,onClick:function(){var n="input-".concat(t);f.includes(n)?p(f.filter((function(e){return e!==n}))):p(o(o([],f,!0),[n],!1))}}),!f.includes("input-".concat(t))&&n.createElement(Rn,null,Object.keys(h[e]).map((function(i,c){return[n.createElement(Hn,{key:c+"-i"},n.createElement(On,{opened:m.includes("parameters-".concat(t,"-").concat(c))?1:0,onClick:function(){var n="parameters-".concat(t,"-").concat(c);m.includes(n)?g(m.filter((function(e){return e!==n}))):g(o(o([],m,!0),[n],!1))}},Ln),m.includes("parameters-".concat(t,"-").concat(c))&&n.createElement(Nn,null,i.split(";").map((function(e,t){var r=e.split("="),i=r[0],o=r[1];return n.createElement("div",{key:t},i,": ",n.createElement("b",null,o))})))),n.createElement(Pn,{key:c+"-s"},n.createElement(Dn,{minimized:f.includes("parameters-".concat(t,"-").concat(c))?1:0,onClick:function(){var n="parameters-".concat(t,"-").concat(c);f.includes(n)?p(f.filter((function(e){return e!==n}))):p(o(o([],f,!0),[n],!1))}}),!f.includes("parameters-".concat(t,"-").concat(c))&&n.createElement(Rn,null,h[e][i].map((function(e,t){return n.createElement(Bn,{key:t,viewed:u.includes(e.id)?1:0,hovered:e.id===l?1:0,onMouseOver:function(){u.includes(e.id)||d(o(o([],u,!0),[e.id],!1)),a(e.id)},onMouseOut:function(){a(null)},onClick:function(){r&&r(e.content)}},e.content)}))))]}))))]})))},_n=e.div($||($=l(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n padding-right: 4px;\n width: 100%;\n height: 100%;\n"],["\n display: flex;\n flex-direction: row;\n gap: 8px;\n padding-right: 4px;\n width: 100%;\n height: 100%;\n"]))),Fn=e.div(nn||(nn=l(["\n flex: 1;\n height: 100%;\n position: relative;\n"],["\n flex: 1;\n height: 100%;\n position: relative;\n"]))),qn=e.div(en||(en=l(["\n position: absolute;\n top: ","%;\n left: ","%;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background-color: ",";\n cursor: pointer;\n ","\n ","\n &:hover {\n width: 16px;\n height: 16px;\n margin-left: -4px;\n margin-top: -4px;\n background-color: #0088ff;\n box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);\n }\n"],["\n position: absolute;\n top: ","%;\n left: ","%;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background-color: ",";\n cursor: pointer;\n ","\n ","\n &:hover {\n width: 16px;\n height: 16px;\n margin-left: -4px;\n margin-top: -4px;\n background-color: #0088ff;\n box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);\n }\n"])),(function(n){return n.y}),(function(n){return n.x}),(function(n){return n.viewed?"#aaaaaa99":"#0088ff66"}),(function(n){return n.hovered&&"\n width: 16px;\n height: 16px;\n margin-left: -4px;\n margin-top: -4px;\n background-color: #0088ffaa;\n "}),(function(n){return n.selected&&"\n width: 16px;\n height: 16px;\n margin-left: -4px;\n margin-top: -4px;\n background-color: #0088ff;\n box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);\n "})),Wn=e.div(tn||(tn=l(["\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex: 1;\n height: 100%;\n width: 0;\n"],["\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex: 1;\n height: 100%;\n width: 0;\n"]))),Jn=e.div(rn||(rn=l(["\n display: flex;\n padding: 8px;\n border-radius: 8px;\n font-size: 10px;\n box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);\n gap: 4px;\n flex-direction: column;\n overflow-y: auto;\n"],["\n display: flex;\n padding: 8px;\n border-radius: 8px;\n font-size: 10px;\n box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);\n gap: 4px;\n flex-direction: column;\n overflow-y: auto;\n"]))),Zn=e.div(on||(on=l(["\n font-size: 12px;\n overflow-y: auto;\n flex: 1;\n\n &::-webkit-scrollbar {\n width: 4px;\n }\n &::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n }\n &::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 4px;\n }\n"],["\n font-size: 12px;\n overflow-y: auto;\n flex: 1;\n\n &::-webkit-scrollbar {\n width: 4px;\n }\n &::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n }\n &::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 4px;\n }\n"]))),Xn=e.svg(ln||(ln=l(["\n position: absolute;\n top: calc(50% - 24px);\n left: calc(50% - 24px);\n height: 48px;\n width: 48px;\n z-index: 2;\n"],["\n position: absolute;\n top: calc(50% - 24px);\n left: calc(50% - 24px);\n height: 48px;\n width: 48px;\n z-index: 2;\n"]))),Yn=function(e){return e.map((function(e){var t=e.name,r=e.value;return n.createElement("div",{key:t},t,": ",n.createElement("span",{style:{fontWeight:"bold"}},r))}))},Qn=function(e){var t=e.generations,r=e.onGenerationClick,i=e.getPosition,l=n.useContext(b),a=l.hoveredId,c=l.setHoveredId,u=l.updateGenerationsData,d=n.useRef([]),s=n.useState(null),f=s[0],p=s[1],x=n.useState([]),m=x[0],g=x[1],h=n.useState(0),v=h[0],y=h[1];n.useEffect((function(){if(t.length!==d.current.length){var n=t.filter((function(n){return!d.current.find((function(e){return e.id===n.id}))}));if(0!==n.length){var e=n.filter((function(n){var e=n.metadata;return!e||!e.position}));y((function(n){return n+1})),i(e).then((function(n){0!=n.length?(u(e.map((function(n){return n.id})),n.map((function(n){return{position:n}}))),y((function(n){return n-1}))):y((function(n){return n-1}))})),d.current=t}}}),[t]);var w=t.find((function(n){return n.id===a})),k=t.find((function(n){return n.id===f})),E={x:{min:null,max:null},y:{min:null,max:null}};return t.forEach((function(n){var e=n.metadata;if(e){var t=e.position;if(t){var r=t.x,i=t.y;(null==E.x.min||r<E.x.min)&&(E.x.min=r),(null==E.x.max||r>E.x.max)&&(E.x.max=r),(null==E.y.min||i<E.y.min)&&(E.y.min=i),(null==E.y.max||i>E.y.max)&&(E.y.max=i)}}})),n.createElement(_n,null,n.createElement(Fn,null,0==t.length&&n.createElement("div",{style:{display:"flex",paddingTop:"5%",justifyContent:"center",alignItems:"center",color:"#ccc"}},"No generations yet..."),v>0&&n.createElement(Xn,null,n.createElement("g",{transform:"scale(0.84)"},n.createElement("path",{fill:"#0088ff99",d:"M25,5A20.14,20.14,0,0,1,45,22.88a2.51,2.51,0,0,0,2.49,2.26h0A2.52,2.52,0,0,0,50,22.33a25.14,25.14,0,0,0-50,0,2.52,2.52,0,0,0,2.5,2.81h0A2.51,2.51,0,0,0,5,22.88,20.14,20.14,0,0,1,25,5Z"},n.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 25 25",to:"360 25 25",dur:"0.5s",repeatCount:"indefinite"})))),t.map((function(e,t){var r=e.metadata;if(!r)return null;var i=r.position;if(!i)return null;var l=i.x,u=i.y,d=t%15/5,s=null==E.x.min||null==E.x.max?8:(l-E.x.min)/(E.x.max-E.x.min)*84+8+d,x=null==E.y.min||null==E.y.max?8:(u-E.y.min)/(E.y.max-E.y.min)*84+8+d;return n.createElement(qn,{key:e.id,x:s,y:x,onClick:function(){return p(e.id)},onMouseOver:function(){c(e.id),g(o(o([],m,!0),[e.id],!1))},onMouseOut:function(){return c(null)},selected:f===e.id,hovered:a===e.id,viewed:m.includes(e.id)})}))),n.createElement(Wn,null,n.createElement(Jn,{style:{flex:1}},n.createElement("div",null,n.createElement("b",null,"Input")),n.createElement(Zn,{style:{color:w?"#0066ff99":k?"#555":"#999"}},w?w.inputText:k?k.inputText:"Hover over a generation")),n.createElement(Jn,{style:{flex:1}},n.createElement("div",null,n.createElement("b",null,"Parameters")),n.createElement(Zn,{style:{color:w?"#0066ff99":k?"#555":"#999"}},w?Yn(w.parameters):k?Yn(k.parameters):"Hover over a generation")),n.createElement(Jn,{style:{flex:1,border:"solid 1px #0066ff",cursor:"pointer"},onClick:function(){return k&&r&&r(k.content)}},n.createElement("div",null,n.createElement("b",null,"Output")),n.createElement(Zn,{style:{color:w?"#0066ff99":k?"#555":"#999"}},w?w.content:k?k.content:"Hover over a generation"))))},Un=e.div(an||(an=l(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n padding-right: 4px;\n width: 100%;\n height: 100%;\n"],["\n display: flex;\n flex-direction: row;\n gap: 8px;\n padding-right: 4px;\n width: 100%;\n height: 100%;\n"]))),$n=e.div(cn||(cn=l(["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 8px;\n"],["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 8px;\n"]))),ne=e.div(un||(un=l(["\n flex: 1;\n position: relative;\n border-left: solid 1px #ccc;\n border-bottom: solid 1px #ccc;\n"],["\n flex: 1;\n position: relative;\n border-left: solid 1px #ccc;\n border-bottom: solid 1px #ccc;\n"]))),ee=e.div(dn||(dn=l(["\n position: absolute;\n top: ","%;\n left: ","%;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background-color: ",";\n cursor: pointer;\n ","\n &:hover {\n width: 16px;\n height: 16px;\n margin-left: -4px;\n margin-top: -4px;\n background-color: #0088ff;\n box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);\n }\n"],["\n position: absolute;\n top: ","%;\n left: ","%;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background-color: ",";\n cursor: pointer;\n ","\n &:hover {\n width: 16px;\n height: 16px;\n margin-left: -4px;\n margin-top: -4px;\n background-color: #0088ff;\n box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);\n }\n"])),(function(n){return n.y}),(function(n){return n.x}),(function(n){return n.viewed?"#aaaaaa99":"#0088ff99"}),(function(n){return n.selected&&"\n width: 16px;\n height: 16px;\n margin-left: -4px;\n margin-top: -4px;\n background-color: #0088ff;\n box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);\n "})),te=e.div(sn||(sn=l(["\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex: 1;\n height: 100%;\n width: 0;\n"],["\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex: 1;\n height: 100%;\n width: 0;\n"]))),re=e.div(fn||(fn=l(["\n display: flex;\n padding: 8px;\n border-radius: 8px;\n font-size: 10px;\n box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);\n gap: 4px;\n flex-direction: column;\n overflow-y: auto;\n"],["\n display: flex;\n padding: 8px;\n border-radius: 8px;\n font-size: 10px;\n box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);\n gap: 4px;\n flex-direction: column;\n overflow-y: auto;\n"]))),ie=e.div(pn||(pn=l(["\n font-size: 12px;\n overflow-y: auto;\n flex: 1;\n\n &::-webkit-scrollbar {\n width: 4px;\n }\n &::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n }\n &::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 4px;\n }\n"],["\n font-size: 12px;\n overflow-y: auto;\n flex: 1;\n\n &::-webkit-scrollbar {\n width: 4px;\n }\n &::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n }\n &::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 4px;\n }\n"]))),oe=e.div(xn||(xn=l(["\n height: 100%;\n color: #aaa;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 12px;\n & > span {\n transform: rotate(180deg);\n writing-mode: tb-rl;\n }\n"],["\n height: 100%;\n color: #aaa;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 12px;\n & > span {\n transform: rotate(180deg);\n writing-mode: tb-rl;\n }\n"]))),le=e.div(mn||(mn=l(["\n width: 100%;\n color: #aaa;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 12px;\n"],["\n width: 100%;\n color: #aaa;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 12px;\n"]))),ae=e.div(gn||(gn=l(["\n display: flex;\n gap: 4px;\n font-size: 12px;\n color: #999;\n width: 100%;\n\n & > select {\n flex: 1;\n font-size: 12px;\n border: solid 1px #cccccc;\n border-radius: 4px;\n box-sizing: border-box;\n }\n"],["\n display: flex;\n gap: 4px;\n font-size: 12px;\n color: #999;\n width: 100%;\n\n & > select {\n flex: 1;\n font-size: 12px;\n border: solid 1px #cccccc;\n border-radius: 4px;\n box-sizing: border-box;\n }\n"]))),ce=e.svg(hn||(hn=l(["\n position: absolute;\n top: calc(50% - 24px);\n left: calc(50% - 24px);\n height: 48px;\n width: 48px;\n z-index: 2;\n"],["\n position: absolute;\n top: calc(50% - 24px);\n left: calc(50% - 24px);\n height: 48px;\n width: 48px;\n z-index: 2;\n"]))),ue=function(e){return e.map((function(e){var t=e.name,r=e.value;return n.createElement("div",{key:t},t,": ",n.createElement("span",{style:{fontWeight:"bold"}},r))}))},de=function(e){var t=e.generations,r=e.onGenerationClick,l=e.getRatings,a=n.useContext(b),c=a.hoveredId,u=a.setHoveredId,d=a.updateGenerationsData,s=n.useState(0),f=s[0],p=s[1],x=n.useState(null),m=x[0],g=x[1],h=n.useState([]),v=h[0],y=h[1],w=n.useState([]),k=w[0],E=w[1],z=n.useState({x:null,y:null}),C=z[0],S=z[1],I=n.useRef([]);n.useEffect((function(){if(t.length!==I.current.length){var n=t.filter((function(n){return!I.current.find((function(e){return e.id===n.id}))}));if(0!==n.length){var e=n.filter((function(n){var e=n.metadata;return!e||!e.ratings}));if(0===e.length&&(null==C.x||null==C.y)){var r=n[0].metadata.ratings,i=Object.keys(r);return E(i),void S({x:i[0],y:i[1]})}p((function(n){return n+1})),l(e).then((function(n){if(0!==n.length){var t=Object.keys(n[0]);d(e.map((function(n){return n.id})),n.map((function(n){return{ratings:n}}))),null!=C.x&&null!=C.y||(E(t),S({x:t[0],y:t[1]})),p((function(n){return n-1}))}else p((function(n){return n-1}))})),I.current=t}}}),[t]);var j=t.find((function(n){return n.id===c})),M=t.find((function(n){return n.id===m}));return n.createElement(Un,null,n.createElement($n,null,n.createElement(ae,null,n.createElement("div",null,"X"),n.createElement("select",{value:C.x?C.x:"",onChange:function(n){return S(i(i({},C),{x:n.target.value}))}},k.map((function(e){return n.createElement("option",{key:e,value:e},e)}))),n.createElement("div",null,"Y"),n.createElement("select",{value:C.y?C.y:"",onChange:function(n){return S(i(i({},C),{y:n.target.value}))}},k.map((function(e){return n.createElement("option",{key:e,value:e},e)})))),n.createElement("div",{style:{display:"flex",flexDirection:"row",gap:"8px",flex:1,position:"relative"}},n.createElement(oe,null,n.createElement("span",null,C.y?C.y:"y-axis")),f>0&&n.createElement(ce,null,n.createElement("g",{transform:"scale(0.84)"},n.createElement("path",{fill:"#0088ff99",d:"M25,5A20.14,20.14,0,0,1,45,22.88a2.51,2.51,0,0,0,2.49,2.26h0A2.52,2.52,0,0,0,50,22.33a25.14,25.14,0,0,0-50,0,2.52,2.52,0,0,0,2.5,2.81h0A2.51,2.51,0,0,0,5,22.88,20.14,20.14,0,0,1,25,5Z"},n.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 25 25",to:"360 25 25",dur:"0.5s",repeatCount:"indefinite"})))),n.createElement(ne,null,0==t.length&&n.createElement("div",{style:{display:"flex",paddingTop:"5%",justifyContent:"center",alignItems:"center",color:"#ccc"}},"No generations yet..."),t.map((function(e,t){var r=e.metadata;if(!r)return null;var i=r.ratings;if(!i)return null;var l=t%15/5,a=null==C.x?8:84*i[C.x]+8+l,c=null==C.y?8:84*i[C.y]+8+l;return n.createElement(ee,{key:e.id,x:a,y:c,onClick:function(){return g(e.id)},onMouseOver:function(){u(e.id),y(o(o([],v,!0),[e.id],!1))},onMouseOut:function(){return u(null)},selected:m===e.id,viewed:v.includes(e.id)})})))),n.createElement(le,null,C.x?C.x:"x-axis")),n.createElement(te,null,n.createElement(re,{style:{flex:1}},n.createElement("div",null,n.createElement("b",null,"Input")),n.createElement(ie,{style:{color:j?"#0066ff99":M?"#555":"#999"}},j?j.inputText:M?M.inputText:"Hover over a generation")),n.createElement(re,{style:{flex:1}},n.createElement("div",null,n.createElement("b",null,"Parameters")),n.createElement(ie,{style:{color:j?"#0066ff99":M?"#555":"#999"}},j?ue(j.parameters):M?ue(M.parameters):"Hover over a generation")),n.createElement(re,{style:{flex:1,border:"solid 1px #0066ff",cursor:"pointer"},onClick:function(){return M&&r&&r(M.content)}},n.createElement("div",null,n.createElement("b",null,"Output")),n.createElement(ie,{style:{color:j?"#0066ff99":M?"#555":"#999"}},j?j.content:M?M.content:"Hover over a generation"))))},se=e.div(pe||(pe=l(["\n display: flex;\n flex-direction: column;\n gap: 24px;\n width: 100%;\n height: 100%;\n overflow-y: auto;\n box-sizing: border-box;\n position: relative;\n padding-right: 4px;\n\n &::-webkit-scrollbar {\n width: 4px;\n }\n &::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n }\n &::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 4px;\n }\n"],["\n display: flex;\n flex-direction: column;\n gap: 24px;\n width: 100%;\n height: 100%;\n overflow-y: auto;\n box-sizing: border-box;\n position: relative;\n padding-right: 4px;\n\n &::-webkit-scrollbar {\n width: 4px;\n }\n &::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n }\n &::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 4px;\n }\n"]))),fe=e.div(xe||(xe=l(["\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 8px;\n border-radius: 8px;\n background-color: ",";\n cursor: pointer;\n border: solid 1px ",";\n"],["\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 8px;\n border-radius: 8px;\n background-color: ",";\n cursor: pointer;\n border: solid 1px ",";\n"])),(function(n){return n.selected?"#0088ff44":n.hovered?"#0088ff22":"#fff"}),(function(n){return n.selected?"#0088ff":n.hovered?"#0088ff66":"#ccc"}));e.div(me||(me=l(["\n font-size: 12px;\n color: #333;\n border-radius: 4px;\n padding: 8px;\n background-color: #fff;\n"],["\n font-size: 12px;\n color: #333;\n border-radius: 4px;\n padding: 8px;\n background-color: #fff;\n"])));var pe,xe,me,ge,he,be,ve,ye,we,ke,Ee,ze=e.div(ge||(ge=l(["\n display: flex;\n flex-direction: column;\n gap: 2px;\n position: relative;\n"],["\n display: flex;\n flex-direction: column;\n gap: 2px;\n position: relative;\n"]))),Ce=e.div(he||(he=l(["\n font-size: 12px;\n color: #fff;\n position: absolute;\n top: 2px;\n left: 8px;\n"],["\n font-size: 12px;\n color: #fff;\n position: absolute;\n top: 2px;\n left: 8px;\n"]))),Se=e.div(be||(be=l(["\n font-size: 12px;\n color: #fff;\n position: absolute;\n top: 2px;\n right: 8px;\n"],["\n font-size: 12px;\n color: #fff;\n position: absolute;\n top: 2px;\n right: 8px;\n"]))),Ie=e.div(ve||(ve=l(["\n width: 100%;\n height: 20px;\n border-radius: 4px;\n background-color: #ccc;\n overflow: hidden;\n display: flex;\n flex-direction: row;\n"],["\n width: 100%;\n height: 20px;\n border-radius: 4px;\n background-color: #ccc;\n overflow: hidden;\n display: flex;\n flex-direction: row;\n"]))),je=e.div(ye||(ye=l(["\n height: 100%;\n background-color: #0088ff;\n"],["\n height: 100%;\n background-color: #0088ff;\n"]))),Me=e.div(we||(we=l(["\n height: 100%;\n background-color: #aaa;\n flex: 1;\n"],["\n height: 100%;\n background-color: #aaa;\n flex: 1;\n"]))),Ge=e.svg(ke||(ke=l(["\n position: absolute;\n top: calc(50% - 24px);\n left: calc(50% - 24px);\n height: 48px;\n width: 48px;\n z-index: 2;\n"],["\n position: absolute;\n top: calc(50% - 24px);\n left: calc(50% - 24px);\n height: 48px;\n width: 48px;\n z-index: 2;\n"]))),Ae=function(e){var t=e.generations,r=e.onGenerationClick,i=e.getRatings,o=n.useContext(b),l=o.hoveredId,a=o.setHoveredId,c=o.updateGenerationsData,u=n.useState(0),d=u[0],s=u[1],f=n.useState(null),p=f[0];f[1];var x=n.useRef([]);return n.useEffect((function(){if(t.length!==x.current.length){var n=t.filter((function(n){return!x.current.find((function(e){return e.id===n.id}))}));if(0!==n.length){var e=n.filter((function(n){var e=n.metadata;return!e||!e.ratings}));0!==e.length&&(s((function(n){return n+1})),i(e).then((function(n){0!==n.length?(c(e.map((function(n){return n.id})),n.map((function(n){return{ratings:n}}))),s((function(n){return n-1}))):s((function(n){return n-1}))})),x.current=t)}}}),[t]),n.createElement(se,null,d>0&&n.createElement(Ge,null,n.createElement("g",{transform:"scale(0.84)"},n.createElement("path",{fill:"#0088ff99",d:"M25,5A20.14,20.14,0,0,1,45,22.88a2.51,2.51,0,0,0,2.49,2.26h0A2.52,2.52,0,0,0,50,22.33a25.14,25.14,0,0,0-50,0,2.52,2.52,0,0,0,2.5,2.81h0A2.51,2.51,0,0,0,5,22.88,20.14,20.14,0,0,1,25,5Z"},n.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 25 25",to:"360 25 25",dur:"0.5s",repeatCount:"indefinite"})))),t.map((function(e){var t,i=null===(t=e.metadata)||void 0===t?void 0:t.ratings;return i?n.createElement(fe,{selected:e.id===p,hovered:e.id===l,onClick:function(){return r?r(e.content):null},onMouseEnter:function(){return a(e.id)},onMouseLeave:function(){return a(null)}},Object.keys(i).map((function(e){return n.createElement(ze,null,n.createElement(Ce,null,e),n.createElement(Se,null,(100*i[e]).toFixed(0),"%"),n.createElement(Ie,null,n.createElement(je,{style:{width:"".concat(100*i[e],"%")}}),n.createElement(Me,null)))}))):null})))},Le=e.div(Ee||(Ee=l(["\n flex: 1;\n"],["\n flex: 1;\n"])));exports.Cell=E,exports.CellBoard=function(e){var t=e.initialBoard,r=e.maxRows,l=e.maxC