@mevdragon/vidfarm-devcli 0.2.13 → 0.2.14

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

@@ -1,8 +1,7 @@
-import { escapeAttribute, escapeHtml, renderBrandLockup, renderPageShell, renderPrimaryNav, withAccountQuery } from "./page-shell.js";
-import { renderTemplateEditorChrome, TEMPLATE_EDITOR_SHELL_SCRIPT, TEMPLATE_EDITOR_SHELL_STYLES } from "./template-editor-shell.js";
+import { renderBrandLockup, renderPageShell, renderPrimaryNav } from "./page-shell.js";
 export function renderCustomInpaintPage(input) {
     return renderPageShell({
-        title: "Image Tools",
+        title: "Inpaint",
         mainClass: "is-wide",
         style: `
       .custom-inpaint-frame {
@@ -889,7 +888,7 @@ export function renderCustomInpaintPage(input) {
           <section class="custom-inpaint-workbench">
             <aside class="custom-inpaint-panel">
               <div class="custom-inpaint-panel-head">
-                <h1>Image Tools</h1>
+                <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>
@@ -2489,4136 +2488,4 @@ export function renderCustomInpaintPage(input) {
     `
     });
 }
-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>`;
-    const soundMetadata = renderTemplateSound(input.template.sound);
-    return renderPageShell({
-        title: `${input.template.title} timeline workspace`,
-        mainClass: "is-wide",
-        runtimeBoot: input.editorChat ? {
-            pageKind: "legacy",
-            title: `${input.template.title} timeline workspace`,
-            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;
-        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);
-      }
-
-      .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);
-        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;
-      }
-
-      .editor-panel-summary {
-        display: grid;
-        gap: 4px;
-      }
-
-      .editor-panel-summary h2 {
-        margin: 0;
-        font-size: 1.55rem;
-        letter-spacing: -0.04em;
-      }
-
-      .editor-panel-summary p {
-        margin: 0;
-        color: #617087;
-        line-height: 1.6;
-      }
-
-      .editor-panel-toggle {
-        display: inline-flex;
-        align-items: center;
-        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;
-      }
-
-      .editor-panel[open] .editor-panel-toggle::before {
-        transform: rotate(225deg) translateY(-1px);
-      }
-
-      .editor-panel-body {
-        padding: 0 22px 22px;
-      }
-
-      .editor-panel-body > .editor-hero,
-      .editor-panel-body > .editor-section {
-        border: 0;
-        border-radius: 0;
-        background: transparent;
-        box-shadow: none;
-        padding: 0;
-      }
-
-      .editor-hero {
-        display: grid;
-        grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
-        gap: 22px;
-        padding: 22px;
-      }
-
-      .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);
-      }
-
-      .editor-preview-empty {
-        display: grid;
-        place-items: center;
-        color: #74829c;
-      }
-
-      .editor-copy {
-        display: grid;
-        align-content: start;
-        gap: 18px;
-        min-width: 0;
-      }
-
-      .editor-kicker {
-        color: #8d99ae;
-        font-size: 0.85rem;
-        text-transform: uppercase;
-        letter-spacing: 0.12em;
-      }
-
-      .editor-title {
-        margin: 0;
-        font-size: clamp(2rem, 3.6vw, 3.1rem);
-        line-height: 0.94;
-        letter-spacing: -0.06em;
-      }
-
-      .editor-copy p {
-        margin: 0;
-        color: #5f6c83;
-        font-size: 1rem;
-        line-height: 1.7;
-      }
-
-      .editor-sound {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: 10px;
-        width: fit-content;
-        max-width: 100%;
-        padding: 12px 14px;
-        border: 1px solid rgba(191, 164, 109, 0.26);
-        border-radius: 18px;
-        background: rgba(255, 255, 255, 0.66);
-        color: #314055;
-      }
-
-      .editor-sound-label {
-        color: #8d99ae;
-        font-size: 0.75rem;
-        font-weight: 800;
-        letter-spacing: 0.12em;
-        text-transform: uppercase;
-      }
-
-      .editor-sound-title {
-        min-width: 0;
-        color: #263245;
-        font-weight: 800;
-        line-height: 1.35;
-        overflow-wrap: anywhere;
-      }
-
-      .editor-sound a {
-        color: inherit;
-        text-decoration: none;
-      }
-
-      .editor-sound a:hover {
-        text-decoration: underline;
-        text-underline-offset: 4px;
-      }
-
-      .editor-pills,
-      .editor-route-list {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 10px;
-      }
-
-      .editor-toolbar {
-        display: flex;
-        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-copy-button:hover {
-        border-color: rgba(102, 82, 43, 0.3);
-        background: #fff;
-      }
-
-      .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-pill[data-difficulty] {
-        border-color: rgba(219, 193, 122, 0.44);
-        background: rgba(219, 193, 122, 0.18);
-        color: #6f5514;
-        font-weight: 800;
-      }
-
-      .editor-pill[data-difficulty="hard"],
-      .editor-pill[data-difficulty="expert"] {
-        border-color: rgba(134, 92, 255, 0.3);
-        background: rgba(134, 92, 255, 0.1);
-        color: #5942a8;
-      }
-
-      .editor-grid {
-        display: grid;
-        grid-template-columns: minmax(0, 1fr);
-        gap: 18px;
-        min-height: 0;
-      }
-
-      .editor-section {
-        display: grid;
-        align-content: start;
-        gap: 16px;
-        padding: 22px;
-      }
-
-      .editor-section h2,
-      .editor-section h3 {
-        margin: 0;
-      }
-
-      .editor-section h2 {
-        font-size: 1.55rem;
-        letter-spacing: -0.04em;
-      }
-
-      .editor-section h3 {
-        font-size: 1rem;
-        color: #243041;
-      }
-
-      .editor-section-header {
-        display: grid;
-        gap: 6px;
-      }
-
-      .editor-section-header p,
-      .editor-note {
-        margin: 0;
-        color: #617087;
-        line-height: 1.7;
-      }
-
-      .editor-route-card {
-        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);
-      }
-
-      .editor-route-head {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: 10px;
-      }
-
-      .editor-route-method {
-        min-height: 30px;
-        padding: 0 10px;
-        font-size: 0.77rem;
-        font-weight: 800;
-      }
-
-      .editor-route-method[data-method="POST"] {
-        color: #7a4b16;
-      }
-
-      .editor-route-method[data-method="GET"] {
-        color: #1e5c52;
-      }
-
-      .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-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-quickstart-grid {
-        display: grid;
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        gap: 14px;
-      }
-
-      .editor-quickstart-field {
-        display: grid;
-        gap: 8px;
-        min-width: 0;
-      }
-
-      .editor-quickstart-field-head {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        gap: 8px;
-        min-width: 0;
-      }
-
-      .editor-quickstart-field-head span {
-        color: #324156;
-        font-size: 0.82rem;
-        font-weight: 800;
-      }
-
-      .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;
-        border-radius: 999px;
-        border: 1px solid rgba(171, 138, 68, 0.48);
-        background: #dbc17a;
-        color: #243041;
-        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-quickstart-copy::after {
-        content: "✓";
-        display: none;
-        color: currentColor;
-        font-size: 1rem;
-        font-weight: 900;
-        line-height: 1;
-      }
-
-      .editor-quickstart-copy[data-copying="true"] {
-        border-color: rgba(102, 82, 43, 0.5);
-        background: #ead89d;
-        color: #243041;
-        transform: scale(0.96);
-      }
-
-      .editor-quickstart-copy[data-copied="true"] {
-        border-color: rgba(30, 92, 82, 0.42);
-        background: #b9e1cf;
-        color: #1e5c52;
-      }
-
-      .editor-quickstart-copy[data-copy-error="true"] {
-        border-color: rgba(155, 45, 45, 0.42);
-        background: #f0c5bd;
-        color: #8d2f24;
-      }
-
-      .editor-quickstart-copy[data-copy-error="true"]::after {
-        content: "!";
-        display: block;
-      }
-
-      .editor-quickstart-copy[data-copied="true"]::after {
-        display: block;
-      }
-
-      .editor-quickstart-copy[data-copy-error="true"] svg,
-      .editor-quickstart-copy[data-copied="true"] svg {
-        display: none;
-      }
-
-      .editor-quickstart-copy svg {
-        display: block;
-        width: 17px;
-        height: 17px;
-        stroke: currentColor;
-      }
-
-      .editor-quickstart-textarea {
-        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-quickstart-samples {
-        display: grid;
-        gap: 8px;
-      }
-
-      .editor-quickstart-samples > h3 {
-        margin: 2px 0 0;
-      }
-
-      .editor-sample-prompt-row {
-        display: flex;
-        gap: 10px;
-        overflow-x: auto;
-        overflow-y: hidden;
-        padding: 2px 0 8px;
-        scrollbar-width: thin;
-      }
-
-      .editor-sample-prompt {
-        flex: 0 0 min(360px, 86vw);
-      }
-
-      .editor-sample-prompt .editor-quickstart-textarea {
-        min-height: 150px;
-        resize: none;
-      }
-
-      .editor-examples-row {
-        display: flex;
-        gap: 12px;
-        overflow-x: auto;
-        overflow-y: hidden;
-        padding: 2px 0 8px;
-        scrollbar-width: thin;
-      }
-
-      .editor-example-card {
-        flex: 0 0 min(240px, 76vw);
-        display: grid;
-        gap: 10px;
-        padding: 10px;
-        border: 1px solid rgba(191, 164, 109, 0.24);
-        border-radius: 18px;
-        background: rgba(255, 255, 255, 0.72);
-      }
-
-      .editor-example-media {
-        position: relative;
-        width: 100%;
-        aspect-ratio: 9 / 12;
-        padding: 0;
-        border: 1px solid rgba(209, 219, 233, 0.96);
-        border-radius: 14px;
-        overflow: hidden;
-        background: rgba(37, 45, 61, 0.95);
-        cursor: zoom-in;
-      }
-
-      .editor-example-media img,
-      .editor-example-media video {
-        width: 100%;
-        height: 100%;
-        display: block;
-        object-fit: cover;
-      }
-
-      .editor-example-note {
-        margin: 0;
-        color: #617087;
-        font-size: 0.82rem;
-        line-height: 1.45;
-      }
-
-      .editor-example-empty {
-        padding: 18px;
-        border-radius: 18px;
-        border: 1px dashed rgba(191, 164, 109, 0.34);
-        background: rgba(255, 255, 255, 0.56);
-        color: #617087;
-      }
-
-      .editor-history-toolbar {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        justify-content: space-between;
-        gap: 12px;
-        margin-bottom: 18px;
-      }
-
-      .editor-history-toolbar p {
-        margin: 0;
-      }
-
-      .editor-history-chip-row {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 8px;
-      }
-
-      .editor-history-toolbar-actions,
-      .editor-history-group-actions {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: 8px;
-      }
-
-      .editor-history-toolbar-actions {
-        justify-content: flex-end;
-      }
-
-      .editor-history-button,
-      .editor-history-remove {
-        display: inline-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;
-      }
-
-      .editor-history-button.is-primary {
-        background: #dbc17a;
-        color: #243041;
-      }
-
-      .editor-history-refresh {
-        width: 30px;
-        min-height: 30px;
-        padding: 0;
-        border-radius: 999px;
-      }
-
-      .editor-history-refresh svg {
-        width: 15px;
-        height: 15px;
-      }
-
-      .editor-history-refresh[data-loading="true"] svg {
-        animation: editor-history-refresh-spin 0.8s linear infinite;
-      }
-
-      .editor-history-menu-wrap {
-        position: relative;
-        display: inline-flex;
-      }
-
-      .editor-history-menu-button {
-        width: 30px;
-        min-height: 30px;
-        padding: 0;
-      }
-
-      .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);
-        border-radius: 10px;
-        background: rgba(255, 252, 247, 0.98);
-        box-shadow: 0 14px 34px rgba(37, 45, 61, 0.16);
-      }
-
-      .editor-history-menu-wrap[data-open="true"] .editor-history-menu {
-        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;
-      }
-
-      .editor-history-menu button:hover {
-        background: rgba(219, 193, 122, 0.16);
-      }
-
-      .editor-history-menu button[data-danger="true"] {
-        color: #8d4a3b;
-      }
-
-      .editor-history-group-previews {
-        display: flex;
-        flex-wrap: nowrap;
-        gap: 6px;
-        margin-top: 10px;
-        overflow: hidden;
-      }
-
-      .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);
-        overflow: hidden;
-        flex: 0 0 auto;
-        cursor: zoom-in;
-      }
-
-      .editor-history-group-preview img,
-      .editor-history-group-preview video {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        display: block;
-      }
-
-      .editor-history-group-preview-more {
-        display: inline-flex;
-        align-items: center;
-        justify-content: 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;
-        cursor: pointer;
-      }
-
-      button.editor-history-group-preview-more:hover,
-      button.editor-history-group-preview-more:focus-visible {
-        border-style: solid;
-        color: #324156;
-        background: rgba(255, 255, 255, 0.9);
-      }
-
-      .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;
-      }
-
-      .editor-history-chip.is-empty {
-        color: #74829c;
-        border-style: dashed;
-      }
-
-      .editor-history-groups {
-        display: grid;
-        gap: 12px;
-      }
-
-      .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;
-      }
-
-      .editor-history-group {
-        border: 1px solid rgba(191, 164, 109, 0.22);
-        border-radius: 20px;
-        background: rgba(255, 255, 255, 0.62);
-        overflow: hidden;
-      }
-
-      .editor-history-group > summary {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 12px;
-        padding: 14px 16px;
-        cursor: pointer;
-        list-style: none;
-      }
-
-      .editor-history-group > summary::-webkit-details-marker {
-        display: none;
-      }
-
-      .editor-history-group-main {
-        display: grid;
-        gap: 4px;
-        min-width: 0;
-      }
-
-      .editor-history-group-main h3 {
-        margin: 0;
-        font-size: 1rem;
-        color: #243041;
-        word-break: break-all;
-      }
-
-      .editor-history-group-main p {
-        margin: 0;
-        color: #74829c;
-        font-size: 0.82rem;
-      }
-
-      .editor-history-group-toggle {
-        color: #617087;
-        font-size: 0.8rem;
-        font-weight: 700;
-        letter-spacing: 0.08em;
-        text-transform: uppercase;
-      }
-
-      .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;
-      }
-
-      @keyframes editor-history-refresh-spin {
-        to {
-          transform: rotate(360deg);
-        }
-      }
-
-      .editor-history-group-body {
-        display: grid;
-        gap: 10px;
-        padding: 0 16px 16px;
-      }
-
-      .editor-history-card {
-        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);
-      }
-
-      .editor-history-card-head {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        gap: 10px;
-      }
-
-      .editor-history-card-main {
-        display: grid;
-        gap: 6px;
-        min-width: 0;
-      }
-
-      .editor-history-card-meta {
-        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;
-      }
-
-      .editor-history-method {
-        color: #7a4b16;
-      }
-
-      .editor-history-status.is-success {
-        color: #1e5c52;
-      }
-
-      .editor-history-status.is-error {
-        color: #9b2d2d;
-      }
-
-      .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-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);
-      }
-
-      .editor-modal-head {
-        display: grid;
-        gap: 6px;
-      }
-
-      .editor-modal-head h3 {
-        margin: 0;
-        font-size: 1.2rem;
-      }
-
-      .editor-modal-head p,
-      .editor-modal-error,
-      .editor-modal-label {
-        margin: 0;
-        color: #617087;
-        line-height: 1.6;
-      }
-
-      .editor-modal-label {
-        font-size: 0.82rem;
-        font-weight: 700;
-        letter-spacing: 0.08em;
-        text-transform: uppercase;
-      }
-
-      .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;
-      }
-
-      .editor-modal-input:focus {
-        outline: 2px solid rgba(219, 193, 122, 0.7);
-        outline-offset: 2px;
-      }
-
-      .editor-modal-error {
-        min-height: 1.4em;
-        color: #9b2d2d;
-        font-size: 0.84rem;
-      }
-
-      .editor-modal-actions {
-        display: flex;
-        justify-content: flex-end;
-        gap: 10px;
-      }
-
-      .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);
-      }
-
-      .editor-media-modal-head {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 12px;
-      }
-
-      .editor-media-modal-actions {
-        display: inline-flex;
-        align-items: center;
-        gap: 10px;
-        flex: 0 0 auto;
-      }
-
-      .editor-media-modal-carousel {
-        display: none;
-        align-items: center;
-        gap: 6px;
-      }
-
-      .editor-media-modal-carousel[data-visible="true"] {
-        display: inline-flex;
-      }
-
-      .editor-media-modal-source {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        border: 0;
-        background: transparent;
-        color: #617087;
-        font-size: 0.82rem;
-        font-weight: 700;
-        font-family: inherit;
-        text-decoration: underline;
-        text-underline-offset: 0.14em;
-        cursor: pointer;
-      }
-
-      .editor-media-modal-source svg {
-        width: 16px;
-        height: 16px;
-      }
-
-      .editor-media-modal-source[data-state="done"] {
-        color: #2f7d4f;
-      }
-
-      .editor-media-modal-source[data-state="error"] {
-        color: #a14444;
-      }
-
-      .editor-media-modal-source[data-visible="false"] {
-        display: none;
-      }
-
-      .editor-media-modal-title {
-        margin: 0;
-        color: #324156;
-        font-size: 0.95rem;
-        font-weight: 700;
-        word-break: break-all;
-      }
-
-      .editor-media-modal-body {
-        min-height: 0;
-        display: grid;
-        place-items: center;
-        overflow: auto;
-        border-radius: 20px;
-        background: rgba(37, 45, 61, 0.96);
-      }
-
-      .editor-media-modal-body img,
-      .editor-media-modal-body video {
-        max-width: 100%;
-        max-height: calc(100vh - 180px);
-        display: block;
-        object-fit: contain;
-      }
-
-      .editor-inpaint-modal-backdrop {
-        position: fixed;
-        inset: 0;
-        display: none;
-        align-items: center;
-        justify-content: center;
-        padding: 18px;
-        background: rgba(15, 23, 42, 0.62);
-        backdrop-filter: blur(12px);
-        z-index: 1300;
-      }
-
-      .editor-inpaint-modal-backdrop[data-open="true"] {
-        display: flex;
-      }
-
-      .editor-inpaint-modal {
-        width: min(100%, 1180px);
-        max-height: calc(100vh - 36px);
-        display: grid;
-        grid-template-rows: auto minmax(0, 1fr) auto;
-        gap: 14px;
-        padding: 16px;
-        border-radius: 24px;
-        border: 1px solid rgba(191, 164, 109, 0.3);
-        background: rgba(255, 251, 244, 0.99);
-        box-shadow: 0 32px 90px rgba(15, 23, 42, 0.32);
-      }
-
-      .editor-inpaint-modal-head,
-      .editor-inpaint-modal-actions,
-      .editor-inpaint-toolbar,
-      .editor-inpaint-color-row,
-      .editor-inpaint-footer {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-      }
-
-      .editor-inpaint-modal-head {
-        justify-content: space-between;
-      }
-
-      .editor-inpaint-title {
-        min-width: 0;
-        display: grid;
-        gap: 2px;
-      }
-
-      .editor-inpaint-title h3 {
-        margin: 0;
-        color: #253041;
-        font-size: 1.02rem;
-      }
-
-      .editor-inpaint-title p,
-      .editor-inpaint-label,
-      .editor-inpaint-status {
-        margin: 0;
-        color: #617087;
-        font-size: 0.8rem;
-        line-height: 1.45;
-      }
-
-      .editor-inpaint-source {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .editor-inpaint-body {
-        min-height: 0;
-        display: grid;
-        grid-template-columns: minmax(0, 1fr) 340px;
-        gap: 14px;
-      }
-
-      .editor-inpaint-stage {
-        min-height: 360px;
-        display: grid;
-        place-items: center;
-        overflow: auto;
-        border-radius: 18px;
-        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-inpaint-canvas-wrap {
-        position: relative;
-        display: inline-block;
-        max-width: 100%;
-        line-height: 0;
-      }
-
-      .editor-inpaint-canvas-wrap img {
-        max-width: 100%;
-        max-height: calc(100vh - 230px);
-        display: block;
-        object-fit: contain;
-        user-select: none;
-      }
-
-      .editor-inpaint-canvas-wrap canvas {
-        position: absolute;
-        inset: 0;
-        width: 100%;
-        height: 100%;
-        opacity: 0.86;
-        cursor: crosshair;
-        touch-action: none;
-      }
-
-      .editor-inpaint-panel {
-        min-height: 0;
-        display: grid;
-        grid-template-rows: auto;
-        align-content: start;
-        gap: 12px;
-        overflow: auto;
-        padding: 12px;
-        border-radius: 18px;
-        border: 1px solid rgba(191, 164, 109, 0.24);
-        background: rgba(255, 255, 255, 0.72);
-      }
-
-      .editor-inpaint-toolbar {
-        flex-wrap: wrap;
-      }
-
-      .editor-inpaint-brush {
-        display: grid;
-        gap: 6px;
-        min-width: 150px;
-      }
-
-      .editor-inpaint-brush input[type="range"] {
-        width: 100%;
-      }
-
-      .editor-inpaint-color-picker {
-        width: 42px;
-        height: 38px;
-        padding: 2px;
-        border: 1px solid rgba(97, 112, 135, 0.24);
-        border-radius: 12px;
-        background: #fff;
-      }
-
-      .editor-inpaint-swatches {
-        display: none;
-      }
-
-      .editor-inpaint-prompts {
-        display: grid;
-        align-content: start;
-        gap: 10px;
-      }
-
-      .editor-inpaint-provider {
-        display: none;
-        gap: 6px;
-      }
-
-      .editor-inpaint-provider[data-visible="true"] {
-        display: grid;
-      }
-
-      .editor-inpaint-provider select {
-        min-height: 38px;
-        padding: 0 34px 0 12px;
-        border-radius: 12px;
-        border: 1px solid rgba(191, 164, 109, 0.34);
-        background: rgba(255, 255, 255, 0.96);
-        color: #243041;
-        font: inherit;
-        font-weight: 800;
-      }
-
-      .editor-inpaint-color-row {
-        position: relative;
-        align-items: flex-start;
-        padding: 4px;
-        border-radius: 16px;
-      }
-
-      .editor-inpaint-color-tools {
-        flex: 0 0 auto;
-        display: grid;
-        justify-items: center;
-        gap: 6px;
-      }
-
-      .editor-inpaint-prompt-stack {
-        min-width: 0;
-        flex: 1 1 auto;
-        display: grid;
-        align-content: start;
-        gap: 8px;
-      }
-
-      .editor-inpaint-global {
-        display: grid;
-        align-content: start;
-        gap: 8px;
-      }
-
-      .editor-inpaint-prompt-field {
-        position: relative;
-        min-width: 0;
-        display: grid;
-      }
-
-      .editor-inpaint-attachment-tools {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        gap: 6px;
-      }
-
-      .editor-inpaint-attach-button {
-        position: absolute;
-        right: 8px;
-        bottom: 8px;
-        transform: translateY(-10px);
-        width: 30px;
-        height: 30px;
-        display: inline-grid;
-        place-items: center;
-        padding: 0;
-        border-radius: 999px;
-        border: 1px solid transparent;
-        background: rgba(255, 255, 255, 0.72);
-        color: rgba(37, 48, 65, 0.56);
-        font: inherit;
-        cursor: pointer;
-      }
-
-      .editor-inpaint-attach-button:hover,
-      .editor-inpaint-attach-button:focus-visible {
-        border-color: rgba(191, 164, 109, 0.34);
-        background: rgba(255, 251, 244, 0.94);
-        color: #253041;
-      }
-
-      .editor-inpaint-attach-button svg {
-        width: 16px;
-        height: 16px;
-      }
-
-      .editor-inpaint-attachment-chips {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        gap: 6px;
-        min-width: 0;
-      }
-
-      .editor-inpaint-attachment-chip {
-        min-width: 0;
-        max-width: 210px;
-        display: inline-flex;
-        align-items: center;
-        gap: 4px;
-        padding: 1px 4px 1px 1px;
-        border-radius: 999px;
-        border: 1px solid rgba(191, 164, 109, 0.3);
-        background: rgba(247, 241, 230, 0.82);
-        color: #253041;
-        font-size: 0.74rem;
-        font-weight: 800;
-      }
-
-      .editor-inpaint-attachment-chip img {
-        width: 22px;
-        height: 22px;
-        min-width: 22px;
-        max-width: 22px;
-        aspect-ratio: 1 / 1;
-        flex: 0 0 22px;
-        object-fit: cover;
-        border-radius: 999px;
-        background: rgba(37, 48, 65, 0.08);
-      }
-
-      .editor-inpaint-attachment-chip span {
-        min-width: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .editor-inpaint-attachment-chip button {
-        width: 18px;
-        height: 18px;
-        min-width: 18px;
-        max-width: 18px;
-        aspect-ratio: 1 / 1;
-        flex: 0 0 18px;
-        display: inline-grid;
-        place-items: center;
-        padding: 0;
-        border: 0;
-        border-radius: 999px;
-        background: rgba(37, 48, 65, 0.1);
-        color: #253041;
-        font: inherit;
-        line-height: 1;
-        cursor: pointer;
-      }
-
-      .editor-inpaint-color-row[data-active="true"] {
-        background: rgba(219, 193, 122, 0.16);
-      }
-
-      .editor-inpaint-color-dot {
-        width: 26px;
-        height: 26px;
-        min-width: 26px;
-        max-width: 26px;
-        aspect-ratio: 1 / 1;
-        flex: 0 0 26px;
-        margin-top: 8px;
-        border-radius: 999px;
-        border: 2px solid rgba(37, 48, 65, 0.18);
-        background: var(--inpaint-color, #ff2d55);
-        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8);
-        cursor: pointer;
-      }
-
-      .editor-inpaint-color-remove {
-        width: 22px;
-        height: 22px;
-        min-width: 22px;
-        max-width: 22px;
-        aspect-ratio: 1 / 1;
-        flex: 0 0 22px;
-        display: inline-grid;
-        place-items: center;
-        padding: 0;
-        border: 1px solid rgba(37, 48, 65, 0.12);
-        border-radius: 999px;
-        background: rgba(255, 255, 255, 0.72);
-        color: rgba(37, 48, 65, 0.56);
-        cursor: pointer;
-      }
-
-      .editor-inpaint-color-remove:hover,
-      .editor-inpaint-color-remove:focus-visible {
-        border-color: rgba(191, 164, 109, 0.36);
-        color: #253041;
-      }
-
-      .editor-inpaint-color-remove svg {
-        width: 13px;
-        height: 13px;
-      }
-
-      .editor-inpaint-color-row[data-active="true"] .editor-inpaint-color-dot {
-        border-color: #253041;
-        box-shadow: 0 0 0 3px rgba(219, 193, 122, 0.45), inset 0 0 0 2px rgba(255, 255, 255, 0.8);
-      }
-
-      .editor-inpaint-prompt {
-        width: 100%;
-        min-height: 72px;
-        display: block;
-        resize: vertical;
-        padding: 10px 44px 18px 12px;
-        border-radius: 14px;
-        border: 1px solid rgba(191, 164, 109, 0.34);
-        background: rgba(255, 255, 255, 0.96);
-        color: #243041;
-        font: inherit;
-        line-height: 1.45;
-      }
-
-      .editor-inpaint-prompt:focus,
-      .editor-inpaint-color-picker:focus,
-      .editor-inpaint-brush input:focus {
-        outline: 2px solid rgba(219, 193, 122, 0.7);
-        outline-offset: 2px;
-      }
-
-      .editor-inpaint-footer {
-        justify-content: space-between;
-        flex-wrap: wrap;
-      }
-
-      .editor-inpaint-status[data-tone="error"] {
-        color: #9b2d2d;
-      }
-
-      .editor-inpaint-status[data-tone="success"] {
-        color: #2f7d4f;
-      }
-
-      .editor-inpaint-submit[disabled] {
-        opacity: 0.58;
-        cursor: wait;
-      }
-
-      @media (max-width: 1024px) {
-        .editor-hero,
-        .editor-grid {
-          grid-template-columns: 1fr;
-        }
-
-        .editor-history-card-grid {
-          grid-template-columns: 1fr;
-        }
-
-        .editor-quickstart-grid {
-          grid-template-columns: 1fr;
-        }
-
-        .editor-inpaint-body {
-          grid-template-columns: 1fr;
-        }
-
-        .editor-inpaint-panel {
-          max-height: 38vh;
-        }
-
-        .editor-hero,
-        .editor-section,
-        .editor-panel {
-          border-radius: 22px;
-        }
-
-        .editor-panel > summary {
-          align-items: flex-start;
-          padding: 16px;
-        }
-
-        .editor-panel-toggle {
-          font-size: 0;
-        }
-
-        .editor-panel-toggle::before {
-          width: 10px;
-          height: 10px;
-        }
-
-        .editor-panel-body {
-          padding: 0 16px 16px;
-        }
-
-        .editor-hero,
-        .editor-section {
-          padding: 16px;
-        }
-
-        .editor-preview {
-          min-height: 0;
-          max-height: none;
-          aspect-ratio: 16 / 11;
-          border-radius: 18px;
-        }
-
-        .editor-title {
-          font-size: clamp(2rem, 12vw, 2.85rem);
-          line-height: 0.95;
-        }
-
-        .editor-toolbar,
-        .editor-history-toolbar-actions,
-        .editor-history-group-actions {
-          display: grid;
-          grid-template-columns: 1fr;
-          width: 100%;
-        }
-
-        .editor-copy-button,
-        .editor-history-button,
-        .editor-history-remove {
-          width: 100%;
-        }
-
-        .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,
-            account: {
-                displayName: input.account.name,
-                email: input.account.email
-            }
-        })}
-        <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 composition, metadata, and layer 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">HyperFrames Composition</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>
-                      <span class="editor-pill" data-difficulty="${escapeAttribute(input.template.difficulty)}">${escapeHtml(formatDifficulty(input.template.difficulty))}</span>
-                    </div>
-                    ${soundMetadata}
-                    <p>${escapeHtml(input.template.viralDna || input.template.visualDna || "No layer strategy is available for this composition 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>Layer Brief</h2>
-                    <p>Use these readonly references to shape the timeline, overlays, and render prompt before publishing through HyperFrames.</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("Composition skeleton", input.template.skeletonPrompt, 10)}
-                      ${renderQuickstartTextarea("Layer 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 composition yet.", 7)}</div>`}
-                      </div>
-                    </div>
-                  </section>
-                </div>
-              </details>
-              <details class="editor-panel">
-                <summary>
-                  <div class="editor-panel-summary">
-                    <h2>Examples</h2>
-                    <p>Review sample cuts for this composition before starting a new timeline run.</p>
-                  </div>
-                  <span class="editor-panel-toggle" aria-hidden="true">Toggle</span>
-                </summary>
-                <div class="editor-panel-body">
-                  <section class="editor-section">
-                    ${renderExamples(input.template.examples)}
-                  </section>
-                </div>
-              </details>
-              <details class="editor-panel">
-                <summary>
-                  <div class="editor-panel-summary">
-                    <h2>Render Surface</h2>
-                    <p>This workspace combines composition routes with platform primitives so asset generation, image edits, layer assembly, and HyperFrames renders stay in one tracer-aware flow.</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>Render Logs</h2>
-                    <p>Recent render and primitive calls are grouped by tracer so parallel timeline 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 Render 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">
-              <span class="editor-media-modal-carousel" data-editor-media-carousel data-visible="false">
-                <button type="button" class="editor-history-button" data-editor-media-prev>Prev</button>
-                <button type="button" class="editor-history-button" data-editor-media-next>Next</button>
-              </span>
-              <a class="editor-media-modal-source" data-editor-media-download href="#" download aria-label="Download media" title="Download">
-                <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><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>
-                <span>Download</span>
-              </a>
-              <a class="editor-media-modal-source" data-editor-media-inpaint data-visible="false" href="/inpaint" target="_blank" rel="noopener noreferrer" aria-label="Open image editor" title="Image edit">
-                <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.2 15.8c1.6.5 3.1-.1 3.7-1.7.6-1.4 1.8-2.1 3.5-2.1"></path><path d="m10.7 11.6 5.2-5.2a1.9 1.9 0 0 0-2.7-2.7L8 8.9"></path><path d="m7.9 9 3.1 3.1"></path><path d="M3.5 16.5c1.4.5 3.6.5 4.9-.8"></path></svg>
-                <span>Image edit</span>
-              </a>
-              <button type="button" class="editor-media-modal-source" data-editor-media-copy aria-label="Copy media URL" title="Copy link">
-                <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><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>
-                <span data-editor-media-copy-label>Copy link</span>
-              </button>
-              <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="editor-inpaint-modal-backdrop" data-editor-inpaint-modal data-open="false" hidden>
-        <div class="editor-inpaint-modal" role="dialog" aria-modal="true" aria-labelledby="editor-inpaint-title">
-          <div class="editor-inpaint-modal-head">
-            <div class="editor-inpaint-title">
-              <h3 id="editor-inpaint-title">Image edit</h3>
-              <p class="editor-inpaint-source" data-editor-inpaint-source>Output preview</p>
-            </div>
-            <div class="editor-inpaint-modal-actions">
-              <button type="button" class="editor-history-button" data-editor-inpaint-undo>Undo</button>
-              <button type="button" class="editor-history-button" data-editor-inpaint-clear>Clear</button>
-              <button type="button" class="editor-history-button" data-editor-inpaint-close>Close</button>
-            </div>
-          </div>
-          <div class="editor-inpaint-body">
-            <div class="editor-inpaint-stage">
-              <div class="editor-inpaint-canvas-wrap">
-                <img data-editor-inpaint-image alt="" />
-                <canvas data-editor-inpaint-canvas></canvas>
-              </div>
-            </div>
-            <aside class="editor-inpaint-panel" aria-label="Image edit controls">
-              <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" />
-                <button type="button" class="editor-history-button" data-editor-inpaint-add-color>Add color</button>
-                <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>
-            </aside>
-          </div>
-          <div class="editor-inpaint-footer">
-            <p class="editor-inpaint-status" data-editor-inpaint-status aria-live="polite"></p>
-            <button type="button" class="editor-history-button is-primary editor-inpaint-submit" data-editor-inpaint-submit>Create image edit</button>
-          </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 mediaModalDownload = document.querySelector("[data-editor-media-download]");
-          const mediaModalInpaint = document.querySelector("[data-editor-media-inpaint]");
-          const mediaModalCopy = document.querySelector("[data-editor-media-copy]");
-          const mediaModalCopyLabel = document.querySelector("[data-editor-media-copy-label]");
-          const mediaModalCarousel = document.querySelector("[data-editor-media-carousel]");
-          const mediaModalPrev = document.querySelector("[data-editor-media-prev]");
-          const mediaModalNext = document.querySelector("[data-editor-media-next]");
-          const inpaintModalBackdrop = document.querySelector("[data-editor-inpaint-modal]");
-          const inpaintSource = document.querySelector("[data-editor-inpaint-source]");
-          const inpaintImage = document.querySelector("[data-editor-inpaint-image]");
-          const inpaintCanvas = document.querySelector("[data-editor-inpaint-canvas]");
-          const inpaintClose = document.querySelector("[data-editor-inpaint-close]");
-          const inpaintUndo = document.querySelector("[data-editor-inpaint-undo]");
-          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 inpaintStatus = document.querySelector("[data-editor-inpaint-status]");
-          const inpaintSubmit = document.querySelector("[data-editor-inpaint-submit]");
-          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;
-          }
-
-          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
-            && mediaModalDownload instanceof HTMLAnchorElement
-            && mediaModalInpaint instanceof HTMLAnchorElement
-            && mediaModalCopy instanceof HTMLButtonElement
-            && mediaModalCopyLabel instanceof HTMLElement
-            && mediaModalCarousel instanceof HTMLElement
-            && mediaModalPrev instanceof HTMLButtonElement
-            && mediaModalNext instanceof HTMLButtonElement;
-          const hasInpaintModal = inpaintModalBackdrop instanceof HTMLElement
-            && inpaintSource instanceof HTMLElement
-            && inpaintImage instanceof HTMLImageElement
-            && inpaintCanvas instanceof HTMLCanvasElement
-            && inpaintClose instanceof HTMLButtonElement
-            && inpaintUndo 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
-            && inpaintStatus instanceof HTMLElement
-            && inpaintSubmit instanceof HTMLButtonElement;
-          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 = [];
-          let activeMediaItems = [];
-          let activeMediaIndex = 0;
-          let activeInpaintImage = null;
-          let inpaintMaskColors = [];
-          let activeInpaintColor = "#ff2d55";
-          let inpaintStrokes = [];
-          let currentInpaintStroke = null;
-          let isInpaintPainting = false;
-          let inpaintAttachments = [];
-          let pendingInpaintAttachmentScope = null;
-          const maxInpaintAttachments = 8;
-          const allowedInpaintAttachmentTypes = new Set(["image/jpeg", "image/png", "image/webp"]);
-          const templateExamples = ${JSON.stringify(input.template.examples)};
-          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;
-            }
-            try {
-              return JSON.stringify(value, null, 2);
-            } catch {
-              return String(value);
-            }
-          }
-
-          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 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 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 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
-            });
-            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
-            });
-            httpModalBackdrop.hidden = false;
-          }
-
-          function closeHttpModal() {
-            if (!hasHttpModal) {
-              return;
-            }
-            httpModalBackdrop.hidden = true;
-            httpModalBody.innerHTML = "";
-          }
-
-          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)) {
-                  continue;
-                }
-                seen.add(tracer);
-                tracers.push(tracer);
-              }
-            }
-            return tracers;
-          }
-
-          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 syncTracerUrl(tracers) {
-            const url = new URL(window.location.href);
-            if (tracers.length) {
-              url.searchParams.set("tracers", tracers.join(","));
-            } else {
-              url.searchParams.delete("tracers");
-            }
-            window.history.replaceState({}, "", url.toString());
-            window.dispatchEvent(new CustomEvent("vidfarm:editor-tracers-changed", {
-              detail: { tracers }
-            }));
-          }
-
-          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 openTracerModal() {
-            if (!hasTracerModal) {
-              return;
-            }
-            modalBackdrop.hidden = false;
-            modalBackdrop.setAttribute("data-open", "true");
-            modalError.textContent = "";
-            modalInput.value = "";
-            window.requestAnimationFrame(() => modalInput.focus());
-          }
-
-          function closeTracerModal() {
-            if (!hasTracerModal) {
-              return;
-            }
-            modalBackdrop.setAttribute("data-open", "false");
-            modalBackdrop.hidden = true;
-            modalError.textContent = "";
-          }
-
-          function submitTracerModal() {
-            if (!hasTracerModal) {
-              return;
-            }
-            const tracer = modalInput.value.trim();
-            if (!tracer) {
-              modalError.textContent = "Enter a tracer id.";
-              modalInput.focus();
-              return;
-            }
-            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>';
-          }
-
-          function renderEmpty(message) {
-            historyRoot.innerHTML = '<div class="editor-history-empty">' + escapeHtml(message) + '</div>';
-          }
-
-          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 getPreviewKind(url) {
-            if (/\\.(png|jpe?g|gif|webp|avif|svg)(\\?|#|$)/i.test(url)) {
-              return "image";
-            }
-            if (/\\.(mp4|webm|ogg|mov|m4v)(\\?|#|$)/i.test(url)) {
-              return "video";
-            }
-            return "file";
-          }
-
-          function isPreviewableMediaUrl(url) {
-            return getPreviewKind(url) !== "file";
-          }
-
-          function mediaFileNameFromUrl(url, fallback) {
-            const cleanFallback = String(fallback || "media").trim().replace(/[\\\\/:*?"<>|]+/g, "-") || "media";
-            try {
-              const path = new URL(url, window.location.href).pathname;
-              const name = decodeURIComponent(path.split("/").filter(Boolean).pop() || "");
-              return name.trim().replace(/[\\\\/:*?"<>|]+/g, "-") || cleanFallback;
-            } catch {
-              return cleanFallback;
-            }
-          }
-
-          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";
-          }
-
-          function setInpaintStatus(message, tone) {
-            if (!hasInpaintModal) {
-              return;
-            }
-            inpaintStatus.textContent = message || "";
-            if (tone) {
-              inpaintStatus.setAttribute("data-tone", tone);
-            } else {
-              inpaintStatus.removeAttribute("data-tone");
-            }
-          }
-
-          const inpaintColorPalette = ["#ff2d55", "#3b82f6", "#22c55e", "#f59e0b", "#a855f7", "#06b6d4", "#f97316", "#ec4899"];
-
-          function syncInpaintPromptValuesFromDom() {
-            const fields = Array.from(inpaintPrompts.querySelectorAll("[data-color]"));
-            for (const field of fields) {
-              if (field instanceof HTMLTextAreaElement) {
-                updateInpaintPrompt(field.dataset.color || "", field.value);
-              }
-            }
-          }
-
-          function attachmentId() {
-            return "att_" + Date.now().toString(36) + "_" + Math.random().toString(16).slice(2, 8);
-          }
-
-          function attachmentsForScope(scope, color) {
-            const normalizedColor = color ? normalizeHexColor(color) : "";
-            return inpaintAttachments.filter((attachment) => (
-              attachment.scope === scope && (!normalizedColor || attachment.color === normalizedColor)
-            ));
-          }
-
-          function renderAttachmentChips(container, scope, color) {
-            container.innerHTML = "";
-            for (const attachment of attachmentsForScope(scope, color)) {
-              const chip = document.createElement("span");
-              chip.className = "editor-inpaint-attachment-chip";
-              const preview = document.createElement("img");
-              preview.src = attachment.url;
-              preview.alt = "";
-              preview.loading = "lazy";
-              const label = document.createElement("span");
-              label.textContent = attachment.fileName || "reference image";
-              const remove = document.createElement("button");
-              remove.type = "button";
-              remove.textContent = "×";
-              remove.dataset.editorInpaintRemoveAttachment = attachment.id;
-              remove.setAttribute("aria-label", "Remove " + (attachment.fileName || "reference image"));
-              chip.append(preview, label, remove);
-              container.append(chip);
-            }
-          }
-
-          function renderAllAttachmentChips() {
-            if (!hasInpaintModal) return;
-            renderAttachmentChips(inpaintGlobalAttachments, "global");
-            for (const container of Array.from(inpaintPrompts.querySelectorAll("[data-editor-inpaint-attachments]"))) {
-              if (container instanceof HTMLElement && container.dataset.color) {
-                renderAttachmentChips(container, "color", container.dataset.color);
-              }
-            }
-          }
-
-          function openAttachmentPicker(scope, color) {
-            pendingInpaintAttachmentScope = { scope, color: color ? normalizeHexColor(color) : "" };
-            inpaintAttachmentInput.click();
-          }
-
-          function isAllowedInpaintAttachment(file) {
-            return file instanceof File && allowedInpaintAttachmentTypes.has(file.type);
-          }
-
-          function imageFilesFromPaste(event) {
-            const clipboard = event.clipboardData;
-            if (!clipboard) return [];
-            const files = [];
-            for (const item of Array.from(clipboard.items || [])) {
-              if (item.kind !== "file") continue;
-              const file = item.getAsFile();
-              if (file) files.push(file);
-            }
-            if (!files.length) {
-              for (const file of Array.from(clipboard.files || [])) {
-                files.push(file);
-              }
-            }
-            return files;
-          }
-
-          function handleAttachmentPaste(event, scope, color) {
-            const files = imageFilesFromPaste(event);
-            if (!files.length) return;
-            event.preventDefault();
-            const allowed = files.filter(isAllowedInpaintAttachment);
-            if (!allowed.length) {
-              setInpaintStatus("Reference attachments must be JPEG, PNG, or WebP images.", "error");
-              return;
-            }
-            void addAttachmentFilesForScope(allowed, {
-              scope,
-              color: scope === "color" ? normalizeHexColor(color) : ""
-            });
-          }
-
-          function pickNextInpaintColor(requestedColor) {
-            const requested = normalizeHexColor(requestedColor);
-            const used = new Set(inpaintMaskColors.map((entry) => entry.color));
-            if (!used.has(requested)) {
-              return requested;
-            }
-            for (const color of inpaintColorPalette) {
-              if (!used.has(color)) {
-                return color;
-              }
-            }
-            for (let index = 0; index < 32; index += 1) {
-              const color = "#" + Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, "0");
-              if (!used.has(color)) {
-                return color;
-              }
-            }
-            return requested;
-          }
-
-          function renderInpaintControls() {
-            if (!hasInpaintModal) {
-              return;
-            }
-            syncInpaintPromptValuesFromDom();
-            inpaintBrushLabel.textContent = inpaintBrush.value;
-            inpaintSwatches.innerHTML = "";
-            inpaintPrompts.innerHTML = "";
-            for (const entry of inpaintMaskColors) {
-              const row = document.createElement("div");
-              row.className = "editor-inpaint-color-row";
-              row.dataset.color = entry.color;
-              row.dataset.active = entry.color === activeInpaintColor ? "true" : "false";
-              const dot = document.createElement("button");
-              dot.type = "button";
-              dot.className = "editor-inpaint-color-dot";
-              dot.style.setProperty("--inpaint-color", entry.color);
-              dot.dataset.color = entry.color;
-              dot.setAttribute("aria-label", "Use mask color " + entry.color);
-              dot.setAttribute("title", entry.color);
-              const colorTools = document.createElement("div");
-              colorTools.className = "editor-inpaint-color-tools";
-              colorTools.append(dot);
-              if (inpaintMaskColors.length > 1) {
-                const removeColor = document.createElement("button");
-                removeColor.type = "button";
-                removeColor.className = "editor-inpaint-color-remove";
-                removeColor.dataset.editorInpaintRemoveColor = entry.color;
-                removeColor.setAttribute("aria-label", "Remove mask color " + entry.color);
-                removeColor.setAttribute("title", "Remove color");
-                removeColor.innerHTML = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M5 5l10 10"></path><path d="M15 5 5 15"></path></svg>';
-                removeColor.addEventListener("click", (event) => {
-                  event.preventDefault();
-                  event.stopPropagation();
-                  removeInpaintColor(entry.color);
-                });
-                colorTools.append(removeColor);
-              }
-              const prompt = document.createElement("textarea");
-              prompt.className = "editor-inpaint-prompt";
-              prompt.dataset.color = entry.color;
-              prompt.value = entry.prompt || "";
-              prompt.placeholder = "In color " + entry.color + " replace with...";
-              const stack = document.createElement("div");
-              stack.className = "editor-inpaint-prompt-stack";
-              const field = document.createElement("div");
-              field.className = "editor-inpaint-prompt-field";
-              const tools = document.createElement("div");
-              tools.className = "editor-inpaint-attachment-tools";
-              const attach = document.createElement("button");
-              attach.type = "button";
-              attach.className = "editor-inpaint-attach-button";
-              attach.dataset.editorInpaintAttachScope = "color";
-              attach.dataset.color = entry.color;
-              attach.setAttribute("aria-label", "Attach reference image for " + entry.color);
-              attach.setAttribute("title", "Attach reference image");
-              attach.innerHTML = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m8.1 10.7 4.8-4.8a2.5 2.5 0 0 1 3.5 3.5l-6.1 6.1a4 4 0 0 1-5.7-5.7l6.3-6.3"></path><path d="m10 8.8-4.1 4.1a1.6 1.6 0 0 0 2.3 2.3l5.6-5.6"></path></svg>';
-              const chips = document.createElement("span");
-              chips.className = "editor-inpaint-attachment-chips";
-              chips.dataset.editorInpaintAttachments = "color";
-              chips.dataset.color = entry.color;
-              field.append(prompt, attach);
-              tools.append(chips);
-              stack.append(field, tools);
-              row.append(colorTools, stack);
-              inpaintPrompts.append(row);
-            }
-            renderAllAttachmentChips();
-          }
-
-          function redrawInpaintMask() {
-            if (!hasInpaintModal) {
-              return;
-            }
-            const ctx = inpaintCanvas.getContext("2d");
-            if (!ctx) {
-              return;
-            }
-            ctx.clearRect(0, 0, inpaintCanvas.width, inpaintCanvas.height);
-            ctx.lineCap = "round";
-            ctx.lineJoin = "round";
-            for (const stroke of inpaintStrokes) {
-              if (!stroke.points || stroke.points.length < 1) {
-                continue;
-              }
-              ctx.strokeStyle = stroke.color;
-              ctx.lineWidth = stroke.size;
-              ctx.globalAlpha = 1;
-              ctx.beginPath();
-              ctx.moveTo(stroke.points[0].x, stroke.points[0].y);
-              if (stroke.points.length === 1) {
-                ctx.lineTo(stroke.points[0].x + 0.01, stroke.points[0].y + 0.01);
-              } else {
-                for (let index = 1; index < stroke.points.length; index += 1) {
-                  ctx.lineTo(stroke.points[index].x, stroke.points[index].y);
-                }
-              }
-              ctx.stroke();
-            }
-          }
-
-          function syncInpaintCanvasSize() {
-            if (!hasInpaintModal || !inpaintImage.naturalWidth || !inpaintImage.naturalHeight) {
-              return;
-            }
-            if (inpaintCanvas.width !== inpaintImage.naturalWidth || inpaintCanvas.height !== inpaintImage.naturalHeight) {
-              inpaintCanvas.width = inpaintImage.naturalWidth;
-              inpaintCanvas.height = inpaintImage.naturalHeight;
-              redrawInpaintMask();
-            }
-          }
-
-          function getInpaintPoint(event) {
-            const rect = inpaintCanvas.getBoundingClientRect();
-            return {
-              x: Math.max(0, Math.min(inpaintCanvas.width, (event.clientX - rect.left) * (inpaintCanvas.width / rect.width))),
-              y: Math.max(0, Math.min(inpaintCanvas.height, (event.clientY - rect.top) * (inpaintCanvas.height / rect.height)))
-            };
-          }
-
-          function beginInpaintStroke(event) {
-            if (!hasInpaintModal || !activeInpaintImage || !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);
-            redrawInpaintMask();
-          }
-
-          function continueInpaintStroke(event) {
-            if (!isInpaintPainting || !currentInpaintStroke) {
-              return;
-            }
-            event.preventDefault();
-            currentInpaintStroke.points.push(getInpaintPoint(event));
-            redrawInpaintMask();
-          }
-
-          function endInpaintStroke(event) {
-            if (!isInpaintPainting) {
-              return;
-            }
-            event.preventDefault();
-            isInpaintPainting = false;
-            currentInpaintStroke = null;
-            try {
-              inpaintCanvas.releasePointerCapture(event.pointerId);
-            } catch {}
-          }
-
-          function addInpaintColor(color) {
-            syncInpaintPromptValuesFromDom();
-            const normalized = pickNextInpaintColor(color);
-            if (!inpaintMaskColors.some((entry) => entry.color === normalized)) {
-              inpaintMaskColors.push({ color: normalized, prompt: "" });
-            }
-            activeInpaintColor = normalized;
-            if (hasInpaintModal) {
-              inpaintColorPicker.value = normalized;
-            }
-            renderInpaintControls();
-          }
-
-          function removeInpaintColor(color) {
-            syncInpaintPromptValuesFromDom();
-            const normalized = normalizeHexColor(color);
-            if (inpaintMaskColors.length <= 1 || !inpaintMaskColors.some((entry) => entry.color === normalized)) {
-              setInpaintStatus("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);
-            if (activeInpaintColor === normalized) {
-              activeInpaintColor = inpaintMaskColors[0]?.color || "#ff2d55";
-              if (hasInpaintModal) {
-                inpaintColorPicker.value = activeInpaintColor;
-              }
-            }
-            redrawInpaintMask();
-            renderInpaintControls();
-            setInpaintStatus("", "");
-          }
-
-          function selectInpaintColor(color) {
-            activeInpaintColor = normalizeHexColor(color);
-            if (hasInpaintModal) {
-              inpaintColorPicker.value = activeInpaintColor;
-            }
-            for (const row of Array.from(inpaintPrompts.querySelectorAll(".editor-inpaint-color-row"))) {
-              if (row instanceof HTMLElement) {
-                row.dataset.active = row.dataset.color === activeInpaintColor ? "true" : "false";
-              }
-            }
-          }
-
-          function updateInpaintPrompt(color, prompt) {
-            const normalized = normalizeHexColor(color);
-            inpaintMaskColors = inpaintMaskColors.map((entry) => (
-              entry.color === normalized ? { ...entry, prompt: String(prompt || "") } : entry
-            ));
-          }
-
-          function buildInpaintInstruction() {
-            const globalPrompt = inpaintGlobalPrompt.value.trim();
-            const regions = inpaintMaskColors
-              .map((entry) => ({
-                color: entry.color.toUpperCase(),
-                prompt: String(entry.prompt || "").trim()
-              }))
-              .filter((entry) => entry.prompt);
-            if (!globalPrompt && !regions.length) {
-              return "";
-            }
-            const attachmentNotes = inpaintAttachments.map((attachment, index) => {
-              const label = "reference image " + (index + 1) + " (" + (attachment.fileName || "attachment") + ")";
-              return attachment.scope === "global"
-                ? label + " applies to the whole image instruction"
-                : label + " applies only to the UI mask color " + String(attachment.color || "").toUpperCase();
-            });
-            return [
-              "INPAINTING SYSTEM WRAPPER:",
-              "You are editing an existing image with an alpha mask. Treat transparent mask pixels as the only editable region. Everything outside the editable mask must remain the same image: preserve identity, layout, pose, camera angle, framing, background, lighting, colors, textures, text, logos, and all unmasked details.",
-              "Do not redraw, reinterpret, beautify, crop, zoom, rotate, expand, stylize, or otherwise alter unmasked content. Do not render the UI mask colors; they are labels only.",
-              "The final image must keep the original dimensions and aspect ratio unless the user explicitly asks for a dimension change.",
-              globalPrompt ? "Whole image prompt: " + globalPrompt + ". Apply this only as guidance for the masked edit and overall consistency; it does not permit changing unmasked content." : "",
-              regions.map((entry) => (
-                "Masked region " + entry.color + ": replace only that marked area with " + entry.prompt + ". Match the surrounding perspective, lighting, grain, shadows, and edge blending."
-              )).join(" "),
-              attachmentNotes.length ? "Reference image scope: " + attachmentNotes.join("; ") + ". Use each reference only for its stated scope and do not copy unrelated reference details into unmasked areas." : ""
-            ].filter(Boolean).join(" ");
-          }
-
-          function getInpaintAspectRatio() {
-            const width = inpaintCanvas.width || inpaintImage.naturalWidth || 0;
-            const height = inpaintCanvas.height || inpaintImage.naturalHeight || 0;
-            if (!width || !height) {
-              return undefined;
-            }
-            const ratio = width / height;
-            if (Math.abs(ratio - 1) < 0.08) {
-              return "1:1";
-            }
-            if (ratio > 1) {
-              return ratio >= 1.55 ? "16:9" : "4:3";
-            }
-            return ratio <= 0.65 ? "9:16" : "3:4";
-          }
-
-          async function createProviderMaskBlob() {
-            const maskCanvas = document.createElement("canvas");
-            maskCanvas.width = inpaintCanvas.width;
-            maskCanvas.height = inpaintCanvas.height;
-            const ctx = maskCanvas.getContext("2d");
-            if (!ctx) {
-              throw new Error("Unable to prepare mask image.");
-            }
-            ctx.fillStyle = "#ffffff";
-            ctx.fillRect(0, 0, maskCanvas.width, maskCanvas.height);
-            ctx.globalCompositeOperation = "destination-out";
-            ctx.lineCap = "round";
-            ctx.lineJoin = "round";
-            for (const stroke of inpaintStrokes) {
-              if (!stroke.points || stroke.points.length < 1) {
-                continue;
-              }
-              ctx.strokeStyle = "rgba(0, 0, 0, 1)";
-              ctx.lineWidth = stroke.size;
-              ctx.beginPath();
-              ctx.moveTo(stroke.points[0].x, stroke.points[0].y);
-              if (stroke.points.length === 1) {
-                ctx.lineTo(stroke.points[0].x + 0.01, stroke.points[0].y + 0.01);
-              } else {
-                for (let index = 1; index < stroke.points.length; index += 1) {
-                  ctx.lineTo(stroke.points[index].x, stroke.points[index].y);
-                }
-              }
-              ctx.stroke();
-            }
-            return canvasToPngBlob(maskCanvas);
-          }
-
-          function canvasToPngBlob(canvas) {
-            return new Promise((resolve, reject) => {
-              canvas.toBlob((blob) => {
-                if (blob) {
-                  resolve(blob);
-                } else {
-                  reject(new Error("Unable to prepare mask image."));
-                }
-              }, "image/png");
-            });
-          }
-
-          function parseJsonResponse(response) {
-            return response.json().catch(() => ({}));
-          }
-
-          async function loadInpaintProviders() {
-            try {
-              const response = await fetch("/api/v1/user/me/provider-keys", { credentials: "same-origin" });
-              const payload = await parseJsonResponse(response);
-              if (!response.ok) {
-                return;
-              }
-              const supported = new Set(["openai", "gemini", "openrouter"]);
-              const providers = [];
-              const seen = new Set();
-              for (const key of Array.isArray(payload.provider_keys) ? payload.provider_keys : []) {
-                const provider = String(key.provider || "");
-                const status = String(key.status || "active");
-                const cooldownUntil = key.cooldown_until ? Date.parse(String(key.cooldown_until)) : 0;
-                if (!supported.has(provider) || status !== "active" || (cooldownUntil && cooldownUntil > Date.now()) || seen.has(provider)) {
-                  continue;
-                }
-                seen.add(provider);
-                providers.push(provider);
-              }
-              inpaintProviderSelect.innerHTML = '<option value="">Auto</option>' + providers.map((provider) => (
-                '<option value="' + provider + '">' + provider.charAt(0).toUpperCase() + provider.slice(1) + '</option>'
-              )).join("");
-              inpaintProviderWrap.setAttribute("data-visible", providers.length > 1 ? "true" : "false");
-            } catch {}
-          }
-
-          async function uploadInpaintMask(blob) {
-            const fileName = "inpaint-mask-" + Date.now() + ".png";
-            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: "image/png",
-                size_bytes: blob.size,
-                folder_path: "inpaint-masks"
-              })
-            });
-            const presignPayload = await parseJsonResponse(presignResponse);
-            if (!presignResponse.ok || !presignPayload || !presignPayload.transport) {
-              throw new Error(presignPayload && presignPayload.error ? presignPayload.error : "Unable to prepare mask upload.");
-            }
-            if (presignPayload.transport === "server") {
-              const formData = new FormData();
-              formData.append(presignPayload.upload?.form_field || "file", new File([blob], fileName, { type: "image/png" }));
-              formData.append("folder_path", "inpaint-masks");
-              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 mask.");
-              }
-              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("Mask 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-masks"
-              })
-            });
-            const finalizePayload = await parseJsonResponse(finalizeResponse);
-            if (!finalizeResponse.ok || !finalizePayload.file) {
-              throw new Error(finalizePayload.error || "Unable to save mask.");
-            }
-            return finalizePayload.file.viewUrl || finalizePayload.file.view_url || finalizePayload.file.s3Url || finalizePayload.file.s3_url;
-          }
-
-          function absoluteUrl(value) {
-            return new URL(value, window.location.href).toString();
-          }
-
-          async function uploadInpaintAttachment(file) {
-            const fileName = file.name || "reference.png";
-            const contentType = file.type || "image/png";
-            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: file.size,
-                folder_path: "inpaint-references"
-              })
-            });
-            const presignPayload = await parseJsonResponse(presignResponse);
-            if (!presignResponse.ok || !presignPayload || !presignPayload.transport) {
-              throw new Error(presignPayload && presignPayload.error ? presignPayload.error : "Unable to prepare reference upload.");
-            }
-            if (presignPayload.transport === "server") {
-              const formData = new FormData();
-              formData.append(presignPayload.upload?.form_field || "file", new File([file], fileName, { type: contentType }));
-              formData.append("folder_path", "inpaint-references");
-              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 reference image.");
-              }
-              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: file
-            });
-            if (!uploadResponse.ok) {
-              throw new Error("Reference 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: file.size,
-                storage_key: presignPayload.storage_key,
-                folder_path: presignPayload.folder_path || "inpaint-references"
-              })
-            });
-            const finalizePayload = await parseJsonResponse(finalizeResponse);
-            if (!finalizeResponse.ok || !finalizePayload.file) {
-              throw new Error(finalizePayload.error || "Unable to save reference image.");
-            }
-            return finalizePayload.file.viewUrl || finalizePayload.file.view_url || finalizePayload.file.s3Url || finalizePayload.file.s3_url;
-          }
-
-          async function addAttachmentFilesForScope(files, scope) {
-            if (!scope) return;
-            const selected = Array.from(files || []);
-            if (!selected.length) return;
-            if (inpaintAttachments.length + selected.length > maxInpaintAttachments) {
-              setInpaintStatus("Use up to " + maxInpaintAttachments + " reference images.", "error");
-              return;
-            }
-            const previousDisabled = inpaintSubmit.disabled;
-            inpaintSubmit.disabled = true;
-            setInpaintStatus("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 uploadedUrl = await uploadInpaintAttachment(file);
-                inpaintAttachments.push({
-                  id: attachmentId(),
-                  scope: scope.scope === "color" ? "color" : "global",
-                  color: scope.scope === "color" ? normalizeHexColor(scope.color) : "",
-                  fileName: file.name || "reference.png",
-                  url: absoluteUrl(uploadedUrl)
-                });
-              }
-              renderAllAttachmentChips();
-              setInpaintStatus("Reference image ready.", "success");
-            } catch (error) {
-              console.error(error);
-              setInpaintStatus(error instanceof Error ? error.message : "Unable to upload reference image.", "error");
-            } finally {
-              inpaintSubmit.disabled = previousDisabled;
-            }
-          }
-
-          async function addAttachmentFiles(files) {
-            const scope = pendingInpaintAttachmentScope;
-            pendingInpaintAttachmentScope = null;
-            await addAttachmentFilesForScope(files, scope);
-          }
-
-          async function submitInpaintJob() {
-            if (!hasInpaintModal || !activeInpaintImage || inpaintSubmit.disabled) {
-              return;
-            }
-            if (!inpaintStrokes.length) {
-              setInpaintStatus("Paint at least one mask region.", "error");
-              return;
-            }
-            const usedColors = new Set(inpaintStrokes.map((stroke) => normalizeHexColor(stroke.color)));
-            const globalPrompt = inpaintGlobalPrompt.value.trim();
-            const missingPromptColor = inpaintMaskColors.find((entry) => usedColors.has(entry.color) && !String(entry.prompt || "").trim());
-            if (!globalPrompt && missingPromptColor) {
-              setInpaintStatus("Add a replacement prompt for " + missingPromptColor.color.toUpperCase() + ".", "error");
-              return;
-            }
-            const instruction = buildInpaintInstruction();
-            if (!instruction) {
-              setInpaintStatus("Add a replacement prompt for at least one color.", "error");
-              return;
-            }
-            const currentTracers = tracerStore.get();
-            const tracer = currentTracers[0] || tracerStore.add();
-            if (!currentTracers.length) {
-              renderTracerChips(tracerStore.get());
-            }
-            inpaintSubmit.disabled = true;
-            setInpaintStatus("Uploading mask...", "");
-            try {
-              const maskUrl = await uploadInpaintMask(await createProviderMaskBlob());
-              setInpaintStatus("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: absoluteUrl(activeInpaintImage.url),
-                    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.");
-              }
-              setInpaintStatus("Image edit job " + (payload.job_id || "") + " started.", "success");
-              await loadHistory({ showLoading: false });
-              window.setTimeout(() => loadHistory({ showLoading: false }), 2200);
-              window.setTimeout(() => loadHistory({ showLoading: false }), 6000);
-            } catch (error) {
-              console.error(error);
-              setInpaintStatus(error instanceof Error ? error.message : "Unable to create image edit job.", "error");
-            } finally {
-              inpaintSubmit.disabled = false;
-            }
-          }
-
-          function openInpaintModalForItem(item) {
-            if (!hasInpaintModal || !item || !item.url) {
-              return;
-            }
-            activeInpaintImage = { url: item.url, label: item.label || "Output preview" };
-            inpaintMaskColors = [{ color: "#ff2d55", prompt: "" }];
-            inpaintAttachments = [];
-            pendingInpaintAttachmentScope = null;
-            activeInpaintColor = "#ff2d55";
-            inpaintStrokes = [];
-            currentInpaintStroke = null;
-            isInpaintPainting = false;
-            inpaintBrush.value = "70";
-            inpaintColorPicker.value = activeInpaintColor;
-            inpaintGlobalPrompt.value = "";
-            inpaintImage.removeAttribute("src");
-            inpaintCanvas.width = 1;
-            inpaintCanvas.height = 1;
-            inpaintSource.textContent = activeInpaintImage.label;
-            setInpaintStatus("", "");
-            renderInpaintControls();
-            inpaintImage.onload = () => {
-              syncInpaintCanvasSize();
-              redrawInpaintMask();
-            };
-            inpaintImage.src = item.url;
-            inpaintModalBackdrop.hidden = false;
-            inpaintModalBackdrop.setAttribute("data-open", "true");
-          }
-
-          function openInpaintModalFromActiveMedia() {
-            if (!hasMediaModal || !hasInpaintModal) {
-              return;
-            }
-            const item = activeMediaItems[activeMediaIndex] || null;
-            if (!item || (item.kind || getPreviewKind(item.url)) !== "image") {
-              return;
-            }
-            openInpaintModalForItem(item);
-          }
-
-          function buildInpaintPageUrlForMedia(item, options) {
-            const url = item && item.url ? String(item.url) : "";
-            if (!url) {
-              return "";
-            }
-            const pageUrl = new URL("/inpaint", window.location.origin);
-            const currentTracers = tracerStore.get();
-            const tracer = currentTracers[0] || (options && options.ensureTracer ? tracerStore.add() : "");
-            if (tracer) {
-              pageUrl.searchParams.set("tracer", tracer);
-            }
-            pageUrl.searchParams.set("source_image_url", url);
-            pageUrl.searchParams.set("source_image_name", item.label || mediaFileNameFromUrl(url, "Output image"));
-            return pageUrl.toString();
-          }
-
-          function closeInpaintModal() {
-            if (!hasInpaintModal) {
-              return;
-            }
-            inpaintModalBackdrop.setAttribute("data-open", "false");
-            inpaintModalBackdrop.hidden = true;
-            activeInpaintImage = null;
-            inpaintStrokes = [];
-            currentInpaintStroke = null;
-            isInpaintPainting = false;
-            inpaintImage.removeAttribute("src");
-            const ctx = inpaintCanvas.getContext("2d");
-            if (ctx) {
-              ctx.clearRect(0, 0, inpaintCanvas.width, inpaintCanvas.height);
-            }
-            setInpaintStatus("", "");
-          }
-
-          function renderActiveMediaModalItem() {
-            if (!hasMediaModal) {
-              return;
-            }
-            const item = activeMediaItems[activeMediaIndex] || null;
-            if (!item || !item.url) {
-              return;
-            }
-            const url = item.url;
-            const kind = item.kind || getPreviewKind(url);
-            const label = item.label || "Output preview";
-            mediaModalTitle.textContent = activeMediaItems.length > 1
-              ? label + " (" + (activeMediaIndex + 1) + " of " + activeMediaItems.length + ")"
-              : label;
-            mediaModalSource.href = url;
-            mediaModalDownload.href = url;
-            mediaModalDownload.setAttribute("download", mediaFileNameFromUrl(url, label));
-            mediaModalCopy.dataset.url = url;
-            mediaModalCopy.removeAttribute("data-state");
-            mediaModalCopy.setAttribute("aria-label", "Copy media URL");
-            mediaModalCopy.setAttribute("title", "Copy link");
-            mediaModalCopyLabel.textContent = "Copy link";
-            mediaModalCarousel.setAttribute("data-visible", activeMediaItems.length > 1 ? "true" : "false");
-            mediaModalInpaint.setAttribute("data-visible", kind === "image" ? "true" : "false");
-            mediaModalInpaint.href = kind === "image" ? buildInpaintPageUrlForMedia(item, { ensureTracer: false }) : "/inpaint";
-            mediaModalInpaint.setAttribute("aria-label", "Open image editor for " + label);
-            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>';
-            }
-          }
-
-          function openMediaModal(url, kind, label) {
-            if (!hasMediaModal) {
-              window.open(url, "_blank", "noopener,noreferrer");
-              return;
-            }
-            activeMediaItems = [{ url, kind, label }];
-            activeMediaIndex = 0;
-            renderActiveMediaModalItem();
-            mediaModalBackdrop.hidden = false;
-            mediaModalBackdrop.setAttribute("data-open", "true");
-          }
-
-          function openMediaGroupFromButton(button) {
-            const url = button.getAttribute("data-preview-url") || "";
-            const kind = button.getAttribute("data-preview-kind") || "file";
-            const label = button.getAttribute("data-preview-label") || "Output preview";
-            if (!url) {
-              return;
-            }
-            const group = button.closest(".editor-history-card-previews, .editor-history-group-previews");
-            const buttons = group
-              ? Array.from(group.querySelectorAll("[data-preview-url]")).filter((entry) => entry instanceof HTMLButtonElement)
-              : [button];
-            const items = buttons
-              .map((entry, index) => ({
-                url: entry.getAttribute("data-preview-url") || "",
-                kind: entry.getAttribute("data-preview-kind") || "file",
-                label: entry.getAttribute("data-preview-label") || ("Output " + (index + 1))
-              }))
-              .filter((entry) => entry.url);
-            const allImages = items.length > 1 && items.every((entry) => entry.kind === "image");
-            if (!allImages) {
-              openMediaModal(url, kind, label);
-              return;
-            }
-            if (!hasMediaModal) {
-              window.open(url, "_blank", "noopener,noreferrer");
-              return;
-            }
-            activeMediaItems = items;
-            activeMediaIndex = Math.max(0, items.findIndex((entry) => entry.url === url));
-            renderActiveMediaModalItem();
-            mediaModalBackdrop.hidden = false;
-            mediaModalBackdrop.setAttribute("data-open", "true");
-          }
-
-          function openExampleModal(exampleIndex, mediaIndex) {
-            const example = Array.isArray(templateExamples[exampleIndex]) ? templateExamples[exampleIndex] : [];
-            const items = example
-              .map((entry, index) => ({
-                url: String(entry && entry.mediaUrl || ""),
-                kind: getPreviewKind(String(entry && entry.mediaUrl || "")),
-                label: String(entry && entry.note || ("Example " + (exampleIndex + 1) + "." + (index + 1)))
-              }))
-              .filter((entry) => entry.url);
-            if (!items.length) {
-              return;
-            }
-            if (!hasMediaModal) {
-              window.open(items[Math.max(0, Math.min(mediaIndex, items.length - 1))].url, "_blank", "noopener,noreferrer");
-              return;
-            }
-            activeMediaItems = items;
-            activeMediaIndex = Math.max(0, Math.min(mediaIndex, activeMediaItems.length - 1));
-            renderActiveMediaModalItem();
-            mediaModalBackdrop.hidden = false;
-            mediaModalBackdrop.setAttribute("data-open", "true");
-          }
-
-          function stepMediaModal(direction) {
-            if (!activeMediaItems.length) {
-              return;
-            }
-            activeMediaIndex = (activeMediaIndex + direction + activeMediaItems.length) % activeMediaItems.length;
-            renderActiveMediaModalItem();
-          }
-
-          async function copyActiveMediaUrl() {
-            if (!hasMediaModal) {
-              return;
-            }
-            const url = mediaModalCopy.dataset.url || "";
-            if (!url) {
-              return;
-            }
-            try {
-              const copied = await copyText(url);
-              mediaModalCopy.setAttribute("data-state", copied ? "done" : "error");
-              mediaModalCopy.setAttribute("aria-label", copied ? "Media URL copied" : "Unable to copy media URL");
-              mediaModalCopy.setAttribute("title", copied ? "Copied" : "Copy failed");
-              mediaModalCopyLabel.textContent = copied ? "Copied" : "Copy failed";
-            } catch {
-              mediaModalCopy.setAttribute("data-state", "error");
-              mediaModalCopy.setAttribute("aria-label", "Unable to copy media URL");
-              mediaModalCopy.setAttribute("title", "Copy failed");
-              mediaModalCopyLabel.textContent = "Copy failed";
-            }
-            window.setTimeout(() => {
-              mediaModalCopy.removeAttribute("data-state");
-              mediaModalCopy.setAttribute("aria-label", "Copy media URL");
-              mediaModalCopy.setAttribute("title", "Copy link");
-              mediaModalCopyLabel.textContent = "Copy link";
-            }, 1400);
-          }
-
-          function closeMediaModal() {
-            if (!hasMediaModal) {
-              return;
-            }
-            mediaModalBackdrop.setAttribute("data-open", "false");
-            mediaModalBackdrop.hidden = true;
-            mediaModalSource.href = "#";
-            mediaModalDownload.href = "#";
-            mediaModalDownload.setAttribute("download", "");
-            mediaModalCopy.dataset.url = "";
-            mediaModalCopy.removeAttribute("data-state");
-            mediaModalCopy.setAttribute("aria-label", "Copy media URL");
-            mediaModalCopy.setAttribute("title", "Copy link");
-            mediaModalCopyLabel.textContent = "Copy link";
-            mediaModalBody.innerHTML = "";
-            mediaModalCarousel.setAttribute("data-visible", "false");
-            mediaModalInpaint.setAttribute("data-visible", "false");
-            mediaModalInpaint.href = "/inpaint";
-            activeMediaItems = [];
-            activeMediaIndex = 0;
-          }
-
-          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 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 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>';
-              }
-              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>';
-              }
-              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 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 hasGeneratedTracerSuffix(tracer) {
-            return /-[a-z0-9]{8}$/i.test(String(tracer || "").trim());
-          }
-
-          function doesTracerMatchSelection(entryTracer, selectedTracer) {
-            const normalizedEntry = String(entryTracer || "").trim();
-            const normalizedSelected = String(selectedTracer || "").trim();
-            if (!normalizedEntry || !normalizedSelected) {
-              return false;
-            }
-            if (normalizedEntry === normalizedSelected) {
-              return true;
-            }
-            return normalizedEntry.startsWith(normalizedSelected + "-") && hasGeneratedTracerSuffix(normalizedEntry);
-          }
-
-          async function copyText(value) {
-            if (navigator.clipboard && window.isSecureContext) {
-              try {
-                await navigator.clipboard.writeText(value);
-                return true;
-              } catch {
-                // Fall back to the textarea path when browser permissions block clipboard.writeText.
-              }
-            }
-            const field = document.createElement("textarea");
-            field.value = value;
-            field.setAttribute("readonly", "");
-            field.style.position = "fixed";
-            field.style.opacity = "0";
-            document.body.appendChild(field);
-            field.select();
-            let copied = false;
-            try {
-              copied = document.execCommand("copy");
-            } finally {
-              field.remove();
-            }
-            return copied;
-          }
-
-          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;
-            }
-
-            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);
-            }
-
-            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 + ")");
-            }
-            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);
-              }
-            }
-            return { entries: [...byId.values()] };
-          }
-
-          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.");
-              return;
-            }
-            if (!boot.isLoggedIn) {
-              renderEmpty("Sign in to load tracer-scoped POST history.");
-              return;
-            }
-
-            const endpoint = new URL(boot.historyEndpoint, window.location.origin);
-            if (selectedTracers.length) {
-              endpoint.searchParams.set("tracers", selectedTracers.join(","));
-            } else {
-              endpoint.searchParams.delete("tracers");
-            }
-
-            if (triggerButton) {
-              triggerButton.disabled = true;
-              triggerButton.setAttribute("data-loading", "true");
-            } else if (showLoading) {
-              historyRoot.innerHTML = '<div class="editor-history-empty">Loading POST history…</div>';
-            }
-            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);
-            } catch (error) {
-              console.error(error);
-              renderEmpty("Unable to load tracer-scoped POST history" + (error instanceof Error && error.message ? ": " + error.message : "."));
-            } finally {
-              if (triggerButton) {
-                triggerButton.disabled = false;
-                triggerButton.setAttribute("data-loading", "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());
-            mediaModalCopy.addEventListener("click", () => {
-              void copyActiveMediaUrl();
-            });
-            mediaModalInpaint.addEventListener("click", (event) => {
-              const item = activeMediaItems[activeMediaIndex] || null;
-              if (!item || (item.kind || getPreviewKind(item.url)) !== "image") {
-                event.preventDefault();
-                return;
-              }
-              const href = buildInpaintPageUrlForMedia(item, { ensureTracer: true });
-              if (!href) {
-                event.preventDefault();
-                return;
-              }
-              mediaModalInpaint.href = href;
-            });
-            mediaModalPrev.addEventListener("click", () => stepMediaModal(-1));
-            mediaModalNext.addEventListener("click", () => stepMediaModal(1));
-            mediaModalBackdrop.addEventListener("click", (event) => {
-              if (event.target === mediaModalBackdrop) {
-                closeMediaModal();
-              }
-            });
-          }
-          if (hasInpaintModal) {
-            void loadInpaintProviders();
-            inpaintClose.addEventListener("click", () => closeInpaintModal());
-            inpaintUndo.addEventListener("click", () => {
-              inpaintStrokes.pop();
-              redrawInpaintMask();
-              setInpaintStatus("", "");
-            });
-            inpaintClear.addEventListener("click", () => {
-              inpaintStrokes = [];
-              redrawInpaintMask();
-              setInpaintStatus("", "");
-            });
-            inpaintBrush.addEventListener("input", () => {
-              inpaintBrushLabel.textContent = inpaintBrush.value;
-            });
-            inpaintColorPicker.addEventListener("input", () => {
-              activeInpaintColor = normalizeHexColor(inpaintColorPicker.value);
-              renderInpaintControls();
-            });
-            inpaintAddColor.addEventListener("click", () => addInpaintColor(inpaintColorPicker.value));
-            inpaintAttachmentInput.addEventListener("change", () => {
-              void addAttachmentFiles(inpaintAttachmentInput.files);
-              inpaintAttachmentInput.value = "";
-            });
-            inpaintGlobalAttachments.addEventListener("click", (event) => {
-              const target = event.target;
-              if (!(target instanceof Element)) return;
-              const remove = target.closest("[data-editor-inpaint-remove-attachment]");
-              if (remove instanceof HTMLElement) {
-                inpaintAttachments = inpaintAttachments.filter((attachment) => attachment.id !== remove.dataset.editorInpaintRemoveAttachment);
-                renderAllAttachmentChips();
-              }
-            });
-            document.querySelector('[data-editor-inpaint-attach-scope="global"]')?.addEventListener("click", () => {
-              openAttachmentPicker("global");
-            });
-            inpaintGlobalPrompt.addEventListener("paste", (event) => {
-              handleAttachmentPaste(event, "global");
-            });
-            inpaintPrompts.addEventListener("click", (event) => {
-              const target = event.target;
-              if (!(target instanceof Element)) {
-                return;
-              }
-              const removeColor = target.closest("[data-editor-inpaint-remove-color]");
-              if (removeColor instanceof HTMLElement && removeColor.dataset.editorInpaintRemoveColor) {
-                removeInpaintColor(removeColor.dataset.editorInpaintRemoveColor);
-                return;
-              }
-              const remove = target.closest("[data-editor-inpaint-remove-attachment]");
-              if (remove instanceof HTMLElement) {
-                inpaintAttachments = inpaintAttachments.filter((attachment) => attachment.id !== remove.dataset.editorInpaintRemoveAttachment);
-                renderAllAttachmentChips();
-                return;
-              }
-              const attach = target.closest("[data-editor-inpaint-attach-scope]");
-              if (attach instanceof HTMLElement && attach.dataset.editorInpaintAttachScope === "color" && attach.dataset.color) {
-                openAttachmentPicker("color", attach.dataset.color);
-                return;
-              }
-              const row = target.closest(".editor-inpaint-color-row");
-              if (row instanceof HTMLElement && row.dataset.color) {
-                selectInpaintColor(row.dataset.color);
-              }
-            });
-            inpaintPrompts.addEventListener("focusin", (event) => {
-              const target = event.target;
-              if (!(target instanceof Element)) {
-                return;
-              }
-              const row = target.closest(".editor-inpaint-color-row");
-              if (row instanceof HTMLElement && row.dataset.color) {
-                selectInpaintColor(row.dataset.color);
-              }
-            });
-            inpaintPrompts.addEventListener("input", (event) => {
-              const target = event.target;
-              if (target instanceof HTMLTextAreaElement) {
-                updateInpaintPrompt(target.dataset.color || "", target.value);
-              }
-            });
-            inpaintPrompts.addEventListener("paste", (event) => {
-              const target = event.target;
-              if (target instanceof HTMLTextAreaElement && target.dataset.color) {
-                handleAttachmentPaste(event, "color", target.dataset.color);
-              }
-            });
-            inpaintCanvas.addEventListener("pointerdown", (event) => beginInpaintStroke(event));
-            inpaintCanvas.addEventListener("pointermove", (event) => continueInpaintStroke(event));
-            inpaintCanvas.addEventListener("pointerup", (event) => endInpaintStroke(event));
-            inpaintCanvas.addEventListener("pointercancel", (event) => endInpaintStroke(event));
-            inpaintCanvas.addEventListener("pointerleave", (event) => endInpaintStroke(event));
-            inpaintSubmit.addEventListener("click", () => {
-              void submitInpaintJob();
-            });
-            inpaintModalBackdrop.addEventListener("click", (event) => {
-              if (event.target === inpaintModalBackdrop) {
-                closeInpaintModal();
-              }
-            });
-            window.addEventListener("resize", () => syncInpaintCanvasSize());
-          }
-          if (hasHttpModal) {
-            httpModalClose.addEventListener("click", () => closeHttpModal());
-            httpModalBackdrop.addEventListener("click", (event) => {
-              if (event.target === httpModalBackdrop) {
-                closeHttpModal();
-              }
-            });
-          }
-          window.addEventListener("keydown", (event) => {
-            if (event.key === "Escape") {
-              if (hasInpaintModal && inpaintModalBackdrop.getAttribute("data-open") === "true") {
-                closeInpaintModal();
-                return;
-              }
-              if (hasHttpModal && httpModalBackdrop.hidden === false) {
-                closeHttpModal();
-                return;
-              }
-              if (hasMediaModal && mediaModalBackdrop.getAttribute("data-open") === "true") {
-                closeMediaModal();
-                return;
-              }
-              if (hasTracerModal && modalBackdrop.getAttribute("data-open") === "true") {
-                closeTracerModal();
-              }
-              return;
-            }
-            if (hasMediaModal && mediaModalBackdrop.getAttribute("data-open") === "true" && activeMediaItems.length > 1) {
-              if (event.key === "ArrowLeft") {
-                event.preventDefault();
-                stepMediaModal(-1);
-                return;
-              }
-              if (event.key === "ArrowRight") {
-                event.preventDefault();
-                stepMediaModal(1);
-              }
-            }
-          });
-          historyRoot.addEventListener("click", (event) => {
-            const target = event.target;
-            if (!(target instanceof Element)) {
-              return;
-            }
-            const previewButton = target.closest("[data-preview-url]");
-            if (previewButton instanceof HTMLButtonElement) {
-              event.preventDefault();
-              event.stopPropagation();
-              const url = previewButton.getAttribute("data-preview-url") || "";
-              if (url) {
-                openMediaGroupFromButton(previewButton);
-              }
-              return;
-            }
-            const expandMediaButton = target.closest("[data-editor-expand-media]");
-            if (expandMediaButton instanceof HTMLButtonElement) {
-              event.preventDefault();
-              event.stopPropagation();
-              const key = expandMediaButton.getAttribute("data-editor-expand-media") || "";
-              if (key) {
-                expandedPreviewGroups.add(key);
-                renderGroups(lastHistoryEntries, lastSelectedTracers);
-              }
-              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);
-              }
-              return;
-            }
-            const refreshButton = target.closest("[data-editor-history-refresh]");
-            if (refreshButton instanceof HTMLButtonElement) {
-              event.preventDefault();
-              event.stopPropagation();
-              void loadHistory({ triggerButton: refreshButton });
-              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");
-              }
-              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);
-              });
-              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;
-              }
-              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.");
-                });
-              }
-              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 Render Runs.');
-              if (confirmed) {
-                tracerStore.remove(tracer);
-              }
-            }
-          });
-          document.addEventListener("click", (event) => {
-            const target = event.target;
-            if (!(target instanceof Element)) {
-              return;
-            }
-            const exampleButton = target.closest("[data-editor-example-index]");
-            if (exampleButton instanceof HTMLButtonElement) {
-              event.preventDefault();
-              const exampleIndex = Number(exampleButton.getAttribute("data-editor-example-index") || "0");
-              const mediaIndex = Number(exampleButton.getAttribute("data-editor-example-media-index") || "0");
-              openExampleModal(Number.isFinite(exampleIndex) ? exampleIndex : 0, Number.isFinite(mediaIndex) ? mediaIndex : 0);
-              return;
-            }
-            const copyButton = target.closest("[data-editor-copy-content]");
-            if (!(copyButton instanceof HTMLButtonElement)) {
-              return;
-            }
-            event.preventDefault();
-            const value = copyButton.getAttribute("data-editor-copy-content") || "";
-            const label = copyButton.getAttribute("data-editor-copy-label") || "Copied text";
-            if (!value) {
-              return;
-            }
-            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 formatDifficulty(difficulty) {
-    return difficulty.charAt(0).toUpperCase() + difficulty.slice(1);
-}
-function renderTemplateSound(sound) {
-    const title = sound.sound_title.trim();
-    const url = sound.sound_url.trim();
-    if (!title && !url) {
-        return "";
-    }
-    const displayTitle = title || url;
-    const value = url
-        ? `<a class="editor-sound-title" href="${escapeAttribute(url)}" target="_blank" rel="noopener noreferrer">${escapeHtml(displayTitle)}</a>`
-        : `<span class="editor-sound-title">${escapeHtml(displayTitle)}</span>`;
-    return `
-    <div class="editor-sound">
-      <span class="editor-sound-label">Sound</span>
-      ${value}
-    </div>
-  `;
-}
-function renderExamples(examples) {
-    const cards = examples.flatMap((example, exampleIndex) => (example.map((entry, mediaIndex) => renderExampleCard(entry, exampleIndex, mediaIndex))));
-    if (!cards.length) {
-        return `<div class="editor-example-empty">No reference cuts are configured for this composition yet.</div>`;
-    }
-    return `<div class="editor-examples-row" aria-label="Composition reference cuts">${cards.join("")}</div>`;
-}
-function renderExampleCard(entry, exampleIndex, mediaIndex) {
-    const url = entry.mediaUrl;
-    const note = entry.note.trim() || `Example ${exampleIndex + 1}`;
-    const media = /\.(mp4|webm|ogg|mov|m4v)(\?|#|$)/i.test(url)
-        ? `<video src="${escapeAttribute(url)}" muted playsinline preload="metadata" aria-hidden="true"></video>`
-        : `<img src="${escapeAttribute(url)}" alt="${escapeAttribute(note)}" loading="lazy" decoding="async" />`;
-    return `
-    <article class="editor-example-card">
-      <button
-        type="button"
-        class="editor-example-media"
-        data-editor-example-index="${exampleIndex}"
-        data-editor-example-media-index="${mediaIndex}"
-        aria-label="Open ${escapeAttribute(note)}"
-      >${media}</button>
-      <p class="editor-example-note">${escapeHtml(note)}</p>
-    </article>
-  `;
-}
-function renderQuickstartTextarea(label, value, rows) {
-    const text = value.trim() || "Not configured for this composition 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