Create userscript.js

src/addons/addons/paint-gradient-maker/userscript.js

@@ -0,0 +1,1289 @@
+// Gradient Maker Addon
+// By: SharkPool
+export default async function () {
+    const isPM = true;
+    const customID = "custom-gradient-btn";
+    const symbolTag = Symbol("custom-gradient-tag");
+    const guiIMGS = {
+        "select": `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><rect stroke="#000" fill="#fff" x=".5" y=".5" width="19" height="19" rx="4" stroke-opacity=".15"/><path fill="red" d="M13.35 8.8h-2.4V6.4a1.2 1.2 90 0 0-2.4 0l.043 2.4H6.15a1.2 1.2 90 0 0 0 2.4l2.443-.043L8.55 13.6a1.2 1.2 90 0 0 2.4 0v-2.443l2.4.043a1.2 1.2 90 0 0 0-2.4"/></svg>`,
+        "add": `<svg viewBox="2 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill="red" d="M18 10h-4V6a2 2 0 0 0-4 0l.071 4H6a2 2 0 0 0 0 4l4.071-.071L10 18a2 2 0 0 0 4 0v-4.071L18 14a2 2 0 0 0 0-4"></path></svg>`,
+        "delete": `<svg viewBox="2 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill="red" d="M 18 10 h -4 H 6 a 2 2 0 0 0 0 4 L 18 14 a 2 2 0 0 0 0 -4"></path></svg>`,
+    };
+
+    const paperLinkModes = new Set([
+        "TEXT", "OVAL", "RECT",
+        ...(isPM ? ["ROUNDED_RECT", "TRIANGLE", "SUSSY", "ARROW"] : [])
+    ]);
+
+    let selectedClassName, unselectedClassName, customBtn;
+    let observerUsed = false;
+    let modalStorage = {};
+
+    /* Internal Utils */
+    function position2Angle(p1, p2) {
+        const dx = p1.x - p2.x;
+        const dy = p1.y - p2.y;
+        const angle = Math.atan2(dy, dx) * (180 / Math.PI);
+        return angle + 90;
+    }
+
+    function initGradSelectClasses(gradRow) {
+        const classes = {};
+        const children = Array.from(gradRow.children);
+        for (const child of children) {
+            const name = child.classList.toString();
+            if (classes[name] === undefined) classes[name] = 1;
+            else classes[name] = 0;
+        }
+
+        for (const [cls, count] of Object.entries(classes)) {
+            if (count) selectedClassName = cls;
+            else unselectedClassName = cls
+        }
+    }
+
+    function encodeGradHTML(settings) {
+        const sortedParts = [...settings.parts].sort((a, b) => a.p - b.p);
+
+        let gradString = settings.type === "Linear" ? "linear-gradient(" : "radial-gradient(";
+        if (settings.type === "Linear") gradString += `${settings.dir}deg, `;
+        for (const part of sortedParts) gradString += `${part.c} ${part.p}%, `;
+        return gradString.substring(0, gradString.length - 2) + ")";
+    }
+
+    function genLinearGradPoints(bounds, angleDeg) {
+        const center = bounds.center;
+        const dir = new paper.Point({ angle: angleDeg, length: 1 });
+        const boundsRect = new paper.Path.Rectangle(bounds);
+        const gradLine = new paper.Path.Line({
+            from: center.subtract(dir.multiply(10000)),
+            to: center.add(dir.multiply(10000))
+        });
+
+        const intersections = gradLine.getIntersections(boundsRect);
+        gradLine.remove();
+        boundsRect.remove();
+        if (intersections.length < 2) {
+            return {
+                origin: center.subtract(dir.multiply(bounds.width / 2)),
+                destination: center.add(dir.multiply(bounds.width / 2))
+            };
+        } else {
+            return {
+                origin: intersections[0].point,
+                destination: intersections[1].point
+            };
+        }
+    }
+
+    function setSelected2Grad(settings) {
+        // compile SVG-based gradient
+        const sortedParts = [...settings.parts].sort((a, b) => a.p - b.p);
+        const gradStops = sortedParts.map(part => new paper.GradientStop(part.c, part.p / 100));
+        const gradient = new paper.Gradient(gradStops, settings.type === "Radial");
+        modalStorage._gradCache = { settings, gradient };
+
+        paper.project.getSelectedItems().forEach((item) => {
+            let origin, destination;
+            if (settings.type === "Radial") {
+                origin = item.bounds.center;
+                destination = item.bounds.center.add([item.bounds.width / 2, 0]);
+            } else {
+                const points = genLinearGradPoints(item.bounds, settings.dir - 90);
+                origin = points.origin;
+                destination = points.destination;
+            }
+
+            item[settings.path] = { gradient, origin, destination };
+        });
+
+        // update drawing & action
+        if (paper.tool.onUpdateImage) paper.tool.onUpdateImage();
+
+        // set with html otherwise GUI will crash
+        const swatch = document.querySelectorAll(
+            `div[class^=color-button_color-button_] div[class^=color-button_color-button-swatch_]`
+        )[settings.path === "fillColor" ? 0 : 1];
+        if (swatch) swatch.style.background = encodeGradHTML(settings);
+    }
+
+    function paperGrad2CSS(paperGrad) {
+        const { gradient, origin, destination } = paperGrad;
+        if (!gradient || !origin || !destination) return null;
+
+        const stops = gradient.stops.map(s => `${s.color.toCSS(true)} ${Math.round(s.offset * 100)}%`);
+        if (gradient.radial) return `radial-gradient(circle, ${stops.join(", ")})`;
+        else return `linear-gradient(${position2Angle(destination, origin)}deg, ${stops.join(", ")})`;
+    }
+
+    function extractGradient(color) {
+        if (!color || !color.gradient) return {};
+        return {
+            gradient: color.gradient,
+            origin: color.origin || "",
+            destination: color.destination || color.highlight || ""
+        };
+    }
+
+    function decodeSelectedGrad(item, draggableDiv, settingsDiv) {
+        const { gradient, origin, destination } = extractGradient(item[modalStorage.path]);
+        if (!gradient || !origin || !destination) return draggableDiv.append(createDraggable(), createDraggable());
+
+        // create draggables
+        const newStops = gradient.stops.map((s, i) => {
+            // "offset" will be undefined when using Scratch gradients, which dont have set-stops
+            const alpha = Math.round(s.color.alpha * 255).toString(16).padStart(2, "0");
+            return createDraggable(s.color.toCSS(true) + alpha, s.offset ? s.offset * 100 : i * 100)
+        });
+        draggableDiv.append(...newStops);
+
+        // preset values
+        const angle = position2Angle(destination, origin);
+        settingsDiv.querySelector("select").value = gradient.radial ? "Radial" : "Linear";
+        settingsDiv.querySelector("input").value = angle;
+        modalStorage.type = gradient.radial ? "Radial" : "Linear";
+        modalStorage.dir = angle;
+    }
+
+    function decodeFromCache(settings, draggableDiv, settingsDiv) {
+        // create draggables
+        const newStops = settings.parts.map((s, i) => {
+            // "p" will be NaN when using Scratch gradients, which dont have set-stops
+            return createDraggable(s.c, isNaN(s.p) ? i * 100 : s.p)
+        });
+        draggableDiv.append(...newStops);
+
+        // preset values
+        settingsDiv.querySelector("select").value = settings.type;
+        settingsDiv.querySelector("input").value = settings.dir;
+        modalStorage.type = settings.type;
+        modalStorage.dir = settings.dir;
+    }
+
+    function handleFillEvent() {
+        if (!modalStorage._gradCache) return;
+
+        // set the swatch color in case the GUI resets it
+        const swatch = document.querySelector(`div[class^=color-button_color-button_] div[class^=color-button_color-button-swatch_]`);
+        if (swatch) queueMicrotask(() => {
+            if (!modalStorage._gradCache) return;
+            swatch.style.background = encodeGradHTML(modalStorage._gradCache.settings);
+        });
+
+        const tool = paper.tool;
+        if (typeof tool?._getFillItem !== "function") return;
+
+        const item = tool._getFillItem();
+        if (!item) return;
+
+        const bounds = item.bounds;
+        let origin, destination;
+        if (modalStorage.type === "Radial") {
+            origin = new paper.Point(tool._point.x, tool._point.y);
+            destination = origin.add([Math.max(bounds.width, bounds.height) / 2, 0]);
+        } else {
+            const points = genLinearGradPoints(bounds, modalStorage.dir - 90);
+            origin = points.origin;
+            destination = points.destination;
+        }
+
+        const path = tool.fillProperty === "fill" ? "fillColor" : "strokeColor";
+        item[path] = {
+            gradient: modalStorage._gradCache.gradient,
+            origin, destination
+        };
+    }
+
+    function handleShapeModeEvent(type) {
+        if (!modalStorage._gradCache && type !== "TEXT") return;
+
+        // set the swatch color in case the GUI resets it
+        const swatch = document.querySelector(`div[class^=color-button_color-button_] div[class^=color-button_color-button-swatch_]`);
+        if (swatch) queueMicrotask(() => {
+            if (!modalStorage._gradCache) return;
+            swatch.style.background = encodeGradHTML(modalStorage._gradCache.settings);
+        });
+
+        const tool = paper.tool;
+        if (typeof tool?._onMouseDrag !== "function") return;
+        if (tool[symbolTag]) return;
+        // patch this event, if not already, to run our code
+
+        const funcName = type === "TEXT" ? "onKeyDown" : "onMouseDrag";
+        const ogOnFunc = tool[funcName];
+        tool[symbolTag] = true;
+        tool[funcName] = function (...args) {
+            ogOnFunc.call(this, ...args);
+
+            // replace the fill with the custom gradient
+            if (!modalStorage._gradCache) {
+                if (type === "TEXT") {
+                    tool.element.style.background = "";
+                    tool.element.style.backgroundClip = "";
+                    tool.element.style.color = "";
+                }
+                return;
+            }
+
+            let item;
+            switch (type) {
+                case "RECT":
+                    item = this.rect;
+                    break;
+                case "OVAL":
+                    item = this.oval;
+                    break;
+                case "TEXT":
+                    item = this.textBox;
+                    break;
+                /* PenguinMod shapes */
+                case "ROUNDED_RECT":
+                    item = this.rect;
+                    break;
+                case "TRIANGLE":
+                    item = this.tri;
+                    break;
+                case "SUSSY":
+                    item = this.sussy;
+                    break;
+                case "ARROW":
+                    item = this.tri;
+                    break;
+                default: return;
+            }
+            if (!item) return;
+            const bounds = item.bounds;
+            let origin, destination;
+            if (modalStorage.type === "Radial") {
+                origin = item.bounds.center;
+                destination = item.bounds.center.add([item.bounds.width / 2, 0]);
+            } else {
+                const points = genLinearGradPoints(bounds, modalStorage.dir - 90);
+                origin = points.origin;
+                destination = points.destination;
+            }
+
+            item.fillColor = {
+                gradient: modalStorage._gradCache.gradient,
+                origin, destination
+            };
+
+            // text uses HTML elements, so we have to handle that too
+            if (type === "TEXT") {
+                tool.element.style.background = encodeGradHTML(modalStorage._gradCache.settings);
+                tool.element.style.backgroundClip = "text";
+                tool.element.style.color = "transparent";
+            }
+        }
+    }
+
+    /* GUI Utils */
+    function getButtonURI(name, dontCompile) {
+        const themeHex = isPM ? "#00c3ff" : document.documentElement.style.getPropertyValue("--looks-secondary") || "#ff4c4c";
+        const guiSVG = guiIMGS[name].replace("red", themeHex);
+        if (dontCompile) return guiSVG;
+        else return "data:image/svg+xml;base64," + btoa(guiSVG);
+    }
+
+    function showSelectedGrad(item) {
+        const [fillSwatch, outlineSwatch] = document.querySelectorAll(`div[class^=color-button_color-button_] div[class^=color-button_color-button-swatch_]`);
+        const outCSSGrad = paperGrad2CSS(extractGradient(item.strokeColor));
+        if (outlineSwatch) {
+            if (outCSSGrad) outlineSwatch.style.background = outCSSGrad;
+            else if (!item.strokeColor || item.strokeWidth === 0) outlineSwatch.style.background = "#fff";
+        }
+
+        const fillGrad = extractGradient(item.fillColor);
+        const fillCSSGrad = paperGrad2CSS(fillGrad);
+        modalStorage._gradCache = undefined;
+        if (fillSwatch) {
+            if (fillCSSGrad) {
+                fillSwatch.style.background = fillCSSGrad;
+
+                // update cache
+                const { gradient, destination, origin } = fillGrad;
+                modalStorage._gradCache = {
+                    gradient,
+                    settings: {
+                        type: gradient.radial ? "Radial" : "Linear",
+                        dir: position2Angle(destination, origin),
+                        parts: gradient.stops.map(s => {
+                            const alpha = Math.round(s.color.alpha * 255).toString(16).padStart(2, "0");
+                            return { c: s.color.toCSS(true) + alpha, p: s.offset * 100 };
+                        })
+                    }
+                };
+            } else if (!item.fillColor) fillSwatch.style.background = "#fff";
+        }
+    }
+
+    function createDraggable(optC, optP) {
+        const index = modalStorage.parts.length;
+        const rngPos = optP ?? Math.floor(Math.random() * 100);
+        const rngHex = optC ?? `#${Math.floor(Math.random() * Math.pow(2, 24)).toString(16).padStart(6, "0")}`;
+        const opacity = optC ? optC.length === 9 ? parseInt(optC.slice(7, 9), 16) / 255 : 1 : 1;
+  
+        const draggable = document.createElement("div");
+        draggable.id = index;
+        draggable.classList.add("pointer");
+        draggable.setAttribute("style", `cursor: pointer; width: 25px; position: absolute; top: -6px; transform: translateX(-50%);`);
+        draggable.style.left = `${rngPos}%`;
+
+        const nub = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        nub.setAttribute("width", "14");
+        nub.setAttribute("height", "7");
+        nub.style.transform = "translateX(45%)";
+
+        const polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+        polygon.setAttribute("points", "0,7 7,0 14,7");
+        polygon.setAttribute("stroke", "#fff");
+        polygon.setAttribute("fill", "#fff");
+        nub.appendChild(polygon);
+
+        const color = document.createElement("div");
+        color.setAttribute("style", `width: 25px; height: 25px; border-radius: 4px; background: #fff; display: flex; justify-content: center; align-items: center; flex-direction: column;`);
+
+        const colorContainer = document.createElement("div");
+        colorContainer.setAttribute("style", `width: 16px; height: 16px; border-radius: 5px; background: ${rngHex}; border: solid 2px rgba(0,0,0,.2); opacity: ${opacity}; margin-bottom: 2px;`);
+
+        const colorInput = document.createElement("input");
+        colorInput.setAttribute("type", "color");
+        colorInput.setAttribute("style", `opacity: 0; position: absolute; pointer-events: none;`);
+
+        const opacityInput = document.createElement("input");
+        opacityInput.setAttribute("type", "number");
+        opacityInput.setAttribute("min", "0");
+        opacityInput.setAttribute("max", "100");
+        opacityInput.value = opacity * 100;
+        opacityInput.setAttribute("style", `visibility: hidden; background: #fff; border: none; color: #000; text-align: center; position: absolute; pointer-events: auto; width: 45px; height: 25px; padding: 0; margin: 0; border-radius: 0 5px 5px 0; left: 22px;`);
+
+        // Color picker handler
+        colorContainer.addEventListener("click", (e) => {
+            opacityInput.style.visibility = "visible";
+            colorInput.click();
+            e.stopPropagation();
+        });
+        draggable.addEventListener("mouseleave", (e) => {
+            opacityInput.style.visibility = "hidden";
+            e.stopPropagation();
+        });
+
+        colorInput.addEventListener("input", (e) => {
+            modalStorage.parts[index].c = e.target.value;
+            colorContainer.style.background = e.target.value;
+            updateDisplay();
+        });
+
+        // Opacity slider handler
+        opacityInput.addEventListener("click", (e) => {
+            opacityInput.focus();
+            e.stopPropagation();
+        });
+        opacityInput.addEventListener("input", (e) => {
+            const newOpacity = Math.min(100, Math.max(0, e.target.value));
+            e.target.value = newOpacity;
+            colorContainer.style.opacity = newOpacity / 100;
+
+            const alpha = Math.round(newOpacity * 2.55).toString(16).padStart(2, "0");
+            const hex = modalStorage.parts[index].c;
+            modalStorage.parts[index].c = hex.substring(0, 7) + alpha;
+            updateDisplay();
+        });
+
+        draggable.addEventListener("mousedown", (e) => {
+            e.preventDefault();
+            if (e.target === opacityInput) return;
+
+            modalStorage.selectedPointer = draggable;
+            const container = draggable.parentElement;
+            const containerRect = container.getBoundingClientRect();
+
+            const onMouseMove = (moveEvent) => {
+                const x = moveEvent.clientX - containerRect.left;
+                const percent = Math.min(100, Math.max(0, (x / container.offsetWidth) * 100));
+                draggable.style.left = `${percent}%`;
+                modalStorage.parts[index].p = percent;
+                updateDisplay();
+            };
+
+            const onMouseUp = () => {
+                document.removeEventListener("mousemove", onMouseMove);
+                document.removeEventListener("mouseup", onMouseUp);
+            };
+
+            document.addEventListener("mousemove", onMouseMove);
+            document.addEventListener("mouseup", onMouseUp);
+        });
+
+        color.append(colorContainer, colorInput, opacityInput);
+        draggable.append(nub, color);
+        modalStorage.parts.push({ c: rngHex, p: rngPos });
+        modalStorage.selectedPointer = draggable;
+        return draggable;
+    }
+
+    function genSettingsTable(div) {
+        const btnStyle = `width: 35px; height: 35px; border: solid 2px var(--ui-black-transparent, hsla(0, 0%, 0%, 0.15)); border-radius: 5px; background: var(--paint-input-background, --ui-primary, #fff); transition: transform 0.2s;`;
+        const selectStlye = `cursor: pointer; height: 30px; margin: 5px; border: solid 2px var(--ui-black-transparent, hsla(0, 0%, 0%, 0.15)); border-radius: 5px; background: var(--ui-secondary, #fff);`;
+        const directionStyle = `text-align: center; width: 50px; height: 25px; margin: 5px; border: solid 2px var(--ui-black-transparent, hsla(0, 0%, 0%, 0.15)); border-radius: 5px; background: var(--ui-secondary, #fff);`;
+
+        const createBtn = document.createElement("button");
+        createBtn.setAttribute("style", btnStyle);
+        createBtn.setAttribute("onmouseover", `this.style.transform="scale(1.1)"`);
+        createBtn.setAttribute("onmouseout", `this.style.transform="scale(1)"`);
+        createBtn.innerHTML = getButtonURI("add", true);
+        createBtn.addEventListener("click", (e) => {
+            const draggableSpace = modalStorage.modal.querySelector(`div[class="draggables"]`);
+            draggableSpace.appendChild(createDraggable());
+            updateDisplay();
+            e.stopPropagation();
+        });
+
+        const deleteBtn = document.createElement("button");
+        deleteBtn.setAttribute("style", btnStyle);
+        deleteBtn.setAttribute("onmouseover", `this.style.transform="scale(1.1)"`);
+        deleteBtn.setAttribute("onmouseout", `this.style.transform="scale(1)"`);
+        deleteBtn.style.margin = "0px 8px";
+        deleteBtn.innerHTML = getButtonURI("delete", true);
+        deleteBtn.addEventListener("click", (e) => {
+            const pointer = modalStorage.selectedPointer;
+            if (pointer) {
+                modalStorage.parts.splice(pointer.id, 1);
+                pointer.remove();
+                updateDisplay();
+                delete modalStorage.selectedPointer;
+            }
+            e.stopPropagation();
+        });
+
+        const title1 = document.createElement("span");
+        title1.textContent = "Gradient Type:";
+
+        const select = document.createElement("select");
+        select.setAttribute("style", selectStlye);
+
+        const option1 = document.createElement("option");
+        const option2 = document.createElement("option");
+        option1.text = "Linear"; option1.value = "Linear";
+        option2.text = "Radial"; option2.value = "Radial";
+        select.append(option1, option2);
+        select.addEventListener("change", (e) => {
+            modalStorage.type = e.target.value;
+            updateDisplay();
+            e.stopPropagation();
+        });
+
+        const title2 = document.createElement("span");
+        title2.textContent = "Direction:";
+
+        const dirBtn = document.createElement("input");
+        dirBtn.setAttribute("style", directionStyle);
+        dirBtn.setAttribute("type", "number");
+        dirBtn.setAttribute("max", 360);
+        dirBtn.setAttribute("min", 0);
+        dirBtn.setAttribute("value", 90);
+        dirBtn.addEventListener("input", (e) => {
+            modalStorage.dir = e.target.value;
+            updateDisplay();
+            e.stopPropagation();
+        });
+
+        div.append(createBtn, deleteBtn, title1, select, title2, dirBtn);
+    }
+
+    function genButtonTable(div) {
+        const themeHex = isPM ? "#00c3ff" : document.documentElement.style.getPropertyValue("--looks-secondary") || "#ff4c4c";
+        const btnStyle = `color: #fff; font-weight: 600; text-align: center; padding: 10px; margin: 10px 5px; border: solid 2px var(--ui-black-transparent, hsla(0, 0%, 0%, 0.15)); border-radius: 5px; background: ${themeHex}; transition: transform 0.2s;`;
+
+        const enterBtn = document.createElement("button");
+        enterBtn.id = "enter";
+        enterBtn.setAttribute("style", btnStyle);
+        enterBtn.setAttribute("onmouseover", `this.style.transform="scale(1.1)"`);
+        enterBtn.setAttribute("onmouseout", `this.style.transform="scale(1)"`);
+        enterBtn.textContent = "Okay";
+
+        const cancelBtn = document.createElement("button");
+        cancelBtn.id = "cancel";
+        cancelBtn.setAttribute("style", btnStyle);
+        cancelBtn.setAttribute("onmouseover", `this.style.transform="scale(1.1)"`);
+        cancelBtn.setAttribute("onmouseout", `this.style.transform="scale(1)"`);
+        cancelBtn.textContent = "Cancel";
+
+        div.append(cancelBtn, enterBtn);
+    }
+
+    function updateDisplay() {
+        const display = modalStorage.modal.querySelector(`div[class="color-display"]`);
+        display.style.background = encodeGradHTML(modalStorage);
+    }
+
+    /* Main GUI */
+    function openGradientMaker() {
+        const paint = ReduxStore.getState().scratchPaint;
+        const oldCache = modalStorage._gradCache;
+        modalStorage = {
+            parts: [], type: "Linear", dir: 90,
+            selectedPointer: undefined, modal: undefined,
+            path: paint.modals.fillColor ? "fillColor" : "strokeColor"
+        };
+
+        const container = document.createElement("div");
+        container.classList.add("SP-gradient-maker");
+        container.setAttribute("style", `position: absolute; z-index: 9999; pointer-events: auto; background-color: rgba(0,0,0,.1); width: 100%; height: 100vh;`);
+
+        const modal = document.createElement("div");
+        modal.classList.add("gradient-modal");
+        modal.setAttribute("style", `color: var(--paint-text-primary, #575e75); width: 450px; height: 260px; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--ui-secondary, hsla(215, 75%, 95%, 1)); border: solid 2px var(--ui-black-transparent, hsla(0, 0%, 0%, 0.15)); border-radius: 5px; padding: 15px;`);
+        modalStorage.modal = modal;
+
+        const title = document.createElement("span");
+        title.setAttribute("style", `display: block; text-align: center; justify-content: center; border-bottom: solid 2px var(--ui-black-transparent, hsla(0, 0%, 0%, 0.15)); padding-bottom: 10px; margin: 0 25px 0 25px; font-weight: 600;"`);
+        title.textContent = "Gradient Maker";
+
+        const display = document.createElement("div");
+        display.classList.add("color-display");
+        display.setAttribute("style", `width: 420px; height: 40px; display: flex; justify-content: center; align-items: center; margin: 15px 15px 0 15px; border: solid 2px grey; border-radius: 5px 5px 0 0;`);
+
+        const draggables = document.createElement("div");
+        draggables.classList.add("draggables");
+        draggables.setAttribute("style", `width: 420px; height: 40px; position: relative; display: flex; justify-content: center; align-items: center; margin: 0 15px 15px 15px; border: solid 2px grey; border-radius: 0 0 5px 5px; background: #111111;`);
+
+        const settings = document.createElement("div");
+        settings.classList.add("settings");
+        settings.setAttribute("style", `border-top: dashed 2px var(--ui-black-transparent, hsla(0, 0%, 0%, 0.15)); padding-top: 10px; display: flex; justify-content: center; align-items: center;`);
+        genSettingsTable(settings);
+
+        const buttons = document.createElement("div");
+        buttons.setAttribute("style", `display: flex; justify-content: center; align-items: center;`);
+        genButtonTable(buttons);
+        buttons.addEventListener("click", (e) => {
+            if (e.target.id) {
+                if (e.target.id === "enter") setSelected2Grad(modalStorage);
+                container.remove();
+            }
+            e.stopPropagation();
+        });
+
+        modal.append(title, display, draggables, settings, buttons);
+        container.appendChild(modal);
+        document.body.appendChild(container);
+
+        if (paint.selectedItems?.length) decodeSelectedGrad(paint.selectedItems[0], draggables, settings);
+        else if (oldCache) decodeFromCache(oldCache.settings, draggables, settings);
+        else draggables.append(createDraggable(), createDraggable());
+        updateDisplay();
+    }
+
+    function startListenerWorker() {
+        let lastMode, lastSelected, lastModals;
+        ReduxStore.subscribe(() => {
+            const paint = ReduxStore.getState().scratchPaint;
+            if (!paint || paint?.format === undefined || paint?.format === null) return;
+            const { mode, selectedItems, modals } = paint;
+
+            // no bitmap support :(
+            if (paint.format.startsWith("BITMAP")) {
+                if (customBtn) {
+                    customBtn.remove();
+                    customBtn = undefined;
+                }
+                return;
+            }
+
+            // run relative tool events
+            if (mode === "FILL") handleFillEvent();
+            else if (paperLinkModes.has(mode)) handleShapeModeEvent(mode);
+
+            const idChain = selectedItems.map((e) => e.id).join(".");
+            const modalChain = `${modals.fillColor}${modals.strokeColor}`;
+            if (mode === lastMode && idChain === lastSelected && modalChain === lastModals) return;
+            lastMode = mode;
+            lastSelected = idChain;
+            lastModals = modalChain;
+
+            // decode potential custom gradients
+            if (selectedItems?.length) showSelectedGrad(selectedItems[0]);
+            else if (mode === "SELECT" || mode === "RESHAPE") modalStorage._gradCache = undefined;
+
+            // add custom modal
+            if (!modals.strokeColor && !modals.fillColor) return;
+            if (observerUsed) return;
+            const observer = new MutationObserver(() => {
+                const gradRow = document.querySelector(`div[class^="color-picker_gradient-picker-row_"]`);
+                if (!gradRow || gradRow.lastElementChild.id === customID) return;
+
+                // get the appropriate class names for selected items
+                if (!selectedClassName) initGradSelectClasses(gradRow);
+                const children = Array.from(gradRow.children);
+
+                customBtn = children[0].cloneNode(true);
+                customBtn.src = getButtonURI("select");
+                customBtn.id = customID;
+                customBtn.setAttribute("class", unselectedClassName);
+                gradRow.appendChild(customBtn);
+
+                gradRow.addEventListener("click", (e) => {
+                    if (e.target === customBtn) {
+                        for (const child of children) child.setAttribute("class", unselectedClassName);
+                        customBtn.setAttribute("class", selectedClassName);
+                        openGradientMaker();
+                    } else if (e.target.nodeName === "IMG") {
+                        customBtn.setAttribute("class", unselectedClassName);
+                    }
+                });
+
+                observerUsed = false;
+                observer.disconnect();
+            });
+
+            observer.observe(document.body, { childList: true, subtree: true });
+            observerUsed = true;
+        });
+    }
+
+    if (typeof scaffolding === "undefined") startListenerWorker();
+}// Gradient Maker Addon
+// By: SharkPool
+export default async function () {
+    const isPM = true;
+    const customID = "custom-gradient-btn";
+    const symbolTag = Symbol("custom-gradient-tag");
+    const guiIMGS = {
+        "select": `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><rect stroke="#000" fill="#fff" x=".5" y=".5" width="19" height="19" rx="4" stroke-opacity=".15"/><path fill="red" d="M13.35 8.8h-2.4V6.4a1.2 1.2 90 0 0-2.4 0l.043 2.4H6.15a1.2 1.2 90 0 0 0 2.4l2.443-.043L8.55 13.6a1.2 1.2 90 0 0 2.4 0v-2.443l2.4.043a1.2 1.2 90 0 0 0-2.4"/></svg>`,
+        "add": `<svg viewBox="2 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill="red" d="M18 10h-4V6a2 2 0 0 0-4 0l.071 4H6a2 2 0 0 0 0 4l4.071-.071L10 18a2 2 0 0 0 4 0v-4.071L18 14a2 2 0 0 0 0-4"></path></svg>`,
+        "delete": `<svg viewBox="2 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill="red" d="M 18 10 h -4 H 6 a 2 2 0 0 0 0 4 L 18 14 a 2 2 0 0 0 0 -4"></path></svg>`,
+    };
+
+    const paperLinkModes = new Set([
+        "TEXT", "OVAL", "RECT",
+        ...(isPM ? ["ROUNDED_RECT", "TRIANGLE", "SUSSY", "ARROW"] : [])
+    ]);
+
+    let selectedClassName, unselectedClassName, customBtn;
+    let observerUsed = false;
+    let modalStorage = {};
+
+    /* Internal Utils */
+    function position2Angle(p1, p2) {
+        const dx = p1.x - p2.x;
+        const dy = p1.y - p2.y;
+        const angle = Math.atan2(dy, dx) * (180 / Math.PI);
+        return angle + 90;
+    }
+
+    function initGradSelectClasses(gradRow) {
+        const classes = {};
+        const children = Array.from(gradRow.children);
+        for (const child of children) {
+            const name = child.classList.toString();
+            if (classes[name] === undefined) classes[name] = 1;
+            else classes[name] = 0;
+        }
+
+        for (const [cls, count] of Object.entries(classes)) {
+            if (count) selectedClassName = cls;
+            else unselectedClassName = cls
+        }
+    }
+
+    function encodeGradHTML(settings) {
+        const sortedParts = [...settings.parts].sort((a, b) => a.p - b.p);
+
+        let gradString = settings.type === "Linear" ? "linear-gradient(" : "radial-gradient(";
+        if (settings.type === "Linear") gradString += `${settings.dir}deg, `;
+        for (const part of sortedParts) gradString += `${part.c} ${part.p}%, `;
+        return gradString.substring(0, gradString.length - 2) + ")";
+    }
+
+    function genLinearGradPoints(bounds, angleDeg) {
+        const center = bounds.center;
+        const dir = new paper.Point({ angle: angleDeg, length: 1 });
+        const boundsRect = new paper.Path.Rectangle(bounds);
+        const gradLine = new paper.Path.Line({
+            from: center.subtract(dir.multiply(10000)),
+            to: center.add(dir.multiply(10000))
+        });
+
+        const intersections = gradLine.getIntersections(boundsRect);
+        gradLine.remove();
+        boundsRect.remove();
+        if (intersections.length < 2) {
+            return {
+                origin: center.subtract(dir.multiply(bounds.width / 2)),
+                destination: center.add(dir.multiply(bounds.width / 2))
+            };
+        } else {
+            return {
+                origin: intersections[0].point,
+                destination: intersections[1].point
+            };
+        }
+    }
+
+    function setSelected2Grad(settings) {
+        // compile SVG-based gradient
+        const sortedParts = [...settings.parts].sort((a, b) => a.p - b.p);
+        const gradStops = sortedParts.map(part => new paper.GradientStop(part.c, part.p / 100));
+        const gradient = new paper.Gradient(gradStops, settings.type === "Radial");
+        modalStorage._gradCache = { settings, gradient };
+
+        paper.project.getSelectedItems().forEach((item) => {
+            let origin, destination;
+            if (settings.type === "Radial") {
+                origin = item.bounds.center;
+                destination = item.bounds.center.add([item.bounds.width / 2, 0]);
+            } else {
+                const points = genLinearGradPoints(item.bounds, settings.dir - 90);
+                origin = points.origin;
+                destination = points.destination;
+            }
+
+            item[settings.path] = { gradient, origin, destination };
+        });
+
+        // update drawing & action
+        if (paper.tool.onUpdateImage) paper.tool.onUpdateImage();
+
+        // set with html otherwise GUI will crash
+        const swatch = document.querySelectorAll(
+            `div[class^=color-button_color-button_] div[class^=color-button_color-button-swatch_]`
+        )[settings.path === "fillColor" ? 0 : 1];
+        if (swatch) swatch.style.background = encodeGradHTML(settings);
+    }
+
+    function paperGrad2CSS(paperGrad) {
+        const { gradient, origin, destination } = paperGrad;
+        if (!gradient || !origin || !destination) return null;
+
+        const stops = gradient.stops.map(s => `${s.color.toCSS(true)} ${Math.round(s.offset * 100)}%`);
+        if (gradient.radial) return `radial-gradient(circle, ${stops.join(", ")})`;
+        else return `linear-gradient(${position2Angle(destination, origin)}deg, ${stops.join(", ")})`;
+    }
+
+    function extractGradient(color) {
+        if (!color || !color.gradient) return {};
+        return {
+            gradient: color.gradient,
+            origin: color.origin || "",
+            destination: color.destination || color.highlight || ""
+        };
+    }
+
+    function decodeSelectedGrad(item, draggableDiv, settingsDiv) {
+        const { gradient, origin, destination } = extractGradient(item[modalStorage.path]);
+        if (!gradient || !origin || !destination) return draggableDiv.append(createDraggable(), createDraggable());
+
+        // create draggables
+        const newStops = gradient.stops.map((s, i) => {
+            // "offset" will be undefined when using Scratch gradients, which dont have set-stops
+            const alpha = Math.round(s.color.alpha * 255).toString(16).padStart(2, "0");
+            return createDraggable(s.color.toCSS(true) + alpha, s.offset ? s.offset * 100 : i * 100)
+        });
+        draggableDiv.append(...newStops);
+
+        // preset values
+        const angle = position2Angle(destination, origin);
+        settingsDiv.querySelector("select").value = gradient.radial ? "Radial" : "Linear";
+        settingsDiv.querySelector("input").value = angle;
+        modalStorage.type = gradient.radial ? "Radial" : "Linear";
+        modalStorage.dir = angle;
+    }
+
+    function decodeFromCache(settings, draggableDiv, settingsDiv) {
+        // create draggables
+        const newStops = settings.parts.map((s, i) => {
+            // "p" will be NaN when using Scratch gradients, which dont have set-stops
+            return createDraggable(s.c, isNaN(s.p) ? i * 100 : s.p)
+        });
+        draggableDiv.append(...newStops);
+
+        // preset values
+        settingsDiv.querySelector("select").value = settings.type;
+        settingsDiv.querySelector("input").value = settings.dir;
+        modalStorage.type = settings.type;
+        modalStorage.dir = settings.dir;
+    }
+
+    function handleFillEvent() {
+        if (!modalStorage._gradCache) return;
+
+        // set the swatch color in case the GUI resets it
+        const swatch = document.querySelector(`div[class^=color-button_color-button_] div[class^=color-button_color-button-swatch_]`);
+        if (swatch) queueMicrotask(() => {
+            if (!modalStorage._gradCache) return;
+            swatch.style.background = encodeGradHTML(modalStorage._gradCache.settings);
+        });
+
+        const tool = paper.tool;
+        if (typeof tool?._getFillItem !== "function") return;
+
+        const item = tool._getFillItem();
+        if (!item) return;
+
+        const bounds = item.bounds;
+        let origin, destination;
+        if (modalStorage.type === "Radial") {
+            origin = new paper.Point(tool._point.x, tool._point.y);
+            destination = origin.add([Math.max(bounds.width, bounds.height) / 2, 0]);
+        } else {
+            const points = genLinearGradPoints(bounds, modalStorage.dir - 90);
+            origin = points.origin;
+            destination = points.destination;
+        }
+
+        const path = tool.fillProperty === "fill" ? "fillColor" : "strokeColor";
+        item[path] = {
+            gradient: modalStorage._gradCache.gradient,
+            origin, destination
+        };
+    }
+
+    function handleShapeModeEvent(type) {
+        if (!modalStorage._gradCache && type !== "TEXT") return;
+
+        // set the swatch color in case the GUI resets it
+        const swatch = document.querySelector(`div[class^=color-button_color-button_] div[class^=color-button_color-button-swatch_]`);
+        if (swatch) queueMicrotask(() => {
+            if (!modalStorage._gradCache) return;
+            swatch.style.background = encodeGradHTML(modalStorage._gradCache.settings);
+        });
+
+        const tool = paper.tool;
+        if (typeof tool?._onMouseDrag !== "function") return;
+        if (tool[symbolTag]) return;
+        // patch this event, if not already, to run our code
+
+        const funcName = type === "TEXT" ? "onKeyDown" : "onMouseDrag";
+        const ogOnFunc = tool[funcName];
+        tool[symbolTag] = true;
+        tool[funcName] = function (...args) {
+            ogOnFunc.call(this, ...args);
+
+            // replace the fill with the custom gradient
+            if (!modalStorage._gradCache) {
+                if (type === "TEXT") {
+                    tool.element.style.background = "";
+                    tool.element.style.backgroundClip = "";
+                    tool.element.style.color = "";
+                }
+                return;
+            }
+
+            let item;
+            switch (type) {
+                case "RECT":
+                    item = this.rect;
+                    break;
+                case "OVAL":
+                    item = this.oval;
+                    break;
+                case "TEXT":
+                    item = this.textBox;
+                    break;
+                /* PenguinMod shapes */
+                case "ROUNDED_RECT":
+                    item = this.rect;
+                    break;
+                case "TRIANGLE":
+                    item = this.tri;
+                    break;
+                case "SUSSY":
+                    item = this.sussy;
+                    break;
+                case "ARROW":
+                    item = this.tri;
+                    break;
+                default: return;
+            }
+            if (!item) return;
+            const bounds = item.bounds;
+            let origin, destination;
+            if (modalStorage.type === "Radial") {
+                origin = item.bounds.center;
+                destination = item.bounds.center.add([item.bounds.width / 2, 0]);
+            } else {
+                const points = genLinearGradPoints(bounds, modalStorage.dir - 90);
+                origin = points.origin;
+                destination = points.destination;
+            }
+
+            item.fillColor = {
+                gradient: modalStorage._gradCache.gradient,
+                origin, destination
+            };
+
+            // text uses HTML elements, so we have to handle that too
+            if (type === "TEXT") {
+                tool.element.style.background = encodeGradHTML(modalStorage._gradCache.settings);
+                tool.element.style.backgroundClip = "text";
+                tool.element.style.color = "transparent";
+            }
+        }
+    }
+
+    /* GUI Utils */
+    function getButtonURI(name, dontCompile) {
+        const themeHex = isPM ? "#00c3ff" : document.documentElement.style.getPropertyValue("--looks-secondary") || "#ff4c4c";
+        const guiSVG = guiIMGS[name].replace("red", themeHex);
+        if (dontCompile) return guiSVG;
+        else return "data:image/svg+xml;base64," + btoa(guiSVG);
+    }
+
+    function showSelectedGrad(item) {
+        const [fillSwatch, outlineSwatch] = document.querySelectorAll(`div[class^=color-button_color-button_] div[class^=color-button_color-button-swatch_]`);
+        const outCSSGrad = paperGrad2CSS(extractGradient(item.strokeColor));
+        if (outlineSwatch) {
+            if (outCSSGrad) outlineSwatch.style.background = outCSSGrad;
+            else if (!item.strokeColor || item.strokeWidth === 0) outlineSwatch.style.background = "#fff";
+        }
+
+        const fillGrad = extractGradient(item.fillColor);
+        const fillCSSGrad = paperGrad2CSS(fillGrad);
+        modalStorage._gradCache = undefined;
+        if (fillSwatch) {
+            if (fillCSSGrad) {
+                fillSwatch.style.background = fillCSSGrad;
+
+                // update cache
+                const { gradient, destination, origin } = fillGrad;
+                modalStorage._gradCache = {
+                    gradient,
+                    settings: {
+                        type: gradient.radial ? "Radial" : "Linear",
+                        dir: position2Angle(destination, origin),
+                        parts: gradient.stops.map(s => {
+                            const alpha = Math.round(s.color.alpha * 255).toString(16).padStart(2, "0");
+                            return { c: s.color.toCSS(true) + alpha, p: s.offset * 100 };
+                        })
+                    }
+                };
+            } else if (!item.fillColor) fillSwatch.style.background = "#fff";
+        }
+    }
+
+    function createDraggable(optC, optP) {
+        const index = modalStorage.parts.length;
+        const rngPos = optP ?? Math.floor(Math.random() * 100);
+        const rngHex = optC ?? `#${Math.floor(Math.random() * Math.pow(2, 24)).toString(16).padStart(6, "0")}`;
+        const opacity = optC ? optC.length === 9 ? parseInt(optC.slice(7, 9), 16) / 255 : 1 : 1;
+  
+        const draggable = document.createElement("div");
+        draggable.id = index;
+        draggable.classList.add("pointer");
+        draggable.setAttribute("style", `cursor: pointer; width: 25px; position: absolute; top: -6px; transform: translateX(-50%);`);
+        draggable.style.left = `${rngPos}%`;
+
+        const nub = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        nub.setAttribute("width", "14");
+        nub.setAttribute("height", "7");
+        nub.style.transform = "translateX(45%)";
+
+        const polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+        polygon.setAttribute("points", "0,7 7,0 14,7");
+        polygon.setAttribute("stroke", "#fff");
+        polygon.setAttribute("fill", "#fff");
+        nub.appendChild(polygon);
+
+        const color = document.createElement("div");
+        color.setAttribute("style", `width: 25px; height: 25px; border-radius: 4px; background: #fff; display: flex; justify-content: center; align-items: center; flex-direction: column;`);
+
+        const colorContainer = document.createElement("div");
+        colorContainer.setAttribute("style", `width: 16px; height: 16px; border-radius: 5px; background: ${rngHex}; border: solid 2px rgba(0,0,0,.2); opacity: ${opacity}; margin-bottom: 2px;`);
+
+        const colorInput = document.createElement("input");
+        colorInput.setAttribute("type", "color");
+        colorInput.setAttribute("style", `opacity: 0; position: absolute; pointer-events: none;`);
+
+        const opacityInput = document.createElement("input");
+        opacityInput.setAttribute("type", "number");
+        opacityInput.setAttribute("min", "0");
+        opacityInput.setAttribute("max", "100");
+        opacityInput.value = opacity * 100;
+        opacityInput.setAttribute("style", `visibility: hidden; background: #fff; border: none; color: #000; text-align: center; position: absolute; pointer-events: auto; width: 45px; height: 25px; padding: 0; margin: 0; border-radius: 0 5px 5px 0; left: 22px;`);
+
+        // Color picker handler
+        colorContainer.addEventListener("click", (e) => {
+            opacityInput.style.visibility = "visible";
+            colorInput.click();
+            e.stopPropagation();
+        });
+        draggable.addEventListener("mouseleave", (e) => {
+            opacityInput.style.visibility = "hidden";
+            e.stopPropagation();
+        });
+
+        colorInput.addEventListener("input", (e) => {
+            modalStorage.parts[index].c = e.target.value;
+            colorContainer.style.background = e.target.value;
+            updateDisplay();
+        });
+
+        // Opacity slider handler
+        opacityInput.addEventListener("click", (e) => {
+            opacityInput.focus();
+            e.stopPropagation();
+        });
+        opacityInput.addEventListener("input", (e) => {
+            const newOpacity = Math.min(100, Math.max(0, e.target.value));
+            e.target.value = newOpacity;
+            colorContainer.style.opacity = newOpacity / 100;
+
+            const alpha = Math.round(newOpacity * 2.55).toString(16).padStart(2, "0");
+            const hex = modalStorage.parts[index].c;
+            modalStorage.parts[index].c = hex.substring(0, 7) + alpha;
+            updateDisplay();
+        });
+
+        draggable.addEventListener("mousedown", (e) => {
+            e.preventDefault();
+            if (e.target === opacityInput) return;
+
+            modalStorage.selectedPointer = draggable;
+            const container = draggable.parentElement;
+            const containerRect = container.getBoundingClientRect();
+
+            const onMouseMove = (moveEvent) => {
+                const x = moveEvent.clientX - containerRect.left;
+                const percent = Math.min(100, Math.max(0, (x / container.offsetWidth) * 100));
+                draggable.style.left = `${percent}%`;
+                modalStorage.parts[index].p = percent;
+                updateDisplay();
+            };
+
+            const onMouseUp = () => {
+                document.removeEventListener("mousemove", onMouseMove);
+                document.removeEventListener("mouseup", onMouseUp);
+            };
+
+            document.addEventListener("mousemove", onMouseMove);
+            document.addEventListener("mouseup", onMouseUp);
+        });
+
+        color.append(colorContainer, colorInput, opacityInput);
+        draggable.append(nub, color);
+        modalStorage.parts.push({ c: rngHex, p: rngPos });
+        modalStorage.selectedPointer = draggable;
+        return draggable;
+    }
+
+    function genSettingsTable(div) {
+        const btnStyle = `width: 35px; height: 35px; border: solid 2px var(--ui-black-transparent, hsla(0, 0%, 0%, 0.15)); border-radius: 5px; background: var(--paint-input-background, --ui-primary, #fff); transition: transform 0.2s;`;
+        const selectStlye = `cursor: pointer; height: 30px; margin: 5px; border: solid 2px var(--ui-black-transparent, hsla(0, 0%, 0%, 0.15)); border-radius: 5px; background: var(--ui-secondary, #fff);`;
+        const directionStyle = `text-align: center; width: 50px; height: 25px; margin: 5px; border: solid 2px var(--ui-black-transparent, hsla(0, 0%, 0%, 0.15)); border-radius: 5px; background: var(--ui-secondary, #fff);`;
+
+        const createBtn = document.createElement("button");
+        createBtn.setAttribute("style", btnStyle);
+        createBtn.setAttribute("onmouseover", `this.style.transform="scale(1.1)"`);
+        createBtn.setAttribute("onmouseout", `this.style.transform="scale(1)"`);
+        createBtn.innerHTML = getButtonURI("add", true);
+        createBtn.addEventListener("click", (e) => {
+            const draggableSpace = modalStorage.modal.querySelector(`div[class="draggables"]`);
+            draggableSpace.appendChild(createDraggable());
+            updateDisplay();
+            e.stopPropagation();
+        });
+
+        const deleteBtn = document.createElement("button");
+        deleteBtn.setAttribute("style", btnStyle);
+        deleteBtn.setAttribute("onmouseover", `this.style.transform="scale(1.1)"`);
+        deleteBtn.setAttribute("onmouseout", `this.style.transform="scale(1)"`);
+        deleteBtn.style.margin = "0px 8px";
+        deleteBtn.innerHTML = getButtonURI("delete", true);
+        deleteBtn.addEventListener("click", (e) => {
+            const pointer = modalStorage.selectedPointer;
+            if (pointer) {
+                modalStorage.parts.splice(pointer.id, 1);
+                pointer.remove();
+                updateDisplay();
+                delete modalStorage.selectedPointer;
+            }
+            e.stopPropagation();
+        });
+
+        const title1 = document.createElement("span");
+        title1.textContent = "Gradient Type:";
+
+        const select = document.createElement("select");
+        select.setAttribute("style", selectStlye);
+
+        const option1 = document.createElement("option");
+        const option2 = document.createElement("option");
+        option1.text = "Linear"; option1.value = "Linear";
+        option2.text = "Radial"; option2.value = "Radial";
+        select.append(option1, option2);
+        select.addEventListener("change", (e) => {
+            modalStorage.type = e.target.value;
+            updateDisplay();
+            e.stopPropagation();
+        });
+
+        const title2 = document.createElement("span");
+        title2.textContent = "Direction:";
+
+        const dirBtn = document.createElement("input");
+        dirBtn.setAttribute("style", directionStyle);
+        dirBtn.setAttribute("type", "number");
+        dirBtn.setAttribute("max", 360);
+        dirBtn.setAttribute("min", 0);
+        dirBtn.setAttribute("value", 90);
+        dirBtn.addEventListener("input", (e) => {
+            modalStorage.dir = e.target.value;
+            updateDisplay();
+            e.stopPropagation();
+        });
+
+        div.append(createBtn, deleteBtn, title1, select, title2, dirBtn);
+    }
+
+    function genButtonTable(div) {
+        const themeHex = isPM ? "#00c3ff" : document.documentElement.style.getPropertyValue("--looks-secondary") || "#ff4c4c";
+        const btnStyle = `color: #fff; font-weight: 600; text-align: center; padding: 10px; margin: 10px 5px; border: solid 2px var(--ui-black-transparent, hsla(0, 0%, 0%, 0.15)); border-radius: 5px; background: ${themeHex}; transition: transform 0.2s;`;
+
+        const enterBtn = document.createElement("button");
+        enterBtn.id = "enter";
+        enterBtn.setAttribute("style", btnStyle);
+        enterBtn.setAttribute("onmouseover", `this.style.transform="scale(1.1)"`);
+        enterBtn.setAttribute("onmouseout", `this.style.transform="scale(1)"`);
+        enterBtn.textContent = "Okay";
+
+        const cancelBtn = document.createElement("button");
+        cancelBtn.id = "cancel";
+        cancelBtn.setAttribute("style", btnStyle);
+        cancelBtn.setAttribute("onmouseover", `this.style.transform="scale(1.1)"`);
+        cancelBtn.setAttribute("onmouseout", `this.style.transform="scale(1)"`);
+        cancelBtn.textContent = "Cancel";
+
+        div.append(cancelBtn, enterBtn);
+    }
+
+    function updateDisplay() {
+        const display = modalStorage.modal.querySelector(`div[class="color-display"]`);
+        display.style.background = encodeGradHTML(modalStorage);
+    }
+
+    /* Main GUI */
+    function openGradientMaker() {
+        const paint = ReduxStore.getState().scratchPaint;
+        const oldCache = modalStorage._gradCache;
+        modalStorage = {
+            parts: [], type: "Linear", dir: 90,
+            selectedPointer: undefined, modal: undefined,
+            path: paint.modals.fillColor ? "fillColor" : "strokeColor"
+        };
+
+        const container = document.createElement("div");
+        container.classList.add("SP-gradient-maker");
+        container.setAttribute("style", `position: absolute; z-index: 9999; pointer-events: auto; background-color: rgba(0,0,0,.1); width: 100%; height: 100vh;`);
+
+        const modal = document.createElement("div");
+        modal.classList.add("gradient-modal");
+        modal.setAttribute("style", `color: var(--paint-text-primary, #575e75); width: 450px; height: 260px; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--ui-secondary, hsla(215, 75%, 95%, 1)); border: solid 2px var(--ui-black-transparent, hsla(0, 0%, 0%, 0.15)); border-radius: 5px; padding: 15px;`);
+        modalStorage.modal = modal;
+
+        const title = document.createElement("span");
+        title.setAttribute("style", `display: block; text-align: center; justify-content: center; border-bottom: solid 2px var(--ui-black-transparent, hsla(0, 0%, 0%, 0.15)); padding-bottom: 10px; margin: 0 25px 0 25px; font-weight: 600;"`);
+        title.textContent = "Gradient Maker";
+
+        const display = document.createElement("div");
+        display.classList.add("color-display");
+        display.setAttribute("style", `width: 420px; height: 40px; display: flex; justify-content: center; align-items: center; margin: 15px 15px 0 15px; border: solid 2px grey; border-radius: 5px 5px 0 0;`);
+
+        const draggables = document.createElement("div");
+        draggables.classList.add("draggables");
+        draggables.setAttribute("style", `width: 420px; height: 40px; position: relative; display: flex; justify-content: center; align-items: center; margin: 0 15px 15px 15px; border: solid 2px grey; border-radius: 0 0 5px 5px; background: #111111;`);
+
+        const settings = document.createElement("div");
+        settings.classList.add("settings");
+        settings.setAttribute("style", `border-top: dashed 2px var(--ui-black-transparent, hsla(0, 0%, 0%, 0.15)); padding-top: 10px; display: flex; justify-content: center; align-items: center;`);
+        genSettingsTable(settings);
+
+        const buttons = document.createElement("div");
+        buttons.setAttribute("style", `display: flex; justify-content: center; align-items: center;`);
+        genButtonTable(buttons);
+        buttons.addEventListener("click", (e) => {
+            if (e.target.id) {
+                if (e.target.id === "enter") setSelected2Grad(modalStorage);
+                container.remove();
+            }
+            e.stopPropagation();
+        });
+
+        modal.append(title, display, draggables, settings, buttons);
+        container.appendChild(modal);
+        document.body.appendChild(container);
+
+        if (paint.selectedItems?.length) decodeSelectedGrad(paint.selectedItems[0], draggables, settings);
+        else if (oldCache) decodeFromCache(oldCache.settings, draggables, settings);
+        else draggables.append(createDraggable(), createDraggable());
+        updateDisplay();
+    }
+
+    function startListenerWorker() {
+        let lastMode, lastSelected, lastModals;
+        ReduxStore.subscribe(() => {
+            const paint = ReduxStore.getState().scratchPaint;
+            if (!paint || paint?.format === undefined || paint?.format === null) return;
+            const { mode, selectedItems, modals } = paint;
+
+            // no bitmap support :(
+            if (paint.format.startsWith("BITMAP")) {
+                if (customBtn) {
+                    customBtn.remove();
+                    customBtn = undefined;
+                }
+                return;
+            }
+
+            // run relative tool events
+            if (mode === "FILL") handleFillEvent();
+            else if (paperLinkModes.has(mode)) handleShapeModeEvent(mode);
+
+            const idChain = selectedItems.map((e) => e.id).join(".");
+            const modalChain = `${modals.fillColor}${modals.strokeColor}`;
+            if (mode === lastMode && idChain === lastSelected && modalChain === lastModals) return;
+            lastMode = mode;
+            lastSelected = idChain;
+            lastModals = modalChain;
+
+            // decode potential custom gradients
+            if (selectedItems?.length) showSelectedGrad(selectedItems[0]);
+            else if (mode === "SELECT" || mode === "RESHAPE") modalStorage._gradCache = undefined;
+
+            // add custom modal
+            if (!modals.strokeColor && !modals.fillColor) return;
+            if (observerUsed) return;
+            const observer = new MutationObserver(() => {
+                const gradRow = document.querySelector(`div[class^="color-picker_gradient-picker-row_"]`);
+                if (!gradRow || gradRow.lastElementChild.id === customID) return;
+
+                // get the appropriate class names for selected items
+                if (!selectedClassName) initGradSelectClasses(gradRow);
+                const children = Array.from(gradRow.children);
+
+                customBtn = children[0].cloneNode(true);
+                customBtn.src = getButtonURI("select");
+                customBtn.id = customID;
+                customBtn.setAttribute("class", unselectedClassName);
+                gradRow.appendChild(customBtn);
+
+                gradRow.addEventListener("click", (e) => {
+                    if (e.target === customBtn) {
+                        for (const child of children) child.setAttribute("class", unselectedClassName);
+                        customBtn.setAttribute("class", selectedClassName);
+                        openGradientMaker();
+                    } else if (e.target.nodeName === "IMG") {
+                        customBtn.setAttribute("class", unselectedClassName);
+                    }
+                });
+
+                observerUsed = false;
+                observer.disconnect();
+            });
+
+            observer.observe(document.body, { childList: true, subtree: true });
+            observerUsed = true;
+        });
+    }
+
+    if (typeof scaffolding === "undefined") startListenerWorker();
+}