ferst-core 0.7.9 → 0.7.11

package/cms/config.template.yml

@@ -1,227 +1,232 @@
-# Sveltia CMS — the content editor for a Ferst site. SINGLE SOURCE: this file lives
-# in ferst-core and is written to dist/admin/config.yml at build by `ferst-cms-config`,
-# so every client's collections are identical and always match the engine. The client
-# repo commits NO config.yml — it is a build product, so it can never drift by hand.
-#
-# The backend repo (owner/name), git-proxy origin, its /git api_root and this
-# deployment's branch are injected at build by ferst-cms-config.
-backend:
-  name: github
-  repo: __REPO__
-  branch: __BRANCH__
-  base_url: __BASE_URL__
-  auth_endpoint: auth
-  api_root: __API_ROOT__
-
-media_folder: public/uploads
-public_folder: /uploads
-
-collections:
-  - name: settings
-    label: Site settings
-    files:
-      - name: theme
-        label: Design tokens
-        file: src/content/themeSettings/index.json
-        icon: palette
-        description: "Edit your brand in the Theme Studio, where you preview changes live before publishing — open portal.ferst.co.uk, choose this site, then the Design tab. The fields here still work as a fallback."
-        fields:
-          - { name: brand, label: Brand colour, widget: color, default: '#0E4D4A', hint: Buttons, links, icons, highlights. }
-          - { name: ink, label: Ink colour, widget: color, default: '#0C2123', hint: Headings and body text. }
-          - { name: surface, label: Surface colour, widget: color, default: '#FFFFFF', hint: Page background. }
-          - name: fonts
-            label: Typography
-            widget: object
-            collapsed: false
-            fields:
-              - name: heading
-                label: Heading font
-                widget: select
-                required: false
-                default: ''
-                options: &fonts
-                  - { label: 'Default (theme)', value: '' }
-                  - { label: 'Poppins', value: 'Poppins, system-ui, sans-serif' }
-                  - { label: 'Inter', value: 'Inter, system-ui, sans-serif' }
-                  - { label: 'Playfair Display', value: "'Playfair Display', Georgia, serif" }
-                  - { label: 'Georgia', value: "Georgia, 'Times New Roman', serif" }
-                  - { label: 'System', value: 'system-ui, sans-serif' }
-              - { name: body, label: Body font, widget: select, required: false, default: '', options: *fonts }
-              - { name: display, label: Display font, widget: select, required: false, default: '', options: *fonts }
-          - { name: corners, label: Corners, widget: select, default: rounded, options: [{ label: Sharp, value: sharp }, { label: Rounded, value: rounded }, { label: Soft, value: soft }] }
-          - { name: elevation, label: Elevation, widget: select, default: raised, options: [{ label: Raised, value: raised }, { label: Flat, value: flat }] }
-          - { name: stroke, label: Card stroke, widget: select, default: 'on', options: [{ label: 'On', value: 'on' }, { label: 'Off', value: 'off' }] }
-          - { name: fields, label: Input fields, widget: select, default: boxed, options: [{ label: Boxed, value: boxed }, { label: Filled, value: filled }, { label: Underline, value: underline }] }
-          - { name: darkDepth, label: Dark depth, widget: number, value_type: float, min: 0.14, max: 0.34, step: 0.01, default: 0.21 }
-          - { name: darkChroma, label: Dark colour intensity, widget: number, value_type: float, min: 0, max: 0.15, step: 0.01, default: 0.05 }
-          - name: darkOverrides
-            label: Dark colour overrides (optional)
-            widget: object
-            collapsed: true
-            fields:
-              - { name: ground, label: Ground, widget: string, required: false }
-              - { name: text, label: Text, widget: string, required: false }
-              - { name: accent, label: Accent, widget: string, required: false }
-
-      - name: identity
-        label: Identity & contact
-        file: src/content/siteSettings/index.json
-        icon: info
-        fields:
-          - name: identity
-            label: Identity
-            widget: object
-            fields:
-              - { name: siteTitle, label: Site title, widget: string }
-              - { name: shortName, label: Short name, widget: string }
-              - { name: description, label: Description, widget: text }
-              - { name: location, label: Location, widget: string, required: false }
-          - name: contact
-            label: Contact
-            widget: object
-            fields:
-              - { name: phoneDisplay, label: Phone (display), widget: string, required: false }
-              - { name: phoneTel, label: 'Phone (tel: digits)', widget: string, required: false }
-              - { name: email, label: Email, widget: string, required: false }
-              - { name: facebookUrl, label: Facebook URL, widget: string, required: false }
-
-      - name: logos
-        label: Logos
-        file: src/content/logoSettings/index.json
-        icon: image
-        fields:
-          - { name: primaryLogoLight, label: Header logo (light), widget: image, required: false }
-          - { name: primaryLogoDark, label: Header logo (dark), widget: image, required: false }
-          - { name: secondaryLogoLight, label: Footer logo (light), widget: image, required: false }
-          - { name: secondaryLogoDark, label: Footer logo (dark), widget: image, required: false }
-
-      - name: navbar
-        label: Navigation
-        file: src/content/navbarSettings/index.json
-        icon: menu
-        fields:
-          - name: primary
-            label: Primary links
-            widget: list
-            fields:
-              - { name: label, label: Label, widget: string }
-              - { name: href, label: Link, widget: string }
-          - name: cta
-            label: Header button
-            widget: object
-            required: false
-            hint: The button at the right of the header (and in the footer). Leave as Contact → /contact/ unless your contact page lives elsewhere.
-            fields:
-              - { name: label, label: Label, widget: string, default: Contact }
-              - { name: href, label: Link, widget: string, default: /contact/ }
-
-      - name: footer
-        label: Footer
-        file: src/content/footerSettings/index.json
-        icon: table_rows
-        fields:
-          - name: footer
-            label: Footer links
-            widget: list
-            fields:
-              - { name: label, label: Label, widget: string }
-              - { name: href, label: Link, widget: string }
-          - name: groups
-            label: Footer columns
-            widget: list
-            required: false
-            hint: Headed columns for policies, safeguarding, documents and forms — keep the main menu short.
-            fields:
-              - { name: heading, label: Heading, widget: string }
-              - name: links
-                label: Links
-                widget: list
-                fields:
-                  - { name: label, label: Label, widget: string }
-                  - { name: href, label: Link, widget: string }
-
-      - name: calendar-settings
-        label: Calendar
-        file: src/content/calendarSettings/index.json
-        icon: calendar_today
-        fields:
-          - { name: title, label: Heading, widget: string, default: Calendar }
-          - { name: intro, label: Intro, widget: text, required: false }
-          - { name: embedUrl, label: Embed URL, widget: string, required: false }
-          - { name: publicUrl, label: Public link, widget: string, required: false }
-          - { name: height, label: Height (px), widget: number, default: 700, value_type: int, min: 200, max: 2000 }
-          - { name: provider, label: Provider name, widget: string, default: Google Calendar }
-          - { name: weekStart, label: Week starts on, widget: select, default: monday, options: [{ label: "Monday", value: monday }, { label: "Sunday", value: sunday }] }
-
-  - name: posts
-    label: Posts
-    label_singular: Post
-    folder: src/content/posts
-    create: true
-    slug: "{{slug}}"
-    extension: md
-    format: frontmatter
-    icon: article
-    summary: "{{title}} — {{date}}"
-    sortable_fields: [date, title]
-    fields:
-      - { name: title, label: Title, widget: string }
-      - { name: date, label: Date, widget: datetime, picker_utc: true }
-      - { name: summary, label: Summary, widget: text, required: false }
-      - name: tags
-        label: Tags
-        widget: relation
-        required: false
-        collection: tags
-        value_field: "{{slug}}"
-        display_fields: [label]
-        search_fields: [label]
-        multiple: true
-      - { name: heroImage, label: Hero image, widget: image, required: false }
-      - { name: attachment, label: Attachment (e.g. PDF), widget: file, required: false }
-      - { name: draft, label: Draft, widget: boolean, default: false, required: false }
-      - { name: body, label: Body, widget: markdown, required: false }
-
-  - name: tags
-    label: Tags
-    label_singular: Tag
-    folder: src/content/tags
-    create: true
-    slug: "{{slug}}"
-    extension: json
-    format: json
-    icon: label
-    identifier_field: label
-    fields:
-      - { name: label, label: Label, widget: string }
-      - { name: description, label: Description, widget: text, required: false }
-      - { name: hidden, label: Hidden, widget: boolean, default: false, required: false }
-
-  - name: pages
-    label: Pages
-    label_singular: Page
-    description: "See each page and request a change — our team makes it and sends it back for you to check. You don't edit the page layout here."
-    folder: src/content/pages
-    extension: json
-    format: json
-    icon: description
-    nested: { depth: 3, summary: "{{title}}" }
-    summary: "{{title}}"
-    identifier_field: title
-    fields:
-      - { name: title, label: Page title, widget: string }
-      - name: requests
-        label: Requested changes
-        label_singular: Request
-        widget: list
-        required: false
-        summary: "{{fields.text}}"
-        fields:
-          - { name: text, label: "What would you like changed?", widget: text }
-          - { name: status, label: Status, widget: select, default: open, options: [{ label: Open, value: open }, { label: Done, value: done }] }
-      - { name: description, label: SEO description, widget: hidden, required: false }
-      - { name: heroImage, widget: hidden, required: false }
-      - { name: align, widget: hidden, required: false }
-      - { name: templateId, widget: hidden, required: false }
-      - { name: draft, widget: hidden, required: false }
-      - { name: blocks, widget: hidden }
+# Sveltia CMS — the content editor for a Ferst site. SINGLE SOURCE: this file lives
+# in ferst-core and is written to dist/admin/config.yml at build by `ferst-cms-config`,
+# so every client's collections are identical and always match the engine. The client
+# repo commits NO config.yml — it is a build product, so it can never drift by hand.
+#
+# The backend repo (owner/name), git-proxy origin, its /git api_root and this
+# deployment's branch are injected at build by ferst-cms-config.
+backend:
+  name: github
+  repo: __REPO__
+  branch: __BRANCH__
+  base_url: __BASE_URL__
+  auth_endpoint: auth
+  api_root: __API_ROOT__
+
+media_folder: public/uploads
+public_folder: /uploads
+
+collections:
+  - name: settings
+    label: Site settings
+    files:
+      - name: theme
+        label: Design tokens
+        file: src/content/themeSettings/index.json
+        icon: palette
+        description: "Edit your brand in the Theme Studio, where you preview changes live before publishing — open portal.ferst.co.uk, choose this site, then the Design tab. The fields here still work as a fallback."
+        fields:
+          - { name: brand, label: Brand colour, widget: color, default: '#0E4D4A', hint: Buttons, links, icons, highlights. }
+          - { name: ink, label: Ink colour, widget: color, default: '#0C2123', hint: Headings and body text. }
+          - { name: surface, label: Surface colour, widget: color, default: '#FFFFFF', hint: Page background. }
+          - name: fonts
+            label: Typography
+            widget: object
+            collapsed: false
+            fields:
+              - name: heading
+                label: Heading font
+                widget: select
+                required: false
+                default: ''
+                options: &fonts
+                  - { label: 'Default (theme)', value: '' }
+                  - { label: 'Poppins', value: 'Poppins, system-ui, sans-serif' }
+                  - { label: 'Inter', value: 'Inter, system-ui, sans-serif' }
+                  - { label: 'Playfair Display', value: "'Playfair Display', Georgia, serif" }
+                  - { label: 'Georgia', value: "Georgia, 'Times New Roman', serif" }
+                  - { label: 'System', value: 'system-ui, sans-serif' }
+              - { name: body, label: Body font, widget: select, required: false, default: '', options: *fonts }
+              - { name: display, label: Display font, widget: select, required: false, default: '', options: *fonts }
+          - { name: corners, label: Corners, widget: select, default: rounded, options: [{ label: Sharp, value: sharp }, { label: Rounded, value: rounded }, { label: Soft, value: soft }] }
+          - { name: elevation, label: Elevation, widget: select, default: raised, options: [{ label: Raised, value: raised }, { label: Flat, value: flat }] }
+          - { name: stroke, label: Card stroke, widget: select, default: 'on', options: [{ label: 'On', value: 'on' }, { label: 'Off', value: 'off' }] }
+          - { name: fields, label: Input fields, widget: select, default: boxed, options: [{ label: Boxed, value: boxed }, { label: Filled, value: filled }, { label: Underline, value: underline }] }
+          - { name: darkDepth, label: Dark depth, widget: number, value_type: float, min: 0.14, max: 0.34, step: 0.01, default: 0.21 }
+          - { name: darkChroma, label: Dark colour intensity, widget: number, value_type: float, min: 0, max: 0.15, step: 0.01, default: 0.05 }
+          - name: darkOverrides
+            label: Dark colour overrides (optional)
+            widget: object
+            collapsed: true
+            fields:
+              - { name: ground, label: Ground, widget: string, required: false }
+              - { name: text, label: Text, widget: string, required: false }
+              - { name: accent, label: Accent, widget: string, required: false }
+
+      - name: identity
+        label: Identity & contact
+        file: src/content/siteSettings/index.json
+        icon: info
+        fields:
+          - name: identity
+            label: Identity
+            widget: object
+            fields:
+              - { name: siteTitle, label: Site title, widget: string }
+              - { name: shortName, label: Short name, widget: string }
+              - { name: description, label: Description, widget: text }
+              - { name: location, label: Location, widget: string, required: false }
+          - name: contact
+            label: Contact
+            widget: object
+            fields:
+              - { name: phoneDisplay, label: Phone (display), widget: string, required: false }
+              - { name: phoneTel, label: 'Phone (tel: digits)', widget: string, required: false }
+              - { name: email, label: Email, widget: string, required: false }
+              - { name: facebookUrl, label: Facebook URL, widget: string, required: false }
+
+      - name: logos
+        label: Logos
+        file: src/content/logoSettings/index.json
+        icon: image
+        fields:
+          - { name: primaryLogoLight, label: Header logo (light), widget: image, required: false }
+          - { name: primaryLogoDark, label: Header logo (dark), widget: image, required: false }
+          - { name: secondaryLogoLight, label: Footer logo (light), widget: image, required: false }
+          - { name: secondaryLogoDark, label: Footer logo (dark), widget: image, required: false }
+
+      - name: navbar
+        label: Navigation
+        file: src/content/navbarSettings/index.json
+        icon: menu
+        fields:
+          - name: primary
+            label: Primary links
+            widget: list
+            fields:
+              - { name: label, label: Label, widget: string }
+              - { name: href, label: Link, widget: string }
+          - name: cta
+            label: Header button
+            widget: object
+            required: false
+            hint: The button at the right of the header (and in the footer). Leave as Contact → /contact/ unless your contact page lives elsewhere.
+            fields:
+              - { name: label, label: Label, widget: string, default: Contact }
+              - { name: href, label: Link, widget: string, default: /contact/ }
+
+      - name: footer
+        label: Footer
+        file: src/content/footerSettings/index.json
+        icon: table_rows
+        fields:
+          - name: footer
+            label: Footer links
+            widget: list
+            fields:
+              - { name: label, label: Label, widget: string }
+              - { name: href, label: Link, widget: string }
+          - name: groups
+            label: Footer columns
+            widget: list
+            required: false
+            hint: Headed columns for policies, safeguarding, documents and forms — keep the main menu short.
+            fields:
+              - { name: heading, label: Heading, widget: string }
+              - name: links
+                label: Links
+                widget: list
+                fields:
+                  - { name: label, label: Label, widget: string }
+                  - { name: href, label: Link, widget: string }
+
+      - name: calendar-settings
+        label: Calendar
+        file: src/content/calendarSettings/index.json
+        icon: calendar_today
+        fields:
+          - { name: title, label: Heading, widget: string, default: Calendar }
+          - { name: intro, label: Intro, widget: text, required: false }
+          - { name: embedUrl, label: Embed URL, widget: string, required: false }
+          - { name: publicUrl, label: Public link, widget: string, required: false }
+          - { name: height, label: Height (px), widget: number, default: 700, value_type: int, min: 200, max: 2000 }
+          - { name: provider, label: Provider name, widget: string, default: Google Calendar }
+          - { name: weekStart, label: Week starts on, widget: select, default: monday, options: [{ label: "Monday", value: monday }, { label: "Sunday", value: sunday }] }
+
+  - name: posts
+    label: Posts
+    label_singular: Post
+    folder: src/content/posts
+    create: true
+    slug: "{{slug}}"
+    extension: md
+    format: frontmatter
+    icon: article
+    summary: "{{title}} — {{date}}"
+    sortable_fields: [date, title]
+    fields:
+      - { name: title, label: Title, widget: string }
+      - { name: date, label: Date, widget: datetime, picker_utc: true }
+      - { name: summary, label: Summary, widget: text, required: false }
+      - name: tags
+        label: Tags
+        widget: relation
+        required: false
+        collection: tags
+        value_field: "{{slug}}"
+        display_fields: [label]
+        search_fields: [label]
+        multiple: true
+      - { name: heroImage, label: Hero image, widget: image, required: false }
+      - { name: attachment, label: Attachment (e.g. PDF), widget: file, required: false }
+      - { name: draft, label: Draft, widget: boolean, default: false, required: false }
+      - { name: body, label: Body, widget: markdown, required: false }
+
+  - name: tags
+    label: Tags
+    label_singular: Tag
+    folder: src/content/tags
+    create: true
+    slug: "{{slug}}"
+    extension: json
+    format: json
+    icon: label
+    identifier_field: label
+    fields:
+      - { name: label, label: Label, widget: string }
+      - { name: description, label: Description, widget: text, required: false }
+      - { name: hidden, label: Hidden, widget: boolean, default: false, required: false }
+
+  - name: pages
+    label: Pages
+    label_singular: Page
+    description: "See each page and request a change — our team makes it and sends it back for you to check. You don't edit the page layout here."
+    folder: src/content/pages
+    extension: json
+    format: json
+    icon: description
+    nested: { depth: 3, summary: "{{title}}" }
+    summary: "{{title}}"
+    identifier_field: title
+    fields:
+      - { name: title, label: Page title, widget: string }
+      - name: requests
+        label: Requested changes
+        label_singular: Request
+        widget: list
+        required: false
+        summary: "{{fields.text}}"
+        fields:
+          - { name: text, label: "What would you like changed?", widget: text }
+          - { name: status, label: Status, widget: select, default: open, options: [{ label: Open, value: open }, { label: Done, value: done }] }
+          # Stamped by the platform when the request is raised with the team (who, when, the
+          # tracking number). Hidden, but kept on every save so a request is raised only once.
+          - { name: issue, widget: hidden, required: false }
+          - { name: by, widget: hidden, required: false }
+          - { name: at, widget: hidden, required: false }
+      - { name: description, label: SEO description, widget: hidden, required: false }
+      - { name: heroImage, widget: hidden, required: false }
+      - { name: align, widget: hidden, required: false }
+      - { name: templateId, widget: hidden, required: false }
+      - { name: draft, widget: hidden, required: false }
+      - { name: blocks, widget: hidden }

