gutengood-js 2.0.2

package/.github/dependabot.yml

@@ -0,0 +1,6 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: daily

package/.github/workflows/auto-merge.yml

@@ -0,0 +1,17 @@
+name: Dependabot auto-merge
+on: pull_request
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  dependabot:
+    runs-on: ubuntu-latest
+    if: github.actor == 'dependabot[bot]'
+    steps:
+      - name: Enable auto-merge for Dependabot PRs
+        run: gh pr merge --auto --merge "$PR_URL"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GH_TOKEN: ${{secrets.GITHUB_TOKEN}}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Alexandr
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/build/gutengood.css

@@ -0,0 +1 @@
+.gutengood .components-base-control.is-meta{background-color:#f2f2f2;padding:16px}.gutengood .components-datetime__time{max-width:300px}.gutengood .components-datetime__time-separator{background-color:#fff}.gutengood .image-component>div{position:relative;width:auto}.gutengood .image-component>div>div{aspect-ratio:1;margin-bottom:8px;overflow:hidden;position:relative;width:128px}.gutengood .image-component>div>div .image-component-image{height:100%;-o-object-fit:cover;object-fit:cover;position:absolute;width:100%}.gutengood .image-component>div>div .image-component-buttons{align-items:center;display:flex;gap:8px;position:absolute;right:8px;top:8px}.gutengood .image-component>div>div .image-component-buttons button{background-color:hsla(0,0%,100%,.8)}.gutengood .block-editor-link-control{max-width:300px;min-width:auto}.gutengood .block-editor-link-control .block-editor-url-input{min-width:100%}.gutengood .block-editor-link-control .block-editor-link-control__search-item.is-current{padding:0}.gutengood .block-editor-link-control .block-editor-link-control__search-enter{right:4px}.gutengood .block-editor-link-control .components-menu-item__item{min-width:0}.gutengood .block-editor-link-control .block-editor-link-control__field{margin:8px 0}.gutengood .block-editor-link-control .block-editor-link-control__search-input .components-spinner.components-spinner{top:21px;transform:translateY(-50%)}.gutengood .file-component{align-items:center;display:flex;gap:8px}.gutengood .file-component .file-component-icon{flex-shrink:0;width:20px}.gutengood .file-component .file-component-info{display:flex;gap:8px}.gutengood .file-component .file-component-info>div{display:flex;flex:1;flex-direction:column}.gutengood .file-component .file-component-info .file-component-info-name{word-break:break-all}.gutengood .file-component .file-component-info .file-component-info-size{color:#6b7280;font-size:12px;white-space:nowrap}.gutengood .file-component .components-button{height:24px!important;min-width:1px!important;padding:0!important}.gutengood .repeater-component{display:flex;flex-direction:column;gap:16px}.gutengood .repeater-component .repeater-component-item{background-color:#f3f4f6;border:1px solid #d1d5db;display:flex}.gutengood .repeater-component .repeater-component-item-buttons{align-items:center;background-color:#e5e7eb;display:flex;flex-direction:column;flex-shrink:0;gap:8px;width:40px}.gutengood .repeater-component .repeater-component-item-buttons button{box-shadow:none!important}.gutengood .repeater-component .repeater-component-item-components{display:flex;flex-direction:column;gap:16px;padding:16px;width:100%}.gutengood .repeater-component .repeater-component-item-components.is-collapsed>div{display:none}.gutengood .repeater-component .repeater-component-item-components.is-collapsed>div:first-child{display:block}.gutengood .repeater-component-add-item-button{display:block;margin:12px auto 0;max-width:300px;width:100%}.gutengood.gutengood-fields{gap:16px;padding:16px}.gutengood.gutengood-fields,.gutengood.gutengood-options{display:flex;flex-direction:column}.gutengood.gutengood-options .components-color-picker .components-base-control,.gutengood.gutengood-options .components-datetime__time .components-base-control{margin-bottom:0!important}.gutengood.gutengood-options .file-component-info{align-items:center;display:flex}

package/build/gutengood.js

@@ -0,0 +1 @@
+(()=>{"use strict";var e={n:t=>{var n=t&&t.__esModule?()=>t.default:()=>t;return e.d(n,{a:n}),n},d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};const t=window.wp.blocks,n=window.wp.element,r=window.wp.components,o=window.wp.apiFetch;var i=e.n(o);const a=window.wp.blockEditor,l=window.wp.data,s=window.ReactJSXRuntime,c=({open:e,remove:t,mediaId:n})=>{const o=(0,l.useSelect)((e=>e("core").getMedia(n)),[n]),i=o?.media_details?.sizes?.thumbnail?.source_url||o?.source_url||null;return(0,s.jsx)("div",{className:"image-component",children:i?(0,s.jsx)("div",{children:(0,s.jsxs)("div",{children:[(0,s.jsx)("img",{className:"image-component-image",src:i,alt:""}),(0,s.jsxs)("div",{className:"image-component-buttons",children:[(0,s.jsx)(r.Button,{onClick:e,icon:"edit"}),(0,s.jsx)(r.Button,{icon:"trash",onClick:t})]})]})}):(0,s.jsx)(r.Button,{className:"is-primary",onClick:e,children:"Choose Image"})})},d=()=>(0,s.jsx)(r.Icon,{icon:()=>(0,s.jsx)("svg",{className:"file-component-icon",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",children:(0,s.jsx)("path",{d:"M380.7 67.3c-29.1-29.1-76.3-29.1-105.4 0l-192 192c-46.8 46.8-46.8 122.6 0 169.4s122.6 46.8 169.4 0l152-152c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6l-152 152c-59.3 59.3-155.4 59.3-214.6 0S1.4 296 60.7 236.7l192-192c41.6-41.6 109-41.6 150.6 0s41.6 109 0 150.6L219.5 379.1c-28.2 28.2-74.6 25.6-99.6-5.5c-21.3-26.6-19.2-65 4.9-89.1L276.7 132.7c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6L147.5 307.1c-12.6 12.6-13.7 32.6-2.6 46.5c13 16.2 37.2 17.6 51.9 2.9L380.7 172.7c29.1-29.1 29.1-76.3 0-105.4z"})})}),u=({open:e,remove:t,file:n})=>(0,s.jsxs)("div",{className:"file-component",children:[(0,s.jsx)(d,{}),n&&n.id?(0,s.jsxs)("div",{className:"file-component-info",children:[(0,s.jsxs)("div",{children:[(0,s.jsx)("span",{className:"file-component-info-name",children:n.name}),(0,s.jsx)("span",{className:"file-component-info-size",children:n.size})]}),(0,s.jsx)(r.Button,{icon:"trash",onClick:t})]}):(0,s.jsx)(r.Button,{onClick:e,children:"Select File"})]}),h=window.React;var p=e.n(h);const f=window.ReactDOM,v="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement;function g(e){const t=Object.prototype.toString.call(e);return"[object Window]"===t||"[object global]"===t}function m(e){return"nodeType"in e}function b(e){var t,n;return e?g(e)?e:m(e)&&null!=(t=null==(n=e.ownerDocument)?void 0:n.defaultView)?t:window:window}function x(e){const{Document:t}=b(e);return e instanceof t}function w(e){return!g(e)&&e instanceof b(e).HTMLElement}function y(e){return e instanceof b(e).SVGElement}function C(e){return e?g(e)?e.document:m(e)?x(e)?e:w(e)||y(e)?e.ownerDocument:document:document:document}const D=v?h.useLayoutEffect:h.useEffect;function R(e){const t=(0,h.useRef)(e);return D((()=>{t.current=e})),(0,h.useCallback)((function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return null==t.current?void 0:t.current(...n)}),[])}function E(e,t){void 0===t&&(t=[e]);const n=(0,h.useRef)(e);return D((()=>{n.current!==e&&(n.current=e)}),t),n}function S(e,t){const n=(0,h.useRef)();return(0,h.useMemo)((()=>{const t=e(n.current);return n.current=t,t}),[...t])}function j(e){const t=R(e),n=(0,h.useRef)(null),r=(0,h.useCallback)((e=>{e!==n.current&&(null==t||t(e,n.current)),n.current=e}),[]);return[n,r]}function N(e){const t=(0,h.useRef)();return(0,h.useEffect)((()=>{t.current=e}),[e]),t.current}let M={};function k(e,t){return(0,h.useMemo)((()=>{if(t)return t;const n=null==M[e]?0:M[e]+1;return M[e]=n,e+"-"+n}),[e,t])}function I(e){return function(t){for(var n=arguments.length,r=new Array(n>1?n-1:0),o=1;o<n;o++)r[o-1]=arguments[o];return r.reduce(((t,n)=>{const r=Object.entries(n);for(const[n,o]of r){const r=t[n];null!=r&&(t[n]=r+e*o)}return t}),{...t})}}const T=I(1),L=I(-1);function B(e){if(!e)return!1;const{KeyboardEvent:t}=b(e.target);return t&&e instanceof t}function A(e){if(function(e){if(!e)return!1;const{TouchEvent:t}=b(e.target);return t&&e instanceof t}(e)){if(e.touches&&e.touches.length){const{clientX:t,clientY:n}=e.touches[0];return{x:t,y:n}}if(e.changedTouches&&e.changedTouches.length){const{clientX:t,clientY:n}=e.changedTouches[0];return{x:t,y:n}}}return function(e){return"clientX"in e&&"clientY"in e}(e)?{x:e.clientX,y:e.clientY}:null}const O=Object.freeze({Translate:{toString(e){if(!e)return;const{x:t,y:n}=e;return"translate3d("+(t?Math.round(t):0)+"px, "+(n?Math.round(n):0)+"px, 0)"}},Scale:{toString(e){if(!e)return;const{scaleX:t,scaleY:n}=e;return"scaleX("+t+") scaleY("+n+")"}},Transform:{toString(e){if(e)return[O.Translate.toString(e),O.Scale.toString(e)].join(" ")}},Transition:{toString(e){let{property:t,duration:n,easing:r}=e;return t+" "+n+"ms "+r}}}),P="a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),*[tabindex]";function z(e){return e.matches(P)?e:e.querySelector(P)}const F={display:"none"};function U(e){let{id:t,value:n}=e;return p().createElement("div",{id:t,style:F},n)}function H(e){let{id:t,announcement:n,ariaLiveType:r="assertive"}=e;return p().createElement("div",{id:t,style:{position:"fixed",top:0,left:0,width:1,height:1,margin:-1,border:0,padding:0,overflow:"hidden",clip:"rect(0 0 0 0)",clipPath:"inset(100%)",whiteSpace:"nowrap"},role:"status","aria-live":r,"aria-atomic":!0},n)}const V=(0,h.createContext)(null),X={draggable:"\n    To pick up a draggable item, press the space bar.\n    While dragging, use the arrow keys to move the item.\n    Press space again to drop the item in its new position, or press escape to cancel.\n  "},Y={onDragStart(e){let{active:t}=e;return"Picked up draggable item "+t.id+"."},onDragOver(e){let{active:t,over:n}=e;return n?"Draggable item "+t.id+" was moved over droppable area "+n.id+".":"Draggable item "+t.id+" is no longer over a droppable area."},onDragEnd(e){let{active:t,over:n}=e;return n?"Draggable item "+t.id+" was dropped over droppable area "+n.id:"Draggable item "+t.id+" was dropped."},onDragCancel(e){let{active:t}=e;return"Dragging was cancelled. Draggable item "+t.id+" was dropped."}};function K(e){let{announcements:t=Y,container:n,hiddenTextDescribedById:r,screenReaderInstructions:o=X}=e;const{announce:i,announcement:a}=function(){const[e,t]=(0,h.useState)("");return{announce:(0,h.useCallback)((e=>{null!=e&&t(e)}),[]),announcement:e}}(),l=k("DndLiveRegion"),[s,c]=(0,h.useState)(!1);if((0,h.useEffect)((()=>{c(!0)}),[]),function(e){const t=(0,h.useContext)(V);(0,h.useEffect)((()=>{if(!t)throw new Error("useDndMonitor must be used within a children of <DndContext>");return t(e)}),[e,t])}((0,h.useMemo)((()=>({onDragStart(e){let{active:n}=e;i(t.onDragStart({active:n}))},onDragMove(e){let{active:n,over:r}=e;t.onDragMove&&i(t.onDragMove({active:n,over:r}))},onDragOver(e){let{active:n,over:r}=e;i(t.onDragOver({active:n,over:r}))},onDragEnd(e){let{active:n,over:r}=e;i(t.onDragEnd({active:n,over:r}))},onDragCancel(e){let{active:n,over:r}=e;i(t.onDragCancel({active:n,over:r}))}})),[i,t])),!s)return null;const d=p().createElement(p().Fragment,null,p().createElement(U,{id:r,value:o.draggable}),p().createElement(H,{id:l,announcement:a}));return n?(0,f.createPortal)(d,n):d}var W;function _(){}function G(e,t){return(0,h.useMemo)((()=>({sensor:e,options:null!=t?t:{}})),[e,t])}!function(e){e.DragStart="dragStart",e.DragMove="dragMove",e.DragEnd="dragEnd",e.DragCancel="dragCancel",e.DragOver="dragOver",e.RegisterDroppable="registerDroppable",e.SetDroppableDisabled="setDroppableDisabled",e.UnregisterDroppable="unregisterDroppable"}(W||(W={}));const J=Object.freeze({x:0,y:0});function q(e,t){return Math.sqrt(Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2))}function Z(e,t){let{data:{value:n}}=e,{data:{value:r}}=t;return n-r}function $(e,t){let{data:{value:n}}=e,{data:{value:r}}=t;return r-n}function Q(e){let{left:t,top:n,height:r,width:o}=e;return[{x:t,y:n},{x:t+o,y:n},{x:t,y:n+r},{x:t+o,y:n+r}]}function ee(e,t){if(!e||0===e.length)return null;const[n]=e;return t?n[t]:n}function te(e,t,n){return void 0===t&&(t=e.left),void 0===n&&(n=e.top),{x:t+.5*e.width,y:n+.5*e.height}}const ne=e=>{let{collisionRect:t,droppableRects:n,droppableContainers:r}=e;const o=te(t,t.left,t.top),i=[];for(const e of r){const{id:t}=e,r=n.get(t);if(r){const n=q(te(r),o);i.push({id:t,data:{droppableContainer:e,value:n}})}}return i.sort(Z)};function re(e,t){const n=Math.max(t.top,e.top),r=Math.max(t.left,e.left),o=Math.min(t.left+t.width,e.left+e.width),i=Math.min(t.top+t.height,e.top+e.height),a=o-r,l=i-n;if(r<o&&n<i){const n=t.width*t.height,r=e.width*e.height,o=a*l;return Number((o/(n+r-o)).toFixed(4))}return 0}const oe=e=>{let{collisionRect:t,droppableRects:n,droppableContainers:r}=e;const o=[];for(const e of r){const{id:r}=e,i=n.get(r);if(i){const n=re(i,t);n>0&&o.push({id:r,data:{droppableContainer:e,value:n}})}}return o.sort($)};function ie(e,t){return e&&t?{x:e.left-t.left,y:e.top-t.top}:J}function ae(e){return function(t){for(var n=arguments.length,r=new Array(n>1?n-1:0),o=1;o<n;o++)r[o-1]=arguments[o];return r.reduce(((t,n)=>({...t,top:t.top+e*n.y,bottom:t.bottom+e*n.y,left:t.left+e*n.x,right:t.right+e*n.x})),{...t})}}const le=ae(1);const se={ignoreTransform:!1};function ce(e,t){void 0===t&&(t=se);let n=e.getBoundingClientRect();if(t.ignoreTransform){const{transform:t,transformOrigin:r}=b(e).getComputedStyle(e);t&&(n=function(e,t,n){const r=function(e){if(e.startsWith("matrix3d(")){const t=e.slice(9,-1).split(/, /);return{x:+t[12],y:+t[13],scaleX:+t[0],scaleY:+t[5]}}if(e.startsWith("matrix(")){const t=e.slice(7,-1).split(/, /);return{x:+t[4],y:+t[5],scaleX:+t[0],scaleY:+t[3]}}return null}(t);if(!r)return e;const{scaleX:o,scaleY:i,x:a,y:l}=r,s=e.left-a-(1-o)*parseFloat(n),c=e.top-l-(1-i)*parseFloat(n.slice(n.indexOf(" ")+1)),d=o?e.width/o:e.width,u=i?e.height/i:e.height;return{width:d,height:u,top:c,right:s+d,bottom:c+u,left:s}}(n,t,r))}const{top:r,left:o,width:i,height:a,bottom:l,right:s}=n;return{top:r,left:o,width:i,height:a,bottom:l,right:s}}function de(e){return ce(e,{ignoreTransform:!0})}function ue(e,t){const n=[];return e?function r(o){if(null!=t&&n.length>=t)return n;if(!o)return n;if(x(o)&&null!=o.scrollingElement&&!n.includes(o.scrollingElement))return n.push(o.scrollingElement),n;if(!w(o)||y(o))return n;if(n.includes(o))return n;const i=b(e).getComputedStyle(o);return o!==e&&function(e,t){void 0===t&&(t=b(e).getComputedStyle(e));const n=/(auto|scroll|overlay)/;return["overflow","overflowX","overflowY"].some((e=>{const r=t[e];return"string"==typeof r&&n.test(r)}))}(o,i)&&n.push(o),function(e,t){return void 0===t&&(t=b(e).getComputedStyle(e)),"fixed"===t.position}(o,i)?n:r(o.parentNode)}(e):n}function he(e){const[t]=ue(e,1);return null!=t?t:null}function pe(e){return v&&e?g(e)?e:m(e)?x(e)||e===C(e).scrollingElement?window:w(e)?e:null:null:null}function fe(e){return g(e)?e.scrollX:e.scrollLeft}function ve(e){return g(e)?e.scrollY:e.scrollTop}function ge(e){return{x:fe(e),y:ve(e)}}var me;function be(e){return!(!v||!e)&&e===document.scrollingElement}function xe(e){const t={x:0,y:0},n=be(e)?{height:window.innerHeight,width:window.innerWidth}:{height:e.clientHeight,width:e.clientWidth},r={x:e.scrollWidth-n.width,y:e.scrollHeight-n.height};return{isTop:e.scrollTop<=t.y,isLeft:e.scrollLeft<=t.x,isBottom:e.scrollTop>=r.y,isRight:e.scrollLeft>=r.x,maxScroll:r,minScroll:t}}!function(e){e[e.Forward=1]="Forward",e[e.Backward=-1]="Backward"}(me||(me={}));const we={x:.2,y:.2};function ye(e,t,n,r,o){let{top:i,left:a,right:l,bottom:s}=n;void 0===r&&(r=10),void 0===o&&(o=we);const{isTop:c,isBottom:d,isLeft:u,isRight:h}=xe(e),p={x:0,y:0},f={x:0,y:0},v=t.height*o.y,g=t.width*o.x;return!c&&i<=t.top+v?(p.y=me.Backward,f.y=r*Math.abs((t.top+v-i)/v)):!d&&s>=t.bottom-v&&(p.y=me.Forward,f.y=r*Math.abs((t.bottom-v-s)/v)),!h&&l>=t.right-g?(p.x=me.Forward,f.x=r*Math.abs((t.right-g-l)/g)):!u&&a<=t.left+g&&(p.x=me.Backward,f.x=r*Math.abs((t.left+g-a)/g)),{direction:p,speed:f}}function Ce(e){if(e===document.scrollingElement){const{innerWidth:e,innerHeight:t}=window;return{top:0,left:0,right:e,bottom:t,width:e,height:t}}const{top:t,left:n,right:r,bottom:o}=e.getBoundingClientRect();return{top:t,left:n,right:r,bottom:o,width:e.clientWidth,height:e.clientHeight}}function De(e){return e.reduce(((e,t)=>T(e,ge(t))),J)}const Re=[["x",["left","right"],function(e){return e.reduce(((e,t)=>e+fe(t)),0)}],["y",["top","bottom"],function(e){return e.reduce(((e,t)=>e+ve(t)),0)}]];class Ee{constructor(e,t){this.rect=void 0,this.width=void 0,this.height=void 0,this.top=void 0,this.bottom=void 0,this.right=void 0,this.left=void 0;const n=ue(t),r=De(n);this.rect={...e},this.width=e.width,this.height=e.height;for(const[e,t,o]of Re)for(const i of t)Object.defineProperty(this,i,{get:()=>{const t=o(n),a=r[e]-t;return this.rect[i]+a},enumerable:!0});Object.defineProperty(this,"rect",{enumerable:!1})}}class Se{constructor(e){this.target=void 0,this.listeners=[],this.removeAll=()=>{this.listeners.forEach((e=>{var t;return null==(t=this.target)?void 0:t.removeEventListener(...e)}))},this.target=e}add(e,t,n){var r;null==(r=this.target)||r.addEventListener(e,t,n),this.listeners.push([e,t,n])}}function je(e,t){const n=Math.abs(e.x),r=Math.abs(e.y);return"number"==typeof t?Math.sqrt(n**2+r**2)>t:"x"in t&&"y"in t?n>t.x&&r>t.y:"x"in t?n>t.x:"y"in t&&r>t.y}var Ne,Me;function ke(e){e.preventDefault()}function Ie(e){e.stopPropagation()}!function(e){e.Click="click",e.DragStart="dragstart",e.Keydown="keydown",e.ContextMenu="contextmenu",e.Resize="resize",e.SelectionChange="selectionchange",e.VisibilityChange="visibilitychange"}(Ne||(Ne={})),function(e){e.Space="Space",e.Down="ArrowDown",e.Right="ArrowRight",e.Left="ArrowLeft",e.Up="ArrowUp",e.Esc="Escape",e.Enter="Enter",e.Tab="Tab"}(Me||(Me={}));const Te={start:[Me.Space,Me.Enter],cancel:[Me.Esc],end:[Me.Space,Me.Enter,Me.Tab]},Le=(e,t)=>{let{currentCoordinates:n}=t;switch(e.code){case Me.Right:return{...n,x:n.x+25};case Me.Left:return{...n,x:n.x-25};case Me.Down:return{...n,y:n.y+25};case Me.Up:return{...n,y:n.y-25}}};class Be{constructor(e){this.props=void 0,this.autoScrollEnabled=!1,this.referenceCoordinates=void 0,this.listeners=void 0,this.windowListeners=void 0,this.props=e;const{event:{target:t}}=e;this.props=e,this.listeners=new Se(C(t)),this.windowListeners=new Se(b(t)),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleCancel=this.handleCancel.bind(this),this.attach()}attach(){this.handleStart(),this.windowListeners.add(Ne.Resize,this.handleCancel),this.windowListeners.add(Ne.VisibilityChange,this.handleCancel),setTimeout((()=>this.listeners.add(Ne.Keydown,this.handleKeyDown)))}handleStart(){const{activeNode:e,onStart:t}=this.props,n=e.node.current;n&&function(e,t){if(void 0===t&&(t=ce),!e)return;const{top:n,left:r,bottom:o,right:i}=t(e);he(e)&&(o<=0||i<=0||n>=window.innerHeight||r>=window.innerWidth)&&e.scrollIntoView({block:"center",inline:"center"})}(n),t(J)}handleKeyDown(e){if(B(e)){const{active:t,context:n,options:r}=this.props,{keyboardCodes:o=Te,coordinateGetter:i=Le,scrollBehavior:a="smooth"}=r,{code:l}=e;if(o.end.includes(l))return void this.handleEnd(e);if(o.cancel.includes(l))return void this.handleCancel(e);const{collisionRect:s}=n.current,c=s?{x:s.left,y:s.top}:J;this.referenceCoordinates||(this.referenceCoordinates=c);const d=i(e,{active:t,context:n.current,currentCoordinates:c});if(d){const t=L(d,c),r={x:0,y:0},{scrollableAncestors:o}=n.current;for(const n of o){const o=e.code,{isTop:i,isRight:l,isLeft:s,isBottom:c,maxScroll:u,minScroll:h}=xe(n),p=Ce(n),f={x:Math.min(o===Me.Right?p.right-p.width/2:p.right,Math.max(o===Me.Right?p.left:p.left+p.width/2,d.x)),y:Math.min(o===Me.Down?p.bottom-p.height/2:p.bottom,Math.max(o===Me.Down?p.top:p.top+p.height/2,d.y))},v=o===Me.Right&&!l||o===Me.Left&&!s,g=o===Me.Down&&!c||o===Me.Up&&!i;if(v&&f.x!==d.x){const e=n.scrollLeft+t.x,i=o===Me.Right&&e<=u.x||o===Me.Left&&e>=h.x;if(i&&!t.y)return void n.scrollTo({left:e,behavior:a});r.x=i?n.scrollLeft-e:o===Me.Right?n.scrollLeft-u.x:n.scrollLeft-h.x,r.x&&n.scrollBy({left:-r.x,behavior:a});break}if(g&&f.y!==d.y){const e=n.scrollTop+t.y,i=o===Me.Down&&e<=u.y||o===Me.Up&&e>=h.y;if(i&&!t.x)return void n.scrollTo({top:e,behavior:a});r.y=i?n.scrollTop-e:o===Me.Down?n.scrollTop-u.y:n.scrollTop-h.y,r.y&&n.scrollBy({top:-r.y,behavior:a});break}}this.handleMove(e,T(L(d,this.referenceCoordinates),r))}}}handleMove(e,t){const{onMove:n}=this.props;e.preventDefault(),n(t)}handleEnd(e){const{onEnd:t}=this.props;e.preventDefault(),this.detach(),t()}handleCancel(e){const{onCancel:t}=this.props;e.preventDefault(),this.detach(),t()}detach(){this.listeners.removeAll(),this.windowListeners.removeAll()}}function Ae(e){return Boolean(e&&"distance"in e)}function Oe(e){return Boolean(e&&"delay"in e)}Be.activators=[{eventName:"onKeyDown",handler:(e,t,n)=>{let{keyboardCodes:r=Te,onActivation:o}=t,{active:i}=n;const{code:a}=e.nativeEvent;if(r.start.includes(a)){const t=i.activatorNode.current;return!(t&&e.target!==t||(e.preventDefault(),null==o||o({event:e.nativeEvent}),0))}return!1}}];class Pe{constructor(e,t,n){var r;void 0===n&&(n=function(e){const{EventTarget:t}=b(e);return e instanceof t?e:C(e)}(e.event.target)),this.props=void 0,this.events=void 0,this.autoScrollEnabled=!0,this.document=void 0,this.activated=!1,this.initialCoordinates=void 0,this.timeoutId=null,this.listeners=void 0,this.documentListeners=void 0,this.windowListeners=void 0,this.props=e,this.events=t;const{event:o}=e,{target:i}=o;this.props=e,this.events=t,this.document=C(i),this.documentListeners=new Se(this.document),this.listeners=new Se(n),this.windowListeners=new Se(b(i)),this.initialCoordinates=null!=(r=A(o))?r:J,this.handleStart=this.handleStart.bind(this),this.handleMove=this.handleMove.bind(this),this.handleEnd=this.handleEnd.bind(this),this.handleCancel=this.handleCancel.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.removeTextSelection=this.removeTextSelection.bind(this),this.attach()}attach(){const{events:e,props:{options:{activationConstraint:t,bypassActivationConstraint:n}}}=this;if(this.listeners.add(e.move.name,this.handleMove,{passive:!1}),this.listeners.add(e.end.name,this.handleEnd),e.cancel&&this.listeners.add(e.cancel.name,this.handleCancel),this.windowListeners.add(Ne.Resize,this.handleCancel),this.windowListeners.add(Ne.DragStart,ke),this.windowListeners.add(Ne.VisibilityChange,this.handleCancel),this.windowListeners.add(Ne.ContextMenu,ke),this.documentListeners.add(Ne.Keydown,this.handleKeydown),t){if(null!=n&&n({event:this.props.event,activeNode:this.props.activeNode,options:this.props.options}))return this.handleStart();if(Oe(t))return this.timeoutId=setTimeout(this.handleStart,t.delay),void this.handlePending(t);if(Ae(t))return void this.handlePending(t)}this.handleStart()}detach(){this.listeners.removeAll(),this.windowListeners.removeAll(),setTimeout(this.documentListeners.removeAll,50),null!==this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null)}handlePending(e,t){const{active:n,onPending:r}=this.props;r(n,e,this.initialCoordinates,t)}handleStart(){const{initialCoordinates:e}=this,{onStart:t}=this.props;e&&(this.activated=!0,this.documentListeners.add(Ne.Click,Ie,{capture:!0}),this.removeTextSelection(),this.documentListeners.add(Ne.SelectionChange,this.removeTextSelection),t(e))}handleMove(e){var t;const{activated:n,initialCoordinates:r,props:o}=this,{onMove:i,options:{activationConstraint:a}}=o;if(!r)return;const l=null!=(t=A(e))?t:J,s=L(r,l);if(!n&&a){if(Ae(a)){if(null!=a.tolerance&&je(s,a.tolerance))return this.handleCancel();if(je(s,a.distance))return this.handleStart()}return Oe(a)&&je(s,a.tolerance)?this.handleCancel():void this.handlePending(a,s)}e.cancelable&&e.preventDefault(),i(l)}handleEnd(){const{onAbort:e,onEnd:t}=this.props;this.detach(),this.activated||e(this.props.active),t()}handleCancel(){const{onAbort:e,onCancel:t}=this.props;this.detach(),this.activated||e(this.props.active),t()}handleKeydown(e){e.code===Me.Esc&&this.handleCancel()}removeTextSelection(){var e;null==(e=this.document.getSelection())||e.removeAllRanges()}}const ze={cancel:{name:"pointercancel"},move:{name:"pointermove"},end:{name:"pointerup"}};class Fe extends Pe{constructor(e){const{event:t}=e,n=C(t.target);super(e,ze,n)}}Fe.activators=[{eventName:"onPointerDown",handler:(e,t)=>{let{nativeEvent:n}=e,{onActivation:r}=t;return!(!n.isPrimary||0!==n.button||(null==r||r({event:n}),0))}}];const Ue={move:{name:"mousemove"},end:{name:"mouseup"}};var He;!function(e){e[e.RightClick=2]="RightClick"}(He||(He={})),class extends Pe{constructor(e){super(e,Ue,C(e.event.target))}}.activators=[{eventName:"onMouseDown",handler:(e,t)=>{let{nativeEvent:n}=e,{onActivation:r}=t;return n.button!==He.RightClick&&(null==r||r({event:n}),!0)}}];const Ve={cancel:{name:"touchcancel"},move:{name:"touchmove"},end:{name:"touchend"}};var Xe,Ye;(class extends Pe{constructor(e){super(e,Ve)}static setup(){return window.addEventListener(Ve.move.name,e,{capture:!1,passive:!1}),function(){window.removeEventListener(Ve.move.name,e)};function e(){}}}).activators=[{eventName:"onTouchStart",handler:(e,t)=>{let{nativeEvent:n}=e,{onActivation:r}=t;const{touches:o}=n;return!(o.length>1||(null==r||r({event:n}),0))}}],function(e){e[e.Pointer=0]="Pointer",e[e.DraggableRect=1]="DraggableRect"}(Xe||(Xe={})),function(e){e[e.TreeOrder=0]="TreeOrder",e[e.ReversedTreeOrder=1]="ReversedTreeOrder"}(Ye||(Ye={}));const Ke={x:{[me.Backward]:!1,[me.Forward]:!1},y:{[me.Backward]:!1,[me.Forward]:!1}};var We,_e;!function(e){e[e.Always=0]="Always",e[e.BeforeDragging=1]="BeforeDragging",e[e.WhileDragging=2]="WhileDragging"}(We||(We={})),function(e){e.Optimized="optimized"}(_e||(_e={}));const Ge=new Map;function Je(e,t){return S((n=>e?n||("function"==typeof t?t(e):e):null),[t,e])}function qe(e){let{callback:t,disabled:n}=e;const r=R(t),o=(0,h.useMemo)((()=>{if(n||"undefined"==typeof window||void 0===window.ResizeObserver)return;const{ResizeObserver:e}=window;return new e(r)}),[n]);return(0,h.useEffect)((()=>()=>null==o?void 0:o.disconnect()),[o]),o}function Ze(e){return new Ee(ce(e),e)}function $e(e,t,n){void 0===t&&(t=Ze);const[r,o]=(0,h.useState)(null);function i(){o((r=>{if(!e)return null;var o;if(!1===e.isConnected)return null!=(o=null!=r?r:n)?o:null;const i=t(e);return JSON.stringify(r)===JSON.stringify(i)?r:i}))}const a=function(e){let{callback:t,disabled:n}=e;const r=R(t),o=(0,h.useMemo)((()=>{if(n||"undefined"==typeof window||void 0===window.MutationObserver)return;const{MutationObserver:e}=window;return new e(r)}),[r,n]);return(0,h.useEffect)((()=>()=>null==o?void 0:o.disconnect()),[o]),o}({callback(t){if(e)for(const n of t){const{type:t,target:r}=n;if("childList"===t&&r instanceof HTMLElement&&r.contains(e)){i();break}}}}),l=qe({callback:i});return D((()=>{i(),e?(null==l||l.observe(e),null==a||a.observe(document.body,{childList:!0,subtree:!0})):(null==l||l.disconnect(),null==a||a.disconnect())}),[e]),r}const Qe=[];function et(e,t){void 0===t&&(t=[]);const n=(0,h.useRef)(null);return(0,h.useEffect)((()=>{n.current=null}),t),(0,h.useEffect)((()=>{const t=e!==J;t&&!n.current&&(n.current=e),!t&&n.current&&(n.current=null)}),[e]),n.current?L(e,n.current):J}function tt(e){return(0,h.useMemo)((()=>e?function(e){const t=e.innerWidth,n=e.innerHeight;return{top:0,left:0,right:t,bottom:n,width:t,height:n}}(e):null),[e])}const nt=[];const rt=[{sensor:Fe,options:{}},{sensor:Be,options:{}}],ot={current:{}},it={draggable:{measure:de},droppable:{measure:de,strategy:We.WhileDragging,frequency:_e.Optimized},dragOverlay:{measure:ce}};class at extends Map{get(e){var t;return null!=e&&null!=(t=super.get(e))?t:void 0}toArray(){return Array.from(this.values())}getEnabled(){return this.toArray().filter((e=>{let{disabled:t}=e;return!t}))}getNodeFor(e){var t,n;return null!=(t=null==(n=this.get(e))?void 0:n.node.current)?t:void 0}}const lt={activatorEvent:null,active:null,activeNode:null,activeNodeRect:null,collisions:null,containerNodeRect:null,draggableNodes:new Map,droppableRects:new Map,droppableContainers:new at,over:null,dragOverlay:{nodeRef:{current:null},rect:null,setRef:_},scrollableAncestors:[],scrollableAncestorRects:[],measuringConfiguration:it,measureDroppableContainers:_,windowRect:null,measuringScheduled:!1},st={activatorEvent:null,activators:[],active:null,activeNodeRect:null,ariaDescribedById:{draggable:""},dispatch:_,draggableNodes:new Map,over:null,measureDroppableContainers:_},ct=(0,h.createContext)(st),dt=(0,h.createContext)(lt);function ut(){return{draggable:{active:null,initialCoordinates:{x:0,y:0},nodes:new Map,translate:{x:0,y:0}},droppable:{containers:new at}}}function ht(e,t){switch(t.type){case W.DragStart:return{...e,draggable:{...e.draggable,initialCoordinates:t.initialCoordinates,active:t.active}};case W.DragMove:return null==e.draggable.active?e:{...e,draggable:{...e.draggable,translate:{x:t.coordinates.x-e.draggable.initialCoordinates.x,y:t.coordinates.y-e.draggable.initialCoordinates.y}}};case W.DragEnd:case W.DragCancel:return{...e,draggable:{...e.draggable,active:null,initialCoordinates:{x:0,y:0},translate:{x:0,y:0}}};case W.RegisterDroppable:{const{element:n}=t,{id:r}=n,o=new at(e.droppable.containers);return o.set(r,n),{...e,droppable:{...e.droppable,containers:o}}}case W.SetDroppableDisabled:{const{id:n,key:r,disabled:o}=t,i=e.droppable.containers.get(n);if(!i||r!==i.key)return e;const a=new at(e.droppable.containers);return a.set(n,{...i,disabled:o}),{...e,droppable:{...e.droppable,containers:a}}}case W.UnregisterDroppable:{const{id:n,key:r}=t,o=e.droppable.containers.get(n);if(!o||r!==o.key)return e;const i=new at(e.droppable.containers);return i.delete(n),{...e,droppable:{...e.droppable,containers:i}}}default:return e}}function pt(e){let{disabled:t}=e;const{active:n,activatorEvent:r,draggableNodes:o}=(0,h.useContext)(ct),i=N(r),a=N(null==n?void 0:n.id);return(0,h.useEffect)((()=>{if(!t&&!r&&i&&null!=a){if(!B(i))return;if(document.activeElement===i.target)return;const e=o.get(a);if(!e)return;const{activatorNode:t,node:n}=e;if(!t.current&&!n.current)return;requestAnimationFrame((()=>{for(const e of[t.current,n.current]){if(!e)continue;const t=z(e);if(t){t.focus();break}}}))}}),[r,t,o,a,i]),null}const ft=(0,h.createContext)({...J,scaleX:1,scaleY:1});var vt;!function(e){e[e.Uninitialized=0]="Uninitialized",e[e.Initializing=1]="Initializing",e[e.Initialized=2]="Initialized"}(vt||(vt={}));const gt=(0,h.memo)((function(e){var t,n,r,o;let{id:i,accessibility:a,autoScroll:l=!0,children:s,sensors:c=rt,collisionDetection:d=oe,measuring:u,modifiers:g,...m}=e;const x=(0,h.useReducer)(ht,void 0,ut),[y,C]=x,[R,M]=function(){const[e]=(0,h.useState)((()=>new Set)),t=(0,h.useCallback)((t=>(e.add(t),()=>e.delete(t))),[e]);return[(0,h.useCallback)((t=>{let{type:n,event:r}=t;e.forEach((e=>{var t;return null==(t=e[n])?void 0:t.call(e,r)}))}),[e]),t]}(),[I,L]=(0,h.useState)(vt.Uninitialized),B=I===vt.Initialized,{draggable:{active:O,nodes:P,translate:z},droppable:{containers:F}}=y,U=null!=O?P.get(O):null,H=(0,h.useRef)({initial:null,translated:null}),X=(0,h.useMemo)((()=>{var e;return null!=O?{id:O,data:null!=(e=null==U?void 0:U.data)?e:ot,rect:H}:null}),[O,U]),Y=(0,h.useRef)(null),[_,G]=(0,h.useState)(null),[q,Z]=(0,h.useState)(null),$=E(m,Object.values(m)),Q=k("DndDescribedBy",i),te=(0,h.useMemo)((()=>F.getEnabled()),[F]),ne=(re=u,(0,h.useMemo)((()=>({draggable:{...it.draggable,...null==re?void 0:re.draggable},droppable:{...it.droppable,...null==re?void 0:re.droppable},dragOverlay:{...it.dragOverlay,...null==re?void 0:re.dragOverlay}})),[null==re?void 0:re.draggable,null==re?void 0:re.droppable,null==re?void 0:re.dragOverlay]));var re;const{droppableRects:ae,measureDroppableContainers:se,measuringScheduled:de}=function(e,t){let{dragging:n,dependencies:r,config:o}=t;const[i,a]=(0,h.useState)(null),{frequency:l,measure:s,strategy:c}=o,d=(0,h.useRef)(e),u=function(){switch(c){case We.Always:return!1;case We.BeforeDragging:return n;default:return!n}}(),p=E(u),f=(0,h.useCallback)((function(e){void 0===e&&(e=[]),p.current||a((t=>null===t?e:t.concat(e.filter((e=>!t.includes(e))))))}),[p]),v=(0,h.useRef)(null),g=S((t=>{if(u&&!n)return Ge;if(!t||t===Ge||d.current!==e||null!=i){const t=new Map;for(let n of e){if(!n)continue;if(i&&i.length>0&&!i.includes(n.id)&&n.rect.current){t.set(n.id,n.rect.current);continue}const e=n.node.current,r=e?new Ee(s(e),e):null;n.rect.current=r,r&&t.set(n.id,r)}return t}return t}),[e,i,n,u,s]);return(0,h.useEffect)((()=>{d.current=e}),[e]),(0,h.useEffect)((()=>{u||f()}),[n,u]),(0,h.useEffect)((()=>{i&&i.length>0&&a(null)}),[JSON.stringify(i)]),(0,h.useEffect)((()=>{u||"number"!=typeof l||null!==v.current||(v.current=setTimeout((()=>{f(),v.current=null}),l))}),[l,u,f,...r]),{droppableRects:g,measureDroppableContainers:f,measuringScheduled:null!=i}}(te,{dragging:B,dependencies:[z.x,z.y],config:ne.droppable}),fe=function(e,t){const n=null!=t?e.get(t):void 0,r=n?n.node.current:null;return S((e=>{var n;return null==t?null:null!=(n=null!=r?r:e)?n:null}),[r,t])}(P,O),ve=(0,h.useMemo)((()=>q?A(q):null),[q]),xe=function(){const e=!1===(null==_?void 0:_.autoScrollEnabled),t="object"==typeof l?!1===l.enabled:!1===l,n=B&&!e&&!t;return"object"==typeof l?{...l,enabled:n}:{enabled:n}}(),we=function(e,t){return Je(e,t)}(fe,ne.draggable.measure);!function(e){let{activeNode:t,measure:n,initialRect:r,config:o=!0}=e;const i=(0,h.useRef)(!1),{x:a,y:l}="boolean"==typeof o?{x:o,y:o}:o;D((()=>{if(!a&&!l||!t)return void(i.current=!1);if(i.current||!r)return;const e=null==t?void 0:t.node.current;if(!e||!1===e.isConnected)return;const o=ie(n(e),r);if(a||(o.x=0),l||(o.y=0),i.current=!0,Math.abs(o.x)>0||Math.abs(o.y)>0){const t=he(e);t&&t.scrollBy({top:o.y,left:o.x})}}),[t,a,l,r,n])}({activeNode:null!=O?P.get(O):null,config:xe.layoutShiftCompensation,initialRect:we,measure:ne.draggable.measure});const Ce=$e(fe,ne.draggable.measure,we),Re=$e(fe?fe.parentElement:null),Se=(0,h.useRef)({activatorEvent:null,active:null,activeNode:fe,collisionRect:null,collisions:null,droppableRects:ae,draggableNodes:P,draggingNode:null,draggingNodeRect:null,droppableContainers:F,over:null,scrollableAncestors:[],scrollAdjustedTranslate:null}),je=F.getNodeFor(null==(t=Se.current.over)?void 0:t.id),Ne=function(e){let{measure:t}=e;const[n,r]=(0,h.useState)(null),o=qe({callback:(0,h.useCallback)((e=>{for(const{target:n}of e)if(w(n)){r((e=>{const r=t(n);return e?{...e,width:r.width,height:r.height}:r}));break}}),[t])}),i=(0,h.useCallback)((e=>{const n=function(e){if(!e)return null;if(e.children.length>1)return e;const t=e.children[0];return w(t)?t:e}(e);null==o||o.disconnect(),n&&(null==o||o.observe(n)),r(n?t(n):null)}),[t,o]),[a,l]=j(i);return(0,h.useMemo)((()=>({nodeRef:a,rect:n,setRef:l})),[n,a,l])}({measure:ne.dragOverlay.measure}),Me=null!=(n=Ne.nodeRef.current)?n:fe,ke=B?null!=(r=Ne.rect)?r:Ce:null,Ie=Boolean(Ne.nodeRef.current&&Ne.rect),Te=ie(Le=Ie?null:Ce,Je(Le));var Le;const Be=tt(Me?b(Me):null),Ae=function(e){const t=(0,h.useRef)(e),n=S((n=>e?n&&n!==Qe&&e&&t.current&&e.parentNode===t.current.parentNode?n:ue(e):Qe),[e]);return(0,h.useEffect)((()=>{t.current=e}),[e]),n}(B?null!=je?je:fe:null),Oe=function(e,t){void 0===t&&(t=ce);const[n]=e,r=tt(n?b(n):null),[o,i]=(0,h.useState)(nt);function a(){i((()=>e.length?e.map((e=>be(e)?r:new Ee(t(e),e))):nt))}const l=qe({callback:a});return D((()=>{null==l||l.disconnect(),a(),e.forEach((e=>null==l?void 0:l.observe(e)))}),[e]),o}(Ae),Pe=function(e,t){let{transform:n,...r}=t;return null!=e&&e.length?e.reduce(((e,t)=>t({transform:e,...r})),n):n}(g,{transform:{x:z.x-Te.x,y:z.y-Te.y,scaleX:1,scaleY:1},activatorEvent:q,active:X,activeNodeRect:Ce,containerNodeRect:Re,draggingNodeRect:ke,over:Se.current.over,overlayNodeRect:Ne.rect,scrollableAncestors:Ae,scrollableAncestorRects:Oe,windowRect:Be}),ze=ve?T(ve,z):null,Fe=function(e){const[t,n]=(0,h.useState)(null),r=(0,h.useRef)(e),o=(0,h.useCallback)((e=>{const t=pe(e.target);t&&n((e=>e?(e.set(t,ge(t)),new Map(e)):null))}),[]);return(0,h.useEffect)((()=>{const t=r.current;if(e!==t){i(t);const a=e.map((e=>{const t=pe(e);return t?(t.addEventListener("scroll",o,{passive:!0}),[t,ge(t)]):null})).filter((e=>null!=e));n(a.length?new Map(a):null),r.current=e}return()=>{i(e),i(t)};function i(e){e.forEach((e=>{const t=pe(e);null==t||t.removeEventListener("scroll",o)}))}}),[o,e]),(0,h.useMemo)((()=>e.length?t?Array.from(t.values()).reduce(((e,t)=>T(e,t)),J):De(e):J),[e,t])}(Ae),Ue=et(Fe),He=et(Fe,[Ce]),Ve=T(Pe,Ue),_e=ke?le(ke,Pe):null,Ze=X&&_e?d({active:X,collisionRect:_e,droppableRects:ae,droppableContainers:te,pointerCoordinates:ze}):null,at=ee(Ze,"id"),[lt,st]=(0,h.useState)(null),gt=function(e,t,n){return{...e,scaleX:t&&n?t.width/n.width:1,scaleY:t&&n?t.height/n.height:1}}(Ie?Pe:T(Pe,He),null!=(o=null==lt?void 0:lt.rect)?o:null,Ce),mt=(0,h.useRef)(null),bt=(0,h.useCallback)(((e,t)=>{let{sensor:n,options:r}=t;if(null==Y.current)return;const o=P.get(Y.current);if(!o)return;const i=e.nativeEvent,a=new n({active:Y.current,activeNode:o,event:i,options:r,context:Se,onAbort(e){if(!P.get(e))return;const{onDragAbort:t}=$.current,n={id:e};null==t||t(n),R({type:"onDragAbort",event:n})},onPending(e,t,n,r){if(!P.get(e))return;const{onDragPending:o}=$.current,i={id:e,constraint:t,initialCoordinates:n,offset:r};null==o||o(i),R({type:"onDragPending",event:i})},onStart(e){const t=Y.current;if(null==t)return;const n=P.get(t);if(!n)return;const{onDragStart:r}=$.current,o={activatorEvent:i,active:{id:t,data:n.data,rect:H}};(0,f.unstable_batchedUpdates)((()=>{null==r||r(o),L(vt.Initializing),C({type:W.DragStart,initialCoordinates:e,active:t}),R({type:"onDragStart",event:o}),G(mt.current),Z(i)}))},onMove(e){C({type:W.DragMove,coordinates:e})},onEnd:l(W.DragEnd),onCancel:l(W.DragCancel)});function l(e){return async function(){const{active:t,collisions:n,over:r,scrollAdjustedTranslate:o}=Se.current;let a=null;if(t&&o){const{cancelDrop:l}=$.current;a={activatorEvent:i,active:t,collisions:n,delta:o,over:r},e===W.DragEnd&&"function"==typeof l&&await Promise.resolve(l(a))&&(e=W.DragCancel)}Y.current=null,(0,f.unstable_batchedUpdates)((()=>{C({type:e}),L(vt.Uninitialized),st(null),G(null),Z(null),mt.current=null;const t=e===W.DragEnd?"onDragEnd":"onDragCancel";if(a){const e=$.current[t];null==e||e(a),R({type:t,event:a})}}))}}mt.current=a}),[P]),xt=(0,h.useCallback)(((e,t)=>(n,r)=>{const o=n.nativeEvent,i=P.get(r);if(null!==Y.current||!i||o.dndKit||o.defaultPrevented)return;const a={active:i};!0===e(n,t.options,a)&&(o.dndKit={capturedBy:t.sensor},Y.current=r,bt(n,t))}),[P,bt]),wt=function(e,t){return(0,h.useMemo)((()=>e.reduce(((e,n)=>{const{sensor:r}=n;return[...e,...r.activators.map((e=>({eventName:e.eventName,handler:t(e.handler,n)})))]}),[])),[e,t])}(c,xt);!function(e){(0,h.useEffect)((()=>{if(!v)return;const t=e.map((e=>{let{sensor:t}=e;return null==t.setup?void 0:t.setup()}));return()=>{for(const e of t)null==e||e()}}),e.map((e=>{let{sensor:t}=e;return t})))}(c),D((()=>{Ce&&I===vt.Initializing&&L(vt.Initialized)}),[Ce,I]),(0,h.useEffect)((()=>{const{onDragMove:e}=$.current,{active:t,activatorEvent:n,collisions:r,over:o}=Se.current;if(!t||!n)return;const i={active:t,activatorEvent:n,collisions:r,delta:{x:Ve.x,y:Ve.y},over:o};(0,f.unstable_batchedUpdates)((()=>{null==e||e(i),R({type:"onDragMove",event:i})}))}),[Ve.x,Ve.y]),(0,h.useEffect)((()=>{const{active:e,activatorEvent:t,collisions:n,droppableContainers:r,scrollAdjustedTranslate:o}=Se.current;if(!e||null==Y.current||!t||!o)return;const{onDragOver:i}=$.current,a=r.get(at),l=a&&a.rect.current?{id:a.id,rect:a.rect.current,data:a.data,disabled:a.disabled}:null,s={active:e,activatorEvent:t,collisions:n,delta:{x:o.x,y:o.y},over:l};(0,f.unstable_batchedUpdates)((()=>{st(l),null==i||i(s),R({type:"onDragOver",event:s})}))}),[at]),D((()=>{Se.current={activatorEvent:q,active:X,activeNode:fe,collisionRect:_e,collisions:Ze,droppableRects:ae,draggableNodes:P,draggingNode:Me,draggingNodeRect:ke,droppableContainers:F,over:lt,scrollableAncestors:Ae,scrollAdjustedTranslate:Ve},H.current={initial:ke,translated:_e}}),[X,fe,Ze,_e,P,Me,ke,ae,F,lt,Ae,Ve]),function(e){let{acceleration:t,activator:n=Xe.Pointer,canScroll:r,draggingRect:o,enabled:i,interval:a=5,order:l=Ye.TreeOrder,pointerCoordinates:s,scrollableAncestors:c,scrollableAncestorRects:d,delta:u,threshold:p}=e;const f=function(e){let{delta:t,disabled:n}=e;const r=N(t);return S((e=>{if(n||!r||!e)return Ke;const o=Math.sign(t.x-r.x),i=Math.sign(t.y-r.y);return{x:{[me.Backward]:e.x[me.Backward]||-1===o,[me.Forward]:e.x[me.Forward]||1===o},y:{[me.Backward]:e.y[me.Backward]||-1===i,[me.Forward]:e.y[me.Forward]||1===i}}}),[n,t,r])}({delta:u,disabled:!i}),[v,g]=function(){const e=(0,h.useRef)(null);return[(0,h.useCallback)(((t,n)=>{e.current=setInterval(t,n)}),[]),(0,h.useCallback)((()=>{null!==e.current&&(clearInterval(e.current),e.current=null)}),[])]}(),m=(0,h.useRef)({x:0,y:0}),b=(0,h.useRef)({x:0,y:0}),x=(0,h.useMemo)((()=>{switch(n){case Xe.Pointer:return s?{top:s.y,bottom:s.y,left:s.x,right:s.x}:null;case Xe.DraggableRect:return o}}),[n,o,s]),w=(0,h.useRef)(null),y=(0,h.useCallback)((()=>{const e=w.current;if(!e)return;const t=m.current.x*b.current.x,n=m.current.y*b.current.y;e.scrollBy(t,n)}),[]),C=(0,h.useMemo)((()=>l===Ye.TreeOrder?[...c].reverse():c),[l,c]);(0,h.useEffect)((()=>{if(i&&c.length&&x){for(const e of C){if(!1===(null==r?void 0:r(e)))continue;const n=c.indexOf(e),o=d[n];if(!o)continue;const{direction:i,speed:l}=ye(e,o,x,t,p);for(const e of["x","y"])f[e][i[e]]||(l[e]=0,i[e]=0);if(l.x>0||l.y>0)return g(),w.current=e,v(y,a),m.current=l,void(b.current=i)}m.current={x:0,y:0},b.current={x:0,y:0},g()}else g()}),[t,y,r,g,i,a,JSON.stringify(x),JSON.stringify(f),v,c,C,d,JSON.stringify(p)])}({...xe,delta:z,draggingRect:_e,pointerCoordinates:ze,scrollableAncestors:Ae,scrollableAncestorRects:Oe});const yt=(0,h.useMemo)((()=>({active:X,activeNode:fe,activeNodeRect:Ce,activatorEvent:q,collisions:Ze,containerNodeRect:Re,dragOverlay:Ne,draggableNodes:P,droppableContainers:F,droppableRects:ae,over:lt,measureDroppableContainers:se,scrollableAncestors:Ae,scrollableAncestorRects:Oe,measuringConfiguration:ne,measuringScheduled:de,windowRect:Be})),[X,fe,Ce,q,Ze,Re,Ne,P,F,ae,lt,se,Ae,Oe,ne,de,Be]),Ct=(0,h.useMemo)((()=>({activatorEvent:q,activators:wt,active:X,activeNodeRect:Ce,ariaDescribedById:{draggable:Q},dispatch:C,draggableNodes:P,over:lt,measureDroppableContainers:se})),[q,wt,X,Ce,C,Q,P,lt,se]);return p().createElement(V.Provider,{value:M},p().createElement(ct.Provider,{value:Ct},p().createElement(dt.Provider,{value:yt},p().createElement(ft.Provider,{value:gt},s)),p().createElement(pt,{disabled:!1===(null==a?void 0:a.restoreFocus)})),p().createElement(K,{...a,hiddenTextDescribedById:Q}))})),mt=(0,h.createContext)(null),bt="button";const xt={timeout:25};function wt(e,t,n){const r=e.slice();return r.splice(n<0?r.length+n:n,0,r.splice(t,1)[0]),r}function yt(e,t){return e.reduce(((e,n,r)=>{const o=t.get(n);return o&&(e[r]=o),e}),Array(e.length))}function Ct(e){return null!==e&&e>=0}const Dt=e=>{let{rects:t,activeIndex:n,overIndex:r,index:o}=e;const i=wt(t,r,n),a=t[o],l=i[o];return l&&a?{x:l.left-a.left,y:l.top-a.top,scaleX:l.width/a.width,scaleY:l.height/a.height}:null},Rt={scaleX:1,scaleY:1},Et=e=>{var t;let{activeIndex:n,activeNodeRect:r,index:o,rects:i,overIndex:a}=e;const l=null!=(t=i[n])?t:r;if(!l)return null;if(o===n){const e=i[a];return e?{x:0,y:n<a?e.top+e.height-(l.top+l.height):e.top-l.top,...Rt}:null}const s=function(e,t,n){const r=e[t],o=e[t-1],i=e[t+1];return r?n<t?o?r.top-(o.top+o.height):i?i.top-(r.top+r.height):0:i?i.top-(r.top+r.height):o?r.top-(o.top+o.height):0:0}(i,o,n);return o>n&&o<=a?{x:0,y:-l.height-s,...Rt}:o<n&&o>=a?{x:0,y:l.height+s,...Rt}:{x:0,y:0,...Rt}},St="Sortable",jt=p().createContext({activeIndex:-1,containerId:St,disableTransforms:!1,items:[],overIndex:-1,useDragOverlay:!1,sortedRects:[],strategy:Dt,disabled:{draggable:!1,droppable:!1}});function Nt(e){let{children:t,id:n,items:r,strategy:o=Dt,disabled:i=!1}=e;const{active:a,dragOverlay:l,droppableRects:s,over:c,measureDroppableContainers:d}=(0,h.useContext)(dt),u=k(St,n),f=Boolean(null!==l.rect),v=(0,h.useMemo)((()=>r.map((e=>"object"==typeof e&&"id"in e?e.id:e))),[r]),g=null!=a,m=a?v.indexOf(a.id):-1,b=c?v.indexOf(c.id):-1,x=(0,h.useRef)(v),w=!function(e,t){if(e===t)return!0;if(e.length!==t.length)return!1;for(let n=0;n<e.length;n++)if(e[n]!==t[n])return!1;return!0}(v,x.current),y=-1!==b&&-1===m||w,C=function(e){return"boolean"==typeof e?{draggable:e,droppable:e}:e}(i);D((()=>{w&&g&&d(v)}),[w,v,g,d]),(0,h.useEffect)((()=>{x.current=v}),[v]);const R=(0,h.useMemo)((()=>({activeIndex:m,containerId:u,disabled:C,disableTransforms:y,items:v,overIndex:b,useDragOverlay:f,sortedRects:yt(v,s),strategy:o})),[m,u,C.draggable,C.droppable,y,v,b,s,f,o]);return p().createElement(jt.Provider,{value:R},t)}const Mt=e=>{let{id:t,items:n,activeIndex:r,overIndex:o}=e;return wt(n,r,o).indexOf(t)},kt=e=>{let{containerId:t,isSorting:n,wasDragging:r,index:o,items:i,newIndex:a,previousItems:l,previousContainerId:s,transition:c}=e;return!(!c||!r||l!==i&&o===a||!n&&(a===o||t!==s))},It={duration:200,easing:"ease"},Tt="transform",Lt=O.Transition.toString({property:Tt,duration:0,easing:"linear"}),Bt={roleDescription:"sortable"};function At(e){let{animateLayoutChanges:t=kt,attributes:n,disabled:r,data:o,getNewIndex:i=Mt,id:a,strategy:l,resizeObserverConfig:s,transition:c=It}=e;const{items:d,containerId:u,activeIndex:p,disabled:f,disableTransforms:v,sortedRects:g,overIndex:m,useDragOverlay:b,strategy:x}=(0,h.useContext)(jt),w=function(e,t){var n,r;return"boolean"==typeof e?{draggable:e,droppable:!1}:{draggable:null!=(n=null==e?void 0:e.draggable)?n:t.draggable,droppable:null!=(r=null==e?void 0:e.droppable)?r:t.droppable}}(r,f),y=d.indexOf(a),C=(0,h.useMemo)((()=>({sortable:{containerId:u,index:y,items:d},...o})),[u,o,y,d]),R=(0,h.useMemo)((()=>d.slice(d.indexOf(a))),[d,a]),{rect:S,node:N,isOver:M,setNodeRef:I}=function(e){let{data:t,disabled:n=!1,id:r,resizeObserverConfig:o}=e;const i=k("Droppable"),{active:a,dispatch:l,over:s,measureDroppableContainers:c}=(0,h.useContext)(ct),d=(0,h.useRef)({disabled:n}),u=(0,h.useRef)(!1),p=(0,h.useRef)(null),f=(0,h.useRef)(null),{disabled:v,updateMeasurementsFor:g,timeout:m}={...xt,...o},b=E(null!=g?g:r),x=qe({callback:(0,h.useCallback)((()=>{u.current?(null!=f.current&&clearTimeout(f.current),f.current=setTimeout((()=>{c(Array.isArray(b.current)?b.current:[b.current]),f.current=null}),m)):u.current=!0}),[m]),disabled:v||!a}),w=(0,h.useCallback)(((e,t)=>{x&&(t&&(x.unobserve(t),u.current=!1),e&&x.observe(e))}),[x]),[y,C]=j(w),D=E(t);return(0,h.useEffect)((()=>{x&&y.current&&(x.disconnect(),u.current=!1,x.observe(y.current))}),[y,x]),(0,h.useEffect)((()=>(l({type:W.RegisterDroppable,element:{id:r,key:i,disabled:n,node:y,rect:p,data:D}}),()=>l({type:W.UnregisterDroppable,key:i,id:r}))),[r]),(0,h.useEffect)((()=>{n!==d.current.disabled&&(l({type:W.SetDroppableDisabled,id:r,key:i,disabled:n}),d.current.disabled=n)}),[r,i,n,l]),{active:a,rect:p,isOver:(null==s?void 0:s.id)===r,node:y,over:s,setNodeRef:C}}({id:a,data:C,disabled:w.droppable,resizeObserverConfig:{updateMeasurementsFor:R,...s}}),{active:T,activatorEvent:L,activeNodeRect:A,attributes:P,setNodeRef:z,listeners:F,isDragging:U,over:H,setActivatorNodeRef:V,transform:X}=function(e){let{id:t,data:n,disabled:r=!1,attributes:o}=e;const i=k("Draggable"),{activators:a,activatorEvent:l,active:s,activeNodeRect:c,ariaDescribedById:d,draggableNodes:u,over:p}=(0,h.useContext)(ct),{role:f=bt,roleDescription:v="draggable",tabIndex:g=0}=null!=o?o:{},m=(null==s?void 0:s.id)===t,b=(0,h.useContext)(m?ft:mt),[x,w]=j(),[y,C]=j(),R=function(e,t){return(0,h.useMemo)((()=>e.reduce(((e,n)=>{let{eventName:r,handler:o}=n;return e[r]=e=>{o(e,t)},e}),{})),[e,t])}(a,t),S=E(n);return D((()=>(u.set(t,{id:t,key:i,node:x,activatorNode:y,data:S}),()=>{const e=u.get(t);e&&e.key===i&&u.delete(t)})),[u,t]),{active:s,activatorEvent:l,activeNodeRect:c,attributes:(0,h.useMemo)((()=>({role:f,tabIndex:g,"aria-disabled":r,"aria-pressed":!(!m||f!==bt)||void 0,"aria-roledescription":v,"aria-describedby":d.draggable})),[r,f,g,m,v,d.draggable]),isDragging:m,listeners:r?void 0:R,node:x,over:p,setNodeRef:w,setActivatorNodeRef:C,transform:b}}({id:a,data:C,attributes:{...Bt,...n},disabled:w.draggable}),Y=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return(0,h.useMemo)((()=>e=>{t.forEach((t=>t(e)))}),t)}(I,z),K=Boolean(T),_=K&&!v&&Ct(p)&&Ct(m),G=!b&&U,J=G&&_?X:null,q=_?null!=J?J:(null!=l?l:x)({rects:g,activeNodeRect:A,activeIndex:p,overIndex:m,index:y}):null,Z=Ct(p)&&Ct(m)?i({id:a,items:d,activeIndex:p,overIndex:m}):y,$=null==T?void 0:T.id,Q=(0,h.useRef)({activeId:$,items:d,newIndex:Z,containerId:u}),ee=d!==Q.current.items,te=t({active:T,containerId:u,isDragging:U,isSorting:K,id:a,index:y,items:d,newIndex:Q.current.newIndex,previousItems:Q.current.items,previousContainerId:Q.current.containerId,transition:c,wasDragging:null!=Q.current.activeId}),ne=function(e){let{disabled:t,index:n,node:r,rect:o}=e;const[i,a]=(0,h.useState)(null),l=(0,h.useRef)(n);return D((()=>{if(!t&&n!==l.current&&r.current){const e=o.current;if(e){const t=ce(r.current,{ignoreTransform:!0}),n={x:e.left-t.left,y:e.top-t.top,scaleX:e.width/t.width,scaleY:e.height/t.height};(n.x||n.y)&&a(n)}}n!==l.current&&(l.current=n)}),[t,n,r,o]),(0,h.useEffect)((()=>{i&&a(null)}),[i]),i}({disabled:!te,index:y,node:N,rect:S});return(0,h.useEffect)((()=>{K&&Q.current.newIndex!==Z&&(Q.current.newIndex=Z),u!==Q.current.containerId&&(Q.current.containerId=u),d!==Q.current.items&&(Q.current.items=d)}),[K,Z,u,d]),(0,h.useEffect)((()=>{if($===Q.current.activeId)return;if(null!=$&&null==Q.current.activeId)return void(Q.current.activeId=$);const e=setTimeout((()=>{Q.current.activeId=$}),50);return()=>clearTimeout(e)}),[$]),{active:T,activeIndex:p,attributes:P,data:C,rect:S,index:y,newIndex:Z,items:d,isOver:M,isSorting:K,isDragging:U,listeners:F,node:N,overIndex:m,over:H,setNodeRef:Y,setActivatorNodeRef:V,setDroppableNodeRef:I,setDraggableNodeRef:z,transform:null!=ne?ne:q,transition:ne||ee&&Q.current.newIndex===y?Lt:G&&!B(L)||!c?void 0:K||te?O.Transition.toString({...c,property:Tt}):void 0}}function Ot(e){if(!e)return!1;const t=e.data.current;return!!(t&&"sortable"in t&&"object"==typeof t.sortable&&"containerId"in t.sortable&&"items"in t.sortable&&"index"in t.sortable)}const Pt=[Me.Down,Me.Right,Me.Up,Me.Left],zt=(e,t)=>{let{context:{active:n,collisionRect:r,droppableRects:o,droppableContainers:i,over:a,scrollableAncestors:l}}=t;if(Pt.includes(e.code)){if(e.preventDefault(),!n||!r)return;const t=[];i.getEnabled().forEach((n=>{if(!n||null!=n&&n.disabled)return;const i=o.get(n.id);if(i)switch(e.code){case Me.Down:r.top<i.top&&t.push(n);break;case Me.Up:r.top>i.top&&t.push(n);break;case Me.Left:r.left>i.left&&t.push(n);break;case Me.Right:r.left<i.left&&t.push(n)}}));const d=(e=>{let{collisionRect:t,droppableRects:n,droppableContainers:r}=e;const o=Q(t),i=[];for(const e of r){const{id:t}=e,r=n.get(t);if(r){const n=Q(r),a=o.reduce(((e,t,r)=>e+q(n[r],t)),0),l=Number((a/4).toFixed(4));i.push({id:t,data:{droppableContainer:e,value:l}})}}return i.sort(Z)})({active:n,collisionRect:r,droppableRects:o,droppableContainers:t,pointerCoordinates:null});let u=ee(d,"id");if(u===(null==a?void 0:a.id)&&d.length>1&&(u=d[1].id),null!=u){const e=i.get(n.id),t=i.get(u),a=t?o.get(t.id):null,d=null==t?void 0:t.node.current;if(d&&a&&e&&t){const n=ue(d).some(((e,t)=>l[t]!==e)),o=Ft(e,t),i=(c=t,!(!Ot(s=e)||!Ot(c))&&!!Ft(s,c)&&s.data.current.sortable.index<c.data.current.sortable.index),u=n||!o?{x:0,y:0}:{x:i?r.width-a.width:0,y:i?r.height-a.height:0},h={x:a.left,y:a.top};return u.x&&u.y?h:L(h,u)}}}var s,c};function Ft(e,t){return!(!Ot(e)||!Ot(t))&&e.data.current.sortable.containerId===t.data.current.sortable.containerId}const Ut=window.wp.primitives,Ht=(0,s.jsx)(Ut.SVG,{width:"24",height:"24",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,s.jsx)(Ut.Path,{d:"M8 7h2V5H8v2zm0 6h2v-2H8v2zm0 6h2v-2H8v2zm6-14v2h2V5h-2zm0 8h2v-2h-2v2zm0 6h2v-2h-2v2z"})}),Vt=(0,s.jsx)(Ut.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,s.jsx)(Ut.Path,{d:"M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z"})}),Xt=(0,s.jsx)(Ut.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,s.jsx)(Ut.Path,{d:"M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"})}),Yt=({id:e,item:t,fields:o,updateItemContent:i,deleteItem:a})=>{const[l,c]=(0,n.useState)(!1),{attributes:d,listeners:u,setNodeRef:h,transform:p,transition:f,isDragging:v}=At({id:e}),g={transform:O.Transform.toString(p&&{...p,scaleY:1}),transition:f,opacity:v?.5:1};return(0,s.jsxs)("div",{ref:h,style:g,className:"repeater-component-item",children:[(0,s.jsxs)("div",{className:"repeater-component-item-buttons",children:[(0,s.jsx)(r.Button,{...d,...u,icon:Ht}),(0,s.jsx)(r.Button,{icon:l?Vt:"minus",onClick:()=>c(!l)}),(0,s.jsx)(r.Button,{isDestructive:!0,onClick:()=>a(e),icon:Xt})]}),(0,s.jsx)("div",{className:(l?"is-collapsed ":"")+"repeater-component-item-components",children:(0,s.jsx)(Wt,{attributes:d,components:o,onChange:i,item:t,id:e})})]})},Kt=({componentName:e,fields:t,meta:o,props:i})=>{const{attributes:a,setAttributes:c}=i,d=a[e],[u,p]=(0,n.useState)([]),{editPost:f}=(0,l.useDispatch)("core/editor");(0,n.useEffect)((()=>{const e=new Set(t.map((e=>e.name))),n=d.map((t=>{const n={id:t.id};return Object.keys(t).forEach((r=>{(e.has(r)||"id"===r)&&(n[r]=t[r])})),e.forEach((e=>{e in n||(n[e]="")})),n}));p(n)}),[d,t]);const v=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return(0,h.useMemo)((()=>[...t].filter((e=>null!=e))),[...t])}(G(Fe),G(Be,{coordinateGetter:zt})),g=t=>{const n=u.filter((e=>e.id!==t));p(n),c({[e]:n}),!1!==o&&f({meta:{[o]:n}})},m=(t,n,r)=>{const i=u.map((e=>e.id===t?{...e,[n]:r}:e));p(i),c({[e]:i}),!1!==o&&f({meta:{[o]:i}})};return(0,s.jsxs)(r.BaseControl,{children:[(0,s.jsx)(gt,{sensors:v,collisionDetection:ne,onDragEnd:t=>{const{active:n,over:r}=t;n&&r&&((t,n)=>{const r=u.findIndex((e=>e.id===t)),i=u.findIndex((e=>e.id===n));if(r!==i){const t=wt(u,r,i);p(t),c({[e]:t}),!1!==o&&f({meta:{[o]:t}})}})(n.id,r.id)},children:(0,s.jsx)(Nt,{items:u,strategy:Et,children:(0,s.jsx)("div",{className:"repeater-component",children:u.map((e=>(0,s.jsx)(Yt,{id:e.id,item:e,fields:t,updateItemContent:m,deleteItem:g},e.id)))})})}),(0,s.jsx)(r.Button,{isPrimary:!0,onClick:()=>(t=>{const n={id:`${Date.now()}`};t.forEach((e=>{n[e.name]=e.value}));const r=[...u,n];p(r),c({[e]:r}),!1!==o&&f({meta:{[o]:r}})})(t),className:"repeater-component-add-item-button",children:i.buttonLabel})]})};function Wt({attributes:e,components:t,onChange:o,props:i,item:d=null,id:h=null}){const p=t.some((e=>e.meta)),f=(0,l.useSelect)((e=>p?e("core/editor").getEditedPostAttribute("meta"):null)),[v,g]=(0,n.useState)({});(0,n.useEffect)((()=>{const n={};t.forEach((t=>{n[t.name]=d?d[t.name]:e[t.name]})),g(n)}),[t,d,e]);const m=(e,t,n,r)=>{g((e=>({...e,[t]:n}))),o(e,t,n,r)};return(0,s.jsx)(s.Fragment,{children:t.map((t=>(e=>!e.condition||(Array.isArray(e.condition)?e.condition:[e.condition]).every((e=>v[e.name]===e.value)))(t)?(t=>{var n,l,p,v,g;const b=t.meta?"is-meta":"",x=t.meta?f[t.name]:d?d[t.name]:e[t.name],w=!!t.meta&&t.name;switch(t.type){case"TimePicker":return(0,s.jsx)(r.BaseControl,{className:b,label:t.label,help:t.help,children:(0,s.jsx)(r.TimePicker,{currentDate:x,onChange:e=>o(h,t.name,e,w),...t.is12hour?{is12Hour:!0}:{}},t.name)},t.name);case"Text":return(0,s.jsx)(r.TextControl,{className:b,label:t.label,help:t.help,placeholder:t.placeholder,value:x,onChange:e=>o(h,t.name,e,w)},t.name);case"Textarea":return(0,s.jsx)(r.TextareaControl,{className:b,label:t.label,help:t.help,placeholder:t.placeholder,value:x,onChange:e=>o(h,t.name,e,w)},t.name);case"Toggle":return(0,s.jsx)(r.ToggleControl,{className:b,label:t.label,help:t.help,checked:x,onChange:e=>m(h,t.name,e,w)},t.name);case"Select":return(0,s.jsx)(r.SelectControl,{className:b,label:t.label,help:t.help,value:x,onChange:e=>m(h,t.name,e,w),options:[...t.choices]},t.name);case"ColorPalette":return(0,s.jsx)(r.BaseControl,{className:b,label:t.label,help:t.help,children:(0,s.jsx)(r.ColorPalette,{value:x,onChange:e=>o(h,t.name,e,w),colors:[...t.colors],disableCustomColors:!0,clearable:!1})},t.name);case"ColorPicker":return(0,s.jsx)(r.BaseControl,{className:b,label:t.label,help:t.help,children:(0,s.jsx)(r.ColorPicker,{color:x,defaultValue:x,onChange:e=>m(h,t.name,e,w),...t.alfa?{enableAlpha:!0}:{}},t.name)},t.name);case"Image":return(0,s.jsx)(r.BaseControl,{className:b,label:t.label,help:t.help,children:(0,s.jsx)(a.MediaUploadCheck,{children:(0,s.jsx)(a.MediaUpload,{onSelect:e=>o(h,t.name,e.id,w),allowedTypes:["image"],value:x,render:({open:e})=>(0,s.jsx)(c,{open:e,remove:()=>o(h,t.name,0,w),componentName:t.name,mediaId:x})})})},t.name);case"File":return(0,s.jsx)(r.BaseControl,{className:b,label:t.label,help:t.help,children:(0,s.jsx)(a.MediaUploadCheck,{children:(0,s.jsx)(a.MediaUpload,{onSelect:e=>{var n,r,i,a;o(h,t.name,{id:null!==(n=e.id)&&void 0!==n?n:"",name:null!==(r=e.filename)&&void 0!==r?r:"",url:null!==(i=e.url)&&void 0!==i?i:"",size:null!==(a=e.filesizeHumanReadable)&&void 0!==a?a:""},w)},value:x,render:({open:e})=>(0,s.jsx)(u,{open:e,remove:()=>o(h,t.name,{},w),componentName:t.name,file:x})})})},t.name);case"Link":return(0,s.jsx)(r.BaseControl,{className:b,label:t.label,help:t.help,children:(0,s.jsx)(a.__experimentalLinkControl,{searchInputPlaceholder:null!==(n=t.placeholder)&&void 0!==n?n:"Search...",value:x,onChange:e=>o(h,t.name,e,w),hasTextControl:!0,onRemove:()=>o(h,t.name,{},w)})},t.name);case"Range":return(0,s.jsx)(r.RangeControl,{className:b,label:t.label,help:t.help,value:x,onChange:e=>o(h,t.name,e,w),min:null!==(l=t.min)&&void 0!==l?l:300,max:null!==(p=t.max)&&void 0!==p?p:1536,step:null!==(v=t.step)&&void 0!==v?v:10},t.name);case"RichText":return(0,s.jsx)(r.BaseControl,{className:b,label:t.label,help:t.help,children:(0,s.jsx)(a.RichText,{label:t.label,value:x,onChange:e=>o(h,t.name,e,w),placeholder:null!==(g=t.placeholder)&&void 0!==g?g:"..."},t.name)},t.name);case"Message":return(0,s.jsx)(r.BaseControl,{className:b,label:t.label,help:t.help},t.name);case"Repeater":return(0,s.jsx)(r.BaseControl,{className:b,label:t.label,help:t.help,children:(0,s.jsx)(Kt,{componentName:t.name,fields:t.fields,meta:w,props:{...i,buttonLabel:t.button_label||"Add"}},t.name)},t.name);default:return null}})(t):null))})}function _t({name:e,props:t}){const{attributes:o,setAttributes:c}=t,[d,u]=(0,n.useState)([]),{editPost:h}=(0,l.useDispatch)("core/editor"),p=(e=null,t,n,r=!1)=>{c({[t]:n}),!1!==r&&h({meta:{[r]:n}})};return(0,n.useEffect)((()=>{i()({path:`/${e}/v1/data`}).then((e=>{u(e),e.options.map((e=>{[e.name]in e&&p([e.name],e.value)}))})).catch((e=>console.error(e?.message)))}),[]),(0,s.jsxs)(a.InspectorControls,{children:[!d&&(0,s.jsx)(r.Spinner,{}),d&&d.options&&d.options.length>0&&d.options.map(((e,n)=>{var i,a;return(0,s.jsx)(r.PanelBody,{title:null!==(i=e.label)&&void 0!==i?i:e.name,initialOpen:null!==(a=e.open)&&void 0!==a&&a,children:(0,s.jsx)("div",{className:"gutengood gutengood-options",children:(0,s.jsx)(Wt,{attributes:o,components:e.fields,onChange:p,props:t})})},n)}))]})}const Gt=window.wp.serverSideRender;var Jt=e.n(Gt);const qt=(0,s.jsx)(Ut.SVG,{viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,s.jsx)(Ut.Path,{d:"M3.99961 13C4.67043 13.3354 4.6703 13.3357 4.67017 13.3359L4.67298 13.3305C4.67621 13.3242 4.68184 13.3135 4.68988 13.2985C4.70595 13.2686 4.7316 13.2218 4.76695 13.1608C4.8377 13.0385 4.94692 12.8592 5.09541 12.6419C5.39312 12.2062 5.84436 11.624 6.45435 11.0431C7.67308 9.88241 9.49719 8.75 11.9996 8.75C14.502 8.75 16.3261 9.88241 17.5449 11.0431C18.1549 11.624 18.6061 12.2062 18.9038 12.6419C19.0523 12.8592 19.1615 13.0385 19.2323 13.1608C19.2676 13.2218 19.2933 13.2686 19.3093 13.2985C19.3174 13.3135 19.323 13.3242 19.3262 13.3305L19.3291 13.3359C19.3289 13.3357 19.3288 13.3354 19.9996 13C20.6704 12.6646 20.6703 12.6643 20.6701 12.664L20.6697 12.6632L20.6688 12.6614L20.6662 12.6563L20.6583 12.6408C20.6517 12.6282 20.6427 12.6108 20.631 12.5892C20.6078 12.5459 20.5744 12.4852 20.5306 12.4096C20.4432 12.2584 20.3141 12.0471 20.1423 11.7956C19.7994 11.2938 19.2819 10.626 18.5794 9.9569C17.1731 8.61759 14.9972 7.25 11.9996 7.25C9.00203 7.25 6.82614 8.61759 5.41987 9.9569C4.71736 10.626 4.19984 11.2938 3.85694 11.7956C3.68511 12.0471 3.55605 12.2584 3.4686 12.4096C3.42484 12.4852 3.39142 12.5459 3.36818 12.5892C3.35656 12.6108 3.34748 12.6282 3.34092 12.6408L3.33297 12.6563L3.33041 12.6614L3.32948 12.6632L3.32911 12.664C3.32894 12.6643 3.32879 12.6646 3.99961 13ZM11.9996 16C13.9326 16 15.4996 14.433 15.4996 12.5C15.4996 10.567 13.9326 9 11.9996 9C10.0666 9 8.49961 10.567 8.49961 12.5C8.49961 14.433 10.0666 16 11.9996 16Z"})});function Zt({name:e,props:t}){const{attributes:o,setAttributes:c}=t,[d,u]=(0,n.useState)([]),[h,p]=(0,n.useState)(!1),{editPost:f}=(0,l.useDispatch)("core/editor"),v=(e=null,t,n,r=!1)=>{c({[t]:n}),!1!==r&&f({meta:{[r]:n}})};return(0,n.useEffect)((()=>{i()({path:`/${e}/v1/data`}).then((e=>{u(e),p(e.edit_mode),e.fields.map((e=>{[e.name]in e&&v([e.name],e.value)}))})).catch((e=>console.error(e?.message)))}),[]),(0,s.jsxs)(s.Fragment,{children:[!d&&(0,s.jsx)(r.Spinner,{}),d&&d.fields&&d.fields.length>0&&(0,s.jsx)(a.BlockControls,{children:(0,s.jsx)(r.ToolbarGroup,{children:(0,s.jsx)(r.ToolbarButton,{icon:h?qt:"edit",onClick:()=>{p(!h)}})})}),d&&d.fields&&h&&(0,s.jsx)("div",{className:"gutengood gutengood-fields",children:(0,s.jsx)(Wt,{attributes:o,components:d.fields,onChange:v,props:t})}),!h&&(0,s.jsx)(Jt(),{httpMethod:"POST",block:e,props:t,attributes:t.attributes})]})}function $t(e){if(!e||"string"!=typeof e||!e.includes('"svg"'))return e;const t=JSON.parse(e),{svg:n}=t,r=n.paths?n.paths.map(((e,t)=>(0,s.jsx)("path",{fill:e["@attributes"].fill,d:e["@attributes"].d},t))):(0,s.jsx)("path",{fill:n.path["@attributes"].fill,d:n.path["@attributes"].d});return(0,s.jsx)("svg",{width:n["@attributes"].width,height:n["@attributes"].height,viewBox:n["@attributes"].viewBox,children:r})}void 0!==window.gutengoodBlocks&&window.gutengoodBlocks.forEach((e=>{const r=e.name;(0,t.registerBlockType)(r,{title:e.title,icon:$t(e.icon),description:e.description,category:e.category,edit:e=>(0,s.jsxs)(n.Fragment,{children:[(0,s.jsx)(_t,{name:r,props:e}),(0,s.jsx)(Zt,{name:r,props:e})]}),save:()=>null})}))})();

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "gutengood-js",
+  "version": "2.0.2",
+  "main": "index.js",
+  "repository": "https://github.com/yarovikov/gutengood-js",
+  "author": "yarovikov <alex.yarovikov@gmail.com>",
+  "license": "MIT",
+  "scripts": {
+    "start": "wp-scripts start",
+    "build": "wp-scripts build"
+  },
+  "devDependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@wordpress/icons": "^10.14.0",
+    "@wordpress/scripts": "^30.7.0",
+    "immutability-helper": "^3.1.1"
+  }
+}

