@acms-subir/core 0.3.17 → 0.3.18

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @acms-subir/core
 
+## 0.3.18
+
+### Patch Changes
+
+- 003a885: Improve links profile customization with photo upload, name and handle fields, an optional verification badge, circle or square avatars, and image fit and scale controls. Clarify that saving links publishes their changes.
+
+  Add configurable calendar fallback images and upcoming-event image, layout, location, and summary controls, including agent discovery and editing support. Extend client types for the profile settings.
+
+  Add native public-page view transitions with reduced-motion support. Separate admin page sections with alternating surfaces and clearer spacing, and move section deletion into a distinct action area.
+
 ## 0.3.17
 
 ### Patch Changes

package/cli/migrations.generated.mjs

@@ -1031,8 +1031,30 @@ var MIGRATIONS = [
     `INSERT INTO backup_state (id) VALUES (1)`
   ] },
   ROLES_MIGRATION,
-  SYNC_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"])
+  ] }
 ];
+var CURRENT_CONTENT_VERSION_COLUMNS = { ...CONTENT_VERSION_COLUMNS, settings: [...CONTENT_VERSION_COLUMNS.settings, "links_verified", "links_avatar_shape", "links_avatar_fit", "links_avatar_scale"] };
 var LATEST_VERSION = MIGRATIONS[MIGRATIONS.length - 1].version;
 
 // src/lib/repo/migrate-runner.ts

package/package.json

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

package/section-library/upcoming-events/UpcomingEvents.astro

@@ -1,9 +1,12 @@
 ---
+import { eventImage } from '@acms-subir/core/theme';
 import type { SectionProps, EventItem, LinkValue } from '@acms-subir/core/theme';
-interface Data { heading: string; intro: string; events: EventItem[]; more: LinkValue; empty: string }
-const { data, variant } = Astro.props as SectionProps<Data>;
+interface Data { heading: string; intro: string; events: EventItem[]; more: LinkValue; empty: string; fallbackImage: string; showImages: boolean; imageRatio: string; imageFit: string; showLocation: boolean; showSummary: boolean }
+const { data, variant, settings } = Astro.props as SectionProps<Data>;
+const ratio = ({ landscape: '16 / 9', square: '1', portrait: '3 / 4' } as Record<string, string>)[data.imageRatio] || '16 / 9';
+const fit = data.imageFit === 'contain' ? 'contain' : 'cover';
 ---
-<div class:list={['upev', `is-${variant}`]}>
+<div style={`--event-image-ratio:${ratio};--event-image-fit:${fit}`} class:list={['upev', `is-${variant}`]}>
   <header class="upev-head">
     <div>
       <h2>{data.heading}</h2>
@@ -13,18 +16,22 @@ const { data, variant } = Astro.props as SectionProps<Data>;
   </header>
   {data.events.length === 0 ? <p class="upev-empty">{data.empty}</p> : (
     <ol class="upev-list">
-      {data.events.map((e) => (
-        <li class:list={['upev-item', { 'is-cancelled': e.cancelled }]}>
-          {variant === 'cards' && e.image
-            ? <a class="upev-media" href={e.url} tabindex="-1" aria-hidden="true"><img src={e.image} alt="" loading="lazy" /></a>
-            : <span class="upev-date" aria-hidden="true"><b>{e.day}</b>{e.month}</span>}
-          <div class="upev-body">
-            <span class="upev-when">{e.cancelled ? 'Cancelled · ' : ''}{e.when}</span>
-            <h3 class="upev-title"><a href={e.url}>{e.title}</a></h3>
-            {e.location && <span class="upev-loc">{e.location}</span>}
-          </div>
-        </li>
-      ))}
+      {data.events.map((e) => {
+        const image = eventImage({ cover: e.image, coverAlt: e.imageAlt }, settings, data.fallbackImage);
+        return (
+          <li class:list={['upev-item', { 'is-cancelled': e.cancelled }]}>
+            {data.showImages !== false && image.src
+              ? <a class="upev-media" href={e.url} tabindex="-1" aria-hidden="true"><img src={image.src} alt="" loading="lazy" /></a>
+              : <span class="upev-date" aria-hidden="true"><b>{e.day}</b>{e.month}</span>}
+            <div class="upev-body">
+              <span class="upev-when">{e.cancelled ? 'Cancelled · ' : ''}{e.when}</span>
+              <h3 class="upev-title"><a href={e.url}>{e.title}</a></h3>
+              {data.showSummary && e.summary && <p class="upev-summary">{e.summary}</p>}
+              {data.showLocation !== false && e.location && <span class="upev-loc">{e.location}</span>}
+            </div>
+          </li>
+        );
+      })}
     </ol>
   )}
 </div>
