93 lines
13 KiB
JavaScript
93 lines
13 KiB
JavaScript
|
const __TWEAKS_STYLE=`
|
||
|
|
.twk-panel{position:fixed;right:16px;bottom:16px;z-index:2147483646;width:280px;
|
||
|
|
max-height:calc(100vh - 32px);display:flex;flex-direction:column;
|
||
|
|
background:rgba(250,249,247,.78);color:#29261b;
|
||
|
|
-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
|
||
|
|
border:.5px solid rgba(255,255,255,.6);border-radius:14px;
|
||
|
|
box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 12px 40px rgba(0,0,0,.18);
|
||
|
|
font:11.5px/1.4 ui-sans-serif,system-ui,-apple-system,sans-serif;overflow:hidden}
|
||
|
|
.twk-hd{display:flex;align-items:center;justify-content:space-between;
|
||
|
|
padding:10px 8px 10px 14px;cursor:move;user-select:none}
|
||
|
|
.twk-hd b{font-size:12px;font-weight:600;letter-spacing:.01em}
|
||
|
|
.twk-x{appearance:none;border:0;background:transparent;color:rgba(41,38,27,.55);
|
||
|
|
width:22px;height:22px;border-radius:6px;cursor:default;font-size:13px;line-height:1}
|
||
|
|
.twk-x:hover{background:rgba(0,0,0,.06);color:#29261b}
|
||
|
|
.twk-body{padding:2px 14px 14px;display:flex;flex-direction:column;gap:10px;
|
||
|
|
overflow-y:auto;overflow-x:hidden;min-height:0;
|
||
|
|
scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.15) transparent}
|
||
|
|
.twk-body::-webkit-scrollbar{width:8px}
|
||
|
|
.twk-body::-webkit-scrollbar-track{background:transparent;margin:2px}
|
||
|
|
.twk-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px;
|
||
|
|
border:2px solid transparent;background-clip:content-box}
|
||
|
|
.twk-body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25);
|
||
|
|
border:2px solid transparent;background-clip:content-box}
|
||
|
|
.twk-row{display:flex;flex-direction:column;gap:5px}
|
||
|
|
.twk-row-h{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
|
||
|
|
.twk-lbl{display:flex;justify-content:space-between;align-items:baseline;
|
||
|
|
color:rgba(41,38,27,.72)}
|
||
|
|
.twk-lbl>span:first-child{font-weight:500}
|
||
|
|
.twk-val{color:rgba(41,38,27,.5);font-variant-numeric:tabular-nums}
|
||
|
|
|
||
|
|
.twk-sect{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
|
||
|
|
color:rgba(41,38,27,.45);padding:10px 0 0}
|
||
|
|
.twk-sect:first-child{padding-top:0}
|
||
|
|
|
||
|
|
.twk-field{appearance:none;width:100%;height:26px;padding:0 8px;
|
||
|
|
border:.5px solid rgba(0,0,0,.1);border-radius:7px;
|
||
|
|
background:rgba(255,255,255,.6);color:inherit;font:inherit;outline:none}
|
||
|
|
.twk-field:focus{border-color:rgba(0,0,0,.25);background:rgba(255,255,255,.85)}
|
||
|
|
select.twk-field{padding-right:22px;
|
||
|
|
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(0,0,0,.5)' d='M0 0h10L5 6z'/></svg>");
|
||
|
|
background-repeat:no-repeat;background-position:right 8px center}
|
||
|
|
|
||
|
|
.twk-slider{appearance:none;-webkit-appearance:none;width:100%;height:4px;margin:6px 0;
|
||
|
|
border-radius:999px;background:rgba(0,0,0,.12);outline:none}
|
||
|
|
.twk-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
|
||
|
|
width:14px;height:14px;border-radius:50%;background:#fff;
|
||
|
|
border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}
|
||
|
|
.twk-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
|
||
|
|
background:#fff;border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}
|
||
|
|
|
||
|
|
.twk-seg{position:relative;display:flex;padding:2px;border-radius:8px;
|
||
|
|
background:rgba(0,0,0,.06);user-select:none}
|
||
|
|
.twk-seg-thumb{position:absolute;top:2px;bottom:2px;border-radius:6px;
|
||
|
|
background:rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(0,0,0,.12);
|
||
|
|
transition:left .15s cubic-bezier(.3,.7,.4,1),width .15s}
|
||
|
|
.twk-seg.dragging .twk-seg-thumb{transition:none}
|
||
|
|
.twk-seg button{appearance:none;position:relative;z-index:1;flex:1;border:0;
|
||
|
|
background:transparent;color:inherit;font:inherit;font-weight:500;min-height:22px;
|
||
|
|
border-radius:6px;cursor:default;padding:4px 6px;line-height:1.2;
|
||
|
|
overflow-wrap:anywhere}
|
||
|
|
|
||
|
|
.twk-toggle{position:relative;width:32px;height:18px;border:0;border-radius:999px;
|
||
|
|
background:rgba(0,0,0,.15);transition:background .15s;cursor:default;padding:0}
|
||
|
|
.twk-toggle[data-on="1"]{background:#34c759}
|
||
|
|
.twk-toggle i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
|
||
|
|
background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
|
||
|
|
.twk-toggle[data-on="1"] i{transform:translateX(14px)}
|
||
|
|
|
||
|
|
.twk-num{display:flex;align-items:center;height:26px;padding:0 0 0 8px;
|
||
|
|
border:.5px solid rgba(0,0,0,.1);border-radius:7px;background:rgba(255,255,255,.6)}
|
||
|
|
.twk-num-lbl{font-weight:500;color:rgba(41,38,27,.6);cursor:ew-resize;
|
||
|
|
user-select:none;padding-right:8px}
|
||
|
|
.twk-num input{flex:1;min-width:0;height:100%;border:0;background:transparent;
|
||
|
|
font:inherit;font-variant-numeric:tabular-nums;text-align:right;padding:0 8px 0 0;
|
||
|
|
outline:none;color:inherit;-moz-appearance:textfield}
|
||
|
|
.twk-num input::-webkit-inner-spin-button,.twk-num input::-webkit-outer-spin-button{
|
||
|
|
-webkit-appearance:none;margin:0}
|
||
|
|
.twk-num-unit{padding-right:8px;color:rgba(41,38,27,.45)}
|
||
|
|
|
||
|
|
.twk-btn{appearance:none;height:26px;padding:0 12px;border:0;border-radius:7px;
|
||
|
|
background:rgba(0,0,0,.78);color:#fff;font:inherit;font-weight:500;cursor:default}
|
||
|
|
.twk-btn:hover{background:rgba(0,0,0,.88)}
|
||
|
|
.twk-btn.secondary{background:rgba(0,0,0,.06);color:inherit}
|
||
|
|
.twk-btn.secondary:hover{background:rgba(0,0,0,.1)}
|
||
|
|
|
||
|
|
.twk-swatch{appearance:none;-webkit-appearance:none;width:56px;height:22px;
|
||
|
|
border:.5px solid rgba(0,0,0,.1);border-radius:6px;padding:0;cursor:default;
|
||
|
|
background:transparent;flex-shrink:0}
|
||
|
|
.twk-swatch::-webkit-color-swatch-wrapper{padding:0}
|
||
|
|
.twk-swatch::-webkit-color-swatch{border:0;border-radius:5.5px}
|
||
|
|
.twk-swatch::-moz-color-swatch{border:0;border-radius:5.5px}
|
||
|
|
`;function useTweaks(defaults){const[values,setValues]=React.useState(defaults),setTweak=React.useCallback((keyOrEdits,val)=>{const edits=typeof keyOrEdits=="object"&&keyOrEdits!==null?keyOrEdits:{[keyOrEdits]:val};setValues(prev=>({...prev,...edits})),window.parent.postMessage({type:"__edit_mode_set_keys",edits},"*")},[]);return[values,setTweak]}function TweaksPanel({title="Tweaks",children}){const[open,setOpen]=React.useState(!1),dragRef=React.useRef(null),offsetRef=React.useRef({x:16,y:16}),PAD=16,clampToViewport=React.useCallback(()=>{const panel=dragRef.current;if(!panel)return;const w=panel.offsetWidth,h=panel.offsetHeight,maxRight=Math.max(PAD,window.innerWidth-w-PAD),maxBottom=Math.max(PAD,window.innerHeight-h-PAD);offsetRef.current={x:Math.min(maxRight,Math.max(PAD,offsetRef.current.x)),y:Math.min(maxBottom,Math.max(PAD,offsetRef.current.y))},panel.style.right=offsetRef.current.x+"px",panel.style.bottom=offsetRef.current.y+"px"},[]);React.useEffect(()=>{if(!open)return;if(clampToViewport(),typeof ResizeObserver>"u")return window.addEventListener("resize",clampToViewport),()=>window.removeEventListener("resize",clampToViewport);const ro=new ResizeObserver(clampToViewport);return ro.observe(document.documentElement),()=>ro.disconnect()},[open,clampToViewport]),React.useEffect(()=>{const onMsg=e=>{const t=e?.data?.type;t==="__activate_edit_mode"?setOpen(!0):t==="__deactivate_edit_mode"&&setOpen(!1)};return window.addEventListener("message",onMsg),window.parent.postMessage({type:"__edit_mode_available"},"*"),()=>window.removeEventListener("message",onMsg)},[]);const dismiss=()=>{setOpen(!1),window.parent.postMessage({type:"__edit_mode_dismissed"},"*")},onDragStart=e=>{const panel=dragRef.current;if(!panel)return;const r=panel.getBoundingClientRect(),sx=e.clientX,sy=e.clientY,startRight=window.innerWidth-r.right,startBottom=window.innerHeight-r.bottom,move=ev=>{offsetRef.current={x:startRight-(ev.clientX-sx),y:startBottom-(ev.clientY-sy)},clampToViewport()},up=()=>{window.removeEventListener("mousemove",move),window.removeEventListener("mouseup",up)};window.addEventListener("mousemove",move),window.addEventListener("mouseup",up)};return open?React.createElement(React.Fragment,null,React.createElement("style",null,__TWEAKS_STYLE),React.createElement("div",{ref:dragRef,className:"twk-panel","data-noncommentable":"",style:{right:offsetRef.current.x,bottom:offsetRef.current.y}},React.createElement("div",{className:"twk-hd",onMouseDown:onDragStart},React.createElement("b",null,title),React.createElement("button",{className:"twk-x","aria-label":"Close tweaks",onMouseDown:e=>e.stopPropagation(),onClick:dismiss},"\u2715")),React.createElement("div",{className:"twk-body"},children))):null}function TweakSection({label,children}){return React.createElement(React.Fragment,null,React.createElement("div",{className:"twk-sect"},label),children)}function TweakRow({label,value,children,inline=!1}){return React.createElement("div",{className:inline?"twk-row twk-row-h":"twk-row"},React.createElement("div",{className:"twk-lbl"},React.createElement("span",null,label),value!=null&&React.createElement("span",{className:"twk-val"},value)),children)}function TweakSlider({label,value,min=0,max=100,step=1,unit="",onChange}){return React.createElement(TweakRow,{label,value:`${value}${unit}`},React.createElement("input",{type:"range",className:"twk-slider",min,max,step,value,onChange:e=>onChange(Number(e.target.value))}))}function TweakToggle({label,value,onChange}){return React.createElement("div",{className:"twk-row twk-row-h"},React.createElement("div",{className:"twk-lbl"},React.createElement("span",null,label)),React.createElement("button",{type:"button",className:"twk-toggle","data-on":value?"1":"0",role:"switch","aria-checked":!!value,onClick:()=>onChange(!value)},React.createElement("i",null)))}function TweakRadio({label,value,options,onChange}){const trackRef=React.useRef(null),[dragging,setDragging]=React.useState(!1),opts=options.map(o=>typeof o=="object"?o:{value:o,label:o}),idx=Math.max(0,opts.findIndex(o=>o.value===value)),n=opts.
|