@mevdragon/vidfarm-devcli 0.20.6 → 0.20.8

package/dist/src/page-shell.js

@@ -1,1452 +0,0 @@
-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: "tools", href: withAccountQuery("/tools/image", input.accountId), label: "Tools" },
-            { 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>
-  `;
-}
-const BRAND_NAME = "VidFarm";
-const BRAND_ORIGIN = "https://vidfarm.cc";
-const BRAND_OG_IMAGE = `${BRAND_ORIGIN}/assets/logo-vidfarm.png`;
-export function renderPageShell(input) {
-    const isEditorTheme = input.bodyClass?.split(/\s+/).includes("is-editor-theme") ?? false;
-    // Brand the tab title unless the page already names VidFarm.
-    const pageTitle = /vidfarm/i.test(input.title) ? input.title : `${input.title} · ${BRAND_NAME}`;
-    const description = input.description ?? `${BRAND_NAME} — serverless short-form video studio. Fork a proven template, remix it, and render a share-ready MP4 in your browser.`;
-    const ogImage = input.social?.image ?? BRAND_OG_IMAGE;
-    const ogType = input.social?.type ?? "website";
-    const ogUrl = input.social?.url ?? BRAND_ORIGIN;
-    const metaTags = `
-    <meta name="description" content="${escapeHtml(description)}" />
-    <meta name="theme-color" content="#f8f4eb" />
-    <meta name="robots" content="index, follow" />
-    <meta name="application-name" content="${BRAND_NAME}" />
-    <meta property="og:type" content="${escapeHtml(ogType)}" />
-    <meta property="og:site_name" content="${BRAND_NAME}" />
-    <meta property="og:title" content="${escapeHtml(pageTitle)}" />
-    <meta property="og:description" content="${escapeHtml(description)}" />
-    <meta property="og:url" content="${escapeHtml(ogUrl)}" />
-    <meta property="og:image" content="${escapeHtml(ogImage)}" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="${escapeHtml(pageTitle)}" />
-    <meta name="twitter:description" content="${escapeHtml(description)}" />
-    <meta name="twitter:image" content="${escapeHtml(ogImage)}" />`;
-    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(pageTitle)}</title>${metaTags}
-    <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);
-      }
-
-      .view-toggle {
-        display: inline-flex;
-        flex: 0 0 auto;
-        gap: 4px;
-        padding: 3px;
-        border: 1px solid rgba(191, 164, 109, 0.28);
-        border-radius: 999px;
-        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);
-      }
-
-      .view-toggle-tab {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        min-height: 38px;
-        padding: 0 18px;
-        border: 1px solid transparent;
-        border-radius: 999px;
-        background: transparent;
-        color: #6f6451;
-        text-decoration: none;
-        font-size: 0.9rem;
-        font-weight: 700;
-        font-family: inherit;
-        white-space: nowrap;
-        cursor: pointer;
-        box-shadow: none;
-        transition: background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
-      }
-
-      @media (hover: hover) {
-        .view-toggle-tab:hover {
-          transform: none;
-          color: var(--ink);
-        }
-      }
-
-      .view-toggle-tab.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);
-      }
-
-      .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