@mevdragon/vidfarm-devcli 0.2.14 → 0.3.0

package/dist/src/template-editor-pages.js

@@ -1,2491 +0,0 @@
-import { renderBrandLockup, renderPageShell, renderPrimaryNav } from "./page-shell.js";
-export function renderCustomInpaintPage(input) {
-    return renderPageShell({
-        title: "Inpaint",
-        mainClass: "is-wide",
-        style: `
-      .custom-inpaint-frame {
-        height: 100%;
-        min-height: 0;
-      }
-
-      .custom-inpaint-shell {
-        height: 100%;
-        min-height: 0;
-        display: grid;
-        grid-template-rows: auto minmax(0, 1fr);
-        gap: 14px;
-      }
-
-      .custom-inpaint-workbench {
-        height: 100%;
-        min-height: 0;
-        display: grid;
-        grid-template-columns: 280px minmax(0, 1fr) 340px;
-        gap: 14px;
-        overflow: hidden;
-      }
-
-      .custom-inpaint-panel,
-      .custom-inpaint-stage,
-      .custom-inpaint-output,
-      .editor-inpaint-panel {
-        border: 1px solid rgba(191, 164, 109, 0.24);
-        border-radius: 18px;
-        background: rgba(255, 255, 255, 0.74);
-      }
-
-      .custom-inpaint-panel {
-        min-height: 0;
-        display: grid;
-        align-content: start;
-        gap: 12px;
-        padding: 14px;
-        overflow: auto;
-      }
-
-      .custom-inpaint-panel h1,
-      .custom-inpaint-output h2 {
-        margin: 0;
-        color: #253041;
-        font-size: 1.02rem;
-      }
-
-      .custom-inpaint-panel p,
-      .custom-inpaint-status,
-      .editor-inpaint-label {
-        margin: 0;
-        color: #617087;
-        font-size: 0.8rem;
-        line-height: 1.45;
-      }
-
-      .custom-inpaint-panel-head,
-      .custom-inpaint-tool-head {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 10px;
-      }
-
-      .custom-inpaint-upload {
-        min-height: 96px;
-        display: grid;
-        place-items: center;
-        gap: 5px;
-        padding: 12px;
-        border: 1px dashed rgba(97, 112, 135, 0.36);
-        border-radius: 16px;
-        background: rgba(255, 251, 244, 0.72);
-        color: #253041;
-        cursor: pointer;
-      }
-
-      .custom-inpaint-upload svg {
-        width: 22px;
-        height: 22px;
-      }
-
-      .custom-inpaint-upload span {
-        max-width: 100%;
-        overflow-wrap: anywhere;
-        word-break: break-word;
-        text-align: center;
-        line-height: 1.25;
-      }
-
-      .custom-inpaint-stage {
-        position: relative;
-        min-height: 0;
-        display: grid;
-        place-items: center;
-        overflow: auto;
-        background:
-          linear-gradient(45deg, rgba(255,255,255,0.06) 25%, transparent 25%),
-          linear-gradient(-45deg, rgba(255,255,255,0.06) 25%, transparent 25%),
-          linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.06) 75%),
-          linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.06) 75%),
-          #252d3d;
-        background-size: 22px 22px;
-        background-position: 0 0, 0 11px, 11px -11px, -11px 0;
-      }
-
-      .custom-inpaint-empty {
-        position: absolute;
-        inset: 0;
-        z-index: 1;
-        display: grid;
-        place-items: center;
-        padding: 24px;
-        text-align: center;
-        color: rgba(255, 251, 244, 0.74);
-        font-weight: 700;
-        pointer-events: none;
-      }
-
-      .custom-inpaint-empty[hidden] {
-        display: none;
-      }
-
-      .editor-inpaint-canvas-wrap {
-        position: relative;
-        display: inline-block;
-        max-width: 100%;
-        line-height: 0;
-        --inpaint-brush-cursor-size: 70px;
-        --inpaint-brush-cursor-x: 0px;
-        --inpaint-brush-cursor-y: 0px;
-      }
-
-      .editor-inpaint-canvas-wrap img {
-        max-width: 100%;
-        max-height: calc(100vh - 180px);
-        display: block;
-        object-fit: contain;
-        user-select: none;
-      }
-
-      .editor-inpaint-canvas-wrap canvas {
-        position: absolute;
-        inset: 0;
-        width: 100%;
-        height: 100%;
-        opacity: 0.86;
-        cursor: none;
-        touch-action: none;
-      }
-
-      .editor-inpaint-brush-cursor {
-        position: absolute;
-        z-index: 2;
-        left: 0;
-        top: 0;
-        width: var(--inpaint-brush-cursor-size);
-        height: var(--inpaint-brush-cursor-size);
-        border: 2px solid rgba(255, 255, 255, 0.92);
-        border-radius: 999px;
-        box-shadow:
-          0 0 0 1px rgba(37, 48, 65, 0.78),
-          0 0 18px rgba(37, 48, 65, 0.28);
-        opacity: 0;
-        pointer-events: none;
-        transform: translate(var(--inpaint-brush-cursor-x), var(--inpaint-brush-cursor-y)) translate(-50%, -50%);
-      }
-
-      .editor-inpaint-brush-cursor[data-visible="true"] {
-        opacity: 1;
-      }
-
-      .editor-inpaint-panel {
-        height: 100%;
-        max-height: calc(100vh - 150px);
-        min-height: 0;
-        display: grid;
-        grid-template-rows: auto;
-        align-content: start;
-        gap: 12px;
-        overflow-x: hidden;
-        overflow-y: auto;
-        overscroll-behavior: contain;
-        padding: 12px;
-      }
-
-      .editor-inpaint-toolbar,
-      .editor-inpaint-color-row,
-      .custom-inpaint-actions {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-      }
-
-      .editor-inpaint-toolbar,
-      .custom-inpaint-actions {
-        flex-wrap: wrap;
-      }
-
-      .editor-inpaint-brush {
-        display: grid;
-        gap: 6px;
-        min-width: 150px;
-      }
-
-      .editor-inpaint-brush input[type="range"] {
-        width: 100%;
-      }
-
-      .editor-inpaint-color-picker {
-        width: 42px;
-        height: 38px;
-        padding: 2px;
-        border: 1px solid rgba(97, 112, 135, 0.24);
-        border-radius: 12px;
-        background: #fff;
-      }
-
-      .editor-inpaint-swatches {
-        display: none;
-      }
-
-      .editor-inpaint-prompts {
-        display: grid;
-        align-content: start;
-        gap: 10px;
-      }
-
-      .editor-inpaint-provider {
-        display: none;
-        gap: 6px;
-      }
-
-      .editor-inpaint-provider[data-visible="true"] {
-        display: grid;
-      }
-
-      .editor-inpaint-provider select {
-        min-height: 38px;
-        padding: 0 34px 0 12px;
-        border-radius: 12px;
-        border: 1px solid rgba(191, 164, 109, 0.34);
-        background: rgba(255, 255, 255, 0.96);
-        color: #243041;
-        font: inherit;
-        font-weight: 800;
-      }
-
-      .editor-inpaint-color-row {
-        position: relative;
-        align-items: flex-start;
-        padding: 4px;
-        border-radius: 16px;
-      }
-
-      .editor-inpaint-color-tools {
-        flex: 0 0 auto;
-        display: grid;
-        justify-items: center;
-        gap: 6px;
-      }
-
-      .editor-inpaint-prompt-stack {
-        min-width: 0;
-        flex: 1 1 auto;
-        display: grid;
-        align-content: start;
-        gap: 8px;
-      }
-
-      .editor-inpaint-global {
-        display: grid;
-        align-content: start;
-        gap: 8px;
-      }
-
-      .editor-inpaint-prompt-field {
-        position: relative;
-        min-width: 0;
-        display: grid;
-      }
-
-      .editor-inpaint-attachment-tools {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        gap: 6px;
-      }
-
-      .editor-inpaint-attach-button {
-        position: absolute;
-        right: 8px;
-        bottom: 8px;
-        transform: translateY(-10px);
-        width: 30px;
-        height: 30px;
-        display: inline-grid;
-        place-items: center;
-        padding: 0;
-        border-radius: 999px;
-        border: 1px solid transparent;
-        background: rgba(255, 255, 255, 0.72);
-        color: rgba(37, 48, 65, 0.56);
-        font: inherit;
-        cursor: pointer;
-      }
-
-      .editor-inpaint-attach-button:hover,
-      .editor-inpaint-attach-button:focus-visible {
-        border-color: rgba(191, 164, 109, 0.34);
-        background: rgba(255, 251, 244, 0.94);
-        color: #253041;
-      }
-
-      .editor-inpaint-attach-button svg {
-        width: 16px;
-        height: 16px;
-      }
-
-      .editor-inpaint-attachment-chips {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        gap: 6px;
-        min-width: 0;
-      }
-
-      .editor-inpaint-attachment-chip {
-        min-width: 0;
-        max-width: 210px;
-        display: inline-flex;
-        align-items: center;
-        gap: 4px;
-        padding: 1px 4px 1px 1px;
-        border-radius: 999px;
-        border: 1px solid rgba(191, 164, 109, 0.3);
-        background: rgba(247, 241, 230, 0.82);
-        color: #253041;
-        font-size: 0.74rem;
-        font-weight: 800;
-      }
-
-      .editor-inpaint-attachment-chip img {
-        width: 22px;
-        height: 22px;
-        min-width: 22px;
-        max-width: 22px;
-        aspect-ratio: 1 / 1;
-        flex: 0 0 22px;
-        object-fit: cover;
-        border-radius: 999px;
-        background: rgba(37, 48, 65, 0.08);
-      }
-
-      .editor-inpaint-attachment-chip span {
-        min-width: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .editor-inpaint-attachment-chip button {
-        width: 18px;
-        height: 18px;
-        min-width: 18px;
-        max-width: 18px;
-        aspect-ratio: 1 / 1;
-        flex: 0 0 18px;
-        display: inline-grid;
-        place-items: center;
-        padding: 0;
-        border: 0;
-        border-radius: 999px;
-        background: rgba(37, 48, 65, 0.1);
-        color: #253041;
-        font: inherit;
-        line-height: 1;
-        cursor: pointer;
-      }
-
-      .editor-inpaint-color-row[data-active="true"] {
-        background: rgba(219, 193, 122, 0.16);
-      }
-
-      .editor-inpaint-color-dot {
-        width: 26px;
-        height: 26px;
-        min-width: 26px;
-        max-width: 26px;
-        aspect-ratio: 1 / 1;
-        flex: 0 0 26px;
-        margin-top: 8px;
-        border-radius: 999px;
-        border: 2px solid rgba(37, 48, 65, 0.18);
-        background: var(--inpaint-color, #ff2d55);
-        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8);
-        cursor: pointer;
-      }
-
-      .editor-inpaint-color-remove {
-        width: 22px;
-        height: 22px;
-        min-width: 22px;
-        max-width: 22px;
-        aspect-ratio: 1 / 1;
-        flex: 0 0 22px;
-        display: inline-grid;
-        place-items: center;
-        padding: 0;
-        border: 1px solid rgba(37, 48, 65, 0.12);
-        border-radius: 999px;
-        background: rgba(255, 255, 255, 0.72);
-        color: rgba(37, 48, 65, 0.56);
-        cursor: pointer;
-      }
-
-      .editor-inpaint-color-remove:hover,
-      .editor-inpaint-color-remove:focus-visible {
-        border-color: rgba(191, 164, 109, 0.36);
-        color: #253041;
-      }
-
-      .editor-inpaint-color-remove svg {
-        width: 13px;
-        height: 13px;
-      }
-
-      .editor-inpaint-color-row[data-active="true"] .editor-inpaint-color-dot {
-        border-color: #253041;
-        box-shadow: 0 0 0 3px rgba(219, 193, 122, 0.45), inset 0 0 0 2px rgba(255, 255, 255, 0.8);
-      }
-
-      .editor-inpaint-prompt {
-        width: 100%;
-        min-height: 72px;
-        display: block;
-        resize: vertical;
-        padding: 10px 44px 18px 12px;
-        border-radius: 14px;
-        border: 1px solid rgba(191, 164, 109, 0.34);
-        background: rgba(255, 255, 255, 0.96);
-        color: #243041;
-        font: inherit;
-        line-height: 1.45;
-      }
-
-      .editor-history-button {
-        min-height: 38px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: 6px;
-        padding: 0 12px;
-        border-radius: 12px;
-        border: 1px solid rgba(191, 164, 109, 0.28);
-        background: rgba(255, 255, 255, 0.86);
-        color: #253041;
-        font-size: 0.82rem;
-        font-weight: 800;
-        cursor: pointer;
-      }
-
-      .editor-history-button.is-primary {
-        border-color: rgba(37, 48, 65, 0.9);
-        background: #253041;
-        color: #fffaf0;
-      }
-
-      .editor-history-button[disabled] {
-        opacity: 0.58;
-        cursor: wait;
-      }
-
-      .editor-history-button.is-icon {
-        width: 38px;
-        padding: 0;
-        flex: 0 0 auto;
-      }
-
-      .editor-history-button.is-block {
-        width: 100%;
-      }
-
-      .editor-history-button svg {
-        width: 18px;
-        height: 18px;
-      }
-
-      .editor-history-button[data-loading="true"]::before {
-        content: "";
-        width: 14px;
-        height: 14px;
-        border-radius: 999px;
-        border: 2px solid currentColor;
-        border-top-color: transparent;
-        animation: editor-inpaint-spin 0.75s linear infinite;
-      }
-
-      @keyframes editor-inpaint-spin {
-        to { transform: rotate(360deg); }
-      }
-
-      .custom-inpaint-settings-wrap {
-        position: relative;
-      }
-
-      .custom-inpaint-settings {
-        position: absolute;
-        right: 0;
-        top: calc(100% + 8px);
-        z-index: 20;
-        width: 260px;
-        display: grid;
-        gap: 8px;
-        padding: 12px;
-        border-radius: 16px;
-        border: 1px solid rgba(191, 164, 109, 0.32);
-        background: rgba(255, 251, 244, 0.98);
-        box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
-      }
-
-      .custom-inpaint-settings[hidden],
-      .custom-inpaint-output[hidden] {
-        display: none;
-      }
-
-      .custom-inpaint-settings input {
-        width: 100%;
-        min-height: 38px;
-        padding: 0 12px;
-        border-radius: 12px;
-        border: 1px solid rgba(191, 164, 109, 0.34);
-        background: rgba(255, 255, 255, 0.96);
-        color: #243041;
-        font: inherit;
-      }
-
-      .custom-inpaint-output {
-        display: grid;
-        gap: 10px;
-        padding: 12px;
-      }
-
-      .custom-inpaint-preview {
-        width: 100%;
-        display: grid;
-        padding: 0;
-        border: 0;
-        border-radius: 12px;
-        background: #252d3d;
-        cursor: zoom-in;
-      }
-
-      .custom-inpaint-output img {
-        width: 100%;
-        max-height: 320px;
-        object-fit: contain;
-        border-radius: 12px;
-        background: #252d3d;
-      }
-
-      .custom-inpaint-history {
-        display: grid;
-        gap: 8px;
-        padding: 12px;
-        border: 1px solid rgba(191, 164, 109, 0.24);
-        border-radius: 18px;
-        background: rgba(255, 255, 255, 0.58);
-      }
-
-      .custom-inpaint-history-head {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 8px;
-      }
-
-      .custom-inpaint-history-head h2 {
-        margin: 0;
-        color: #253041;
-        font-size: 1rem;
-      }
-
-      .custom-inpaint-history-refresh {
-        width: 30px;
-        height: 30px;
-        min-width: 30px;
-        padding: 0;
-      }
-
-      .custom-inpaint-history-refresh svg {
-        width: 15px;
-        height: 15px;
-      }
-
-      .custom-inpaint-history-list {
-        display: grid;
-        gap: 8px;
-        overflow: visible;
-        padding: 2px;
-      }
-
-      .custom-inpaint-history-empty {
-        color: #617087;
-        font-size: 0.8rem;
-        line-height: 1.4;
-      }
-
-      .custom-inpaint-history-item {
-        position: relative;
-        min-width: 0;
-        display: grid;
-        grid-template-columns: 54px minmax(0, 1fr);
-        align-items: center;
-        gap: 8px;
-        padding: 6px;
-        border: 1px solid rgba(191, 164, 109, 0.2);
-        border-radius: 12px;
-        background: rgba(255, 251, 244, 0.62);
-      }
-
-      .custom-inpaint-history-thumb-button {
-        width: 54px;
-        height: 54px;
-        display: grid;
-        padding: 0;
-        border: 0;
-        border-radius: 10px;
-        background: transparent;
-        cursor: zoom-in;
-      }
-
-      .custom-inpaint-history-thumb {
-        width: 54px;
-        height: 54px;
-        border: 1px solid rgba(191, 164, 109, 0.3);
-        border-radius: 10px;
-        object-fit: cover;
-        background: #252d3d;
-      }
-
-      .custom-inpaint-history-generating {
-        width: 54px;
-        height: 54px;
-        display: grid;
-        place-items: center;
-        border: 1px solid rgba(191, 164, 109, 0.3);
-        border-radius: 10px;
-        background: linear-gradient(135deg, rgba(37, 48, 65, 0.92), rgba(122, 75, 22, 0.84));
-        color: #fff7e8;
-      }
-
-      .custom-inpaint-history-generating::before {
-        content: "";
-        width: 22px;
-        height: 22px;
-        border-radius: 999px;
-        border: 2px solid rgba(255, 247, 232, 0.34);
-        border-top-color: #fff7e8;
-        animation: editor-inpaint-spin 0.75s linear infinite;
-      }
-
-      .custom-inpaint-history-meta {
-        min-width: 0;
-        display: grid;
-        gap: 5px;
-      }
-
-      .custom-inpaint-history-title {
-        min-width: 0;
-        color: #253041;
-        font-size: 0.78rem;
-        font-weight: 800;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .custom-inpaint-history-subtitle {
-        min-width: 0;
-        color: #617087;
-        font-size: 0.72rem;
-        font-weight: 700;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .custom-inpaint-history-actions {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        gap: 4px;
-      }
-
-      .custom-inpaint-history-icon {
-        width: 24px;
-        height: 24px;
-        display: inline-grid;
-        place-items: center;
-        padding: 0;
-        border: 1px solid rgba(191, 164, 109, 0.24);
-        border-radius: 999px;
-        background: rgba(255, 255, 255, 0.88);
-        color: #253041;
-        cursor: pointer;
-        text-decoration: none;
-      }
-
-      .custom-inpaint-history-check {
-        min-height: 24px;
-        padding: 0 9px;
-        border: 1px solid rgba(191, 164, 109, 0.3);
-        border-radius: 999px;
-        background: rgba(255, 255, 255, 0.9);
-        color: #253041;
-        font-size: 0.72rem;
-        font-weight: 850;
-        cursor: pointer;
-      }
-
-      .custom-inpaint-history-check[disabled] {
-        cursor: wait;
-        opacity: 0.64;
-      }
-
-      .custom-inpaint-history-icon svg {
-        width: 13px;
-        height: 13px;
-      }
-
-      .custom-inpaint-history-popconfirm {
-        position: absolute;
-        right: 6px;
-        top: 6px;
-        z-index: 6;
-        width: 156px;
-        display: grid;
-        gap: 7px;
-        padding: 8px;
-        border: 1px solid rgba(191, 164, 109, 0.34);
-        border-radius: 12px;
-        background: rgba(255, 251, 244, 0.98);
-        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
-      }
-
-      .custom-inpaint-history-popconfirm[hidden] {
-        display: none;
-      }
-
-      .custom-inpaint-history-popconfirm p {
-        margin: 0;
-        color: #253041;
-        font-size: 0.76rem;
-        font-weight: 800;
-        line-height: 1.25;
-      }
-
-      .custom-inpaint-history-popconfirm-actions {
-        display: flex;
-        gap: 5px;
-      }
-
-      .custom-inpaint-history-popconfirm-actions button {
-        flex: 1 1 0;
-        min-height: 26px;
-        padding: 0 7px;
-        border-radius: 9px;
-        border: 1px solid rgba(191, 164, 109, 0.28);
-        background: rgba(255, 255, 255, 0.92);
-        color: #253041;
-        font: inherit;
-        font-size: 0.72rem;
-        font-weight: 800;
-        cursor: pointer;
-      }
-
-      .custom-inpaint-history-popconfirm-actions button[data-danger="true"] {
-        border-color: rgba(155, 45, 45, 0.3);
-        color: #9b2d2d;
-      }
-
-      .custom-inpaint-status[data-tone="error"] {
-        color: #9b2d2d;
-      }
-
-      .custom-inpaint-status[data-tone="success"] {
-        color: #2f7d4f;
-      }
-
-      .custom-inpaint-lightbox {
-        position: fixed;
-        inset: 0;
-        z-index: 80;
-        display: none;
-        place-items: center;
-        padding: 22px;
-        background: rgba(15, 23, 42, 0.72);
-        backdrop-filter: blur(12px);
-      }
-
-      .custom-inpaint-lightbox[data-open="true"] {
-        display: grid;
-      }
-
-      .custom-inpaint-lightbox[hidden] {
-        display: none;
-      }
-
-      .custom-inpaint-lightbox-dialog {
-        width: min(1100px, 96vw);
-        max-height: 94vh;
-        display: grid;
-        grid-template-rows: auto minmax(0, 1fr);
-        gap: 12px;
-        padding: 12px;
-        border: 1px solid rgba(255, 251, 244, 0.18);
-        border-radius: 18px;
-        background: rgba(37, 45, 61, 0.96);
-        box-shadow: 0 24px 72px rgba(0, 0, 0, 0.38);
-      }
-
-      .custom-inpaint-lightbox-head {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 10px;
-      }
-
-      .custom-inpaint-lightbox-title {
-        min-width: 0;
-        margin: 0;
-        color: #fffaf0;
-        font-size: 0.9rem;
-        font-weight: 800;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .custom-inpaint-lightbox-actions {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-
-      .custom-inpaint-lightbox-stage {
-        min-height: 0;
-        display: grid;
-        place-items: center;
-        overflow: auto;
-      }
-
-      .custom-inpaint-lightbox-stage img {
-        max-width: 100%;
-        max-height: calc(94vh - 92px);
-        object-fit: contain;
-        border-radius: 12px;
-        background: #111827;
-      }
-
-      @media (max-width: 1100px) {
-        .custom-inpaint-workbench {
-          grid-template-columns: 1fr;
-          overflow: auto;
-        }
-
-        .editor-inpaint-panel {
-          max-height: none;
-        }
-      }
-    `,
-        body: `
-      <section class="frame custom-inpaint-frame">
-        <header class="topbar">
-          ${renderBrandLockup({ displayName: input.account.name, email: input.account.email, accountId: input.account.userId })}
-          <div class="topbar-actions">
-            ${renderPrimaryNav({ loggedIn: true, current: "inpaint", accountId: input.account.userId })}
-          </div>
-        </header>
-        <div class="frame-body custom-inpaint-shell">
-          <section class="custom-inpaint-workbench">
-            <aside class="custom-inpaint-panel">
-              <div class="custom-inpaint-panel-head">
-                <h1>Inpaint</h1>
-                <button type="button" class="editor-history-button" data-custom-inpaint-start-new>Start New</button>
-              </div>
-              <p>Upload a source image, paint replacement regions, then create a reusable image edit for a timeline layer.</p>
-              <button type="button" class="custom-inpaint-upload" data-custom-inpaint-upload>
-                <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14V4"></path><path d="m6.5 7.5 3.5-3.5 3.5 3.5"></path><path d="M4 15.8h12"></path></svg>
-                <strong>Add Source Image</strong>
-                <span data-custom-inpaint-source-name>No image selected</span>
-              </button>
-              <input data-custom-inpaint-file type="file" accept="image/png,image/jpeg,image/webp,image/gif,image/avif" hidden />
-              <p class="custom-inpaint-status" data-custom-inpaint-status aria-live="polite"></p>
-              <div class="custom-inpaint-output" data-custom-inpaint-output hidden>
-                <h2>Result</h2>
-                <button type="button" class="custom-inpaint-preview" data-custom-inpaint-result-open aria-label="View inpaint result">
-                  <img data-custom-inpaint-result alt="Image edit result" />
-                </button>
-                <a class="editor-history-button is-primary" data-custom-inpaint-download href="#" target="_blank" rel="noopener noreferrer" download>Download</a>
-              </div>
-              <section class="custom-inpaint-history" aria-label="Image edit job history">
-                <div class="custom-inpaint-history-head">
-                  <h2>History</h2>
-                  <button type="button" class="editor-history-button custom-inpaint-history-refresh" data-custom-inpaint-history-refresh aria-label="Refresh image edit history" title="Refresh history">
-                    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16.5 10a6.5 6.5 0 1 1-1.9-4.6"></path><path d="M16.5 4.2v4.2h-4.2"></path></svg>
-                  </button>
-                </div>
-                <div class="custom-inpaint-history-list" data-custom-inpaint-history-list>
-                  <div class="custom-inpaint-history-empty">Loading history...</div>
-                </div>
-              </section>
-            </aside>
-            <main class="custom-inpaint-stage">
-              <div class="custom-inpaint-empty" data-custom-inpaint-empty>Upload an image to start painting</div>
-              <div class="editor-inpaint-canvas-wrap" data-custom-inpaint-canvas-wrap hidden>
-                <img data-editor-inpaint-image alt="" />
-                <canvas data-editor-inpaint-canvas></canvas>
-                <div class="editor-inpaint-brush-cursor" data-editor-inpaint-brush-cursor aria-hidden="true"></div>
-              </div>
-            </main>
-            <aside class="editor-inpaint-panel" aria-label="Image edit controls">
-              <div class="custom-inpaint-tool-head">
-                <div class="custom-inpaint-actions" aria-label="Mask history">
-                  <button type="button" class="editor-history-button is-icon" data-editor-inpaint-undo aria-label="Undo paint stroke" title="Undo">
-                    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7.2 7H3.8V3.6"></path><path d="M4 7a7 7 0 1 1 1.9 6.6"></path></svg>
-                  </button>
-                  <button type="button" class="editor-history-button is-icon" data-editor-inpaint-redo aria-label="Redo paint stroke" title="Redo">
-                    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.8 7h3.4V3.6"></path><path d="M16 7a7 7 0 1 0-1.9 6.6"></path></svg>
-                  </button>
-                </div>
-                <div class="custom-inpaint-settings-wrap">
-                  <button type="button" class="editor-history-button is-icon" data-custom-inpaint-settings-button aria-label="Image edit settings" title="Settings">
-                    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8.8 3.4 9.4 2h1.2l.6 1.4 1.2.5 1.4-.6.9.9-.6 1.4.5 1.2 1.4.6v1.2l-1.4.6-.5 1.2.6 1.4-.9.9-1.4-.6-1.2.5-.6 1.4H9.4l-.6-1.4-1.2-.5-1.4.6-.9-.9.6-1.4-.5-1.2L4 8.6V7.4l1.4-.6.5-1.2-.6-1.4.9-.9 1.4.6 1.2-.5Z"></path><circle cx="10" cy="8" r="2.4"></circle></svg>
-                  </button>
-                  <div class="custom-inpaint-settings" data-custom-inpaint-settings hidden>
-                    <label>
-                      <span class="editor-inpaint-label">Tracer</span>
-                      <input data-custom-inpaint-tracer type="text" autocomplete="off" spellcheck="false" placeholder="image-edit" />
-                    </label>
-                  </div>
-                </div>
-              </div>
-              <div class="editor-inpaint-toolbar">
-                <label class="editor-inpaint-brush">
-                  <span class="editor-inpaint-label">Brush <span data-editor-inpaint-brush-label>70</span></span>
-                  <input data-editor-inpaint-brush type="range" min="6" max="180" step="1" value="70" />
-                </label>
-                <input class="editor-inpaint-color-picker" data-editor-inpaint-color-picker type="color" value="#ff2d55" aria-label="Mask color" />
-                <label class="editor-inpaint-provider" data-editor-inpaint-provider-wrap>
-                  <span class="editor-inpaint-label">Provider</span>
-                  <select data-editor-inpaint-provider aria-label="AI provider"></select>
-                </label>
-              </div>
-              <div class="editor-inpaint-global">
-                <span class="editor-inpaint-label">Whole image prompt</span>
-                <div class="editor-inpaint-prompt-field">
-                  <textarea class="editor-inpaint-prompt" data-editor-inpaint-global-prompt placeholder="Describe the overall edit, style, constraints, or preservation notes."></textarea>
-                  <button type="button" class="editor-inpaint-attach-button" data-editor-inpaint-attach-scope="global" aria-label="Attach reference image" title="Attach reference image">
-                    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m8.1 10.7 4.8-4.8a2.5 2.5 0 0 1 3.5 3.5l-6.1 6.1a4 4 0 0 1-5.7-5.7l6.3-6.3"></path><path d="m10 8.8-4.1 4.1a1.6 1.6 0 0 0 2.3 2.3l5.6-5.6"></path></svg>
-                  </button>
-                </div>
-                <div class="editor-inpaint-attachment-tools">
-                  <span class="editor-inpaint-attachment-chips" data-editor-inpaint-attachments="global"></span>
-                </div>
-              </div>
-              <input data-editor-inpaint-attachment-input type="file" accept="image/jpeg,image/png,image/webp" multiple hidden />
-              <div class="editor-inpaint-swatches" data-editor-inpaint-swatches aria-label="Mask colors"></div>
-              <div class="editor-inpaint-prompts" data-editor-inpaint-prompts></div>
-              <button type="button" class="editor-history-button is-block" data-editor-inpaint-add-color>Add color</button>
-              <div class="custom-inpaint-actions">
-                <button type="button" class="editor-history-button" data-editor-inpaint-clear>Clear</button>
-                <button type="button" class="editor-history-button is-primary" data-editor-inpaint-submit><span data-editor-inpaint-submit-label>Create image edit</span></button>
-              </div>
-            </aside>
-          </section>
-        </div>
-      </section>
-      <div class="custom-inpaint-lightbox" data-custom-inpaint-lightbox data-open="false" hidden>
-        <div class="custom-inpaint-lightbox-dialog" role="dialog" aria-modal="true" aria-labelledby="custom-inpaint-lightbox-title">
-          <div class="custom-inpaint-lightbox-head">
-            <p class="custom-inpaint-lightbox-title" id="custom-inpaint-lightbox-title" data-custom-inpaint-lightbox-title>Image edit output</p>
-            <div class="custom-inpaint-lightbox-actions">
-              <button type="button" class="editor-history-button is-icon" data-custom-inpaint-lightbox-copy aria-label="Copy image URL" title="Copy URL">
-                <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8.4 11.6a3.2 3.2 0 0 0 4.5 0l2.2-2.2a3.2 3.2 0 0 0-4.5-4.5L9.4 6.1"></path><path d="M11.6 8.4a3.2 3.2 0 0 0-4.5 0L4.9 10.6a3.2 3.2 0 0 0 4.5 4.5l1.2-1.2"></path></svg>
-              </button>
-              <a class="editor-history-button is-primary" data-custom-inpaint-lightbox-download href="#" target="_blank" rel="noopener noreferrer" download>Download</a>
-              <button type="button" class="editor-history-button is-icon" data-custom-inpaint-lightbox-close aria-label="Close preview" title="Close">
-                <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 5l10 10"></path><path d="M15 5 5 15"></path></svg>
-              </button>
-            </div>
-          </div>
-          <div class="custom-inpaint-lightbox-stage">
-            <img data-custom-inpaint-lightbox-image alt="Image edit output preview" />
-          </div>
-        </div>
-      </div>
-      <script>
-        (() => {
-          const uploadButton = document.querySelector("[data-custom-inpaint-upload]");
-          const startNewButton = document.querySelector("[data-custom-inpaint-start-new]");
-          const fileInput = document.querySelector("[data-custom-inpaint-file]");
-          const sourceName = document.querySelector("[data-custom-inpaint-source-name]");
-          const statusEl = document.querySelector("[data-custom-inpaint-status]");
-          const emptyState = document.querySelector("[data-custom-inpaint-empty]");
-          const canvasWrap = document.querySelector("[data-custom-inpaint-canvas-wrap]");
-          const outputPanel = document.querySelector("[data-custom-inpaint-output]");
-          const resultOpenButton = document.querySelector("[data-custom-inpaint-result-open]");
-          const resultImage = document.querySelector("[data-custom-inpaint-result]");
-          const resultDownload = document.querySelector("[data-custom-inpaint-download]");
-          const historyList = document.querySelector("[data-custom-inpaint-history-list]");
-          const historyRefresh = document.querySelector("[data-custom-inpaint-history-refresh]");
-          const inpaintImage = document.querySelector("[data-editor-inpaint-image]");
-          const inpaintCanvas = document.querySelector("[data-editor-inpaint-canvas]");
-          const inpaintBrushCursor = document.querySelector("[data-editor-inpaint-brush-cursor]");
-          const inpaintUndo = document.querySelector("[data-editor-inpaint-undo]");
-          const inpaintRedo = document.querySelector("[data-editor-inpaint-redo]");
-          const inpaintClear = document.querySelector("[data-editor-inpaint-clear]");
-          const inpaintBrush = document.querySelector("[data-editor-inpaint-brush]");
-          const inpaintBrushLabel = document.querySelector("[data-editor-inpaint-brush-label]");
-          const inpaintColorPicker = document.querySelector("[data-editor-inpaint-color-picker]");
-          const inpaintAddColor = document.querySelector("[data-editor-inpaint-add-color]");
-          const inpaintProviderWrap = document.querySelector("[data-editor-inpaint-provider-wrap]");
-          const inpaintProviderSelect = document.querySelector("[data-editor-inpaint-provider]");
-          const inpaintGlobalPrompt = document.querySelector("[data-editor-inpaint-global-prompt]");
-          const inpaintAttachmentInput = document.querySelector("[data-editor-inpaint-attachment-input]");
-          const inpaintGlobalAttachments = document.querySelector('[data-editor-inpaint-attachments="global"]');
-          const inpaintSwatches = document.querySelector("[data-editor-inpaint-swatches]");
-          const inpaintPrompts = document.querySelector("[data-editor-inpaint-prompts]");
-          const inpaintSubmit = document.querySelector("[data-editor-inpaint-submit]");
-          const inpaintSubmitLabel = document.querySelector("[data-editor-inpaint-submit-label]");
-          const settingsButton = document.querySelector("[data-custom-inpaint-settings-button]");
-          const settingsPopover = document.querySelector("[data-custom-inpaint-settings]");
-          const tracerInput = document.querySelector("[data-custom-inpaint-tracer]");
-          const lightbox = document.querySelector("[data-custom-inpaint-lightbox]");
-          const lightboxTitle = document.querySelector("[data-custom-inpaint-lightbox-title]");
-          const lightboxImage = document.querySelector("[data-custom-inpaint-lightbox-image]");
-          const lightboxCopy = document.querySelector("[data-custom-inpaint-lightbox-copy]");
-          const lightboxDownload = document.querySelector("[data-custom-inpaint-lightbox-download]");
-          const lightboxClose = document.querySelector("[data-custom-inpaint-lightbox-close]");
-          if (!(uploadButton instanceof HTMLButtonElement)
-            || !(startNewButton instanceof HTMLButtonElement)
-            || !(fileInput instanceof HTMLInputElement)
-            || !(sourceName instanceof HTMLElement)
-            || !(statusEl instanceof HTMLElement)
-            || !(emptyState instanceof HTMLElement)
-            || !(canvasWrap instanceof HTMLElement)
-            || !(outputPanel instanceof HTMLElement)
-            || !(resultOpenButton instanceof HTMLButtonElement)
-            || !(resultImage instanceof HTMLImageElement)
-            || !(resultDownload instanceof HTMLAnchorElement)
-            || !(historyList instanceof HTMLElement)
-            || !(historyRefresh instanceof HTMLButtonElement)
-            || !(inpaintImage instanceof HTMLImageElement)
-            || !(inpaintCanvas instanceof HTMLCanvasElement)
-            || !(inpaintBrushCursor instanceof HTMLElement)
-            || !(inpaintUndo instanceof HTMLButtonElement)
-            || !(inpaintRedo instanceof HTMLButtonElement)
-            || !(inpaintClear instanceof HTMLButtonElement)
-            || !(inpaintBrush instanceof HTMLInputElement)
-            || !(inpaintBrushLabel instanceof HTMLElement)
-            || !(inpaintColorPicker instanceof HTMLInputElement)
-            || !(inpaintAddColor instanceof HTMLButtonElement)
-            || !(inpaintProviderWrap instanceof HTMLElement)
-            || !(inpaintProviderSelect instanceof HTMLSelectElement)
-            || !(inpaintGlobalPrompt instanceof HTMLTextAreaElement)
-            || !(inpaintAttachmentInput instanceof HTMLInputElement)
-            || !(inpaintGlobalAttachments instanceof HTMLElement)
-            || !(inpaintSwatches instanceof HTMLElement)
-            || !(inpaintPrompts instanceof HTMLElement)
-            || !(inpaintSubmit instanceof HTMLButtonElement)
-            || !(inpaintSubmitLabel instanceof HTMLElement)
-            || !(settingsButton instanceof HTMLButtonElement)
-            || !(settingsPopover instanceof HTMLElement)
-            || !(tracerInput instanceof HTMLInputElement)
-            || !(lightbox instanceof HTMLElement)
-            || !(lightboxTitle instanceof HTMLElement)
-            || !(lightboxImage instanceof HTMLImageElement)
-            || !(lightboxCopy instanceof HTMLButtonElement)
-            || !(lightboxDownload instanceof HTMLAnchorElement)
-            || !(lightboxClose instanceof HTMLButtonElement)) {
-            return;
-          }
-
-          let sourceImageUrl = "";
-          let sourceImageName = "";
-          let inpaintMaskColors = [{ color: "#ff2d55", prompt: "" }];
-          let activeInpaintColor = "#ff2d55";
-          let inpaintStrokes = [];
-          let redoStrokes = [];
-          let currentInpaintStroke = null;
-          let isInpaintPainting = false;
-          let inpaintAttachments = [];
-          let pendingInpaintAttachmentScope = null;
-          let inpaintHistoryItems = [];
-          let historyTracerRefreshTimer = 0;
-          const hiddenInpaintHistoryKeys = new Set();
-          const maxInpaintAttachments = 8;
-          const allowedInpaintAttachmentTypes = new Set(["image/jpeg", "image/png", "image/webp"]);
-
-          function makeTracerId() {
-            return "custom-inpaint-" + (globalThis.crypto && typeof globalThis.crypto.randomUUID === "function"
-              ? globalThis.crypto.randomUUID().replace(/-/g, "").slice(0, 8)
-              : Math.random().toString(16).slice(2, 10).padEnd(8, "0").slice(0, 8));
-          }
-
-          function getTracerValue() {
-            const value = tracerInput.value.trim();
-            if (value) return value;
-            const tracer = makeTracerId();
-            tracerInput.value = tracer;
-            return tracer;
-          }
-
-          function queueInpaintHistoryReload() {
-            window.clearTimeout(historyTracerRefreshTimer);
-            historyTracerRefreshTimer = window.setTimeout(() => {
-              void loadInpaintHistory();
-            }, 300);
-          }
-
-          function setSubmitLoading(isLoading) {
-            inpaintSubmit.disabled = isLoading;
-            inpaintSubmit.setAttribute("data-loading", isLoading ? "true" : "false");
-            inpaintSubmitLabel.textContent = isLoading ? "Creating" : "Create image edit";
-          }
-
-          function setStatus(message, tone) {
-            statusEl.textContent = message || "";
-            if (tone) {
-              statusEl.setAttribute("data-tone", tone);
-            } else {
-              statusEl.removeAttribute("data-tone");
-            }
-          }
-
-          function imageDownloadName(prefix, createdAt) {
-            const stamp = String(createdAt || new Date().toISOString()).replace(/[^0-9a-z]+/gi, "-");
-            return prefix + "-" + stamp + ".png";
-          }
-
-          function openImagePreview(url, label, downloadName) {
-            if (!url) return;
-            lightboxImage.src = url;
-            lightboxImage.alt = label || "Image edit output preview";
-            lightboxTitle.textContent = label || "Image edit output";
-            lightboxCopy.dataset.copyUrl = url;
-            lightboxCopy.setAttribute("title", "Copy URL");
-            lightboxDownload.href = url;
-            lightboxDownload.setAttribute("download", downloadName || imageDownloadName("inpaint-output"));
-            lightbox.hidden = false;
-            lightbox.setAttribute("data-open", "true");
-            document.body.style.overflow = "hidden";
-          }
-
-          function closeImagePreview() {
-            lightbox.setAttribute("data-open", "false");
-            lightbox.hidden = true;
-            lightboxImage.removeAttribute("src");
-            lightboxCopy.dataset.copyUrl = "";
-            lightboxCopy.setAttribute("title", "Copy URL");
-            lightboxDownload.href = "#";
-            document.body.style.overflow = "";
-          }
-
-          function updateBrushCursorSize() {
-            const rect = inpaintCanvas.getBoundingClientRect();
-            const brushSize = Math.max(1, Number(inpaintBrush.value) || 40);
-            const displayScale = inpaintCanvas.width && rect.width ? rect.width / inpaintCanvas.width : 1;
-            canvasWrap.style.setProperty("--inpaint-brush-cursor-size", Math.max(6, brushSize * displayScale) + "px");
-          }
-
-          function updateBrushCursorPosition(event) {
-            const rect = inpaintCanvas.getBoundingClientRect();
-            canvasWrap.style.setProperty("--inpaint-brush-cursor-x", Math.max(0, Math.min(rect.width, event.clientX - rect.left)) + "px");
-            canvasWrap.style.setProperty("--inpaint-brush-cursor-y", Math.max(0, Math.min(rect.height, event.clientY - rect.top)) + "px");
-            updateBrushCursorSize();
-            inpaintBrushCursor.dataset.visible = "true";
-          }
-
-          function hideBrushCursor() {
-            inpaintBrushCursor.dataset.visible = "false";
-          }
-
-          function normalizeHexColor(value) {
-            const raw = String(value || "").trim().toLowerCase();
-            if (/^#[0-9a-f]{6}$/i.test(raw)) return raw;
-            if (/^#[0-9a-f]{3}$/i.test(raw)) {
-              return "#" + raw.slice(1).split("").map((part) => part + part).join("");
-            }
-            return "#ff2d55";
-          }
-
-          const inpaintColorPalette = ["#ff2d55", "#3b82f6", "#22c55e", "#f59e0b", "#a855f7", "#06b6d4", "#f97316", "#ec4899"];
-
-          function syncInpaintPromptValuesFromDom() {
-            const fields = Array.from(inpaintPrompts.querySelectorAll("[data-color]"));
-            for (const field of fields) {
-              if (field instanceof HTMLTextAreaElement) {
-                updateInpaintPrompt(field.dataset.color || "", field.value);
-              }
-            }
-          }
-
-          function attachmentId() {
-            return "att_" + Date.now().toString(36) + "_" + Math.random().toString(16).slice(2, 8);
-          }
-
-          function attachmentsForScope(scope, color) {
-            const normalizedColor = color ? normalizeHexColor(color) : "";
-            return inpaintAttachments.filter((attachment) => (
-              attachment.scope === scope && (!normalizedColor || attachment.color === normalizedColor)
-            ));
-          }
-
-          function renderAttachmentChips(container, scope, color) {
-            container.innerHTML = "";
-            for (const attachment of attachmentsForScope(scope, color)) {
-              const chip = document.createElement("span");
-              chip.className = "editor-inpaint-attachment-chip";
-              const preview = document.createElement("img");
-              preview.src = attachment.url;
-              preview.alt = "";
-              preview.loading = "lazy";
-              const label = document.createElement("span");
-              label.textContent = attachment.fileName || "reference image";
-              const remove = document.createElement("button");
-              remove.type = "button";
-              remove.textContent = "×";
-              remove.dataset.editorInpaintRemoveAttachment = attachment.id;
-              remove.setAttribute("aria-label", "Remove " + (attachment.fileName || "reference image"));
-              chip.append(preview, label, remove);
-              container.append(chip);
-            }
-          }
-
-          function renderAllAttachmentChips() {
-            renderAttachmentChips(inpaintGlobalAttachments, "global");
-            for (const container of Array.from(inpaintPrompts.querySelectorAll("[data-editor-inpaint-attachments]"))) {
-              if (container instanceof HTMLElement && container.dataset.color) {
-                renderAttachmentChips(container, "color", container.dataset.color);
-              }
-            }
-          }
-
-          function openAttachmentPicker(scope, color) {
-            pendingInpaintAttachmentScope = { scope, color: color ? normalizeHexColor(color) : "" };
-            inpaintAttachmentInput.click();
-          }
-
-          function isAllowedInpaintAttachment(file) {
-            return file instanceof File && allowedInpaintAttachmentTypes.has(file.type);
-          }
-
-          function imageFilesFromPaste(event) {
-            const clipboard = event.clipboardData;
-            if (!clipboard) return [];
-            const files = [];
-            for (const item of Array.from(clipboard.items || [])) {
-              if (item.kind !== "file") continue;
-              const file = item.getAsFile();
-              if (file) files.push(file);
-            }
-            if (!files.length) {
-              for (const file of Array.from(clipboard.files || [])) {
-                files.push(file);
-              }
-            }
-            return files;
-          }
-
-          function handleAttachmentPaste(event, scope, color) {
-            const files = imageFilesFromPaste(event);
-            if (!files.length) return;
-            event.preventDefault();
-            const allowed = files.filter(isAllowedInpaintAttachment);
-            if (!allowed.length) {
-              setStatus("Reference attachments must be JPEG, PNG, or WebP images.", "error");
-              return;
-            }
-            void addAttachmentFilesForScope(allowed, {
-              scope,
-              color: scope === "color" ? normalizeHexColor(color) : ""
-            });
-          }
-
-          function pickNextInpaintColor(requestedColor) {
-            const requested = normalizeHexColor(requestedColor);
-            const used = new Set(inpaintMaskColors.map((entry) => entry.color));
-            if (!used.has(requested)) {
-              return requested;
-            }
-            for (const color of inpaintColorPalette) {
-              if (!used.has(color)) {
-                return color;
-              }
-            }
-            for (let index = 0; index < 32; index += 1) {
-              const color = "#" + Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, "0");
-              if (!used.has(color)) {
-                return color;
-              }
-            }
-            return requested;
-          }
-
-          function renderInpaintControls() {
-            syncInpaintPromptValuesFromDom();
-            inpaintBrushLabel.textContent = inpaintBrush.value;
-            inpaintSwatches.innerHTML = "";
-            inpaintPrompts.innerHTML = "";
-            for (const entry of inpaintMaskColors) {
-              const row = document.createElement("div");
-              row.className = "editor-inpaint-color-row";
-              row.dataset.color = entry.color;
-              row.dataset.active = entry.color === activeInpaintColor ? "true" : "false";
-              const dot = document.createElement("button");
-              dot.type = "button";
-              dot.className = "editor-inpaint-color-dot";
-              dot.style.setProperty("--inpaint-color", entry.color);
-              dot.dataset.color = entry.color;
-              dot.setAttribute("aria-label", "Use mask color " + entry.color);
-              dot.setAttribute("title", entry.color);
-              const colorTools = document.createElement("div");
-              colorTools.className = "editor-inpaint-color-tools";
-              colorTools.append(dot);
-              if (inpaintMaskColors.length > 1) {
-                const removeColor = document.createElement("button");
-                removeColor.type = "button";
-                removeColor.className = "editor-inpaint-color-remove";
-                removeColor.dataset.editorInpaintRemoveColor = entry.color;
-                removeColor.setAttribute("aria-label", "Remove mask color " + entry.color);
-                removeColor.setAttribute("title", "Remove color");
-                removeColor.innerHTML = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M5 5l10 10"></path><path d="M15 5 5 15"></path></svg>';
-                removeColor.addEventListener("click", (event) => {
-                  event.preventDefault();
-                  event.stopPropagation();
-                  removeInpaintColor(entry.color);
-                });
-                colorTools.append(removeColor);
-              }
-              const prompt = document.createElement("textarea");
-              prompt.className = "editor-inpaint-prompt";
-              prompt.dataset.color = entry.color;
-              prompt.value = entry.prompt || "";
-              prompt.placeholder = "In color " + entry.color + " replace with...";
-              const stack = document.createElement("div");
-              stack.className = "editor-inpaint-prompt-stack";
-              const field = document.createElement("div");
-              field.className = "editor-inpaint-prompt-field";
-              const tools = document.createElement("div");
-              tools.className = "editor-inpaint-attachment-tools";
-              const attach = document.createElement("button");
-              attach.type = "button";
-              attach.className = "editor-inpaint-attach-button";
-              attach.dataset.editorInpaintAttachScope = "color";
-              attach.dataset.color = entry.color;
-              attach.setAttribute("aria-label", "Attach reference image for " + entry.color);
-              attach.setAttribute("title", "Attach reference image");
-              attach.innerHTML = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m8.1 10.7 4.8-4.8a2.5 2.5 0 0 1 3.5 3.5l-6.1 6.1a4 4 0 0 1-5.7-5.7l6.3-6.3"></path><path d="m10 8.8-4.1 4.1a1.6 1.6 0 0 0 2.3 2.3l5.6-5.6"></path></svg>';
-              const chips = document.createElement("span");
-              chips.className = "editor-inpaint-attachment-chips";
-              chips.dataset.editorInpaintAttachments = "color";
-              chips.dataset.color = entry.color;
-              field.append(prompt, attach);
-              tools.append(chips);
-              stack.append(field, tools);
-              row.append(colorTools, stack);
-              inpaintPrompts.append(row);
-            }
-            renderAllAttachmentChips();
-          }
-
-          function redrawInpaintMask() {
-            const ctx = inpaintCanvas.getContext("2d");
-            if (!ctx) return;
-            ctx.clearRect(0, 0, inpaintCanvas.width, inpaintCanvas.height);
-            ctx.lineCap = "round";
-            ctx.lineJoin = "round";
-            for (const stroke of inpaintStrokes) {
-              if (!stroke.points || stroke.points.length < 1) continue;
-              ctx.strokeStyle = stroke.color;
-              ctx.lineWidth = stroke.size;
-              ctx.globalAlpha = 1;
-              ctx.beginPath();
-              ctx.moveTo(stroke.points[0].x, stroke.points[0].y);
-              if (stroke.points.length === 1) {
-                ctx.lineTo(stroke.points[0].x + 0.01, stroke.points[0].y + 0.01);
-              } else {
-                for (let index = 1; index < stroke.points.length; index += 1) {
-                  ctx.lineTo(stroke.points[index].x, stroke.points[index].y);
-                }
-              }
-              ctx.stroke();
-            }
-          }
-
-          function syncInpaintCanvasSize() {
-            if (!inpaintImage.naturalWidth || !inpaintImage.naturalHeight) return;
-            if (inpaintCanvas.width !== inpaintImage.naturalWidth || inpaintCanvas.height !== inpaintImage.naturalHeight) {
-              inpaintCanvas.width = inpaintImage.naturalWidth;
-              inpaintCanvas.height = inpaintImage.naturalHeight;
-              redrawInpaintMask();
-            }
-            updateBrushCursorSize();
-          }
-
-          function getInpaintPoint(event) {
-            const rect = inpaintCanvas.getBoundingClientRect();
-            return {
-              x: Math.max(0, Math.min(inpaintCanvas.width, (event.clientX - rect.left) * (inpaintCanvas.width / rect.width))),
-              y: Math.max(0, Math.min(inpaintCanvas.height, (event.clientY - rect.top) * (inpaintCanvas.height / rect.height)))
-            };
-          }
-
-          function beginInpaintStroke(event) {
-            if (!sourceImageUrl || !inpaintCanvas.width || inpaintSubmit.disabled) return;
-            event.preventDefault();
-            inpaintCanvas.setPointerCapture(event.pointerId);
-            isInpaintPainting = true;
-            currentInpaintStroke = {
-              color: activeInpaintColor,
-              size: Number(inpaintBrush.value) || 40,
-              points: [getInpaintPoint(event)]
-            };
-            inpaintStrokes.push(currentInpaintStroke);
-            redoStrokes = [];
-            redrawInpaintMask();
-          }
-
-          function continueInpaintStroke(event) {
-            if (!isInpaintPainting || !currentInpaintStroke) return;
-            event.preventDefault();
-            currentInpaintStroke.points.push(getInpaintPoint(event));
-            redrawInpaintMask();
-          }
-
-          function endInpaintStroke(event) {
-            if (!isInpaintPainting) return;
-            event.preventDefault();
-            isInpaintPainting = false;
-            currentInpaintStroke = null;
-            try {
-              inpaintCanvas.releasePointerCapture(event.pointerId);
-            } catch {}
-          }
-
-          function addInpaintColor(color) {
-            syncInpaintPromptValuesFromDom();
-            const normalized = pickNextInpaintColor(color);
-            if (!inpaintMaskColors.some((entry) => entry.color === normalized)) {
-              inpaintMaskColors.push({ color: normalized, prompt: "" });
-            }
-            activeInpaintColor = normalized;
-            inpaintColorPicker.value = normalized;
-            renderInpaintControls();
-          }
-
-          function removeInpaintColor(color) {
-            syncInpaintPromptValuesFromDom();
-            const normalized = normalizeHexColor(color);
-            if (inpaintMaskColors.length <= 1 || !inpaintMaskColors.some((entry) => entry.color === normalized)) {
-              setStatus("Keep at least one mask color.", "error");
-              return;
-            }
-            inpaintMaskColors = inpaintMaskColors.filter((entry) => entry.color !== normalized);
-            inpaintAttachments = inpaintAttachments.filter((attachment) => attachment.scope !== "color" || attachment.color !== normalized);
-            inpaintStrokes = inpaintStrokes.filter((stroke) => normalizeHexColor(stroke.color) !== normalized);
-            redoStrokes = redoStrokes.filter((stroke) => normalizeHexColor(stroke.color) !== normalized);
-            if (activeInpaintColor === normalized) {
-              activeInpaintColor = inpaintMaskColors[0]?.color || "#ff2d55";
-              inpaintColorPicker.value = activeInpaintColor;
-            }
-            redrawInpaintMask();
-            renderInpaintControls();
-            setStatus("", "");
-          }
-
-          function selectInpaintColor(color) {
-            activeInpaintColor = normalizeHexColor(color);
-            inpaintColorPicker.value = activeInpaintColor;
-            for (const row of Array.from(inpaintPrompts.querySelectorAll(".editor-inpaint-color-row"))) {
-              if (row instanceof HTMLElement) {
-                row.dataset.active = row.dataset.color === activeInpaintColor ? "true" : "false";
-              }
-            }
-          }
-
-          function updateInpaintPrompt(color, prompt) {
-            const normalized = normalizeHexColor(color);
-            inpaintMaskColors = inpaintMaskColors.map((entry) => (
-              entry.color === normalized ? { ...entry, prompt: String(prompt || "") } : entry
-            ));
-          }
-
-          function buildInpaintInstruction() {
-            const globalPrompt = inpaintGlobalPrompt.value.trim();
-            const regions = inpaintMaskColors
-              .map((entry) => ({ color: entry.color.toUpperCase(), prompt: String(entry.prompt || "").trim() }))
-              .filter((entry) => entry.prompt);
-            if (!globalPrompt && !regions.length) return "";
-            const attachmentNotes = inpaintAttachments.map((attachment, index) => {
-              const label = "reference image " + (index + 1) + " (" + (attachment.fileName || "attachment") + ")";
-              return attachment.scope === "global"
-                ? label + " applies to the whole image instruction"
-                : label + " applies only to the UI mask color " + String(attachment.color || "").toUpperCase();
-            });
-            return [
-              "INPAINTING SYSTEM WRAPPER:",
-              "You are editing an existing image with an alpha mask. Treat transparent mask pixels as the only editable region. Everything outside the editable mask must remain the same image: preserve identity, layout, pose, camera angle, framing, background, lighting, colors, textures, text, logos, and all unmasked details.",
-              "Do not redraw, reinterpret, beautify, crop, zoom, rotate, expand, stylize, or otherwise alter unmasked content. Do not render the UI mask colors; they are labels only.",
-              "The final image must keep the original dimensions and aspect ratio unless the user explicitly asks for a dimension change.",
-              globalPrompt ? "Whole image prompt: " + globalPrompt + ". Apply this only as guidance for the masked edit and overall consistency; it does not permit changing unmasked content." : "",
-              regions.map((entry) => (
-                "Masked region " + entry.color + ": replace only that marked area with " + entry.prompt + ". Match the surrounding perspective, lighting, grain, shadows, and edge blending."
-              )).join(" "),
-              attachmentNotes.length ? "Reference image scope: " + attachmentNotes.join("; ") + ". Use each reference only for its stated scope and do not copy unrelated reference details into unmasked areas." : ""
-            ].filter(Boolean).join(" ");
-          }
-
-          function getInpaintAspectRatio() {
-            const width = inpaintCanvas.width || inpaintImage.naturalWidth || 0;
-            const height = inpaintCanvas.height || inpaintImage.naturalHeight || 0;
-            if (!width || !height) return undefined;
-            const ratio = width / height;
-            if (Math.abs(ratio - 1) < 0.08) return "1:1";
-            if (ratio > 1) return ratio >= 1.55 ? "16:9" : "4:3";
-            return ratio <= 0.65 ? "9:16" : "3:4";
-          }
-
-          function canvasToPngBlob(canvas) {
-            return new Promise((resolve, reject) => {
-              canvas.toBlob((blob) => blob ? resolve(blob) : reject(new Error("Unable to prepare image.")), "image/png");
-            });
-          }
-
-          async function createProviderMaskBlob() {
-            const maskCanvas = document.createElement("canvas");
-            maskCanvas.width = inpaintCanvas.width;
-            maskCanvas.height = inpaintCanvas.height;
-            const ctx = maskCanvas.getContext("2d");
-            if (!ctx) throw new Error("Unable to prepare mask image.");
-            ctx.fillStyle = "#ffffff";
-            ctx.fillRect(0, 0, maskCanvas.width, maskCanvas.height);
-            ctx.globalCompositeOperation = "destination-out";
-            ctx.lineCap = "round";
-            ctx.lineJoin = "round";
-            for (const stroke of inpaintStrokes) {
-              if (!stroke.points || stroke.points.length < 1) continue;
-              ctx.strokeStyle = "rgba(0, 0, 0, 1)";
-              ctx.lineWidth = stroke.size;
-              ctx.beginPath();
-              ctx.moveTo(stroke.points[0].x, stroke.points[0].y);
-              if (stroke.points.length === 1) {
-                ctx.lineTo(stroke.points[0].x + 0.01, stroke.points[0].y + 0.01);
-              } else {
-                for (let index = 1; index < stroke.points.length; index += 1) {
-                  ctx.lineTo(stroke.points[index].x, stroke.points[index].y);
-                }
-              }
-              ctx.stroke();
-            }
-            return canvasToPngBlob(maskCanvas);
-          }
-
-          function parseJsonResponse(response) {
-            return response.json().catch(() => ({}));
-          }
-
-          async function loadInpaintProviders() {
-            try {
-              const response = await fetch("/api/v1/user/me/provider-keys", { credentials: "same-origin" });
-              const payload = await parseJsonResponse(response);
-              if (!response.ok) return;
-              const supported = new Set(["openai", "gemini", "openrouter"]);
-              const providers = [];
-              const seen = new Set();
-              for (const key of Array.isArray(payload.provider_keys) ? payload.provider_keys : []) {
-                const provider = String(key.provider || "");
-                const status = String(key.status || "active");
-                const cooldownUntil = key.cooldown_until ? Date.parse(String(key.cooldown_until)) : 0;
-                if (!supported.has(provider) || status !== "active" || (cooldownUntil && cooldownUntil > Date.now()) || seen.has(provider)) {
-                  continue;
-                }
-                seen.add(provider);
-                providers.push(provider);
-              }
-              inpaintProviderSelect.innerHTML = '<option value="">Auto</option>' + providers.map((provider) => (
-                '<option value="' + provider + '">' + provider.charAt(0).toUpperCase() + provider.slice(1) + '</option>'
-              )).join("");
-              inpaintProviderWrap.setAttribute("data-visible", providers.length > 1 ? "true" : "false");
-            } catch {}
-          }
-
-          async function uploadTemporaryBlob(blob, fileName, contentType) {
-            const presignResponse = await fetch("/api/v1/user/me/temporary-files/presign", {
-              method: "POST",
-              credentials: "same-origin",
-              headers: { "content-type": "application/json" },
-              body: JSON.stringify({
-                file_name: fileName,
-                content_type: contentType,
-                size_bytes: blob.size,
-                folder_path: "inpaint"
-              })
-            });
-            const presignPayload = await parseJsonResponse(presignResponse);
-            if (!presignResponse.ok || !presignPayload || !presignPayload.transport) {
-              throw new Error(presignPayload && presignPayload.error ? presignPayload.error : "Unable to prepare upload.");
-            }
-            if (presignPayload.transport === "server") {
-              const formData = new FormData();
-              formData.append(presignPayload.upload?.form_field || "file", new File([blob], fileName, { type: contentType }));
-              formData.append("folder_path", "inpaint");
-              const uploadResponse = await fetch(presignPayload.upload?.url || "/api/v1/user/me/temporary-files/upload", {
-                method: presignPayload.upload?.method || "POST",
-                credentials: "same-origin",
-                body: formData
-              });
-              const uploadPayload = await parseJsonResponse(uploadResponse);
-              if (!uploadResponse.ok || !uploadPayload.file) {
-                throw new Error(uploadPayload.error || "Unable to upload file.");
-              }
-              return uploadPayload.file.viewUrl || uploadPayload.file.view_url || uploadPayload.file.s3Url || uploadPayload.file.s3_url;
-            }
-            const uploadResponse = await fetch(presignPayload.upload.url, {
-              method: presignPayload.upload.method,
-              headers: presignPayload.upload.headers,
-              body: blob
-            });
-            if (!uploadResponse.ok) throw new Error("Upload failed with status " + uploadResponse.status + ".");
-            const finalizeResponse = await fetch("/api/v1/user/me/temporary-files", {
-              method: "POST",
-              credentials: "same-origin",
-              headers: { "content-type": "application/json" },
-              body: JSON.stringify({
-                file_id: presignPayload.file_id,
-                file_name: presignPayload.file_name,
-                content_type: presignPayload.content_type,
-                size_bytes: blob.size,
-                storage_key: presignPayload.storage_key,
-                folder_path: presignPayload.folder_path || "inpaint"
-              })
-            });
-            const finalizePayload = await parseJsonResponse(finalizeResponse);
-            if (!finalizeResponse.ok || !finalizePayload.file) {
-              throw new Error(finalizePayload.error || "Unable to save file.");
-            }
-            return finalizePayload.file.viewUrl || finalizePayload.file.view_url || finalizePayload.file.s3Url || finalizePayload.file.s3_url;
-          }
-
-          function absoluteUrl(value) {
-            return new URL(value, window.location.href).toString();
-          }
-
-          function firstSearchParam(names) {
-            const params = new URLSearchParams(window.location.search);
-            for (const name of names) {
-              const value = params.get(name);
-              if (value && value.trim()) return value.trim();
-            }
-            return "";
-          }
-
-          function sourceNameFromUrl(value) {
-            try {
-              const pathName = new URL(value, window.location.href).pathname;
-              const fileName = decodeURIComponent(pathName.split("/").filter(Boolean).pop() || "");
-              return fileName || "Source image";
-            } catch {
-              return "Source image";
-            }
-          }
-
-          function loadSourceUrl(value) {
-            if (!value) return;
-            let url = "";
-            try {
-              url = absoluteUrl(value);
-            } catch {
-              setStatus("The source image URL is invalid.", "error");
-              return;
-            }
-            sourceImageUrl = url;
-            sourceImageName = firstSearchParam(["source_image_name", "image_name", "file_name"]) || sourceNameFromUrl(url);
-            sourceName.textContent = sourceImageName;
-            emptyState.hidden = true;
-            canvasWrap.hidden = false;
-            outputPanel.hidden = true;
-            resultImage.removeAttribute("src");
-            resultDownload.href = "#";
-            resultDownload.removeAttribute("download");
-            resetMask();
-            inpaintImage.onload = () => {
-              syncInpaintCanvasSize();
-              resetMask();
-            };
-            inpaintImage.src = sourceImageUrl;
-            setStatus("Source ready from URL.", "success");
-          }
-
-          function clearInpaintUrlParams() {
-            const url = new URL(window.location.href);
-            for (const key of ["tracer", "tracer_id", "trace", "source_image_url", "image_url", "input_image_url", "image", "source_image_name", "image_name", "file_name"]) {
-              url.searchParams.delete(key);
-            }
-            window.history.replaceState({}, "", url.toString());
-          }
-
-          function initializeFromUrl() {
-            tracerInput.value = firstSearchParam(["tracer", "tracer_id", "trace"]) || makeTracerId();
-            loadSourceUrl(firstSearchParam(["source_image_url", "image_url", "input_image_url", "image"]));
-          }
-
-          async function addAttachmentFilesForScope(files, scope) {
-            if (!scope) return;
-            const selected = Array.from(files || []);
-            if (!selected.length) return;
-            if (inpaintAttachments.length + selected.length > maxInpaintAttachments) {
-              setStatus("Use up to " + maxInpaintAttachments + " reference images.", "error");
-              return;
-            }
-            const previousDisabled = inpaintSubmit.disabled;
-            inpaintSubmit.disabled = true;
-            setStatus("Uploading reference image...", "");
-            try {
-              for (const file of selected) {
-                if (!isAllowedInpaintAttachment(file)) {
-                  throw new Error("Reference attachments must be JPEG, PNG, or WebP images.");
-                }
-                const fileName = file.name || "reference.png";
-                const uploadedUrl = await uploadTemporaryBlob(file, fileName, file.type || "image/png");
-                inpaintAttachments.push({
-                  id: attachmentId(),
-                  scope: scope.scope === "color" ? "color" : "global",
-                  color: scope.scope === "color" ? normalizeHexColor(scope.color) : "",
-                  fileName,
-                  url: absoluteUrl(uploadedUrl)
-                });
-              }
-              renderAllAttachmentChips();
-              setStatus("Reference image ready.", "success");
-            } catch (error) {
-              console.error(error);
-              setStatus(error instanceof Error ? error.message : "Unable to upload reference image.", "error");
-            } finally {
-              inpaintSubmit.disabled = previousDisabled;
-            }
-          }
-
-          async function addAttachmentFiles(files) {
-            const scope = pendingInpaintAttachmentScope;
-            pendingInpaintAttachmentScope = null;
-            await addAttachmentFilesForScope(files, scope);
-          }
-
-          function resetMask() {
-            inpaintStrokes = [];
-            redoStrokes = [];
-            currentInpaintStroke = null;
-            isInpaintPainting = false;
-            redrawInpaintMask();
-          }
-
-          function resetWorkspace() {
-            sourceImageUrl = "";
-            sourceImageName = "";
-            sourceName.textContent = "No image selected";
-            emptyState.hidden = false;
-            canvasWrap.hidden = true;
-            outputPanel.hidden = true;
-            resultImage.removeAttribute("src");
-            resultDownload.href = "#";
-            resultDownload.removeAttribute("download");
-            inpaintImage.removeAttribute("src");
-            inpaintCanvas.width = 1;
-            inpaintCanvas.height = 1;
-            inpaintGlobalPrompt.value = "";
-            inpaintMaskColors = [{ color: "#ff2d55", prompt: "" }];
-            inpaintAttachments = [];
-            pendingInpaintAttachmentScope = null;
-            activeInpaintColor = "#ff2d55";
-            inpaintColorPicker.value = activeInpaintColor;
-            resetMask();
-            renderInpaintControls();
-            setStatus("", "");
-          }
-
-          async function loadSourceFile(file) {
-            if (!file || !file.type.startsWith("image/")) {
-              setStatus("Choose an image file.", "error");
-              return;
-            }
-            uploadButton.disabled = true;
-            inpaintSubmit.disabled = true;
-            setStatus("Uploading source image...", "");
-            try {
-              const fileName = file.name || "source.png";
-              const uploadedUrl = await uploadTemporaryBlob(file, fileName, file.type || "image/png");
-              sourceImageUrl = absoluteUrl(uploadedUrl);
-              sourceImageName = fileName;
-              sourceName.textContent = fileName;
-              emptyState.hidden = true;
-              canvasWrap.hidden = false;
-              outputPanel.hidden = true;
-              resultImage.removeAttribute("src");
-              resultDownload.href = "#";
-              resultDownload.removeAttribute("download");
-              resetMask();
-              inpaintImage.onload = () => {
-                syncInpaintCanvasSize();
-                resetMask();
-              };
-              inpaintImage.src = sourceImageUrl;
-              setStatus("Source ready.", "success");
-            } catch (error) {
-              console.error(error);
-              setStatus(error instanceof Error ? error.message : "Unable to upload source image.", "error");
-            } finally {
-              uploadButton.disabled = false;
-              inpaintSubmit.disabled = false;
-            }
-          }
-
-          function extractOutputUrl(payload) {
-            const result = payload && payload.result ? payload.result : {};
-            return result.output?.image?.file_url
-              || result.output?.primary_file_url
-              || result.image?.file_url
-              || result.primary_file_url
-              || (Array.isArray(result.output?.files) ? result.output.files[0] : "")
-              || (Array.isArray(result.files) ? result.files[0] : "");
-          }
-
-          function isPendingJobStatus(status) {
-            return ["queued", "running", "waiting_for_provider", "waiting_for_child", "waiting_for_human"].includes(String(status || ""));
-          }
-
-          function pendingHistoryItemKey(jobId) {
-            return "job:" + String(jobId || "");
-          }
-
-          function makePendingInpaintHistoryItem(input) {
-            const jobId = String(input?.jobId || input?.job_id || "");
-            if (!jobId) return null;
-            return {
-              key: pendingHistoryItemKey(jobId),
-              kind: "pending",
-              jobId,
-              status: String(input?.status || "queued"),
-              progress: Number(input?.progress || 0),
-              createdAt: String(input?.createdAt || input?.created_at || new Date().toISOString()),
-              updatedAt: String(input?.updatedAt || input?.updated_at || new Date().toISOString())
-            };
-          }
-
-          function upsertInpaintHistoryItem(item) {
-            if (!item || !item.key) return;
-            inpaintHistoryItems = inpaintHistoryItems.filter((entry) => (
-              entry.key !== item.key
-              && (!item.jobId || entry.jobId !== item.jobId)
-            ));
-            inpaintHistoryItems.unshift(item);
-            inpaintHistoryItems.sort((a, b) => Date.parse(b.createdAt || 0) - Date.parse(a.createdAt || 0));
-            renderInpaintHistory();
-          }
-
-          function applyCompletedInpaintJob(payload) {
-            const outputUrl = extractOutputUrl(payload);
-            if (!outputUrl) return "";
-            const url = absoluteUrl(outputUrl);
-            const jobId = String(payload?.job_id || payload?.jobId || "");
-            resultImage.src = url;
-            resultDownload.href = url;
-            resultDownload.setAttribute("download", "inpaint-" + Date.now() + ".png");
-            outputPanel.hidden = false;
-            upsertInpaintHistoryItem({
-              key: historyItemKey({ jobId: jobId || "inpaint" }, url, 0),
-              kind: "output",
-              jobId,
-              url,
-              createdAt: String(payload?.completed_at || payload?.updated_at || new Date().toISOString())
-            });
-            return url;
-          }
-
-          function historyEntryUrls(entry) {
-            const urls = Array.isArray(entry?.outputMediaUrls) ? entry.outputMediaUrls : [];
-            return urls.filter((url) => {
-              const value = String(url || "");
-              if (!/\\.(png|jpe?g|webp|gif|avif)(\\?|#|$)/i.test(value)) {
-                return false;
-              }
-              try {
-                const parsed = new URL(value, window.location.href);
-                const storageKey = parsed.searchParams.get("key") || decodeURIComponent(parsed.pathname).replace(/^\\/+/, "");
-                return !/\\/temporary\\/inpaint(?:-|\\/|$)/i.test(storageKey)
-                  && !/\\/temporary\\/inpaint-masks(?:\\/|$)/i.test(storageKey)
-                  && !/inpaint-mask-[^/]+\\.png/i.test(storageKey);
-              } catch {
-                return !/\\/temporary\\/inpaint(?:-|\\/|$)/i.test(value)
-                  && !/\\/temporary\\/inpaint-masks(?:\\/|$)/i.test(value)
-                  && !/inpaint-mask-[^/]+\\.png/i.test(value);
-              }
-            });
-          }
-
-          function isInpaintHistoryEntry(entry) {
-            const templateId = String(entry?.linkedJob?.template_id || entry?.linkedJob?.templateId || "").toLowerCase();
-            const path = String(entry?.path || "").toLowerCase();
-            return templateId === "primitive:image_inpaint"
-              || path.includes("/primitives/images/inpaint")
-              || path.includes("/primitives/image_inpaint");
-          }
-
-          function historyItemKey(entry, url, index) {
-            return String(entry?.jobId || entry?.job_id || entry?.id || "inpaint") + ":" + index + ":" + String(url || "");
-          }
-
-          function setHistoryEmpty(message) {
-            historyList.innerHTML = "";
-            const empty = document.createElement("div");
-            empty.className = "custom-inpaint-history-empty";
-            empty.textContent = message;
-            historyList.append(empty);
-          }
-
-          function renderInpaintHistory() {
-            historyList.innerHTML = "";
-            const visible = inpaintHistoryItems.filter((item) => !hiddenInpaintHistoryKeys.has(item.key));
-            if (!visible.length) {
-              setHistoryEmpty("No inpaint outputs yet.");
-              return;
-            }
-            for (const item of visible) {
-              const row = document.createElement("div");
-              row.className = "custom-inpaint-history-item";
-              row.dataset.historyKey = item.key;
-              let thumbButton;
-              if (item.kind === "pending") {
-                thumbButton = document.createElement("div");
-                thumbButton.className = "custom-inpaint-history-generating";
-                thumbButton.setAttribute("aria-label", "Image edit generating");
-                thumbButton.setAttribute("role", "img");
-              } else {
-                thumbButton = document.createElement("button");
-                thumbButton.type = "button";
-                thumbButton.className = "custom-inpaint-history-thumb-button";
-                thumbButton.dataset.historyPreview = item.key;
-                thumbButton.setAttribute("aria-label", "View inpaint output");
-                const thumb = document.createElement("img");
-                thumb.className = "custom-inpaint-history-thumb";
-                thumb.src = item.url;
-                thumb.alt = "Image edit output";
-                thumb.loading = "lazy";
-                thumbButton.append(thumb);
-              }
-              const meta = document.createElement("div");
-              meta.className = "custom-inpaint-history-meta";
-              const title = document.createElement("div");
-              title.className = "custom-inpaint-history-title";
-              title.textContent = item.kind === "pending"
-                ? "Generating inpaint"
-              : (item.createdAt ? new Date(item.createdAt).toLocaleString() : "Image edit output");
-              if (item.kind === "pending") {
-                const subtitle = document.createElement("div");
-                subtitle.className = "custom-inpaint-history-subtitle";
-                const progress = Number(item.progress || 0);
-                subtitle.textContent = "Job " + (item.status || "queued") + (progress > 0 ? " · " + Math.round(progress * 100) + "%" : "");
-                meta.append(title, subtitle);
-              } else {
-                meta.append(title);
-              }
-              const actions = document.createElement("div");
-              actions.className = "custom-inpaint-history-actions";
-              if (item.kind === "pending") {
-                const check = document.createElement("button");
-                check.type = "button";
-                check.className = "custom-inpaint-history-check";
-                check.dataset.historyCheck = item.jobId || "";
-                check.textContent = "Check Status";
-                actions.append(check);
-              } else {
-                const download = document.createElement("a");
-                download.className = "custom-inpaint-history-icon";
-                download.href = item.url;
-                download.target = "_blank";
-                download.rel = "noopener noreferrer";
-                download.download = imageDownloadName("inpaint-history", item.createdAt);
-                download.setAttribute("aria-label", "Download inpaint output");
-                download.setAttribute("title", "Download");
-                download.innerHTML = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 3v9"></path><path d="m6.5 8.5 3.5 3.5 3.5-3.5"></path><path d="M4 16h12"></path></svg>';
-                const copy = document.createElement("button");
-                copy.type = "button";
-                copy.className = "custom-inpaint-history-icon";
-                copy.dataset.historyCopy = item.key;
-                copy.setAttribute("aria-label", "Copy inpaint output URL");
-                copy.setAttribute("title", "Copy URL");
-                copy.innerHTML = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8.4 11.6a3.2 3.2 0 0 0 4.5 0l2.2-2.2a3.2 3.2 0 0 0-4.5-4.5L9.4 6.1"></path><path d="M11.6 8.4a3.2 3.2 0 0 0-4.5 0L4.9 10.6a3.2 3.2 0 0 0 4.5 4.5l1.2-1.2"></path></svg>';
-                actions.append(download, copy);
-              }
-              const remove = document.createElement("button");
-              remove.type = "button";
-              remove.className = "custom-inpaint-history-icon";
-              remove.dataset.historyRemove = item.key;
-              remove.setAttribute("aria-label", "Remove inpaint output from history strip");
-              remove.setAttribute("title", "Remove");
-              remove.innerHTML = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 5l10 10"></path><path d="M15 5 5 15"></path></svg>';
-              actions.append(remove);
-              meta.append(actions);
-              const confirm = document.createElement("div");
-              confirm.className = "custom-inpaint-history-popconfirm";
-              confirm.hidden = true;
-              confirm.dataset.historyConfirm = item.key;
-              const confirmText = document.createElement("p");
-              confirmText.textContent = "Remove from this history strip?";
-              const confirmActions = document.createElement("div");
-              confirmActions.className = "custom-inpaint-history-popconfirm-actions";
-              const cancel = document.createElement("button");
-              cancel.type = "button";
-              cancel.dataset.historyCancel = item.key;
-              cancel.textContent = "Cancel";
-              const confirmRemove = document.createElement("button");
-              confirmRemove.type = "button";
-              confirmRemove.dataset.historyConfirmRemove = item.key;
-              confirmRemove.dataset.danger = "true";
-              confirmRemove.textContent = "Remove";
-              confirmActions.append(cancel, confirmRemove);
-              confirm.append(confirmText, confirmActions);
-              row.append(thumbButton, meta, confirm);
-              historyList.append(row);
-            }
-          }
-
-          function closeInpaintHistoryConfirms(exceptKey) {
-            historyList.querySelectorAll("[data-history-confirm]").forEach((entry) => {
-              if (!(entry instanceof HTMLElement)) return;
-              entry.hidden = exceptKey ? entry.dataset.historyConfirm !== exceptKey : true;
-            });
-          }
-
-          function extractInpaintHistoryItems(entries) {
-            const items = [];
-            const seen = new Set();
-            for (const entry of Array.isArray(entries) ? entries : []) {
-              if (!isInpaintHistoryEntry(entry)) continue;
-              const linkedJob = entry?.linkedJob || null;
-              if (linkedJob && isPendingJobStatus(linkedJob.status)) {
-                const pending = makePendingInpaintHistoryItem({
-                  job_id: linkedJob.job_id,
-                  status: linkedJob.status,
-                  progress: linkedJob.progress,
-                  created_at: linkedJob.created_at || entry.createdAt,
-                  updated_at: linkedJob.updated_at || entry.createdAt
-                });
-                if (pending && !seen.has(pending.key)) {
-                  seen.add(pending.key);
-                  items.push(pending);
-                }
-                continue;
-              }
-              historyEntryUrls(entry).forEach((rawUrl, index) => {
-                const url = absoluteUrl(rawUrl);
-                const key = historyItemKey(entry, url, index);
-                if (seen.has(key)) return;
-                seen.add(key);
-                items.push({
-                  key,
-                  kind: "output",
-                  jobId: String(entry?.jobId || entry?.job_id || entry?.linkedJob?.job_id || ""),
-                  url,
-                  createdAt: String(entry.createdAt || new Date().toISOString())
-                });
-              });
-            }
-            return items;
-          }
-
-          async function copyText(value) {
-            if (navigator.clipboard && window.isSecureContext) {
-              try {
-                await navigator.clipboard.writeText(value);
-                return true;
-              } catch {}
-            }
-            const field = document.createElement("textarea");
-            field.value = value;
-            field.setAttribute("readonly", "");
-            field.style.position = "fixed";
-            field.style.opacity = "0";
-            document.body.appendChild(field);
-            field.select();
-            let copied = false;
-            try {
-              copied = document.execCommand("copy");
-            } finally {
-              field.remove();
-            }
-            return copied;
-          }
-
-          async function loadInpaintHistory() {
-            const tracer = getTracerValue();
-            historyRefresh.disabled = true;
-            try {
-              const endpoint = new URL("/job-runs/history", window.location.origin);
-              endpoint.searchParams.set("limit", "120");
-              endpoint.searchParams.set("template_id", "primitive:image_inpaint");
-              endpoint.searchParams.set("tracer", tracer);
-              const response = await fetch(endpoint, { credentials: "same-origin" });
-              const payload = await parseJsonResponse(response);
-              if (!response.ok || (payload && payload.error)) throw new Error(payload.error || "Unable to load inpaint history.");
-              inpaintHistoryItems = extractInpaintHistoryItems(payload.entries);
-              renderInpaintHistory();
-            } catch (error) {
-              console.error(error);
-              setHistoryEmpty(error instanceof Error ? error.message : "Unable to load inpaint history.");
-            } finally {
-              historyRefresh.disabled = false;
-            }
-          }
-
-          async function checkInpaintJobStatus(jobId, button) {
-            if (!jobId) return null;
-            if (button instanceof HTMLButtonElement) {
-              button.disabled = true;
-              button.textContent = "Checking";
-            }
-            try {
-              const response = await fetch("/api/v1/primitives/image_inpaint/jobs/" + encodeURIComponent(jobId), {
-                credentials: "same-origin"
-              });
-              const payload = await parseJsonResponse(response);
-              if (!response.ok) throw new Error(payload.error || "Unable to check inpaint job.");
-              if (payload.status === "failed" || payload.status === "cancelled") {
-                const pending = makePendingInpaintHistoryItem(payload);
-                upsertInpaintHistoryItem({
-                  ...(pending || { key: pendingHistoryItemKey(jobId), kind: "pending", jobId, createdAt: new Date().toISOString() }),
-                  status: payload.status,
-                  progress: Number(payload.progress || 0)
-                });
-                throw new Error(payload.error?.message || "Image edit job " + payload.status + ".");
-              }
-              const outputUrl = extractOutputUrl(payload);
-              if (payload.status === "succeeded" || payload.status === "complete" || outputUrl) {
-                const url = applyCompletedInpaintJob(payload);
-                if (!url) throw new Error("Image edit completed without an output URL.");
-                setStatus("Image edit complete.", "success");
-                return payload;
-              }
-              upsertInpaintHistoryItem(makePendingInpaintHistoryItem(payload));
-              setStatus("Image edit job " + jobId + " is " + (payload.status || "running") + ".", "");
-              return payload;
-            } catch (error) {
-              console.error(error);
-              setStatus(error instanceof Error ? error.message : "Unable to check inpaint job.", "error");
-              return null;
-            } finally {
-              if (button instanceof HTMLButtonElement) {
-                button.disabled = false;
-                button.textContent = "Check Status";
-              }
-            }
-          }
-
-          async function pollInpaintJob(jobId) {
-            for (let attempt = 0; attempt < 90; attempt += 1) {
-              const response = await fetch("/api/v1/primitives/image_inpaint/jobs/" + encodeURIComponent(jobId), {
-                credentials: "same-origin"
-              });
-              const payload = await parseJsonResponse(response);
-              if (!response.ok) throw new Error(payload.error || "Unable to poll inpaint job.");
-              if (payload.status === "failed" || payload.status === "cancelled") {
-                throw new Error(payload.error?.message || "Image edit job " + payload.status + ".");
-              }
-              const outputUrl = extractOutputUrl(payload);
-              if (payload.status === "succeeded" || payload.status === "complete" || outputUrl) {
-                if (!outputUrl) throw new Error("Image edit completed without an output URL.");
-                applyCompletedInpaintJob(payload);
-                setStatus("Image edit complete.", "success");
-                return outputUrl;
-              }
-              upsertInpaintHistoryItem(makePendingInpaintHistoryItem(payload));
-              setStatus("Image edit job " + jobId + " is " + (payload.status || "running") + ".", "");
-              await new Promise((resolve) => window.setTimeout(resolve, attempt < 8 ? 1500 : 3000));
-            }
-            upsertInpaintHistoryItem(makePendingInpaintHistoryItem({ job_id: jobId, status: "running" }));
-            setStatus("Image edit job is still running. Use Check Status in History.", "");
-            return null;
-          }
-
-          async function submitInpaintJob() {
-            if (!sourceImageUrl || inpaintSubmit.disabled) {
-              setStatus("Upload a source image first.", "error");
-              return;
-            }
-            if (!inpaintStrokes.length) {
-              setStatus("Paint at least one mask region.", "error");
-              return;
-            }
-            const usedColors = new Set(inpaintStrokes.map((stroke) => normalizeHexColor(stroke.color)));
-            const globalPrompt = inpaintGlobalPrompt.value.trim();
-            const missingPromptColor = inpaintMaskColors.find((entry) => usedColors.has(entry.color) && !String(entry.prompt || "").trim());
-            if (!globalPrompt && missingPromptColor) {
-              setStatus("Add a replacement prompt for " + missingPromptColor.color.toUpperCase() + ".", "error");
-              return;
-            }
-            const instruction = buildInpaintInstruction();
-            if (!instruction) {
-              setStatus("Add a replacement prompt for at least one color.", "error");
-              return;
-            }
-            setSubmitLoading(true);
-            uploadButton.disabled = true;
-            setStatus("Uploading masks...", "");
-            try {
-              const maskUrl = await uploadTemporaryBlob(await createProviderMaskBlob(), "inpaint-mask-" + Date.now() + ".png", "image/png");
-              const tracer = getTracerValue();
-              setStatus("Creating image edit job...", "");
-              const response = await fetch("/api/v1/primitives/images/inpaint", {
-                method: "POST",
-                credentials: "same-origin",
-                headers: { "content-type": "application/json" },
-                body: JSON.stringify({
-                  tracer,
-                  payload: {
-                    source_image_url: sourceImageUrl,
-                    mask_url: absoluteUrl(maskUrl),
-                    instruction,
-                    reference_attachments: inpaintAttachments.map((attachment) => attachment.url),
-                    ...(inpaintProviderSelect.value ? { provider: inpaintProviderSelect.value } : {}),
-                    size: "auto",
-                    ...(getInpaintAspectRatio() ? { aspect_ratio: getInpaintAspectRatio() } : {}),
-                    output_format: "png"
-                  }
-                })
-              });
-              const payload = await parseJsonResponse(response);
-              if (!response.ok) throw new Error(payload.error || "Unable to create image edit job.");
-              setStatus("Image edit job " + (payload.job_id || "") + " started.", "success");
-              upsertInpaintHistoryItem(makePendingInpaintHistoryItem(payload));
-              await pollInpaintJob(payload.job_id);
-              await loadInpaintHistory();
-            } catch (error) {
-              console.error(error);
-              setStatus(error instanceof Error ? error.message : "Unable to create image edit.", "error");
-            } finally {
-              setSubmitLoading(false);
-              uploadButton.disabled = false;
-            }
-          }
-
-          renderInpaintControls();
-          void loadInpaintProviders();
-          initializeFromUrl();
-          void loadInpaintHistory();
-          uploadButton.addEventListener("click", () => fileInput.click());
-          historyRefresh.addEventListener("click", () => {
-            void loadInpaintHistory();
-          });
-          historyList.addEventListener("pointerdown", (event) => {
-            const target = event.target;
-            if (target instanceof Element && target.closest("[data-history-confirm]")) {
-              event.stopPropagation();
-            }
-          });
-          historyList.addEventListener("click", (event) => {
-            const target = event.target;
-            if (!(target instanceof Element)) return;
-            const confirmPopover = target.closest("[data-history-confirm]");
-            if (confirmPopover instanceof HTMLElement) {
-              event.stopPropagation();
-            }
-            const previewButton = target.closest("[data-history-preview]");
-            if (previewButton instanceof HTMLElement) {
-              const key = previewButton.dataset.historyPreview || "";
-              const item = inpaintHistoryItems.find((entry) => entry.key === key);
-              if (!item) return;
-              openImagePreview(item.url, item.createdAt ? new Date(item.createdAt).toLocaleString() : "Image edit output", imageDownloadName("image-edit-history", item.createdAt));
-              return;
-            }
-            const copyButton = target.closest("[data-history-copy]");
-            if (copyButton instanceof HTMLElement) {
-              const key = copyButton.dataset.historyCopy || "";
-              const item = inpaintHistoryItems.find((entry) => entry.key === key);
-              if (!item) return;
-              void copyText(item.url).then((copied) => {
-                copyButton.setAttribute("title", copied ? "Copied" : "Copy failed");
-                window.setTimeout(() => copyButton.setAttribute("title", "Copy URL"), 1200);
-              });
-              return;
-            }
-            const checkButton = target.closest("[data-history-check]");
-            if (checkButton instanceof HTMLButtonElement) {
-              void checkInpaintJobStatus(checkButton.dataset.historyCheck || "", checkButton);
-              return;
-            }
-            const removeButton = target.closest("[data-history-remove]");
-            if (removeButton instanceof HTMLElement) {
-              const key = removeButton.dataset.historyRemove || "";
-              const confirm = historyList.querySelector('[data-history-confirm="' + CSS.escape(key) + '"]');
-              const shouldOpen = !(confirm instanceof HTMLElement) || confirm.hidden;
-              closeInpaintHistoryConfirms();
-              if (confirm instanceof HTMLElement) {
-                confirm.hidden = !shouldOpen;
-              }
-              removeButton.setAttribute("aria-expanded", shouldOpen ? "true" : "false");
-              return;
-            }
-            const cancelButton = target.closest("[data-history-cancel]");
-            if (cancelButton instanceof HTMLElement) {
-              const confirm = cancelButton.closest("[data-history-confirm]");
-              if (confirm instanceof HTMLElement) confirm.hidden = true;
-              return;
-            }
-            const confirmRemove = target.closest("[data-history-confirm-remove]");
-            if (confirmRemove instanceof HTMLElement) {
-              const key = confirmRemove.dataset.historyConfirmRemove || "";
-              if (key) {
-                hiddenInpaintHistoryKeys.add(key);
-                renderInpaintHistory();
-              }
-              return;
-            }
-          });
-          resultOpenButton.addEventListener("click", () => {
-            if (!resultImage.currentSrc && !resultImage.src) return;
-            openImagePreview(resultImage.currentSrc || resultImage.src, "Image edit result", imageDownloadName("image-edit-result"));
-          });
-          lightboxCopy.addEventListener("click", () => {
-            const url = lightboxCopy.dataset.copyUrl || lightboxImage.currentSrc || lightboxImage.src || "";
-            if (!url) return;
-            void copyText(url).then((copied) => {
-              lightboxCopy.setAttribute("title", copied ? "Copied" : "Copy failed");
-              window.setTimeout(() => lightboxCopy.setAttribute("title", "Copy URL"), 1200);
-            });
-          });
-          lightboxClose.addEventListener("click", () => closeImagePreview());
-          lightbox.addEventListener("click", (event) => {
-            if (event.target === lightbox) closeImagePreview();
-          });
-          startNewButton.addEventListener("click", () => {
-            tracerInput.value = makeTracerId();
-            clearInpaintUrlParams();
-            resetWorkspace();
-            void loadInpaintHistory();
-          });
-          tracerInput.addEventListener("input", () => {
-            queueInpaintHistoryReload();
-          });
-          fileInput.addEventListener("change", () => {
-            void loadSourceFile(fileInput.files && fileInput.files[0]);
-            fileInput.value = "";
-          });
-          inpaintAttachmentInput.addEventListener("change", () => {
-            void addAttachmentFiles(inpaintAttachmentInput.files);
-            inpaintAttachmentInput.value = "";
-          });
-          inpaintGlobalAttachments.addEventListener("click", (event) => {
-            const target = event.target;
-            if (!(target instanceof Element)) return;
-            const removeColor = target.closest("[data-editor-inpaint-remove-color]");
-            if (removeColor instanceof HTMLElement && removeColor.dataset.editorInpaintRemoveColor) {
-              removeInpaintColor(removeColor.dataset.editorInpaintRemoveColor);
-              return;
-            }
-            const remove = target.closest("[data-editor-inpaint-remove-attachment]");
-            if (remove instanceof HTMLElement) {
-              inpaintAttachments = inpaintAttachments.filter((attachment) => attachment.id !== remove.dataset.editorInpaintRemoveAttachment);
-              renderAllAttachmentChips();
-            }
-          });
-          document.querySelector('[data-editor-inpaint-attach-scope="global"]')?.addEventListener("click", () => {
-            openAttachmentPicker("global");
-          });
-          inpaintGlobalPrompt.addEventListener("paste", (event) => {
-            handleAttachmentPaste(event, "global");
-          });
-          inpaintUndo.addEventListener("click", () => {
-            const stroke = inpaintStrokes.pop();
-            if (stroke) redoStrokes.push(stroke);
-            redrawInpaintMask();
-            setStatus("", "");
-          });
-          inpaintRedo.addEventListener("click", () => {
-            const stroke = redoStrokes.pop();
-            if (stroke) inpaintStrokes.push(stroke);
-            redrawInpaintMask();
-            setStatus("", "");
-          });
-          inpaintClear.addEventListener("click", () => {
-            resetMask();
-            setStatus("", "");
-          });
-          inpaintBrush.addEventListener("input", () => {
-            inpaintBrushLabel.textContent = inpaintBrush.value;
-            updateBrushCursorSize();
-          });
-          inpaintColorPicker.addEventListener("input", () => {
-            activeInpaintColor = normalizeHexColor(inpaintColorPicker.value);
-            renderInpaintControls();
-          });
-          inpaintAddColor.addEventListener("click", () => addInpaintColor(inpaintColorPicker.value));
-          inpaintPrompts.addEventListener("click", (event) => {
-            const target = event.target;
-            if (!(target instanceof Element)) return;
-            const remove = target.closest("[data-editor-inpaint-remove-attachment]");
-            if (remove instanceof HTMLElement) {
-              inpaintAttachments = inpaintAttachments.filter((attachment) => attachment.id !== remove.dataset.editorInpaintRemoveAttachment);
-              renderAllAttachmentChips();
-              return;
-            }
-            const attach = target.closest("[data-editor-inpaint-attach-scope]");
-            if (attach instanceof HTMLElement && attach.dataset.editorInpaintAttachScope === "color" && attach.dataset.color) {
-              openAttachmentPicker("color", attach.dataset.color);
-              return;
-            }
-            const row = target.closest(".editor-inpaint-color-row");
-            if (row instanceof HTMLElement && row.dataset.color) selectInpaintColor(row.dataset.color);
-          });
-          inpaintPrompts.addEventListener("focusin", (event) => {
-            const target = event.target;
-            if (!(target instanceof Element)) return;
-            const row = target.closest(".editor-inpaint-color-row");
-            if (row instanceof HTMLElement && row.dataset.color) selectInpaintColor(row.dataset.color);
-          });
-          inpaintPrompts.addEventListener("input", (event) => {
-            const target = event.target;
-            if (target instanceof HTMLTextAreaElement) updateInpaintPrompt(target.dataset.color || "", target.value);
-          });
-          inpaintPrompts.addEventListener("paste", (event) => {
-            const target = event.target;
-            if (target instanceof HTMLTextAreaElement && target.dataset.color) {
-              handleAttachmentPaste(event, "color", target.dataset.color);
-            }
-          });
-          inpaintCanvas.addEventListener("pointerenter", (event) => updateBrushCursorPosition(event));
-          inpaintCanvas.addEventListener("pointerdown", (event) => {
-            updateBrushCursorPosition(event);
-            beginInpaintStroke(event);
-          });
-          inpaintCanvas.addEventListener("pointermove", (event) => {
-            updateBrushCursorPosition(event);
-            continueInpaintStroke(event);
-          });
-          inpaintCanvas.addEventListener("pointerup", (event) => endInpaintStroke(event));
-          inpaintCanvas.addEventListener("pointercancel", (event) => {
-            endInpaintStroke(event);
-            hideBrushCursor();
-          });
-          inpaintCanvas.addEventListener("pointerleave", (event) => {
-            endInpaintStroke(event);
-            hideBrushCursor();
-          });
-          inpaintSubmit.addEventListener("click", () => {
-            void submitInpaintJob();
-          });
-          settingsButton.addEventListener("click", () => {
-            settingsPopover.hidden = !settingsPopover.hidden;
-            if (!settingsPopover.hidden) tracerInput.focus();
-          });
-          window.addEventListener("click", (event) => {
-            const target = event.target;
-            if (!(target instanceof Node)) return;
-            const isHistoryConfirmTarget = target instanceof Element && Boolean(target.closest("[data-history-confirm]"));
-            if (!historyList.contains(target) && !isHistoryConfirmTarget) {
-              closeInpaintHistoryConfirms();
-            }
-            if (!settingsPopover.hidden && !settingsPopover.contains(target) && !settingsButton.contains(target)) {
-              settingsPopover.hidden = true;
-            }
-          });
-          window.addEventListener("resize", () => syncInpaintCanvasSize());
-          window.addEventListener("keydown", (event) => {
-            if (event.key === "Escape" && lightbox.getAttribute("data-open") === "true") {
-              closeImagePreview();
-            }
-          });
-        })();
-      </script>
-    `
-    });
-}
-//# sourceMappingURL=template-editor-pages.js.map