@@ -40,8 +47,10 @@ const { data, variant } = Astro.props as SectionProps<Data>;
   .upev-item { display: flex; gap: 1rem; align-items: flex-start; }
   .is-cards .upev-item { flex-direction: column; padding: 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
   .is-list .upev-item { padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
-  .upev-media { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-sm); overflow: hidden; background: var(--soft); }
-  .upev-media img { width: 100%; height: 100%; object-fit: cover; }
+  .upev-media { display: block; width: 100%; aspect-ratio: var(--event-image-ratio); border-radius: var(--r-sm); overflow: hidden; background: var(--soft); }
+  .upev-media img { width: 100%; height: 100%; object-fit: var(--event-image-fit); }
+  .is-list .upev-media { width: 6rem; flex: 0 0 6rem; }
+  .upev-summary { margin: 0.4rem 0 0; color: var(--muted); }
   .upev-date { flex-shrink: 0; display: grid; place-items: center; width: 3.4rem; padding: 0.45rem 0; border-radius: var(--r-sm); background: var(--ink); color: var(--bg); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; line-height: 1.2; }
   .upev-date b { font-size: 1.35rem; letter-spacing: 0; }
   .upev-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }

package/section-library/upcoming-events/section.json

@@ -40,6 +40,47 @@
         "label": "Text when nothing is scheduled",
         "type": "text",
         "default": "Nothing scheduled right now. Check back soon."
+      },
+      "fallbackImage": {
+        "label": "Fallback event image",
+        "type": "image",
+        "default": "",
+        "help": "Used only when an event has no image. Leave empty to use the fallback in Calendar settings."
+      },
+      "showImages": {
+        "label": "Show event images",
+        "type": "toggle",
+        "default": true
+      },
+      "imageRatio": {
+        "label": "Image proportions",
+        "type": "select",
+        "options": [
+          "landscape",
+          "square",
+          "portrait"
+        ],
+        "default": "landscape"
+      },
+      "imageFit": {
+        "label": "Image fit",
+        "type": "select",
+        "options": [
+          "cover",
+          "contain"
+        ],
+        "default": "cover",
+        "help": "Cover fills the frame; contain shows the whole image."
+      },
+      "showLocation": {
+        "label": "Show event location",
+        "type": "toggle",
+        "default": true
+      },
+      "showSummary": {
+        "label": "Show event summary",
+        "type": "toggle",
+        "default": false
       }
     },
     "category": "Events & times"

package/src/actions/index.ts

@@ -10,7 +10,7 @@ import { getMediaStore } from '../lib/media/store';
 import { validateRequestSession } from '../lib/auth/request';
 import { accessFor } from '../lib/permissions/access';
 import { deniedMessage, type Permission } from '../lib/permissions/catalog';
-import { DocTranslations, LinkKind, parseConfig, slugify, widgetTypes, type WidgetType } from '../lib/schema';
+import { DocTranslations, LinksAvatarShape, LinksAvatarFit, LinksAvatarScale, LinkKind, parseConfig, slugify, widgetTypes, type WidgetType } from '../lib/schema';
 import { env } from '../lib/env';
 import { CONTENT, collectionUrl } from '../lib/content';
 import { invalidateRedirectCache } from '../middleware';
