@mevdragon/vidfarm-devcli 0.2.12 → 0.2.14

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

@@ -1,1829 +1,2086 @@
-import { escapeAttribute, escapeHtml, renderPageShell, withAccountQuery } from "./page-shell.js";
-import { renderTemplateEditorChrome, TEMPLATE_EDITOR_SHELL_SCRIPT, TEMPLATE_EDITOR_SHELL_STYLES } from "./template-editor-shell.js";
-export function renderTemplateEditorDocsPage(input) {
-    const backHref = withAccountQuery("/discover", input.account.userId);
-    const hasHistoryAccess = input.account.isLoggedIn;
-    const preview = input.template.previewUrl
-        ? renderPreview(input.template.previewUrl, `${input.template.title} preview`)
-        : `<div class="editor-preview editor-preview-empty">No preview asset</div>`;
+import { renderBrandLockup, renderPageShell, renderPrimaryNav } from "./page-shell.js";
+export function renderCustomInpaintPage(input) {
     return renderPageShell({
-        title: `${input.template.title} editor`,
+        title: "Inpaint",
         mainClass: "is-wide",
-        runtimeBoot: input.editorChat ? {
-            pageKind: "legacy",
-            title: `${input.template.title} editor`,
-            userId: input.account.userId ?? null,
-            editorChat: input.editorChat
-        } : undefined,
         style: `
-      ${TEMPLATE_EDITOR_SHELL_STYLES}
-
-      .editor-workbench,
-      .editor-main,
-      .editor-shell {
-        padding-bottom: 0;
-      }
-
-      .editor-shell {
-        display: grid;
-        gap: 18px;
+      .custom-inpaint-frame {
+        height: 100%;
         min-height: 0;
-        grid-template-rows: auto auto minmax(0, 1fr);
       }
 
-      .editor-hero,
-      .editor-section {
-        border: 1px solid rgba(102, 82, 43, 0.14);
-        border-radius: 28px;
-        background: rgba(255, 251, 244, 0.78);
-        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.04);
+      .custom-inpaint-shell {
+        height: 100%;
+        min-height: 0;
+        display: grid;
+        grid-template-rows: auto minmax(0, 1fr);
+        gap: 14px;
       }
 
-      .editor-panel {
-        border: 1px solid rgba(102, 82, 43, 0.14);
-        border-radius: 28px;
-        background: rgba(255, 251, 244, 0.78);
-        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.04);
+      .custom-inpaint-workbench {
+        height: 100%;
+        min-height: 0;
+        display: grid;
+        grid-template-columns: 280px minmax(0, 1fr) 340px;
+        gap: 14px;
         overflow: hidden;
       }
 
-      .editor-panel > summary {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 16px;
-        padding: 18px 22px;
-        cursor: pointer;
-        list-style: none;
-      }
-
-      .editor-panel > summary::-webkit-details-marker {
-        display: none;
+      .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);
       }
 
-      .editor-panel-summary {
+      .custom-inpaint-panel {
+        min-height: 0;
         display: grid;
-        gap: 4px;
+        align-content: start;
+        gap: 12px;
+        padding: 14px;
+        overflow: auto;
       }
 
-      .editor-panel-summary h2 {
+      .custom-inpaint-panel h1,
+      .custom-inpaint-output h2 {
         margin: 0;
-        font-size: 1.55rem;
-        letter-spacing: -0.04em;
+        color: #253041;
+        font-size: 1.02rem;
       }
 
-      .editor-panel-summary p {
+      .custom-inpaint-panel p,
+      .custom-inpaint-status,
+      .editor-inpaint-label {
         margin: 0;
         color: #617087;
-        line-height: 1.6;
+        font-size: 0.8rem;
+        line-height: 1.45;
       }
 
-      .editor-panel-toggle {
-        display: inline-flex;
+      .custom-inpaint-panel-head,
+      .custom-inpaint-tool-head {
+        display: flex;
         align-items: center;
+        justify-content: space-between;
         gap: 10px;
-        color: #445066;
-        font-size: 0.82rem;
-        font-weight: 700;
-        letter-spacing: 0.08em;
-        text-transform: uppercase;
-        white-space: nowrap;
       }
 
-      .editor-panel-toggle::before {
-        content: "";
-        width: 11px;
-        height: 11px;
-        border-right: 2px solid currentColor;
-        border-bottom: 2px solid currentColor;
-        transform: rotate(45deg) translateY(-2px);
-        transition: transform 180ms ease;
+      .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;
       }
 
-      .editor-panel[open] .editor-panel-toggle::before {
-        transform: rotate(225deg) translateY(-1px);
+      .custom-inpaint-upload svg {
+        width: 22px;
+        height: 22px;
       }
 
-      .editor-panel-body {
-        padding: 0 22px 22px;
+      .custom-inpaint-upload span {
+        max-width: 100%;
+        overflow-wrap: anywhere;
+        word-break: break-word;
+        text-align: center;
+        line-height: 1.25;
       }
 
-      .editor-panel-body > .editor-hero,
-      .editor-panel-body > .editor-section {
-        border: 0;
-        border-radius: 0;
-        background: transparent;
-        box-shadow: none;
-        padding: 0;
+      .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;
       }
 
-      .editor-hero {
+      .custom-inpaint-empty {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
         display: grid;
-        grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
-        gap: 22px;
-        padding: 22px;
+        place-items: center;
+        padding: 24px;
+        text-align: center;
+        color: rgba(255, 251, 244, 0.74);
+        font-weight: 700;
+        pointer-events: none;
       }
 
-      .editor-preview {
-        width: 100%;
-        min-height: 320px;
-        max-height: 560px;
-        object-fit: contain;
-        border-radius: 24px;
-        border: 1px solid rgba(209, 219, 233, 0.96);
-        background: rgba(255, 255, 255, 0.92);
+      .custom-inpaint-empty[hidden] {
+        display: none;
       }
 
-      .editor-preview-empty {
-        display: grid;
-        place-items: center;
-        color: #74829c;
+      .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-copy {
-        display: grid;
-        align-content: start;
-        gap: 18px;
-        min-width: 0;
+      .editor-inpaint-canvas-wrap img {
+        max-width: 100%;
+        max-height: calc(100vh - 180px);
+        display: block;
+        object-fit: contain;
+        user-select: none;
       }
 
-      .editor-kicker {
-        color: #8d99ae;
-        font-size: 0.85rem;
-        text-transform: uppercase;
-        letter-spacing: 0.12em;
+      .editor-inpaint-canvas-wrap canvas {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0.86;
+        cursor: none;
+        touch-action: none;
       }
 
-      .editor-title {
-        margin: 0;
-        font-size: clamp(2rem, 3.6vw, 3.1rem);
-        line-height: 0.94;
-        letter-spacing: -0.06em;
+      .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-copy p {
-        margin: 0;
-        color: #5f6c83;
-        font-size: 1rem;
-        line-height: 1.7;
+      .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-pills,
-      .editor-route-list {
+      .editor-inpaint-toolbar,
+      .editor-inpaint-color-row,
+      .custom-inpaint-actions {
         display: flex;
-        flex-wrap: wrap;
+        align-items: center;
         gap: 10px;
       }
 
-      .editor-toolbar {
-        display: flex;
+      .editor-inpaint-toolbar,
+      .custom-inpaint-actions {
         flex-wrap: wrap;
-        gap: 10px;
-        margin-top: 14px;
       }
 
-      .editor-copy-button {
-        appearance: none;
-        border: 1px solid rgba(102, 82, 43, 0.18);
-        background: rgba(255, 255, 255, 0.88);
-        color: #2f3c4f;
-        border-radius: 999px;
-        padding: 10px 14px;
-        font: inherit;
-        font-size: 0.88rem;
-        font-weight: 700;
-        cursor: pointer;
+      .editor-inpaint-brush {
+        display: grid;
+        gap: 6px;
+        min-width: 150px;
       }
 
-      .editor-copy-button:hover {
-        border-color: rgba(102, 82, 43, 0.3);
-        background: #fff;
+      .editor-inpaint-brush input[type="range"] {
+        width: 100%;
       }
 
-      .editor-pill,
-      .editor-route-method {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        min-height: 42px;
-        padding: 0 16px;
-        border-radius: 999px;
-        border: 1px solid rgba(191, 164, 109, 0.34);
-        background: rgba(255, 255, 255, 0.9);
+      .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-grid {
-        display: grid;
-        grid-template-columns: minmax(0, 1fr);
-        gap: 18px;
-        min-height: 0;
+      .editor-inpaint-swatches {
+        display: none;
       }
 
-      .editor-section {
+      .editor-inpaint-prompts {
         display: grid;
         align-content: start;
-        gap: 16px;
-        padding: 22px;
+        gap: 10px;
       }
 
-      .editor-section h2,
-      .editor-section h3 {
-        margin: 0;
+      .editor-inpaint-provider {
+        display: none;
+        gap: 6px;
       }
 
-      .editor-section h2 {
-        font-size: 1.55rem;
-        letter-spacing: -0.04em;
+      .editor-inpaint-provider[data-visible="true"] {
+        display: grid;
       }
 
-      .editor-section h3 {
-        font-size: 1rem;
+      .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-section-header {
+      .editor-inpaint-color-tools {
+        flex: 0 0 auto;
         display: grid;
+        justify-items: center;
         gap: 6px;
       }
 
-      .editor-section-header p,
-      .editor-note {
-        margin: 0;
-        color: #617087;
-        line-height: 1.7;
+      .editor-inpaint-prompt-stack {
+        min-width: 0;
+        flex: 1 1 auto;
+        display: grid;
+        align-content: start;
+        gap: 8px;
       }
 
-      .editor-route-card {
+      .editor-inpaint-global {
         display: grid;
-        gap: 10px;
-        padding: 16px;
-        border-radius: 20px;
-        border: 1px solid rgba(191, 164, 109, 0.22);
-        background: rgba(255, 255, 255, 0.72);
+        align-content: start;
+        gap: 8px;
       }
 
-      .editor-route-head {
+      .editor-inpaint-prompt-field {
+        position: relative;
+        min-width: 0;
+        display: grid;
+      }
+
+      .editor-inpaint-attachment-tools {
         display: flex;
-        flex-wrap: wrap;
         align-items: center;
-        gap: 10px;
+        flex-wrap: wrap;
+        gap: 6px;
       }
 
-      .editor-route-method {
-        min-height: 30px;
-        padding: 0 10px;
-        font-size: 0.77rem;
-        font-weight: 800;
+      .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-route-method[data-method="POST"] {
-        color: #7a4b16;
+      .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-route-method[data-method="GET"] {
-        color: #1e5c52;
+      .editor-inpaint-attach-button svg {
+        width: 16px;
+        height: 16px;
       }
 
-      .editor-route-path {
-        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-        font-size: 0.82rem;
-        line-height: 1.5;
-        word-break: break-all;
-        color: #324156;
+      .editor-inpaint-attachment-chips {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 6px;
+        min-width: 0;
       }
 
-      .editor-code-block {
-        margin: 0;
-        padding: 14px 16px;
-        border-radius: 18px;
-        background: rgba(37, 45, 61, 0.97);
-        color: #f7efe1;
-        overflow: auto;
-        font-size: 0.82rem;
-        line-height: 1.55;
+      .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-quickstart-grid {
-        display: grid;
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        gap: 14px;
+      .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-quickstart-field {
-        display: grid;
-        gap: 8px;
+      .editor-inpaint-attachment-chip span {
         min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
-      .editor-quickstart-field-head {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        gap: 8px;
-        min-width: 0;
+      .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-quickstart-field-head span {
-        color: #324156;
-        font-size: 0.82rem;
-        font-weight: 800;
+      .editor-inpaint-color-row[data-active="true"] {
+        background: rgba(219, 193, 122, 0.16);
       }
 
-      .editor-quickstart-copy {
-        appearance: none;
-        box-sizing: border-box;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: 36px;
-        min-width: 36px;
-        height: 36px;
-        min-height: 36px;
-        flex: 0 0 36px;
-        gap: 0;
-        padding: 0;
+      .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: 1px solid rgba(171, 138, 68, 0.48);
-        background: #dbc17a;
-        color: #243041;
+        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;
-        line-height: 1;
-        box-shadow:
-          inset 0 1px 0 rgba(255, 255, 255, 0.58),
-          0 6px 14px rgba(102, 82, 43, 0.12);
-        transition:
-          transform 120ms ease,
-          border-color 120ms ease,
-          background 120ms ease,
-          color 120ms ease;
-      }
-
-      .editor-quickstart-copy:hover {
-        border-color: rgba(102, 82, 43, 0.44);
-        background: #e4cb84;
-        color: #243041;
       }
 
-      .editor-quickstart-copy:active {
-        transform: scale(0.94);
+      .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-quickstart-copy::after {
-        content: "✓";
-        display: none;
-        color: currentColor;
-        font-size: 1rem;
-        font-weight: 900;
-        line-height: 1;
+      .editor-inpaint-color-remove:hover,
+      .editor-inpaint-color-remove:focus-visible {
+        border-color: rgba(191, 164, 109, 0.36);
+        color: #253041;
       }
 
-      .editor-quickstart-copy[data-copying="true"] {
-        border-color: rgba(102, 82, 43, 0.5);
-        background: #ead89d;
-        color: #243041;
-        transform: scale(0.96);
+      .editor-inpaint-color-remove svg {
+        width: 13px;
+        height: 13px;
       }
 
-      .editor-quickstart-copy[data-copied="true"] {
-        border-color: rgba(30, 92, 82, 0.42);
-        background: #b9e1cf;
-        color: #1e5c52;
+      .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-quickstart-copy[data-copy-error="true"] {
-        border-color: rgba(155, 45, 45, 0.42);
-        background: #f0c5bd;
-        color: #8d2f24;
+      .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-quickstart-copy[data-copy-error="true"]::after {
-        content: "!";
-        display: block;
+      .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-quickstart-copy[data-copied="true"]::after {
-        display: block;
+      .editor-history-button.is-primary {
+        border-color: rgba(37, 48, 65, 0.9);
+        background: #253041;
+        color: #fffaf0;
       }
 
-      .editor-quickstart-copy[data-copy-error="true"] svg,
-      .editor-quickstart-copy[data-copied="true"] svg {
-        display: none;
+      .editor-history-button[disabled] {
+        opacity: 0.58;
+        cursor: wait;
       }
 
-      .editor-quickstart-copy svg {
-        display: block;
-        width: 17px;
-        height: 17px;
-        stroke: currentColor;
+      .editor-history-button.is-icon {
+        width: 38px;
+        padding: 0;
+        flex: 0 0 auto;
       }
 
-      .editor-quickstart-textarea {
+      .editor-history-button.is-block {
         width: 100%;
-        min-height: 190px;
-        resize: vertical;
-        border: 1px solid rgba(191, 164, 109, 0.24);
-        border-radius: 18px;
-        background: rgba(255, 255, 255, 0.72);
-        color: #324156;
-        padding: 14px 15px;
-        font: 0.82rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
-        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
       }
 
-      .editor-quickstart-textarea:focus {
-        outline: 2px solid rgba(219, 193, 122, 0.38);
-        outline-offset: 2px;
+      .editor-history-button svg {
+        width: 18px;
+        height: 18px;
       }
 
-      .editor-quickstart-samples {
-        display: grid;
-        gap: 8px;
+      .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;
       }
 
-      .editor-quickstart-samples > h3 {
-        margin: 2px 0 0;
+      @keyframes editor-inpaint-spin {
+        to { transform: rotate(360deg); }
       }
 
-      .editor-sample-prompt-row {
-        display: flex;
-        gap: 10px;
-        overflow-x: auto;
-        overflow-y: hidden;
-        padding: 2px 0 8px;
-        scrollbar-width: thin;
+      .custom-inpaint-settings-wrap {
+        position: relative;
       }
 
-      .editor-sample-prompt {
-        flex: 0 0 min(360px, 86vw);
+      .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);
       }
 
-      .editor-sample-prompt .editor-quickstart-textarea {
-        min-height: 150px;
-        resize: none;
+      .custom-inpaint-settings[hidden],
+      .custom-inpaint-output[hidden] {
+        display: none;
       }
 
-      .editor-history-toolbar {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        justify-content: space-between;
-        gap: 12px;
-        margin-bottom: 18px;
+      .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;
       }
 
-      .editor-history-toolbar p {
-        margin: 0;
+      .custom-inpaint-output {
+        display: grid;
+        gap: 10px;
+        padding: 12px;
       }
 
-      .editor-history-chip-row {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 8px;
+      .custom-inpaint-preview {
+        width: 100%;
+        display: grid;
+        padding: 0;
+        border: 0;
+        border-radius: 12px;
+        background: #252d3d;
+        cursor: zoom-in;
       }
 
-      .editor-history-toolbar-actions,
-      .editor-history-group-actions {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: 8px;
+      .custom-inpaint-output img {
+        width: 100%;
+        max-height: 320px;
+        object-fit: contain;
+        border-radius: 12px;
+        background: #252d3d;
       }
 
-      .editor-history-toolbar-actions {
-        justify-content: flex-end;
+      .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);
       }
 
-      .editor-history-button,
-      .editor-history-remove {
-        display: inline-flex;
+      .custom-inpaint-history-head {
+        display: flex;
         align-items: center;
-        justify-content: center;
-        min-height: 32px;
-        padding: 0 12px;
-        border-radius: 999px;
-        border: 1px solid rgba(191, 164, 109, 0.34);
-        background: rgba(255, 255, 255, 0.92);
-        color: #324156;
-        font-size: 0.78rem;
-        font-weight: 700;
-        cursor: pointer;
-      }
-
-      .editor-history-remove {
-        color: #8d4a3b;
+        justify-content: space-between;
+        gap: 8px;
       }
 
-      .editor-history-button.is-primary {
-        background: #dbc17a;
-        color: #243041;
+      .custom-inpaint-history-head h2 {
+        margin: 0;
+        color: #253041;
+        font-size: 1rem;
       }
 
-      .editor-history-refresh {
+      .custom-inpaint-history-refresh {
         width: 30px;
-        min-height: 30px;
+        height: 30px;
+        min-width: 30px;
         padding: 0;
-        border-radius: 999px;
       }
 
-      .editor-history-refresh svg {
+      .custom-inpaint-history-refresh svg {
         width: 15px;
         height: 15px;
       }
 
-      .editor-history-refresh[data-loading="true"] svg {
-        animation: editor-history-refresh-spin 0.8s linear infinite;
+      .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;
       }
 
-      .editor-history-menu-wrap {
+      .custom-inpaint-history-item {
         position: relative;
-        display: inline-flex;
+        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);
       }
 
-      .editor-history-menu-button {
-        width: 30px;
-        min-height: 30px;
+      .custom-inpaint-history-thumb-button {
+        width: 54px;
+        height: 54px;
+        display: grid;
         padding: 0;
+        border: 0;
+        border-radius: 10px;
+        background: transparent;
+        cursor: zoom-in;
       }
 
-      .editor-history-menu {
-        position: absolute;
-        right: 0;
-        top: calc(100% + 6px);
-        z-index: 20;
-        display: none;
-        min-width: 148px;
-        padding: 6px;
-        border: 1px solid rgba(191, 164, 109, 0.28);
+      .custom-inpaint-history-thumb {
+        width: 54px;
+        height: 54px;
+        border: 1px solid rgba(191, 164, 109, 0.3);
         border-radius: 10px;
-        background: rgba(255, 252, 247, 0.98);
-        box-shadow: 0 14px 34px rgba(37, 45, 61, 0.16);
+        object-fit: cover;
+        background: #252d3d;
       }
 
-      .editor-history-menu-wrap[data-open="true"] .editor-history-menu {
+      .custom-inpaint-history-generating {
+        width: 54px;
+        height: 54px;
         display: grid;
-        gap: 2px;
-      }
-
-      .editor-history-menu button {
-        all: unset;
-        padding: 8px 9px;
-        border-radius: 7px;
-        color: #324156;
-        font-size: 0.78rem;
-        font-weight: 700;
-        cursor: pointer;
+        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;
       }
 
-      .editor-history-menu button:hover {
-        background: rgba(219, 193, 122, 0.16);
+      .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;
       }
 
-      .editor-history-menu button[data-danger="true"] {
-        color: #8d4a3b;
+      .custom-inpaint-history-meta {
+        min-width: 0;
+        display: grid;
+        gap: 5px;
       }
 
-      .editor-history-group-previews {
-        display: flex;
-        flex-wrap: nowrap;
-        gap: 6px;
-        margin-top: 10px;
+      .custom-inpaint-history-title {
+        min-width: 0;
+        color: #253041;
+        font-size: 0.78rem;
+        font-weight: 800;
         overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
-      .editor-history-group-previews.is-expanded {
-        max-width: min(100%, calc(100vw - 160px));
-        overflow-x: auto;
-        overflow-y: hidden;
-        padding-bottom: 5px;
-        scrollbar-width: thin;
-      }
-
-      .editor-history-group-preview {
-        position: relative;
-        width: 52px;
-        height: 52px;
-        padding: 0;
-        border-radius: 9px;
-        border: 1px solid rgba(191, 164, 109, 0.26);
-        background: rgba(255, 255, 255, 0.74);
+      .custom-inpaint-history-subtitle {
+        min-width: 0;
+        color: #617087;
+        font-size: 0.72rem;
+        font-weight: 700;
         overflow: hidden;
-        flex: 0 0 auto;
-        cursor: zoom-in;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
-      .editor-history-group-preview img,
-      .editor-history-group-preview video {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        display: block;
+      .custom-inpaint-history-actions {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 4px;
       }
 
-      .editor-history-group-preview-more {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
+      .custom-inpaint-history-icon {
+        width: 24px;
+        height: 24px;
+        display: inline-grid;
+        place-items: center;
         padding: 0;
-        width: 52px;
-        height: 52px;
-        border-radius: 9px;
-        border: 1px dashed rgba(191, 164, 109, 0.32);
-        color: #617087;
-        font-size: 0.75rem;
-        font-weight: 800;
-        flex: 0 0 auto;
+        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;
       }
 
-      button.editor-history-group-preview-more:hover,
-      button.editor-history-group-preview-more:focus-visible {
-        border-style: solid;
-        color: #324156;
+      .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;
       }
 
-      .editor-history-chip {
-        display: inline-flex;
-        align-items: center;
-        min-height: 30px;
-        padding: 0 10px;
-        border-radius: 999px;
-        border: 1px solid rgba(191, 164, 109, 0.34);
-        background: rgba(255, 255, 255, 0.9);
-        color: #3b465a;
-        font-size: 0.78rem;
-        font-weight: 700;
+      .custom-inpaint-history-check[disabled] {
+        cursor: wait;
+        opacity: 0.64;
       }
 
-      .editor-history-chip.is-empty {
-        color: #74829c;
-        border-style: dashed;
+      .custom-inpaint-history-icon svg {
+        width: 13px;
+        height: 13px;
       }
 
-      .editor-history-groups {
+      .custom-inpaint-history-popconfirm {
+        position: absolute;
+        right: 6px;
+        top: 6px;
+        z-index: 6;
+        width: 156px;
         display: grid;
-        gap: 12px;
+        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);
       }
 
-      .editor-history-empty {
-        padding: 18px;
-        border-radius: 18px;
-        border: 1px dashed rgba(191, 164, 109, 0.34);
-        background: rgba(255, 255, 255, 0.56);
-        color: #617087;
+      .custom-inpaint-history-popconfirm[hidden] {
+        display: none;
       }
 
-      .editor-history-group {
-        border: 1px solid rgba(191, 164, 109, 0.22);
-        border-radius: 20px;
-        background: rgba(255, 255, 255, 0.62);
-        overflow: hidden;
+      .custom-inpaint-history-popconfirm p {
+        margin: 0;
+        color: #253041;
+        font-size: 0.76rem;
+        font-weight: 800;
+        line-height: 1.25;
       }
 
-      .editor-history-group > summary {
+      .custom-inpaint-history-popconfirm-actions {
         display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 12px;
-        padding: 14px 16px;
-        cursor: pointer;
-        list-style: none;
+        gap: 5px;
       }
 
-      .editor-history-group > summary::-webkit-details-marker {
-        display: none;
-      }
-
-      .editor-history-group-main {
-        display: grid;
-        gap: 4px;
-        min-width: 0;
+      .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;
       }
 
-      .editor-history-group-main h3 {
-        margin: 0;
-        font-size: 1rem;
-        color: #243041;
-        word-break: break-all;
+      .custom-inpaint-history-popconfirm-actions button[data-danger="true"] {
+        border-color: rgba(155, 45, 45, 0.3);
+        color: #9b2d2d;
       }
 
-      .editor-history-group-main p {
-        margin: 0;
-        color: #74829c;
-        font-size: 0.82rem;
+      .custom-inpaint-status[data-tone="error"] {
+        color: #9b2d2d;
       }
 
-      .editor-history-group-toggle {
-        color: #617087;
-        font-size: 0.8rem;
-        font-weight: 700;
-        letter-spacing: 0.08em;
-        text-transform: uppercase;
+      .custom-inpaint-status[data-tone="success"] {
+        color: #2f7d4f;
       }
 
-      .editor-history-active {
-        display: inline-flex;
-        align-items: center;
-        min-height: 26px;
-        padding: 0 9px;
-        border-radius: 999px;
-        background: rgba(219, 193, 122, 0.2);
-        color: #7a4b16;
-        font-size: 0.74rem;
-        font-weight: 800;
-        letter-spacing: 0.08em;
-        text-transform: uppercase;
+      .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);
       }
 
-      @keyframes editor-history-refresh-spin {
-        to {
-          transform: rotate(360deg);
-        }
+      .custom-inpaint-lightbox[data-open="true"] {
+        display: grid;
       }
 
-      .editor-history-group-body {
-        display: grid;
-        gap: 10px;
-        padding: 0 16px 16px;
+      .custom-inpaint-lightbox[hidden] {
+        display: none;
       }
 
-      .editor-history-card {
+      .custom-inpaint-lightbox-dialog {
+        width: min(1100px, 96vw);
+        max-height: 94vh;
         display: grid;
-        gap: 8px;
-        padding: 10px;
-        border-radius: 12px;
-        border: 1px solid rgba(191, 164, 109, 0.18);
-        background: rgba(255, 251, 244, 0.92);
+        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);
       }
 
-      .editor-history-card-head {
+      .custom-inpaint-lightbox-head {
         display: flex;
-        flex-wrap: wrap;
+        align-items: center;
         justify-content: space-between;
         gap: 10px;
       }
 
-      .editor-history-card-main {
-        display: grid;
-        gap: 6px;
+      .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;
       }
 
-      .editor-history-card-meta {
+      .custom-inpaint-lightbox-actions {
         display: flex;
-        flex-wrap: wrap;
-        gap: 8px;
-      }
-
-      .editor-history-method,
-      .editor-history-status {
-        display: inline-flex;
         align-items: center;
-        min-height: 28px;
-        padding: 0 10px;
-        border-radius: 999px;
-        border: 1px solid rgba(191, 164, 109, 0.3);
-        background: rgba(255, 255, 255, 0.92);
-        font-size: 0.78rem;
-        font-weight: 800;
+        gap: 8px;
       }
 
-      .editor-history-method {
-        color: #7a4b16;
+      .custom-inpaint-lightbox-stage {
+        min-height: 0;
+        display: grid;
+        place-items: center;
+        overflow: auto;
       }
 
-      .editor-history-status.is-success {
-        color: #1e5c52;
+      .custom-inpaint-lightbox-stage img {
+        max-width: 100%;
+        max-height: calc(94vh - 92px);
+        object-fit: contain;
+        border-radius: 12px;
+        background: #111827;
       }
 
-      .editor-history-status.is-error {
-        color: #9b2d2d;
-      }
+      @media (max-width: 1100px) {
+        .custom-inpaint-workbench {
+          grid-template-columns: 1fr;
+          overflow: auto;
+        }
 
-      .editor-history-card-path {
-        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-        font-size: 0.8rem;
-        line-height: 1.55;
-        color: #324156;
-        word-break: break-all;
-      }
-
-      .editor-history-card-time {
-        color: #74829c;
-        font-size: 0.8rem;
-        white-space: nowrap;
-      }
-
-      .editor-history-card-previews {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 8px;
-      }
-
-      .editor-history-card-preview {
-        position: relative;
-        width: 112px;
-        height: 112px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-        padding: 0;
-        border-radius: 18px;
-        border: 1px solid rgba(191, 164, 109, 0.34);
-        background: rgba(255, 255, 255, 0.94);
-        color: #324156;
-        text-decoration: none;
-        cursor: pointer;
-      }
-
-      .editor-history-video-play {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        width: 34px;
-        height: 34px;
-        transform: translate(-50%, -50%);
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 999px;
-        background: rgba(18, 24, 34, 0.72);
-        box-shadow: 0 8px 24px rgba(12, 18, 28, 0.22);
-        pointer-events: none;
-      }
-
-      .editor-history-group-preview .editor-history-video-play {
-        width: 24px;
-        height: 24px;
-      }
-
-      .editor-history-video-play::before {
-        content: "";
-        display: block;
-        width: 0;
-        height: 0;
-        margin-left: 3px;
-        border-top: 7px solid transparent;
-        border-bottom: 7px solid transparent;
-        border-left: 11px solid #fff8ee;
-      }
-
-      .editor-history-group-preview .editor-history-video-play::before {
-        margin-left: 2px;
-        border-top-width: 5px;
-        border-bottom-width: 5px;
-        border-left-width: 8px;
-      }
-
-      .editor-history-card-preview img,
-      .editor-history-card-preview video {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        display: block;
-      }
-
-      .editor-history-card-preview-label {
-        position: absolute;
-        left: 8px;
-        right: 8px;
-        bottom: 8px;
-        min-height: 22px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0 8px;
-        border-radius: 999px;
-        background: rgba(24, 30, 42, 0.72);
-        color: #fff8ee;
-        font-size: 0.72rem;
-        font-weight: 700;
-        letter-spacing: 0.02em;
-      }
-
-      .editor-history-card-preview-fallback {
-        padding: 0 10px;
-        text-align: center;
-        font-size: 0.78rem;
-        font-weight: 700;
-        line-height: 1.4;
-      }
-
-      .editor-history-card-grid {
-        display: grid;
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        gap: 12px;
-      }
-
-      .editor-history-card .vf-editor-chat-http-card {
-        background: rgba(248, 244, 235, 0.74);
-      }
-
-      .editor-history-card-foot {
-        display: flex;
-        justify-content: flex-end;
-        color: #7b879b;
-        font-size: 0.72rem;
-        line-height: 1.3;
-      }
-
-      .editor-history-sample {
-        display: grid;
-        gap: 8px;
-      }
-
-      .editor-history-sample h4 {
-        margin: 0;
-        font-size: 0.82rem;
-        color: #445066;
-        text-transform: uppercase;
-        letter-spacing: 0.08em;
-      }
-
-      .editor-history-sample pre {
-        margin: 0;
-        min-height: 90px;
-        max-height: 280px;
-        overflow: auto;
-        padding: 12px;
-        border-radius: 14px;
-        background: rgba(37, 45, 61, 0.96);
-        color: #f7efe1;
-        font-size: 0.78rem;
-        line-height: 1.5;
-      }
-
-      .editor-history-sample-note {
-        color: #74829c;
-        font-size: 0.78rem;
-      }
-
-      .editor-modal-backdrop {
-        position: fixed;
-        inset: 0;
-        display: none;
-        align-items: center;
-        justify-content: center;
-        padding: 24px;
-        background: rgba(24, 30, 42, 0.52);
-        backdrop-filter: blur(10px);
-        z-index: 1200;
-      }
-
-      .editor-modal-backdrop[data-open="true"] {
-        display: flex;
+        .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;
+          }
 
-      .editor-modal {
-        width: min(100%, 460px);
-        display: grid;
-        gap: 16px;
-        padding: 22px;
-        border-radius: 26px;
-        border: 1px solid rgba(191, 164, 109, 0.28);
-        background: rgba(255, 251, 244, 0.98);
-        box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22);
-      }
+          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"]);
 
-      .editor-modal-head {
-        display: grid;
-        gap: 6px;
-      }
+          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));
+          }
 
-      .editor-modal-head h3 {
-        margin: 0;
-        font-size: 1.2rem;
-      }
+          function getTracerValue() {
+            const value = tracerInput.value.trim();
+            if (value) return value;
+            const tracer = makeTracerId();
+            tracerInput.value = tracer;
+            return tracer;
+          }
 
-      .editor-modal-head p,
-      .editor-modal-error,
-      .editor-modal-label {
-        margin: 0;
-        color: #617087;
-        line-height: 1.6;
-      }
+          function queueInpaintHistoryReload() {
+            window.clearTimeout(historyTracerRefreshTimer);
+            historyTracerRefreshTimer = window.setTimeout(() => {
+              void loadInpaintHistory();
+            }, 300);
+          }
 
-      .editor-modal-label {
-        font-size: 0.82rem;
-        font-weight: 700;
-        letter-spacing: 0.08em;
-        text-transform: uppercase;
-      }
+          function setSubmitLoading(isLoading) {
+            inpaintSubmit.disabled = isLoading;
+            inpaintSubmit.setAttribute("data-loading", isLoading ? "true" : "false");
+            inpaintSubmitLabel.textContent = isLoading ? "Creating" : "Create image edit";
+          }
 
-      .editor-modal-input {
-        width: 100%;
-        min-height: 50px;
-        padding: 0 14px;
-        border-radius: 16px;
-        border: 1px solid rgba(191, 164, 109, 0.34);
-        background: rgba(255, 255, 255, 0.96);
-        color: #243041;
-        font: inherit;
-      }
+          function setStatus(message, tone) {
+            statusEl.textContent = message || "";
+            if (tone) {
+              statusEl.setAttribute("data-tone", tone);
+            } else {
+              statusEl.removeAttribute("data-tone");
+            }
+          }
 
-      .editor-modal-input:focus {
-        outline: 2px solid rgba(219, 193, 122, 0.7);
-        outline-offset: 2px;
-      }
+          function imageDownloadName(prefix, createdAt) {
+            const stamp = String(createdAt || new Date().toISOString()).replace(/[^0-9a-z]+/gi, "-");
+            return prefix + "-" + stamp + ".png";
+          }
 
-      .editor-modal-error {
-        min-height: 1.4em;
-        color: #9b2d2d;
-        font-size: 0.84rem;
-      }
+          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";
+          }
 
-      .editor-modal-actions {
-        display: flex;
-        justify-content: flex-end;
-        gap: 10px;
-      }
+          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 = "";
+          }
 
-      .editor-media-modal {
-        width: min(100%, 980px);
-        max-height: calc(100vh - 48px);
-        display: grid;
-        gap: 14px;
-        padding: 18px;
-        border-radius: 28px;
-        border: 1px solid rgba(191, 164, 109, 0.28);
-        background: rgba(255, 251, 244, 0.985);
-        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
-      }
+          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");
+          }
 
-      .editor-media-modal-head {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 12px;
-      }
+          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";
+          }
 
-      .editor-media-modal-actions {
-        display: inline-flex;
-        align-items: center;
-        gap: 10px;
-        flex: 0 0 auto;
-      }
+          function hideBrushCursor() {
+            inpaintBrushCursor.dataset.visible = "false";
+          }
 
-      .editor-media-modal-source {
-        color: #617087;
-        font-size: 0.82rem;
-        font-weight: 700;
-        text-decoration: underline;
-        text-underline-offset: 0.14em;
-      }
+          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";
+          }
 
-      .editor-media-modal-title {
-        margin: 0;
-        color: #324156;
-        font-size: 0.95rem;
-        font-weight: 700;
-        word-break: break-all;
-      }
+          const inpaintColorPalette = ["#ff2d55", "#3b82f6", "#22c55e", "#f59e0b", "#a855f7", "#06b6d4", "#f97316", "#ec4899"];
 
-      .editor-media-modal-body {
-        min-height: 0;
-        display: grid;
-        place-items: center;
-        overflow: auto;
-        border-radius: 20px;
-        background: rgba(37, 45, 61, 0.96);
-      }
+          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);
+              }
+            }
+          }
 
-      .editor-media-modal-body img,
-      .editor-media-modal-body video {
-        max-width: 100%;
-        max-height: calc(100vh - 180px);
-        display: block;
-        object-fit: contain;
-      }
+          function attachmentId() {
+            return "att_" + Date.now().toString(36) + "_" + Math.random().toString(16).slice(2, 8);
+          }
 
-      @media (max-width: 767px) {
-        .editor-hero,
-        .editor-grid {
-          grid-template-columns: 1fr;
-        }
+          function attachmentsForScope(scope, color) {
+            const normalizedColor = color ? normalizeHexColor(color) : "";
+            return inpaintAttachments.filter((attachment) => (
+              attachment.scope === scope && (!normalizedColor || attachment.color === normalizedColor)
+            ));
+          }
 
-        .editor-history-card-grid {
-          grid-template-columns: 1fr;
-        }
+          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);
+            }
+          }
 
-        .editor-quickstart-grid {
-          grid-template-columns: 1fr;
-        }
+          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);
+              }
+            }
+          }
 
-        .editor-hero,
-        .editor-section,
-        .editor-panel {
-          border-radius: 22px;
-        }
+          function openAttachmentPicker(scope, color) {
+            pendingInpaintAttachmentScope = { scope, color: color ? normalizeHexColor(color) : "" };
+            inpaintAttachmentInput.click();
+          }
 
-        .editor-panel > summary {
-          align-items: flex-start;
-          padding: 16px;
-        }
+          function isAllowedInpaintAttachment(file) {
+            return file instanceof File && allowedInpaintAttachmentTypes.has(file.type);
+          }
 
-        .editor-panel-toggle {
-          font-size: 0;
-        }
+          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;
+          }
 
-        .editor-panel-toggle::before {
-          width: 10px;
-          height: 10px;
-        }
+          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) : ""
+            });
+          }
 
-        .editor-panel-body {
-          padding: 0 16px 16px;
-        }
+          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;
+          }
 
-        .editor-hero,
-        .editor-section {
-          padding: 16px;
-        }
+          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();
+          }
 
-        .editor-preview {
-          min-height: 0;
-          max-height: none;
-          aspect-ratio: 16 / 11;
-          border-radius: 18px;
-        }
+          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();
+            }
+          }
 
-        .editor-title {
-          font-size: clamp(2rem, 12vw, 2.85rem);
-          line-height: 0.95;
-        }
+          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();
+          }
 
-        .editor-toolbar,
-        .editor-history-toolbar-actions,
-        .editor-history-group-actions {
-          display: grid;
-          grid-template-columns: 1fr;
-          width: 100%;
-        }
+          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)))
+            };
+          }
 
-        .editor-copy-button,
-        .editor-history-button,
-        .editor-history-remove {
-          width: 100%;
-        }
+          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();
+          }
 
-        .editor-pill,
-        .editor-route-path,
-        .editor-history-chip {
-          max-width: 100%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      }
-    `,
-        body: `
-      <section class="editor-workbench">
-        ${renderTemplateEditorChrome({
-            backHref,
-            templateTitle: input.template.title,
-            templateId: input.template.id,
-            templateSlug: input.template.slugId
-        })}
-        <main class="editor-main">
-          <section class="editor-shell page-content-start">
-            <details class="editor-panel" open>
-              <summary>
-                <div class="editor-panel-summary">
-                  <h2>Character card</h2>
-                  <p>Preview the format, metadata, and editorial notes without losing space for the sections that follow.</p>
-                </div>
-                <span class="editor-panel-toggle" aria-hidden="true">Toggle</span>
-              </summary>
-              <div class="editor-panel-body">
-                <section class="editor-hero">
-                  ${preview}
-                  <div class="editor-copy">
-                    <div class="editor-kicker">Template Editor Docs</div>
-                    <h1 class="editor-title">${escapeHtml(input.template.title)}</h1>
-                    <div class="editor-pills">
-                      <span class="editor-pill">${escapeHtml(input.template.id)}</span>
-                      <span class="editor-pill">${escapeHtml(input.template.slugId)}</span>
-                      <span class="editor-pill">v${escapeHtml(input.template.version)}</span>
-                    </div>
-                    <p>${escapeHtml(input.template.viralDna || input.template.visualDna || "No editorial summary is available for this template yet.")}</p>
-                    ${input.directorSkill?.trim()
-            ? `<div class="editor-toolbar">
-                          <button
-                            type="button"
-                            class="editor-copy-button"
-                            data-editor-copy-content="${escapeAttribute(input.directorSkill)}"
-                            data-editor-copy-label="Director SKILL.md"
-                          >Copy Director SKILL.md</button>
-                        </div>`
-            : ""}
-                  </div>
-                </section>
-              </div>
-            </details>
-            <section class="editor-grid">
-              <details class="editor-panel" open>
-                <summary>
-                  <div class="editor-panel-summary">
-                    <h2>Quickstart</h2>
-                    <p>Use the template prompt scaffolds as readonly references before calling operations or continuing in Copilot.</p>
-                  </div>
-                  <span class="editor-panel-toggle" aria-hidden="true">Toggle</span>
-                </summary>
-                <div class="editor-panel-body">
-                  <section class="editor-section">
-                    <div class="editor-quickstart-grid">
-                      ${renderQuickstartTextarea("Skeleton prompt", input.template.skeletonPrompt, 10)}
-                      ${renderQuickstartTextarea("Proposal Generator", input.template.proposalGenerator, 10)}
-                    </div>
-                    <div class="editor-quickstart-samples">
-                      <h3>Sample prompts</h3>
-                      <div class="editor-sample-prompt-row" aria-label="Sample prompts">
-                        ${input.template.samplePrompts.length
-            ? input.template.samplePrompts.map((sample, index) => `
-                            <div class="editor-sample-prompt">
-                              ${renderQuickstartTextarea(`Sample ${index + 1}`, sample, 7)}
-                            </div>
-                          `).join("")
-            : `<div class="editor-sample-prompt">${renderQuickstartTextarea("Sample 1", "No sample prompts are defined for this template yet.", 7)}</div>`}
-                      </div>
-                    </div>
-                  </section>
-                </div>
-              </details>
-              <details class="editor-panel">
-                <summary>
-                  <div class="editor-panel-summary">
-                    <h2>REST API docs</h2>
-                    <p>This editor combines template routes with platform primitive routes so asset generation, image edits, and template runs stay in one tracer-aware workflow.</p>
-                  </div>
-                  <span class="editor-panel-toggle" aria-hidden="true">Toggle</span>
-                </summary>
-                <div class="editor-panel-body">
-                  <section class="editor-section">
-                    <div class="editor-section-header">
-                      <p>Use tracer IDs to group a run across requests.</p>
-                    </div>
-                    <div class="editor-route-list">
-                      ${input.docsRoutes.map((route) => `
-                        <article class="editor-route-card">
-                          <div class="editor-route-head">
-                            <span class="editor-route-method" data-method="${escapeAttribute(route.method)}">${escapeHtml(route.method)}</span>
-                            <div class="editor-route-path">${escapeHtml(route.path)}</div>
-                          </div>
-                          <div class="editor-note">${escapeHtml(route.summary)}</div>
-                        </article>
-                      `).join("")}
-                    </div>
-                  </section>
-                </div>
-              </details>
-              <details class="editor-panel" open>
-                <summary>
-                  <div class="editor-panel-summary">
-                    <h2>Tracer Logs</h2>
-                    <p>Recent POST calls are grouped by tracer so parallel workstreams stay readable. Newest requests appear first inside each tracer group.</p>
-                  </div>
-                  <span class="editor-panel-toggle" aria-hidden="true">Toggle</span>
-                </summary>
-                <div class="editor-panel-body">
-                  <section class="editor-section">
-                    <div class="editor-history-toolbar">
-                      <p class="editor-note">Tracer visibility lives here. Removing one only clears it from this page view; the underlying runs remain available in Job Runs.</p>
-                      <div class="editor-history-toolbar-actions">
-                        <button type="button" class="editor-history-button is-primary" data-editor-history-add>Add tracer</button>
-                        <div class="editor-history-chip-row" data-editor-history-tracers>
-                          ${input.initialTracers.length
-            ? input.initialTracers.map((tracer) => `<span class="editor-history-chip">${escapeHtml(tracer)}</span>`).join("")
-            : `<span class="editor-history-chip is-empty">No tracer selected yet</span>`}
-                        </div>
-                      </div>
-                    </div>
-                    <div class="editor-history-groups" data-editor-history-root>
-                      <div class="editor-history-empty">${hasHistoryAccess ? "Loading POST history…" : "Sign in to load tracer-scoped POST history."}</div>
-                    </div>
-                  </section>
-                </div>
-              </details>
-            </section>
-          </section>
-        </main>
-      </section>
-      <div class="editor-modal-backdrop" data-editor-tracer-modal data-open="false" hidden>
-        <div class="editor-modal" role="dialog" aria-modal="true" aria-labelledby="editor-tracer-modal-title">
-          <div class="editor-modal-head">
-            <h3 id="editor-tracer-modal-title">Add tracer</h3>
-            <p>Type a tracer label to pin it into this page view. Existing labels stay untouched.</p>
-          </div>
-          <label class="editor-modal-label" for="editor-tracer-input">Tracer id</label>
-          <input id="editor-tracer-input" class="editor-modal-input" type="text" autocomplete="off" spellcheck="false" placeholder="${escapeAttribute(`${input.template.slugId}-manual`)}" />
-          <p class="editor-modal-error" data-editor-tracer-modal-error aria-live="polite"></p>
-          <div class="editor-modal-actions">
-            <button type="button" class="editor-history-button" data-editor-tracer-cancel>Cancel</button>
-            <button type="button" class="editor-history-button is-primary" data-editor-tracer-submit>Add tracer</button>
-          </div>
-        </div>
-      </div>
-      <div class="editor-modal-backdrop" data-editor-media-modal data-open="false" hidden>
-        <div class="editor-media-modal" role="dialog" aria-modal="true" aria-labelledby="editor-media-modal-title">
-          <div class="editor-media-modal-head">
-            <p id="editor-media-modal-title" class="editor-media-modal-title">Output preview</p>
-            <div class="editor-media-modal-actions">
-              <a class="editor-media-modal-source" data-editor-media-source href="#" target="_blank" rel="noreferrer">Open source</a>
-              <button type="button" class="editor-history-button" data-editor-media-close>Close</button>
-            </div>
-          </div>
-          <div class="editor-media-modal-body" data-editor-media-body></div>
-        </div>
-      </div>
-      <div class="vf-editor-chat-http-modal-backdrop" data-editor-http-modal hidden>
-        <div class="vf-editor-chat-http-modal" role="dialog" aria-modal="true" aria-labelledby="editor-http-modal-title">
-          <div class="vf-editor-chat-http-modal-header">
-            <div class="vf-editor-chat-http-modal-header-main" data-editor-http-modal-head>
-              <span id="editor-http-modal-title" class="vf-editor-chat-http-modal-url">HTTP details</span>
-            </div>
-            <button type="button" class="vf-editor-chat-http-modal-close" data-editor-http-close aria-label="Close HTTP details">×</button>
-          </div>
-          <div class="vf-editor-chat-http-card-body is-modal" data-editor-http-modal-body></div>
-        </div>
-      </div>
-      <script>
-        ${TEMPLATE_EDITOR_SHELL_SCRIPT}
-        (() => {
-          const historyRoot = document.querySelector("[data-editor-history-root]");
-          const tracerChipRow = document.querySelector("[data-editor-history-tracers]");
-          const addTracerButton = document.querySelector("[data-editor-history-add]");
-          const modalBackdrop = document.querySelector("[data-editor-tracer-modal]");
-          const modalInput = document.getElementById("editor-tracer-input");
-          const modalError = document.querySelector("[data-editor-tracer-modal-error]");
-          const modalSubmit = document.querySelector("[data-editor-tracer-submit]");
-          const modalCancel = document.querySelector("[data-editor-tracer-cancel]");
-          const mediaModalBackdrop = document.querySelector("[data-editor-media-modal]");
-          const mediaModalBody = document.querySelector("[data-editor-media-body]");
-          const mediaModalTitle = document.getElementById("editor-media-modal-title");
-          const mediaModalClose = document.querySelector("[data-editor-media-close]");
-          const mediaModalSource = document.querySelector("[data-editor-media-source]");
-          const httpModalBackdrop = document.querySelector("[data-editor-http-modal]");
-          const httpModalHead = document.querySelector("[data-editor-http-modal-head]");
-          const httpModalBody = document.querySelector("[data-editor-http-modal-body]");
-          const httpModalClose = document.querySelector("[data-editor-http-close]");
-          if (!(historyRoot instanceof HTMLElement) || !(tracerChipRow instanceof HTMLElement)) {
-            return;
+          function continueInpaintStroke(event) {
+            if (!isInpaintPainting || !currentInpaintStroke) return;
+            event.preventDefault();
+            currentInpaintStroke.points.push(getInpaintPoint(event));
+            redrawInpaintMask();
           }
 
-          const hasTracerModal = addTracerButton instanceof HTMLButtonElement
-            && modalBackdrop instanceof HTMLElement
-            && modalInput instanceof HTMLInputElement
-            && modalError instanceof HTMLElement
-            && modalSubmit instanceof HTMLButtonElement
-            && modalCancel instanceof HTMLButtonElement;
-          const hasMediaModal = mediaModalBackdrop instanceof HTMLElement
-            && mediaModalBody instanceof HTMLElement
-            && mediaModalTitle instanceof HTMLElement
-            && mediaModalClose instanceof HTMLButtonElement
-            && mediaModalSource instanceof HTMLAnchorElement;
-          const hasHttpModal = httpModalBackdrop instanceof HTMLElement
-            && httpModalHead instanceof HTMLElement
-            && httpModalBody instanceof HTMLElement
-            && httpModalClose instanceof HTMLButtonElement;
-
-          const boot = {
-            historyEndpoint: ${JSON.stringify(input.historyEndpoint)},
-            tracerEndpoint: ${JSON.stringify(input.tracerEndpoint)},
-            fallbackHistoryEndpoint: ${JSON.stringify(withAccountQuery(`/job-runs/history?limit=250&template_id=${encodeURIComponent(input.template.id)}`, input.account.userId))},
-            isLoggedIn: ${input.account.isLoggedIn ? "true" : "false"}
-          };
-          let lastHistoryEntries = [];
-          let lastSelectedTracers = [];
-          const expandedPreviewGroups = new Set();
-
-          function escapeHtml(value) {
-            return String(value)
-              .replace(/&/g, "&amp;")
-              .replace(/</g, "&lt;")
-              .replace(/>/g, "&gt;")
-              .replace(/"/g, "&quot;");
-          }
-
-          function formatJson(value) {
-            if (value == null) {
-              return "null";
-            }
-            if (typeof value === "string") {
-              return value;
-            }
+          function endInpaintStroke(event) {
+            if (!isInpaintPainting) return;
+            event.preventDefault();
+            isInpaintPainting = false;
+            currentInpaintStroke = null;
             try {
-              return JSON.stringify(value, null, 2);
-            } catch {
-              return String(value);
+              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 setTextBlock(parent, label, value) {
-            const block = document.createElement("div");
-            block.className = "vf-editor-chat-http-block";
-            const heading = document.createElement("div");
-            heading.className = "vf-editor-chat-http-label";
-            heading.textContent = label;
-            const pre = document.createElement("pre");
-            pre.className = "vf-editor-chat-http-pre";
-            pre.textContent = typeof value === "string" ? value : formatJson(value);
-            block.append(heading, pre);
-            parent.append(block);
+          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 makeHttpPayload(entry) {
-            return {
-              method: entry.method,
-              url: entry.path,
-              status: Number(entry.status) || 0,
-              statusText: "",
-              request: {
-                query: entry.request?.query || {},
-                body: entry.request?.body ?? null,
-                omitted: entry.request?.bodyOmittedReason || null
-              },
-              response: {
-                status: entry.status,
-                body: entry.response?.body ?? null,
-                omitted: entry.response?.bodyOmittedReason || null
+          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 encodeHttpPayload(entry) {
-            try {
-              return encodeURIComponent(JSON.stringify(makeHttpPayload(entry)));
-            } catch {
-              return encodeURIComponent(JSON.stringify({
-                method: entry.method,
-                url: entry.path,
-                status: Number(entry.status) || 0,
-                statusText: "",
-                request: { query: {}, body: null, omitted: "Request sample could not be encoded for display." },
-                response: { status: entry.status, body: null, omitted: "Response sample could not be encoded for display." }
-              }));
             }
           }
 
-          function renderHttpAction(entry) {
-            const payload = encodeHttpPayload(entry);
-            const status = Number(entry.status) || 0;
-            const isError = status >= 400;
-            const isSuccess = status >= 200 && status < 300;
-            return '<div class="vf-editor-chat-http-card">' +
-              '<button type="button" class="vf-editor-chat-http-card-header" data-editor-http-detail="' + escapeHtml(payload) + '" aria-label="Open HTTP details for ' + escapeHtml(entry.method) + ' ' + escapeHtml(entry.path) + '">' +
-                '<span class="vf-editor-chat-http-pill">' + escapeHtml(entry.method) + '</span>' +
-                '<span class="vf-editor-chat-http-url" title="' + escapeHtml(entry.path) + '">' + escapeHtml(entry.path) + '</span>' +
-                '<span class="vf-editor-chat-http-status" data-error="' + (isError ? "true" : "false") + '" data-success="' + (isSuccess ? "true" : "false") + '">' + escapeHtml(status) + '</span>' +
-                '<span class="vf-editor-chat-http-expand" aria-hidden="true">+</span>' +
-              '</button>' +
-            '</div>';
+          function updateInpaintPrompt(color, prompt) {
+            const normalized = normalizeHexColor(color);
+            inpaintMaskColors = inpaintMaskColors.map((entry) => (
+              entry.color === normalized ? { ...entry, prompt: String(prompt || "") } : entry
+            ));
           }
 
-          function openHttpModal(payload) {
-            if (!hasHttpModal) {
-              return;
-            }
-            httpModalHead.innerHTML = "";
-            const isError = payload.status >= 400;
-            const isSuccess = payload.status >= 200 && payload.status < 300;
-            const method = document.createElement("span");
-            method.className = "vf-editor-chat-http-pill";
-            method.textContent = payload.method || "HTTP";
-            const url = document.createElement("span");
-            url.className = "vf-editor-chat-http-modal-url";
-            url.textContent = payload.url || "";
-            const status = document.createElement("span");
-            status.className = "vf-editor-chat-http-status";
-            status.dataset.error = isError ? "true" : "false";
-            status.dataset.success = isSuccess ? "true" : "false";
-            status.textContent = String(payload.status || "");
-            httpModalHead.append(method, url, status);
-            httpModalBody.innerHTML = "";
-            setTextBlock(httpModalBody, "URL", payload.url || "");
-            if (payload.request?.omitted) {
-              setTextBlock(httpModalBody, "Request note", payload.request.omitted);
-            }
-            setTextBlock(httpModalBody, "Request", {
-              query: payload.request?.query || {},
-              body: payload.request?.body ?? null
+          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();
             });
-            if (payload.response?.omitted) {
-              setTextBlock(httpModalBody, "Response note", payload.response.omitted);
-            }
-            setTextBlock(httpModalBody, "Response", {
-              status: payload.response?.status ?? payload.status,
-              body: payload.response?.body ?? null
+            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");
             });
-            httpModalBackdrop.hidden = false;
           }
 
-          function closeHttpModal() {
-            if (!hasHttpModal) {
-              return;
+          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();
             }
-            httpModalBackdrop.hidden = true;
-            httpModalBody.innerHTML = "";
+            return canvasToPngBlob(maskCanvas);
           }
 
-          function parseTracersFromUrl() {
-            const params = new URLSearchParams(window.location.search);
-            const values = [...params.getAll("tracers"), ...params.getAll("tracer")];
-            const tracers = [];
-            const seen = new Set();
-            for (const rawValue of values) {
-              const trimmed = String(rawValue || "").trim();
-              if (!trimmed) {
-                continue;
-              }
-              const inner = trimmed.startsWith("[") && trimmed.endsWith("]") ? trimmed.slice(1, -1) : trimmed;
-              for (const part of inner.split(",")) {
-                const tracer = part.trim().replace(/^["']|["']$/g, "");
-                if (!tracer || seen.has(tracer)) {
+          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(tracer);
-                tracers.push(tracer);
+                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 tracers;
+            return finalizePayload.file.viewUrl || finalizePayload.file.view_url || finalizePayload.file.s3Url || finalizePayload.file.s3_url;
           }
 
-          function makeTracerId() {
-            const suffix = (globalThis.crypto && typeof globalThis.crypto.randomUUID === "function"
-              ? globalThis.crypto.randomUUID().replace(/-/g, "").slice(-8)
-              : Math.random().toString(16).slice(2, 10).padEnd(8, "0").slice(0, 8));
-            return ${JSON.stringify(input.template.slugId)}
-              .replace(/_/g, "-")
-              .replace(/[^a-zA-Z0-9-]/g, "-")
-              .toLowerCase()
-              .replace(/-+/g, "-")
-              .replace(/^-|-$/g, "") + "-" + suffix;
+          function absoluteUrl(value) {
+            return new URL(value, window.location.href).toString();
           }
 
-          function syncTracerUrl(tracers) {
-            const url = new URL(window.location.href);
-            if (tracers.length) {
-              url.searchParams.set("tracers", tracers.join(","));
-            } else {
-              url.searchParams.delete("tracers");
+          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();
             }
-            window.history.replaceState({}, "", url.toString());
-            window.dispatchEvent(new CustomEvent("vidfarm:editor-tracers-changed", {
-              detail: { tracers }
-            }));
+            return "";
           }
 
-          const tracerStore = window.__vidfarmEditorTracers || (() => {
-            let listeners = [];
-            const notify = () => {
-              const nextTracers = parseTracersFromUrl();
-              for (const listener of listeners) {
-                listener(nextTracers);
-              }
-            };
-            return {
-              get() {
-                return parseTracersFromUrl();
-              },
-              set(tracers) {
-                const normalized = [...new Set((Array.isArray(tracers) ? tracers : []).map((value) => String(value || "").trim()).filter(Boolean))];
-                syncTracerUrl(normalized);
-                notify();
-              },
-              add(tracer) {
-                const nextTracer = String(tracer || "").trim() || makeTracerId();
-                const current = this.get().filter((entry) => entry !== nextTracer);
-                this.set([nextTracer, ...current]);
-                return nextTracer;
-              },
-              remove(tracer) {
-                const current = this.get().filter((entry) => entry !== tracer);
-                this.set(current);
-              },
-              activate(tracer) {
-                const current = this.get();
-                if (!current.includes(tracer)) {
-                  this.add(tracer);
-                  return;
-                }
-                this.set([tracer, ...current.filter((entry) => entry !== tracer)]);
-              },
-              subscribe(listener) {
-                listeners.push(listener);
-                return () => {
-                listeners = listeners.filter((entry) => entry !== listener);
-                };
-              }
-            };
-          })();
-          window.__vidfarmEditorTracers = tracerStore;
+          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 openTracerModal() {
-            if (!hasTracerModal) {
+          function loadSourceUrl(value) {
+            if (!value) return;
+            let url = "";
+            try {
+              url = absoluteUrl(value);
+            } catch {
+              setStatus("The source image URL is invalid.", "error");
               return;
             }
-            modalBackdrop.hidden = false;
-            modalBackdrop.setAttribute("data-open", "true");
-            modalError.textContent = "";
-            modalInput.value = "";
-            window.requestAnimationFrame(() => modalInput.focus());
+            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 closeTracerModal() {
-            if (!hasTracerModal) {
-              return;
+          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);
             }
-            modalBackdrop.setAttribute("data-open", "false");
-            modalBackdrop.hidden = true;
-            modalError.textContent = "";
+            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"]));
           }
 
-          function submitTracerModal() {
-            if (!hasTracerModal) {
+          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 tracer = modalInput.value.trim();
-            if (!tracer) {
-              modalError.textContent = "Enter a tracer id.";
-              modalInput.focus();
-              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;
             }
-            tracerStore.add(tracer);
-            closeTracerModal();
           }
 
-          function renderTracerChips(tracers) {
-            tracerChipRow.innerHTML = tracers.length
-              ? tracers.map((tracer) => '<span class="editor-history-chip">' + escapeHtml(tracer) + '</span>').join("")
-              : '<span class="editor-history-chip is-empty">No tracer selected yet</span>';
+          async function addAttachmentFiles(files) {
+            const scope = pendingInpaintAttachmentScope;
+            pendingInpaintAttachmentScope = null;
+            await addAttachmentFilesForScope(files, scope);
           }
 
-          function renderEmpty(message) {
-            historyRoot.innerHTML = '<div class="editor-history-empty">' + escapeHtml(message) + '</div>';
+          function resetMask() {
+            inpaintStrokes = [];
+            redoStrokes = [];
+            currentInpaintStroke = null;
+            isInpaintPainting = false;
+            redrawInpaintMask();
           }
 
-          function renderRefreshIcon() {
-            return '<svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
-              '<path d="M21 12a9 9 0 0 1-15.1 6.6L3 16"></path>' +
-              '<path d="M3 21v-5h5"></path>' +
-              '<path d="M3 12a9 9 0 0 1 15.1-6.6L21 8"></path>' +
-              '<path d="M21 3v5h-5"></path>' +
-            '</svg>';
+          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("", "");
           }
 
-          function getPreviewKind(url) {
-            if (/\\.(png|jpe?g|gif|webp|avif|svg)(\\?|#|$)/i.test(url)) {
-              return "image";
+          async function loadSourceFile(file) {
+            if (!file || !file.type.startsWith("image/")) {
+              setStatus("Choose an image file.", "error");
+              return;
             }
-            if (/\\.(mp4|webm|ogg|mov|m4v)(\\?|#|$)/i.test(url)) {
-              return "video";
+            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;
             }
-            return "file";
           }
 
-          function isPreviewableMediaUrl(url) {
-            return getPreviewKind(url) !== "file";
+          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 openMediaModal(url, kind, label) {
-            if (!hasMediaModal) {
-              window.open(url, "_blank", "noopener,noreferrer");
-              return;
-            }
-            mediaModalTitle.textContent = label;
-            mediaModalSource.href = url;
-            if (kind === "image") {
-              mediaModalBody.innerHTML = '<img src="' + escapeHtml(url) + '" alt="' + escapeHtml(label) + '" />';
-            } else if (kind === "video") {
-              mediaModalBody.innerHTML = '<video src="' + escapeHtml(url) + '" controls autoplay playsinline preload="metadata"></video>';
-            } else {
-              mediaModalBody.innerHTML = '<a class="editor-history-button is-primary" href="' + escapeHtml(url) + '" target="_blank" rel="noreferrer">Open file</a>';
-            }
-            mediaModalBackdrop.hidden = false;
-            mediaModalBackdrop.setAttribute("data-open", "true");
+          function isPendingJobStatus(status) {
+            return ["queued", "running", "waiting_for_provider", "waiting_for_child", "waiting_for_human"].includes(String(status || ""));
           }
 
-          function closeMediaModal() {
-            if (!hasMediaModal) {
-              return;
-            }
-            mediaModalBackdrop.setAttribute("data-open", "false");
-            mediaModalBackdrop.hidden = true;
-            mediaModalSource.href = "#";
-            mediaModalBody.innerHTML = "";
+          function pendingHistoryItemKey(jobId) {
+            return "job:" + String(jobId || "");
           }
 
-          function renderPreviewLinks(urls) {
-            if (!Array.isArray(urls) || !urls.length) {
-              return "";
-            }
-            return '<div class="editor-history-card-previews">' + urls.map((url, index) => (
-              (() => {
-                const kind = getPreviewKind(url);
-                const label = 'Output ' + (index + 1);
-                if (kind === "image") {
-                  return '<button type="button" class="editor-history-card-preview" data-preview-url="' + escapeHtml(url) + '" data-preview-kind="' + kind + '" data-preview-label="' + escapeHtml(label) + '">' +
-                    '<img src="' + escapeHtml(url) + '" alt="' + escapeHtml(label) + '" loading="lazy" decoding="async" />' +
-                    '<span class="editor-history-card-preview-label">' + escapeHtml(label) + '</span>' +
-                  '</button>';
-                }
-                if (kind === "video") {
-                  return '<button type="button" class="editor-history-card-preview" data-preview-url="' + escapeHtml(url) + '" data-preview-kind="' + kind + '" data-preview-label="' + escapeHtml(label) + '">' +
-                    '<video src="' + escapeHtml(url) + '" muted playsinline preload="metadata" aria-hidden="true"></video>' +
-                    '<span class="editor-history-video-play" aria-hidden="true"></span>' +
-                    '<span class="editor-history-card-preview-label">' + escapeHtml(label) + '</span>' +
-                  '</button>';
-                }
-                return '<button type="button" class="editor-history-card-preview" data-preview-url="' + escapeHtml(url) + '" data-preview-kind="' + kind + '" data-preview-label="' + escapeHtml(label) + '">' +
-                  '<span class="editor-history-card-preview-fallback">' + escapeHtml(label) + '</span>' +
-                '</button>';
-              })()
-            )).join("") + '</div>';
+          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 collectGroupPreviewUrls(entries) {
-            const seen = new Set();
-            const urls = [];
-            for (const entry of entries) {
-              const candidates = entry.outputMediaUrls && entry.outputMediaUrls.length ? entry.outputMediaUrls : entry.mediaUrls;
-              if (!Array.isArray(candidates)) {
-                continue;
-              }
-              for (const url of candidates) {
-                if (!url || seen.has(url) || !isPreviewableMediaUrl(url)) {
-                  continue;
-                }
-                seen.add(url);
-                urls.push(url);
-              }
-            }
-            return urls;
+          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 renderGroupPreviewStrip(entries, groupKey) {
-            const urls = collectGroupPreviewUrls(entries);
-            if (!urls.length) {
-              return "";
-            }
-            const isExpanded = expandedPreviewGroups.has(groupKey);
-            const visibleUrls = isExpanded ? urls : urls.slice(0, 5);
-            const visible = visibleUrls.map((url) => {
-              const kind = getPreviewKind(url);
-              if (kind === "video") {
-                const label = 'Output preview';
-                return '<button type="button" class="editor-history-group-preview" data-preview-url="' + escapeHtml(url) + '" data-preview-kind="video" data-preview-label="' + escapeHtml(label) + '" aria-label="Preview video output">' +
-                  '<video src="' + escapeHtml(url) + '" muted playsinline preload="metadata" aria-hidden="true"></video>' +
-                  '<span class="editor-history-video-play" aria-hidden="true"></span>' +
-                '</button>';
+          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;
               }
-              if (kind === "image") {
-                const label = 'Output preview';
-                return '<button type="button" class="editor-history-group-preview" data-preview-url="' + escapeHtml(url) + '" data-preview-kind="image" data-preview-label="' + escapeHtml(label) + '" aria-label="Preview image output">' +
-                  '<img src="' + escapeHtml(url) + '" alt="" loading="lazy" decoding="async" />' +
-                '</button>';
+              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);
               }
-              return "";
-            }).join("");
-            const more = !isExpanded && urls.length > visibleUrls.length
-              ? '<button type="button" class="editor-history-group-preview-more" data-editor-expand-media="' + escapeHtml(groupKey) + '" aria-label="Show all media previews">+' + escapeHtml(urls.length - visibleUrls.length) + '</button>'
-              : "";
-            return '<div class="editor-history-group-previews' + (isExpanded ? ' is-expanded' : '') + '" aria-label="Generated media previews">' + visible + more + '</div>';
+            });
           }
 
-          function renderSample(title, payload, omittedReason) {
-            return '<section class="editor-history-sample">' +
-              '<h4>' + escapeHtml(title) + '</h4>' +
-              (omittedReason ? '<div class="editor-history-sample-note">' + escapeHtml(omittedReason) + '</div>' : '') +
-              '<pre>' + escapeHtml(formatJson(payload)) + '</pre>' +
-            '</section>';
+          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 renderEntry(entry) {
-            return '<article class="editor-history-card">' +
-              renderHttpAction(entry) +
-              '<div class="editor-history-card-foot">' +
-                '<span>' + escapeHtml(new Date(entry.createdAt).toLocaleString()) + '</span>' +
-              '</div>' +
-              renderPreviewLinks(entry.outputMediaUrls && entry.outputMediaUrls.length ? entry.outputMediaUrls : entry.mediaUrls) +
-            '</article>';
+          function historyItemKey(entry, url, index) {
+            return String(entry?.jobId || entry?.job_id || entry?.id || "inpaint") + ":" + index + ":" + String(url || "");
           }
 
-          function hasGeneratedTracerSuffix(tracer) {
-            return /-[a-z0-9]{8}$/i.test(String(tracer || "").trim());
+          function setHistoryEmpty(message) {
+            historyList.innerHTML = "";
+            const empty = document.createElement("div");
+            empty.className = "custom-inpaint-history-empty";
+            empty.textContent = message;
+            historyList.append(empty);
           }
 
-          function doesTracerMatchSelection(entryTracer, selectedTracer) {
-            const normalizedEntry = String(entryTracer || "").trim();
-            const normalizedSelected = String(selectedTracer || "").trim();
-            if (!normalizedEntry || !normalizedSelected) {
-              return false;
+          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);
             }
-            if (normalizedEntry === normalizedSelected) {
-              return true;
+          }
+
+          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 normalizedEntry.startsWith(normalizedSelected + "-") && hasGeneratedTracerSuffix(normalizedEntry);
+            return items;
           }
 
           async function copyText(value) {
@@ -1831,9 +2088,7 @@ export function renderTemplateEditorDocsPage(input) {
               try {
                 await navigator.clipboard.writeText(value);
                 return true;
-              } catch {
-                // Fall back to the textarea path when browser permissions block clipboard.writeText.
-              }
+              } catch {}
             }
             const field = document.createElement("textarea");
             field.value = value;
@@ -1851,459 +2106,386 @@ export function renderTemplateEditorDocsPage(input) {
             return copied;
           }
 
-          const copyFeedbackTimers = new WeakMap();
-
-          function clearCopyFeedback(button) {
-            const previousTimer = copyFeedbackTimers.get(button);
-            if (previousTimer) {
-              window.clearTimeout(previousTimer);
-            }
-            copyFeedbackTimers.delete(button);
-            button.removeAttribute("data-copying");
-            button.removeAttribute("data-copied");
-            button.removeAttribute("data-copy-error");
-          }
-
-          function resetCopyFeedback(button, label) {
-            button.removeAttribute("data-copying");
-            button.removeAttribute("data-copied");
-            button.removeAttribute("data-copy-error");
-            button.setAttribute("aria-label", "Copy " + label);
-            button.setAttribute("title", "Copy " + label);
-            copyFeedbackTimers.delete(button);
-          }
-
-          function showCopyingFeedback(button, label) {
-            clearCopyFeedback(button);
-            button.setAttribute("data-copying", "true");
-            button.setAttribute("aria-label", "Copying " + label);
-            button.setAttribute("title", "Copying");
-          }
-
-          function showCopyFeedback(button, label) {
-            clearCopyFeedback(button);
-            button.setAttribute("data-copied", "true");
-            button.setAttribute("aria-label", "Copied " + label);
-            button.setAttribute("title", "Copied");
-            const timer = window.setTimeout(() => {
-              resetCopyFeedback(button, label);
-            }, 1400);
-            copyFeedbackTimers.set(button, timer);
-          }
-
-          function showCopyErrorFeedback(button, label) {
-            clearCopyFeedback(button);
-            button.setAttribute("data-copy-error", "true");
-            button.setAttribute("aria-label", "Copy failed for " + label);
-            button.setAttribute("title", "Copy failed");
-            const timer = window.setTimeout(() => {
-              resetCopyFeedback(button, label);
-            }, 1800);
-            copyFeedbackTimers.set(button, timer);
-          }
-
-          function renderGroups(entries, tracers) {
-            if (!tracers.length) {
-              renderEmpty("Use Copilot to start or select a tracer, then its grouped POST history will appear here.");
-              return;
+          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;
             }
+          }
 
-            const grouped = new Map();
-            for (const entry of entries) {
-              const key = tracers.find((tracer) => doesTracerMatchSelection(entry.tracer, tracer)) || entry.tracer || "No tracer";
-              const existing = grouped.get(key) || [];
-              existing.push(entry);
-              grouped.set(key, existing);
+          async function checkInpaintJobStatus(jobId, button) {
+            if (!jobId) return null;
+            if (button instanceof HTMLButtonElement) {
+              button.disabled = true;
+              button.textContent = "Checking";
             }
-
-            historyRoot.innerHTML = tracers.map((tracer, index) => {
-              const groupEntries = grouped.get(tracer) || [];
-              const activeRefresh = index === 0
-                ? '<button type="button" class="editor-history-button editor-history-refresh" data-editor-history-refresh="' + escapeHtml(tracer) + '" aria-label="Refresh tracer history" title="Refresh tracer history">' + renderRefreshIcon() + '</button>'
-                : '';
-              const menu = '<span class="editor-history-menu-wrap" data-editor-history-menu-wrap>' +
-                '<button type="button" class="editor-history-button editor-history-menu-button" data-editor-history-menu-toggle="' + escapeHtml(tracer) + '" aria-label="Tracer actions" title="Tracer actions">...</button>' +
-                '<span class="editor-history-menu" role="menu">' +
-                  '<button type="button" data-editor-history-copy="' + escapeHtml(tracer) + '">Copy Tracer</button>' +
-                  '<button type="button" data-editor-history-rename="' + escapeHtml(tracer) + '">Rename tracer</button>' +
-                  '<button type="button" data-editor-history-remove="' + escapeHtml(tracer) + '">Remove from view</button>' +
-                  '<button type="button" data-editor-history-archive="' + escapeHtml(tracer) + '" data-danger="true">Archive tracer</button>' +
-                '</span>' +
-              '</span>';
-              const callsLabel = groupEntries.length
-                ? escapeHtml(groupEntries.length) + ' POST call' + (groupEntries.length === 1 ? '' : 's')
-                : 'No POST calls yet';
-              return (
-              '<details class="editor-history-group"' + (index === 0 ? ' open' : '') + '>' +
-                '<summary>' +
-                  '<div class="editor-history-group-main">' +
-                    '<h3>' + escapeHtml(tracer) + '</h3>' +
-                    '<p>' + callsLabel + '</p>' +
-                    renderGroupPreviewStrip(groupEntries, tracer) +
-                  '</div>' +
-                  '<div class="editor-history-group-actions">' +
-                    activeRefresh +
-                    menu +
-                    '<span class="editor-history-group-toggle">Toggle</span>' +
-                  '</div>' +
-                '</summary>' +
-                '<div class="editor-history-group-body">' +
-                  (groupEntries.length
-                    ? groupEntries.map(renderEntry).join("")
-                    : '<div class="editor-history-empty">No POST history exists for this tracer yet.</div>') +
-                '</div>' +
-              '</details>'
-            )}).join("");
-          }
-
-          async function fetchHistoryPayload(endpoint) {
-            const response = await fetch(endpoint.toString(), { credentials: "same-origin" });
-            let payload = null;
             try {
-              payload = await response.json();
-            } catch {
-              payload = null;
-            }
-            if (!response.ok) {
-              const message = payload && typeof payload.error === "string"
-                ? payload.error
-                : "Unable to load POST history.";
-              throw new Error(message + " (" + response.status + ")");
+              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";
+              }
             }
-            return payload || {};
           }
 
-          async function loadFallbackHistory(selectedTracers) {
-            if (!boot.fallbackHistoryEndpoint) {
-              throw new Error("No fallback history endpoint is configured.");
-            }
-            const byId = new Map();
-            for (const tracer of selectedTracers) {
-              const endpoint = new URL(boot.fallbackHistoryEndpoint, window.location.origin);
-              endpoint.searchParams.set("tracer", tracer);
-              const payload = await fetchHistoryPayload(endpoint);
-              for (const entry of Array.isArray(payload.entries) ? payload.entries : []) {
-                byId.set(entry.id, entry);
+          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));
             }
-            return { entries: [...byId.values()] };
+            upsertInpaintHistoryItem(makePendingInpaintHistoryItem({ job_id: jobId, status: "running" }));
+            setStatus("Image edit job is still running. Use Check Status in History.", "");
+            return null;
           }
 
-          async function loadHistory(options) {
-            const showLoading = Boolean(options && options.showLoading);
-            const triggerButton = options && options.triggerButton instanceof HTMLButtonElement ? options.triggerButton : null;
-            const selectedTracers = tracerStore.get();
-            renderTracerChips(selectedTracers);
-            if (!selectedTracers.length) {
-              renderEmpty("No tracer selected yet.");
+          async function submitInpaintJob() {
+            if (!sourceImageUrl || inpaintSubmit.disabled) {
+              setStatus("Upload a source image first.", "error");
               return;
             }
-            if (!boot.isLoggedIn) {
-              renderEmpty("Sign in to load tracer-scoped POST history.");
+            if (!inpaintStrokes.length) {
+              setStatus("Paint at least one mask region.", "error");
               return;
             }
-
-            const endpoint = new URL(boot.historyEndpoint, window.location.origin);
-            if (selectedTracers.length) {
-              endpoint.searchParams.set("tracers", selectedTracers.join(","));
-            } else {
-              endpoint.searchParams.delete("tracers");
+            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;
             }
-
-            if (triggerButton) {
-              triggerButton.disabled = true;
-              triggerButton.setAttribute("data-loading", "true");
-            } else if (showLoading) {
-              historyRoot.innerHTML = '<div class="editor-history-empty">Loading POST history…</div>';
+            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 {
-              let payload;
-              try {
-                payload = await fetchHistoryPayload(endpoint);
-              } catch (primaryError) {
-                console.warn("Editor-scoped history failed; trying job-runs history fallback.", primaryError);
-                payload = await loadFallbackHistory(selectedTracers);
-              }
-              const entries = Array.isArray(payload.entries) ? payload.entries : [];
-              lastHistoryEntries = entries;
-              lastSelectedTracers = selectedTracers;
-              renderGroups(entries, selectedTracers);
+              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);
-              renderEmpty("Unable to load tracer-scoped POST history" + (error instanceof Error && error.message ? ": " + error.message : "."));
+              setStatus(error instanceof Error ? error.message : "Unable to create image edit.", "error");
             } finally {
-              if (triggerButton) {
-                triggerButton.disabled = false;
-                triggerButton.setAttribute("data-loading", "false");
-              }
+              setSubmitLoading(false);
+              uploadButton.disabled = false;
             }
           }
 
-          async function renameStoredTracer(fromTracer, toTracer) {
-            const normalizedFrom = String(fromTracer || "").trim();
-            const normalizedTo = String(toTracer || "").trim();
-            if (!normalizedFrom || !normalizedTo || normalizedFrom === normalizedTo) {
-              return;
-            }
-            const response = await fetch(boot.tracerEndpoint, {
-              method: "PATCH",
-              credentials: "same-origin",
-              headers: { "content-type": "application/json" },
-              body: JSON.stringify({
-                from_tracer: normalizedFrom,
-                to_tracer: normalizedTo
-              })
-            });
-            if (!response.ok) {
-              throw new Error("Unable to update tracer.");
-            }
-            const nextTracers = tracerStore.get().map((entry) => entry === normalizedFrom ? normalizedTo : entry);
-            tracerStore.set(nextTracers);
-            await loadHistory({ showLoading: true });
-          }
-
-          loadHistory({ showLoading: true });
-          window.addEventListener("popstate", () => loadHistory({ showLoading: true }));
-          window.addEventListener("vidfarm:editor-tracers-changed", () => loadHistory());
-          if (hasTracerModal) {
-            addTracerButton.addEventListener("click", () => openTracerModal());
-            modalSubmit.addEventListener("click", () => submitTracerModal());
-            modalCancel.addEventListener("click", () => closeTracerModal());
-            modalInput.addEventListener("keydown", (event) => {
-              if (event.key === "Enter") {
-                event.preventDefault();
-                submitTracerModal();
-                return;
-              }
-              if (event.key === "Escape") {
-                event.preventDefault();
-                closeTracerModal();
-              }
-            });
-            modalBackdrop.addEventListener("click", (event) => {
-              if (event.target === modalBackdrop) {
-                closeTracerModal();
-              }
-            });
-          }
-          if (hasMediaModal) {
-            mediaModalClose.addEventListener("click", () => closeMediaModal());
-            mediaModalBackdrop.addEventListener("click", (event) => {
-              if (event.target === mediaModalBackdrop) {
-                closeMediaModal();
-              }
-            });
-          }
-          if (hasHttpModal) {
-            httpModalClose.addEventListener("click", () => closeHttpModal());
-            httpModalBackdrop.addEventListener("click", (event) => {
-              if (event.target === httpModalBackdrop) {
-                closeHttpModal();
-              }
-            });
-          }
-          window.addEventListener("keydown", (event) => {
-            if (event.key === "Escape") {
-              if (hasHttpModal && httpModalBackdrop.hidden === false) {
-                closeHttpModal();
-                return;
-              }
-              if (hasMediaModal && mediaModalBackdrop.getAttribute("data-open") === "true") {
-                closeMediaModal();
-                return;
-              }
-              if (hasTracerModal && modalBackdrop.getAttribute("data-open") === "true") {
-                closeTracerModal();
-              }
-            }
+          renderInpaintControls();
+          void loadInpaintProviders();
+          initializeFromUrl();
+          void loadInpaintHistory();
+          uploadButton.addEventListener("click", () => fileInput.click());
+          historyRefresh.addEventListener("click", () => {
+            void loadInpaintHistory();
           });
-          historyRoot.addEventListener("click", (event) => {
+          historyList.addEventListener("pointerdown", (event) => {
             const target = event.target;
-            if (!(target instanceof Element)) {
-              return;
-            }
-            const previewButton = target.closest("[data-preview-url]");
-            if (previewButton instanceof HTMLButtonElement) {
-              event.preventDefault();
+            if (target instanceof Element && target.closest("[data-history-confirm]")) {
               event.stopPropagation();
-              const url = previewButton.getAttribute("data-preview-url") || "";
-              const kind = previewButton.getAttribute("data-preview-kind") || "file";
-              const label = previewButton.getAttribute("data-preview-label") || "Output preview";
-              if (url) {
-                openMediaModal(url, kind, label);
-              }
-              return;
             }
-            const expandMediaButton = target.closest("[data-editor-expand-media]");
-            if (expandMediaButton instanceof HTMLButtonElement) {
-              event.preventDefault();
+          });
+          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 key = expandMediaButton.getAttribute("data-editor-expand-media") || "";
-              if (key) {
-                expandedPreviewGroups.add(key);
-                renderGroups(lastHistoryEntries, lastSelectedTracers);
-              }
+            }
+            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 httpDetailButton = target.closest("[data-editor-http-detail]");
-            if (httpDetailButton instanceof HTMLButtonElement) {
-              event.preventDefault();
-              event.stopPropagation();
-              try {
-                openHttpModal(JSON.parse(decodeURIComponent(httpDetailButton.getAttribute("data-editor-http-detail") || "")));
-              } catch (error) {
-                console.error(error);
-              }
+            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 refreshButton = target.closest("[data-editor-history-refresh]");
-            if (refreshButton instanceof HTMLButtonElement) {
-              event.preventDefault();
-              event.stopPropagation();
-              void loadHistory({ triggerButton: refreshButton });
+            const checkButton = target.closest("[data-history-check]");
+            if (checkButton instanceof HTMLButtonElement) {
+              void checkInpaintJobStatus(checkButton.dataset.historyCheck || "", checkButton);
               return;
             }
-            const menuToggle = target.closest("[data-editor-history-menu-toggle]");
-            if (menuToggle instanceof HTMLButtonElement) {
-              event.preventDefault();
-              event.stopPropagation();
-              const wrap = menuToggle.closest("[data-editor-history-menu-wrap]");
-              const isOpen = wrap instanceof HTMLElement && wrap.getAttribute("data-open") === "true";
-              document.querySelectorAll("[data-editor-history-menu-wrap]").forEach((entry) => entry.removeAttribute("data-open"));
-              if (wrap instanceof HTMLElement && !isOpen) {
-                wrap.setAttribute("data-open", "true");
+            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 copyButton = target.closest("[data-editor-history-copy]");
-            if (copyButton instanceof HTMLButtonElement) {
-              event.preventDefault();
-              event.stopPropagation();
-              const tracer = copyButton.getAttribute("data-editor-history-copy") || "";
-              document.querySelectorAll("[data-editor-history-menu-wrap]").forEach((entry) => entry.removeAttribute("data-open"));
-              if (!tracer) {
-                return;
-              }
-              void copyText(tracer).then((copied) => {
-                if (!copied) {
-                  window.prompt("Copy tracer", tracer);
-                }
-              }).catch((error) => {
-                console.error(error);
-                window.prompt("Copy tracer", tracer);
-              });
+            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 renameButton = target.closest("[data-editor-history-rename]");
-            if (renameButton instanceof HTMLButtonElement) {
-              event.preventDefault();
-              event.stopPropagation();
-              const tracer = renameButton.getAttribute("data-editor-history-rename") || "";
-              document.querySelectorAll("[data-editor-history-menu-wrap]").forEach((entry) => entry.removeAttribute("data-open"));
-              const nextTracer = window.prompt("Rename tracer", tracer);
-              if (nextTracer === null || !nextTracer.trim() || nextTracer.trim() === tracer) {
-                return;
+            const confirmRemove = target.closest("[data-history-confirm-remove]");
+            if (confirmRemove instanceof HTMLElement) {
+              const key = confirmRemove.dataset.historyConfirmRemove || "";
+              if (key) {
+                hiddenInpaintHistoryKeys.add(key);
+                renderInpaintHistory();
               }
-              void renameStoredTracer(tracer, nextTracer.trim()).catch((error) => {
-                console.error(error);
-                window.alert("Unable to rename tracer.");
-              });
               return;
             }
-            const archiveButton = target.closest("[data-editor-history-archive]");
-            if (archiveButton instanceof HTMLButtonElement) {
-              event.preventDefault();
-              event.stopPropagation();
-              const tracer = archiveButton.getAttribute("data-editor-history-archive") || "";
-              document.querySelectorAll("[data-editor-history-menu-wrap]").forEach((entry) => entry.removeAttribute("data-open"));
-              if (!tracer || tracer.startsWith("archived_")) {
-                return;
-              }
-              const confirmed = window.confirm('Archive "' + tracer + '"? This renames its POST logs and jobs to "archived_' + tracer + '".');
-              if (confirmed) {
-                void renameStoredTracer(tracer, "archived_" + tracer).catch((error) => {
-                  console.error(error);
-                  window.alert("Unable to archive tracer.");
-                });
-              }
+          });
+          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 removeButton = target.closest("[data-editor-history-remove]");
-            if (removeButton instanceof HTMLButtonElement) {
-              event.preventDefault();
-              event.stopPropagation();
-              const tracer = removeButton.getAttribute("data-editor-history-remove") || "";
-              document.querySelectorAll("[data-editor-history-menu-wrap]").forEach((entry) => entry.removeAttribute("data-open"));
-              if (!tracer) {
-                return;
-              }
-              const confirmed = window.confirm('Remove "' + tracer + '" from this page view? This does not delete its runs. You can still find them in Job Runs.');
-              if (confirmed) {
-                tracerStore.remove(tracer);
-              }
+            const remove = target.closest("[data-editor-inpaint-remove-attachment]");
+            if (remove instanceof HTMLElement) {
+              inpaintAttachments = inpaintAttachments.filter((attachment) => attachment.id !== remove.dataset.editorInpaintRemoveAttachment);
+              renderAllAttachmentChips();
             }
           });
-          document.addEventListener("click", (event) => {
+          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)) {
+            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 copyButton = target.closest("[data-editor-copy-content]");
-            if (!(copyButton instanceof HTMLButtonElement)) {
+            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;
             }
-            event.preventDefault();
-            const value = copyButton.getAttribute("data-editor-copy-content") || "";
-            const label = copyButton.getAttribute("data-editor-copy-label") || "Copied text";
-            if (!value) {
-              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();
             }
-            showCopyingFeedback(copyButton, label);
-            void copyText(value).then((copied) => {
-              if (!copied) {
-                showCopyErrorFeedback(copyButton, label);
-                window.prompt(label, value);
-                return;
-              }
-              showCopyFeedback(copyButton, label);
-            }).catch((error) => {
-              console.error(error);
-              showCopyErrorFeedback(copyButton, label);
-              window.prompt(label, value);
-            });
           });
         })();
       </script>
     `
     });
 }
-function renderPreview(url, alt) {
-    if (/\.(mp4|webm|ogg|mov)(\?|#|$)/i.test(url)) {
-        return `<video class="editor-preview" src="${escapeAttribute(url)}" controls playsinline preload="metadata" aria-label="${escapeAttribute(alt)}"></video>`;
-    }
-    return `<img class="editor-preview" src="${escapeAttribute(url)}" alt="${escapeAttribute(alt)}" loading="lazy" decoding="async" />`;
-}
-function renderQuickstartTextarea(label, value, rows) {
-    const text = value.trim() || "Not configured for this template yet.";
-    return `
-    <div class="editor-quickstart-field">
-      <div class="editor-quickstart-field-head">
-        <span>${escapeHtml(label)}</span>
-        <button
-          type="button"
-          class="editor-quickstart-copy"
-          data-editor-copy-content="${escapeAttribute(text)}"
-          data-editor-copy-label="${escapeAttribute(label)}"
-          aria-label="Copy ${escapeAttribute(label)}"
-          title="Copy ${escapeAttribute(label)}"
-        >
-          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
-            <rect x="9" y="9" width="10" height="10" rx="2" fill="none" stroke="currentColor" stroke-width="2"></rect>
-            <path d="M6 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
-          </svg>
-        </button>
-      </div>
-      <textarea class="editor-quickstart-textarea" readonly rows="${rows}" spellcheck="false" aria-label="${escapeAttribute(label)}">${escapeHtml(text)}</textarea>
-    </div>
-  `;
-}
+//# sourceMappingURL=template-editor-pages.js.map