@acms-subir/core 0.3.23 → 0.3.25

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @acms-subir/core
 
+## 0.3.25
+
+### Patch Changes
+
+- c6a9129: With Clerk sign-in, saving in the full-screen editors no longer fails a minute after the page loads. Clerk's sign-in cookie lasts a minute, and the post, page and event editors never renewed it, so a change sent after that arrived signed out. Saving an event's hosts sent you through sign-in and dropped the change without a message, and autosave could show "Not saved — Not signed in." The editors now keep the sign-in fresh in the background like the other admin screens, and renew it right before saving hosts. If a save is still turned away because the sign-in lapsed, autosave renews it and tries once more, and a form brings you back to the same page with a note that the change wasn't saved, rather than to the dashboard.
+
+## 0.3.24
+
+### Patch Changes
+
+- fdab131: `acms check --build`, `acms theme check --build` and `acms theme dev` no longer break a running `npm run dev`. The isolated test project links the project's `node_modules`, so it used to share Vite's dependency cache (`node_modules/.vite`) and Astro's build cache (`node_modules/.astro`) with the dev server. Pre-bundling in the test project replaced the files the dev server was serving, and admin pages went blank with 504 "Outdated Optimize Dep" errors until the dev server restarted. The test project now keeps both caches in its own temporary folder under `.acms/previews/`.
+
 ## 0.3.23
 
 ### Patch Changes

package/cli/preview.mjs

