apostrophe 4.28.1 → 4.29.0

package/modules/@apostrophecms/styles/ui/apos/universal/render.mjs

@@ -57,8 +57,37 @@
 import { klona } from 'klona';
 import customRules from './customRules.mjs';
 
+// For legacy reasons this stays the default export.
 export default renderGlobalStyles;
-export { renderGlobalStyles, renderScopedStyles };
+export {
+  renderGlobalStyles, renderScopedStyles, createRenderer
+};
+
+/**
+ * Creates a renderer with shared options pre-applied.
+ * Callers can override per-call options as needed.
+ *
+ * @param {Object} options - Shared options for all render calls
+ * @returns {{ renderGlobalStyles: Function, renderScopedStyles: Function }}
+ */
+function createRenderer(options = {}) {
+  const memoized = { ...options };
+
+  return {
+    renderGlobalStyles(schema, doc, callOptions = {}) {
+      return renderGlobalStyles(schema, doc, {
+        ...memoized,
+        ...callOptions
+      });
+    },
+    renderScopedStyles(schema, doc, callOptions = {}) {
+      return renderScopedStyles(schema, doc, {
+        ...memoized,
+        ...callOptions
+      });
+    }
+  };
+}
 
 // Exported for testing purposes
 export const NORMALIZERS = {
@@ -67,7 +96,8 @@ export const NORMALIZERS = {
 };
 export const EXTRACTORS = {
   _: extract,
-  object: extractObject
+  object: extractObject,
+  customType: extractCustomType
 };
 const FILTERS = {
   _: filter,
@@ -85,7 +115,8 @@ const FILTERS = {
  * @returns {{ css: string; classes: string[] }} Compiled CSS stylesheet and classes
  */
 function renderGlobalStyles(schema, doc, {
-  checkIfConditionsFn
+  checkIfConditionsFn,
+  ...engineOptions
 } = {}) {
   const withConditions = filterConditionalFields(
     klona(schema),
@@ -97,7 +128,8 @@ function renderGlobalStyles(schema, doc, {
   const storage = {
     classes: new Set(),
     styles: new Map(),
-    conditions: withConditions.conditions
+    conditions: withConditions.conditions,
+    options: engineOptions
   };
 
   for (const field of withConditions.schema) {
@@ -105,6 +137,10 @@ function renderGlobalStyles(schema, doc, {
     if (!filter(field, doc)) {
       continue;
     }
+    if (field.customType) {
+      extractCustomType(field, doc, { storage });
+      continue;
+    }
     const normalizer = NORMALIZERS[field.type] || NORMALIZERS._;
     const extractor = EXTRACTORS[field.type] || EXTRACTORS._;
     const normalzied = normalizer(field, doc, {
@@ -135,7 +171,8 @@ function renderGlobalStyles(schema, doc, {
 function renderScopedStyles(schema, doc, {
   rootSelector = null,
   checkIfConditionsFn,
-  subset = null
+  subset = null,
+  ...engineOptions
 } = {}) {
   const withConditions = filterConditionalFields(
     klona(schema),
@@ -149,7 +186,8 @@ function renderScopedStyles(schema, doc, {
     classes: new Set(),
     styles: new Map(),
     inlineVotes: new Set(),
-    conditions: withConditions.conditions
+    conditions: withConditions.conditions,
+    options: engineOptions
   };
 
   for (const field of withConditions.schema) {
@@ -157,6 +195,13 @@ function renderScopedStyles(schema, doc, {
     if (!filter(field, doc)) {
       continue;
     }
+    if (field.customType) {
+      extractCustomType(field, doc, {
+        rootSelector,
+        storage
+      });
+      continue;
+    }
     const normalizer = NORMALIZERS[field.type] || NORMALIZERS._;
     const extractor = EXTRACTORS[field.type] || EXTRACTORS._;
     const normalized = normalizer(field, doc, {
@@ -326,6 +371,9 @@ function filter(field, doc) {
   if (!doc[field.name] && doc[field.name] !== 0) {
     return false;
   }
+  if (field.customType) {
+    return true;
+  }
   const hasProperty = Array.isArray(field.property)
     ? field.property.length > 0
     : !!field.property;
@@ -356,6 +404,9 @@ function filterObject(field, doc) {
   if (!doc[field.name]) {
     return false;
   }
+  if (field.customType) {
+    return true;
+  }
   if (field.property && field.valueTemplate) {
     return true;
   }
@@ -390,17 +441,33 @@ function normalize(field, doc, {
   const fieldUnit = field.unit || '';
   const fieldMediaQuery = field.mediaQuery || rootMediaQuery;
 
-  if (field.class) {
-    applyFieldClass(field.class, fieldValue, storage);
+  // skipFalsyValues: when enabled and value is falsy, skip the field entirely.
+  // No CSS property, no CSS variable, no class toggle — nothing is emitted.
+  if (field.skipFalsyValues && !fieldValue) {
     return {
       raw: field,
-      selectors,
-      properties,
-      value: fieldValue,
+      selectors: [],
+      properties: [],
+      value: null,
       unit: ''
     };
   }
 
+  if (field.class) {
+    applyFieldClass(field.class, fieldValue, storage);
+    // When the field also has `property`, continue to generate CSS output.
+    // Otherwise return early (class-only field, preserving existing behavior).
+    if (!field.property) {
+      return {
+        raw: field,
+        selectors,
+        properties,
+        value: fieldValue,
+        unit: ''
+      };
+    }
+  }
+
   if (!properties) {
     properties = [];
   }
@@ -485,9 +552,11 @@ function normalizeObject(field, doc, {
   });
   delete normalized.unit;
 
-  const schema = field.schema.filter(subfield => {
-    return filter(subfield, doc[field.name] || {});
-  });
+  const schema = field.customType
+    ? field.schema
+    : field.schema.filter(subfield => {
+      return filter(subfield, doc[field.name] || {});
+    });
 
   for (const subfield of schema) {
     subfields.push(
@@ -518,7 +587,7 @@ function normalizeObject(field, doc, {
  * @param {RuntimeStorage} storage
  */
 function extract(normalized, storage) {
-  if (normalized.class) {
+  if (normalized.class && normalized.properties.length === 0) {
     return;
   }
   const styles = storage.styles;
@@ -570,6 +639,117 @@ function extract(normalized, storage) {
   });
 }
 
+/**
+ * Dispatch a field with a `customType` to the matching custom rule.
+ * The custom rule is authoritative — the field doesn't flow through
+ * the standard normalize → extract pipeline.
+ *
+ * For object fields: normalizes with normalizeObject(), builds a subfield
+ * map, and lets the rule do partial processing (remaining subfields
+ * continue through extract()).
+ *
+ * For non-object fields: normalizes normally, passes an empty subfield
+ * map, and the rule is fully responsible for CSS output.
+ *
+ * Custom rules may return `inline: false` to explicitly opt out of
+ * inline styles when their output requires scoped CSS (e.g.
+ * pseudo-element rules). When absent, the field-level vote stands.
+ *
+ * @param {SchemaField} field
+ * @param {Object} doc
+ * @param {Object} opts
+ * @param {String} [opts.rootSelector]
+ * @param {RuntimeStorage} opts.storage
+ */
+function extractCustomType(field, doc, { rootSelector, storage } = {}) {
+  const ruleName = field.customType;
+  const rule = customRules[ruleName];
+  if (!rule) {
+
+    console.error(
+      `[styles] Unknown customType "${ruleName}" on field "${field.name}". ` +
+      'The field will be skipped. Available types: ' +
+      Object.keys(customRules).join(', ')
+    );
+    return;
+  }
+
+  const isObject = field.type === 'object';
+  const normalizer = isObject ? normalizeObject : normalize;
+  const normalized = normalizer(field, doc, {
+    rootSelector,
+    storage
+  });
+
+  const subfieldMap = {};
+  if (isObject && normalized.subfields) {
+    for (const sub of normalized.subfields) {
+      subfieldMap[sub.raw.name] = sub;
+    }
+  }
+
+  const result = rule({
+    field: normalized,
+    subfields: subfieldMap,
+    options: storage.options || {}
+  });
+  const processed = new Set(result.processedFields || []);
+
+  if (result.inline === false && storage.inlineVotes) {
+    storage.inlineVotes.add(false);
+  }
+
+  // Add the custom rule's CSS output to storage
+  if (result.rules?.length) {
+    for (const selector of normalized.selectors) {
+      let currentStyles = storage.styles;
+      if (normalized.mediaQuery) {
+        const mediaQuery = `@media ${normalized.mediaQuery}`;
+        storage.styles.set(mediaQuery, storage.styles.get(mediaQuery) || new Map());
+        currentStyles = storage.styles.get(mediaQuery);
+      }
+      for (const r of result.rules) {
+        currentStyles.set(
+          selector, (currentStyles.get(selector) || new Set()).add(r)
+        );
+      }
+    }
+  }
+
+  // Add media-scoped rules from the custom rule (e.g. responsive image breakpoints).
+  // Media rules require scoped CSS, so automatically opt out of inline styles.
+  if (result.mediaRules?.length) {
+    if (storage.inlineVotes) {
+      storage.inlineVotes.add(false);
+    }
+    for (const mr of result.mediaRules) {
+      const mediaQuery = `@media ${mr.query}`;
+      storage.styles.set(mediaQuery, storage.styles.get(mediaQuery) || new Map());
+      const mediaStyles = storage.styles.get(mediaQuery);
+      for (const selector of normalized.selectors) {
+        for (const r of mr.rules) {
+          mediaStyles.set(
+            selector, (mediaStyles.get(selector) || new Set()).add(r)
+          );
+        }
+      }
+    }
+  }
+
+  // For object fields: continue processing subfields NOT consumed by the rule.
+  // Filter before extract — normalizeObject deliberately skips filtering for
+  // customType so the rule receives the full schema. Leftover subfields must
+  // pass the same filter the main loop applies to avoid emitting broken CSS.
+  if (isObject && normalized.subfields) {
+    const subdoc = doc[field.name] || {};
+    for (const sub of normalized.subfields) {
+      if (!processed.has(sub.raw.name) && filter(sub.raw, subdoc)) {
+        extract(sub, storage);
+      }
+    }
+  }
+}
+
 /**
  * Extract CSS rules from a normalized object field and populate the central
  * styles map with the selectors and corresponding rules.

package/modules/@apostrophecms/template/index.js

@@ -35,6 +35,7 @@ const path = require('path');
 const { stripIndent } = require('common-tags');
 const { SemanticAttributes } = require('@opentelemetry/semantic-conventions');
 const voidElements = require('void-elements');
+const safeJsonForScript = require('../../../lib/safe-json-script');
 
 module.exports = {
   options: { alias: 'template' },
@@ -1140,12 +1141,23 @@ module.exports = {
       //     attrs: { href: '/some/path', rel: 'stylesheet' }
       //   }
       // ]
-      // Node object SHOULD have either `name`, `text`, `raw` or `comment` property.
-      // A node with `name` can have `attrs` (array of element attributes)
-      // and `body` (array of child nodes, recursion).
+      // Node object SHOULD have either `name`, `text`, `raw`, `json` or
+      // `comment` property. A node with `name` can have `attrs` (array of
+      // element attributes) and `body` (array of child nodes, recursion).
       // `text` nodes are rendered as text (no HTML tags), the value is always a string.
       // `comment` nodes are rendered as HTML comments, the value is always a string.
       // `raw` nodes are rendered as is, no escaping, the value is always a string.
+      // `json` nodes are rendered as a JSON serialization of the value,
+      // safely escaped for inclusion inside a `<script>` element so that
+      // untrusted content cannot break out of the surrounding script tag.
+      // Use this instead of building a `raw` body from `JSON.stringify()`
+      // yourself, e.g.:
+      //
+      //   {
+      //     name: 'script',
+      //     attrs: { type: 'application/ld+json' },
+      //     body: [ { json: myData } ]
+      //   }
       renderNodes(nodes) {
         if (!Array.isArray(nodes)) {
           self.logError(
@@ -1164,6 +1176,9 @@ module.exports = {
           if (node.raw != null) {
             return node.raw;
           }
+          if (node.json != null) {
+            return safeJsonForScript(node.json);
+          }
           if (node.name != null) {
             const name = self.apos.util.escapeHtml(node.name);
             const attrs = Object.entries(node.attrs || {})
@@ -1252,9 +1267,10 @@ module.exports = {
         return data;
       },
 
-      pruneDataForExternalFront(req, template, data, moduleName) {
-        return data;
-      },
+      // An opportunity to modify `data` IN PLACE to send less data to
+      // the external front, e.g. Astro. Invoked immediately before
+      // data is sent to Astro
+      pruneDataForExternalFront(req, template, data, moduleName) {},
 
       getDocsForExternalFront(req, template, data, moduleName) {
         return [

package/modules/@apostrophecms/ui/ui/apos/components/AposCellContextMenu.vue

@@ -16,6 +16,8 @@
         :show-restore="options.showRestore"
         :show-dismiss-submission="options.showDismissSubmission"
         :can-delete-draft="options.canDeleteDraft"
+        :show-unpublish="options.showUnpublish"
+        :cross-locale="options.crossLocale || false"
         @menu-open="menuOpen = true"
         @menu-close="menuOpen = false"
       />

package/modules/@apostrophecms/ui/ui/apos/components/AposContextMenu.vue

@@ -41,7 +41,7 @@
         class="apos-context-menu__dropdown-content"
         :class="popoverClass"
         tabindex="0"
-        @keyup.tab="onKeyup"
+        @keydown.tab="onKeydownTab"
         @keyup.esc="onKeyup"
         @keyup.enter="onKeyup"
       >
@@ -75,7 +75,7 @@
             ...popoverClass
           ]"
           tabindex="0"
-          @keyup.tab="onKeyup"
+          @keydown.tab="onKeydownTab"
           @keyup.esc="onKeyup"
           @keyup.enter="onKeyup"
         >
@@ -559,11 +559,26 @@ const ignoreInputTypes = [
   'week'
 ];
 
+// Handle Tab on keydown — before the browser moves focus.
+// At keydown time document.activeElement is the element the user
+// is on (the source), and preventDefault() can stop the browser's
+// default focus movement.
+function onKeydownTab(event) {
+  if (!isOpen.value || modalDepth.value !== modalStore.getDepth()) {
+    return;
+  }
+  if (event.target?.nodeName?.toLowerCase() === 'textarea') {
+    return;
+  }
+  event.stopImmediatePropagation();
+  onTab(event);
+}
+
 /**
  * @param {KeyboardEvent} event
  */
 function onKeyup(event) {
-  if (modalDepth.value !== modalStore.getDepth() || !isOpen.value) {
+  if (!isOpen.value || modalDepth.value !== modalStore.getDepth()) {
     return;
   }
 
@@ -572,7 +587,6 @@ function onKeyup(event) {
 
   if (event.key === 'Tab' && target?.nodeName?.toLowerCase() !== 'textarea') {
     event.stopImmediatePropagation();
-    onTab(event);
     return;
   }
 

package/modules/@apostrophecms/ui/ui/apos/composables/useInfiniteScroll.js

@@ -0,0 +1,91 @@
+import { onBeforeUnmount, unref } from 'vue';
+
+/**
+ * @typedef {import('vue').Ref<HTMLElement>} ElementRef
+ */
+
+/**
+ * Reactive infinite scroll via IntersectionObserver.
+ * Observes a sentinel element and calls `onLoadMore` when it enters
+ * the visible area of the scroll container.
+ * Automatically disconnects the observer on component unmount.
+ * Handles edge cases when the results are shorter than the viewport,
+ * with exposed `recheck()` method to force a fresh intersection check after
+ * content changes. See `AposRecentlyEditedManager.vue` for an implementation
+ * of infinite loading with rechecks after appending items.
+ *
+ * @param {ElementRef} sentinel
+ *   Template ref for the observed element
+ * @param {() => Promise<void>|void} onLoadMore
+ *   Called when sentinel is visible; the caller is responsible
+ *   for its own guards (e.g. "already loading")
+ * @param {{ rootMargin?: string, root?: ElementRef|string }} [options]
+ *   `root`: Ref to the scroll container element, or a CSS selector
+ *   string resolved relative to the sentinel's ancestors.
+ *   Defaults to the viewport when omitted.
+ * @returns {{ start: () => void, stop: () => void }}
+ */
+export function useInfiniteScroll(sentinel, onLoadMore, options = {}) {
+  const { rootMargin = '100px', root = null } = options;
+  let observer = null;
+
+  function handleIntersect(entries) {
+    if (entries[0]?.isIntersecting) {
+      onLoadMore();
+    }
+  }
+
+  function resolveRoot(sentinelEl) {
+    const raw = unref(root);
+    if (raw instanceof HTMLElement) {
+      return raw;
+    }
+    // CSS selector: walk up from sentinel to find the scroll container.
+    if (typeof raw === 'string' && sentinelEl) {
+      return sentinelEl.closest(raw) || null;
+    }
+    return null;
+  }
+
+  function start() {
+    stop();
+    const el = unref(sentinel);
+    if (!el) {
+      return;
+    }
+    const rootEl = resolveRoot(el);
+    observer = new IntersectionObserver(handleIntersect, {
+      root: rootEl,
+      rootMargin,
+      threshold: 0
+    });
+    observer.observe(el);
+  }
+
+  function stop() {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  }
+
+  onBeforeUnmount(stop);
+
+  // Force a fresh intersection check. Useful after content changes
+  // (e.g. items appended) when the sentinel may already be visible
+  // but no state transition occurred.
+  function recheck() {
+    const el = unref(sentinel);
+    if (!observer || !el) {
+      return;
+    }
+    observer.unobserve(el);
+    observer.observe(el);
+  }
+
+  return {
+    start,
+    stop,
+    recheck
+  };
+}

package/modules/@apostrophecms/ui/ui/apos/scss/global/_theme.scss

@@ -39,6 +39,7 @@
   --a-background-inverted: #323232;
   --a-overlay: #1f004ce0;
   --a-overlay-modal: #0202025e;
+  --a-background-overlay: #ffffff80;
 
   // Universal
   --a-white: #fff;

package/modules/@apostrophecms/ui/ui/apos/stores/modal.js

@@ -128,6 +128,9 @@ export const useModalStore = defineStore('modal', () => {
       props = await apos.ui.transformers[transformer](props);
     }
     return new Promise((resolve) => {
+      const modalLocale = props?.locale ||
+        activeModal.value?.locale ||
+        apos.i18n.locale;
       const item = {
         id: `modal:${createId()}`,
         componentName,
@@ -135,11 +138,11 @@ export const useModalStore = defineStore('modal', () => {
         props: props || {},
         elementsToFocus: [],
         focusedElement: null,
-        locale: activeModal.value?.locale || apos.i18n.locale,
+        locale: modalLocale,
         hasContextLocale: activeModal.value
           ? (activeModal.value.hasContextLocale ||
               activeModal.value.locale !== apos.i18n.locale)
-          : false
+          : modalLocale !== apos.i18n.locale
       };
 
       activeId.value = item.id;

package/modules/@apostrophecms/ui/ui/apos/utils/index.js

@@ -176,6 +176,13 @@ class Queue {
     });
   }
 
+  clear() {
+    const pending = this.queue.splice(0);
+    for (const item of pending) {
+      item.reject(new Error('queue:cleared'));
+    }
+  }
+
   async run() {
     if (this.running) {
       return;
@@ -216,6 +223,7 @@ class Queue {
  * ```
  * @returns {{
  *  add: <T>(task: () => Promise<T>) => Promise<T>,
+ *  clear: () => void,
  *  count: () => number,
  *  hasTasks: () => boolean
  * }}
@@ -224,6 +232,7 @@ function asyncTaskQueue() {
   const queue = new Queue();
   return {
     add: (task) => queue.add(task),
+    clear: () => queue.clear(),
     count: () => queue.count(),
     hasTasks: () => queue.hasTasks()
   };

package/modules/@apostrophecms/url/index.js

@@ -129,7 +129,27 @@ module.exports = {
       // without the prefix.  This is the legacy behavior of
       // `apos.page.getBaseUrl(req)` before the delegation to this
       // method.
-      getBaseUrl(req, { strict = false, prefix = true } = {}) {
+      //
+      // ### `options.relative`
+      //
+      // When `true`, the returned URL is relative and prefix-qualified.
+      // The `prefix` option and i18n hosts are ignored in this case.
+      //
+      // ### `options.localePrefix`
+      //
+      // When `true`, the locale prefix (e.g. `/fr`) is appended
+      // after the global prefix.  Defaults to `false` for
+      // backward compatibility.
+      getBaseUrl(req, {
+        strict = false, prefix = true, relative = false,
+        localePrefix = false
+      } = {}) {
+        if (relative) {
+          const result = self.apos.prefix || '';
+          return localePrefix
+            ? result + (self.apos.i18n.locales[req.locale]?.prefix || '')
+            : result;
+        }
         const hostname = self.apos.i18n.locales?.[req.locale]?.hostname;
         if (hostname) {
           // Locale hostnames are fully qualified origins;
@@ -137,13 +157,16 @@ module.exports = {
           return `${req.protocol}://${hostname}`;
         }
         const aposPrefix = prefix ? (self.apos.prefix || '') : '';
+        const lPrefix = localePrefix
+          ? (self.apos.i18n.locales[req.locale]?.prefix || '')
+          : '';
         if (self.isStaticBuild(req)) {
           const staticUrl = req.staticBaseUrl || '';
           if (staticUrl || !strict) {
-            return staticUrl + aposPrefix;
+            return staticUrl + aposPrefix + lPrefix;
           }
         }
-        return (self.apos.baseUrl || '') + aposPrefix;
+        return (self.apos.baseUrl || '') + aposPrefix + lPrefix;
       },
 
       // Build filter URLs. `data` is an object whose properties
@@ -362,7 +385,7 @@ module.exports = {
       //   attachments: { // null when not requested
       //     uploadsUrl: '/uploads',
       //     results: [
-      //       { _id: 'abc', urls: [{ size?, path }] },
+      //       { _id: 'abc', urls: [{ size?, path }], base? },
       //       ...
       //     ]
       //   }
@@ -502,6 +525,14 @@ module.exports = {
       // - `_id` (string): the attachment record ID.
       // - `urls` (array): `{ size, path }` objects where `path`
       //   is the uploadfs-relative file path.
+      // - `base` (string, optional): when present, overrides the
+      //   global `uploadsUrl` for this entry.  Set by
+      //   `@apostrophecms/file.applyPrettyUrlPaths` for file
+      //   pieces with pretty URLs enabled.  The value is a
+      //   relative, prefix-qualified path (e.g. `/files` or
+      //   `/cms/files`).  Consumers should use
+      //   `entry.base || attachments.uploadsUrl` as the download
+      //   and output base for each entry.
       //
       // After attachment metadata is collected, the
       // `@apostrophecms/url:getAllAttachmentMetadata` event is
@@ -563,6 +594,9 @@ module.exports = {
               skipSizes
             })
           };
+          await self.apos.file.applyPrettyUrlPaths(
+            req, response.attachments
+          );
           await self.emit(
             'getAllAttachmentMetadata',
             req,