@acms-subir/core 0.3.15 → 0.3.16

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

package/package.json

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

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/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; }