@@ -15,7 +15,9 @@ export async function prepareFixture(p,dir,slug){
   await mkdir(join(root,'src/pages/acms-theme-preview'),{recursive:true});await mkdir(join(root,'src/actions'),{recursive:true});
   await writeFile(join(root,'src/actions/index.ts'),"export { server } from '@acms-subir/core/actions';\n");
   await writeFile(join(root,'package.json'),JSON.stringify({name:'acms-isolated-preview',type:'module',private:true}));
-  await writeFile(join(root,'astro.config.mjs'),`import {defineConfig,passthroughImageService} from 'astro/config';\nimport react from '@astrojs/react';\nimport node from '@astrojs/node';\nimport cloudflare from '@astrojs/cloudflare';\nimport acms from '@acms-subir/core';\nexport default defineConfig({output:'server',vite:{resolve:{preserveSymlinks:true}},integrations:[react(),acms({seed:{siteTitle:'Theme preview — synthetic content'}})],adapter:process.env.DEPLOY_TARGET==='cloudflare'?cloudflare({platformProxy:{enabled:false},imageService:'passthrough'}):node({mode:'standalone'}),image:{service:passthroughImageService()}});\n`);
+  // node_modules is the project's own, so the default caches (node_modules/.vite, node_modules/.astro) would be too:
+  // the fixture's dependency pre-bundling would replace the files a running `npm run dev` serves. Keep them in the fixture.
+  await writeFile(join(root,'astro.config.mjs'),`import {defineConfig,passthroughImageService} from 'astro/config';\nimport react from '@astrojs/react';\nimport node from '@astrojs/node';\nimport cloudflare from '@astrojs/cloudflare';\nimport acms from '@acms-subir/core';\nexport default defineConfig({output:'server',cacheDir:${JSON.stringify(join(root,'.astro-cache'))},vite:{cacheDir:${JSON.stringify(join(root,'.vite'))},resolve:{preserveSymlinks:true}},integrations:[react(),acms({seed:{siteTitle:'Theme preview — synthetic content'}})],adapter:process.env.DEPLOY_TARGET==='cloudflare'?cloudflare({platformProxy:{enabled:false},imageService:'passthrough'}):node({mode:'standalone'}),image:{service:passthroughImageService()}});\n`);
   await writeFile(join(root,'src/pages/acms-theme-preview/setup.astro'),`---
 import {getRepo} from ${JSON.stringify(join(CORE,'src/lib/repo/index.ts'))};
 const repo=await getRepo(Astro.locals);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acms-subir/core",
-  "version": "0.3.23",
+  "version": "0.3.25",
   "publishConfig": {
     "access": "public"
   },

package/src/components/auth/ClerkSession.astro

@@ -29,6 +29,22 @@ if (AUTH.provider === 'clerk') {
 
   const meta = document.querySelector<HTMLMetaElement>('meta[name="acms-clerk"][data-keep-alive]');
   if (meta) {
+    // a form that reached the server after the cookie lapsed comes back here
+    // (middleware.ts expiredPostReturn): say so, once, instead of losing it quietly
+    const here = new URL(location.href);
+    if (here.searchParams.get('signin') === 'expired') {
+      here.searchParams.delete('signin');
+      history.replaceState(history.state, '', here);
+      const note = document.createElement('p');
+      note.className = 'flash error';
+      note.setAttribute('role', 'alert');
+      note.title = 'Dismiss';
+      note.style.cssText = 'position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:1000;width:max-content;max-width:calc(100vw - 24px);margin:0;cursor:pointer;box-shadow:0 6px 24px rgb(0 0 0 / 14%)';
+      note.textContent = 'Your sign-in had expired, so that change wasn’t saved. Please make it again.';
+      note.addEventListener('click', () => note.remove());
+      document.body.append(note);
+    }
+
     const signedOutUrl = meta.dataset.signedOutUrl ?? '/admin/login';
     const start = () => loadClerk().then((clerk) => {
       // ended elsewhere (signed out in another tab, revoked by an owner):

package/src/components/editor/PostEditor.tsx

@@ -36,6 +36,7 @@ import { EventSheet } from './event/EventSheet';
 import { focusEventCard } from './event/Section';
 import type { MapsStatus } from '../../lib/maps/types';
 import { fetchRoomStatus, NO_HOLD, RoomConflictDialog } from '../calendar/RoomHolds';
+import { refreshSession } from '../auth/clerk';
 
 // The Ghost-style writing surface, shared by posts AND pages: distraction-free
 // column, cards via "/", autosave, a collapsible settings sidebar, and an
@@ -47,6 +48,16 @@ import { fetchRoomStatus, NO_HOLD, RoomConflictDialog } from '../calendar/RoomHo
 
 type SaveState = 'saved' | 'dirty' | 'saving' | 'error';
 
+// Clerk's sign-in cookie lasts a minute and is renewed in the background
+// (ClerkSession on the editor page). A write that still lands after it lapsed
+// (a laptop waking up before the renewal ran) renews it and goes once more.
+async function signedIn<T extends { error?: { code: string } }>(send: () => Promise<T>): Promise<T> {
+  const r = await send();
+  if (r.error?.code !== 'UNAUTHORIZED') return r;
+  await refreshSession();
+  return send();
+}
+
 interface Props {
   kind?: 'post' | 'page' | 'event';
   post?: Post;
@@ -395,7 +406,7 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
     const bodyHtml = langRef.current && mainBody.current ? mainBody.current.html : ed.getHTML();
     const translations = languages.length ? trsRef.current : undefined;
     if (kind === 'event') {
-      const r = await actions.events.save({
+      const r = await signedIn(() => actions.events.save({
         id: docId,
         title: m.title,
         slug: m.slug,
@@ -425,7 +436,7 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
         roomHold: m.roomHold,
         scheduledAt: m.scheduledAt,
         translations,
-      });
+      }));
       if (r.error) {
         setSave('error');
         setSaveError(r.error.message);
@@ -455,7 +466,7 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
         return next;
       });
     } else if (kind === 'page') {
-      const r = await actions.pages.save({
+      const r = await signedIn(() => actions.pages.save({
         id: docId,
         title: m.title,
         slug: m.slug,
@@ -468,7 +479,7 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
         isHome: m.isHome,
         locale: m.locale,
         translations,
-      });
+      }));
       if (r.error) {
         setSave('error');
         return;
@@ -483,7 +494,7 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
         return next;
       });
     } else {
-      const r = await actions.posts.save({
+      const r = await signedIn(() => actions.posts.save({
         id: docId,
         title: m.title,
         slug: m.slug,
@@ -503,7 +514,7 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
         publishedAt: m.publishedAt,
         scheduledAt: m.scheduledAt,
         translations,
-      });
+      }));
       if (r.error) {
         setSave('error');
         return;
@@ -808,10 +819,10 @@ export default function PostEditor({ kind = 'post', post, page, event, calendars
     if (saveTimer.current) { clearTimeout(saveTimer.current); saveTimer.current = null; }
     setSave('saved');
     const r = kind === 'page'
-      ? await actions.pages.discardChanges({ id: docId })
+      ? await signedIn(() => actions.pages.discardChanges({ id: docId }))
       : kind === 'event'
-      ? await actions.events.discardChanges({ id: docId })
-      : await actions.posts.discardChanges({ id: docId });
+      ? await signedIn(() => actions.events.discardChanges({ id: docId }))
+      : await signedIn(() => actions.posts.discardChanges({ id: docId }));
     if (r.error) {
       setSave('error');
       return false;

package/src/lib/auth/request.ts

@@ -16,6 +16,8 @@ export interface RequestAuth {
   headers: Headers;
   error: 'configuration' | 'unavailable' | 'access_denied' | null;
   reverified: boolean;
+  /** a Clerk session cookie that lapsed: Clerk renews it on a page GET, never on a POST */
+  expired: boolean;
 }
 const requests = new WeakMap<Request, Promise<RequestAuth>>();
 const environments = new WeakMap<Request, unknown>();
@@ -81,7 +83,7 @@ export async function activeClerkSession(client: ClerkClient, binding: ClerkBind
   return active;
 }
 export function getRequestAuth(request: Request, cookies: Cookies, localsOrRepo?: unknown): Promise<RequestAuth> {
-  if (AUTH.provider === 'builtin') return validatePerson(cookies.get(SESSION_COOKIE)?.value, localsOrRepo).then(person => ({ userId: person && isStaffRole(person.role) ? person.id : null, person, provider: 'builtin', clerk: null, headers: new Headers(), error: null, reverified: false }));
+  if (AUTH.provider === 'builtin') return validatePerson(cookies.get(SESSION_COOKIE)?.value, localsOrRepo).then(person => ({ userId: person && isStaffRole(person.role) ? person.id : null, person, provider: 'builtin', clerk: null, headers: new Headers(), error: null, reverified: false, expired: false }));
   let cached = requests.get(request);
   if (!cached) {
     if (!(localsOrRepo && typeof localsOrRepo === 'object' && 'email' in localsOrRepo)) environments.set(request, localsOrRepo);
@@ -96,7 +98,7 @@ export async function validatePreviewSession(cookies: Cookies, locals?: unknown)
   return locals && typeof locals === 'object' ? (await contexts.get(locals))?.userId ?? null : null;
 }
 async function resolveClerk(request: Request, localsOrRepo?: unknown): Promise<RequestAuth> {
-  const result: RequestAuth = { userId: null, person: null, provider: 'clerk', clerk: null, headers: new Headers(), error: null, reverified: false };
+  const result: RequestAuth = { userId: null, person: null, provider: 'clerk', clerk: null, headers: new Headers(), error: null, reverified: false, expired: false };
   if (!shouldResolveClerk(request)) return result;
   let config: ReturnType<typeof clerkConfig>;
   try { config = clerkConfig(authEnvironment(request, localsOrRepo)); } catch { return { ...result, error: 'configuration' }; }
@@ -112,6 +114,7 @@ async function resolveClerk(request: Request, localsOrRepo?: unknown): Promise<R
     if (authUrl.pathname.startsWith('/api/')) authUrl.search = '';
     const state = await clerkOperation(() => client.authenticateRequest(new Request(authUrl, { method: request.method, headers }), { authorizedParties: config.authorizedParties, acceptsToken: 'session_token' }));
     result.headers = state.headers;
+    result.expired = !state.isAuthenticated && String(state.reason ?? '').startsWith('session-token-expired');
     const auth = state.toAuth();
     if (!auth || !auth.userId || !auth.sessionId || !state.isAuthenticated) return result;
     if (auth.sessionClaims.iss !== config.issuer || typeof auth.sessionClaims.azp !== 'string' || !config.authorizedParties.includes(auth.sessionClaims.azp)) return result;

package/src/middleware.ts

@@ -1,7 +1,7 @@
 import { defineMiddleware } from 'astro:middleware';
 import type { APIContext, MiddlewareNext } from 'astro';
 import { I18N } from './lib/i18n';
-import { bindAuthEnvironment, getRequestAuth, requestPerson, shouldResolveClerk, validateRequestSession, withClerkHeaders } from './lib/auth/request';
+import { bindAuthEnvironment, getRequestAuth, requestPerson, shouldResolveClerk, validateRequestSession, withClerkHeaders, type RequestAuth } from './lib/auth/request';
 import { roleHome } from './lib/roles';
 import { AUTH } from './lib/auth/config';
 import { getRepo } from './lib/repo';
@@ -47,6 +47,18 @@ export function legacyContentRedirect(pathname: string): string | null {
   return null;
 }
 
+// An admin form sent after the minute-long Clerk sign-in cookie lapsed (a page
+// whose script couldn't renew it in time): Clerk renews it only on a page GET,
+// so the POST arrives signed out and what it carried is gone. Back to the same
+// page, whose GET renews the cookie, flagged so the page can say nothing was
+// saved (ClerkSession.astro), rather than through sign-in to the dashboard.
+export function expiredPostReturn(auth: Pick<RequestAuth, 'expired'> | null, method: string, url: URL): string | null {
+  if (!auth?.expired || method !== 'POST') return null;
+  const back = new URL(url.pathname + url.search, url.origin);
+  back.searchParams.set('signin', 'expired');
+  return back.pathname + back.search;
+}
+
 // Scheduled publishing fallback: on normal page traffic, at most once a
 // minute per isolate, flip due scheduled posts to published. On Workers the
 // cron trigger in src/worker.ts is the primary path; this sweep covers the
@@ -110,6 +122,8 @@ async function handle(context: APIContext, next: MiddlewareNext): Promise<Respon
   if (pathname.startsWith('/admin') && pathname !== '/admin/login' && pathname !== '/admin/logout') {
     if (auth?.error === 'configuration' || auth?.error === 'unavailable') return new Response('Sign-in is temporarily unavailable. Check the authentication configuration or try again later.', { status: 503, headers: { 'Cache-Control': 'no-store' } });
     if (!(await validateRequestSession(context.request, context.cookies, context.locals))) {
+      const expired = expiredPostReturn(auth, context.request.method, context.url);
+      if (expired) return withClerkHeaders(context.redirect(expired, 303), auth, context.request);
       // signed in, but in a site role without admin access: their own home
       // page, never the admin (the editor-app sign-in explains on the login page)
       const person = await requestPerson(context.request, context.cookies, context.locals);

package/src/pages/admin/c/[collection]/[id].astro

@@ -10,6 +10,7 @@ import { BRAND } from '../../../../lib/brand';
 import { CONTENT, collectionUrl } from '../../../../lib/content';
 import { mergePostDraft } from '../../../../lib/drafts';
 import ThemeScript from '../../../../components/ThemeScript.astro';
+import ClerkSession from '../../../../components/auth/ClerkSession.astro';
 import PostEditor from '../../../../components/editor/PostEditor';
 import '../../../../styles/admin.css';
 import '../../../../styles/editor.css';
@@ -51,6 +52,7 @@ const trDrafts = trLanguages.length > 0 && translationEngine((await repo.getSett
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-visual" />
     <ThemeScript />
+    <ClerkSession keepAlive />
     <meta name="robots" content="noindex" />
     <title>{post.title || 'Untitled'} · {BRAND.name} editor</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />

package/src/pages/admin/calendar/events/[id].astro

@@ -15,6 +15,7 @@ import type { Permission } from '../../../../lib/permissions/catalog';
 import { ApiError } from '../../../../lib/api';
 import { roleLabel } from '../../../../lib/roles';
 import ThemeScript from '../../../../components/ThemeScript.astro';
+import ClerkSession from '../../../../components/auth/ClerkSession.astro';
 import Modal from '../../../../components/Modal.astro';
 import PostEditor from '../../../../components/editor/PostEditor';
 import '../../../../styles/admin.css';
@@ -108,6 +109,7 @@ const approveLabel = pending?.kind === 'changes' ? 'Approve changes' : isLive ?
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-visual" />
     <ThemeScript />
+    <ClerkSession keepAlive />
     <meta name="robots" content="noindex" />
     <title>{event.title || 'Untitled event'} · {BRAND.name} editor</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -230,6 +232,8 @@ const approveLabel = pending?.kind === 'changes' ? 'Approve changes' : isLive ?
     )}
 
     <script>
+      import { refreshSession } from '../../../../components/auth/clerk';
+
       const bar = document.getElementById('evreq');
       // the editor's settings sidebar is fixed under its own top bar: move it below this bar too
       if (bar) new ResizeObserver(() => document.body.style.setProperty('--evreq-h', `${bar.offsetHeight}px`)).observe(bar);
@@ -242,7 +246,9 @@ const approveLabel = pending?.kind === 'changes' ? 'Approve changes' : isLive ?
         history.replaceState(history.state, '', url);
       }
 
-      // let autosave finish before leaving, then skip the editor's leave prompt
+      // let autosave finish before leaving, then skip the editor's leave prompt.
+      // A straight submit renews the sign-in cookie first (ClerkSession); after
+      // waiting, form.submit() skips that listener, so renew it here.
       const busy = () => document.querySelector('.pe-savestate.dirty, .pe-savestate.saving');
       const w = window as unknown as { __evreqLeaving?: boolean };
       document.addEventListener('submit', async (e) => {
@@ -253,6 +259,7 @@ const approveLabel = pending?.kind === 'changes' ? 'Approve changes' : isLive ?
         e.preventDefault();
         for (let i = 0; i < 50 && busy(); i++) await new Promise((r) => setTimeout(r, 120));
         if (busy()) { alert('Your latest edits haven’t saved yet. Check the editor, then try again.'); return; }
+        await refreshSession();
         w.__evreqLeaving = true;
         form.submit();
       });

package/src/pages/admin/pages/[id].astro

@@ -11,6 +11,7 @@ import { mergePageDraft } from '../../../lib/drafts';
 import { localeHomeUrl } from '../../../lib/i18n';
 import { homeSource } from '../../../lib/home-source';
 import ThemeScript from '../../../components/ThemeScript.astro';
+import ClerkSession from '../../../components/auth/ClerkSession.astro';
 import PostEditor from '../../../components/editor/PostEditor';
 import '../../../styles/admin.css';
 import '../../../styles/editor.css';
@@ -47,6 +48,7 @@ const trDrafts = trLanguages.length > 0 && translationEngine((await repo.getSett
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-visual" />
     <ThemeScript />
+    <ClerkSession keepAlive />
     <meta name="robots" content="noindex" />
     <title>{page.title || 'Untitled'} · {BRAND.name} editor</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />