@phis/ui 0.3.0 → 0.4.1

package/components/widgets/navigation-descriptor-resolver.server.js

@@ -127,6 +127,11 @@ export async function resolvePhiDescriptorNavigationItems(runtime, navKey, overl
     /*
      * One batch per source language. A Module's label names its language and is translated from it; an
      * operator's names none and is read in the Site's source language, which the server supplies.
+     *
+     * The batch also decides the store. A Module's label is the platform's text, the same on every Site,
+     * so it is translated once in the global store, which only the operator edits. A Site that wants
+     * other words renames the entry, the label loses its `sourceLocale`, and from then on it is the
+     * Site's own text in the Site's store. The Builder's surfaces carry Module labels only.
      */
     await Promise.all([...collectNavigationLabels(surface.items)].map(async ([sourceLocale, group]) => {
         const labels = [...group];
@@ -136,7 +141,7 @@ export async function resolvePhiDescriptorNavigationItems(runtime, navKey, overl
             locale: runtime.locale.current,
             ...(sourceLocale ? { sourceLocale } : {}),
         };
-        const translator = runtime.area === "builder"
+        const translator = sourceLocale || runtime.area === "builder"
             ? createGlobalTranslator(options)
             : createSiteTranslator({ ...options, siteKey: rt.siteKey });
         /*

package/components/widgets/shared/markdown-render.js

@@ -2,7 +2,7 @@ import { cache } from "react";
 import { unified } from "unified";
 import remarkParse from "remark-parse";
 import remarkGfm from "remark-gfm";
-import { trBulk } from "../../../server-helpers/translate";
+import { trBulk, trBulkForLocale } from "../../../server-helpers/translate";
 import { resolvePhiCodeLanguage, tokenizePhiCode } from "./markdown-code-tokens";
 import { readPhiInternalReference } from "../../../types/references";
 import { resolvePhiWidgetInternalReferences } from "../helpers/internal-reference-resolver.server";
@@ -294,11 +294,21 @@ function parseTranslatedMarkdownInlines(translatedHtml, metadata) {
     appendText(translatedHtml.slice(cursor));
     return stack.length === 1 ? stack[0]?.children ?? [] : null;
 }
-async function buildMarkdownInlineMap(tree, translate, sourceLocale) {
+/*
+ * The render's own locale where there is one. A static render has no request to ask: `trBulk` reads the
+ * locale from the request headers, finds none, and answers in the Site's default -- which left every
+ * static Public page's body in its source language under a translated header.
+ */
+function translateUnits(locale, msgs, format, sourceLocale) {
+    return locale
+        ? trBulkForLocale(locale, msgs, 0, format, sourceLocale)
+        : trBulk(msgs, 0, format, sourceLocale);
+}
+async function buildMarkdownInlineMap(tree, translate, sourceLocale, locale) {
     const units = [];
     collectMarkdownTranslationUnits(tree, units);
     const translated = translate && units.length > 0
-        ? await trBulk(units.map((unit) => unit.html), 0, "html", sourceLocale)
+        ? await translateUnits(locale, units.map((unit) => unit.html), "html", sourceLocale)
         : units.map((unit) => unit.html);
     /*
      * Image titles are prose and translate as plain text, each on its own: they are separate sentences
@@ -307,7 +317,7 @@ async function buildMarkdownInlineMap(tree, translate, sourceLocale) {
      */
     const titleSlots = units.flatMap((unit) => unit.metadata.titles.flatMap((title, index) => title ? [{ metadata: unit.metadata, index, title }] : []));
     if (translate && titleSlots.length > 0) {
-        const translatedTitles = await trBulk(titleSlots.map((slot) => slot.title), 0, "text", sourceLocale);
+        const translatedTitles = await translateUnits(locale, titleSlots.map((slot) => slot.title), "text", sourceLocale);
         titleSlots.forEach((slot, index) => {
             slot.metadata.titles[slot.index] = translatedTitles[index] || slot.title;
         });
@@ -508,7 +518,7 @@ async function resolveMarkdownRenderDataFromSource(markdown, translate, headingI
         headingIdPrefix,
         headingOffset,
     };
-    const inlineMap = await buildMarkdownInlineMap(tree, translate, sourceLocale);
+    const inlineMap = await buildMarkdownInlineMap(tree, translate, sourceLocale, runtime?.locale.current);
     const blocks = mapBlockNodes(tree.children, context, inlineMap);
     return { blocks, headings: context.headings };
 }

package/helpers/cms-layout-defaults.js

@@ -1,6 +1,7 @@
 import { PHI_SPACE } from "../theme/antd-css-var-contract";
 import { PHI_RENDERABLE_BLOCK_DEFAULT_ANCHOR } from "./renderable-block-defaults";
 import { isPhiRecord } from "./is-record";
+import { PHI_SEQUENCE_DEFAULT_DURATION_MS, PHI_SEQUENCE_DEFAULT_EASING } from "./motion";
 import { PHI_SURFACE_CARD } from "./surface-presets";
 import { PHI_GRID_LAYOUT_DEFAULT_COLUMNS } from "../components/layouts/phi-grid-contract";
 import { PHI_MASONRY_LAYOUT_DEFAULT_COLUMNS } from "../components/layouts/phi-masonry-contract";
@@ -119,9 +120,13 @@ const PHI_STACK_LAYOUT_PANEL_PRESET = {
 };
 const PHI_CAROUSEL_LAYOUT_DEFAULTS = {
     // A slide is what tells somebody the slots are a run rather than a set, so it is the opening
-    // impression rather than a preference to be discovered. Everything else is left absent: the
-    // duration then follows the theme, and the window shows one slot until somebody widens it.
+    // impression rather than a preference to be discovered. The window shows one slot until
+    // somebody widens it. The pace is the sequence's own, stated so the Inspector shows the number
+    // in effect rather than an empty box.
     transition: "slide",
+    transitionDurationMs: PHI_SEQUENCE_DEFAULT_DURATION_MS,
+    transitionEasing: PHI_SEQUENCE_DEFAULT_EASING,
+    slotGap: "none",
     visibleSlots: 1,
     windowAnchor: "start",
     /*
@@ -134,6 +139,8 @@ const PHI_CAROUSEL_LAYOUT_DEFAULTS = {
      */
     controls: "arrows",
     loop: false,
+    autoplayMs: 0,
+    lookahead: 1,
 };
 const PHI_CAROUSEL_LAYOUT_PANEL_PRESET = {
     padding: PHI_SPACE.base,

package/helpers/cms-region-keys.d.ts

@@ -33,5 +33,5 @@ export declare function resolvePhiCmsRegionOwnership(regionKey: string | null |
  * know is not a placement anybody chose -- refusing it would hide Widgets over a typo.
  */
 export declare function phiCmsRegionAcceptsWidget(regionKey: string | null | undefined, required: PhiCmsRegionOwnership | null | undefined): boolean;
-export declare function resolvePhiCmsRegionType(regionKey: string | null | undefined): 10 | 40 | 50 | 11 | 12 | 20 | 21 | 25 | 30 | 39 | 41;
+export declare function resolvePhiCmsRegionType(regionKey: string | null | undefined): 10 | 40 | 12 | 50 | 11 | 20 | 21 | 25 | 30 | 39 | 41;
 export declare function resolvePhiCmsRegionKey(regionType: number | null | undefined): "content" | "header_top" | "header_main" | "header_bottom" | "sider_left" | "sider_right" | "hero" | "footer_top" | "footer_main" | "footer_bottom" | "drawer_right" | undefined;

package/helpers/motion.d.ts

@@ -43,6 +43,13 @@ export declare const PHI_SEQUENCE_TRANSITION_MAX_MS = 600000;
  * exactly, so the grid the spinner walks holds every value it offers.
  */
 export declare const PHI_SEQUENCE_TRANSITION_STEP_MS = 100;
+/**
+ * What a sequence that says nothing moves at: long enough to read as movement, short enough to
+ * ignore. Exported so that a Widget can state it as its default and the Inspector shows the number
+ * that is actually in effect instead of an empty box.
+ */
+export declare const PHI_SEQUENCE_DEFAULT_DURATION_MS = 320;
+export declare const PHI_SEQUENCE_DEFAULT_EASING: PhiMotionEasing;
 /**
  * The two ways of showing a sequence, and which end of a wider window an index means.
  *

package/helpers/motion.js

@@ -58,6 +58,13 @@ export const PHI_SEQUENCE_TRANSITION_MAX_MS = 600_000;
  * exactly, so the grid the spinner walks holds every value it offers.
  */
 export const PHI_SEQUENCE_TRANSITION_STEP_MS = 100;
+/**
+ * What a sequence that says nothing moves at: long enough to read as movement, short enough to
+ * ignore. Exported so that a Widget can state it as its default and the Inspector shows the number
+ * that is actually in effect instead of an empty box.
+ */
+export const PHI_SEQUENCE_DEFAULT_DURATION_MS = 320;
+export const PHI_SEQUENCE_DEFAULT_EASING = "ease-in-out";
 /**
  * The two ways of showing a sequence, and which end of a wider window an index means.
  *

package/helpers/text-source.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Whose words a text Widget holds, which decides the store that translates them.
+ *
+ * A Preset's text is the platform's: the same sentence on every installation, translated once in the
+ * global store, which only the operator edits. Text an author wrote on a Site is the Site's and goes to
+ * the Site's store. The Preset says so by writing `textSource: "preset"` beside its words; the Builder
+ * drops the marker the moment an author changes one of the Widget's texts, and from then on all of them
+ * are the Site's.
+ *
+ * A marker rather than a translation done by the Preset itself: adopting a Preset stores the tree it
+ * built, so a Preset that translated its words would freeze one locale into the Site's copy.
+ */
+export declare const PHI_TEXT_SOURCE_PRESET: "preset";
+export type PhiTextSource = typeof PHI_TEXT_SOURCE_PRESET;
+export declare function readPhiTextSource(value: unknown): PhiTextSource | undefined;
+/** Whether a Builder edit of this field ends the Preset's ownership of the Widget's words. */
+export declare function isPhiAuthoredTextField(field: {
+    type?: string;
+}): boolean;

package/helpers/text-source.js

@@ -0,0 +1,20 @@
+/**
+ * Whose words a text Widget holds, which decides the store that translates them.
+ *
+ * A Preset's text is the platform's: the same sentence on every installation, translated once in the
+ * global store, which only the operator edits. Text an author wrote on a Site is the Site's and goes to
+ * the Site's store. The Preset says so by writing `textSource: "preset"` beside its words; the Builder
+ * drops the marker the moment an author changes one of the Widget's texts, and from then on all of them
+ * are the Site's.
+ *
+ * A marker rather than a translation done by the Preset itself: adopting a Preset stores the tree it
+ * built, so a Preset that translated its words would freeze one locale into the Site's copy.
+ */
+export const PHI_TEXT_SOURCE_PRESET = "preset";
+export function readPhiTextSource(value) {
+    return value === PHI_TEXT_SOURCE_PRESET ? value : undefined;
+}
+/** Whether a Builder edit of this field ends the Preset's ownership of the Widget's words. */
+export function isPhiAuthoredTextField(field) {
+    return field.type === "string";
+}

package/next/config.mjs

@@ -57,7 +57,7 @@ function customRenders(antd, h, Fragment) {
     Form: (Form) => h(Form, null, h(Form.Item, { label: "Label" }, h(antd.Input))),
     Dropdown: (Dropdown) => h(Dropdown, { menu: { items: [] } }, h("div")),
     Menu: (Menu) => h(Menu, { items: [] }),
-    QRCode: (QRCode) => h(QRCode, { value: "https://phisys.com" }),
+    QRCode: (QRCode) => h(QRCode, { value: "https://phis.dev" }),
     Tree: (Tree) => h(Tree, { treeData: [] }),
     Tag: (Tag) => h(Fragment, null, h(Tag, { color: "blue" }, "Tag"), h(Tag, { color: "success" }, "Tag")),
     Badge: (Badge) => h(Fragment, null, h(Badge), h(Badge.Ribbon)),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phis/ui",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public"

package/plugins/runtime-modules/asset/data-providers.d.ts

@@ -25,6 +25,7 @@ export declare const PHI_ASSET_RUNTIME_DATA_PROVIDER_DESCRIPTORS: ({
     settingsFields: ({
         key: string;
         type: "choice";
+        heading: string;
         label: string;
         optionsProvider: {
             providerKey: `${string}/${string}`;
@@ -38,6 +39,7 @@ export declare const PHI_ASSET_RUNTIME_DATA_PROVIDER_DESCRIPTORS: ({
         type: "boolean";
         label: string;
         description: string;
+        heading?: undefined;
         optionsProvider?: undefined;
         options?: undefined;
         min?: undefined;
@@ -50,6 +52,7 @@ export declare const PHI_ASSET_RUNTIME_DATA_PROVIDER_DESCRIPTORS: ({
             value: string;
             label: string;
         }[];
+        heading?: undefined;
         optionsProvider?: undefined;
         description?: undefined;
         min?: undefined;
@@ -60,6 +63,7 @@ export declare const PHI_ASSET_RUNTIME_DATA_PROVIDER_DESCRIPTORS: ({
         label: string;
         min: number;
         max: number;
+        heading?: undefined;
         optionsProvider?: undefined;
         description?: undefined;
         options?: undefined;

package/plugins/runtime-modules/asset/data-providers.js

@@ -36,6 +36,7 @@ export const PHI_ASSET_RUNTIME_DATA_PROVIDER_DESCRIPTORS = [
             {
                 key: "folderId",
                 type: "choice",
+                heading: "Folder",
                 label: "Folder",
                 optionsProvider: { providerKey: PHI_ASSET_RUNTIME_DATA_PROVIDER_KEYS.mediaFolderChoices },
             },

package/plugins/runtime-modules/asset/definition.d.ts

@@ -32,6 +32,7 @@ export declare const PHI_ASSET_RUNTIME_MODULE_DEFINITION: {
         settingsFields: ({
             key: string;
             type: "choice";
+            heading: string;
             label: string;
             optionsProvider: {
                 providerKey: `${string}/${string}`;
@@ -45,6 +46,7 @@ export declare const PHI_ASSET_RUNTIME_MODULE_DEFINITION: {
             type: "boolean";
             label: string;
             description: string;
+            heading?: undefined;
             optionsProvider?: undefined;
             options?: undefined;
             min?: undefined;
@@ -57,6 +59,7 @@ export declare const PHI_ASSET_RUNTIME_MODULE_DEFINITION: {
                 value: string;
                 label: string;
             }[];
+            heading?: undefined;
             optionsProvider?: undefined;
             description?: undefined;
             min?: undefined;
@@ -67,6 +70,7 @@ export declare const PHI_ASSET_RUNTIME_MODULE_DEFINITION: {
             label: string;
             min: number;
             max: number;
+            heading?: undefined;
             optionsProvider?: undefined;
             description?: undefined;
             options?: undefined;

package/plugins/runtime-modules/asset/presets.d.ts

@@ -1,2 +1,54 @@
 import type { PhiCmsRoutePresetDescriptor } from "../../../types/cms-module-descriptors";
-export declare const PHI_ASSET_RUNTIME_MODULE_ROUTES: PhiCmsRoutePresetDescriptor[];
+export declare const PHI_ASSET_RUNTIME_MODULE_ROUTES: (PhiCmsRoutePresetDescriptor | {
+    tour: {
+        readonly id: "@phis/ui/modules/asset/media";
+        readonly version: 1;
+        readonly steps: readonly [{
+            readonly key: "find";
+            readonly target: `cms:${import("@phis/contracts/cms").PhiCmsInstanceId}:filters`;
+            readonly title: "Finding an asset";
+            readonly description: "Kind narrows the library to images or other files, Flags to assets marked Featured, Locked, Mask or Background, Folder to one folder. The plus beside Folder creates a new folder. The search looks through file names, titles and alternative texts.";
+            readonly placement: "bottom";
+            readonly ifMissing: "skip";
+        }, {
+            readonly key: "upload";
+            readonly target: `cms:${import("@phis/contracts/cms").PhiCmsInstanceId}:toolbar`;
+            readonly title: "Adding files";
+            readonly description: "Upload opens a field to drop files into. They arrive in the folder and with the flags chosen in the filters, so choosing the folder first saves sorting later. Reset clears the filters, Reload fetches the library again.";
+            readonly placement: "bottom";
+            readonly ifMissing: "skip";
+        }, {
+            readonly key: "library";
+            readonly target: `cms:${import("@phis/contracts/cms").PhiCmsInstanceId}:items`;
+            readonly title: "The Site's library";
+            readonly description: "Every image and file the Site has, newest first. It is the same library every image picker of the Site opens, so what is uploaded here can be placed anywhere.";
+            readonly placement: "top";
+        }, {
+            readonly key: "inspector";
+            readonly target: `cms:${import("@phis/contracts/cms").PhiCmsInstanceId}:items`;
+            readonly title: "What an asset says about itself";
+            readonly description: "A click on an asset opens its Inspector: its folder, its title, the alternative text read out to those who cannot see it, its flags, and the focal rectangle -- the part of a picture that stays in view when a variant cuts it to another shape. Saved there, it applies wherever the asset is used.";
+            readonly placement: "top";
+        }, {
+            readonly key: "pages";
+            readonly target: `cms:${import("@phis/contracts/cms").PhiCmsInstanceId}:pagination`;
+            readonly title: "Page by page";
+            readonly description: "The library is shown a page at a time; how many fit on one is chosen here.";
+            readonly placement: "top";
+            readonly ifMissing: "skip";
+        }];
+    };
+    ownerModuleId: import("../contracts").PhiRuntimeModuleId;
+    presetKey: string;
+    presetVersion: number;
+    area: import("@phis/contracts/cms").PhiCmsAreaKey;
+    path: string;
+    landingPage?: true;
+    title: string;
+    defaultPageFlags?: number;
+    loadTree: (context: import("../../../types").PhiCmsDescriptorBuildContext & {
+        activeModuleIds: ReadonlySet<import("../contracts").PhiRuntimeModuleId>;
+        params: Readonly<Record<string, string>>;
+    }) => import("../../../types").PhiResolvedCmsPageTree | Promise<import("../../../types").PhiResolvedCmsPageTree>;
+    navigation?: readonly import("../../../types").PhiCmsNavigationInjectionDescriptor[];
+})[];

package/plugins/runtime-modules/asset/presets.js

@@ -1,18 +1,22 @@
 import { PHI_ASSET_RUNTIME_MODULE_ID } from "./ids";
 import { buildPhiSidebarRoutePresetDescriptor } from "../sidebar-route";
+import { PHI_ASSET_MEDIA_TOUR } from "./tour";
 export const PHI_ASSET_RUNTIME_MODULE_ROUTES = [
-    buildPhiSidebarRoutePresetDescriptor({
-        area: "builder",
-        anchor: "main",
-        ownerModuleId: PHI_ASSET_RUNTIME_MODULE_ID,
-        presetKey: "builder-media-page",
-        title: "Media",
-        path: "/media",
-        itemKey: "@phis/ui/modules/asset/nav/builder/media",
-        icon: "antd:picture",
-        loadTree: ({ page, runtime }) => import("./trees/phi-default-builder-media-page-tree")
-            .then((module) => module.buildPhiDefaultBuilderMediaPageTree({ page, runtime })),
-    }),
+    {
+        ...buildPhiSidebarRoutePresetDescriptor({
+            area: "builder",
+            anchor: "main",
+            ownerModuleId: PHI_ASSET_RUNTIME_MODULE_ID,
+            presetKey: "builder-media-page",
+            title: "Media",
+            path: "/media",
+            itemKey: "@phis/ui/modules/asset/nav/builder/media",
+            icon: "antd:picture",
+            loadTree: ({ page, runtime }) => import("./trees/phi-default-builder-media-page-tree")
+                .then((module) => module.buildPhiDefaultBuilderMediaPageTree({ page, runtime })),
+        }),
+        tour: PHI_ASSET_MEDIA_TOUR,
+    },
     buildPhiSidebarRoutePresetDescriptor({
         area: "admin",
         anchor: "settings",

package/plugins/runtime-modules/asset/tour.d.ts

@@ -0,0 +1,44 @@
+/**
+ * The Media Tour. What the Page does not say is that it is the one library every picker of the Site
+ * draws from, and that what is set on an asset here -- its words, its folder, its focal rectangle -- goes
+ * wherever the asset is used. The Inspector is described rather than opened: it opens on an asset, and a
+ * Tour cannot know which assets a Site has.
+ */
+export declare const PHI_ASSET_MEDIA_TOUR: {
+    readonly id: "@phis/ui/modules/asset/media";
+    readonly version: 1;
+    readonly steps: readonly [{
+        readonly key: "find";
+        readonly target: `cms:${import("@phis/contracts/cms").PhiCmsInstanceId}:filters`;
+        readonly title: "Finding an asset";
+        readonly description: "Kind narrows the library to images or other files, Flags to assets marked Featured, Locked, Mask or Background, Folder to one folder. The plus beside Folder creates a new folder. The search looks through file names, titles and alternative texts.";
+        readonly placement: "bottom";
+        readonly ifMissing: "skip";
+    }, {
+        readonly key: "upload";
+        readonly target: `cms:${import("@phis/contracts/cms").PhiCmsInstanceId}:toolbar`;
+        readonly title: "Adding files";
+        readonly description: "Upload opens a field to drop files into. They arrive in the folder and with the flags chosen in the filters, so choosing the folder first saves sorting later. Reset clears the filters, Reload fetches the library again.";
+        readonly placement: "bottom";
+        readonly ifMissing: "skip";
+    }, {
+        readonly key: "library";
+        readonly target: `cms:${import("@phis/contracts/cms").PhiCmsInstanceId}:items`;
+        readonly title: "The Site's library";
+        readonly description: "Every image and file the Site has, newest first. It is the same library every image picker of the Site opens, so what is uploaded here can be placed anywhere.";
+        readonly placement: "top";
+    }, {
+        readonly key: "inspector";
+        readonly target: `cms:${import("@phis/contracts/cms").PhiCmsInstanceId}:items`;
+        readonly title: "What an asset says about itself";
+        readonly description: "A click on an asset opens its Inspector: its folder, its title, the alternative text read out to those who cannot see it, its flags, and the focal rectangle -- the part of a picture that stays in view when a variant cuts it to another shape. Saved there, it applies wherever the asset is used.";
+        readonly placement: "top";
+    }, {
+        readonly key: "pages";
+        readonly target: `cms:${import("@phis/contracts/cms").PhiCmsInstanceId}:pagination`;
+        readonly title: "Page by page";
+        readonly description: "The library is shown a page at a time; how many fit on one is chosen here.";
+        readonly placement: "top";
+        readonly ifMissing: "skip";
+    }];
+};

package/plugins/runtime-modules/asset/tour.js

@@ -0,0 +1,53 @@
+import { PHI_ASSET_RUNTIME_MODULE_ID } from "./ids";
+import { PHI_ASSET_MEDIA_PAGE_WIDGET_IDS } from "./media-page-ids";
+const LIBRARY_ID = PHI_ASSET_MEDIA_PAGE_WIDGET_IDS.widgetMediaPreview;
+/**
+ * The Media Tour. What the Page does not say is that it is the one library every picker of the Site
+ * draws from, and that what is set on an asset here -- its words, its folder, its focal rectangle -- goes
+ * wherever the asset is used. The Inspector is described rather than opened: it opens on an asset, and a
+ * Tour cannot know which assets a Site has.
+ */
+export const PHI_ASSET_MEDIA_TOUR = {
+    id: `${PHI_ASSET_RUNTIME_MODULE_ID}/media`,
+    version: 1,
+    steps: [
+        {
+            key: "find",
+            target: `cms:${LIBRARY_ID}:filters`,
+            title: "Finding an asset",
+            description: "Kind narrows the library to images or other files, Flags to assets marked Featured, Locked, Mask or Background, Folder to one folder. The plus beside Folder creates a new folder. The search looks through file names, titles and alternative texts.",
+            placement: "bottom",
+            ifMissing: "skip",
+        },
+        {
+            key: "upload",
+            target: `cms:${LIBRARY_ID}:toolbar`,
+            title: "Adding files",
+            description: "Upload opens a field to drop files into. They arrive in the folder and with the flags chosen in the filters, so choosing the folder first saves sorting later. Reset clears the filters, Reload fetches the library again.",
+            placement: "bottom",
+            ifMissing: "skip",
+        },
+        {
+            key: "library",
+            target: `cms:${LIBRARY_ID}:items`,
+            title: "The Site's library",
+            description: "Every image and file the Site has, newest first. It is the same library every image picker of the Site opens, so what is uploaded here can be placed anywhere.",
+            placement: "top",
+        },
+        {
+            key: "inspector",
+            target: `cms:${LIBRARY_ID}:items`,
+            title: "What an asset says about itself",
+            description: "A click on an asset opens its Inspector: its folder, its title, the alternative text read out to those who cannot see it, its flags, and the focal rectangle -- the part of a picture that stays in view when a variant cuts it to another shape. Saved there, it applies wherever the asset is used.",
+            placement: "top",
+        },
+        {
+            key: "pages",
+            target: `cms:${LIBRARY_ID}:pagination`,
+            title: "Page by page",
+            description: "The library is shown a page at a time; how many fit on one is chosen here.",
+            placement: "top",
+            ifMissing: "skip",
+        },
+    ],
+};

package/plugins/runtime-modules/auth/trees/phi-default-pub-confirm-page-tree.js

@@ -1,3 +1,4 @@
+import { PHI_TEXT_SOURCE_PRESET } from "../../../../helpers/text-source";
 import { createPhiPresetCmsInstanceIdMap } from "../../../../types/cms-instance-id";
 import { PHI_SPACE } from "../../../../theme/antd-css-var-contract";
 import { PHI_AUTH_RUNTIME_MODULE_ID } from "../ids";
@@ -97,6 +98,7 @@ export async function buildPhiDefaultPubConfirmPageTree({ page, presetKey, }) {
                 sortOrder: 0,
                 label: "pub confirmation description widget",
                 config: {
+                    textSource: PHI_TEXT_SOURCE_PRESET,
                     eyebrow: "Confirm Email",
                     title: "Activate your account",
                     description: "Review your registration details and confirm your email address to activate access.",
@@ -160,6 +162,7 @@ export async function buildPhiDefaultPubConfirmPageTree({ page, presetKey, }) {
                 slotIndex: 2,
                 label: "pub confirmation missing token",
                 config: {
+                    textSource: PHI_TEXT_SOURCE_PRESET,
                     text: "No confirmation token was provided. Open the confirmation link from your email.",
                     tone: "secondary",
                     visibleWhen: withoutToken,

package/plugins/runtime-modules/auth/trees/phi-default-pub-login-page-tree.js

@@ -1,3 +1,4 @@
+import { PHI_TEXT_SOURCE_PRESET } from "../../../../helpers/text-source";
 import { createPhiPresetCmsInstanceIdMap } from "../../../../types/cms-instance-id";
 import { PHI_SPACE } from "../../../../theme/antd-css-var-contract";
 import { PHI_LAYOUT } from "../../../../theme/phi-tokens";
@@ -98,6 +99,7 @@ export async function buildPhiDefaultPubLoginPageTree({ page, presetKey, runtime
                 sortOrder: 0,
                 label: "pub login description widget",
                 config: {
+                    textSource: PHI_TEXT_SOURCE_PRESET,
                     eyebrow: "Login",
                     title: "Sign in to your account",
                     description: "Access your customer workspace, orders, and account details.",

package/plugins/runtime-modules/auth/trees/phi-default-pub-registration-page-tree.js

@@ -1,3 +1,4 @@
+import { PHI_TEXT_SOURCE_PRESET } from "../../../../helpers/text-source";
 import { createPhiPresetCmsInstanceIdMap } from "../../../../types/cms-instance-id";
 import { PHI_SPACE } from "../../../../theme/antd-css-var-contract";
 import { PHI_AUTH_RUNTIME_MODULE_ID } from "../ids";
@@ -68,6 +69,7 @@ export async function buildPhiDefaultPubRegistrationPageTree({ page, presetKey,
                 sortOrder: 0,
                 label: "pub registration description widget",
                 config: {
+                    textSource: PHI_TEXT_SOURCE_PRESET,
                     eyebrow: "Register",
                     title: "Create account",
                     description: "Create your account to access your personalized workspace.",
@@ -113,6 +115,7 @@ export async function buildPhiDefaultPubRegistrationPageTree({ page, presetKey,
                 slotIndex: 1,
                 label: "pub registration notice",
                 config: {
+                    textSource: PHI_TEXT_SOURCE_PRESET,
                     text: "We only use your details to create and support your account.",
                     tone: "secondary",
                 },

package/plugins/runtime-modules/auth/trees/phi-default-pub-reset-password-page-tree.js

@@ -1,3 +1,4 @@
+import { PHI_TEXT_SOURCE_PRESET } from "../../../../helpers/text-source";
 import { createPhiPresetCmsInstanceIdMap } from "../../../../types/cms-instance-id";
 import { PHI_SPACE } from "../../../../theme/antd-css-var-contract";
 import { PHI_AUTH_RUNTIME_MODULE_ID } from "../ids";
@@ -89,6 +90,7 @@ export async function buildPhiDefaultPubResetPasswordPageTree({ page, presetKey,
                 sortOrder: 0,
                 label: "pub reset password description widget",
                 config: {
+                    textSource: PHI_TEXT_SOURCE_PRESET,
                     eyebrow: "Reset password",
                     title: "Choose a new password",
                     description: "Use the reset link from your email to choose a new secure password.",
@@ -113,6 +115,7 @@ export async function buildPhiDefaultPubResetPasswordPageTree({ page, presetKey,
                 slotIndex: 0,
                 label: "pub reset password intro",
                 config: {
+                    textSource: PHI_TEXT_SOURCE_PRESET,
                     text: "If the account exists, a reset email is on its way. Open the link in that email to choose a new password.",
                     tone: "secondary",
                     visibleWhen: withoutToken,