package/components/blocks/ImageBlock.astro

@@ -16,9 +16,10 @@ interface Props {
   shadow?: boolean;
   border?: boolean;
   ratio?: 'auto' | 'square' | '4/3' | '3/2' | '16/9' | '21/9';
+  focus?: string;
   reveal?: boolean;
 }
-const { src, alt = '', caption, radius = 'soft', shadow = false, border = false, ratio = 'auto', reveal = false } = Astro.props;
+const { src, alt = '', caption, radius = 'soft', shadow = false, border = false, ratio = 'auto', reveal = false, focus } = Astro.props;
 const ratioValue = ratio === 'auto' ? null : ratio === 'square' ? '1 / 1' : ratio.replace('/', ' / ');
 ---
 
@@ -34,7 +35,7 @@ const ratioValue = ratio === 'auto' ? null : ratio === 'square' ? '1 / 1' : rati
     alt={alt}
     loading="lazy"
     decoding="async"
-    style={ratioValue ? `aspect-ratio: ${ratioValue}` : undefined}
+    style={ratioValue ? `aspect-ratio: ${ratioValue}${focus ? `; object-position: ${focus}` : ''}` : undefined}
   />
   {caption && <figcaption>{caption}</figcaption>}
 </figure>

package/components/recipes/Bento.astro

