@appsemble/lang-sdk 0.40.2 → 0.40.3-test.3

package/gridUtils.d.ts

@@ -1,8 +1,16 @@
-import { type GridLayoutDefinition, type PageDefinition, type PageLayoutDefinition, type ResponsiveGridLayoutDefinition } from './types/index.js';
+import { type BuiltinPagesLayoutDefinition, type GridLayoutDefinition, type PageDefinition, type PageLayoutDefinition, type ResponsiveGridLayoutDefinition } from './types/index.js';
 /**
  * The template area a page grid layout uses to place the breadcrumb trail.
  */
 export declare const breadcrumbsGridArea = "breadcrumbs";
+/**
+ * The template area a grid layout uses to place the banner that asks to verify the email address.
+ */
+export declare const resendBannerGridArea = "resend-banner";
+/**
+ * The template area a grid layout uses to place the bottom navigation.
+ */
+export declare const bottomNavigationGridArea = "bottom-navigation";
 /**
  * The devices a responsive grid layout is defined for, from the smallest breakpoint up.
  */
@@ -15,6 +23,18 @@ export type GridDeviceName = (typeof gridDeviceOrder)[number];
  * The grid a device falls back to when neither it nor a smaller device defines one.
  */
 export declare const defaultGridLayout: Readonly<GridLayoutDefinition>;
+/**
+ * The template area a built-in page grid layout uses to place the heading of the page.
+ */
+export declare const builtinPagesTitleGridArea = "title";
+/**
+ * The template area a built-in page grid layout uses to place the content of the page.
+ */
+export declare const builtinPagesContentGridArea = "content";
+/**
+ * The template areas a built-in page grid layout may name, in DOM order.
+ */
+export declare const builtinPagesGridAreaOrder: readonly ["resend-banner", "title", "content", "bottom-navigation"];
 /**
  * Collect the template areas a responsive grid layout defines.
  *
@@ -37,27 +57,52 @@ export declare function getPageGridLayouts(page: PageDefinition): (PageLayoutDef
  * Collect the template areas each device renders.
  *
  * A device that defines no template of its own inherits the one of the next smaller device, the way
- * the app applies the grid of a page, down to a fallback of the single `main` area. So the areas a
- * device renders are not the areas its own template names.
+ * the app applies the grid of a page, down to the given default layout: `defaultGridLayout` unless
+ * the caller passes its own. So the areas a device renders are not the areas its own template names.
  *
  * @param layout The responsive grid layout to read.
+ * @param defaultLayout The grid a device falls back to below the smallest defined template.
  * @returns The areas rendered by each device, keyed by device name.
  */
-export declare function getCascadedGridTemplateAreas(layout: ResponsiveGridLayoutDefinition | undefined): Record<GridDeviceName, Set<string>>;
+export declare function getCascadedGridTemplateAreas(layout: ResponsiveGridLayoutDefinition | undefined, defaultLayout?: Readonly<GridLayoutDefinition>): Record<GridDeviceName, Set<string>>;
+/**
+ * Check whether a built-in page grid layout places an area.
+ *
+ * An optional area is named by the template of every device or by the template of none, so any
+ * device that names it opts every breakpoint in.
+ *
+ * @param layout The built-in page grid layout to check.
+ * @param area The template area to look for.
+ * @returns Whether the layout names the template area.
+ */
+export declare function hasBuiltinPagesGridArea(layout: BuiltinPagesLayoutDefinition | undefined, area: string): boolean;
+/**
+ * Build the grid built-in pages fall back to below the smallest defined template.
+ *
+ * `defaultGridLayout` names the `main` area, which no built-in page renders. Built-in pages stack
+ * the areas their templates name instead, in DOM order, so an app can define the desktop grid alone
+ * without an invalid mobile fallback or an accidental heading.
+ *
+ * @param layout The built-in page grid layout to read the areas of.
+ * @returns A single column grid with one row per area the layout names.
+ */
+export declare function getBuiltinPagesDefaultGridLayout(layout: BuiltinPagesLayoutDefinition | undefined): GridLayoutDefinition;
 /**
- * Check whether a grid layout places the breadcrumb trail.
+ * Check whether a grid layout places an area Appsemble renders itself.
  *
- * Every device has to render the area, since a device that does not would place the trail against
+ * Every device has to render the area, since a device that does not would place the element against
  * implicit grid lines rather than inside the layout.
  *
  * @param layout The responsive grid layout to check.
- * @returns Whether every device renders the breadcrumbs template area.
+ * @param area The template area to look for.
+ * @returns Whether every device renders the template area.
  */
-export declare function hasBreadcrumbsGridArea(layout: PageLayoutDefinition | undefined): boolean;
+export declare function hasGridArea(layout: PageLayoutDefinition | undefined, area: string): boolean;
 /**
- * Check whether a page renders the breadcrumb trail from a grid layout.
+ * Check whether a page renders an area Appsemble renders itself from a grid layout.
  *
  * @param page The page to check the grid layouts of.
- * @returns Whether any grid layout of the page places the breadcrumb trail.
+ * @param area The template area to look for.
+ * @returns Whether any grid layout of the page places the area.
  */
-export declare function pageHasBreadcrumbsGridArea(page: PageDefinition): boolean;
+export declare function pageHasGridArea(page: PageDefinition, area: string): boolean;

package/gridUtils.js

@@ -2,6 +2,14 @@
  * The template area a page grid layout uses to place the breadcrumb trail.
  */
 export const breadcrumbsGridArea = 'breadcrumbs';
+/**
+ * The template area a grid layout uses to place the banner that asks to verify the email address.
+ */
+export const resendBannerGridArea = 'resend-banner';
+/**
+ * The template area a grid layout uses to place the bottom navigation.
+ */
+export const bottomNavigationGridArea = 'bottom-navigation';
 /**
  * The devices a responsive grid layout is defined for, from the smallest breakpoint up.
  */
@@ -13,6 +21,23 @@ export const defaultGridLayout = {
     columns: 1,
     template: ['main'],
 };
