@acms-subir/core 0.3.16 → 0.3.18

package/src/components/LinksManager.tsx

@@ -12,13 +12,14 @@ import {
 import { actions } from 'astro:actions';
 import type { Link, Settings } from '../lib/schema';
 import { ImagePicker } from './editor/ImagePicker';
+import { linksAvatarStyles } from '../lib/links-avatar';
 
 // Links manager: profile (name + bio), an "add block" picker with typed blocks
 // (brand-preset links, custom links, email, phone, heading, spacer, text,
 // vcard, raw HTML), drag-to-reorder, inline editing with an icon picker
 // (emoji / image / favicon), and a phone-framed live preview of /links.
 //
-// Edits stay local until "Save changes" commits them all at once — the live
+// Edits stay local until "Save & publish" commits them all at once — the live
 // /links page never sees a half-arranged state. Discard restores the saved
 // state.
 
@@ -119,8 +120,13 @@ export default function LinksManager({ links: initial, settings, unsplashEnabled
     linksName: settings.linksName || settings.siteTitle,
     linksBio: settings.linksBio || settings.tagline,
     linksAvatar: settings.linksAvatar,
+    linksAvatarShape: settings.linksAvatarShape,
+    linksAvatarFit: settings.linksAvatarFit,
+    linksAvatarScale: settings.linksAvatarScale,
+    linksVerified: settings.linksVerified,
   };
   const [profile, setProfile] = useState(initialProfile);
+  const avatarStyles = linksAvatarStyles(profile);
   // last state the server has — dirty compares against this
   const [saved, setSaved] = useState({ links: initial, profile: initialProfile });
   const [avatarPickerOpen, setAvatarPickerOpen] = useState(false);
@@ -265,55 +271,81 @@ export default function LinksManager({ links: initial, settings, unsplashEnabled
         ))}
       </div>
       <div className="lm-editor">
-        <div className="lm-profile">
-          <div className="lm-avatarwrap">
-            <button
-              type="button"
-              className="lm-avatar"
-              title={profile.linksAvatar ? 'Change profile photo' : 'Add profile photo'}
-              onClick={() => setAvatarPickerOpen(true)}
-            >
-              {profile.linksAvatar ? (
-                <img src={profile.linksAvatar} alt="" />
-              ) : (
-                <svg aria-hidden="true" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M4 8h3l2-3h6l2 3h3v11H4zM12 11a3 3 0 1 0 0 6 3 3 0 0 0 0-6z" /></svg>
-              )}
-              <span className="lm-avatar-hint">Edit</span>
-            </button>
-            {profile.linksAvatar && (
+        <section className="lm-profile-card" aria-labelledby="links-profile-title">
+          <h2 id="links-profile-title">Profile</h2>
+          <div className="lm-profile">
+            <div className="lm-avatarwrap">
               <button
                 type="button"
-                className="lm-avatar-remove"
-                title="Remove photo"
-                onClick={() => setProfile((p) => ({ ...p, linksAvatar: '' }))}
+                className="lm-avatar"
+                style={avatarStyles.frame}
+                aria-label={profile.linksAvatar ? 'Change profile photo' : 'Upload profile photo'}
+                onClick={() => setAvatarPickerOpen(true)}
               >
-                ✕
+                {profile.linksAvatar ? (
+                  <img src={profile.linksAvatar} alt="" style={avatarStyles.image} />
+                ) : (
+                  <svg aria-hidden="true" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M4 8h3l2-3h6l2 3h3v11H4zM12 11a3 3 0 1 0 0 6 3 3 0 0 0 0-6z" /></svg>
+                )}
               </button>
-            )}
-          </div>
-          <div className="lm-profile-fields">
-            <input
-              type="text"
-              className="lm-profile-name"
-              placeholder="Your name"
-              aria-label="Display name"
-              value={profile.linksName}
-              onChange={(e) => editProfile({ linksName: e.target.value })}
-            />
-            <textarea
-              className="lm-profile-bio"
-              rows={2}
-              placeholder="Write a short bio…"
-              aria-label="Bio"
-              value={profile.linksBio}
-              onChange={(e) => {
-                e.target.style.height = 'auto';
-                e.target.style.height = `${e.target.scrollHeight}px`;
-                editProfile({ linksBio: e.target.value });
-              }}
-            />
+              <button type="button" className="btn sm" onClick={() => setAvatarPickerOpen(true)}>
+                {profile.linksAvatar ? 'Change photo' : 'Upload photo'}
+              </button>
+              {profile.linksAvatar && (
+                <button type="button" className="btn sm ghost" onClick={() => editProfile({ linksAvatar: '' })}>Remove photo</button>
+              )}
+            </div>
+            <div className="lm-profile-fields">
+              <fieldset className="lm-photo-controls">
+                <legend>Photo appearance</legend>
+                <div className="lm-photo-options">
+                  <label htmlFor="links-avatar-shape">Shape
+                    <select id="links-avatar-shape" value={profile.linksAvatarShape} onChange={(e) => editProfile({ linksAvatarShape: e.target.value as Settings['linksAvatarShape'] })}>
+                      <option value="circle">Circle</option>
+                      <option value="square">Square</option>
+                    </select>
+                  </label>
+                  <label htmlFor="links-avatar-fit">Image fit
+                    <select id="links-avatar-fit" value={profile.linksAvatarFit} onChange={(e) => editProfile({ linksAvatarFit: e.target.value as Settings['linksAvatarFit'] })}>
+                      <option value="cover">Fill frame</option>
+                      <option value="contain">Fit whole image</option>
+                    </select>
+                  </label>
+                </div>
+                <label htmlFor="links-avatar-scale">Image scale <output htmlFor="links-avatar-scale">{profile.linksAvatarScale}%</output></label>
+                <input id="links-avatar-scale" type="range" min="25" max="200" step="1" value={profile.linksAvatarScale} aria-describedby="links-avatar-help" onChange={(e) => editProfile({ linksAvatarScale: Number(e.target.value) })} />
+                <p id="links-avatar-help">For logos, choose Fit whole image and reduce the scale to leave space around the edges. The thumbnail updates as you adjust.</p>
+                <button type="button" className="btn sm ghost" onClick={() => editProfile({ linksAvatarShape: 'circle', linksAvatarFit: 'cover', linksAvatarScale: 100 })}>Reset photo appearance</button>
+              </fieldset>
+              <label htmlFor="links-profile-name">Name or handle</label>
+              <input
+                id="links-profile-name"
+                type="text"
+                className="lm-profile-name"
+                placeholder="Your name or @username"
+                value={profile.linksName}
+                onChange={(e) => editProfile({ linksName: e.target.value })}
+              />
+              <label htmlFor="links-profile-bio">Bio</label>
+              <textarea
+                id="links-profile-bio"
+                className="lm-profile-bio"
+                rows={2}
+                placeholder="Write a short bio…"
+                value={profile.linksBio}
+                onChange={(e) => {
+                  e.target.style.height = 'auto';
+                  e.target.style.height = `${e.target.scrollHeight}px`;
+                  editProfile({ linksBio: e.target.value });
+                }}
+              />
+              <label className="lm-verification">
+                <input type="checkbox" role="switch" checked={profile.linksVerified} onChange={(e) => editProfile({ linksVerified: e.target.checked })} />
+                <span>Show verification badge<small>Display a check badge beside your name.</small></span>
+              </label>
+            </div>
           </div>
-        </div>
+        </section>
 
         <div className="lm-addwrap">
           <button
@@ -418,8 +450,9 @@ export default function LinksManager({ links: initial, settings, unsplashEnabled
           </a>
         </div>
         <div className="lm-phone">
-          <iframe key={tick} src="/links" title="Links page preview" />
+          <iframe key={tick} src="/links" title="Published links page" />
         </div>
+        <p className="lm-stat">Published page · refreshes after saving</p>
         <p className="lm-stat"><b>{totalClicks.toLocaleString()}</b> total clicks · <span className={`lm-savestate ${saveState === 'saved' && dirty ? 'dirty' : saveState}`}>{saveLabel}</span></p>
       </aside>
 
@@ -435,15 +468,13 @@ export default function LinksManager({ links: initial, settings, unsplashEnabled
         ))}
       </section>
 
-      {dirty && (
-        <div className="lm-savebar" role="status">
-          <span>{saveState === 'error' ? 'Save failed — try again' : 'Unsaved changes'}</span>
-          <button type="button" className="btn sm" onClick={discard} disabled={saveState === 'saving'}>Discard</button>
-          <button type="button" className="btn sm primary" onClick={() => void saveAll()} disabled={saveState === 'saving'}>
-            {saveState === 'saving' ? 'Saving…' : 'Save changes'}
-          </button>
-        </div>
-      )}
+      <div className="lm-savebar" role="status">
+        <span>{saveState === 'error' ? 'Save failed — try again' : dirty ? 'Unsaved changes' : 'Page is live'}</span>
+        <button type="button" className="btn sm" onClick={discard} disabled={!dirty || saveState === 'saving'}>Discard</button>
+        <button type="button" className="btn sm primary" onClick={() => void saveAll()} disabled={!dirty || saveState === 'saving'}>
+          {saveState === 'saving' ? 'Saving…' : 'Save & publish'}
+        </button>
+      </div>
     </div>
   );
 }