package/src/components/block-components.js

@@ -0,0 +1,311 @@
+import {
+  TimePicker,
+  TextControl,
+  TextareaControl,
+  ToggleControl,
+  SelectControl,
+  ColorPalette,
+  ColorPicker,
+  BaseControl,
+  RangeControl,
+} from '@wordpress/components';
+import {
+  MediaUpload,
+  MediaUploadCheck,
+  RichText,
+  __experimentalLinkControl as LinkControl,
+} from '@wordpress/block-editor';
+import {useState, useEffect} from '@wordpress/element';
+import {useSelect} from '@wordpress/data';
+import {ImagePreview} from "./image-preview";
+import {File} from "./file";
+import {SortableList} from "./sortable-list";
+
+export default function BlockComponents({attributes, components, onChange, props, item = null, id = null}) {
+
+  // check if some component uses meta
+  const hasMeta = components.some((component) => component.meta);
+  // get meta
+  const postMeta = useSelect((select) => hasMeta ? select('core/editor').getEditedPostAttribute('meta') : null);
+
+  const [componentStates, setComponentStates] = useState({});
+
+  // component condition
+  useEffect(() => {
+    const initialStates = {};
+    components.forEach(component => {
+      initialStates[component.name] = item ? item[component.name] : attributes[component.name];
+    });
+    setComponentStates(initialStates);
+  }, [components, item, attributes]);
+
+  const handleChange = (id, name, value, meta) => {
+    setComponentStates((prevState) => ({
+      ...prevState,
+      [name]: value,
+    }));
+    onChange(id, name, value, meta);
+  };
+
+  const shouldRenderComponent = (component) => {
+    if (component.condition) {
+      const condition = Array.isArray(component.condition) ? component.condition : [component.condition];
+      return condition.every(con =>
+        componentStates[con.name] === con.value
+      );
+    }
+    return true;
+  };
+
+  const renderBlockComponents = (component) => {
+    const componentClass = component.meta ? 'is-meta' : '';
+    // get value from meta or block attributes
+    const value = component.meta ? postMeta[component.name] : item ? item[component.name] : attributes[component.name];
+    // this updates meta and attributes (both, if meta = true)
+    const meta = component.meta ? component.name : false;
+
+    switch (component.type) {
+      case 'TimePicker':
+        return (
+          <BaseControl
+            className={componentClass}
+            key={component.name}
+            label={component.label}
+            help={component.help}
+          >
+            <TimePicker
+              key={component.name}
+              currentDate={value}
+              onChange={(value) => onChange(id, component.name, value, meta)}
+              {...(component.is12hour ? {is12Hour: true} : {})}
+            />
+          </BaseControl>
+        );
+      case 'Text':
+        return (
+          <TextControl
+            className={componentClass}
+            key={component.name}
+            label={component.label}
+            help={component.help}
+            placeholder={component.placeholder}
+            value={value}
+            onChange={(value) => onChange(id, component.name, value, meta)}
+          />
+        );
+      case 'Textarea':
+        return (
+          <TextareaControl
+            className={componentClass}
+            key={component.name}
+            label={component.label}
+            help={component.help}
+            placeholder={component.placeholder}
+            value={value}
+            onChange={(value) => onChange(id, component.name, value, meta)}
+          />
+        );
+      case 'Toggle':
+        return (
+          <ToggleControl
+            className={componentClass}
+            key={component.name}
+            label={component.label}
+            help={component.help}
+            checked={value}
+            onChange={(value) => handleChange(id, component.name, value, meta)}
+          />
+        );
+      case 'Select':
+        return (
+          <SelectControl
+            className={componentClass}
+            key={component.name}
+            label={component.label}
+            help={component.help}
+            value={value}
+            onChange={(value) => handleChange(id, component.name, value, meta)}
+            options={[
+              ...component.choices,
+            ]}
+          />
+        );
+      case 'ColorPalette':
+        return (
+          <BaseControl
+            className={componentClass}
+            key={component.name}
+            label={component.label}
+            help={component.help}
+          >
+            <ColorPalette
+              value={value}
+              onChange={(value) => onChange(id, component.name, value, meta)}
+              colors={[
+                ...component.colors,
+              ]}
+              disableCustomColors={true}
+              clearable={false}
+            />
+          </BaseControl>
+        );
+      case 'ColorPicker':
+        return (
+          <BaseControl
+            className={componentClass}
+            key={component.name}
+            label={component.label}
+            help={component.help}
+          >
+            <ColorPicker
+              key={component.name}
+              color={value}
+              defaultValue={value}
+              onChange={(value) => handleChange(id, component.name, value, meta)}
+              {...(component.alfa ? {enableAlpha: true} : {})}
+            />
+          </BaseControl>
+        );
+      case 'Image':
+        return (
+          <BaseControl
+            className={componentClass}
+            key={component.name}
+            label={component.label}
+            help={component.help}
+          >
+            <MediaUploadCheck>
+              <MediaUpload
+                onSelect={(media) => onChange(id, component.name, media.id, meta)}
+                allowedTypes={['image']}
+                value={value}
+                render={({open}) =>
+                  <ImagePreview
+                    open={open}
+                    remove={() => onChange(id, component.name, 0, meta)}
+                    componentName={component.name}
+                    mediaId={value}
+                  />
+                }
+              />
+            </MediaUploadCheck>
+          </BaseControl>
+        );
+      case 'File':
+        return (
+          <BaseControl
+            className={componentClass}
+            key={component.name}
+            label={component.label}
+            help={component.help}
+          >
+            <MediaUploadCheck>
+              <MediaUpload
+                onSelect={(file) => {
+                  onChange(id, component.name, {
+                    id: file.id ?? '',
+                    name: file.filename ?? '',
+                    url: file.url ?? '',
+                    size: file.filesizeHumanReadable ?? '',
+                  }, meta)
+                }}
+                value={value}
+                render={({open}) =>
+                  <File
+                    open={open}
+                    remove={() => onChange(id, component.name, {}, meta)}
+                    componentName={component.name}
+                    file={value}
+                  />
+                }
+              />
+            </MediaUploadCheck>
+          </BaseControl>
+        );
+      case 'Link':
+        return (
+          <BaseControl
+            className={componentClass}
+            key={component.name}
+            label={component.label}
+            help={component.help}
+          >
+            <LinkControl
+              searchInputPlaceholder={component.placeholder ?? 'Search...'}
+              value={value}
+              onChange={(value) => onChange(id, component.name, value, meta)}
+              hasTextControl
+              onRemove={() => onChange(id, component.name, {}, meta)}
+            />
+          </BaseControl>
+        );
+      case 'Range':
+        return (
+          <RangeControl
+            className={componentClass}
+            key={component.name}
+            label={component.label}
+            help={component.help}
+            value={value}
+            onChange={(value) => onChange(id, component.name, value, meta)}
+            min={component.min ?? 300}
+            max={component.max ?? 1536}
+            step={component.step ?? 10}
+          />
+        );
+      case 'RichText':
+        return (
+          <BaseControl
+            className={componentClass}
+            key={component.name}
+            label={component.label}
+            help={component.help}
+          >
+            <RichText
+              key={component.name}
+              label={component.label}
+              value={value}
+              onChange={(value) => onChange(id, component.name, value, meta)}
+              placeholder={component.placeholder ?? '...'}
+            />
+          </BaseControl>
+        );
+      case 'Message':
+        return (
+          <BaseControl
+            className={componentClass}
+            key={component.name}
+            label={component.label}
+            help={component.help}
+          />
+        );
+      case 'Repeater':
+        return (
+          <BaseControl
+            className={componentClass}
+            key={component.name}
+            label={component.label}
+            help={component.help}
+          >
+            <SortableList
+              key={component.name}
+              componentName={component.name}
+              fields={component.fields}
+              meta={meta}
+              props={{...props, buttonLabel: component.button_label || 'Add'}}
+            />
+          </BaseControl>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <>
+      {components.map((component) => {
+        return shouldRenderComponent(component) ? renderBlockComponents(component) : null;
+      })}
+    </>
+  )
+}

package/src/components/block-fields.js

@@ -0,0 +1,73 @@
+import {Spinner, ToolbarButton, ToolbarGroup} from '@wordpress/components';
+import apiFetch from '@wordpress/api-fetch';
+import {useState, useEffect} from '@wordpress/element';
+import {BlockControls} from '@wordpress/block-editor';
+import ServerSideRender from '@wordpress/server-side-render';
+import {seen} from '@wordpress/icons';
+import {useDispatch} from '@wordpress/data';
+import BlockComponents from "./block-components";
+
+export default function BlockFields({name, props}) {
+
+  const {attributes, setAttributes} = props;
+  const [data, setData] = useState([]);
+  const [editMode, setEditMode] = useState(false);
+  const {editPost} = useDispatch('core/editor');
+
+  const onChangeAttribute = (id = null, key, value, metaName = false) => {
+    setAttributes({[key]: value})
+    if (false !== metaName) {
+      editPost({meta: {[metaName]: value}})
+    }
+  };
+
+  const toggleEditMode = () => {
+    setEditMode(!editMode);
+  };
+
+  useEffect(() => {
+    apiFetch({path: `/${name}/v1/data`})
+      .then((res) => {
+        setData(res)
+        setEditMode(res.edit_mode)
+        res.fields.map((field) => {
+          [field.name] in field && onChangeAttribute([field.name], field.value);
+        });
+      })
+      .catch((error) => console.error(error?.message));
+  }, []);
+
+  return (
+    <>
+      {!data && <Spinner/>}
+      {data && data.fields && data.fields.length > 0 && (
+        <BlockControls>
+          <ToolbarGroup>
+            <ToolbarButton
+              icon={!editMode ? 'edit' : seen}
+              onClick={toggleEditMode}
+            />
+          </ToolbarGroup>
+        </BlockControls>
+      )}
+      {data && data.fields && editMode && (
+        <div className='gutengood gutengood-fields'>
+          <BlockComponents
+            attributes={attributes}
+            components={data.fields}
+            onChange={onChangeAttribute}
+            props={props}
+          />
+        </div>
+      )}
+      {!editMode && (
+        <ServerSideRender
+          httpMethod='POST'
+          block={name}
+          props={props}
+          attributes={props.attributes}
+        />
+      )}
+    </>
+  )
+}

package/src/components/block-options.js

@@ -0,0 +1,57 @@
+import {Spinner, PanelBody} from '@wordpress/components';
+import apiFetch from '@wordpress/api-fetch';
+import {useState, useEffect} from '@wordpress/element';
+import {InspectorControls} from '@wordpress/block-editor';
+import {useDispatch} from '@wordpress/data';
+import BlockComponents from "./block-components";
+
+export default function BlockOptions({name, props}) {
+
+  const {attributes, setAttributes} = props;
+  const [data, setData] = useState([]);
+  const {editPost} = useDispatch('core/editor');
+
+  const onChangeAttribute = (id = null, key, value, metaName = false) => {
+    setAttributes({[key]: value})
+    if (false !== metaName) {
+      editPost({meta: {[metaName]: value}})
+    }
+  };
+
+  useEffect(() => {
+    apiFetch({path: `/${name}/v1/data`})
+      .then((res) => {
+        setData(res)
+        res.options.map((option) => {
+          [option.name] in option && onChangeAttribute([option.name], option.value);
+        });
+      })
+      .catch((error) => console.error(error?.message));
+  }, []);
+
+  return (
+    <InspectorControls>
+      {!data && <Spinner/>}
+      {data && data.options && data.options.length > 0 && (
+        data.options.map((section, index) => {
+          return (
+            <PanelBody
+              key={index}
+              title={section.label ?? section.name}
+              initialOpen={section.open ?? false}
+            >
+              <div className='gutengood gutengood-options'>
+                <BlockComponents
+                  attributes={attributes}
+                  components={section.fields}
+                  onChange={onChangeAttribute}
+                  props={props}
+                />
+              </div>
+            </PanelBody>
+          );
+        })
+      )}
+    </InspectorControls>
+  )
+}

package/src/components/file.js

@@ -0,0 +1,45 @@
+import {Button, Icon} from '@wordpress/components';
+
+const FileIcon = () => (
+  <Icon
+    icon={() => (
+      <svg className='file-component-icon' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+        <path d="M380.7 67.3c-29.1-29.1-76.3-29.1-105.4 0l-192 192c-46.8 46.8-46.8 122.6 0 169.4s122.6 46.8 169.4 0l152-152c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6l-152 152c-59.3 59.3-155.4 59.3-214.6 0S1.4 296 60.7 236.7l192-192c41.6-41.6 109-41.6 150.6 0s41.6 109 0 150.6L219.5 379.1c-28.2 28.2-74.6 25.6-99.6-5.5c-21.3-26.6-19.2-65 4.9-89.1L276.7 132.7c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6L147.5 307.1c-12.6 12.6-13.7 32.6-2.6 46.5c13 16.2 37.2 17.6 51.9 2.9L380.7 172.7c29.1-29.1 29.1-76.3 0-105.4z"/>
+      </svg>
+    )}
+  />
+);
+
+export const File = ({open, remove, file}) => {
+  return (
+    <div className='file-component'>
+      <FileIcon/>
+      {file && file.id
+        ?
+        (
+          <div className='file-component-info'>
+            <div>
+              <span className='file-component-info-name'>
+                {file.name}
+              </span>
+              <span className='file-component-info-size'>
+                {file.size}
+              </span>
+            </div>
+            <Button
+              icon={'trash'}
+              onClick={remove}
+            >
+            </Button>
+          </div>
+        )
+        :
+        <Button
+          onClick={open}
+        >
+          Select File
+        </Button>
+      }
+    </div>
+  );
+}

package/src/components/image-preview.js

@@ -0,0 +1,40 @@
+import {Button} from '@wordpress/components';
+import {useSelect} from '@wordpress/data';
+
+export const ImagePreview = ({open, remove, mediaId}) => {
+  const media = useSelect((select) => select('core').getMedia(mediaId), [mediaId]);
+  const mediaUrl = media?.media_details?.sizes?.thumbnail?.source_url || media?.source_url || null;
+  return (
+    <div className='image-component'>
+      {mediaUrl
+        ?
+        (
+          <div>
+            <div>
+              <img className='image-component-image' src={mediaUrl} alt=''/>
+              <div className='image-component-buttons'>
+                <Button
+                  onClick={open}
+                  icon={'edit'}
+                >
+                </Button>
+                <Button
+                  icon={'trash'}
+                  onClick={remove}
+                >
+                </Button>
+              </div>
+            </div>
+          </div>
+        )
+        :
+        <Button
+          className='is-primary'
+          onClick={open}
+        >
+          Choose Image
+        </Button>
+      }
+    </div>
+  );
+}

package/src/components/sortable-item.js

@@ -0,0 +1,63 @@
+import {useSortable} from "@dnd-kit/sortable";
+import {CSS} from "@dnd-kit/utilities";
+import {closeSmall, dragHandle, plus} from '@wordpress/icons';
+import {Button} from '@wordpress/components';
+import {useState} from '@wordpress/element';
+import BlockComponents from "./block-components";
+
+export const SortableItem = ({id, item, fields, updateItemContent, deleteItem}) => {
+
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({id});
+
+  const style = {
+    transform: CSS.Transform.toString(transform && {...transform, scaleY: 1}),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className='repeater-component-item'
+    >
+      <div className='repeater-component-item-buttons'>
+        <Button
+          {...attributes}
+          {...listeners}
+          icon={dragHandle}
+        >
+        </Button>
+        <Button
+          icon={isCollapsed ? plus : 'minus'}
+          onClick={() => setIsCollapsed(!isCollapsed)}
+        >
+        </Button>
+        <Button
+          isDestructive
+          onClick={() => deleteItem(id)}
+          icon={closeSmall}
+        >
+        </Button>
+      </div>
+      <div className={`${isCollapsed ? 'is-collapsed ' : ''}repeater-component-item-components`}>
+        <BlockComponents
+          attributes={attributes}
+          components={fields}
+          onChange={updateItemContent}
+          item={item}
+          id={id}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/sortable-list.js

@@ -0,0 +1,139 @@
+import {useState, useEffect} from '@wordpress/element';
+import {closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors} from "@dnd-kit/core";
+import {arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy} from "@dnd-kit/sortable";
+import {Button, BaseControl} from '@wordpress/components';
+import {useDispatch} from '@wordpress/data';
+import {SortableItem} from "./sortable-item";
+
+export const SortableList = ({componentName, fields, meta, props}) => {
+
+  const {
+    attributes,
+    setAttributes,
+  } = props;
+
+  const items = attributes[componentName];
+  const [sortableItems, setSortableItems] = useState([]);
+  const {editPost} = useDispatch('core/editor');
+
+  useEffect(() => {
+    const fieldNames = new Set(fields.map(field => field.name));
+
+    const updatedItems = items.map(item => {
+      const updatedItem = {id: item.id};
+
+      Object.keys(item).forEach(key => {
+        if (fieldNames.has(key) || key === 'id') {
+          updatedItem[key] = item[key];
+        }
+      });
+
+      fieldNames.forEach(fieldName => {
+        if (!(fieldName in updatedItem)) {
+          updatedItem[fieldName] = '';
+        }
+      });
+
+      return updatedItem;
+    });
+
+    setSortableItems(updatedItems);
+  }, [items, fields]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  const moveItem = (activeId, overId) => {
+    const activeIndex = sortableItems.findIndex((item) => item.id === activeId);
+    const overIndex = sortableItems.findIndex((item) => item.id === overId);
+
+    if (activeIndex !== overIndex) {
+      const newItems = arrayMove(sortableItems, activeIndex, overIndex);
+      setSortableItems(newItems);
+      setAttributes({[componentName]: newItems});
+      if (false !== meta) {
+        editPost({meta: {[meta]: newItems}})
+      }
+    }
+  };
+
+  const addItem = (fields) => {
+    const newItem = {
+      id: `${Date.now()}`,
+    };
+    fields.forEach(field => {
+      newItem[field.name] = field.value;
+    });
+
+    const newItems = [...sortableItems, newItem];
+    setSortableItems(newItems);
+    setAttributes({[componentName]: newItems});
+    if (false !== meta) {
+      editPost({meta: {[meta]: newItems}})
+    }
+  };
+
+  const deleteItem = (id) => {
+    const newItems = sortableItems.filter((item) => item.id !== id);
+    setSortableItems(newItems);
+    setAttributes({[componentName]: newItems});
+    if (false !== meta) {
+      editPost({meta: {[meta]: newItems}})
+    }
+  };
+
+  const updateItemContent = (id, name, value) => {
+    const newItems = sortableItems.map((item) =>
+      item.id === id ? {...item, [name]: value} : item
+    );
+    setSortableItems(newItems);
+    setAttributes({[componentName]: newItems});
+    if (false !== meta) {
+      editPost({meta: {[meta]: newItems}})
+    }
+  };
+
+  return (
+    <BaseControl>
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={(event) => {
+          const {active, over} = event;
+          if (active && over) {
+            moveItem(active.id, over.id);
+          }
+        }}
+      >
+        <SortableContext
+          items={sortableItems}
+          strategy={verticalListSortingStrategy}
+        >
+          <div className='repeater-component'>
+            {sortableItems.map((item) => (
+              <SortableItem
+                key={item.id}
+                id={item.id}
+                item={item}
+                fields={fields}
+                updateItemContent={updateItemContent}
+                deleteItem={deleteItem}
+              />
+            ))}
+          </div>
+        </SortableContext>
+      </DndContext>
+      <Button
+        isPrimary
+        onClick={() => addItem(fields)}
+        className='repeater-component-add-item-button'
+      >
+        {props.buttonLabel}
+      </Button>
+    </BaseControl>
+  );
+}

package/src/index.js

@@ -0,0 +1,57 @@
+import {registerBlockType} from '@wordpress/blocks';
+import {Fragment} from '@wordpress/element';
+import BlockOptions from "./components/block-options";
+import BlockFields from "./components/block-fields";
+import "./styles.scss";
+
+if ('undefined' !== typeof window.gutengoodBlocks) {
+  window.gutengoodBlocks.forEach(block => {
+    const name = block.name;
+    registerBlockType(name, {
+      title: block.title,
+      icon: getIcon(block.icon),
+      description: block.description,
+      category: block.category,
+      edit: (props) => (
+          <Fragment>
+            <BlockOptions name={name} props={props}/>
+            <BlockFields name={name} props={props}/>
+          </Fragment>
+      ),
+      save: () => null,
+    });
+  });
+}
+
+function getIcon(icon) {
+  if (!icon || typeof icon !== 'string' || !icon.includes('"svg"')) {
+    return icon
+  }
+
+  const json = JSON.parse(icon);
+  const {svg} = json;
+  const paths = svg.paths
+      ? svg.paths.map((path, index) => (
+          <path
+              key={index}
+              fill={path['@attributes'].fill}
+              d={path['@attributes'].d}
+          />
+      ))
+      : (
+          <path
+              fill={svg.path['@attributes'].fill}
+              d={svg.path['@attributes'].d}
+          />
+      );
+
+  return (
+      <svg
+          width={svg['@attributes'].width}
+          height={svg['@attributes'].height}
+          viewBox={svg['@attributes'].viewBox}
+      >
+        {paths}
+      </svg>
+  );
+}

package/src/styles.scss

@@ -0,0 +1,187 @@
+.gutengood {
+  .components-base-control.is-meta {
+    padding: 16px;
+    background-color: #f2f2f2;
+  }
+
+  .components-datetime__time {
+    max-width: 300px;
+  }
+
+  .components-datetime__time-separator {
+    background-color: #fff;
+  }
+
+  .image-component > div {
+    position: relative;
+    width: auto;
+
+    > div {
+      margin-bottom: 8px;
+      width: 128px;
+      aspect-ratio: 1;
+      overflow: hidden;
+      position: relative;
+
+      .image-component-image {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        object-fit: cover;
+      }
+
+      .image-component-buttons {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .image-component-buttons button {
+        background-color: rgba(255, 255, 255, 0.8);
+      }
+    }
+  }
+
+  .block-editor-link-control {
+    min-width: auto;
+    max-width: 300px;
+
+    .block-editor-url-input {
+      min-width: 100%;
+    }
+
+    .block-editor-link-control__search-item.is-current {
+      padding: 0;
+    }
+
+    .block-editor-link-control__search-enter {
+      right: 4px;
+    }
+
+    .components-menu-item__item {
+      min-width: 0;
+    }
+
+    .block-editor-link-control__field {
+      margin: 8px 0;
+    }
+
+    .block-editor-link-control__search-input .components-spinner.components-spinner {
+      top: 21px;
+      transform: translateY(-50%);
+    }
+  }
+
+  .file-component {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .file-component-icon {
+      width: 20px;
+      flex-shrink: 0;
+    }
+
+    .file-component-info {
+      display: flex;
+      gap: 8px;
+
+      > div {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .file-component-info-name {
+        word-break: break-all;
+      }
+
+      .file-component-info-size {
+        color: #6b7280;
+        white-space: nowrap;
+        font-size: 12px;
+      }
+    }
+
+    .components-button {
+      padding: 0 !important;
+      height: 24px !important;
+      min-width: 1px !important;
+    }
+  }
+
+  .repeater-component {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    .repeater-component-item {
+      display: flex;
+      background-color: #f3f4f6;
+      border: 1px solid #d1d5db;
+    }
+
+    .repeater-component-item-buttons {
+      display: flex;
+      flex-direction: column;
+      width: 40px;
+      flex-shrink: 0;
+      gap: 8px;
+      align-items: center;
+      background-color: #e5e7eb;
+
+      button {
+        box-shadow: none !important;
+      }
+    }
+
+    .repeater-component-item-components {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      padding: 16px;
+
+      &.is-collapsed > div {
+        display: none;
+      }
+
+      &.is-collapsed > div:first-child {
+        display: block;
+      }
+    }
+  }
+
+  .repeater-component-add-item-button {
+    display: block;
+    margin: 12px auto 0;
+    width: 100%;
+    max-width: 300px;
+  }
+
+  &.gutengood-fields {
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  &.gutengood-options {
+    display: flex;
+    flex-direction: column;
+
+    .components-color-picker, .components-datetime__time {
+      .components-base-control {
+        margin-bottom: 0 !important;
+      }
+    }
+
+    .file-component-info {
+      display: flex;
+      align-items: center;
+    }
+  }
+}

package/webpack.config.js

@@ -0,0 +1,16 @@
+const defaultConfig = require('./node_modules/@wordpress/scripts/config/webpack.config.js');
+const path = require('path');
+
+module.exports = {
+  ...defaultConfig,
+  entry: {
+    'gutengood': path.resolve(__dirname, 'src/index.js'),
+  },
+  optimization: {
+    ...defaultConfig.optimization,
+  },
+  module: {
+    ...defaultConfig.module,
+  },
+  plugins: [...defaultConfig.plugins],
+};