@phis/ui 0.1.0 → 0.2.0

package/components/media/phi-asset-inspector-section.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CopyOutlined } from "@ant-design/icons";
-import { Flex, Typography } from "antd";
 import NextImage from "next/image";
 import { PhiImageAssetVariantKeyName, PhiMediaKind, isPhiMediaAssetOriginalOptimizable, resolvePhiImageAssetVariantSpec, } from "../../constants/media";
 import { PhiButtonControl } from "../controls/phi-button-control";
@@ -12,6 +11,8 @@ import { PhiMediaKindIcon } from "./phi-media-kind-icon";
 import { resolvePhiMediaAssetDisplayDimensions } from "./phi-image-preview-data";
 import { resolveFocalRectCoverImageStyle } from "./focal-rect";
 import { resolvePhiImagePresentation } from "./image-presentation";
+import { PhiFlexControl } from "../controls/phi-flex-control";
+import { PhiTypographyControl } from "../controls/phi-typography-control";
 function formatBytes(bytes) {
     if (typeof bytes !== "number" || !Number.isFinite(bytes) || bytes <= 0)
         return null;
@@ -75,7 +76,7 @@ export function PhiAssetInspectorSection({ section, asset, selectedVariantKey, s
             [labels.inspector.contentTypeLabel, asset.contentType],
             [labels.inspector.originalNameLabel, asset.originalName],
         ];
-        return (_jsx(Flex, { vertical: true, gap: "small", style: { width: "100%", minWidth: 0 }, children: technicalValues.map(([label, value]) => (_jsxs(Flex, { vertical: true, gap: 2, style: { minWidth: 0 }, children: [_jsx(Typography.Text, { type: "secondary", children: label }), _jsxs(Flex, { align: "center", gap: "small", style: { minWidth: 0 }, children: [_jsx(Typography.Text, { code: true, ellipsis: true, style: { flex: "1 1 auto", minWidth: 0 }, children: value }), _jsx(PhiButtonControl, { ariaLabel: labels.inspector.copyLabelTemplate.replace("%1", label), type: "text", size: "small", icon: _jsx(CopyOutlined, {}), onClick: () => copy(value) })] })] }, label))) }));
+        return (_jsx(PhiFlexControl, { vertical: true, gap: "small", style: { width: "100%", minWidth: 0 }, children: technicalValues.map(([label, value]) => (_jsxs(PhiFlexControl, { vertical: true, gap: 2, style: { minWidth: 0 }, children: [_jsx(PhiTypographyControl, { type: "secondary", children: label }), _jsxs(PhiFlexControl, { align: "center", gap: "small", style: { minWidth: 0 }, children: [_jsx(PhiTypographyControl, { code: true, ellipsis: true, style: { flex: "1 1 auto", minWidth: 0 }, children: value }), _jsx(PhiButtonControl, { ariaLabel: labels.inspector.copyLabelTemplate.replace("%1", label), type: "text", size: "small", icon: _jsx(CopyOutlined, {}), onClick: () => copy(value) })] })] }, label))) }));
     }
     const previewFrame = resolvePreviewFrame(asset, selectedVariantKey);
     const isOriginalSelection = selectedVariantKey == null;
@@ -110,7 +111,7 @@ export function PhiAssetInspectorSection({ section, asset, selectedVariantKey, s
      * So the one question is whether the optimiser may touch this original, which for an SVG it may not.
      */
     const unoptimizedPreview = !isPhiMediaAssetOriginalOptimizable(asset);
-    return (_jsxs(Flex, { vertical: true, gap: "small", style: {
+    return (_jsxs(PhiFlexControl, { vertical: true, gap: "small", style: {
             width: "100%",
             minWidth: 0,
             "--phi-labeled-control-label-width": "33.333333%",
@@ -125,7 +126,7 @@ export function PhiAssetInspectorSection({ section, asset, selectedVariantKey, s
                                 aspectRatio: previewFrame?.width && previewFrame.height
                                     ? `${previewFrame.width} / ${previewFrame.height}`
                                     : undefined,
-                            }, children: selectedVariantCoverImageStyle ? (_jsx(NextImage, { alt: asset.altText ?? asset.title ?? asset.originalName, src: variantPresentation?.url ?? asset.deliveryUrl, width: asset.width ?? 1, height: asset.height ?? 1, unoptimized: unoptimizedPreview, sizes: previewFrame?.width ? `${previewFrame.width}px` : "340px", placeholder: asset.blurDataUrl ? "blur" : "empty", blurDataURL: asset.blurDataUrl ?? undefined, style: selectedVariantCoverImageStyle })) : (_jsx(NextImage, { alt: asset.altText ?? asset.title ?? asset.originalName, src: variantPresentation?.url ?? asset.deliveryUrl, fill: true, unoptimized: unoptimizedPreview, sizes: previewFrame?.width ? `${previewFrame.width}px` : "340px", placeholder: asset.blurDataUrl ? "blur" : "empty", blurDataURL: asset.blurDataUrl ?? undefined, style: { objectFit: variantPresentation?.fit ?? previewFrame?.fit ?? "contain" } })) })) }))) : (_jsx(Flex, { align: "center", justify: "center", style: { width: "100%", height: "100%" }, children: _jsx(PhiMediaKindIcon, { kind: asset.kind, size: 40 }) })), previewFrame?.kindLabel ? (_jsx(PhiTagControl, { style: { position: "absolute", insetInlineStart: 10, top: 10, ...overlayTagStyle }, children: previewFrame.kindLabel })) : null, byteLabel ? (_jsx(PhiTagControl, { style: { position: "absolute", insetInlineEnd: 10, top: 10, ...overlayTagStyle }, children: byteLabel })) : null, previewFrame?.label ? (_jsx(PhiTagControl, { style: { position: "absolute", insetInlineStart: 10, bottom: 10, ...overlayTagStyle }, children: previewFrame.label })) : null, asset.kind === PhiMediaKind.Image && onFocalRectOpen ? (_jsx("div", { style: { position: "absolute", insetInlineEnd: 10, bottom: 10, zIndex: 3 }, children: _jsx(PhiButtonControl, { size: "small", label: labels.editor.focalRectButtonLabel, type: "primary", onClick: onFocalRectOpen }) })) : null] }), _jsx(Typography.Text, { strong: true, ellipsis: true, children: asset.originalName }), asset.kind === PhiMediaKind.Image && onVariantKeyChange ? (_jsx(PhiSelectControl, { label: labels.inspector.variantsLabel, value: selectedVariantKey == null ? "original" : String(selectedVariantKey), options: [
+                            }, children: selectedVariantCoverImageStyle ? (_jsx(NextImage, { alt: asset.altText ?? asset.title ?? asset.originalName, src: variantPresentation?.url ?? asset.deliveryUrl, width: asset.width ?? 1, height: asset.height ?? 1, unoptimized: unoptimizedPreview, sizes: previewFrame?.width ? `${previewFrame.width}px` : "340px", placeholder: asset.blurDataUrl ? "blur" : "empty", blurDataURL: asset.blurDataUrl ?? undefined, style: selectedVariantCoverImageStyle })) : (_jsx(NextImage, { alt: asset.altText ?? asset.title ?? asset.originalName, src: variantPresentation?.url ?? asset.deliveryUrl, fill: true, unoptimized: unoptimizedPreview, sizes: previewFrame?.width ? `${previewFrame.width}px` : "340px", placeholder: asset.blurDataUrl ? "blur" : "empty", blurDataURL: asset.blurDataUrl ?? undefined, style: { objectFit: variantPresentation?.fit ?? previewFrame?.fit ?? "contain" } })) })) }))) : (_jsx(PhiFlexControl, { align: "center", justify: "center", style: { width: "100%", height: "100%" }, children: _jsx(PhiMediaKindIcon, { kind: asset.kind, size: 40 }) })), previewFrame?.kindLabel ? (_jsx(PhiTagControl, { style: { position: "absolute", insetInlineStart: 10, top: 10, ...overlayTagStyle }, children: previewFrame.kindLabel })) : null, byteLabel ? (_jsx(PhiTagControl, { style: { position: "absolute", insetInlineEnd: 10, top: 10, ...overlayTagStyle }, children: byteLabel })) : null, previewFrame?.label ? (_jsx(PhiTagControl, { style: { position: "absolute", insetInlineStart: 10, bottom: 10, ...overlayTagStyle }, children: previewFrame.label })) : null, asset.kind === PhiMediaKind.Image && onFocalRectOpen ? (_jsx("div", { style: { position: "absolute", insetInlineEnd: 10, bottom: 10, zIndex: 3 }, children: _jsx(PhiButtonControl, { size: "small", label: labels.editor.focalRectButtonLabel, type: "primary", onClick: onFocalRectOpen }) })) : null] }), _jsx(PhiTypographyControl, { strong: true, ellipsis: true, children: asset.originalName }), asset.kind === PhiMediaKind.Image && onVariantKeyChange ? (_jsx(PhiSelectControl, { label: labels.inspector.variantsLabel, value: selectedVariantKey == null ? "original" : String(selectedVariantKey), options: [
                     { value: "original", label: labels.inspector.originalVariantLabel },
                     ...Object.entries(PhiImageAssetVariantKeyName).map(([value, variantName]) => ({
                         value,

package/components/media/phi-image-inspector-widget.d.ts

@@ -1,4 +1,4 @@
-import type { PhiCmsAssetInspectorWidgetConfig } from "../../plugins/runtime-modules/asset/widgets/image-inspector/config";
+import type { PhiCmsAssetInspectorWidgetConfig } from "../../types/media";
 import type { PhiAssetInspectorWidgetLabels, PhiAssetWidgetLabels } from "./media-widget-labels";
 export type PhiAssetConfigWidgetProps = {
     config?: PhiCmsAssetInspectorWidgetConfig | null;

package/components/media/phi-image-inspector-widget.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { normalizePhiImagePreviewSelectionAsset } from "./phi-image-preview-data";
 import { PhiAssetInspectorSection } from "./phi-asset-inspector-section";
 import { setPhiImagePreviewSelection, usePhiImagePreviewStore } from "./phi-image-preview-store";
-import { PHI_ASSET_CONTROLLER_STORE_KEY } from "./phi-media-scope-controller";
+import { PHI_ASSET_CONTROLLER_STORE_KEY } from "./asset-controller-signals";
 import { normalizeMediaFocalRect } from "./focal-rect";
 import { usePhiControlSignalController } from "../widgets/client/shared/phi-control-signals";
 export function PhiAssetConfigWidget({ config, labels, sitePublicUrl }) {

package/components/media/phi-image-preview-store.d.ts

@@ -32,7 +32,6 @@ export declare function setPhiImagePreviewFolderId(scopeKey: string, folderId: n
 export declare function setPhiImagePreviewFolderPath(scopeKey: string, folderPath: string[] | null): void;
 export declare function setPhiImagePreviewKind(scopeKey: string, kind: PhiMediaKindValue | null): void;
 export declare function setPhiImagePreviewFlags(scopeKey: string, presentationFlags: number | null): void;
-export declare function setPhiImagePreviewDateRange(scopeKey: string, since: string | null, until: string | null): void;
 export declare function setPhiImagePreviewPage(scopeKey: string, page: number): void;
 export declare function setPhiImagePreviewPageSize(scopeKey: string, pageSize: number): void;
 export declare function setPhiImagePreviewResults(scopeKey: string, next: {
@@ -43,17 +42,9 @@ export declare function setPhiImagePreviewResults(scopeKey: string, next: {
     pagination: PhiMediaPickerPagination | null;
     resolvedCollectionRequestKey?: string | null;
 }): void;
-export declare function removePhiImagePreviewAsset(scopeKey: string, assetId: number): void;
 export declare function updatePhiImagePreviewAsset(scopeKey: string, assetId: number, updater: (asset: PhiMediaAssetTile) => PhiMediaAssetTile): void;
 export declare function setPhiImagePreviewLoading(scopeKey: string, loading: boolean): void;
 export declare function setPhiImagePreviewError(scopeKey: string, error: string | null): void;
 export declare function setPhiImagePreviewSelection(scopeKey: string, selectedAssetId: number | null, selectedVariantKey: PhiImageAssetVariantKeyValue | null, selectedAsset?: PhiMediaAssetTile | null): void;
 export declare function bumpPhiImagePreviewRefreshToken(scopeKey: string): void;
 export declare function resetPhiImagePreviewStore(scopeKey: string): void;
-export declare function deletePhiImagePreviewStore(scopeKey: string): void;
-/**
- * Asks for a different Space.
- *
- * Folders belong to the Space they were listed from, so the Folder filter and the page reset with it.
- */
-export declare function setPhiImagePreviewSpace(scopeKey: string, spaceAddress: string | null): void;

package/components/media/phi-image-preview-store.js

@@ -52,9 +52,6 @@ export function setPhiImagePreviewKind(scopeKey, kind) {
 export function setPhiImagePreviewFlags(scopeKey, presentationFlags) {
     phiImagePreviewStore.patch(scopeKey, (current) => ({ ...current, presentationFlags, page: 1, error: null }));
 }
-export function setPhiImagePreviewDateRange(scopeKey, since, until) {
-    phiImagePreviewStore.patch(scopeKey, (current) => ({ ...current, since, until, page: 1, error: null }));
-}
 export function setPhiImagePreviewPage(scopeKey, page) {
     phiImagePreviewStore.patch(scopeKey, (current) => ({ ...current, page: Number.isInteger(page) && page > 0 ? page : 1 }));
 }
@@ -86,14 +83,6 @@ export function setPhiImagePreviewResults(scopeKey, next) {
             : next.resolvedCollectionRequestKey,
     }));
 }
-export function removePhiImagePreviewAsset(scopeKey, assetId) {
-    phiImagePreviewStore.patch(scopeKey, (current) => ({
-        ...current,
-        assets: current.assets.filter((asset) => asset.id !== assetId),
-        selectedAssetId: current.selectedAssetId === assetId ? null : current.selectedAssetId,
-        selectedAsset: current.selectedAsset?.id === assetId ? null : current.selectedAsset,
-    }));
-}
 export function updatePhiImagePreviewAsset(scopeKey, assetId, updater) {
     phiImagePreviewStore.patch(scopeKey, (current) => ({
         ...current,
@@ -123,21 +112,3 @@ export function bumpPhiImagePreviewRefreshToken(scopeKey) {
 export function resetPhiImagePreviewStore(scopeKey) {
     phiImagePreviewStore.reset(scopeKey);
 }
-export function deletePhiImagePreviewStore(scopeKey) {
-    phiImagePreviewStore.deleteScope(scopeKey);
-}
-/**
- * Asks for a different Space.
- *
- * Folders belong to the Space they were listed from, so the Folder filter and the page reset with it.
- */
-export function setPhiImagePreviewSpace(scopeKey, spaceAddress) {
-    phiImagePreviewStore.patch(scopeKey, (current) => ({
-        ...current,
-        spaceAddress: spaceAddress?.trim() || null,
-        folderId: null,
-        folderPath: null,
-        page: 1,
-        error: null,
-    }));
-}

package/components/media/phi-media-picker-binding.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from "react";
 import type { PhiMediaAssetTile } from "../../types/media";
-import type { PhiCmsMediaPickerWidgetConfig } from "../../plugins/runtime-modules/asset/widgets/media-picker/config";
+import type { PhiCmsMediaPickerWidgetConfig } from "../../types/media";
 import type { PhiSearchWidgetLabels } from "../widgets/label-types/search";
 import type { PhiAssetWidgetLabels } from "./media-widget-labels";
 export type PhiMediaPickerBindingProps = {

package/components/media/phi-media-picker-binding.js

@@ -7,12 +7,11 @@ import { usePhiCollectionProvider } from "../widgets/client/shared/phi-collectio
 import { PhiMediaPickerControl } from "../controls/phi-media-picker-control";
 import { normalizePhiMediaPickerMinColumnWidth } from "../controls/phi-media-picker-control-contract";
 import { PHI_ASSET_COLLECTION_DATA_SOURCE } from "./asset-collection-runtime";
-import { buildPhiMediaFolderCascaderOptions, buildPhiMediaFolderValueById, PHI_ASSET_CONTROLLER_STORE_KEY, PHI_ASSET_SIGNAL_CHANNELS, resolvePhiMediaFolderIdFromValue, } from "./phi-media-scope-controller";
+import { buildPhiMediaFolderCascaderOptions, buildPhiMediaFolderValueById, resolvePhiMediaFolderIdFromValue, } from "./media-folder-options";
+import { PHI_ASSET_CONTROLLER_STORE_KEY, PHI_ASSET_SIGNAL_CHANNELS, } from "./asset-controller-signals";
 import { setPhiImagePreviewSelection } from "./phi-image-preview-store";
 import { buildPhiMediaSpaceOptions, usePhiMediaSpaceSelectionAllowed, } from "./media-space-selection";
-function isRecord(value) {
-    return Boolean(value) && typeof value === "object" && !Array.isArray(value);
-}
+import { isPhiRecord } from "../../helpers/is-record";
 export function usePhiMediaPickerBinding({ config, labels, searchLabels, value: controlledValue, onAssetSelect, onAssetClear, open: controlledOpen, onOpenChange, onCommit, onDiscard, onPopupOpenChange, trigger, getPopupContainer, popupRootClassName, }) {
     const [localOpen, setLocalOpen] = useState(false);
     const [localValue, setLocalValue] = useState(controlledValue ?? null);
@@ -31,6 +30,7 @@ export function usePhiMediaPickerBinding({ config, labels, searchLabels, value:
     const spaceSelectionAllowed = usePhiMediaSpaceSelectionAllowed();
     const [total, setTotal] = useState(0);
     const [loading, setLoading] = useState(false);
+    const [loadFailed, setLoadFailed] = useState(false);
     const assetCacheRef = useRef(new Map());
     const isOpen = controlledOpen ?? localOpen;
     const selectedAssetId = controlledValue ?? localValue;
@@ -48,7 +48,7 @@ export function usePhiMediaPickerBinding({ config, labels, searchLabels, value:
         pageSize,
         search: searchQuery,
         sortKey: "created_at",
-        sortOrder: "descend",
+        sortOrder: "descending",
         filters: {
             folderId,
             kind: mediaType,
@@ -74,6 +74,7 @@ export function usePhiMediaPickerBinding({ config, labels, searchLabels, value:
         const abortController = new AbortController();
         const load = async () => {
             setLoading(true);
+            setLoadFailed(false);
             try {
                 const data = await provider.query({
                     resourceKey: source.resourceKey,
@@ -84,29 +85,32 @@ export function usePhiMediaPickerBinding({ config, labels, searchLabels, value:
                 if (abortController.signal.aborted)
                     return;
                 const nextFolders = Array.isArray(data.meta?.folders)
-                    ? data.meta.folders.filter(isRecord)
+                    ? data.meta.folders.filter(isPhiRecord)
                     : [];
-                const nextAssets = data.items.filter(isRecord);
+                const nextAssets = data.items.filter(isPhiRecord);
                 setAssets(nextAssets);
                 for (const asset of nextAssets)
                     assetCacheRef.current.set(asset.id, asset);
                 setFolders(nextFolders);
                 setSpaces(Array.isArray(data.meta?.spaces)
-                    ? data.meta.spaces.filter(isRecord)
+                    ? data.meta.spaces.filter(isPhiRecord)
                     : []);
                 // The answer says which Space it actually served, so the selector follows the control plane
                 // rather than the other way round -- including the first load, which asked for nothing.
-                const activeAddress = isRecord(data.meta?.activeSpace) && typeof data.meta.activeSpace.address === "string"
+                const activeAddress = isPhiRecord(data.meta?.activeSpace) && typeof data.meta.activeSpace.address === "string"
                     ? data.meta.activeSpace.address
                     : null;
                 if (activeAddress)
                     setSpaceAddress(activeAddress);
                 setTotal(typeof data.total === "number" ? data.total : data.items.length);
             }
-            catch {
+            catch (error) {
                 if (!abortController.signal.aborted) {
+                    // A refused or failed read is not an empty library; saying "No assets found" would hide it.
+                    console.error("Media picker failed to load assets.", error);
                     setAssets([]);
                     setTotal(0);
+                    setLoadFailed(true);
                 }
             }
             finally {
@@ -169,7 +173,7 @@ export function usePhiMediaPickerBinding({ config, labels, searchLabels, value:
         showFolderFilter: config?.showFolderFilter ?? true,
         showPagination: config?.showPagination ?? true,
         trigger,
-        labels: { trigger: labels.picker.triggerLabel, title: labels.picker.popoverTitle, search: labels.tool.searchPlaceholder ?? searchLabels.placeholder, folder: labels.tool.folderLabel, space: labels.space.label, empty: bindingError ?? labels.picker.emptyDescription, clear: labels.picker.clearLabel, reload: labels.tool.reloadLabel, tileSize: labels.picker.tileSizeLabel },
+        labels: { trigger: labels.picker.triggerLabel, title: labels.picker.popoverTitle, search: labels.tool.searchPlaceholder ?? searchLabels.placeholder, folder: labels.tool.folderLabel, space: labels.space.label, empty: bindingError ?? (loadFailed ? labels.picker.loadFailedDescription : labels.picker.emptyDescription), clear: labels.picker.clearLabel, reload: labels.tool.reloadLabel, tileSize: labels.picker.tileSizeLabel },
         getPopupContainer,
         popupRootClassName,
         onOpenChange: updateOpen,

package/components/media/phi-media-picker-server.d.ts

@@ -1,5 +1,5 @@
 import type { PhiBlockRuntime } from "../../types";
-import type { PhiCmsMediaPickerWidgetConfig } from "../../plugins/runtime-modules/asset/widgets/media-picker/config";
+import type { PhiCmsMediaPickerWidgetConfig } from "../../types/media";
 export type PhiMediaPickerWidgetServerProps = {
     runtime: Pick<PhiBlockRuntime, "locale">;
     config?: PhiCmsMediaPickerWidgetConfig | null;

package/components/media/phi-media-picker-widget.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import type { PhiMediaAssetTile } from "../../types/media";
-import type { PhiCmsMediaPickerWidgetConfig } from "../../plugins/runtime-modules/asset/widgets/media-picker/config";
+import type { PhiCmsMediaPickerWidgetConfig } from "../../types/media";
 import type { PhiSearchWidgetLabels } from "../widgets/label-types/search";
 import type { PhiAssetWidgetLabels } from "./media-widget-labels";
 export type PhiMediaPickerWidgetProps = {

package/components/media/phi-site-font-assets.js

@@ -48,7 +48,7 @@ export function usePhiSiteFontAssets(enabled = true) {
                 page: 1,
                 pageSize: PHI_SITE_FONT_ASSET_LIMIT,
                 sortKey: "created_at",
-                sortOrder: "descend",
+                sortOrder: "descending",
                 filters: { kind: PhiMediaKind.Font },
             },
             signal: abortController.signal,

package/components/media/use-authoring-asset-details.js

@@ -1,7 +1,9 @@
 "use client";
 import { useEffect, useMemo, useState } from "react";
+import { requestPhiJson } from "../../helpers/client-json-request";
 import { PHI_ASSET_CONTROLLER_STORE_KEY } from "./asset-controller-signals";
 import { usePhiImagePreviewStore } from "./phi-image-preview-store";
+import { buildPhiMediaRequestHeaders } from "./phi-media-request-headers";
 /**
  * Authoring surfaces need the same Asset facts the server render has: the delivery revision that a
  * focal change bumps, the focal rectangle itself, and the intrinsic size. The Picker store already
@@ -18,15 +20,10 @@ export function usePhiAuthoringAssetDetails(assetId) {
         const controller = new AbortController();
         async function run() {
             try {
-                const response = await fetch(`/api/site/media/${assetId}`, {
-                    method: "GET",
-                    headers: { Accept: "application/json" },
-                    cache: "no-store",
-                    signal: controller.signal,
-                });
-                const payload = (await response.json());
+                // With the Area header, as every other Media request: see `buildPhiMediaRequestHeaders`.
+                const reply = await requestPhiJson(`/api/site/media/${assetId}`, { headers: buildPhiMediaRequestHeaders(), signal: controller.signal });
                 if (!controller.signal.aborted) {
-                    setAssetDetails(response.ok ? payload.asset ?? null : null);
+                    setAssetDetails(reply.ok ? reply.payload?.asset ?? null : null);
                 }
             }
             catch (error) {

package/components/menus/phi-account-menu.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode, Ref } from "react";
-import type { PhiNavItem } from "../shell/shell-types";
+import type { PhiAccountAreaEntry, PhiNavItem } from "../shell/shell-types";
 export type PhiAccountMenuLabels = {
     trigger: {
         account: string;
@@ -8,10 +8,8 @@ export type PhiAccountMenuLabels = {
         login: string;
         register: string;
     };
-    authenticated: {
-        profile: string;
-        settings: string;
-        logout: string;
+    areas: {
+        title: string;
     };
 };
 export type PhiAccountMenuState = {
@@ -21,12 +19,7 @@ export type PhiAccountMenuState = {
     registerHref?: string;
 } | {
     kind: "authenticated";
-    profileHref?: string;
-    settingsHref?: string;
-    logoutHref?: string;
     displayName?: string;
-    onProfile?: () => void;
-    onLogout?: () => void;
 };
 export type PhiAccountMenuProps = {
     labels: PhiAccountMenuLabels;
@@ -40,7 +33,17 @@ export type PhiAccountMenuProps = {
      * is an ordinary link.
      */
     contributedItems?: readonly PhiNavItem[];
+    /**
+     * The Areas this person may enter, the one they are standing in among them.
+     *
+     * A group of their own at the foot of the menu: everything above is about the account, and this is
+     * about where to go with it. No surface can carry the list -- an Area's address is its own segment
+     * and which Areas are in it is a property of the person, not of the Page.
+     */
+    areaEntries?: readonly PhiAccountAreaEntry[];
     onOpenOverlay?: (overlayInstanceId: string) => void;
+    /** Sends what an entry carries, for an entry that sends rather than goes. */
+    onEmit?: (item: PhiNavItem) => void;
     avatarSrc?: string;
     avatarAlt?: string;
     icon?: ReactNode;
@@ -51,4 +54,4 @@ export type PhiAccountMenuProps = {
     showLabel?: boolean;
     showChevron?: boolean;
 };
-export declare function PhiAccountMenu({ labels, state, contributedItems, onOpenOverlay, avatarSrc, avatarAlt, icon, triggerRef, open, onOpenChange, mode, showLabel, showChevron, }: PhiAccountMenuProps): import("react").JSX.Element;
+export declare function PhiAccountMenu({ labels, state, contributedItems, areaEntries, onOpenOverlay, onEmit, avatarSrc, avatarAlt, icon, triggerRef, open, onOpenChange, mode, showLabel, showChevron, }: PhiAccountMenuProps): import("react").JSX.Element;

package/components/menus/phi-account-menu.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Link from "next/link";
 import { PhiAvatar } from "../shell/phi-avatar";
-export function PhiAccountMenu({ labels, state, contributedItems, onOpenOverlay, avatarSrc, avatarAlt, icon, triggerRef, open, onOpenChange, mode = "full", showLabel, showChevron, }) {
+export function PhiAccountMenu({ labels, state, contributedItems, areaEntries, onOpenOverlay, onEmit, avatarSrc, avatarAlt, icon, triggerRef, open, onOpenChange, mode = "full", showLabel, showChevron, }) {
     const resolvedShowLabel = showLabel ?? mode === "full";
     const resolvedShowChevron = showChevron ?? mode !== "icon-only";
     const guestLoginItems = state.kind === "guest"
@@ -23,8 +23,27 @@ export function PhiAccountMenu({ labels, state, contributedItems, onOpenOverlay,
      * A contributed entry is a link when it names a path and a button when it names an Overlay. The menu
      * control takes both shapes already -- `label` may be an anchor, or plain text with an `onClick` --
      * so nothing new is needed to render an opener, only to tell the two apart.
+     *
+     * An entry that has entries below it is a submenu and keeps them. A Module contributing a group said
+     * it was a group; flattening it here, or dropping what was under it, would answer for the Module. A
+     * group is a heading and not a destination, so it carries no link even where the resolver found one.
      */
-    const contributedMenuItems = (contributedItems ?? []).map((item) => {
+    function toContributedMenuItem(item) {
+        if (item.separator) {
+            return { key: item.key, type: "divider" };
+        }
+        const children = item.children?.map(toContributedMenuItem);
+        if (children && children.length > 0) {
+            return { key: item.key, label: item.label, children };
+        }
+        if (item.emits?.length) {
+            return {
+                key: item.key,
+                label: item.label,
+                onClick: onEmit ? () => onEmit(item) : undefined,
+                disabled: !onEmit,
+            };
+        }
         if (item.overlayInstanceId) {
             const overlayInstanceId = item.overlayInstanceId;
             return {
@@ -39,7 +58,76 @@ export function PhiAccountMenu({ labels, state, contributedItems, onOpenOverlay,
             label: item.href ? _jsx(Link, { href: item.href, children: item.label }) : item.label,
             disabled: !item.href,
         };
-    });
+    }
+    /*
+     * Where a contributed entry leads is one kind of thing; what it does is another.
+     *
+     * An entry that emits goes nowhere -- signing out is the first of them -- and it is told apart here
+     * by that property rather than by its key, the same way the anchor is. So the destinations stand
+     * together at the top, the acts below them, and the reader never hunts for the one entry that ends
+     * their session among the ones that merely take them somewhere.
+     */
+    const contributed = contributedItems ?? [];
+    const destinationMenuItems = contributed
+        .filter((item) => !item.emits?.length)
+        .map(toContributedMenuItem);
+    const actionMenuItems = contributed
+        .filter((item) => item.emits?.length)
+        .map(toContributedMenuItem);
+    /*
+     * The Area the reader is in is shown and not offered: a link back to the page you are on is an
+     * invitation to a round trip that changes nothing, and leaving it out would drop the one entry that
+     * says where you are. An Area root forwards to wherever this viewer lands, so the segment is enough.
+     *
+     * They stand in a titled group rather than as entries after a rule. What is above the rule is this
+     * account -- the profile, the password, signing out -- and what is below it is somewhere else
+     * entirely. A rule says only that something changes here; the heading says what, which is worth a
+     * line in the one menu that has to make sense from inside every Area.
+     */
+    const areaMenuItems = (areaEntries ?? []).length === 0 ? [] : [{
+            type: "group",
+            key: "account-areas",
+            label: labels.areas.title,
+            /*
+             * A `Link`, like every other entry in this menu.
+             *
+             * It was a plain anchor for months, and the reason was sound while it lasted: a client navigation
+             * across an Area boundary ran away with itself, 42 to 110 navigations that never settled. Measuring
+             * it named the cause, and the cause was never this link. An Area root forwards to its landing Page,
+             * and a forward serialised into a navigation that also changes the Area is what Next's router cannot
+             * settle. Crossing an Area is quiet; a forward is quiet; only the two together were not.
+             *
+             * That is answered where it happens now. The proxy forwards a known Area root with a real HTTP 307
+             * before any router state exists (`gateway/area-root-door.ts`), and where it does not know one yet
+             * the render hands the forward to the browser instead of the router
+             * (`components/cms/phi-hard-forward.tsx`). Measured after: one navigation warm, three cold, against
+             * two document requests for the anchor.
+             *
+             * What the anchor also said -- that the arriving Area is entitled to be built from nothing -- is
+             * still true and still happens: cold, the browser does exactly that. Warm it is not needed, because
+             * the Area being left is not asked to serve the new one; the forward lands before the old tree is
+             * consulted at all.
+             */
+            children: (areaEntries ?? []).map((entry) => ({
+                key: `area-${entry.area}`,
+                label: entry.current ? entry.label : _jsx(Link, { href: entry.href, children: entry.label }),
+                disabled: entry.current,
+            })),
+        }];
+    /*
+     * Nothing about the account is drawn here any more.
+     *
+     * Profile, account security and signing out are entries of the `<area>:account` surface like the ones
+     * a Module contributes, so they arrive through `contributedItems` and are moved, renamed or removed in
+     * the Builder like any other entry. What the menu drew itself was the part nobody could rearrange.
+     *
+     * What it still decides is the grouping: what a Module contributed, then what acts, then where else
+     * this person may go, each set off from the next. A divider appears only between two groups that both
+     * have something in them, so a menu missing a group has no rule hanging in the air. The Areas carry
+     * a heading of their own, so the rule before them says where the account ends and the heading says
+     * what begins.
+     */
+    const groups = [destinationMenuItems, actionMenuItems, areaMenuItems].filter((group) => group.length > 0);
     const menuItems = state.kind === "guest"
         ? [
             ...guestLoginItems,
@@ -50,49 +138,9 @@ export function PhiAccountMenu({ labels, state, contributedItems, onOpenOverlay,
                     }]
                 : []),
         ]
-        : [
-            ...contributedMenuItems,
-            ...(contributedMenuItems.length > 0
-                ? [{ key: "contributed-divider", type: "divider" }]
-                : []),
-            ...(state.profileHref || state.onProfile
-                ? [
-                    {
-                        key: "profile",
-                        label: state.profileHref
-                            ? _jsx(Link, { href: state.profileHref, children: labels.authenticated.profile })
-                            : labels.authenticated.profile,
-                        onClick: state.profileHref ? undefined : state.onProfile,
-                    },
-                ]
-                : []),
-            ...(state.settingsHref
-                ? [
-                    {
-                        key: "settings",
-                        label: _jsx(Link, { href: state.settingsHref, children: labels.authenticated.settings }),
-                    },
-                ]
-                : []),
-            ...((state.profileHref || state.onProfile || state.settingsHref)
-                ? [
-                    {
-                        key: "account-divider",
-                        type: "divider",
-                    },
-                ]
-                : []),
-            state.logoutHref
-                ? {
-                    key: "logout",
-                    label: _jsx(Link, { href: state.logoutHref, children: labels.authenticated.logout }),
-                }
-                : {
-                    key: "logout",
-                    label: labels.authenticated.logout,
-                    onClick: state.onLogout,
-                },
-        ];
+        : groups.flatMap((group, index) => index === 0
+            ? group
+            : [{ key: `account-group-divider-${index}`, type: "divider" }, ...group]);
     return (_jsx(PhiAvatar, { src: avatarSrc, alt: avatarAlt, 
         // A signed-in person has a name; a guest has none, and falls through to the generic icon.
         initialsFrom: state.kind === "authenticated" ? state.displayName ?? null : null, icon: icon, label: state.kind === "authenticated"

package/components/motion/phi-sequence-viewport.js

@@ -120,6 +120,7 @@ export function PhiSequenceViewport({ items, activeIndex, visibleCount = 1, anch
                     : {
                         position: "absolute",
                         insetBlockStart: 0,
+                        insetBlockEnd: 0,
                         insetInlineStart: outgoing && fadeState.outgoingStart !== null
                             ? `calc(${index - fadeState.outgoingStart} * ${step})`
                             : 0,
@@ -141,6 +142,16 @@ export function PhiSequenceViewport({ items, activeIndex, visibleCount = 1, anch
                 alignItems: "stretch",
                 gap: gapLength,
                 width: "100%",
+                /*
+                 * The track is as tall as the window, not as tall as the tallest item.
+                 *
+                 * `alignItems: stretch` gives every item the track's height, so whatever the track is
+                 * worth is what an item has to place its content in. Left at content height there was
+                 * nothing to place within: an item anchored to the bottom or the middle sat at the top,
+                 * because top and bottom were the same line. A caller that gives the viewport no height
+                 * of its own still gets content height -- a percentage against an auto parent is auto.
+                 */
+                height: "100%",
                 minWidth: 0,
                 ...(onTrack
                     ? {

package/components/navigation/phi-link.d.ts

@@ -4,8 +4,18 @@ export type PhiLinkProps = {
     children: ReactNode;
     external?: boolean;
     newTab?: boolean;
+    /**
+     * Whether the client router may fetch the destination before anybody asks for it.
+     *
+     * Absent leaves Next to its own answer, which is right for a link a reader is likely to follow. A
+     * link that is a deliberate action rather than somewhere they are already heading says `false`: the
+     * speculation buys nothing, and where the destination is an Area root that forwards, it costs two
+     * requests nobody made. Only the client-navigated branch has an opinion; a plain anchor never
+     * prefetched.
+     */
+    prefetch?: boolean;
     className?: string;
     style?: CSSProperties;
     onClick?: MouseEventHandler<HTMLAnchorElement>;
 };
-export declare function PhiLink({ href, children, external, newTab, className, style, onClick, }: PhiLinkProps): import("react").JSX.Element;
+export declare function PhiLink({ href, children, external, newTab, prefetch, className, style, onClick, }: PhiLinkProps): import("react").JSX.Element;

package/components/navigation/phi-link.js

@@ -4,7 +4,7 @@ import { useMemo, useState } from "react";
 import Link from "next/link";
 import { isPhiExternalHref } from "../../helpers/external-href";
 import { usePhiConfig } from "../root/phi-config-provider";
-export function PhiLink({ href, children, external, newTab, className, style, onClick, }) {
+export function PhiLink({ href, children, external, newTab, prefetch, className, style, onClick, }) {
     const { token } = usePhiConfig();
     const [hovered, setHovered] = useState(false);
     const [active, setActive] = useState(false);
@@ -28,5 +28,5 @@ export function PhiLink({ href, children, external, newTab, className, style, on
     if (useAnchor) {
         return (_jsx("a", { href: href, target: newTab ? "_blank" : undefined, rel: newTab ? "noreferrer noopener" : undefined, className: className, style: linkStyle, onClick: onClick, ...interactionProps, children: children }));
     }
-    return (_jsx(Link, { href: href, className: className, style: linkStyle, onClick: onClick, ...interactionProps, children: children }));
+    return (_jsx(Link, { href: href, ...(prefetch === undefined ? {} : { prefetch }), className: className, style: linkStyle, onClick: onClick, ...interactionProps, children: children }));
 }

package/components/overlays/phi-overlay-container-client.d.ts

@@ -2,16 +2,19 @@ import { type ReactNode } from "react";
 import type { PhiCmsInstanceId } from "../../types/cms-instance-id";
 import { type PhiCmsOverlayType } from "../../types/cms-overlay";
 import type { PhiSignalScope } from "../../types/signals";
+import type { PhiCmsOverlayZonesRequest } from "../../types/cms-overlay-zones";
 export type PhiOverlayContainerClientProps = {
     overlayId: PhiCmsInstanceId;
     overlayType: PhiCmsOverlayType;
     config: Record<string, unknown>;
     signalScope: Extract<PhiSignalScope, "area" | "page">;
-    header: ReactNode;
-    body: ReactNode;
-    footer: ReactNode;
+    header?: ReactNode;
+    body?: ReactNode;
+    footer?: ReactNode;
+    /**
+     * Set instead of the zones while the Overlay has not been opened: what to ask the Site's Server Action
+     * for the first time it opens (`types/cms-overlay-zones.ts`).
+     */
+    deferredZones?: PhiCmsOverlayZonesRequest;
 };
-export declare function PhiOverlayContainerClient({ overlayId, overlayType, config: rawConfig, signalScope, header, body, footer, }: PhiOverlayContainerClientProps): import("react").JSX.Element;
-export type PhiNamedOverlayProps = Omit<PhiOverlayContainerClientProps, "overlayType">;
-export declare function PhiModal(props: PhiNamedOverlayProps): import("react").JSX.Element;
-export declare function PhiDrawer(props: PhiNamedOverlayProps): import("react").JSX.Element;
+export declare function PhiOverlayContainerClient({ overlayId, overlayType, config: rawConfig, signalScope, header, body, footer, deferredZones, }: PhiOverlayContainerClientProps): import("react").JSX.Element;