@mevdragon/vidfarm-devcli 0.5.2 → 0.6.0

package/dist/src/page-shell.js

@@ -0,0 +1,1381 @@
+import { EDITOR_DARK_THEME_CSS } from "./editor-dark-theme.js";
+export function escapeHtml(value) {
+    return value
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}
+export function escapeAttribute(value) {
+    return escapeHtml(value).replace(/'/g, "&#39;");
+}
+export function escapeJsonForHtml(value) {
+    return JSON.stringify(value)
+        .replace(/</g, "\\u003c")
+        .replace(/>/g, "\\u003e")
+        .replace(/&/g, "\\u0026");
+}
+export function withAccountQuery(href, accountId) {
+    if (!accountId || !href.startsWith("/")) {
+        return href;
+    }
+    const url = new URL(href, "https://vidfarm.local");
+    if (url.pathname.startsWith("/u/")) {
+        return `${url.pathname}${url.search}${url.hash}`;
+    }
+    if (url.pathname === "/discover" || url.pathname.startsWith("/discover/") || url.pathname === "/help") {
+        return `${url.pathname}${url.search}${url.hash}`;
+    }
+    return `/u/${encodeURIComponent(accountId)}${url.pathname}${url.search}${url.hash}`;
+}
+export function resolveAccountDisplayName(input) {
+    const email = input?.email?.trim() || "";
+    const displayName = input?.displayName?.trim() || "";
+    if (displayName) {
+        return displayName;
+    }
+    if (!email) {
+        return "";
+    }
+    return email
+        .split("@")[0]
+        .replace(/[._-]+/g, " ")
+        .replace(/\b\w/g, (match) => match.toUpperCase());
+}
+function renderNavIcon(kind) {
+    if (kind === "discover") {
+        return `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3v4"/><path d="M10 13v4"/><path d="M3 10h4"/><path d="M13 10h4"/><path d="m5.8 5.8 2.3 2.3"/><path d="m11.9 11.9 2.3 2.3"/><path d="m14.2 5.8-2.3 2.3"/><path d="m8.1 11.9-2.3 2.3"/></svg>`;
+    }
+    if (kind === "library") {
+        return `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 4.5h3v11h-3z"/><path d="M8.7 4.5h3v11h-3z"/><path d="m13.4 5.1 2.3-.6 2.2 10.7-2.3.6z"/></svg>`;
+    }
+    if (kind === "calendar") {
+        return `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7.2"/><path d="M10 6.3v4.1l2.8 1.7"/></svg>`;
+    }
+    if (kind === "chat") {
+        return `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4.2 5.2a2 2 0 0 1 2-2h7.6a2 2 0 0 1 2 2v5.6a2 2 0 0 1-2 2H9.2l-4.1 3.1v-3.1a2 2 0 0 1-.9-1.7Z"/><path d="M7.3 7.1h5.4"/><path d="M7.3 9.6h3.7"/></svg>`;
+    }
+    if (kind === "settings") {
+        return `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M14.8 15.2a5.4 5.4 0 1 0-9.6 0"/><circle cx="10" cy="6.8" r="3.1"/></svg>`;
+    }
+    if (kind === "help") {
+        return `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7.2"/><path d="M8.1 8a2.2 2.2 0 1 1 3.7 1.6c-.8.7-1.4 1.1-1.4 2.2"/><path d="M10 14.8h.01"/></svg>`;
+    }
+    return `<svg viewBox="0 0 20 20" fill="currentColor"><circle cx="4.2" cy="10" r="1.45"/><circle cx="10" cy="10" r="1.45"/><circle cx="15.8" cy="10" r="1.45"/></svg>`;
+}
+function renderMenuIcon() {
+    return `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><path d="M3.5 5.5h13"/><path d="M3.5 10h13"/><path d="M3.5 14.5h13"/></svg>`;
+}
+export function renderPrimaryNav(input) {
+    const items = input.loggedIn
+        ? [
+            { id: "discover", href: withAccountQuery("/discover", input.accountId), label: "Discover", icon: renderNavIcon("discover") },
+            { id: "library", href: withAccountQuery("/library", input.accountId), label: "Library", icon: renderNavIcon("library") },
+            { id: "calendar", href: withAccountQuery("/calendar", input.accountId), label: "Calendar", icon: renderNavIcon("calendar") },
+            { id: "settings", href: withAccountQuery("/settings", input.accountId), label: "Settings", icon: renderNavIcon("settings") }
+        ]
+        : [
+            { id: "discover", href: "/discover", label: "Discover", icon: renderNavIcon("discover") },
+            { id: "login", href: "/login", label: "Login", icon: renderNavIcon("settings") }
+        ];
+    const menuItems = input.loggedIn
+        ? [
+            { id: "chat", href: withAccountQuery("/chat", input.accountId), label: "Chat" },
+            { id: "job-runs", href: withAccountQuery("/job-runs", input.accountId), label: "Run History" },
+            { id: "inpaint", href: withAccountQuery("/inpaint", input.accountId), label: "Inpaint" },
+            { id: "help", href: "/help", label: "Help" },
+            { id: "logout", action: "logout", label: "Log Out" }
+        ]
+        : [
+            { id: "help", href: "/help", label: "Help" },
+            { id: "login", href: "/login", label: "Login" }
+        ];
+    const mobileMenuPrimaryItems = items.filter((item) => !menuItems.some((menuItem) => menuItem.id === item.id));
+    const logoutDialog = input.loggedIn ? `
+    <dialog class="logout-dialog" data-logout-dialog>
+      <div class="logout-dialog-head">
+        <div class="label logout-dialog-kicker">Log out</div>
+        <h3>Log out of this browser?</h3>
+        <p>This clears the stored developer key, workspace access, and local session state for the current browser.</p>
+      </div>
+      <div class="toolbar logout-dialog-actions">
+        <button type="button" class="secondary" data-close-logout-dialog>Cancel</button>
+        <form method="post" action="/logout" data-logout-form>
+          <input type="hidden" name="account" value="${escapeAttribute(input.accountId ?? "")}" />
+          <button type="submit" class="danger">Yes, log out</button>
+        </form>
+      </div>
+    </dialog>
+  ` : "";
+    return `
+    <nav class="primary-nav" aria-label="Primary">
+      ${items.map((item) => `
+        <a class="nav-link${item.id === input.current ? " is-active" : ""}" href="${item.href}">
+          <span class="nav-icon" aria-hidden="true">${item.icon}</span>
+          <span>${item.label}</span>
+        </a>
+      `).join("")}
+      ${menuItems.map((item) => `
+        ${"href" in item ? `
+	          <a class="nav-link nav-mobile-extra${item.id === input.current ? " is-active" : ""}" href="${escapeAttribute(item.href ?? "#")}">
+            <span>${escapeHtml(item.label)}</span>
+          </a>
+        ` : `
+          <button type="button" class="nav-link nav-mobile-extra nav-action-link" data-open-logout-dialog>
+            <span>${escapeHtml(item.label)}</span>
+          </button>
+        `}
+      `).join("")}
+      ${menuItems.length ? `
+        <details class="nav-menu">
+          <summary class="nav-link nav-menu-trigger" aria-label="Open navigation menu">
+            <span class="nav-icon nav-menu-desktop-icon" aria-hidden="true">${renderNavIcon("more")}</span>
+            <span class="nav-icon nav-menu-mobile-icon" aria-hidden="true">${renderMenuIcon()}</span>
+            <span class="nav-menu-label">Menu</span>
+          </summary>
+          <div class="nav-menu-panel" role="menu">
+            ${mobileMenuPrimaryItems.map((item) => `
+              <a class="nav-menu-item nav-menu-mobile-only${item.id === input.current ? " is-active" : ""}" role="menuitem" href="${escapeAttribute(item.href ?? "#")}">${escapeHtml(item.label)}</a>
+            `).join("")}
+            ${menuItems.map((item) => `
+              ${"href" in item ? `
+	                <a class="nav-menu-item${item.id === input.current ? " is-active" : ""}" role="menuitem" href="${escapeAttribute(item.href ?? "#")}">${escapeHtml(item.label)}</a>
+              ` : `
+                <button type="button" class="nav-menu-item nav-menu-button" role="menuitem" data-open-logout-dialog>${escapeHtml(item.label)}</button>
+              `}
+            `).join("")}
+          </div>
+        </details>
+      ` : ""}
+    </nav>
+    ${logoutDialog}
+  `;
+}
+export function renderBrandLockup(input) {
+    const email = input?.email?.trim() || "";
+    const derivedName = resolveAccountDisplayName(input);
+    const href = withAccountQuery("/discover", input?.accountId);
+    const accountMeta = email
+        ? `<div class="brand-account-meta">${escapeHtml(derivedName)} <span>(${escapeHtml(email)})</span></div>`
+        : "";
+    return `
+    <a class="brand-lockup" href="${escapeAttribute(href)}">
+      <img class="brand-logo-image" src="/assets/logo-vidfarm.png" alt="VidFarm AI" />
+      <div class="brand-copy">
+        <div class="brand-title brand-title-static">VidFarm<span class="brand-title-mobile-hidden"> AI</span></div>
+        ${accountMeta}
+      </div>
+    </a>
+  `;
+}
+export function renderPageShell(input) {
+    const isEditorTheme = input.bodyClass?.split(/\s+/).includes("is-editor-theme") ?? false;
+    return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <title>${escapeHtml(input.title)}</title>
+    <link rel="icon" href="/assets/favicon.ico" sizes="any" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+    <style>
+      :root {
+        color-scheme: light;
+        --bg: #f8f4eb;
+        --paper: rgba(255, 252, 247, 0.88);
+        --paper-strong: rgba(255, 252, 247, 0.96);
+        --panel: transparent;
+        --panel-muted: rgba(250, 245, 234, 0.9);
+        --ink: #2f3748;
+        --muted: #74829c;
+        --line: rgba(209, 219, 233, 0.9);
+        --line-strong: rgba(191, 164, 109, 0.42);
+        --accent: #dec081;
+        --accent-deep: #243041;
+        --accent-soft: rgba(222, 192, 129, 0.18);
+        --shadow: 0 24px 80px rgba(15, 23, 42, 0.08);
+        --shadow-soft: 0 16px 36px rgba(148, 109, 42, 0.08);
+        --radius-lg: 32px;
+        --radius-md: 26px;
+        --radius-sm: 18px;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        height: 100%;
+        min-height: 100%;
+        overflow: hidden;
+      }
+
+      body {
+        margin: 0;
+        height: 100%;
+        min-height: 100%;
+        overflow: hidden;
+        color: var(--ink);
+        font-family: "Manrope", sans-serif;
+        background:
+          radial-gradient(circle at 12% 18%, rgba(222, 192, 129, 0.28), transparent 24%),
+          radial-gradient(circle at 84% 12%, rgba(123, 92, 29, 0.12), transparent 22%),
+          linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0)),
+          linear-gradient(145deg, #f8f4eb 0%, #f1e7d3 52%, #e9dbba 100%);
+        background-attachment: fixed;
+      }
+
+      body::before {
+        content: "";
+        position: fixed;
+        inset: 0;
+        pointer-events: none;
+        background-image:
+          linear-gradient(rgba(96, 74, 36, 0.035) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(96, 74, 36, 0.035) 1px, transparent 1px);
+        background-size: 30px 30px;
+        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.38), transparent 86%);
+      }
+
+      a {
+        color: inherit;
+      }
+
+      button,
+      input,
+      select,
+      textarea {
+        font: inherit;
+      }
+
+      .app-shell {
+        width: min(1980px, calc(100vw - 40px));
+        margin: 0 auto;
+        height: 100dvh;
+        min-height: 0;
+        padding: 20px 0 28px;
+      }
+
+      .app-shell.is-wide {
+        width: min(1980px, calc(100vw - 40px));
+      }
+
+      .app-shell.is-narrow {
+        width: min(1980px, calc(100vw - 40px));
+      }
+
+      .page-stack {
+        display: grid;
+        height: 100%;
+        min-height: 0;
+        gap: 18px;
+      }
+
+      .frame {
+        position: relative;
+        display: grid;
+        grid-template-rows: auto minmax(0, 1fr);
+        min-height: 0;
+        overflow: hidden;
+        border-radius: var(--radius-lg);
+        background: var(--panel);
+      }
+
+      .frame-body {
+        display: grid;
+        min-height: 0;
+        gap: 20px;
+        padding: 14px 0 0;
+      }
+
+      .topbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        min-height: 76px;
+        padding: 10px 16px 10px 20px;
+        border: 1px solid rgba(255, 255, 255, 0.82);
+        border-radius: var(--radius-lg);
+        background: var(--paper);
+        box-shadow: var(--shadow);
+      }
+
+      .brand-lockup {
+        display: flex;
+        flex: 1 1 min(0, 58%);
+        align-items: center;
+        gap: 14px;
+        min-width: 0;
+        color: inherit;
+        text-decoration: none;
+      }
+
+      .brand-lockup:hover,
+      .brand-lockup:focus {
+        text-decoration: none;
+      }
+
+      .brand-logo-image {
+        display: block;
+        width: auto;
+        height: 44px;
+        max-width: min(220px, 38vw);
+        object-fit: contain;
+        object-position: left center;
+        flex: 0 0 auto;
+        border-radius: 12px;
+      }
+
+      .brand-mark {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 38px;
+        height: 38px;
+        border-radius: 999px;
+        background: #111934;
+        color: #f3e8cd;
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+      }
+
+      .brand-mark svg {
+        width: 20px;
+        height: 20px;
+      }
+
+      .brand-copy {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        min-width: 0;
+        flex-wrap: wrap;
+      }
+
+      .brand-account-meta {
+        min-width: 0;
+        color: rgba(116, 130, 156, 0.78);
+        font-size: 0.94rem;
+        line-height: 1.2;
+        font-weight: 500;
+        letter-spacing: -0.01em;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .brand-account-meta span {
+        color: rgba(116, 130, 156, 0.62);
+      }
+
+      .eyebrow {
+        font-size: 10px;
+        font-weight: 700;
+        letter-spacing: 0.28em;
+        text-transform: uppercase;
+        color: var(--muted);
+      }
+
+      .brand-title {
+        font-family: "Instrument Serif", serif;
+        font-size: clamp(1.65rem, 1.85vw, 2rem);
+        line-height: 0.92;
+        font-weight: 400;
+        letter-spacing: -0.05em;
+        color: #1f2635;
+      }
+
+      .brand-title-static {
+        font-family: "Instrument Serif", serif;
+        font-size: clamp(1.5rem, 1.7vw, 1.85rem);
+        line-height: 0.92;
+        font-weight: 400;
+        letter-spacing: -0.05em;
+        text-transform: none;
+        color: #1f2635;
+      }
+
+      .brand-description {
+        min-width: 0;
+        color: #66758d;
+        font-size: 0.94rem;
+      }
+
+      .topbar-actions {
+        display: flex;
+        flex-wrap: wrap;
+        flex: 1 1 auto;
+        gap: 6px;
+        justify-content: flex-end;
+        min-width: 0;
+      }
+
+      .primary-nav {
+        display: flex;
+        flex-wrap: nowrap;
+        gap: 4px;
+        align-items: center;
+        justify-content: flex-end;
+        width: auto;
+        min-width: 0;
+        max-width: 100%;
+        padding: 3px;
+        border: 1px solid rgba(191, 164, 109, 0.28);
+        border-radius: 22px;
+        background: linear-gradient(180deg, rgba(247, 241, 230, 0.94), rgba(244, 236, 223, 0.96));
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.88),
+          0 8px 18px rgba(138, 102, 32, 0.08);
+      }
+
+      .nav-link {
+        display: inline-flex;
+        flex: 0 0 auto;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        min-height: 38px;
+        padding: 0 14px;
+        white-space: nowrap;
+        border: 1px solid transparent;
+        border-radius: 16px;
+        color: #6f6451;
+        text-decoration: none;
+        font-size: 0.9rem;
+        font-weight: 600;
+        transition: background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
+      }
+
+      .nav-link:hover {
+        color: var(--ink);
+      }
+
+      .nav-link.is-active {
+        border-color: rgba(232, 223, 204, 0.9);
+        background: rgba(255, 252, 247, 0.96);
+        color: var(--ink);
+        box-shadow: 0 8px 20px rgba(101, 73, 18, 0.08);
+      }
+
+      .nav-menu {
+        position: relative;
+        flex: 0 0 auto;
+      }
+
+      .nav-menu > summary {
+        list-style: none;
+        cursor: pointer;
+      }
+
+      .nav-menu > summary::-webkit-details-marker {
+        display: none;
+      }
+
+      .nav-menu-trigger {
+        min-width: 34px;
+        padding: 0 8px;
+        color: rgba(111, 100, 81, 0.68);
+      }
+
+      .nav-menu-trigger:hover,
+      .nav-menu[open] > .nav-menu-trigger {
+        color: rgba(47, 55, 72, 0.82);
+      }
+
+      .nav-menu-label {
+        display: none;
+      }
+
+      .nav-menu-mobile-icon,
+      .nav-menu-mobile-only {
+        display: none;
+      }
+
+      .nav-menu-panel {
+        position: absolute;
+        z-index: 40;
+        top: calc(100% + 8px);
+        right: 0;
+        display: grid;
+        width: max-content;
+        min-width: 142px;
+        padding: 6px;
+        border: 1px solid rgba(191, 164, 109, 0.3);
+        border-radius: 14px;
+        background: rgba(255, 252, 247, 0.98);
+        box-shadow: 0 18px 38px rgba(81, 58, 20, 0.15);
+      }
+
+      .nav-menu-item {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        width: 100%;
+        min-height: 34px;
+        padding: 0 10px;
+        border: 0;
+        border-radius: 10px;
+        background: transparent;
+        color: #5d6a80;
+        font-size: 0.88rem;
+        font-weight: 700;
+        font-family: inherit;
+        text-align: left;
+        text-decoration: none;
+        white-space: nowrap;
+        cursor: pointer;
+      }
+
+      .nav-menu-item:hover,
+      .nav-menu-item.is-active {
+        background: rgba(244, 236, 223, 0.86);
+        color: var(--ink);
+      }
+
+      .nav-menu-item.nav-menu-mobile-only {
+        display: none;
+      }
+
+      .nav-action-link {
+        border: 1px solid transparent;
+        background: transparent;
+        font-family: inherit;
+      }
+
+      .nav-mobile-extra {
+        display: none;
+      }
+
+      .nav-icon,
+      .nav-icon svg {
+        width: 16px;
+        height: 16px;
+      }
+
+      .surface,
+      .surface-hero,
+      .surface-muted {
+        position: relative;
+        border-radius: var(--radius-md);
+        background: transparent;
+      }
+
+      .surface-hero {
+        background:
+          radial-gradient(circle at top right, rgba(195, 159, 86, 0.14), transparent 26%),
+          transparent;
+      }
+
+      h1,
+      h2,
+      h3 {
+        margin: 0;
+        color: #1f2635;
+      }
+
+      h1 {
+        font-family: "Instrument Serif", serif;
+        font-size: clamp(3rem, 5vw, 4.6rem);
+        line-height: 0.88;
+        font-weight: 400;
+        letter-spacing: -0.07em;
+        text-wrap: balance;
+      }
+
+      h2 {
+        font-family: "Instrument Serif", serif;
+        font-size: clamp(1.8rem, 2.8vw, 2.7rem);
+        line-height: 0.92;
+        font-weight: 400;
+        letter-spacing: -0.06em;
+      }
+
+      h3 {
+        font-size: 1.12rem;
+        line-height: 1.2;
+        font-weight: 600;
+        letter-spacing: -0.03em;
+      }
+
+      p {
+        margin: 0;
+        color: var(--muted);
+        line-height: 1.65;
+      }
+
+      .lede {
+        max-width: 56ch;
+        font-size: 0.98rem;
+      }
+
+      .hero-grid,
+      .split-grid,
+      .card-grid,
+      .stats-grid,
+      .field-grid,
+      .toolbar {
+        display: grid;
+        gap: 16px;
+      }
+
+      .hero-grid {
+        grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
+        align-items: stretch;
+      }
+
+      .split-grid {
+        grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
+      }
+
+      .page-hero {
+        display: grid;
+        grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.85fr);
+        gap: 18px;
+        align-items: start;
+      }
+
+      .page-section {
+        display: grid;
+        gap: 14px;
+      }
+
+      .page-section-head {
+        display: flex;
+        align-items: end;
+        justify-content: space-between;
+        gap: 16px;
+      }
+
+      .metric-grid {
+        display: grid;
+        gap: 14px;
+      }
+
+      .metric {
+        display: grid;
+        gap: 8px;
+      }
+
+      .card-grid {
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      }
+
+      .stats-grid {
+        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      }
+
+      .field-grid.cols-2 {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+
+      .field-grid.cols-3 {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+
+      .logout-dialog {
+        width: min(28rem, calc(100vw - 1.5rem));
+        padding: 0;
+        border: 1px solid rgba(235, 195, 195, 0.96);
+        border-radius: 30px;
+        background: rgba(255, 250, 250, 0.98);
+        box-shadow: 0 28px 72px rgba(113, 30, 30, 0.16);
+      }
+
+      .logout-dialog::backdrop {
+        background: rgba(36, 24, 24, 0.24);
+        backdrop-filter: blur(8px);
+      }
+
+      .logout-dialog-head {
+        display: grid;
+        gap: 12px;
+        padding: 24px 24px 20px;
+        border-bottom: 1px solid rgba(235, 195, 195, 0.96);
+        background: rgba(148, 47, 47, 0.05);
+      }
+
+      .logout-dialog-kicker {
+        margin-bottom: 0;
+        color: #a33f3f;
+      }
+
+      .logout-dialog-head h3 {
+        margin: 0;
+        font-size: 2rem;
+        line-height: 0.95;
+        letter-spacing: -0.05em;
+        color: #571d1d;
+      }
+
+      .logout-dialog-head p {
+        margin: 0;
+        color: rgba(109, 36, 36, 0.8);
+      }
+
+      .logout-dialog-actions {
+        justify-content: flex-end;
+        padding: 20px 24px 24px;
+      }
+
+      .logout-dialog-actions form {
+        margin: 0;
+      }
+
+      .stack {
+        display: grid;
+        gap: 16px;
+      }
+
+      .stack-lg {
+        display: grid;
+        gap: 22px;
+      }
+
+      .kicker {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        min-height: 34px;
+        width: max-content;
+        max-width: 100%;
+        align-self: start;
+        padding: 0 14px;
+        border: 1px solid rgba(209, 219, 233, 0.96);
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.9);
+        color: #6f7d95;
+        font-size: 11px;
+        font-weight: 700;
+        letter-spacing: 0.24em;
+        text-transform: uppercase;
+      }
+
+      .kicker.is-muted {
+        color: var(--muted);
+      }
+
+      .button,
+      button,
+      .link-button,
+      .cta-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+        min-height: 46px;
+        padding: 0 18px;
+        border: 1px solid rgba(219, 196, 146, 0.8);
+        border-radius: 999px;
+        background: #dec081;
+        color: #243041;
+        text-decoration: none;
+        font-size: 0.95rem;
+        font-weight: 600;
+        cursor: pointer;
+        transition:
+          transform 160ms ease,
+          border-color 160ms ease,
+          background 160ms ease,
+          box-shadow 160ms ease;
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
+      }
+
+      @media (hover: hover) {
+        .button:hover,
+        button:hover,
+        .link-button:hover {
+          transform: translateY(-1px);
+          border-color: rgba(191, 164, 109, 0.9);
+          box-shadow:
+            inset 0 1px 0 rgba(255, 255, 255, 0.84),
+            0 12px 28px rgba(118, 89, 38, 0.15);
+        }
+      }
+
+      .button.secondary,
+      button.secondary,
+      .link-button.secondary {
+        background: rgba(255, 255, 255, 0.88);
+        color: var(--ink);
+      }
+
+      .button.danger,
+      button.danger {
+        border-color: rgba(192, 90, 90, 0.42);
+        background: #9f3d3d;
+        color: #fff8f8;
+      }
+
+      @media (hover: hover) {
+        .button.danger:hover,
+        button.danger:hover {
+          border-color: rgba(160, 58, 58, 0.62);
+          box-shadow: 0 12px 28px rgba(128, 38, 38, 0.18);
+        }
+      }
+
+      .nav-menu-button:hover,
+      .nav-action-link:hover {
+        transform: none;
+        box-shadow: none;
+      }
+
+      .button.ghost,
+      button.ghost,
+      .link-button.ghost {
+        background: rgba(255, 255, 255, 0.34);
+      }
+
+      button[disabled] {
+        cursor: not-allowed;
+        opacity: 0.5;
+        transform: none;
+        box-shadow: none;
+      }
+
+      .input,
+      input,
+      select,
+      textarea {
+        width: 100%;
+        border: 1px solid var(--line);
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.92);
+        color: var(--ink);
+        padding: 14px 16px;
+        outline: none;
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
+      }
+
+      textarea {
+        min-height: 140px;
+        border-radius: 24px;
+        resize: vertical;
+      }
+
+      input:focus,
+      select:focus,
+      textarea:focus {
+        border-color: rgba(191, 164, 109, 0.9);
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.9),
+          0 0 0 4px var(--accent-soft);
+      }
+
+      label,
+      .label {
+        display: block;
+        margin-bottom: 8px;
+        color: var(--muted);
+        font-size: 11px;
+        font-weight: 700;
+        letter-spacing: 0.3em;
+        text-transform: uppercase;
+      }
+
+      .label-group {
+        display: grid;
+        gap: 8px;
+      }
+
+      .notice {
+        padding: 14px 16px;
+        border: 1px solid rgba(209, 219, 233, 0.96);
+        border-radius: 18px;
+        background: rgba(255, 255, 255, 0.82);
+        color: var(--ink);
+      }
+
+      .notice-success {
+        border-color: rgba(209, 219, 233, 0.96);
+        background: rgba(255, 255, 255, 0.82);
+        color: var(--ink);
+      }
+
+      .notice-error {
+        border-color: rgba(214, 107, 107, 0.35);
+        background: rgba(191, 38, 38, 0.1);
+        color: #7f1d1d;
+      }
+
+      .helper,
+      .tiny,
+      .meta-copy {
+        color: #7a879e;
+        font-size: 0.94rem;
+      }
+
+      .tiny {
+        font-size: 0.86rem;
+      }
+
+      .pill {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        min-height: 34px;
+        padding: 0 12px;
+        border: 1px solid rgba(209, 219, 233, 0.96);
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.9);
+        color: #6f7d95;
+        font-size: 11px;
+        font-weight: 700;
+        letter-spacing: 0.24em;
+        text-transform: uppercase;
+      }
+
+      .status-pill.is-active::before,
+      .pill.is-active::before {
+        content: "";
+        width: 8px;
+        height: 8px;
+        border-radius: 999px;
+        background: var(--accent);
+        box-shadow: 0 0 0 4px rgba(222, 192, 129, 0.22);
+      }
+
+      .status-row,
+      .toolbar {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+      }
+
+      .toolbar,
+      .status-row {
+        gap: 10px;
+      }
+
+      .keyline {
+        height: 1px;
+        background: linear-gradient(90deg, rgba(112, 86, 34, 0), rgba(209, 219, 233, 0.96), rgba(112, 86, 34, 0));
+      }
+
+      .empty-state {
+        padding: 18px;
+        border: 1px dashed rgba(209, 219, 233, 0.96);
+        border-radius: 18px;
+        background: rgba(255, 255, 255, 0.5);
+        color: var(--muted);
+      }
+
+      .auth-main .page-stack {
+        align-content: center;
+        justify-items: center;
+        padding: 24px 12px;
+      }
+
+      .auth-card {
+        display: grid;
+        gap: 14px;
+        width: 100%;
+        max-width: 560px;
+        margin: 0 auto;
+        padding: 28px;
+        border: 1px solid var(--line);
+        border-radius: var(--radius-md);
+        background: var(--paper-strong);
+        box-shadow: var(--shadow-soft);
+      }
+
+      .auth-card h1,
+      .auth-card h2,
+      .auth-card h3,
+      .auth-card p {
+        overflow-wrap: anywhere;
+      }
+
+      .loading-inline {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+      }
+
+      .loading-spinner {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        border: 2px solid rgba(36, 48, 65, 0.18);
+        border-top-color: rgba(36, 48, 65, 0.78);
+        border-radius: 999px;
+        animation: vidfarm-spin 0.8s linear infinite;
+        flex: 0 0 auto;
+      }
+
+      @keyframes vidfarm-spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      code,
+      pre {
+        font-family: "SFMono-Regular", Menlo, Consolas, monospace;
+      }
+
+      pre {
+        margin: 0;
+        border: 1px solid rgba(73, 57, 26, 0.18);
+        border-radius: 18px;
+        background: #211a12;
+        color: #f8eed6;
+        padding: 16px;
+        overflow: auto;
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+
+      ${input.style ?? ""}
+
+      ${isEditorTheme ? EDITOR_DARK_THEME_CSS : ""}
+
+      @media (max-width: 1024px) {
+        .hero-grid,
+        .split-grid,
+        .page-hero {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      @media (max-width: 1024px) {
+        html,
+        body {
+          height: auto;
+          min-height: 100%;
+          overflow: auto;
+          overflow-x: hidden;
+        }
+
+        body {
+          background-attachment: scroll;
+        }
+
+        .app-shell,
+        .app-shell.is-wide,
+        .app-shell.is-narrow {
+          width: min(100vw - 14px, 1980px);
+          height: auto;
+          min-height: 100svh;
+          padding-top: 8px;
+          padding-bottom: calc(18px + env(safe-area-inset-bottom));
+        }
+
+        .page-stack,
+        .frame {
+          height: auto;
+          min-height: 0;
+          overflow: visible;
+        }
+
+        .topbar {
+          min-height: auto;
+          padding: 8px;
+          border-radius: 24px;
+          align-items: center;
+          flex-wrap: nowrap;
+          gap: 8px;
+        }
+
+        .brand-lockup {
+          flex: 1 1 auto;
+          width: auto;
+          gap: 7px;
+        }
+
+        .brand-copy {
+          display: flex;
+          flex: 0 0 auto;
+          min-width: 0;
+          gap: 0;
+          flex-wrap: nowrap;
+        }
+
+        .brand-title-static {
+          font-size: 1.24rem;
+          line-height: 1;
+        }
+
+        .brand-account-meta {
+          display: none;
+        }
+
+        .brand-title-mobile-hidden {
+          display: none;
+        }
+
+        .topbar-actions {
+          flex: 0 0 auto;
+          width: auto;
+          justify-content: flex-end;
+          overflow: visible;
+          padding-bottom: 0;
+          scrollbar-width: none;
+        }
+
+        .topbar-actions::-webkit-scrollbar {
+          display: none;
+        }
+
+        .brand-logo-image {
+          height: 32px;
+          max-width: 38px;
+        }
+
+        .primary-nav {
+          min-width: 0;
+          width: auto;
+          max-width: none;
+          flex-wrap: nowrap;
+          justify-content: flex-end;
+          gap: 0;
+          padding: 0;
+          border: 0;
+          border-radius: 0;
+          background: transparent;
+          box-shadow: none;
+          overflow: visible;
+        }
+
+        .primary-nav > .nav-link {
+          display: none;
+        }
+
+        .nav-link {
+          flex: 0 0 auto;
+          min-height: 44px;
+          gap: 6px;
+          padding: 0 12px;
+          border-radius: 14px;
+          font-size: 0.86rem;
+        }
+
+        .nav-mobile-extra {
+          display: none;
+        }
+
+        .nav-menu {
+          display: block;
+        }
+
+        .nav-menu-trigger {
+          min-width: 44px;
+          width: 44px;
+          height: 44px;
+          padding: 0;
+          border: 1px solid rgba(191, 164, 109, 0.32);
+          border-radius: 15px;
+          background: rgba(255, 252, 247, 0.96);
+          color: var(--ink);
+          box-shadow: 0 8px 18px rgba(138, 102, 32, 0.1);
+        }
+
+        .nav-menu-desktop-icon {
+          display: none;
+        }
+
+        .nav-menu-mobile-icon {
+          display: inline-flex;
+        }
+
+        .nav-menu-panel {
+          top: calc(100% + 10px);
+          right: 0;
+          width: min(82vw, 260px);
+          min-width: 190px;
+          max-height: calc(100svh - 92px);
+          overflow: auto;
+          padding: 8px;
+          border-radius: 16px;
+          box-shadow: 0 20px 46px rgba(81, 58, 20, 0.18);
+        }
+
+        .nav-menu-item {
+          min-height: 42px;
+          padding: 0 12px;
+          border-radius: 12px;
+          font-size: 0.88rem;
+        }
+
+        .nav-menu-item.nav-menu-mobile-only {
+          display: flex;
+        }
+
+        .nav-link > span:not(.nav-icon) {
+          display: none;
+        }
+
+        .nav-link > .nav-menu-label {
+          display: none;
+        }
+
+        .nav-icon,
+        .nav-icon svg {
+          width: 18px;
+          height: 18px;
+        }
+
+        @media (max-width: 560px) {
+          .primary-nav > .nav-link {
+            display: none;
+          }
+
+          .primary-nav > .nav-link > span:not(.nav-icon) {
+            display: none;
+          }
+        }
+
+        @media (max-width: 374px) {
+          .topbar {
+            gap: 6px;
+          }
+
+          .brand-logo-image {
+            height: 30px;
+            max-width: 34px;
+          }
+
+          .brand-lockup {
+            gap: 5px;
+          }
+
+          .brand-title-static {
+            font-size: 1.08rem;
+          }
+
+          .primary-nav {
+            gap: 3px;
+          }
+
+          .nav-link {
+            gap: 3px;
+            padding: 0 6px;
+            font-size: 0.72rem;
+          }
+        }
+
+        .field-grid.cols-2,
+        .field-grid.cols-3 {
+          grid-template-columns: 1fr;
+        }
+
+        h1 {
+          font-size: clamp(1.9rem, 8vw, 2.6rem);
+        }
+      }
+    </style>
+    <script src="/assets/sentry-config.js"></script>
+  </head>
+  <body${input.bodyClass ? ` class="${escapeAttribute(input.bodyClass)}"` : ""}>
+    <main class="app-shell${input.mainClass ? ` ${escapeHtml(input.mainClass)}` : ""}">
+      <div class="page-stack${input.shellClass ? ` ${escapeHtml(input.shellClass)}` : ""}">
+        ${input.body}
+      </div>
+    </main>
+    <script>
+      (() => {
+        const logoutDialog = document.querySelector("[data-logout-dialog]");
+        const logoutForm = document.querySelector("[data-logout-form]");
+        const openLogoutButtons = document.querySelectorAll("[data-open-logout-dialog]");
+        const closeLogoutButtons = document.querySelectorAll("[data-close-logout-dialog]");
+
+        function clearLogoutAccountCache() {
+          if (!(logoutForm instanceof HTMLFormElement)) {
+            return;
+          }
+          const account = String(new FormData(logoutForm).get("account") || "").trim();
+          if (!account) {
+            return;
+          }
+          try {
+            const registryIndexKey = "vidfarm:agency:accounts:index";
+            const rawIds = window.localStorage.getItem(registryIndexKey);
+            const ids = rawIds ? JSON.parse(rawIds) : [];
+            if (Array.isArray(ids)) {
+              window.localStorage.setItem(registryIndexKey, JSON.stringify(ids.filter((value) => value !== account)));
+            }
+            window.localStorage.removeItem("vidfarm:agency:account_" + account);
+            window.localStorage.removeItem("vidfarm:flockposter-cache:v1_" + account);
+            window.localStorage.removeItem("vidfarm:discover-bookmarks:v1_" + account);
+          } catch {
+            // Ignore storage failures.
+          }
+        }
+
+        if (logoutDialog instanceof HTMLDialogElement && openLogoutButtons.length) {
+          openLogoutButtons.forEach((button) => {
+            button.addEventListener("click", () => {
+              if (!logoutDialog.open) {
+                logoutDialog.showModal();
+              }
+            });
+          });
+          closeLogoutButtons.forEach((button) => {
+            button.addEventListener("click", () => logoutDialog.close());
+          });
+          logoutDialog.addEventListener("click", (event) => {
+            const rect = logoutDialog.getBoundingClientRect();
+            const isBackdropClick =
+              event.clientX < rect.left ||
+              event.clientX > rect.right ||
+              event.clientY < rect.top ||
+              event.clientY > rect.bottom;
+            if (isBackdropClick) {
+              logoutDialog.close();
+            }
+          });
+        } else if (openLogoutButtons.length && logoutForm instanceof HTMLFormElement) {
+          openLogoutButtons.forEach((button) => {
+            button.addEventListener("click", () => {
+              if (window.confirm("Log out of this browser and clear local workspace access?")) {
+                logoutForm.requestSubmit();
+              }
+            });
+          });
+        }
+
+        if (logoutForm instanceof HTMLFormElement) {
+          logoutForm.addEventListener("submit", clearLogoutAccountCache);
+        }
+
+        const navMenus = document.querySelectorAll("details.nav-menu");
+        if (navMenus.length) {
+          const closeNavMenus = () => {
+            navMenus.forEach((menu) => {
+              if (menu instanceof HTMLDetailsElement && menu.open) {
+                menu.open = false;
+              }
+            });
+          };
+          document.addEventListener("click", (event) => {
+            if (!(event.target instanceof Node)) {
+              return;
+            }
+            navMenus.forEach((menu) => {
+              if (menu instanceof HTMLDetailsElement && menu.open && !menu.contains(event.target)) {
+                menu.open = false;
+              }
+            });
+          });
+          document.addEventListener("keydown", (event) => {
+            if (event.key === "Escape") {
+              closeNavMenus();
+            }
+          });
+          navMenus.forEach((menu) => {
+            menu.querySelectorAll(".nav-menu-item").forEach((item) => {
+              item.addEventListener("click", () => closeNavMenus());
+            });
+          });
+        }
+      })();
+    </script>
+    ${input.runtimeBoot ? `<div id="page-runtime-root" hidden></div>
+    <script id="page-runtime-boot" type="application/json">${escapeJsonForHtml(input.runtimeBoot)}</script>
+    <script type="module" src="/assets/page-runtime-client-app.js"></script>` : ""}
+  </body>
+</html>`;
+}
+//# sourceMappingURL=page-shell.js.map