@acms-subir/core 0.3.14 → 0.3.16

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @acms-subir/core
 
+## 0.3.16
+
+### Patch Changes
+
+- 180e37c: Replace Design page section autosave with an explicit Save draft button and keyboard shortcut. Preserve the selected section and language after saving, retain edits made during a save, and keep publishing separate from saving a draft.
+
+## 0.3.15
+
+### Patch Changes
+
+- 8e89435: Show the published site logo and site name on the admin login page, including its dark-mode logo. Share logo rendering with the admin sidebar so both surfaces retain the framework fallback when no site logo is configured.
+
 ## 0.3.14
 
 ### Patch Changes

package/package.json

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

package/src/components/AdminLogo.astro

@@ -0,0 +1,23 @@
+---
+import { BRAND } from '../lib/brand';
+
+interface Props {
+  logo?: string;
+  logoDark?: string;
+  size?: number;
+}
+const { logo, logoDark, size = 20 } = Astro.props;
+---
+
+{logo ? (
+  <>
+    <img class:list={['brand-logo', { 'logo-light': !!logoDark }]} src={logo} alt="" />
+    {logoDark && <img class="brand-logo logo-dark" src={logoDark} alt="" />}
+  </>
+) : (
+  <svg width={size} height={size} viewBox="0 0 24 24" role="img" aria-label={BRAND.name}>
+    <rect x="1" y="3" width="22" height="4.4" rx="1.9" fill="currentColor" opacity="0.85" />
+    <rect x="1" y="10" width="12.5" height="4.4" rx="1.9" fill="var(--accent)" />
+    <rect x="1" y="17" width="17.5" height="4.4" rx="1.9" fill="currentColor" opacity="0.35" />
+  </svg>
+)}

package/src/components/ThemeSectionsEditor.tsx

@@ -12,7 +12,7 @@ import { defaultValue, fieldVisible, initialData, normalizeData, normalizeValue,
 
 // Pages tab of the Design screen: lay out a page from the active theme's
 // section registry (builtins + the theme's own sections). Edits stay local
-// autosave into the design draft (1.2s after the last edit) through
+// until Save draft stages them through
 // POST /api/design; nothing here publishes, and a page's own content is
 // never touched (switching a page back to "Page content" keeps its layout).
 
@@ -76,7 +76,7 @@ export function useDesignApi() {
     }
   }, []);
   useEffect(() => { void load(); }, [load]);
-  /** update local state after our own write (e.g. an autosave) without a refetch */
+  /** update local state after our own write (e.g. Save draft) without a refetch */
   const patch = useCallback((fn: (d: DesignApiState) => DesignApiState) => setData((d) => (d ? fn(d) : d)), []);
   return { data, error, loading, loadCount, reload: load, patch };
 }
@@ -196,8 +196,8 @@ export default function ThemeSectionsEditor({ api, activeTheme, unsplashEnabled,
     return next;
   });
 
-  // `base` is what the server holds (the staged draft); edits autosave into
-  // it. A real reload rehydrates everything; our own autosaves only move
+  // `base` is what the server holds (the staged draft). A real reload
+  // rehydrates everything; our own saves only move
   // `base` and the revision forward, so typing is never overwritten.
   const [base, setBase] = useState<SectionPages>({});
   const revRef = useRef(0);