@@ -489,6 +489,10 @@ export const server = {
         linksName: z.string().optional(),
         linksBio: z.string().optional(),
         linksAvatar: z.string().optional(),
+        linksAvatarShape: LinksAvatarShape.optional(),
+        linksAvatarFit: LinksAvatarFit.optional(),
+        linksAvatarScale: LinksAvatarScale.optional(),
+        linksVerified: z.boolean().optional(),
         activeTheme: z.string().optional(),
         designOverrides: z.record(z.any()).optional(),
         siteLogo: z.string().optional(),

package/src/components/CalendarFallbackImage.tsx

@@ -0,0 +1,18 @@
+import { useState } from 'react';
+import { ImagePicker } from './editor/ImagePicker';
+
+export default function CalendarFallbackImage({ value, unsplashEnabled }: { value: string; unsplashEnabled: boolean }) {
+  const [image, setImage] = useState(value);
+  const [open, setOpen] = useState(false);
+  return (
+    <div>
+      <input type="hidden" name="eventFallbackImage" value={image} />
+      {image && <img src={image} alt="Selected fallback event image" style={{ display: 'block', width: '100%', maxWidth: 320, aspectRatio: '16 / 9', objectFit: 'cover', borderRadius: 8, marginBottom: 12 }} />}
+      <div className="row-actions">
+        <button type="button" className="btn" onClick={() => setOpen(true)}>{image ? 'Change fallback image' : 'Choose fallback image'}</button>
+        {image && <button type="button" className="btn ghost" onClick={() => setImage('')}>Remove image</button>}
+      </div>
+      <ImagePicker open={open} unsplashEnabled={unsplashEnabled} onClose={() => setOpen(false)} onSelect={(picked) => { setImage(picked.src); setOpen(false); }} />
+    </div>
+  );
+}

package/src/components/EventPage.astro

@@ -9,6 +9,7 @@ import { addToCalendarLinks, eventTimeZone, formatOccurrence, safeColor, type Oc
 import { describeRepeat } from '../lib/calendar/rrule';
 import { eventCardHtml, safeHref } from '../lib/calendar/cards';
 import { siteLocale } from '../lib/dates';
+import { eventImage } from '../lib/calendar/images';
 import { directionsUrl, mapAttribution, MAP_HEIGHT, MAP_WIDTH } from '../lib/maps/service';
 
 interface Props {
@@ -24,6 +25,7 @@ interface Props {
   rsvp?: { going: number; left: number | null; maxSeats: number; error: string; open: boolean; formHtml?: string; fieldsHtml?: string; values?: { name: string; email: string; seats: string } } | null;
 }
 const { event: e, occurrence: o, settings, calendars, html, upcoming, origin, preview = false, rsvp = null } = Astro.props;
+const image = eventImage(e, settings);
 const tz = eventTimeZone(e, settings);
 const locale = siteLocale(settings);
 const f = formatOccurrence(o, tz, locale);
@@ -61,8 +63,8 @@ const online = /zoom\.us|meet\.google|teams\.microsoft|webex|whereby|jit\.si/i.t
 
 <article class={`pc-ev-page${e.cancelled ? ' is-cancelled' : ''}`}>
   {preview && <p class="pc-ev-preview">Preview — only you can see this {e.status === 'published' ? 'version' : 'draft'}.</p>}
-  {e.cover && (
-    <figure class="pc-ev-hero"><img src={e.cover} alt={e.coverAlt} /></figure>
+  {image.src && (
+    <figure class="pc-ev-hero"><img src={image.src} alt={image.alt} /></figure>
   )}
   <div class="pc-ev-layout">
     <div class="pc-ev-main">

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

@@ -634,6 +634,30 @@ export const MIGRATIONS: Migration[] = [
   ] },
   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

@@ -1993,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 ?? '',
@@ -2035,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',
@@ -2045,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

@@ -243,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
@@ -701,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({}),
@@ -716,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/pages/admin/calendar/settings.astro

@@ -1,8 +1,11 @@
 ---
 import Admin from '../../../layouts/Admin.astro';
+import CalendarFallbackImage from '../../../components/CalendarFallbackImage';
+import { env } from '../../../lib/env';
+import '../../../styles/editor.css';
 import Modal from '../../../components/Modal.astro';
 import { getRepo } from '../../../lib/repo';
-import { ApprovalRules, slugify, type ApprovalMode, type CalendarVisibility } from '../../../lib/schema';
+import { EventImageUrl, ApprovalRules, slugify, type ApprovalMode, type CalendarVisibility } from '../../../lib/schema';
 import { CALENDAR, bookingsEnabled, calendarFeedUrl, calendarPageUrl } from '../../../lib/calendar/config';
 import { safeColor } from '../../../lib/calendar/events';
 import { normalizeCalendarSrc } from '../../../lib/calendar/src';
@@ -54,6 +57,12 @@ if (Astro.request.method === 'POST') {
   const color = safeColor(String(form.get('color') || '#4f46e5'));
   const description = String(form.get('description') || '').slice(0, 1000);
 
+  if (op === 'event-images') {
+    const image = EventImageUrl.safeParse(form.get('eventFallbackImage'));
+    if (!image.success) return back(image.error.issues[0].message, '#event-images');
+    await repo.updateSettings({ calendar: { ...settings.calendar, eventFallbackImage: image.data } });
+    return back('Event fallback image saved.', '#event-images');
+  }
   if (op === 'defaults') {
     const defaultCalendarId = String(form.get('defaultCalendarId') || '');
     const ok = !defaultCalendarId || (await repo.getCalendar(defaultCalendarId))?.kind === 'native';
@@ -188,7 +197,7 @@ const I = {
   pin: 'M12 22s7-7 7-12a7 7 0 0 0-14 0c0 5 7 12 7 12zM12 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z',
 };
 const sections = [
-  ['calendars', 'Calendars'], ['places', 'Places'], ['subscribed', 'Subscribed calendars'], ['share', 'Share links'],
+  ['calendars', 'Calendars'], ['event-images', 'Event images'], ['places', 'Places'], ['subscribed', 'Subscribed calendars'], ['share', 'Share links'],
   ...(bookingsEnabled() ? [['bookings', 'Bookings']] : []), ['defaults', 'Defaults'],
 ] as const;
 ---
@@ -242,6 +251,16 @@ const sections = [
         ))}
       </section>
 
+      <section class="cs-sect" id="event-images">
+        <header><div><h2>Event images</h2><p>Choose a fallback for events without their own image. Used on event cards, event pages, and Upcoming events sections.</p></div></header>
+        <form method="post">
+          <input type="hidden" name="op" value="event-images" />
+          <CalendarFallbackImage client:load value={settings.calendar.eventFallbackImage} unsplashEnabled={Boolean(env('UNSPLASH_ACCESS_KEY'))} />
+          <p class="hint">An event’s own image takes priority. Upcoming events sections can choose a different fallback in Design → Pages. Removing the fallback restores date tiles on cards.</p>
+          <button class="btn primary" type="submit">Save event image</button>
+        </form>
+      </section>
+
       <!-- Places -->
       <section class="cs-sect" id="places">
         <header>

package/src/pages/admin/links.astro

@@ -13,7 +13,7 @@ const unsplashEnabled = Boolean(env('UNSPLASH_ACCESS_KEY'));
 
 <Admin title="Links page" section="links">
   <div class="page-head">
-    <div><h1>Links page</h1><p class="sub">Your link-in-bio page at /links</p></div>
+    <div><h1>Links page</h1><p class="sub">Your link-in-bio page at /links. Save &amp; publish makes changes live immediately.</p></div>
     <a class="btn sm" href="/links" target="_blank" rel="noopener">View links page ↗</a>
   </div>
 

package/src/pages/api/agent/docs.ts

@@ -27,6 +27,8 @@ Connect a Streamable HTTP MCP client to ${url.origin}/api/mcp with the same Auth
 
 Themes define editable sections (hero, service times, upcoming events…) with typed fields. list_section_types returns the active theme's section types and field schemas; get_page_layout reads a page's layout; set_page_layout replaces it; update_section_data changes one section. The two write tools appear only when the owner turns on "Let the agent edit page sections". Field values: text/textarea/richtext/image/url/select/date (YYYY-MM-DD)/time (HH:MM) are strings, number is a number, toggle is a boolean, link is {"label","href"} (optionally "ref" like "page:<id>"), list is an array of row objects keyed by its sub-fields, source is {"calendar"|"collection"|"tag"|"resource", "limit"} and shows live content. All section writes stage into the design draft (review at the returned reviewUrl). update_section_data with publish:true publishes that one section when publishing is enabled.
 
+The library upcoming-events section supports cards/list variants and editable heading, intro, events (calendar and limit), more, empty, fallbackImage, showImages, imageRatio (landscape/square/portrait), imageFit (cover/contain), showLocation, and showSummary. Discover the active theme's schema first: copied or custom sections may expose different fields. Event images take priority over the section fallback, then the fallback chosen by the owner in Calendar settings → Event images. For a section override, call update_section_data with fallbackImage and the desired display fields; it follows the normal draft and publishing permissions.
+
 Updates replace only supplied fields; content replaces the body. Pages support title/content/seoTitle/seoDesc. Posts also support excerpt/tags. Create accepts slug and posts accept collection. Content length is limited to 100,000 characters; request size is limited to 300,000 bytes. List pagination defaults to 25 and allows up to 100.
 
 ## Tool schemas (publish_content requires permission)

package/src/pages/links.astro

@@ -1,5 +1,6 @@
 ---
 import LiveCard from '../components/LiveCard.astro';
+import { linksAvatarStyles } from '../lib/links-avatar';
 import Site from '../layouts/Site.astro';
 import { getRepo } from '../lib/repo';
 import { cleanEventName } from '../lib/analytics';
@@ -17,6 +18,7 @@ const socials = navItems
   .map((n) => ({ ...n, path: socialIconPath(n.url) }));
 
 // links page has its own identity; falls back to the site's until it's set
+const avatarStyles = linksAvatarStyles(settings);
 const profileName = settings.linksName || settings.siteTitle;
 const profileBio = settings.linksBio || settings.tagline;
 
@@ -94,8 +96,17 @@ const visible = links.filter((l) => {
 
 <Site title="Links" bare>
   <div class="links-page">
-    {settings.linksAvatar && <img class="links-avatar" src={settings.linksAvatar} alt={profileName} />}
-    <h1>{profileName}</h1>
+    {settings.linksAvatar && (
+      <div class="links-avatar" style={avatarStyles.frame}>
+        <img src={settings.linksAvatar} alt={profileName} style={avatarStyles.image} />
+      </div>
+    )}
+    <h1>{profileName}{settings.linksVerified && (
+      <svg class="links-verified" viewBox="0 0 24 24" role="img" aria-label="Verified">
+        <path fill="currentColor" d="m12 1 3 2.2 3.7.1 1.2 3.5L22 10l-1 3.6.3 3.7-3.4 1.5-2.4 2.8L12 20.5l-3.5 1.1-2.4-2.8-3.4-1.5.3-3.7L2 10l2.1-3.2 1.2-3.5 3.7-.1Z" />
+        <path d="m7.5 11.8 3 3 6-6" fill="none" stroke="var(--bg)" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    )}</h1>
     {profileBio && <p class="tagline">{profileBio}</p>}
     {socials.length > 0 && (
       <nav class="social-nav" aria-label="Social">

package/src/styles/admin.css

@@ -504,6 +504,7 @@ input.bare.mono { font-family: ui-monospace, 'SF Mono', monospace; font-size: 12
   display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 16px;
   background: var(--text); color: var(--bg); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); white-space: nowrap;
 }
+@media (max-width: 420px) { .lm-savebar { width: calc(100% - 24px); flex-wrap: wrap; justify-content: flex-end; } .lm-savebar > span { flex: 1 0 100%; } }
 .lm-savebar span { margin-right: 8px; font-weight: 600; font-size: 13px; }
 .lm-savebar .btn:not(.primary) { background: transparent; color: var(--bg); border-color: color-mix(in srgb, var(--bg) 30%, transparent); box-shadow: none; }
 .lm-url { flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 4px 10px; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@@ -518,44 +519,34 @@ input.bare.mono { font-family: ui-monospace, 'SF Mono', monospace; font-size: 12
   color: var(--text-2); background: var(--sel); border-radius: 5px; padding: 2px 7px;
 }
 
-/* profile card — reads like the links page header, edits in place */
-.lm-profile { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
-.lm-avatarwrap { position: relative; flex: 0 0 64px; }
-.lm-avatar {
-  width: 64px; height: 64px; border-radius: 50%; border: none; padding: 0;
-  display: grid; place-items: center; font-size: 20px; font-weight: 700; color: var(--text-2);
-  background: var(--sel);
-  user-select: none; cursor: pointer; position: relative; overflow: hidden; font-family: inherit;
-}
+/* Explicit profile controls stay visible on touch screens, too. */
+.lm-profile-card { padding: 20px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
+.lm-profile-card h2 { margin: 0 0 18px; font-size: 16px; }
+.lm-profile { display: flex; gap: 20px; align-items: flex-start; }
+.lm-avatarwrap { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 110px; }
+.lm-avatar { width: 80px; height: 80px; border-radius: 50%; border: 1px solid var(--line); padding: 0; display: grid; place-items: center; color: var(--text-2); background: var(--sel); cursor: pointer; position: relative; overflow: hidden; }
 .lm-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
-.lm-avatar-hint {
-  position: absolute; inset: auto 0 0 0; padding: 2px 0 3px;
-  font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
-  background: rgb(0 0 0 / 55%); color: #fff; opacity: 0; transition: opacity 0.12s;
-}
-.lm-avatar:hover .lm-avatar-hint { opacity: 1; }
-.lm-avatar-remove {
-  position: absolute; top: -4px; right: -4px; width: 18px; height: 18px;
-  border-radius: 50%; border: 1px solid var(--line-strong); background: var(--panel); color: var(--muted);
-  font-size: 9px; cursor: pointer; display: grid; place-items: center; padding: 0;
-  opacity: 0; transition: opacity 0.12s;
-}
-.lm-avatarwrap:hover .lm-avatar-remove { opacity: 1; }
-.lm-avatar-remove:hover { color: var(--red); border-color: var(--red); }
+.lm-photo-controls { min-width: 0; margin: 0 0 20px; padding: 0 0 16px; border: 0; border-bottom: 1px solid var(--line); }
+.lm-photo-controls legend { margin-bottom: 10px; padding: 0; font-size: 12px; font-weight: 600; }
+.lm-photo-options { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
+.lm-photo-options label { flex: 1 1 130px; min-width: 0; }
+.lm-photo-controls label { font-size: 12px; }
+.lm-photo-controls select { display: block; width: 100%; margin-top: 5px; }
+.lm-photo-controls output { margin-left: 6px; font-variant-numeric: tabular-nums; font-weight: 600; }
+.lm-photo-controls input[type='range'] { display: block; width: 100%; padding: 0; margin: 8px 0; accent-color: var(--accent); }
+.lm-photo-controls p { margin: 0 0 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }
 .lm-profile-fields { flex: 1; min-width: 0; }
-input.lm-profile-name {
-  display: block; width: 100%; background: none; border: 1px solid transparent; border-radius: var(--r-md);
-  color: var(--text); font-family: inherit; font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
-  padding: 3px 8px; margin-left: -8px; outline: none;
-}
-.lm-profile-bio {
-  display: block; width: 100%; background: none; border: 1px solid transparent; border-radius: var(--r-md);
-  color: var(--muted); font-family: inherit; font-size: 13px; line-height: 1.55;
-  padding: 3px 8px; margin: 1px 0 0 -8px; outline: none; resize: none; overflow: hidden;
-}
-.lm-profile-name::placeholder, .lm-profile-bio::placeholder { color: var(--faint); }
-input.lm-profile-name:hover, .lm-profile-bio:hover { border-color: var(--line); }
-input.lm-profile-name:focus, .lm-profile-bio:focus { border-color: var(--accent); background: var(--panel); }
+.lm-profile-fields > label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; }
+input.lm-profile-name, .lm-profile-bio { display: block; width: 100%; margin: 0 0 14px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); color: var(--text); font: inherit; }
+.lm-profile-bio { resize: vertical; min-height: 70px; }
+.lm-profile-fields > .lm-verification { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; cursor: pointer; }
+.lm-verification input { appearance: none; width: 34px; height: 20px; padding: 2px; margin: 0; flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--line-strong); cursor: pointer; }
+.lm-verification input::before { content: ''; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--panel); transition: transform 0.15s; }
+.lm-verification input:checked { background: var(--accent); border-color: var(--accent); }
+.lm-verification input:checked::before { transform: translateX(14px); }
+.lm-verification input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+.lm-verification small { display: block; margin-top: 3px; color: var(--muted); font-weight: 400; }
+@media (max-width: 540px) { .lm-profile { flex-direction: column; } .lm-avatarwrap { flex-basis: auto; } .lm-profile-fields { width: 100%; } }
 
 /* add-block picker */
 .lm-picker-head { display: flex; align-items: center; gap: 8px; }

package/src/styles/page-transitions.css

@@ -0,0 +1,27 @@
+/* Native same-origin document transitions. Both pages opt in through Site.astro;
+   the browser keeps normal navigation, history, forms and script lifecycles. */
+@view-transition {
+  navigation: auto;
+}
+
+/* Keep the browser's built-in crossfade; themes can adjust its pace. */
+@layer base {
+  ::view-transition-group(root),
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation-duration: var(--page-transition-duration, 180ms);
+    animation-timing-function: var(--page-transition-easing, ease-out);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  @view-transition {
+    navigation: none;
+  }
+
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+}

package/src/styles/site.css

@@ -488,10 +488,12 @@ li::marker { color: var(--muted); }
 /* ---- links page (/links) ------------------------------------------------------------ */
 .links-page { max-width: 480px; margin: 0 auto; text-align: center; padding: 48px 0 24px; }
 .links-page h1 { font-size: 26px; letter-spacing: -0.03em; margin: 0 0 6px; }
+.links-verified { display: inline-block; width: 0.8em; height: 0.8em; margin-left: 0.25em; vertical-align: -0.02em; color: var(--muted); }
 .links-avatar {
-  width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 16px;
+  width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--panel); margin: 0 auto 16px;
   box-shadow: 0 0 0 4px var(--panel), var(--sh-2);
 }
+.links-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; transform-origin: center; }
 .links-page .tagline { color: var(--muted); margin: 0 0 18px; white-space: pre-wrap; font-size: 15.5px; }
 .links-page .social-nav { justify-content: center; margin: 0 0 26px; }
 .link-btn {

package/src/styles/theme-editor.css

@@ -36,12 +36,25 @@
 .te-mode .seg > [role='radio'] { min-height: 28px; }
 .te-mode .seg > [role='radio']:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
 
-/* section list */
-.te-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); overflow: hidden; }
+/* section list: each section is its own card, with a gap, alternating surface and
+   a stronger frame when open, so it is clear where one section ends */
+.te-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
 .te-list.is-inactive { opacity: 0.72; }
-.te-none { padding: 14px 16px; margin: 0; }
-.te-sec + .te-sec { border-top: 1px solid var(--line); }
-.te-sec-head { display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 0; }
+.te-none { padding: 14px 16px; margin: 0; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
+.te-sec {
+  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel);
+  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
+}
+.te-sec:nth-child(even) { background: var(--panel-2); }
+.te-sec:hover { border-color: var(--line-strong); }
+.te-sec.is-hidden { border-style: dashed; }
+.te-sec.is-open {
+  margin: 8px 0; background: var(--panel); border-color: var(--line-strong);
+  box-shadow: var(--shadow-card);
+}
+.te-sec.is-open:first-child { margin-top: 0; }
+.te-sec.is-open:last-child { margin-bottom: 0; }
+.te-sec-head { display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 0; border-radius: calc(var(--r-lg) - 1px); }
 .te-sec-toggle {
   flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 40px;
   padding: 6px 8px 6px 12px; border: 0; background: none; font: inherit; color: var(--text); text-align: left;
@@ -51,7 +64,9 @@
 .te-sec-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
 .te-sec-toggle svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--muted); transition: transform 150ms ease-out; }
 .te-sec.is-open .te-sec-toggle svg { transform: rotate(90deg); }
-.te-sec.is-open .te-sec-head { background: var(--sel); }
+.te-sec.is-open .te-sec-head {
+  background: var(--sel); border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
+}
 .te-sec.is-open .te-sec-name { font-weight: 600; }
 .te-sec-name { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .te-sec-meta { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@@ -61,10 +76,28 @@
 .te-sec-actions .icon-btn:disabled { opacity: 0.35; cursor: default; background: none; }
 .te-sec-actions .icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
 .te svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
-.te-sec-body { padding: 14px 16px 12px; border-top: 1px solid var(--line); }
+.te-sec-body { padding: 16px 16px 14px; border-top: 1px solid var(--line-strong); }
 .te-sec-body textarea { resize: vertical; min-height: 84px; }
-.te-sec-foot { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
-.te-sec-foot .te-delete { margin-left: auto; }
+.te-sec-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--line); }
+.te-sec-foot:empty { display: none; }
+.te-sec-foot .te-publish-one { margin-left: auto; }
+.te-sec-foot .btn:focus-visible, .te-more > summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
+/* destructive action lives in its own tinted strip, apart from everyday tools */
+.te-sec-danger {
+  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 12px;
+  border: 1px solid color-mix(in srgb, var(--red) 28%, transparent); border-radius: var(--r-md);
+  background: var(--red-soft);
+}
+.te-sec-danger-text { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 1px; font-size: 12px; color: var(--text-2); }
+.te-sec-danger-text b { font-size: 12.5px; font-weight: 600; color: var(--red); }
+.te-sec-delete.btn {
+  flex-shrink: 0; color: var(--red); background: var(--panel);
+  border-color: color-mix(in srgb, var(--red) 45%, transparent);
+}
+.te-sec-delete.btn:hover { background: var(--red-soft); border-color: var(--red); color: var(--red); }
+.te-sec-delete.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 35%, transparent); }
+.te-sec-delete svg { width: 14px; height: 14px; }
+@media (prefers-reduced-motion: reduce) { .te-sec, .te-sec-toggle svg { transition: none; } }
 
 /* image field */
 .te-image { margin-bottom: 12px; }
@@ -152,8 +185,6 @@
 .te-preset-more summary { cursor: pointer; color: var(--muted); }
 .te-orphans, .te-sec-body .notice.warn { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; }
 .te-orphans .btn, .te-sec-body .notice.warn .btn { flex-shrink: 0; }
-.te-publish-one { order: -1; }
-.te-sec-foot .te-publish-one + * { margin-left: 0; }
 
 /* ---- field types ---- */
 .te fieldset.field { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
@@ -224,7 +255,11 @@
   .te-pagepick { flex-basis: 100%; }
   .te-mode { flex-wrap: wrap; }
   .te-sec-actions .icon-btn { width: 36px; height: 36px; }
-  .te-sec-foot .btn, .te-savebar .btn, .te-add .btn, .da-keys .btn, .da-token-row .btn { min-height: 36px; }
+  .te-sec-body { padding: 14px 12px 12px; }
+  .te-sec-foot .te-publish-one { margin-left: 0; flex-basis: 100%; justify-content: center; }
+  .te-sec-danger { flex-direction: column; align-items: stretch; gap: 10px; }
+  .te-sec-delete.btn { justify-content: center; }
+  .te-sec-foot .btn, .te-sec-delete.btn, .te-savebar .btn, .te-add .btn, .da-keys .btn, .da-token-row .btn { min-height: 36px; }
   .te-sec-body input, .te-sec-body select, .te-sec-body textarea,
   .te-pagebar select, .te-add select, .da input[type='text'], .da-token-row input { font-size: 16px; }
   .te-review li { grid-template-columns: minmax(0, 1fr) auto; }

package/src/theme-sdk/index.ts

@@ -1,6 +1,7 @@
 export { ThemeTokens, ThemeManifest, PostOptions, SectionDefinition, SectionInstance, SectionLayout, SectionPages, PagePreset, BUILTIN_SECTIONS, sectionDefinitions, sectionIssues, THEME_API_VERSION } from './contract.mjs';
 export { formatTime, formatDay } from './fields.mjs';
 export { upcomingEvents, calendarConfig, eventUrl } from './calendar';
+export { eventImage } from '../lib/calendar/images';
 export type { UpcomingEventsOptions, UpcomingEvent, ThemeCalendarConfig } from './calendar';
 export { CONTENT, postsIndexUrl, postUrl, tagUrl, collectionUrl } from '../lib/content';
 export { formatDate } from '../lib/dates';