@mevdragon/vidfarm-devcli 0.2.8 → 0.2.9

package/dist/src/page-shell.js

@@ -0,0 +1,941 @@
+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}`;
+    }
+    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>`;
+    }
+    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>`;
+}
+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") }
+        ];
+    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("")}
+    </nav>
+  `;
+}
+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) {
+    return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <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=Instrument+Serif:ital@0;1&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-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));
+      }
+
+      .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);
+      }
+
+      .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.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);
+      }
+
+      .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 ?? ""}
+
+      @media (max-width: 767px) {
+        .hero-grid,
+        .split-grid,
+        .page-hero {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      @media (max-width: 767px) {
+        html,
+        body {
+          height: auto;
+          min-height: 100%;
+          overflow: auto;
+          overflow-x: hidden;
+        }
+
+        .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: 18px;
+        }
+
+        .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: 0 0 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: 1 1 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: 100%;
+          flex-wrap: nowrap;
+          justify-content: flex-end;
+          gap: 2px;
+          padding: 2px;
+          border-radius: 18px;
+          overflow: hidden;
+        }
+
+        .nav-link {
+          flex: 0 1 auto;
+          min-height: 34px;
+          gap: 4px;
+          padding: 0 6px;
+          border-radius: 14px;
+          font-size: 0.68rem;
+        }
+
+        .nav-link > span:not(.nav-icon) {
+          display: inline;
+          min-width: 0;
+          overflow: visible;
+          text-overflow: clip;
+          white-space: nowrap;
+        }
+
+        .nav-icon,
+        .nav-icon svg {
+          width: 12px;
+          height: 12px;
+        }
+
+        @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: 1px;
+          }
+
+          .nav-link {
+            gap: 3px;
+            padding: 0 4px;
+            font-size: 0.62rem;
+          }
+        }
+
+        .field-grid.cols-2,
+        .field-grid.cols-3 {
+          grid-template-columns: 1fr;
+        }
+
+        h1 {
+          font-size: clamp(2.2rem, 14vw, 3.2rem);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main class="app-shell${input.mainClass ? ` ${escapeHtml(input.mainClass)}` : ""}">
+      <div class="page-stack${input.shellClass ? ` ${escapeHtml(input.shellClass)}` : ""}">
+        ${input.body}
+      </div>
+    </main>
+    ${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>`;
+}