@@ -222,9 +222,12 @@ export default function ThemeSectionsEditor({ api, activeTheme, unsplashEnabled,
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [loadCount]);
 
-  // click-to-edit from the preview
+  // Consume each preview click once. A save patches `data`; it must not
+  // replay an old click and close the section the user is editing now.
+  const appliedFocus = useRef<SectionFocus | null>(null);
   useEffect(() => {
-    if (!focus || !data) return;
+    if (!focus || !data || appliedFocus.current === focus) return;
+    appliedFocus.current = focus;
     if (data.pages.some((p) => p.id === focus.pageId)) setPageId(focus.pageId);
     setOpenId(focus.sectionId);
   }, [focus, data]);
@@ -265,40 +268,44 @@ export default function ThemeSectionsEditor({ api, activeTheme, unsplashEnabled,
     if (!res.ok) { setSaveError(await errorText(res, `Couldn't save (${res.status}).`)); return null; }
     return (await res.json()) as { revision: number };
   };
-  // autosave: stage into the design draft 1.2s after the last edit
+  // Save an explicit snapshot. Edits made while the request is in flight
+  // remain local and dirty; another save must never silently include them.
   const [saveState, setSaveState] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
-  const saving$ = useRef(false);
+  const saveInFlight = useRef<Promise<void> | null>(null);
   const staleRef = useRef(false);
-  const autosave = async () => {
-    if (saving$.current) return;
-    saving$.current = true;
-    setSaveState('saving');
-    const snapshot = pagesRef.current;
-    try {
-      const out = await post({ operation: 'stage', revision: revRef.current, patch: { sectionPages: snapshot } });
-      if (!out) { setSaveState('error'); return; }
-      revRef.current = out.revision;
-      setBase(snapshot);
-      setSaveState('saved');
-      patch((d) => ({ ...d, revision: out.revision, draft: { ...(d.draft ?? {}), sectionPages: snapshot } }));
-      // the preview couldn't swap (new layout / mode change): reload it now
-      if (staleRef.current) { staleRef.current = false; onSaved?.(); }
-    } catch {
-      setSaveState('error');
-      setSaveError("Couldn't reach the server. Your edits are kept here and will save when you're back online.");
-    } finally {
-      saving$.current = false;
-    }
-  };
-  const autosaveRef = useRef(autosave);
-  autosaveRef.current = autosave;
   const pagesRef = useRef(pages);
   pagesRef.current = pages;
-  useEffect(() => {
-    if (!data || !dirty || conflict) return;
-    const t = setTimeout(() => void autosaveRef.current(), 1200);
-    return () => clearTimeout(t);
-  }, [pages, dirty, conflict, data, saveState]);
+  const saveDraft = (): Promise<void> => {
+    if (saveInFlight.current) return saveInFlight.current;
+    if (conflict || JSON.stringify(pagesRef.current) === JSON.stringify(baseRef.current)) return Promise.resolve();
+    const task = (async () => {
+      setSaveState('saving');
+      setSaveError('');
+      setFlash('');
+      const snapshot = pagesRef.current;
+      try {
+        const out = await post({ operation: 'stage', revision: revRef.current, patch: { sectionPages: snapshot } });
+        if (!out) { setSaveState('error'); return; }
+        revRef.current = out.revision;
+        // Flush callers need the acknowledged snapshot immediately, before
+        // React commits the state update (Publish must not lose the click).
+        baseRef.current = snapshot;
+        setBase(snapshot);
+        setSaveState('saved');
+        patch((d) => ({ ...d, revision: out.revision, draft: { ...(d.draft ?? {}), sectionPages: snapshot } }));
+        if (staleRef.current) { staleRef.current = false; onSaved?.(); }
+      } catch {
+        setSaveState('error');
+        setSaveError("Couldn't reach the server. Your edits are kept here. Try Save draft again when you're back online.");
+      } finally {
+        saveInFlight.current = null;
+      }
+    })();
+    saveInFlight.current = task;
+    return task;
+  };
+  const saveDraftRef = useRef(saveDraft);
+  saveDraftRef.current = saveDraft;
 
   // live preview: render the unsaved layout ~0.35s after you pause typing
   const liveSent = useRef('');
@@ -397,15 +404,16 @@ export default function ThemeSectionsEditor({ api, activeTheme, unsplashEnabled,
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pages, lang, i18nInfo?.drafts]);
 
-  // ⌘Z / ⌘⇧Z (Ctrl+Y) while editing sections; rich text keeps its own undo
+  // Save from any section field; rich text keeps its own undo shortcuts.
   const rootRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
       if (!(e.metaKey || e.ctrlKey) || !rootRef.current || rootRef.current.offsetParent === null) return;
       const t = e.target as HTMLElement | null;
-      if (t?.isContentEditable) return;
       if (t && t !== document.body && !rootRef.current.contains(t)) return;
       const k = e.key.toLowerCase();
+      if (k === 's') { e.preventDefault(); void saveDraftRef.current(); return; }
+      if (t?.isContentEditable) return;
       if (k === 'z' && !e.shiftKey) { e.preventDefault(); undo(); }
       else if ((k === 'z' && e.shiftKey) || k === 'y') { e.preventDefault(); redo(); }
     };
@@ -545,8 +553,7 @@ export default function ThemeSectionsEditor({ api, activeTheme, unsplashEnabled,
   };
   /** save now (the Save button, and before publishing/upgrading) */
   const flush = async (): Promise<boolean> => {
-    if (!dirty) return true;
-    await autosaveRef.current();
+    await saveDraftRef.current();
     return JSON.stringify(pagesRef.current) === JSON.stringify(baseRef.current);
   };
   if (flushRef) flushRef.current = flush;
@@ -633,13 +640,13 @@ export default function ThemeSectionsEditor({ api, activeTheme, unsplashEnabled,
     <div className="te" ref={rootRef}>
       <p className="te-intro">
         Build a page from your theme's sections. Sections marked <b>coded</b> come from your theme's code: their look
-        changes in code, their content changes here. Edits save to a private draft as you type; visitors see them after you <b>Publish</b>.
+        changes in code, their content changes here. Click <b>Save draft</b> to keep your edits; visitors see them after you <b>Publish</b>.
       </p>
       <details className="te-help-panel">
         <summary>How editing works</summary>
         <ul>
           <li><b>Click anything in the preview</b> to open its section here. The preview updates as you type.</li>
-          <li><b>Your changes save themselves</b> to a draft. Undo with ⌘Z (Ctrl+Z), redo with ⌘⇧Z.</li>
+          <li><b>Save draft</b> (⌘S / Ctrl+S) keeps your changes without publishing them. Undo with ⌘Z (Ctrl+Z), redo with ⌘⇧Z.</li>
           <li><b>Publish</b> (top of this screen) makes every change live. <b>Publish this section</b> sends just one section and leaves the rest in the draft.</li>
           <li><b>Linked</b> sections (like upcoming events) fill themselves from your calendar or posts, so there's nothing to update here.</li>
           <li>Fields marked in red need fixing before that section can be published.</li>
@@ -788,7 +795,7 @@ export default function ThemeSectionsEditor({ api, activeTheme, unsplashEnabled,
                                 {s.variant !== 'default' && s.variant}
                                 {s.hidden && ' · hidden'}
                                 {!def && ' · unavailable'}
-                                {unsaved && ' · saving'}
+                                {unsaved && (saveState === 'saving' ? ' · saving' : ' · unsaved')}
                                 {(s.showFrom || s.showUntil) && ' · scheduled'}
                               </span>
                               {issueCount > 0 && <span className="te-issue-mark">{issueCount} to fix</span>}
@@ -977,13 +984,13 @@ export default function ThemeSectionsEditor({ api, activeTheme, unsplashEnabled,
       {saveError && <p className="flash error te-alert" role="alert">{saveError}</p>}
 
       <div className="te-savebar">
-        <span className={`te-savestate ${saveState === 'error' ? 'is-dirty' : ''}`} aria-live="polite">
-          {flash || (saveState === 'error' ? 'Not saved yet' : dirty || saveState === 'saving' ? 'Saving draft…' : saveState === 'saved' ? 'Draft saved · publish when ready' : 'All changes saved')}
+        <span className={`te-savestate ${dirty || saveState === 'error' ? 'is-dirty' : ''}`} aria-live="polite">
+          {flash || (saveState === 'error' ? 'Not saved yet' : saveState === 'saving' ? 'Saving draft…' : dirty ? 'Unsaved changes' : saveState === 'saved' ? 'Draft saved · publish when ready' : 'All changes saved')}
           {totalIssues > 0 && <> · <button type="button" className="te-issue-link" onClick={() => setOpenId(firstIssueId)}>{totalIssues} {totalIssues === 1 ? 'field needs' : 'fields need'} fixing before publishing</button></>}
         </span>
         <button className="btn sm ghost" type="button" onClick={undo} disabled={!past.current.length} title="Undo (⌘Z)">Undo</button>
         <button className="btn sm ghost" type="button" onClick={redo} disabled={!future.current.length} title="Redo (⌘⇧Z)">Redo</button>
-        {saveState === 'error' && <button className="btn sm" type="button" onClick={() => void autosaveRef.current()} disabled={conflict}>Try saving again</button>}
+        <button className="btn sm primary" type="button" onClick={() => void saveDraftRef.current()} disabled={!dirty || saveState === 'saving' || saving || conflict}>{saveState === 'saving' ? 'Saving…' : 'Save draft'}</button>
       </div>
 
       <ImagePicker

package/src/layouts/Admin.astro

@@ -10,6 +10,7 @@ import { accessFor } from '../lib/permissions/access';
 import { AUTH } from '../lib/auth/config';
 import ClerkSession from '../components/auth/ClerkSession.astro';
 import ThemeScript from '../components/ThemeScript.astro';
+import AdminLogo from '../components/AdminLogo.astro';
 import CommandPalette from '../components/CommandPalette';
 import '../styles/admin.css';
 
@@ -185,19 +186,7 @@ const themeOpts = [
     <div class="shell" id="acms-shell">
       <aside class="sidebar" aria-label="Admin navigation">
         <div class="brand">
-          {/* the site's own logo (Design) replaces the framework mark */}
-          {settings.siteLogo ? (
-            <>
-              <img class:list={['brand-logo', { 'logo-light': !!settings.siteLogoDark }]} src={settings.siteLogo} alt="" />
-              {settings.siteLogoDark && <img class="brand-logo logo-dark" src={settings.siteLogoDark} alt="" />}
-            </>
-          ) : (
-            <svg width="20" height="20" viewBox="0 0 24 24" role="img" aria-label={BRAND.name}>
-              <rect x="1" y="3" width="22" height="4.4" rx="1.9" fill="currentColor" opacity="0.85" />
-              <rect x="1" y="10" width="12.5" height="4.4" rx="1.9" fill="var(--accent)" />
-              <rect x="1" y="17" width="17.5" height="4.4" rx="1.9" fill="currentColor" opacity="0.35" />
-            </svg>
-          )}
+          <AdminLogo logo={settings.siteLogo} logoDark={settings.siteLogoDark} />
           <span class="brand-name" title={`v${BRAND.version} · ${BRAND.stack}`}>{siteName}</span>
           <button class="icon-btn" type="button" id="acms-rail-toggle" aria-label="Collapse sidebar" title="Collapse sidebar">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={icons.side} /></svg>

package/src/pages/admin/login.astro

@@ -7,6 +7,7 @@ import { allowLogin } from '../../lib/auth/login-limit';
 import { getRepo } from '../../lib/repo';
 import { BRAND } from '../../lib/brand';
 import ThemeScript from '../../components/ThemeScript.astro';
+import AdminLogo from '../../components/AdminLogo.astro';
 import ClerkSession from '../../components/auth/ClerkSession.astro';
 import '../../styles/admin.css';
 
@@ -55,7 +56,8 @@ const logoutAction = `/admin/logout${next ? `?next=${encodeURIComponent(next)}`
 // the destination query every sign-in link on this page carries forward
 const keep = next ? `next=${encodeURIComponent(next)}` : back ? `return=${encodeURIComponent(back)}` : '';
 const retryHref = `/admin/login${keep ? `?${keep}` : ''}`;
-const siteName = clerkMode ? (await (await getRepo(Astro.locals)).getSettings()).siteTitle || BRAND.name : BRAND.name;
+const settings = await (await getRepo(Astro.locals)).getSettings();
+const siteName = settings.siteTitle || BRAND.name;
 
 let error = '';
 if (!clerkMode && Astro.request.method === 'POST') {
@@ -105,7 +107,7 @@ if (!clerkMode && Astro.request.method === 'POST') {
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <ThemeScript />
     <meta name="robots" content="noindex" />
-    <title>{clerkView === 'sign-up' ? 'Accept invitation' : 'Sign in'} · {BRAND.name} admin</title>
+    <title>{clerkView === 'sign-up' ? 'Accept invitation' : 'Sign in'} · {siteName} admin</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
     <ClerkSession />
@@ -114,12 +116,8 @@ if (!clerkMode && Astro.request.method === 'POST') {
     <div class="login-wrap">
       <main class:list={['card card-pad login-card', { 'is-clerk': clerkMode }]}>
         <div class="brand">
-          <svg width="26" height="26" viewBox="0 0 24 24" role="img" aria-label={BRAND.name}>
-            <rect x="1" y="3" width="22" height="4.4" rx="1.9" fill="currentColor" opacity="0.85" />
-            <rect x="1" y="10" width="12.5" height="4.4" rx="1.9" fill="var(--accent)" />
-            <rect x="1" y="17" width="17.5" height="4.4" rx="1.9" fill="currentColor" opacity="0.35" />
-          </svg>
-          <div class="brand-name">{BRAND.name}</div>
+          <AdminLogo logo={settings.siteLogo} logoDark={settings.siteLogoDark} size={26} />
+          <div class="brand-name">{siteName}</div>
         </div>
 
         {!clerkMode && (

package/src/styles/admin.css

@@ -756,6 +756,7 @@ dialog.modal[open] { animation: modal-in 0.16s ease-out; }
 .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
 .login-card { width: 100%; max-width: 360px; }
 .login-card .brand { justify-content: center; padding-bottom: 20px; }
+.login-card .brand-logo { height: 26px; max-width: 128px; }
 .login-card .brand-name { color: var(--text); flex: none; }
 .login-wrap { background: var(--bg); }
 .btn.block { width: 100%; justify-content: center; min-height: 38px; }

package/src/styles/theme-editor.css

@@ -82,7 +82,8 @@
 .te-add .btn { margin-bottom: 1px; }
 .te-savebar {
   display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
-  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line);
+  position: sticky; bottom: 0; z-index: 2; background: var(--panel);
+  margin-top: 16px; padding: 12px 0; border-top: 1px solid var(--line);
 }
 .te-savestate { margin-right: auto; font-size: 12px; color: var(--faint); }
 .te-savestate.is-dirty { color: var(--amber); font-weight: 600; }