@@ -15,7 +15,7 @@ interface Item {
   title: string;
   text?: string;
   href?: string;
-  image?: { src: string; alt?: string };
+  image?: { src: string; alt?: string; focus?: string };
 }
 interface Props {
   title?: string;
@@ -39,7 +39,7 @@ const headAlign = headingAlign ?? blockAlign ?? 'center';
   <div class="b-bento__grid">
     {items.map((item) => {
       const Tag = item.href ? 'a' : 'div';
-      const style = item.variant === 'image' && item.image ? `--bento-image: url('${item.image.src}')` : undefined;
+      const style = item.variant === 'image' && item.image ? `--bento-image: url('${item.image.src}')${item.image.focus ? `; --bento-focus: ${item.image.focus}` : ''}` : undefined;
       return (
         <Tag class="b-bento__item" data-size={item.size ?? 'sm'} data-variant={item.variant ?? 'surface'} href={item.href} style={style}>
           {item.icon && isIconKey(item.icon) && (
@@ -115,7 +115,7 @@ const headAlign = headingAlign ?? blockAlign ?? 'center';
     z-index: -1;
     background-image: linear-gradient(to top, rgba(8,10,18,0.82), rgba(8,10,18,0.15)), var(--bento-image);
     background-size: cover;
-    background-position: center;
+    background-position: center, var(--bento-focus, center);
   }
   a.b-bento__item:hover { transform: translateY(-3px); }
   a.b-bento__item[data-variant='surface']:hover { box-shadow: var(--shadow-lg); }

package/components/recipes/MediaCards.astro

@@ -14,7 +14,7 @@ import Heading from '../blocks/Heading.astro';
 
 import { inlineMarkdown, inlineMarkdownNoLinks } from '../../lib/inline-markdown';
 interface Card {
-  image?: { src: string; alt?: string };
+  image?: { src: string; alt?: string; focus?: string };
   icon?: string;
   title: string;
   meta?: string;
@@ -26,9 +26,10 @@ interface Props {
   title?: string;
   intro?: string;
   columns?: 2 | 3;
+  ratio?: '16/9' | '4/3' | '3/2' | '1/1' | '3/4';
   cards?: Card[];
 }
-const { title, intro, columns = 3, cards = [] } = Astro.props;
+const { title, intro, columns = 3, ratio = '16/9', cards = [] } = Astro.props;
 // Never reserve more columns than there are cards; `data-single` centres a lone one.
 const cols = Math.min(columns, Math.max(cards.length, 1)) as 1 | 2 | 3;
 ---
@@ -49,8 +50,8 @@ const cols = Math.min(columns, Math.max(cards.length, 1)) as 1 | 2 | 3;
       return (
       <article class:list={['b-media-cards__card', 'ferst-tile', 'ferst-tile--sm', card.href && 'is-link']}>
         {card.image && (
-          <div class="b-media-cards__media">
-            <img src={card.image.src} alt={card.image.alt ?? ''} loading="lazy" />
+          <div class="b-media-cards__media" data-ratio={ratio} style={`aspect-ratio: ${ratio.replace('/', ' / ')}`}>
+            <img src={card.image.src} alt={card.image.alt ?? ''} loading="lazy" style={card.image.focus ? `object-position: ${card.image.focus}` : undefined} />
           </div>
         )}
         <div class="b-media-cards__body">

package/components/recipes/MediaText.astro

@@ -1,88 +1,88 @@
----
-/**
- * MediaText — an image beside its text, on the start or end side; stacks (text, then image)
- * on a phone. The text takes prose formatting (paragraphs, lists, links); the image keeps
- * its own shape unless `ratio` sets one (cropped to fill). An optional button follows the
- * text.
- */
-import Heading from '../blocks/Heading.astro';
-import Button from '../Button.astro';
-import ProseParts from '../ProseParts.astro';
-
-interface Props {
-  title?: string;
-  text: string;
-  image: { src: string; alt?: string; caption?: string };
-  imageSide?: 'start' | 'end';
-  ratio?: 'auto' | '1/1' | '4/3' | '3/2' | '16/9';
-  cta?: { label: string; href: string };
-}
-const { title, text, image, imageSide = 'end', ratio = 'auto', cta } = Astro.props;
----
-
-<section class="b-mediatext" data-side={imageSide}>
-  <div class="b-mediatext__text">
-    {title && <Heading text={title} level={2} />}
-    <ProseParts text={text} />
-    {cta && <div class="b-mediatext__cta"><Button href={cta.href} variant="primary">{cta.label}</Button></div>}
-  </div>
-  <figure class="b-mediatext__media">
-    <img src={image.src} alt={image.alt ?? ''} loading="lazy" decoding="async" style={ratio !== 'auto' ? `aspect-ratio: ${ratio}; object-fit: cover` : undefined} />
-    {image.caption && <figcaption>{image.caption}</figcaption>}
-  </figure>
-</section>
-
-<style>
-  .b-mediatext {
-    display: grid;
-    gap: clamp(1.5rem, 4vw, 3rem);
-    align-items: center;
-    width: 100%;
-    max-width: 72rem;
-  }
-  @media (min-width: 48em) {
-    .b-mediatext {
-      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-    }
-    .b-mediatext[data-side='start'] .b-mediatext__media {
-      order: -1;
-    }
-  }
-  .b-mediatext__text {
-    display: flex;
-    flex-direction: column;
-    gap: 0.9rem;
-  }
-  .b-mediatext__text :global(p),
-  .b-mediatext__text :global(ul),
-  .b-mediatext__text :global(ol) {
-    margin: 0;
-    line-height: 1.7;
-  }
-  .b-mediatext__text :global(ul),
-  .b-mediatext__text :global(ol) {
-    padding-inline-start: 1.4em;
-  }
-  .b-mediatext__text :global(a:not(.btn)) {
-    color: var(--accent);
-    text-decoration: underline;
-    text-underline-offset: 0.15em;
-  }
-  .b-mediatext__cta {
-    margin-top: 0.4rem;
-  }
-  .b-mediatext__media {
-    margin: 0;
-  }
-  .b-mediatext__media img {
-    display: block;
-    width: 100%;
-    height: auto;
-    border-radius: var(--radius);
-  }
-  .b-mediatext__media figcaption {
-    margin-top: 0.5rem;
-    font-size: 0.875rem;
-    color: var(--muted);
-  }
-</style>
+---
+/**
+ * MediaText — an image beside its text, on the start or end side; stacks (text, then image)
+ * on a phone. The text takes prose formatting (paragraphs, lists, links); the image keeps
+ * its own shape unless `ratio` sets one (cropped to fill). An optional button follows the
+ * text.
+ */
+import Heading from '../blocks/Heading.astro';
+import Button from '../Button.astro';
+import ProseParts from '../ProseParts.astro';
+
+interface Props {
+  title?: string;
+  text: string;
+  image: { src: string; alt?: string; caption?: string; focus?: string };
+  imageSide?: 'start' | 'end';
+  ratio?: 'auto' | '1/1' | '4/3' | '3/2' | '16/9';
+  cta?: { label: string; href: string };
+}
+const { title, text, image, imageSide = 'end', ratio = 'auto', cta } = Astro.props;
+---
+
+<section class="b-mediatext" data-side={imageSide}>
+  <div class="b-mediatext__text">
+    {title && <Heading text={title} level={2} />}
+    <ProseParts text={text} />
+    {cta && <div class="b-mediatext__cta"><Button href={cta.href} variant="primary">{cta.label}</Button></div>}
+  </div>
+  <figure class="b-mediatext__media">
+    <img src={image.src} alt={image.alt ?? ''} loading="lazy" decoding="async" style={ratio !== 'auto' ? `aspect-ratio: ${ratio}; object-fit: cover${image.focus ? `; object-position: ${image.focus}` : ''}` : undefined} />
+    {image.caption && <figcaption>{image.caption}</figcaption>}
+  </figure>
+</section>
+
+<style>
+  .b-mediatext {
+    display: grid;
+    gap: clamp(1.5rem, 4vw, 3rem);
+    align-items: center;
+    width: 100%;
+    max-width: 72rem;
+  }
+  @media (min-width: 48em) {
+    .b-mediatext {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+    .b-mediatext[data-side='start'] .b-mediatext__media {
+      order: -1;
+    }
+  }
+  .b-mediatext__text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.9rem;
+  }
+  .b-mediatext__text :global(p),
+  .b-mediatext__text :global(ul),
+  .b-mediatext__text :global(ol) {
+    margin: 0;
+    line-height: 1.7;
+  }
+  .b-mediatext__text :global(ul),
+  .b-mediatext__text :global(ol) {
+    padding-inline-start: 1.4em;
+  }
+  .b-mediatext__text :global(a:not(.btn)) {
+    color: var(--accent);
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+  .b-mediatext__cta {
+    margin-top: 0.4rem;
+  }
+  .b-mediatext__media {
+    margin: 0;
+  }
+  .b-mediatext__media img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: var(--radius);
+  }
+  .b-mediatext__media figcaption {
+    margin-top: 0.5rem;
+    font-size: 0.875rem;
+    color: var(--muted);
+  }
+</style>

package/components/recipes/Tiles.astro

@@ -25,7 +25,7 @@ interface Tile {
   text?: string;
   href?: string;
   linkLabel?: string;
-  image?: { src: string; alt?: string };
+  image?: { src: string; alt?: string; focus?: string };
 }
 interface Props {
   title?: string;
@@ -59,7 +59,7 @@ const cols = Math.min(columns, Math.max(tiles.length, 1)) as 1 | 2 | 3 | 4;
       const plain = variant === 'image' && !!tile.image && !tile.title && !tile.text && !tile.eyebrow;
       const bg =
         variant === 'image' && tile.image && !plain
-          ? `--tile-image: url('${tile.image.src}')`
+          ? `--tile-image: url('${tile.image.src}')${tile.image.focus ? `; --tile-focus: ${tile.image.focus}` : ''}`
           : undefined;
       return (
         <Tag
@@ -166,7 +166,7 @@ const cols = Math.min(columns, Math.max(tiles.length, 1)) as 1 | 2 | 3 | 4;
     z-index: -1;
     background-image: linear-gradient(to top, rgba(10, 12, 20, 0.85), rgba(10, 12, 20, 0.15)), var(--tile-image);
     background-size: cover;
-    background-position: center;
+    background-position: center, var(--tile-focus, center);
   }
   /* A picture tile shows the whole image, whatever its shape: no scrim, no crop. */
   .b-tiles__grid[data-variant='image'] .b-tile[data-plain] {

package/content/blocks.ts

@@ -45,6 +45,15 @@ export const proseBlock = z.object({
   variant: z.enum(['body', 'lead']).default('body'),
 });
 
+/** Which part of an image stays in view when it's cropped to a shape: one or two positions,
+ *  keywords or percentages (`center 25%` keeps a face in a portrait, `top`, `left 20%`).
+ *  Positions only, so no other CSS can get in. Default `center`. */
+export const focusPosition = z
+  .string()
+  .regex(/^(?:left|center|right|top|bottom|\d{1,3}%)(?: (?:left|center|right|top|bottom|\d{1,3}%))?$/, 'focus is one or two of left / center / right / top / bottom / a percentage, e.g. "center 25%"');
+/** An image a block may crop to a shape, with the part to keep in view. */
+const croppedImage = z.object({ src: z.string(), alt: z.string().default(''), focus: focusPosition.optional() });
+
 export const imageBlock = z.object({
   type: z.literal('image'),
   enabled: z.boolean().default(true),
@@ -57,6 +66,8 @@ export const imageBlock = z.object({
   shadow: z.boolean().default(false),
   border: z.boolean().default(false),
   ratio: z.enum(['auto', 'square', '4/3', '3/2', '16/9', '21/9']).default('auto'),
+  /** Which part stays in view when `ratio` crops it. */
+  focus: focusPosition.optional(),
   /** Opt in to a soft clip-path reveal as the image scrolls into view
    *  (progressive: no motion under reduced-motion or unsupported browsers). */
   reveal: z.boolean().default(false),
@@ -155,10 +166,7 @@ export const heroBlock = z.object({
   fullBleed: z.boolean().default(false),
   /** Which part of the background image shows when it's cropped: one or two positions,
    *  keywords or percentages (e.g. `center 30%`, `top`, `left 20%`). Default `center`. */
-  focus: z
-    .string()
-    .regex(/^(?:left|center|right|top|bottom|\d{1,3}%)(?: (?:left|center|right|top|bottom|\d{1,3}%))?$/, 'focus is one or two of left / center / right / top / bottom / a percentage, e.g. "center 30%"')
-    .optional(),
+  focus: focusPosition.optional(),
   /** A `media` hero's background drifts more slowly than the page as it scrolls (any
    *  background: image, slides or video). Off on touch devices and under reduced motion. */
   parallax: z.boolean().default(false),
@@ -302,7 +310,7 @@ export const tilesBlock = z.object({
           href: z.string().optional(),
           /** The link cue on a linking tile ("Learn more" by default). */
           linkLabel: z.string().optional(),
-          image: z.object({ src: z.string(), alt: z.string().default('') }).optional(),
+          image: croppedImage.optional(),
         })
         .refine((t) => !!t.title || !!t.image, { message: 'A tile needs a title or an image', path: ['title'] })
     )
@@ -425,7 +433,7 @@ export const bentoBlock = z.object({
         title: z.string(),
         text: z.string().optional(),
         href: z.string().optional(),
-        image: z.object({ src: z.string(), alt: z.string().default('') }).optional(),
+        image: croppedImage.optional(),
       })
     )
     .default([]),
@@ -520,10 +528,12 @@ export const mediaCardsBlock = z.object({
   title: z.string().optional(),
   intro: z.string().optional(),
   columns: z.union([z.literal(2), z.literal(3)]).default(3),
+  /** The image shape: landscape 16:9 (default), 4:3, 3:2, square, or portrait 3:4 (people). */
+  ratio: z.enum(['16/9', '4/3', '3/2', '1/1', '3/4']).default('16/9'),
   cards: z
     .array(
       z.object({
-        image: z.object({ src: z.string(), alt: z.string().default('') }).optional(),
+        image: croppedImage.optional(),
         icon: iconName.optional(),
         title: z.string(),
         /** A short meta line shown as a pill (e.g. "Sundays 10:45 · Main hall"). */
@@ -702,7 +712,7 @@ export const mediaTextBlock = z.object({
   enabled: z.boolean().default(true),
   title: z.string().optional(),
   text: z.string(),
-  image: z.object({ src: z.string(), alt: z.string().default(''), caption: z.string().optional() }),
+  image: z.object({ src: z.string(), alt: z.string().default(''), caption: z.string().optional(), focus: focusPosition.optional() }),
   imageSide: z.enum(['start', 'end']).default('end'),
   ratio: z.enum(['auto', '1/1', '4/3', '3/2', '16/9']).default('auto'),
   cta: z.object({ label: z.string(), href: z.string() }).optional(),
@@ -929,8 +939,11 @@ export const pageSchema = z.object({
     .array(
       z.object({
         text: z.string(),
+        /** Stamped by the platform when the request becomes an issue in the site's repo:
+         *  when, who asked (from their session) and the issue number. */
         at: z.string().optional(),
         by: z.string().optional(),
+        issue: z.number().int().optional(),
         status: z.enum(['open', 'done']).default('open'),
       }),
     )

package/layouts/Base.astro

@@ -160,7 +160,9 @@ const metaDescription = description ?? identity.description;
             return;
           }
           if (url.protocol !== 'http:' && url.protocol !== 'https:') return; // skip mailto/tel/etc.
-          if (url.host === host) return; // same-site
+          // Same-site pages stay in the tab; a same-site document (a PDF leaflet, a form)
+          // opens in a new one, like an external link.
+          if (url.host === host && !/\.(?:pdf|docx?|xlsx?|pptx?)$/i.test(url.pathname)) return;
           if (!a.target) a.target = '_blank';
           const rel = new Set((a.getAttribute('rel') || '').split(/\s+/).filter(Boolean));
           rel.add('noopener');

package/lib/inline-markdown.ts

@@ -1,74 +1,79 @@
-/**
- * inlineMarkdown — render a *tiny*, safe subset of markdown from trusted editor/CMS
- * text: links `[label](href)`, bold `**text**`, italic `*text*` / `_text_`, and single
- * newlines → `<br>`.
- * Everything is HTML-escaped first, and only safe href schemes (http(s), root-
- * relative, mailto, tel, in-page #anchors) become links — an unsafe href renders
- * as literal text. The result is safe to drop into `set:html` for trusted content.
- *
- * This exists so recipes that show a line or two of editor copy (FAQ answers,
- * notices) can carry a link without a full markdown pipeline — and without the
- * `[text](url)` showing through as literal characters.
- */
-const ESCAPE: Record<string, string> = {
-  '&': '&amp;',
-  '<': '&lt;',
-  '>': '&gt;',
-  '"': '&quot;',
-  "'": '&#39;',
-};
-function escapeHtml(s: string): string {
-  return s.replace(/[&<>"']/g, (c) => ESCAPE[c]);
-}
-
-/** Only these href schemes are allowed to become real links. */
-const SAFE_HREF = /^(?:https?:\/\/|\/|mailto:|tel:|#)/i;
-
-const LINK_RE = /\[([^\]]+)\]\(([^)\s]+)\)/g;
-
-/** Bold, italic + single-newline breaks, applied to already-escaped text. Italic
- *  `*x*` / `_x_` must hug its text, and `_` only counts at word edges, so
- *  snake_case and a lone asterisk stay literal. */
-function inlineFormat(escaped: string): string {
-  return escaped
-    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
-    .replace(/(^|[^*\w])\*(?![\s*])([^*]*?[^\s*])\*(?!\*)/g, '$1<em>$2</em>')
-    .replace(/(^|[^\w])_(?![\s_])([^_]*?[^\s_])_(?!\w)/g, '$1<em>$2</em>')
-    .replace(/\n/g, '<br>');
-}
-
-/** Escaped text with single newlines → `<br>`, and no links: for text that already sits
- *  inside a link (a nested <a> is invalid). */
-export function textWithBreaks(text: string | undefined | null): string {
-  return text ? escapeHtml(text).replace(/\n/g, '<br>') : '';
-}
-
-/** Inline formatting (bold, italic, line breaks) WITHOUT links: `[label](href)` becomes
- *  its label. For text inside something that is already a link (a linked tile or card). */
-export function inlineMarkdownNoLinks(text: string | undefined | null): string {
-  return text ? inlineFormat(escapeHtml(text.replace(LINK_RE, '$1'))) : '';
-}
-
-export function inlineMarkdown(text: string | undefined | null): string {
-  if (!text) return '';
-  let out = '';
-  let last = 0;
-  let m: RegExpExecArray | null;
-  LINK_RE.lastIndex = 0;
-  while ((m = LINK_RE.exec(text))) {
-    out += inlineFormat(escapeHtml(text.slice(last, m.index)));
-    const label = inlineFormat(escapeHtml(m[1]));
-    const href = m[2];
-    if (SAFE_HREF.test(href)) {
-      out += `<a href="${escapeHtml(href)}">${label}</a>`;
-    } else {
-      out += inlineFormat(escapeHtml(m[0])); // unsafe scheme → keep literal
-    }
-    last = m.index + m[0].length;
-  }
-  out += inlineFormat(escapeHtml(text.slice(last)));
-  return out;
-}
+/**
+ * inlineMarkdown — render a *tiny*, safe subset of markdown from trusted editor/CMS
+ * text: links `[label](href)`, bold `**text**`, italic `*text*` / `_text_`, and single
+ * newlines → `<br>`.
+ * Everything is HTML-escaped first, and only safe href schemes (http(s), root-
+ * relative, mailto, tel, in-page #anchors) become links — an unsafe href renders
+ * as literal text. The result is safe to drop into `set:html` for trusted content.
+ *
+ * This exists so recipes that show a line or two of editor copy (FAQ answers,
+ * notices) can carry a link without a full markdown pipeline — and without the
+ * `[text](url)` showing through as literal characters.
+ */
+const ESCAPE: Record<string, string> = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#39;',
+};
+function escapeHtml(s: string): string {
+  return s.replace(/[&<>"']/g, (c) => ESCAPE[c]);
+}
+
+/** Only these href schemes are allowed to become real links. */
+const SAFE_HREF = /^(?:https?:\/\/|\/|mailto:|tel:|#)/i;
+
+const LINK_RE = /\[([^\]]+)\]\(([^)\s]+)\)/g;
+
+/** A link to a document (PDF, Word, Excel, PowerPoint) opens in a new tab, so a visitor
+ *  doesn't lose the site — as external links already do. */
+export const DOCUMENT_HREF = /\.(?:pdf|docx?|xlsx?|pptx?)(?:[?#]|$)/i;
+
+/** Bold, italic + single-newline breaks, applied to already-escaped text. Italic
+ *  `*x*` / `_x_` must hug its text, and `_` only counts at word edges, so
+ *  snake_case and a lone asterisk stay literal. */
+function inlineFormat(escaped: string): string {
+  return escaped
+    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+    .replace(/(^|[^*\w])\*(?![\s*])([^*]*?[^\s*])\*(?!\*)/g, '$1<em>$2</em>')
+    .replace(/(^|[^\w])_(?![\s_])([^_]*?[^\s_])_(?!\w)/g, '$1<em>$2</em>')
+    .replace(/\n/g, '<br>');
+}
+
+/** Escaped text with single newlines → `<br>`, and no links: for text that already sits
+ *  inside a link (a nested <a> is invalid). */
+export function textWithBreaks(text: string | undefined | null): string {
+  return text ? escapeHtml(text).replace(/\n/g, '<br>') : '';
+}
+
+/** Inline formatting (bold, italic, line breaks) WITHOUT links: `[label](href)` becomes
+ *  its label. For text inside something that is already a link (a linked tile or card). */
+export function inlineMarkdownNoLinks(text: string | undefined | null): string {
+  return text ? inlineFormat(escapeHtml(text.replace(LINK_RE, '$1'))) : '';
+}
+
+export function inlineMarkdown(text: string | undefined | null): string {
+  if (!text) return '';
+  let out = '';
+  let last = 0;
+  let m: RegExpExecArray | null;
+  LINK_RE.lastIndex = 0;
+  while ((m = LINK_RE.exec(text))) {
+    out += inlineFormat(escapeHtml(text.slice(last, m.index)));
+    const label = inlineFormat(escapeHtml(m[1]));
+    const href = m[2];
+    if (SAFE_HREF.test(href)) {
+      const newTab = DOCUMENT_HREF.test(href) ? ' target="_blank" rel="noopener"' : '';
+      out += `<a href="${escapeHtml(href)}"${newTab}>${label}</a>`;
+    } else {
+      out += inlineFormat(escapeHtml(m[0])); // unsafe scheme → keep literal
+    }
+    last = m.index + m[0].length;
+  }
+  out += inlineFormat(escapeHtml(text.slice(last)));
+  return out;
+}
 
 /** The words of formatted copy with the formatting gone (a link becomes its label): for
  *  places that must be plain text, like a page's meta description. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferst-core",
-  "version": "0.7.9",
+  "version": "0.7.11",
   "type": "module",
   "description": "Ferst Core \u2014 the shared, brand-agnostic client-site system: Astro components, layouts, content schemas, the layered config resolver, and a neutral styling architecture that every client overrides.",
   "license": "BUSL-1.1",