+/**
+ * The template area a built-in page grid layout uses to place the heading of the page.
+ */
+export const builtinPagesTitleGridArea = 'title';
+/**
+ * The template area a built-in page grid layout uses to place the content of the page.
+ */
+export const builtinPagesContentGridArea = 'content';
+/**
+ * The template areas a built-in page grid layout may name, in DOM order.
+ */
+export const builtinPagesGridAreaOrder = [
+    resendBannerGridArea,
+    builtinPagesTitleGridArea,
+    builtinPagesContentGridArea,
+    bottomNavigationGridArea,
+];
 function getTemplateAreas(template) {
     const areas = new Set();
     for (const row of template) {
@@ -74,41 +99,74 @@ export function getPageGridLayouts(page) {
  * Collect the template areas each device renders.
  *
  * A device that defines no template of its own inherits the one of the next smaller device, the way
- * the app applies the grid of a page, down to a fallback of the single `main` area. So the areas a
- * device renders are not the areas its own template names.
+ * the app applies the grid of a page, down to the given default layout: `defaultGridLayout` unless
+ * the caller passes its own. So the areas a device renders are not the areas its own template names.
  *
  * @param layout The responsive grid layout to read.
+ * @param defaultLayout The grid a device falls back to below the smallest defined template.
  * @returns The areas rendered by each device, keyed by device name.
  */
-export function getCascadedGridTemplateAreas(layout) {
-    let { template } = defaultGridLayout;
+export function getCascadedGridTemplateAreas(layout, defaultLayout = defaultGridLayout) {
+    let { template } = defaultLayout;
     return Object.fromEntries(gridDeviceOrder.map((device) => {
         template = layout?.[device]?.layout?.template ?? template;
         return [device, getTemplateAreas(template)];
     }));
 }
 /**
- * Check whether a grid layout places the breadcrumb trail.
+ * Check whether a built-in page grid layout places an area.
+ *
+ * An optional area is named by the template of every device or by the template of none, so any
+ * device that names it opts every breakpoint in.
+ *
+ * @param layout The built-in page grid layout to check.
+ * @param area The template area to look for.
+ * @returns Whether the layout names the template area.
+ */
+export function hasBuiltinPagesGridArea(layout, area) {
+    return getGridTemplateAreas(layout).has(area);
+}
+/**
+ * Build the grid built-in pages fall back to below the smallest defined template.
+ *
+ * `defaultGridLayout` names the `main` area, which no built-in page renders. Built-in pages stack
+ * the areas their templates name instead, in DOM order, so an app can define the desktop grid alone
+ * without an invalid mobile fallback or an accidental heading.
+ *
+ * @param layout The built-in page grid layout to read the areas of.
+ * @returns A single column grid with one row per area the layout names.
+ */
+export function getBuiltinPagesDefaultGridLayout(layout) {
+    const areas = getGridTemplateAreas(layout);
+    return {
+        columns: 1,
+        template: builtinPagesGridAreaOrder.filter((area) => area === builtinPagesContentGridArea || areas.has(area)),
+    };
+}
+/**
+ * Check whether a grid layout places an area Appsemble renders itself.
  *
- * Every device has to render the area, since a device that does not would place the trail against
+ * Every device has to render the area, since a device that does not would place the element against
  * implicit grid lines rather than inside the layout.
  *
  * @param layout The responsive grid layout to check.
- * @returns Whether every device renders the breadcrumbs template area.
+ * @param area The template area to look for.
+ * @returns Whether every device renders the template area.
  */
-export function hasBreadcrumbsGridArea(layout) {
+export function hasGridArea(layout, area) {
     if (!layout) {
         return false;
     }
-    return Object.values(getCascadedGridTemplateAreas(layout)).every((areas) => areas.has(breadcrumbsGridArea));
+    return Object.values(getCascadedGridTemplateAreas(layout)).every((areas) => areas.has(area));
 }
 /**
- * Check whether a page renders the breadcrumb trail from a grid layout.
+ * Check whether a page renders an area Appsemble renders itself from a grid layout.
  *
  * @param page The page to check the grid layouts of.
- * @returns Whether any grid layout of the page places the breadcrumb trail.
+ * @param area The template area to look for.
+ * @returns Whether any grid layout of the page places the area.
  */
-export function pageHasBreadcrumbsGridArea(page) {
-    return getPageGridLayouts(page).some(hasBreadcrumbsGridArea);
+export function pageHasGridArea(page, area) {
+    return getPageGridLayouts(page).some((layout) => hasGridArea(layout, area));
 }
 //# sourceMappingURL=gridUtils.js.map

package/icons.d.ts

@@ -54,8 +54,9 @@ export type ResolvedIcon = {
 /**
  * Resolve an icon reference against an icon registry.
  *
- * Registry keys and entries are validated here as well, so the result is safe to render even if
- * the registry wasn’t validated when it was published. Only own properties of the registry count.
+ * A bare name listed in an entry’s `overrides` resolves like `icon:<key>` for that entry. Registry
+ * keys and entries are validated here as well, so the result is safe to render even if the
+ * registry wasn’t validated when it was published. Only own properties of the registry count.
  *
  * @param reference The icon reference to resolve.
  * @param registry The app’s icon registry.

package/icons.js

@@ -61,8 +61,9 @@ export function isValidIconReference(reference) {
 /**
  * Resolve an icon reference against an icon registry.
  *
- * Registry keys and entries are validated here as well, so the result is safe to render even if
- * the registry wasn’t validated when it was published. Only own properties of the registry count.
+ * A bare name listed in an entry’s `overrides` resolves like `icon:<key>` for that entry. Registry
+ * keys and entries are validated here as well, so the result is safe to render even if the
+ * registry wasn’t validated when it was published. Only own properties of the registry count.
  *
  * @param reference The icon reference to resolve.
  * @param registry The app’s icon registry.
@@ -70,6 +71,15 @@ export function isValidIconReference(reference) {
  */
 export function resolveIconReference(reference, registry) {
     const parsed = parseIconReference(reference);
+    if (parsed.type === 'fontawesome' && typeof registry === 'object' && registry) {
+        const override = Object.keys(registry).find((key) => {
+            const overrides = registry[key]?.overrides;
+            return Array.isArray(overrides) && overrides.includes(parsed.name);
+        });
+        if (override !== undefined) {
+            return resolveIconReference(`${customIconPrefix}${override}`, registry);
+        }
+    }
     if (parsed.type !== 'custom') {
         return parsed;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appsemble/lang-sdk",
-  "version": "0.40.2",
+  "version": "0.40.3-test.3",
   "description": "Language SDK for Appsemble",
   "keywords": [
     "app",
@@ -51,7 +51,7 @@
     "language-tags": "^1.0.0",
     "lcm": "^0.0.4",
     "openapi-types": "^12.0.0",
-    "parse-duration": "^1.0.0",
+    "parse-duration": "^2.0.0",
     "type-fest": "^4.0.0",
     "yaml": "^2.0.0"
   },

package/reference-schemas/actions/miscellaneous.js

@@ -15,6 +15,7 @@ import { MessageActionDefinition } from '../../schemas/actions/MessageActionDefi
 import { NoopActionDefinition } from '../../schemas/actions/NoopActionDefinition.js';
 import { NotifyActionDefinition } from '../../schemas/actions/NotifyActionDefinition.js';
 import { RequestActionDefinition } from '../../schemas/actions/RequestActionDefinition.js';
+import { ScrollActionDefinition } from '../../schemas/actions/ScrollActionDefinition.js';
 import { ShareActionDefinition } from '../../schemas/actions/ShareActionDefinition.js';
 import { StaticActionDefinition } from '../../schemas/actions/StaticActionDefinition.js';
 import { ThrowActionDefinition } from '../../schemas/actions/ThrowActionDefinition.js';
@@ -37,6 +38,7 @@ export const miscellaneousActions = {
     noop: NoopActionDefinition,
     notify: NotifyActionDefinition,
     request: RequestActionDefinition,
+    scroll: ScrollActionDefinition,
     share: ShareActionDefinition,
     static: StaticActionDefinition,
     throw: ThrowActionDefinition,

package/schemas/AppDefinition.js

@@ -97,7 +97,7 @@ The most basic resource has a \`schema\` property and defines the minimal securi
 
 Each key names an app-level SVG asset by its name. Keys and asset names must consist of lower case
 letters, digits, and single hyphens. Keys are case-sensitive, and \`icon:<key>\` never falls back
-to a Font Awesome icon.
+to a Font Awesome icon. Use \`overrides\` to replace Font Awesome icons with a custom icon.
 `,
             additionalProperties: { $ref: '#/components/schemas/IconRegistryEntryDefinition' },
         },

package/schemas/AppLayoutDefinition.js

@@ -118,6 +118,14 @@ Only applies when \`navigation\` is set to \`top\`.
             description: `Responsive grid layout for the top navigation header.
 
 Only applies when \`navigation\` is set to \`top\` and cannot be combined with \`stackedHeader\`.
+`,
+        },
+        builtinPages: {
+            $ref: '#/components/schemas/BuiltinPagesLayoutDefinition',
+            description: `Responsive grid layout for the built-in pages of the app.
+
+Applies unchanged to every built-in page and every state of it. The available template areas are
+\`resend-banner\`, \`title\`, \`content\`, and \`bottom-navigation\`.
 `,
         },
         breakpoints: {

package/schemas/BasePageDefinition.js

@@ -51,8 +51,8 @@ navigation. Set to \`hidden\` to display no navigational menus at all.
             format: 'icon',
             description: `An optional icon from the Font Awesome icon set, or a custom icon reference.
 
-This will be displayed in the navigation menu. Use \`icon:<key>\` to reference a key from the app’s
-\`icons\` registry.
+This will be displayed in the navigation menu and the breadcrumb trail. Use \`icon:<key>\` to
+reference a key from the app’s \`icons\` registry.
 `,
         },
         parent: {

package/schemas/BlockDefinition.js

@@ -91,10 +91,7 @@ The exact meaning of the parameters depends on the block type.
         events: { $ref: '#/components/schemas/EventsDefinition' },
         gridArea: {
             type: 'string',
-            description: `Grid area defined in the page layout definition.
-
-The \`breadcrumbs\` area is reserved for the breadcrumb trail of the app.
-`,
+            description: 'Grid area defined in the page layout definition.',
         },
     },
 };

package/schemas/BuiltinPagesLayoutDefinition.d.ts

@@ -0,0 +1 @@
+export declare const BuiltinPagesLayoutDefinition: import("openapi-types").OpenAPIV3.SchemaObject;

package/schemas/BuiltinPagesLayoutDefinition.js

@@ -0,0 +1,26 @@
+import { ResponsiveGridLayoutDefinition } from './ResponsiveGridLayoutDefinition.js';
+import { extendJSONSchema } from './utils/extendJSONSchema.js';
+export const BuiltinPagesLayoutDefinition = extendJSONSchema(ResponsiveGridLayoutDefinition, {
+    type: 'object',
+    additionalProperties: false,
+    minProperties: 1,
+    description: `Responsive grid layout for the built-in pages of the app.
+
+The layout applies unchanged to every built-in page and to every state of it. Without it, no
+built-in page becomes a grid or gains a heading.
+
+The available template areas are \`resend-banner\`, \`title\`, \`content\`, and \`bottom-navigation\`.
+\`content\` holds everything the page renders for its current state and has to be part of the grid
+every breakpoint renders. The others are optional and have to be named by the grid of every
+breakpoint or of none: \`title\` is a heading that renders the name of the page, \`resend-banner\`
+places the banner that asks to verify the email address, and \`bottom-navigation\` places the bottom
+navigation. Without their area the banner renders above the page and the bottom navigation is fixed
+to the bottom of the viewport; with it, they render nothing when the app shows none. The first
+visual occurrence of the areas has to follow that order, so that keyboard, screen reader, and visual
+order agree.
+
+Breakpoints before the first one the layout defines render a single column with one row per area,
+in that same order.
+`,
+});
+//# sourceMappingURL=BuiltinPagesLayoutDefinition.js.map

package/schemas/IconRegistryEntryDefinition.js

@@ -12,6 +12,15 @@ export const IconRegistryEntryDefinition = {
 
 This is an asset name, not a URL or asset ID. The asset doesn’t need to exist when the app is
 published, but the icon only renders once an SVG asset with this name has been uploaded.
+`,
+        },
+        overrides: {
+            type: 'array',
+            items: { type: 'string', format: 'fontawesome' },
+            uniqueItems: true,
+            description: `Font Awesome icon names to replace with this icon everywhere in the app.
+
+Use the name from the icon’s \`fa-<name>\` class. A name can only be listed once.
 `,
         },
     },

package/schemas/PageLayoutDefinition.js

@@ -6,9 +6,13 @@ export const PageLayoutDefinition = extendJSONSchema(ResponsiveGridLayoutDefinit
     minProperties: 1,
     description: `Responsive grid layout for a page.
 
-The \`breadcrumbs\` template area is reserved for the breadcrumb trail of the app. It requires
-\`layout.breadcrumbs\`, has to be part of the grid every breakpoint renders, and has to be defined by
-every sub page of a page or by none of them.
+The \`breadcrumbs\`, \`resend-banner\`, and \`bottom-navigation\` template areas are reserved for the
+breadcrumb trail, the banner that asks to verify the email address, and the bottom navigation of the
+app. Each has to be part of the grid every breakpoint renders and has to be defined by every sub
+page of a page or by none of them. \`breadcrumbs\` requires \`layout.breadcrumbs\`. Without a reserved
+area the element keeps its default position: the trail below the title bar, the banner above the
+page, and the bottom navigation fixed to the bottom of the viewport. \`resend-banner\` and
+\`bottom-navigation\` render nothing when the app shows no banner or no bottom navigation.
 `,
 });
 //# sourceMappingURL=PageLayoutDefinition.js.map

package/schemas/actions/ActionDefinition.js

@@ -66,6 +66,7 @@ export const ActionDefinition = {
                 { $ref: '#/components/schemas/ResourceUpdateGroupActionDefinition' },
                 { $ref: '#/components/schemas/ResourceUpdatePositionsActionDefinition' },
                 { $ref: '#/components/schemas/ResourcePatchActionDefinition' },
+                { $ref: '#/components/schemas/ScrollActionDefinition' },
                 { $ref: '#/components/schemas/ShareActionDefinition' },
                 { $ref: '#/components/schemas/StaticActionDefinition' },
                 { $ref: '#/components/schemas/StorageAppendActionDefinition' },

package/schemas/actions/ScrollActionDefinition.d.ts

@@ -0,0 +1 @@
+export declare const ScrollActionDefinition: import("openapi-types").OpenAPIV3.SchemaObject;

package/schemas/actions/ScrollActionDefinition.js

@@ -0,0 +1,18 @@
+import { BaseActionDefinition } from './BaseActionDefinition.js';
+import { extendJSONSchema } from '../utils/extendJSONSchema.js';
+export const ScrollActionDefinition = extendJSONSchema(BaseActionDefinition, {
+    type: 'object',
+    additionalProperties: false,
+    required: ['type', 'to'],
+    properties: {
+        type: {
+            enum: ['scroll'],
+            description: 'Scroll the page to the top or the bottom.',
+        },
+        to: {
+            enum: ['top', 'bottom'],
+            description: 'Where on the page to scroll to.',
+        },
+    },
+});
+//# sourceMappingURL=ScrollActionDefinition.js.map

package/schemas/index.d.ts

@@ -57,6 +57,7 @@ export * from './actions/ResourceSubscriptionUnsubscribeActionDefinition.js';
 export * from './actions/ResourceUpdateActionDefinition.js';
 export * from './actions/ResourceUpdateGroupActionDefinition.js';
 export * from './actions/ResourceUpdatePositionsActionDefinition.js';
+export * from './actions/ScrollActionDefinition.js';
 export * from './actions/ShareActionDefinition.js';
 export * from './actions/StaticActionDefinition.js';
 export * from './actions/StorageAppendActionDefinition.js';
@@ -128,6 +129,7 @@ export * from './GridBreakpointsDefinition.js';
 export * from './GridLayoutDefinition.js';
 export * from './GridSpacingDefinition.js';
 export * from './ResponsiveGridLayoutDefinition.js';
+export * from './BuiltinPagesLayoutDefinition.js';
 export * from './NavbarDeviceGridLayoutDefinition.js';
 export * from './NavbarLayoutDefinition.js';
 export * from './PageLayoutDefinition.js';

package/schemas/index.js

@@ -57,6 +57,7 @@ export * from './actions/ResourceSubscriptionUnsubscribeActionDefinition.js';
 export * from './actions/ResourceUpdateActionDefinition.js';
 export * from './actions/ResourceUpdateGroupActionDefinition.js';
 export * from './actions/ResourceUpdatePositionsActionDefinition.js';
+export * from './actions/ScrollActionDefinition.js';
 export * from './actions/ShareActionDefinition.js';
 export * from './actions/StaticActionDefinition.js';
 export * from './actions/StorageAppendActionDefinition.js';
@@ -128,6 +129,7 @@ export * from './GridBreakpointsDefinition.js';
 export * from './GridLayoutDefinition.js';
 export * from './GridSpacingDefinition.js';
 export * from './ResponsiveGridLayoutDefinition.js';
+export * from './BuiltinPagesLayoutDefinition.js';
 export * from './NavbarDeviceGridLayoutDefinition.js';
 export * from './NavbarLayoutDefinition.js';
 export * from './PageLayoutDefinition.js';

package/types/action.d.ts

@@ -48,5 +48,5 @@ export type ResourcePatchAction = RequestLikeAction<'resource.patch'>;
 /**
  * An action that can be called from within a block.
  */
-export type Action = BaseAction<'analytics'> | BaseAction<'app.member.current.patch'> | BaseAction<'app.member.delete'> | BaseAction<'app.member.invite'> | BaseAction<'app.member.login'> | BaseAction<'app.member.logout'> | BaseAction<'app.member.properties.patch'> | BaseAction<'app.member.query'> | BaseAction<'app.member.register'> | BaseAction<'app.member.role.update'> | BaseAction<'condition'> | BaseAction<'controller'> | BaseAction<'csv.parse'> | BaseAction<'dialog.error'> | BaseAction<'dialog.ok'> | BaseAction<'dialog'> | BaseAction<'download'> | BaseAction<'each'> | BaseAction<'email'> | BaseAction<'event'> | BaseAction<'flow.back'> | BaseAction<'flow.cancel'> | BaseAction<'flow.finish'> | BaseAction<'flow.next'> | BaseAction<'flow.to'> | BaseAction<'group.member.create'> | BaseAction<'group.member.delete'> | BaseAction<'group.member.invite'> | BaseAction<'group.member.query'> | BaseAction<'group.member.role.update'> | BaseAction<'group.query'> | BaseAction<'group.selected.update'> | BaseAction<'link.back'> | BaseAction<'link.next'> | BaseAction<'match'> | BaseAction<'message'> | BaseAction<'noop'> | BaseAction<'notify'> | BaseAction<'resource.subscription.status'> | BaseAction<'resource.subscription.subscribe'> | BaseAction<'resource.subscription.toggle'> | BaseAction<'resource.subscription.unsubscribe'> | BaseAction<'share'> | BaseAction<'static'> | BaseAction<'storage.append'> | BaseAction<'storage.delete'> | BaseAction<'storage.read'> | BaseAction<'storage.subtract'> | BaseAction<'storage.update'> | BaseAction<'storage.write'> | BaseAction<'throw'> | BaseAction<'webhook'> | LinkAction | LogAction | RequestAction | ResourceCountAction | ResourceCreateAction | ResourceDeleteAction | ResourceDeleteAllAction | ResourceDeleteBulkAction | ResourceGetAction | ResourceHistoryGetAction | ResourcePatchAction | ResourceQueryAction | ResourceUpdateAction | ResourceUpdateGroupAction | ResourceUpdatePositionsAction;
+export type Action = BaseAction<'analytics'> | BaseAction<'app.member.current.patch'> | BaseAction<'app.member.delete'> | BaseAction<'app.member.invite'> | BaseAction<'app.member.login'> | BaseAction<'app.member.logout'> | BaseAction<'app.member.properties.patch'> | BaseAction<'app.member.query'> | BaseAction<'app.member.register'> | BaseAction<'app.member.role.update'> | BaseAction<'condition'> | BaseAction<'controller'> | BaseAction<'csv.parse'> | BaseAction<'dialog.error'> | BaseAction<'dialog.ok'> | BaseAction<'dialog'> | BaseAction<'download'> | BaseAction<'each'> | BaseAction<'email'> | BaseAction<'event'> | BaseAction<'flow.back'> | BaseAction<'flow.cancel'> | BaseAction<'flow.finish'> | BaseAction<'flow.next'> | BaseAction<'flow.to'> | BaseAction<'group.member.create'> | BaseAction<'group.member.delete'> | BaseAction<'group.member.invite'> | BaseAction<'group.member.query'> | BaseAction<'group.member.role.update'> | BaseAction<'group.query'> | BaseAction<'group.selected.update'> | BaseAction<'link.back'> | BaseAction<'link.next'> | BaseAction<'match'> | BaseAction<'message'> | BaseAction<'noop'> | BaseAction<'notify'> | BaseAction<'resource.subscription.status'> | BaseAction<'resource.subscription.subscribe'> | BaseAction<'resource.subscription.toggle'> | BaseAction<'resource.subscription.unsubscribe'> | BaseAction<'scroll'> | BaseAction<'share'> | BaseAction<'static'> | BaseAction<'storage.append'> | BaseAction<'storage.delete'> | BaseAction<'storage.read'> | BaseAction<'storage.subtract'> | BaseAction<'storage.update'> | BaseAction<'storage.write'> | BaseAction<'throw'> | BaseAction<'webhook'> | LinkAction | LogAction | RequestAction | ResourceCountAction | ResourceCreateAction | ResourceDeleteAction | ResourceDeleteAllAction | ResourceDeleteBulkAction | ResourceGetAction | ResourceHistoryGetAction | ResourcePatchAction | ResourceQueryAction | ResourceUpdateAction | ResourceUpdateGroupAction | ResourceUpdatePositionsAction;
 export {};

package/types/actionDefinition.d.ts

@@ -3,8 +3,8 @@ import { type BlockDefinition } from './block.js';
 import { type BulmaColor } from './bulma.js';
 import { type HTTPMethods } from './http.js';
 import { type Remapper } from './remapper.js';
-export type ActionDefinition = AnalyticsAction | AppMemberCurrentPatchAction | AppMemberDeleteAction | AppMemberInviteAction | AppMemberLoginAction | AppMemberLogoutAction | AppMemberPropertiesPatchAction | AppMemberQueryAction | AppMemberRegisterAction | AppMemberRoleUpdateAction | BaseActionDefinition<'dialog.error'> | BaseActionDefinition<'dialog.ok'> | BaseActionDefinition<'flow.back'> | BaseActionDefinition<'flow.cancel'> | BaseActionDefinition<'flow.finish'> | BaseActionDefinition<'flow.next'> | BaseActionDefinition<'group.query'> | BaseActionDefinition<'link.back'> | BaseActionDefinition<'link.next'> | BaseActionDefinition<'noop'> | BaseActionDefinition<'throw'> | ConditionActionDefinition | ControllerActionDefinition | CsvParserActionDefinition | DialogActionDefinition | DownloadActionDefinition | EachActionDefinition | EmailActionDefinition | EventActionDefinition | FlowToActionDefinition | GroupMemberCreateActionDefinition | GroupMemberDeleteActionDefinition | GroupMemberInviteActionDefinition | GroupMemberQueryActionDefinition | GroupMemberRoleUpdateActionDefinition | GroupSelectedUpdateActionDefinition | LinkActionDefinition | LogActionDefinition | MatchActionDefinition | MessageActionDefinition | NotifyActionDefinition | RequestActionDefinition | ResourceCountActionDefinition | ResourceCreateActionDefinition | ResourceDeleteActionDefinition | ResourceDeleteAllActionDefinition | ResourceDeleteBulkActionDefinition | ResourceGetActionDefinition | ResourceHistoryGetActionDefinition | ResourcePatchActionDefinition | ResourceQueryActionDefinition | ResourceSubscriptionStatusActionDefinition | ResourceSubscriptionSubscribeActionDefinition | ResourceSubscriptionToggleActionDefinition | ResourceSubscriptionUnsubscribeActionDefinition | ResourceUpdateActionDefinition | ResourceUpdateGroupActionDefinition | ResourceUpdatePositionsActionDefinition | ShareActionDefinition | StaticActionDefinition | StorageAppendActionDefinition | StorageDeleteActionDefinition | StorageReadActionDefinition | StorageSubtractActionDefinition | StorageUpdateActionDefinition | StorageWriteActionDefinition | WebhookActionDefinition;
-export type ActionName = 'analytics' | 'app.member.current.patch' | 'app.member.delete' | 'app.member.invite' | 'app.member.login' | 'app.member.logout' | 'app.member.properties.patch' | 'app.member.query' | 'app.member.register' | 'app.member.role.update' | 'condition' | 'controller' | 'csv.parse' | 'dialog.error' | 'dialog.ok' | 'dialog' | 'download' | 'each' | 'email' | 'event' | 'flow.back' | 'flow.cancel' | 'flow.finish' | 'flow.next' | 'flow.to' | 'group.member.create' | 'group.member.delete' | 'group.member.invite' | 'group.member.query' | 'group.member.role.update' | 'group.query' | 'group.selected.update' | 'link.back' | 'link.next' | 'link' | 'log' | 'match' | 'message' | 'noop' | 'notify' | 'request' | 'resource.count' | 'resource.create' | 'resource.delete.all' | 'resource.delete.bulk' | 'resource.delete' | 'resource.get' | 'resource.history.get' | 'resource.patch' | 'resource.query' | 'resource.subscription.status' | 'resource.subscription.subscribe' | 'resource.subscription.toggle' | 'resource.subscription.unsubscribe' | 'resource.update.group' | 'resource.update.positions' | 'resource.update' | 'share' | 'static' | 'storage.append' | 'storage.delete' | 'storage.read' | 'storage.subtract' | 'storage.update' | 'storage.write' | 'throw' | 'webhook';
+export type ActionDefinition = AnalyticsAction | AppMemberCurrentPatchAction | AppMemberDeleteAction | AppMemberInviteAction | AppMemberLoginAction | AppMemberLogoutAction | AppMemberPropertiesPatchAction | AppMemberQueryAction | AppMemberRegisterAction | AppMemberRoleUpdateAction | BaseActionDefinition<'dialog.error'> | BaseActionDefinition<'dialog.ok'> | BaseActionDefinition<'flow.back'> | BaseActionDefinition<'flow.cancel'> | BaseActionDefinition<'flow.finish'> | BaseActionDefinition<'flow.next'> | BaseActionDefinition<'group.query'> | BaseActionDefinition<'link.back'> | BaseActionDefinition<'link.next'> | BaseActionDefinition<'noop'> | BaseActionDefinition<'throw'> | ConditionActionDefinition | ControllerActionDefinition | CsvParserActionDefinition | DialogActionDefinition | DownloadActionDefinition | EachActionDefinition | EmailActionDefinition | EventActionDefinition | FlowToActionDefinition | GroupMemberCreateActionDefinition | GroupMemberDeleteActionDefinition | GroupMemberInviteActionDefinition | GroupMemberQueryActionDefinition | GroupMemberRoleUpdateActionDefinition | GroupSelectedUpdateActionDefinition | LinkActionDefinition | LogActionDefinition | MatchActionDefinition | MessageActionDefinition | NotifyActionDefinition | RequestActionDefinition | ResourceCountActionDefinition | ResourceCreateActionDefinition | ResourceDeleteActionDefinition | ResourceDeleteAllActionDefinition | ResourceDeleteBulkActionDefinition | ResourceGetActionDefinition | ResourceHistoryGetActionDefinition | ResourcePatchActionDefinition | ResourceQueryActionDefinition | ResourceSubscriptionStatusActionDefinition | ResourceSubscriptionSubscribeActionDefinition | ResourceSubscriptionToggleActionDefinition | ResourceSubscriptionUnsubscribeActionDefinition | ResourceUpdateActionDefinition | ResourceUpdateGroupActionDefinition | ResourceUpdatePositionsActionDefinition | ScrollActionDefinition | ShareActionDefinition | StaticActionDefinition | StorageAppendActionDefinition | StorageDeleteActionDefinition | StorageReadActionDefinition | StorageSubtractActionDefinition | StorageUpdateActionDefinition | StorageWriteActionDefinition | WebhookActionDefinition;
+export type ActionName = 'analytics' | 'app.member.current.patch' | 'app.member.delete' | 'app.member.invite' | 'app.member.login' | 'app.member.logout' | 'app.member.properties.patch' | 'app.member.query' | 'app.member.register' | 'app.member.role.update' | 'condition' | 'controller' | 'csv.parse' | 'dialog.error' | 'dialog.ok' | 'dialog' | 'download' | 'each' | 'email' | 'event' | 'flow.back' | 'flow.cancel' | 'flow.finish' | 'flow.next' | 'flow.to' | 'group.member.create' | 'group.member.delete' | 'group.member.invite' | 'group.member.query' | 'group.member.role.update' | 'group.query' | 'group.selected.update' | 'link.back' | 'link.next' | 'link' | 'log' | 'match' | 'message' | 'noop' | 'notify' | 'request' | 'resource.count' | 'resource.create' | 'resource.delete.all' | 'resource.delete.bulk' | 'resource.delete' | 'resource.get' | 'resource.history.get' | 'resource.patch' | 'resource.query' | 'resource.subscription.status' | 'resource.subscription.subscribe' | 'resource.subscription.toggle' | 'resource.subscription.unsubscribe' | 'resource.update.group' | 'resource.update.positions' | 'resource.update' | 'scroll' | 'share' | 'static' | 'storage.append' | 'storage.delete' | 'storage.read' | 'storage.subtract' | 'storage.update' | 'storage.write' | 'throw' | 'webhook';
 export interface BaseActionDefinition<T extends ActionName> {
     /**
      * The type of the action.
@@ -203,6 +203,12 @@ export interface LogActionDefinition extends BaseActionDefinition<'log'> {
      */
     level?: 'error' | 'info' | 'warn';
 }
+export interface ScrollActionDefinition extends BaseActionDefinition<'scroll'> {
+    /**
+     * Where on the page to scroll to.
+     */
+    to: 'bottom' | 'top';
+}
 export interface ShareActionDefinition extends BaseActionDefinition<'share'> {
     /**
      * The URL that is being shared.

package/types/core.d.ts

@@ -9,7 +9,7 @@ import { type ResourceDefinition } from './resource.js';
 import { type AppRole, type ViewRole } from './roles.js';
 import { type Security } from './security.js';
 import { type Theme } from './theme.js';
-import { type GridBreakpointsDefinition, type NavbarLayoutDefinition, type PageLayoutDefinition } from './gridLayout.js';
+import { type BuiltinPagesLayoutDefinition, type GridBreakpointsDefinition, type NavbarLayoutDefinition, type PageLayoutDefinition } from './gridLayout.js';
 export type SettingName = 'email' | 'languages' | 'name' | 'password' | 'phoneNumber' | 'picture';
 export type AppContentSecurityPolicy = Record<string, string[]>;
 /**
@@ -24,6 +24,10 @@ export interface IconRegistryEntry {
      * The name of the app-level asset holding the icon’s SVG artwork.
      */
     asset: string;
+    /**
+     * Font Awesome icons this entry replaces throughout the app.
+     */
+    overrides?: IconName[];
 }
 /**
  * A mapping of semantic icon keys to the assets holding their artwork.
@@ -149,6 +153,18 @@ export interface AppDefinition {
          * Each rendered area must be included and their first visual occurrence must follow that order.
          */
         navbar?: NavbarLayoutDefinition;
+        /**
+         * Responsive grid layout for the built-in pages of the app.
+         *
+         * Applies unchanged to every built-in page and every state of it. Without this, no built-in
+         * page becomes a grid or gains a heading.
+         *
+         * The available template areas are `resend-banner`, `title`, `content`, and
+         * `bottom-navigation`. Every rendered breakpoint places `content`, and each of the others is
+         * either placed by every breakpoint or by none. Their first visual occurrence must follow that
+         * order.
+         */
+        builtinPages?: BuiltinPagesLayoutDefinition;
         /**
          * Minimum viewport widths in pixels at which the tablet and desktop grid layouts apply.
          *
@@ -283,7 +299,7 @@ export interface BasePageDefinition {
      * An optional icon from the Font Awesome icon set, or an `icon:<key>` reference to the app’s
      * `icons` registry.
      *
-     * This will be displayed in the navigation menu.
+     * This will be displayed in the navigation menu and the breadcrumb trail.
      */
     icon?: IconReference;
     /**

package/types/gridLayout.d.ts

@@ -31,3 +31,4 @@ export interface ResponsiveNavbarGridLayoutDefinition {
 }
 export type NavbarLayoutDefinition = RequireAtLeastOne<ResponsiveNavbarGridLayoutDefinition>;
 export type PageLayoutDefinition = RequireAtLeastOne<ResponsiveGridLayoutDefinition>;
+export type BuiltinPagesLayoutDefinition = RequireAtLeastOne<ResponsiveGridLayoutDefinition>;

package/validation.js

@@ -6,7 +6,7 @@ import { BlockParamInstanceValidator } from './BasicValidator.js';
 import { getAppBlocks, normalizeBlockName } from './blockUtils.js';
 import { partialNormalized } from './constants/index.js';
 import { findPageByName } from './findPageByName.js';
-import { breadcrumbsGridArea, getCascadedGridTemplateAreas, getGridTemplateAreas, gridDeviceOrder, } from './gridUtils.js';
+import { bottomNavigationGridArea, breadcrumbsGridArea, builtinPagesGridAreaOrder, getBuiltinPagesDefaultGridLayout, getCascadedGridTemplateAreas, getGridTemplateAreas, gridDeviceOrder, resendBannerGridArea, } from './gridUtils.js';
 import { isValidIconName, parseIconReference } from './icons.js';
 import { iterAction, iterApp } from './iterApp.js';
 import { has } from './miscellaneous.js';
@@ -510,56 +510,140 @@ function validateResponsiveGridLayoutDefinition(layoutDefinition, report, path)
         ]);
     }
 }
-function validateBlockGridAreas(blocks, layoutDefinition, report, path) {
-    const templateAreas = getGridTemplateAreas(layoutDefinition);
-    for (const [idx, block] of blocks.entries()) {
-        if (block.gridArea === breadcrumbsGridArea) {
-            report(block.gridArea, 'is reserved for the breadcrumb trail', [...path, idx, 'gridArea']);
+/**
+ * Check the areas of a single grid template against the order the runtime renders them in.
+ *
+ * Reading the template row by row and cell by cell, the first occurrence of each area has to come
+ * in the order the runtime renders them, so that keyboard, screen reader, and visual order agree.
+ *
+ * @param template The template rows to check.
+ * @param rules The areas the template may name and the messages to report with.
+ * @param report The report function to use.
+ * @param templatePath The path of the template within the app definition.
+ */
+function validateGridTemplateAreaOrder(template, rules, report, templatePath) {
+    const allowedAreas = new Set(['.', ...rules.areaOrder]);
+    const visualAreaOrder = [];
+    const visualAreas = new Set();
+    for (const [rowIndex, row] of template.entries()) {
+        for (const area of row.split(' ')) {
+            if (!allowedAreas.has(area)) {
+                report(row, rules.unknownAreaMessage(area), [...templatePath, rowIndex]);
+            }
+            else if (area !== '.' && !visualAreas.has(area)) {
+                visualAreas.add(area);
+                visualAreaOrder.push(area);
+            }
         }
-        else if (layoutDefinition && block.gridArea && !templateAreas.has(block.gridArea)) {
-            report(block.gridArea, `does not match any area defined in the layout template. Available areas: ${[...templateAreas].join(', ') || 'none'}`, [...path, idx, 'gridArea']);
+    }
+    let hasMissingArea = false;
+    if (rules.required) {
+        for (const area of rules.required.areas) {
+            if (!visualAreas.has(area)) {
+                hasMissingArea = true;
+                report(template, rules.required.missingAreaMessage(area), templatePath);
+            }
         }
     }
+    if (hasMissingArea) {
+        return;
+    }
+    const expectedAreaOrder = rules.areaOrder.filter((area) => visualAreas.has(area));
+    if (visualAreaOrder.some((area, index) => area !== expectedAreaOrder[index])) {
+        report(template, rules.orderMessage(expectedAreaOrder), templatePath);
+    }
 }
-function validateBreadcrumbsGridArea(layout, report, path, breadcrumbsEnabled) {
-    if (!layout || !getGridTemplateAreas(layout).has(breadcrumbsGridArea)) {
+function validateBuiltinPagesLayout(layout, report, path) {
+    if (!layout) {
         return;
     }
-    if (!breadcrumbsEnabled) {
-        for (const [deviceName, deviceDefinition] of Object.entries(layout)) {
-            const template = deviceDefinition?.layout?.template;
-            if (template?.some((row) => row.split(' ').includes(breadcrumbsGridArea))) {
-                report(template, `the '${breadcrumbsGridArea}' grid area requires layout.breadcrumbs to be enabled`, [...path, deviceName, 'layout', 'template']);
-            }
+    validateResponsiveGridLayoutDefinition(layout, report, path);
+    for (const [deviceName, deviceDefinition] of Object.entries(layout)) {
+        const deviceLayout = deviceDefinition?.layout;
+        if (!deviceLayout?.template) {
+            continue;
+        }
+        validateGridTemplateAreaOrder(deviceLayout.template, {
+            areaOrder: builtinPagesGridAreaOrder,
+            unknownAreaMessage: (area) => `unknown built-in page grid area '${area}'`,
+            orderMessage: (expectedAreaOrder) => `built-in page grid areas must follow the accessible order: ${expectedAreaOrder.join(', ')}`,
+        }, report, [...path, deviceName, 'layout', 'template']);
+    }
+    // A device without a grid of its own inherits the one of the next smaller device, so the areas a
+    // breakpoint renders are not the areas its own template names. Content renders in every state, so
+    // every breakpoint needs a slot for it, and an opted in area needs one at every breakpoint too.
+    const defaultLayout = getBuiltinPagesDefaultGridLayout(layout);
+    const cascaded = getCascadedGridTemplateAreas(layout, defaultLayout);
+    for (const area of defaultLayout.template) {
+        const missing = gridDeviceOrder.filter((device) => !cascaded[device].has(area));
+        if (missing.length) {
+            report(layout, `the '${area}' grid area is missing from the grid rendered on ${missing.join(', ')}`, path);
+        }
+    }
+}
+function validateBlockGridAreas(blocks, layoutDefinition, report, path) {
+    const templateAreas = getGridTemplateAreas(layoutDefinition);
+    for (const [idx, block] of blocks.entries()) {
+        if (layoutDefinition && block.gridArea && !templateAreas.has(block.gridArea)) {
+            report(block.gridArea, `does not match any area defined in the layout template. Available areas: ${[...templateAreas].join(', ') || 'none'}`, [...path, idx, 'gridArea']);
         }
-        return;
     }
-    // A device inherits the template of the next smaller one, so an area defined only for a larger
-    // device leaves the trail without a slot to sit in below that breakpoint.
+}
+// A device inherits the template of the next smaller one, so an area defined only for a larger
+// device leaves the element without a slot to sit in below that breakpoint.
+function validateGridAreaCascade(layout, area, report, path) {
     const cascaded = getCascadedGridTemplateAreas(layout);
-    const missing = gridDeviceOrder.filter((device) => !cascaded[device].has(breadcrumbsGridArea));
+    const missing = gridDeviceOrder.filter((device) => !cascaded[device].has(area));
     if (missing.length) {
-        report(layout, `the '${breadcrumbsGridArea}' grid area is missing from the grid rendered on ${missing.join(', ')}`, path);
+        report(layout, `the '${area}' grid area is missing from the grid rendered on ${missing.join(', ')}`, path);
     }
 }
-function validateConsistentBreadcrumbsGridArea(subPages, report) {
-    // The trail belongs to the page, so it may not appear on one sub page and be missing from the
-    // next. Defining the area consistently also lets the app runtime tell from the page definition
-    // alone whether a page renders the trail from its grid or below the title bar.
-    const declaresArea = ([subPage]) => getGridTemplateAreas(subPage.layout).has(breadcrumbsGridArea);
-    const declaring = subPages.filter(declaresArea);
-    if (!declaring.length || declaring.length === subPages.length) {
+function validateReservedGridAreas(layout, report, path, breadcrumbsEnabled) {
+    const areas = getGridTemplateAreas(layout);
+    if (!layout || !areas.size) {
         return;
     }
-    for (const entry of subPages) {
-        if (!declaresArea(entry)) {
-            report(entry[0], `the '${breadcrumbsGridArea}' grid area must be defined by every sub page of this page or by none`, entry[1]);
+    if (areas.has(breadcrumbsGridArea)) {
+        if (breadcrumbsEnabled) {
+            validateGridAreaCascade(layout, breadcrumbsGridArea, report, path);
+        }
+        else {
+            for (const [deviceName, deviceDefinition] of Object.entries(layout)) {
+                const template = deviceDefinition?.layout?.template;
+                if (template?.some((row) => row.split(' ').includes(breadcrumbsGridArea))) {
+                    report(template, `the '${breadcrumbsGridArea}' grid area requires layout.breadcrumbs to be enabled`, [...path, deviceName, 'layout', 'template']);
+                }
+            }
+        }
+    }
+    // The banner and the bottom navigation render nothing when the app has none, so naming their
+    // area only has to give every device a slot for it.
+    for (const area of [resendBannerGridArea, bottomNavigationGridArea]) {
+        if (areas.has(area)) {
+            validateGridAreaCascade(layout, area, report, path);
+        }
+    }
+}
+function validateConsistentGridAreas(subPages, report) {
+    // A reserved area belongs to the page, so it may not appear on one sub page and be missing from
+    // the next. Defining the area consistently also lets the app runtime tell from the page definition
+    // alone whether a page renders the element from its grid or in its default position.
+    for (const area of [breadcrumbsGridArea, resendBannerGridArea, bottomNavigationGridArea]) {
+        const declaresArea = ([subPage]) => getGridTemplateAreas(subPage.layout).has(area);
+        const declaring = subPages.filter(declaresArea);
+        if (!declaring.length || declaring.length === subPages.length) {
+            continue;
+        }
+        for (const entry of subPages) {
+            if (!declaresArea(entry)) {
+                report(entry[0], `the '${area}' grid area must be defined by every sub page of this page or by none`, entry[1]);
+            }
         }
     }
 }
 function validateSubPageLayout(layout, blocks, report, path, breadcrumbsEnabled) {
     validateResponsiveGridLayoutDefinition(layout, report, path);
-    validateBreadcrumbsGridArea(layout, report, path, breadcrumbsEnabled);
+    validateReservedGridAreas(layout, report, path, breadcrumbsEnabled);
     if (blocks) {
         validateBlockGridAreas(blocks, layout, report, [...path, 'blocks']);
     }
@@ -584,42 +668,23 @@ function validateGridLayout(definition, report) {
             report(navbarLayout, 'cannot be combined with stackedHeader', ['layout', 'navbar']);
         }
         const navbarAreaOrder = ['logo', 'name', 'navigation', 'controls'];
-        const allowedAreas = new Set(['.', ...navbarAreaOrder]);
         const requiredAreas = definition.layout?.logo?.position === 'navbar' ? navbarAreaOrder : navbarAreaOrder.slice(1);
         for (const [deviceName, deviceDefinition] of Object.entries(navbarLayout)) {
             if (!deviceDefinition?.layout?.template) {
                 continue;
             }
-            const { template } = deviceDefinition.layout;
-            const templatePath = ['layout', 'navbar', deviceName, 'layout', 'template'];
-            const visualAreaOrder = [];
-            const visualAreas = new Set();
-            for (const [rowIndex, row] of deviceDefinition.layout.template.entries()) {
-                for (const area of row.split(' ')) {
-                    if (!allowedAreas.has(area)) {
-                        report(row, `unknown navbar grid area '${area}'`, [...templatePath, rowIndex]);
-                    }
-                    else if (area !== '.' && !visualAreas.has(area)) {
-                        visualAreas.add(area);
-                        visualAreaOrder.push(area);
-                    }
-                }
-            }
-            let hasMissingArea = false;
-            for (const area of requiredAreas) {
-                if (!visualAreas.has(area)) {
-                    hasMissingArea = true;
-                    report(template, `navbar grid is missing required area '${area}'`, templatePath);
-                }
-            }
-            if (!hasMissingArea) {
-                const expectedAreaOrder = navbarAreaOrder.filter((area) => visualAreas.has(area));
-                if (visualAreaOrder.some((area, index) => area !== expectedAreaOrder[index])) {
-                    report(template, `navbar grid areas must follow the accessible order: ${expectedAreaOrder.join(', ')}`, templatePath);
-                }
-            }
+            validateGridTemplateAreaOrder(deviceDefinition.layout.template, {
+                areaOrder: navbarAreaOrder,
+                required: {
+                    areas: requiredAreas,
+                    missingAreaMessage: (area) => `navbar grid is missing required area '${area}'`,
+                },
+                unknownAreaMessage: (area) => `unknown navbar grid area '${area}'`,
+                orderMessage: (expectedAreaOrder) => `navbar grid areas must follow the accessible order: ${expectedAreaOrder.join(', ')}`,
+            }, report, ['layout', 'navbar', deviceName, 'layout', 'template']);
         }
     }
+    validateBuiltinPagesLayout(definition.layout?.builtinPages, report, ['layout', 'builtinPages']);
     const breadcrumbsEnabled = definition.layout?.breadcrumbs === true;
     iterApp(definition, {
         onPage(page, path) {
@@ -640,7 +705,7 @@ function validateGridLayout(definition, report) {
                 for (const [tab, tabPath] of tabs) {
                     validateSubPageLayout(tab.layout, tab.blocks, report, tabPath, breadcrumbsEnabled);
                 }
-                validateConsistentBreadcrumbsGridArea(tabs, report);
+                validateConsistentGridAreas(tabs, report);
                 return;
             }
             // Flow page
@@ -653,7 +718,7 @@ function validateGridLayout(definition, report) {
                 for (const [step, stepPath] of steps) {
                     validateSubPageLayout(step.layout, step.blocks, report, stepPath, breadcrumbsEnabled);
                 }
-                validateConsistentBreadcrumbsGridArea(steps, report);
+                validateConsistentGridAreas(steps, report);
                 return;
             }
             // Loop page
@@ -667,7 +732,7 @@ function validateGridLayout(definition, report) {
                 for (const [subPage, subPagePath] of subPages) {
                     validateSubPageLayout(subPage.layout, subPage.blocks, report, subPagePath, breadcrumbsEnabled);
                 }
-                validateConsistentBreadcrumbsGridArea(subPages, report);
+                validateConsistentGridAreas(subPages, report);
             }
         },
     });
@@ -1243,13 +1308,36 @@ function validateIcons({ icons }, report) {
     if (!icons) {
         return;
     }
-    for (const key of Object.keys(icons)) {
+    // Each overridden icon name, mapped to the key of the entry listing it.
+    const overridden = new Map();
+    for (const [key, entry] of Object.entries(icons)) {
         if (!isValidIconName(key)) {
             report(key, 'is not a valid icon key; use lower case letters, digits, and single hyphens', [
                 'icons',
                 key,
             ]);
         }
+        // The schema reports entries and override lists of the wrong shape.
+        if (!Array.isArray(entry?.overrides)) {
+            continue;
+        }
+        for (const [index, name] of entry.overrides.entries()) {
+            if (typeof name !== 'string') {
+                continue;
+            }
+            const earlier = overridden.get(name);
+            if (earlier === undefined) {
+                overridden.set(name, key);
+            }
+            else if (earlier !== key) {
+                report(name, `is already overridden by icons.${earlier}`, [
+                    'icons',
+                    key,
+                    'overrides',
+                    index,
+                ]);
+            }
+        }
     }
 }
 /**