package/src/components/ThemeSectionsEditor.tsx

@@ -790,6 +790,7 @@ export default function ThemeSectionsEditor({ api, activeTheme, unsplashEnabled,
                               aria-controls={panelId}
                               onClick={() => setOpenId(open ? null : s.id)}
                             >
+                              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 6 6-6 6" /></svg>
                               <span className="te-sec-name">{name}</span>
                               <span className="te-sec-meta">
                                 {s.variant !== 'default' && s.variant}
@@ -927,7 +928,6 @@ export default function ThemeSectionsEditor({ api, activeTheme, unsplashEnabled,
                                     <button type="button" onClick={() => patchSection(s.id, (x) => ({ ...x, locked: x.locked ? undefined : true }))}>{s.locked ? 'Unlock for editors' : 'Lock for editors'}</button>
                                   </div>
                                 </details>
-                                <button className="btn sm ghost danger te-delete" type="button" onClick={() => remove(s)}>Delete section</button>
                                 </>}
                                 {canPublishAlone && changedFromLive && layout.mode === 'sections' && liveLayout?.mode === 'sections' && (
                                   <button className="btn sm primary te-publish-one" type="button" onClick={() => void publishSection(s)} disabled={saving || conflict || issueCount > 0} title={issueCount ? 'Fix the fields marked below first' : undefined}>
@@ -935,6 +935,18 @@ export default function ThemeSectionsEditor({ api, activeTheme, unsplashEnabled,
                                   </button>
                                 )}
                               </div>
+                              {isOwner && (
+                                <div className="te-sec-danger" role="group" aria-labelledby={`${panelId}-del`}>
+                                  <p className="te-sec-danger-text">
+                                    <b id={`${panelId}-del`}>Delete section</b>
+                                    <span>Removes {name} from this page’s draft. The live page changes only when you publish.</span>
+                                  </p>
+                                  <button className="btn sm te-delete te-sec-delete" type="button" onClick={() => remove(s)} aria-label={`Delete ${name} section`}>
+                                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3" /></svg>
+                                    Delete
+                                  </button>
+                                </div>
+                              )}
                             </div>
                           )}
                         </>

package/src/layouts/Site.astro

@@ -18,6 +18,7 @@ import type { SiteChrome } from '../lib/site-chrome';
 import SiteLogo from '../components/site/SiteLogo.astro';
 import ClerkSession from '../components/auth/ClerkSession.astro';
 import '../styles/site.css';
+import '../styles/page-transitions.css';
 import '../styles/cards.css';
 import '../styles/live.css';
 

package/src/lib/calendar/cards.ts

@@ -4,6 +4,7 @@
 import type { ContentRepository } from '../repo/types';
 import type { CalEvent, Settings } from '../schema';
 import { siteLocale } from '../dates';
+import { eventImage } from './images';
 import { eventUrl } from './config';
 import { eventIsPublic, featuredOccurrence, formatOccurrence, locationLine, type Occurrence } from './events';
 import { collectViewEvents } from './data';
@@ -36,9 +37,10 @@ export function eventCardHtml(
   const h = opts.heading ?? 'h3';
   // "Sat, Oct 3 · 11:00 AM", "Sat, Oct 3 · All day", "Sat, Oct 24 – Sun, Oct 25"
   const when = f.range;
+  const image = eventImage(e, settings);
   const media = opts.showImage
-    ? e.cover
-      ? `<a class="pc-ev-card-media" href="${esc(href)}" tabindex="-1" aria-hidden="true"><img src="${esc(e.cover)}" alt="${esc(e.coverAlt)}" loading="lazy" /></a>`
+    ? image.src
+      ? `<a class="pc-ev-card-media" href="${esc(href)}" tabindex="-1" aria-hidden="true"><img src="${esc(image.src)}" alt="${esc(image.alt)}" loading="lazy" /></a>`
       : `<a class="pc-ev-card-media is-tile" href="${esc(href)}" tabindex="-1" aria-hidden="true"><span class="pc-ev-tile"><b>${esc(f.month)}</b><span>${esc(f.day)}</span></span></a>`
     : '';
   const loc = locationLine(e.location);

package/src/lib/calendar/images.ts

@@ -0,0 +1,17 @@
+import type { CalEvent, Settings } from '../schema';
+
+/** Only image URLs that can be placed in an img src; blank clears the fallback. */
+export function safeEventImageUrl(value: unknown): string {
+  const url = typeof value === 'string' ? value.trim() : '';
+  if (!url || /[\\\x00-\x20]/.test(url)) return '';
+  if (/^\/(?!\/)/.test(url)) return url;
+  try { return /^https?:$/.test(new URL(url).protocol) ? url : ''; } catch { return ''; }
+}
+
+/** Authored image → section override → calendar fallback. Never modifies the event. */
+export function eventImage(event: Pick<CalEvent, 'cover' | 'coverAlt'>, settings: Pick<Settings, 'calendar'>, sectionFallback = '') {
+  const cover = safeEventImageUrl(event.cover);
+  return cover
+    ? { src: cover, alt: event.coverAlt }
+    : { src: safeEventImageUrl(sectionFallback) || safeEventImageUrl(settings.calendar.eventFallbackImage), alt: '' };
+}

package/src/lib/editor/schemas.ts

@@ -1,6 +1,6 @@
 import { z } from 'zod';
 import { FormDefinition } from '../forms/schema';
-import { Booking, BookingLink, Calendar, LinkKind, Resource } from '../schema';
+import { Booking, BookingLink, Calendar, LinksAvatarShape, LinksAvatarFit, LinksAvatarScale, LinkKind, Resource } from '../schema';
 
 // Response shapes of the editor-app API (OpenAPI components, client types).
 const str = z.string(), bool = z.boolean(), num = z.number(), date = str.datetime();
@@ -115,7 +115,7 @@ export const EditorFormResponses = z.object({
   items: z.array(z.object({ id: str, createdAt: date, answers: z.array(z.object({ label: str, value: str })) })),
   pagination: Pagination,
 });
-export const EditorLinksPage = z.object({ revision: num.int(), name: str, bio: str, avatar: str, canEditHtml: bool, items: z.array(z.object({
+export const EditorLinksPage = z.object({ revision: num.int(), name: str, bio: str, avatar: str, avatarShape: LinksAvatarShape, avatarFit: LinksAvatarFit, avatarScale: LinksAvatarScale, verified: bool, canEditHtml: bool, items: z.array(z.object({
   id: str, kind: LinkKind, label: str, url: str, icon: str, html: str, meta: z.record(z.unknown()), clicks: num.int(),
 })) });
 

package/src/lib/editor/site-data.ts

@@ -1,6 +1,6 @@
 import { z } from 'zod';
 import type { Link } from '../schema';
-import { LinkKind } from '../schema';
+import { LinksAvatarShape, LinksAvatarFit, LinksAvatarScale, LinkKind } from '../schema';
 import { ApiError } from '../api';
 import { displayAnswers } from '../forms/service';
 import type { EditorContext } from './http';
@@ -56,7 +56,7 @@ export async function getLinksFor(c: EditorContext) {
   // next save gets a 409), never newer than the blocks it is sent with
   const revision = await c.repo.linksRevision();
   const [settings, links] = await Promise.all([c.repo.getSettings(), c.repo.listLinks()]);
-  return { revision, name: settings.linksName, bio: settings.linksBio, avatar: settings.linksAvatar, canEditHtml: isAdmin(c.who) && await principalCan(c.repo, c.who, 'site.links'), items: links.map(linkView) };
+  return { revision, name: settings.linksName, bio: settings.linksBio, avatar: settings.linksAvatar, avatarShape: settings.linksAvatarShape, avatarFit: settings.linksAvatarFit, avatarScale: settings.linksAvatarScale, verified: settings.linksVerified, canEditHtml: isAdmin(c.who) && await principalCan(c.repo, c.who, 'site.links'), items: links.map(linkView) };
 }
 
 const Item = z.object({
@@ -71,6 +71,8 @@ export const LinksPut = z.object({
   revision: z.number().int().min(0),
   name: z.string().max(120).optional(), bio: z.string().max(500).optional(),
   avatar: z.string().max(1000).refine((v) => !v || /^(https?:\/\/|\/)/.test(v), 'Use an http(s) or site path image.').optional(),
+  avatarShape: LinksAvatarShape.optional(), avatarFit: LinksAvatarFit.optional(), avatarScale: LinksAvatarScale.optional(),
+  verified: z.boolean().optional(),
   // the whole page in display order; blocks left out are removed
   items: z.array(Item).max(200),
 }).strict();
@@ -107,6 +109,6 @@ export async function putLinksFor(c: EditorContext, body: z.infer<typeof LinksPu
   await c.repo.replaceLinks(body.revision, body.items.map((i) => {
     const old = i.id ? byId.get(i.id) : undefined;
     return { kind: i.kind, label: i.label, url: i.url, icon: i.icon, html: i.html, meta: i.meta, keep: old && old.kind === i.kind ? old.id : undefined };
-  }), { linksName: body.name, linksBio: body.bio, linksAvatar: body.avatar });
+  }), { linksName: body.name, linksBio: body.bio, linksAvatar: body.avatar, linksVerified: body.verified, linksAvatarShape: body.avatarShape, linksAvatarFit: body.avatarFit, linksAvatarScale: body.avatarScale });
   return getLinksFor(c);
 }

package/src/lib/links-avatar.ts

@@ -0,0 +1,10 @@
+import type { Settings } from './schema';
+
+type AvatarSettings = Pick<Settings, 'linksAvatarShape' | 'linksAvatarFit' | 'linksAvatarScale'>;
+
+export function linksAvatarStyles(settings: AvatarSettings) {
+  return {
+    frame: { borderRadius: settings.linksAvatarShape === 'square' ? '0' : '50%' },
+    image: { objectFit: settings.linksAvatarFit, transform: `scale(${settings.linksAvatarScale / 100})` },
+  };
+}

package/src/lib/mobile/links.ts

@@ -62,6 +62,10 @@ export async function getLinks(repo: ContentRepository, url: URL) {
     name: settings.linksName || settings.siteTitle,
     bio: settings.linksBio || settings.tagline,
     avatar: safeUrl(settings.linksAvatar, origin),
+    avatarShape: settings.linksAvatarShape,
+    avatarFit: settings.linksAvatarFit,
+    avatarScale: settings.linksAvatarScale,
+    verified: settings.linksVerified,
     url: page,
     socials: nav.filter((n) => n.area === 'social').map((n) => ({ label: n.label, url: safeUrl(n.url, origin, true), iconPath: socialIconPath(n.url) })).filter((n) => n.url),
     items: links.filter(shown).map((l) => item(l, origin, page)).filter((i) => !('url' in i) || i.url),

package/src/lib/mobile/schemas.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { CalEvent, Booking, Calendar, BookingQuestion } from '../schema';
+import { CalEvent, Booking, Calendar, BookingQuestion, LinksAvatarShape, LinksAvatarFit, LinksAvatarScale } from '../schema';
 
 const str = z.string(), bool = z.boolean(), strings = z.array(str);
 const date = str.datetime(), locale = str.nullable();
@@ -45,7 +45,7 @@ export const SearchResults = z.object({ locale, query: str,
 const Icon = z.object({ type: z.enum(['svg', 'image', 'emoji']), value: str }).nullable();
 const ButtonStyle = { color: str.nullable(), textColor: str.nullable() };
 export const Links = z.object({
-  name: str, bio: str, avatar: str, url: str,
+  name: str, bio: str, avatar: str, avatarShape: LinksAvatarShape, avatarFit: LinksAvatarFit, avatarScale: LinksAvatarScale, verified: bool, url: str,
   socials: z.array(z.object({ label: str, url: str, iconPath: str.nullable() })),
   items: z.array(z.discriminatedUnion('kind', [
     z.object({ id: str, kind: z.literal('link'), label: str, url: str, destination: str, icon: Icon, ...ButtonStyle }),

package/src/lib/repo/migrations.ts

@@ -7,6 +7,7 @@ import { EDITOR_MIGRATION, EDITOR_GRACE_MIGRATION } from '../editor/migration';
 import { CALENDAR_SETTINGS_MIGRATION, ROOM_HOLD_MIGRATION } from '../calendar/migration';
 import { PLACES_MIGRATION } from '../maps/migration';
 import { ROLES_MIGRATION } from '../permissions/migration';
+import { SYNC_MIGRATION } from '../sync/migration';
 // Versioned schema migrations shared by the two SQLite-dialect adapters
 // (D1 and libSQL). Applied versions are recorded in the `migrations` table;
 // each adapter's runner applies whatever is newer, in order, at startup.
@@ -632,6 +633,31 @@ export const MIGRATIONS: Migration[] = [
     `INSERT INTO backup_state (id) VALUES (1)`,
   ] },
   ROLES_MIGRATION,
+  SYNC_MIGRATION,
+  { version: 53, statements: [
+    `ALTER TABLE settings ADD COLUMN links_verified INTEGER NOT NULL DEFAULT 0`,
+    `DROP TRIGGER links_revision_profile`,
+    `CREATE TRIGGER links_revision_profile AFTER UPDATE OF links_name, links_bio, links_avatar, links_verified ON settings
+      WHEN OLD.links_name IS NOT NEW.links_name OR OLD.links_bio IS NOT NEW.links_bio OR OLD.links_avatar IS NOT NEW.links_avatar OR OLD.links_verified IS NOT NEW.links_verified
+      BEGIN UPDATE settings SET links_revision = links_revision + 1 WHERE id = 1; END`,
+    `DROP TRIGGER content_version_settings_update`,
+    ...contentVersionTriggers('settings', [...CONTENT_VERSION_COLUMNS.settings, 'links_verified']),
+  ] },
+  { version: 54, statements: [
+    `ALTER TABLE settings ADD COLUMN links_avatar_shape TEXT NOT NULL DEFAULT 'circle'`,
+    `ALTER TABLE settings ADD COLUMN links_avatar_fit TEXT NOT NULL DEFAULT 'cover'`,
+    `ALTER TABLE settings ADD COLUMN links_avatar_scale INTEGER NOT NULL DEFAULT 100`,
+    `DROP TRIGGER links_revision_profile`,
+    `CREATE TRIGGER links_revision_profile AFTER UPDATE OF links_name, links_bio, links_avatar, links_verified, links_avatar_shape, links_avatar_fit, links_avatar_scale ON settings
+      WHEN OLD.links_name IS NOT NEW.links_name OR OLD.links_bio IS NOT NEW.links_bio OR OLD.links_avatar IS NOT NEW.links_avatar OR OLD.links_verified IS NOT NEW.links_verified
+        OR OLD.links_avatar_shape IS NOT NEW.links_avatar_shape OR OLD.links_avatar_fit IS NOT NEW.links_avatar_fit OR OLD.links_avatar_scale IS NOT NEW.links_avatar_scale
+      BEGIN UPDATE settings SET links_revision = links_revision + 1 WHERE id = 1; END`,
+    `DROP TRIGGER content_version_settings_update`,
+    ...contentVersionTriggers('settings', [...CONTENT_VERSION_COLUMNS.settings, 'links_verified', 'links_avatar_shape', 'links_avatar_fit', 'links_avatar_scale']),
+  ] },
 ];
 
+// Current cache coverage; keep earlier migration inputs frozen for upgrade compatibility.
+export const CURRENT_CONTENT_VERSION_COLUMNS = { ...CONTENT_VERSION_COLUMNS, settings: [...CONTENT_VERSION_COLUMNS.settings, 'links_verified', 'links_avatar_shape', 'links_avatar_fit', 'links_avatar_scale'] };
+
 export const LATEST_VERSION = MIGRATIONS[MIGRATIONS.length - 1].version;

package/src/lib/repo/sql.ts

@@ -1,4 +1,5 @@
 import { AUTH } from '../auth/config';
+import { SyncStore } from '../sync/store';
 import { AuthStore } from '../auth/store';
 import { FormStore, formInsert, submissionInsert } from '../forms/store';
 import { GuestStore } from '../mobile/guest-store';
@@ -260,6 +261,7 @@ function safeSnippet(raw: unknown): string {
 }
 
 export class SqlRepository implements ContentRepository {
+  readonly sync: SyncStore;
   private driver!: SqlDriver;
   private ready: Promise<void>;
   readonly auth: AuthStore;
@@ -274,6 +276,7 @@ export class SqlRepository implements ContentRepository {
 
   constructor(driver: SqlDriver | (() => Promise<SqlDriver>)) {
     this.ready = this.init(driver);
+    this.sync = new SyncStore(async () => { await this.ready; return this.driver; });
     this.forms = new FormStore(async () => { await this.ready; return this.driver; });
     this.guests = new GuestStore(async () => { await this.ready; return this.driver; });
     this.live = new LiveStore(async () => { await this.ready; return this.driver; });
@@ -1990,7 +1993,8 @@ export class SqlRepository implements ContentRepository {
     const r = await this.first('SELECT * FROM settings WHERE id = 1');
     return Settings.parse({
       siteTitle: r?.site_title ?? 'My Site', tagline: r?.tagline ?? '', footerText: r?.footer_text ?? '',
-      linksName: r?.links_name ?? '', linksBio: r?.links_bio ?? '', linksAvatar: r?.links_avatar ?? '',
+      linksName: r?.links_name ?? '', linksBio: r?.links_bio ?? '', linksAvatar: r?.links_avatar ?? '', linksVerified: Boolean(r?.links_verified),
+      linksAvatarShape: r?.links_avatar_shape ?? 'circle', linksAvatarFit: r?.links_avatar_fit ?? 'cover', linksAvatarScale: Number(r?.links_avatar_scale ?? 100),
       activeTheme: r?.active_theme ?? '', designOverrides: JSON.parse(String(r?.design_overrides ?? '{}')),
       sectionPages: JSON.parse(String(r?.section_pages ?? '{}')), designRevision: Number(r?.design_revision ?? 0),
       siteLogo: r?.site_logo ?? '',
@@ -2032,7 +2036,8 @@ export class SqlRepository implements ContentRepository {
   }
   private settingsStatement(data: Partial<Settings>): SqlStatement | undefined {
     const columns: Record<string, string> = {
-      siteTitle:'site_title', tagline:'tagline', footerText:'footer_text', linksName:'links_name', linksBio:'links_bio', linksAvatar:'links_avatar',
+      siteTitle:'site_title', tagline:'tagline', footerText:'footer_text', linksName:'links_name', linksBio:'links_bio', linksAvatar:'links_avatar', linksVerified:'links_verified',
+      linksAvatarShape:'links_avatar_shape', linksAvatarFit:'links_avatar_fit', linksAvatarScale:'links_avatar_scale',
       activeTheme:'active_theme', designOverrides:'design_overrides', sectionPages:'section_pages', siteLogo:'site_logo', siteLogoDark:'site_logo_dark', siteUrl:'site_url', siteFavicon:'site_favicon', siteCover:'site_cover',
       announcement:'announcement', analytics:'analytics', headCode:'head_code', footerCode:'footer_code', timezone:'timezone', locale:'locale',
       draftsApiKey:'drafts_api_key', draftsAllowedOrigins:'drafts_allowed_origins', draftDesign:'draft_design', ai:'ai', agent:'agent', live:'live', push:'push', calendar:'calendar', mobileAccess:'mobile_access', monitoring:'monitoring',
@@ -2042,7 +2047,7 @@ export class SqlRepository implements ContentRepository {
     if (!entries.length) return;
     const design = entries.some(([k]) => ['activeTheme','designOverrides','sectionPages','siteLogo','siteLogoDark','siteFavicon','siteCover','draftDesign'].includes(k));
     return { sql: `UPDATE settings SET ${entries.map(([k]) => `${columns[k]} = ?`).join(', ')}${design ? ', design_revision = design_revision + 1' : ''} WHERE id = 1`,
-      args: entries.map(([k,v]) => jsonKeys.has(k) && v !== null ? JSON.stringify(v) : v) };
+      args: entries.map(([k,v]) => jsonKeys.has(k) && v !== null ? JSON.stringify(v) : typeof v === 'boolean' ? Number(v) : v) };
   }
   private async designWrite(expected: number, actor: string, action: string, statements: SqlStatement[]) {
     try {

package/src/lib/repo/types.ts

@@ -1,4 +1,5 @@
 import { AuthStore } from '../auth/store';
+import type { SyncStore } from '../sync/store';
 import type { FormStore } from '../forms/store';
 import type { BackupStore } from '../backup/store';
 import type { GuestStore } from '../mobile/guest-store';
@@ -53,6 +54,7 @@ export type EventUpdate = Partial<
 // The single contract both backends implement. The app only ever imports
 // this — never a concrete adapter.
 export interface ContentRepository {
+  readonly sync: SyncStore;
   readonly auth: AuthStore;
   readonly email: EmailStore;
   readonly forms: FormStore;
@@ -241,7 +243,7 @@ export interface ContentRepository {
    * in place, other items are added, everything else is removed; `profile`
    * (links name/bio/avatar) saves in the same batch.
    */
-  replaceLinks(expectedRevision: number, items: (Pick<Link, 'kind' | 'label' | 'url' | 'icon' | 'html' | 'meta'> & { keep?: string })[], profile?: Partial<Pick<Settings, 'linksName' | 'linksBio' | 'linksAvatar'>>): Promise<void>;
+  replaceLinks(expectedRevision: number, items: (Pick<Link, 'kind' | 'label' | 'url' | 'icon' | 'html' | 'meta'> & { keep?: string })[], profile?: Partial<Pick<Settings, 'linksName' | 'linksBio' | 'linksAvatar' | 'linksVerified' | 'linksAvatarShape' | 'linksAvatarFit' | 'linksAvatarScale'>>): Promise<void>;
   trackClick(id: string): Promise<string | null>; // returns url to redirect to
 
   // tags — registry of tag entities; posts store tag names, this table adds

package/src/lib/schema.ts

@@ -1,3 +1,4 @@
+import { safeEventImageUrl } from './calendar/images';
 import { LiveConfig } from './live/types';
 import { PushSettings } from './push/types';
 import { SectionPages } from '../theme-sdk/contract.mjs';
@@ -513,8 +514,12 @@ export const ApprovalRules = z.object({
 });
 export type ApprovalRules = z.infer<typeof ApprovalRules>;
 
+export const EventImageUrl = z.string().trim().max(2000).refine((value) => !value || Boolean(safeEventImageUrl(value)), 'Choose an image or use an http(s) URL or site-relative image path.');
+
 // Site-wide calendar preferences (Calendar settings → Defaults / Bookings)
 export const CalendarSettings = z.object({
+  // Display-only fallback: event covers remain empty until an image is explicitly chosen.
+  eventFallbackImage: EventImageUrl.default(''),
   // first column of every month grid: 0 = Sunday, 1 = Monday
   weekStart: z.union([z.literal(0), z.literal(1)]).default(0),
   // calendar new events land in (quick add, New event); '' = none
@@ -637,6 +642,7 @@ export const API_SCOPES = [
   'bookings:read', 'bookings:write',
   'resources:read', 'resources:write',
   'design:read', 'design:write-draft', 'design:publish', 'media:read', 'media:write',
+  'sync:read', 'sync:write', 'sync:publish',
 ] as const;
 export const ApiScope = z.enum(API_SCOPES);
 export type ApiScope = z.infer<typeof ApiScope>;
@@ -700,6 +706,10 @@ export function normalizeRedirectPath(input: string): string {
   return p;
 }
 
+export const LinksAvatarShape = z.enum(['circle', 'square']);
+export const LinksAvatarFit = z.enum(['cover', 'contain']);
+export const LinksAvatarScale = z.number().int().min(25).max(200);
+
 export const Settings = z.object({
   live: LiveConfig.default({}),
   calendar: CalendarSettings.default({}),
@@ -715,6 +725,10 @@ export const Settings = z.object({
   linksName: z.string().default(''),
   linksBio: z.string().default(''),
   linksAvatar: z.string().default(''),
+  linksAvatarShape: LinksAvatarShape.default('circle'),
+  linksAvatarFit: LinksAvatarFit.default('cover'),
+  linksAvatarScale: LinksAvatarScale.default(100),
+  linksVerified: z.boolean().default(false),
   // theme engine: which src/themes/ folder is active, plus sparse token
   // overrides from the Design screen layered on top of the theme's defaults
   activeTheme: z.string().default(''),

package/src/lib/sync/auth.ts

@@ -0,0 +1,24 @@
+import { ApiError } from "../api";
+import { hashAgentKey } from "../ai-config";
+import type { ContentRepository } from "../repo/types";
+export const SYNC_SCOPES = ["sync:read", "sync:write", "sync:publish"] as const;
+export async function syncIdentity(
+  request: Request,
+  repo: ContentRepository,
+  required: readonly string[],
+) {
+  const origin = request.headers.get("origin");
+  if (
+    request.headers.get("sec-fetch-site") === "cross-site" ||
+    (origin && origin !== new URL(request.url).origin)
+  )
+    throw new ApiError(403, "Cross-origin sync requests are not allowed.");
+  const header = request.headers.get("authorization") ?? "";
+  if (!header.startsWith("Bearer "))
+    throw new ApiError(401, "Use a scoped sync key.");
+  const key = await repo.findApiKeyByHash(hashAgentKey(header.slice(7)));
+  if (!key) throw new ApiError(401, "Invalid sync key.");
+  if (required.some((s) => !key.scopes.includes(s as any)))
+    throw new ApiError(403, `Required scopes: ${required.join(", ")}`);
+  return { actor: `key:${key.id}`, scopes: key.scopes };
+}