@phis/ui 0.1.0 → 0.2.1

package/plugins/runtime-modules/asset/controller/definition.js

@@ -0,0 +1,128 @@
+import { PHI_SIGNAL_VALUE_SCHEMAS, } from "../../../../types/signals";
+import { PHI_ASSET_CONTROLLER_KEY, PHI_ASSET_CONTROLLER_PLUGIN_KEY, } from "../../../../components/media/asset-controller-address";
+import { PHI_ASSET_SIGNAL_CHANNELS } from "../../../../components/media/asset-controller-signals";
+export function parsePhiAssetRuntimeControllerConfig() {
+    return {};
+}
+export const PHI_ASSET_RUNTIME_CONTROLLER_DEFINITION = {
+    kind: "controller",
+    pluginKey: PHI_ASSET_CONTROLLER_PLUGIN_KEY,
+    key: PHI_ASSET_CONTROLLER_KEY,
+    title: "Asset Controller",
+    description: "Headless controller for asset search, filtering, pagination, reloads, and media preview state.",
+    iconFamily: "media",
+    allowedMountScopes: ["area", "page"],
+    runtimeSignals: {
+        emits: [
+            {
+                id: "pagination",
+                action: "change",
+                valueType: "json",
+                valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.pagination,
+            },
+            { id: "dialogClose", action: "close", valueType: "none" },
+            { id: "dialogOpen", action: "open", valueType: "none" },
+            { id: "formSubmit", action: "activate", valueType: "none" },
+            { id: "formReset", action: "activate", valueType: "none" },
+            { id: "reload", action: "activate", valueType: "none" },
+            {
+                id: "formValues",
+                action: "change",
+                valueType: "json",
+                valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.formValues,
+            },
+        ],
+        listens: [
+            {
+                id: "kind",
+                channel: PHI_ASSET_SIGNAL_CHANNELS.kind,
+                action: "change",
+                valueType: "string",
+            },
+            {
+                id: "presentationFlags",
+                channel: PHI_ASSET_SIGNAL_CHANNELS.presentationFlags,
+                action: "change",
+                valueType: "number[]",
+            },
+            {
+                id: "path",
+                channel: PHI_ASSET_SIGNAL_CHANNELS.path,
+                action: "change",
+                valueType: "path",
+            },
+            {
+                id: "query",
+                channel: PHI_ASSET_SIGNAL_CHANNELS.query,
+                action: "change",
+                valueType: "string",
+            },
+            {
+                id: "pagination",
+                channel: PHI_ASSET_SIGNAL_CHANNELS.pagination,
+                action: "change",
+                valueType: "json",
+                valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.pagination,
+            },
+            {
+                id: "reload",
+                channel: PHI_ASSET_SIGNAL_CHANNELS.reload,
+                action: "activate",
+                valueType: "none",
+            },
+            {
+                id: "selection",
+                channel: PHI_ASSET_SIGNAL_CHANNELS.selection,
+                action: "change",
+                valueType: "json",
+                valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.mediaAssetSelection,
+            },
+            {
+                id: "collectionAction",
+                channel: PHI_ASSET_SIGNAL_CHANNELS.collectionAction,
+                action: "activate",
+                valueType: "json",
+                valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.collectionAction,
+            },
+            {
+                id: "formCommand",
+                channel: PHI_ASSET_SIGNAL_CHANNELS.command,
+                action: "activate",
+                valueType: "string",
+            },
+            {
+                id: "formSuccess",
+                channel: PHI_ASSET_SIGNAL_CHANNELS.submit,
+                action: "activate",
+                valueType: "json",
+                valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.formResult,
+            },
+            {
+                id: "formSubmitting",
+                channel: PHI_ASSET_SIGNAL_CHANNELS.submitting,
+                action: "change",
+                valueType: "boolean",
+            },
+            {
+                id: "folderCommand",
+                channel: PHI_ASSET_SIGNAL_CHANNELS.folderCommand,
+                action: "activate",
+                valueType: "string",
+            },
+            {
+                id: "folderSuccess",
+                channel: PHI_ASSET_SIGNAL_CHANNELS.folderSubmit,
+                action: "activate",
+                valueType: "none",
+            },
+            {
+                id: "folderSubmitting",
+                channel: PHI_ASSET_SIGNAL_CHANNELS.folderSubmitting,
+                action: "change",
+                valueType: "boolean",
+            },
+        ],
+    },
+    defaultConfig: {},
+    parseConfig: parsePhiAssetRuntimeControllerConfig,
+};

package/plugins/runtime-modules/asset/controller/mount.d.ts

@@ -0,0 +1,4 @@
+import type { PhiRuntimeControllerMountScope } from "../../../../types";
+export declare function PhiAssetRuntimeControllerMount({ mountScope, }: {
+    mountScope: PhiRuntimeControllerMountScope;
+}): null;

package/plugins/runtime-modules/asset/controller/mount.js

@@ -0,0 +1,6 @@
+"use client";
+import { usePhiAssetRuntimeController } from "./runtime";
+export function PhiAssetRuntimeControllerMount({ mountScope, }) {
+    usePhiAssetRuntimeController(mountScope);
+    return null;
+}

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

@@ -0,0 +1 @@
+export declare function usePhiAssetRuntimeController(mountScope: "site" | "area" | "page"): import("../../../../components/media/phi-image-preview-store").PhiImagePreviewStoreState;

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

@@ -0,0 +1,327 @@
+"use client";
+import { useCallback, useEffect, useState } from "react";
+import { bumpPhiImagePreviewRefreshToken, setPhiImagePreviewFlags, setPhiImagePreviewFolderId, setPhiImagePreviewFolderPath, setPhiImagePreviewKind, setPhiImagePreviewPage, setPhiImagePreviewPageSize, setPhiImagePreviewSearchQuery, usePhiImagePreviewStore, } from "../../../../components/media/phi-image-preview-store";
+import { PhiMediaAssetFlags, PhiMediaKind } from "../../../../constants/media";
+import { PHI_SIGNAL_VALUE_SCHEMAS, createPhiSignalAddress, createPhiSignalSubcontrolAddress } from "../../../../types/signals";
+import { usePhiSignalListener } from "../../../../components/runtime/runtime-signal-bus";
+import { usePhiSignalEmitter } from "../../../../components/runtime/runtime-signal-identity";
+import { createPhiRuntimeFormControllerAddress } from "../../../../components/forms/runtime-form-controller-address";
+import { createPhiAssetControllerAddress } from "../../../../components/media/asset-controller-address";
+import { PHI_ASSET_CONTROLLER_STORE_KEY, PHI_ASSET_SIGNAL_CHANNELS, } from "../../../../components/media/asset-controller-signals";
+import { PHI_ASSET_INSPECTOR_OVERLAY_IDS, PHI_ASSET_INSPECTOR_WIDGET_IDS, PHI_ASSET_MEDIA_PAGE_WIDGET_IDS, } from "../media-page-ids";
+import { normalizeMediaFocalRect } from "../../../../components/media/focal-rect";
+import { resolvePhiMediaFolderIdFromValue, combinePhiMediaFlagValues, } from "../../../../components/media/media-folder-options";
+const ASSET_METADATA_FORM_WIDGET_ADDRESS = createPhiSignalAddress("cms", PHI_ASSET_INSPECTOR_WIDGET_IDS.widgetMediaMetadataForm);
+const ASSET_METADATA_FORM_CONTROLLER_ADDRESS = createPhiRuntimeFormControllerAddress(`widget-${PHI_ASSET_INSPECTOR_WIDGET_IDS.widgetMediaMetadataForm}`);
+const ASSET_INSPECTOR_OVERLAY_ADDRESS = createPhiSignalAddress("cms", PHI_ASSET_INSPECTOR_OVERLAY_IDS.overlayMediaInspector);
+const ASSET_COLLECTION_WIDGET_ADDRESS = createPhiSignalAddress("cms", PHI_ASSET_MEDIA_PAGE_WIDGET_IDS.widgetMediaPreview);
+const ASSET_FOLDER_FORM_WIDGET_ADDRESS = createPhiSignalAddress("cms", PHI_ASSET_INSPECTOR_WIDGET_IDS.widgetMediaFolderCreateForm);
+const ASSET_FOLDER_FORM_CONTROLLER_ADDRESS = createPhiRuntimeFormControllerAddress(`widget-${PHI_ASSET_INSPECTOR_WIDGET_IDS.widgetMediaFolderCreateForm}`);
+const ASSET_FOLDER_OVERLAY_ADDRESS = createPhiSignalAddress("cms", PHI_ASSET_INSPECTOR_OVERLAY_IDS.overlayMediaFolderCreate);
+const ASSET_INSPECTOR_SAVE_ADDRESS = createPhiSignalSubcontrolAddress("cms", PHI_ASSET_INSPECTOR_WIDGET_IDS.widgetMediaInspectorCommands, "save");
+const ASSET_FOLDER_SAVE_ADDRESS = createPhiSignalSubcontrolAddress("cms", PHI_ASSET_INSPECTOR_WIDGET_IDS.widgetMediaFolderCreateCommands, "save");
+const ASSET_FORM_FLAG_VALUES = Object.values(PhiMediaAssetFlags);
+function splitPhiMediaFolderNamePath(value) {
+    return (value ?? "")
+        .split("/")
+        .map((segment) => segment.trim())
+        .filter(Boolean);
+}
+function buildPhiMediaFolderNamePath(folders, folderId) {
+    if (folderId == null)
+        return "";
+    const byId = new Map(folders.map((folder) => [folder.id, folder]));
+    const path = [];
+    const visited = new Set();
+    let currentId = folderId;
+    while (currentId != null && !visited.has(currentId)) {
+        visited.add(currentId);
+        const folder = byId.get(currentId);
+        if (!folder)
+            break;
+        path.unshift(folder.name);
+        currentId = folder.parentId;
+    }
+    return path.length > 0 ? `/${path.join("/")}` : "";
+}
+function matchesAssetControllerSignal(signal) {
+    return signal.receiver === createPhiAssetControllerAddress();
+}
+function isPhiMediaKindValue(value) {
+    return (value === PhiMediaKind.Image ||
+        value === PhiMediaKind.Video ||
+        value === PhiMediaKind.Audio ||
+        value === PhiMediaKind.Pdf ||
+        value === PhiMediaKind.Markdown ||
+        value === PhiMediaKind.Document ||
+        value === PhiMediaKind.Archive ||
+        value === PhiMediaKind.Font ||
+        value === PhiMediaKind.Binary ||
+        value === PhiMediaKind.Other);
+}
+function combinePhiMediaSignalFlagValues(value) {
+    if (!Array.isArray(value)) {
+        return null;
+    }
+    const presentationFlags = value.filter((entry) => typeof entry === "number" && Number.isInteger(entry));
+    return presentationFlags.length > 0 ? combinePhiMediaFlagValues(presentationFlags) : null;
+}
+export function usePhiAssetRuntimeController(mountScope) {
+    const state = usePhiImagePreviewStore(PHI_ASSET_CONTROLLER_STORE_KEY);
+    const emitAssetSignal = usePhiSignalEmitter(createPhiAssetControllerAddress());
+    const [inspectorRequest, setInspectorRequest] = useState(null);
+    const [inspectorSubmitting, setInspectorSubmitting] = useState(false);
+    const [folderRequest, setFolderRequest] = useState(null);
+    const [folderSubmitting, setFolderSubmitting] = useState(false);
+    const sendPageSignal = useCallback((input) => {
+        emitAssetSignal({
+            scope: "page",
+            receiver: input.receiver,
+            channel: input.channel,
+            action: input.action,
+            value: input.value,
+            valueType: input.valueType,
+            valueSchema: input.valueSchema ?? null,
+            correlationId: input.correlationId,
+            timestamp: Date.now(),
+        });
+    }, [emitAssetSignal]);
+    usePhiSignalListener((signal) => {
+        if (!matchesAssetControllerSignal(signal)) {
+            return;
+        }
+        if (signal.channel !== PHI_ASSET_SIGNAL_CHANNELS.reload &&
+            signal.channel !== PHI_ASSET_SIGNAL_CHANNELS.kind &&
+            signal.channel !== PHI_ASSET_SIGNAL_CHANNELS.presentationFlags &&
+            signal.channel !== PHI_ASSET_SIGNAL_CHANNELS.path &&
+            signal.channel !== PHI_ASSET_SIGNAL_CHANNELS.query &&
+            signal.channel !== PHI_ASSET_SIGNAL_CHANNELS.pagination &&
+            signal.channel !== PHI_ASSET_SIGNAL_CHANNELS.selection &&
+            signal.channel !== PHI_ASSET_SIGNAL_CHANNELS.command &&
+            signal.channel !== PHI_ASSET_SIGNAL_CHANNELS.submit &&
+            signal.channel !== PHI_ASSET_SIGNAL_CHANNELS.submitting &&
+            signal.channel !== PHI_ASSET_SIGNAL_CHANNELS.collectionAction &&
+            signal.channel !== PHI_ASSET_SIGNAL_CHANNELS.folderCommand &&
+            signal.channel !== PHI_ASSET_SIGNAL_CHANNELS.folderSubmit &&
+            signal.channel !== PHI_ASSET_SIGNAL_CHANNELS.folderSubmitting) {
+            return;
+        }
+        if (signal.channel === PHI_ASSET_SIGNAL_CHANNELS.selection &&
+            signal.action === "change" &&
+            signal.value &&
+            typeof signal.value === "object" &&
+            !Array.isArray(signal.value)) {
+            const assetId = signal.value.assetId;
+            if (typeof assetId === "number" && Number.isInteger(assetId) && assetId > 0) {
+                setInspectorRequest({ assetId, correlationId: signal.correlationId });
+                /*
+                 * The Controller opens the inspector, as it opens the folder dialog beside it.
+                 *
+                 * The collection used to open it directly and tell the Controller separately, which is two
+                 * sentences about one gesture -- and it hid the day the Controller stopped hearing anything:
+                 * the drawer still opened, on an empty form, over a Save that did nothing. A selection is
+                 * reported to the Controller, and what the Controller does about it is the Controller's.
+                 */
+                sendPageSignal({
+                    receiver: ASSET_INSPECTOR_OVERLAY_ADDRESS,
+                    channel: "dialog",
+                    action: "open",
+                    value: null,
+                    valueType: "none",
+                    correlationId: signal.correlationId,
+                });
+            }
+            return;
+        }
+        if (signal.channel === PHI_ASSET_SIGNAL_CHANNELS.collectionAction &&
+            signal.action === "activate" &&
+            signal.value &&
+            typeof signal.value === "object" &&
+            !Array.isArray(signal.value) &&
+            signal.value.actionKey === "createFolder") {
+            const collectionQuery = signal.value.query;
+            const filters = collectionQuery && typeof collectionQuery === "object" && !Array.isArray(collectionQuery)
+                ? collectionQuery.filters
+                : null;
+            const folderId = filters && typeof filters === "object" && !Array.isArray(filters)
+                ? filters.folderId
+                : null;
+            setFolderRequest({
+                correlationId: signal.correlationId,
+                parentPath: buildPhiMediaFolderNamePath(state.folders, typeof folderId === "number" && Number.isInteger(folderId) ? folderId : null) || "/",
+            });
+            sendPageSignal({
+                receiver: ASSET_FOLDER_OVERLAY_ADDRESS,
+                channel: "dialog",
+                action: "open",
+                value: null,
+                valueType: "none",
+                correlationId: signal.correlationId,
+            });
+            return;
+        }
+        if (signal.channel === PHI_ASSET_SIGNAL_CHANNELS.folderCommand && signal.action === "activate") {
+            if (signal.value === "cancel") {
+                sendPageSignal({ receiver: ASSET_FOLDER_FORM_WIDGET_ADDRESS, channel: "reset", action: "activate", value: null, valueType: "none", correlationId: signal.correlationId });
+                sendPageSignal({ receiver: ASSET_FOLDER_OVERLAY_ADDRESS, channel: "dialog", action: "close", value: null, valueType: "none", correlationId: signal.correlationId });
+            }
+            else if (signal.value === "save" && !folderSubmitting) {
+                sendPageSignal({ receiver: ASSET_FOLDER_FORM_WIDGET_ADDRESS, channel: "submit", action: "activate", value: null, valueType: "none", correlationId: signal.correlationId });
+            }
+            return;
+        }
+        if (signal.channel === PHI_ASSET_SIGNAL_CHANNELS.folderSubmitting && signal.action === "change" && typeof signal.value === "boolean") {
+            setFolderSubmitting(signal.value);
+            sendPageSignal({ receiver: ASSET_FOLDER_SAVE_ADDRESS, channel: "submitting", action: "change", value: signal.value, valueType: "boolean", correlationId: signal.correlationId });
+            return;
+        }
+        if (signal.channel === PHI_ASSET_SIGNAL_CHANNELS.folderSubmit && signal.action === "activate") {
+            setFolderSubmitting(false);
+            sendPageSignal({ receiver: ASSET_FOLDER_OVERLAY_ADDRESS, channel: "dialog", action: "close", value: null, valueType: "none", correlationId: signal.correlationId });
+            sendPageSignal({ receiver: ASSET_COLLECTION_WIDGET_ADDRESS, channel: "reload", action: "activate", value: null, valueType: "none", correlationId: signal.correlationId });
+            return;
+        }
+        if (signal.channel === PHI_ASSET_SIGNAL_CHANNELS.command && signal.action === "activate") {
+            if (signal.value === "cancel") {
+                setInspectorRequest(null);
+                sendPageSignal({ receiver: ASSET_METADATA_FORM_WIDGET_ADDRESS, channel: "reset", action: "activate", value: null, valueType: "none", correlationId: signal.correlationId });
+                sendPageSignal({ receiver: ASSET_INSPECTOR_OVERLAY_ADDRESS, channel: "dialog", action: "close", value: null, valueType: "none", correlationId: signal.correlationId });
+            }
+            else if (signal.value === "save" && !inspectorSubmitting) {
+                sendPageSignal({ receiver: ASSET_METADATA_FORM_WIDGET_ADDRESS, channel: "submit", action: "activate", value: null, valueType: "none", correlationId: signal.correlationId });
+            }
+            return;
+        }
+        if (signal.channel === PHI_ASSET_SIGNAL_CHANNELS.submitting && signal.action === "change" && typeof signal.value === "boolean") {
+            setInspectorSubmitting(signal.value);
+            sendPageSignal({ receiver: ASSET_INSPECTOR_SAVE_ADDRESS, channel: "submitting", action: "change", value: signal.value, valueType: "boolean", correlationId: signal.correlationId });
+            return;
+        }
+        if (signal.channel === PHI_ASSET_SIGNAL_CHANNELS.submit && signal.action === "activate") {
+            setInspectorSubmitting(false);
+            setInspectorRequest(null);
+            sendPageSignal({ receiver: ASSET_INSPECTOR_OVERLAY_ADDRESS, channel: "dialog", action: "close", value: null, valueType: "none", correlationId: signal.correlationId });
+            sendPageSignal({ receiver: ASSET_COLLECTION_WIDGET_ADDRESS, channel: "reload", action: "activate", value: null, valueType: "none", correlationId: signal.correlationId });
+            return;
+        }
+        if (signal.channel === PHI_ASSET_SIGNAL_CHANNELS.reload) {
+            if (signal.action !== "activate") {
+                return;
+            }
+            bumpPhiImagePreviewRefreshToken(PHI_ASSET_CONTROLLER_STORE_KEY);
+            return;
+        }
+        if (signal.action !== "change") {
+            return;
+        }
+        if (signal.channel === PHI_ASSET_SIGNAL_CHANNELS.kind && isPhiMediaKindValue(signal.value)) {
+            setPhiImagePreviewKind(PHI_ASSET_CONTROLLER_STORE_KEY, signal.value);
+            return;
+        }
+        if (signal.channel === PHI_ASSET_SIGNAL_CHANNELS.presentationFlags) {
+            setPhiImagePreviewFlags(PHI_ASSET_CONTROLLER_STORE_KEY, combinePhiMediaSignalFlagValues(signal.value));
+            return;
+        }
+        if (signal.channel === PHI_ASSET_SIGNAL_CHANNELS.query) {
+            if (typeof signal.value === "string") {
+                setPhiImagePreviewSearchQuery(PHI_ASSET_CONTROLLER_STORE_KEY, signal.value);
+                return;
+            }
+            if (signal.value && typeof signal.value === "object" && !Array.isArray(signal.value)) {
+                const queryValue = signal.value.searchQuery;
+                setPhiImagePreviewSearchQuery(PHI_ASSET_CONTROLLER_STORE_KEY, typeof queryValue === "string" ? queryValue : "");
+            }
+            return;
+        }
+        if (signal.channel === PHI_ASSET_SIGNAL_CHANNELS.pagination && signal.value && typeof signal.value === "object" && !Array.isArray(signal.value)) {
+            const value = signal.value;
+            if (typeof value.pageSize === "number" && Number.isInteger(value.pageSize) && value.pageSize > 0) {
+                setPhiImagePreviewPageSize(PHI_ASSET_CONTROLLER_STORE_KEY, value.pageSize);
+            }
+            if (typeof value.page === "number" && Number.isInteger(value.page) && value.page > 0) {
+                setPhiImagePreviewPage(PHI_ASSET_CONTROLLER_STORE_KEY, value.page);
+            }
+            return;
+        }
+        if (signal.channel !== PHI_ASSET_SIGNAL_CHANNELS.path || typeof signal.value !== "string") {
+            return;
+        }
+        const existingFolderId = resolvePhiMediaFolderIdFromValue(state.folders, signal.value);
+        if (existingFolderId != null || splitPhiMediaFolderNamePath(signal.value).length === 0) {
+            setPhiImagePreviewFolderId(PHI_ASSET_CONTROLLER_STORE_KEY, existingFolderId);
+        }
+        else {
+            setPhiImagePreviewFolderPath(PHI_ASSET_CONTROLLER_STORE_KEY, splitPhiMediaFolderNamePath(signal.value));
+        }
+    }, {
+        channels: Object.values(PHI_ASSET_SIGNAL_CHANNELS),
+    }, 
+    /*
+     * The address this listener answers for.
+     *
+     * A receiver with an instance and no listener counted for it is not wrong, it is "not ready yet",
+     * so every signal addressed here was held rather than delivered -- and held silently, which is why
+     * the media inspector opened with an empty form and its Save did nothing at all. The instance the
+     * controller mount registers says the address exists; this says somebody is behind it.
+     */
+    createPhiAssetControllerAddress());
+    useEffect(() => {
+        if (!inspectorRequest)
+            return;
+        const asset = state.selectedAsset?.id === inspectorRequest.assetId
+            ? state.selectedAsset
+            : state.assets.find((entry) => entry.id === inspectorRequest.assetId) ?? null;
+        if (!asset)
+            return;
+        sendPageSignal({
+            receiver: ASSET_METADATA_FORM_CONTROLLER_ADDRESS,
+            channel: "values",
+            action: "change",
+            value: {
+                values: {
+                    assetId: asset.id,
+                    imageUrl: asset.previewUrl ?? asset.deliveryUrl,
+                    imageAlt: asset.altText ?? asset.title ?? asset.originalName,
+                    folderPath: buildPhiMediaFolderNamePath(state.folders, asset.folderId),
+                    title: asset.title ?? "",
+                    altText: asset.altText ?? "",
+                    presentationFlags: ASSET_FORM_FLAG_VALUES.filter((flag) => (asset.presentationFlags & flag) === flag).map(String),
+                    focalRect: normalizeMediaFocalRect(asset.meta?.focalRect) ?? null,
+                },
+            },
+            valueType: "json",
+            valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.formValues,
+            correlationId: inspectorRequest.correlationId,
+        });
+    }, [inspectorRequest, sendPageSignal, state.assets, state.folders, state.selectedAsset]);
+    useEffect(() => {
+        if (!folderRequest)
+            return;
+        sendPageSignal({
+            receiver: ASSET_FOLDER_FORM_CONTROLLER_ADDRESS,
+            channel: "values",
+            action: "change",
+            value: { values: { name: "", parentPath: folderRequest.parentPath } },
+            valueType: "json",
+            valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.formValues,
+            correlationId: folderRequest.correlationId,
+        });
+    }, [folderRequest, sendPageSignal]);
+    useEffect(() => {
+        emitAssetSignal({
+            scope: mountScope,
+            channel: PHI_ASSET_SIGNAL_CHANNELS.pagination,
+            action: "change",
+            valueType: "json",
+            valueSchema: PHI_SIGNAL_VALUE_SCHEMAS.pagination,
+            value: {
+                page: state.page,
+                pageSize: state.pageSize,
+                total: state.pagination?.total ?? state.assets.length,
+            },
+            receiver: "broadcast",
+            timestamp: Date.now(),
+        });
+    }, [emitAssetSignal, mountScope, state.assets.length, state.page, state.pageSize, state.pagination?.total]);
+    return state;
+}

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

@@ -21,7 +21,8 @@ export declare const PHI_ASSET_RUNTIME_DATA_PROVIDER_DESCRIPTORS: ({
         resourceKey: string;
         title: string;
         itemIdentityPath: string;
-        itemRendererKey: "@phis/ui/media-asset";
+        itemRendererKey: `${string}/${string}`;
+        selectionValueSchema: `${string}/signals/${string}`;
         defaultForWidget: true;
         query: {
             search: true;

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

@@ -1,4 +1,5 @@
-import { PHI_ASSET_RUNTIME_DATA_PROVIDER_KEYS } from "./ids";
+import { PHI_SIGNAL_VALUE_SCHEMAS } from "../../../types/signals";
+import { PHI_ASSET_RUNTIME_DATA_PROVIDER_KEYS, PHI_ASSET_RUNTIME_ITEM_RENDERER_KEY } from "./ids";
 import { PHI_ASSET_RUNTIME_MODULE_ID } from "./ids";
 export const PHI_ASSET_RUNTIME_DATA_PROVIDER_DESCRIPTORS = [
     {
@@ -29,7 +30,8 @@ export const PHI_ASSET_RUNTIME_DATA_PROVIDER_DESCRIPTORS = [
                 resourceKey: "assets",
                 title: "Assets",
                 itemIdentityPath: "id",
-                itemRendererKey: "@phis/ui/media-asset",
+                itemRendererKey: PHI_ASSET_RUNTIME_ITEM_RENDERER_KEY,
+                selectionValueSchema: PHI_SIGNAL_VALUE_SCHEMAS.mediaAssetSelection,
                 defaultForWidget: true,
                 query: {
                     search: true,

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

@@ -33,7 +33,8 @@ export declare const PHI_ASSET_RUNTIME_MODULE_DEFINITION: {
             resourceKey: string;
             title: string;
             itemIdentityPath: string;
-            itemRendererKey: "@phis/ui/media-asset";
+            itemRendererKey: `${string}/${string}`;
+            selectionValueSchema: `${string}/signals/${string}`;
             defaultForWidget: true;
             query: {
                 search: true;
@@ -70,6 +71,12 @@ export declare const PHI_ASSET_RUNTIME_MODULE_DEFINITION: {
             }[];
         }[];
     })[];
+    collectionItemRenderers: {
+        key: `${string}/${string}`;
+        rendersItemsOf: `${string}/${string}`;
+        title: string;
+        description: string;
+    }[];
     formProviders: {
         fieldTypes: {
             key: `${string}/${string}`;

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

@@ -1,13 +1,13 @@
-import { PHI_ASSET_RUNTIME_CONTROLLER_DEFINITION } from "../../../components/media/asset-controller-definition";
+import { PHI_ASSET_RUNTIME_CONTROLLER_DEFINITION } from "./controller/definition";
 import { PHI_ASSET_CONTROLLER_TYPE } from "../../../components/media/asset-controller-address";
 import { buildPhiRuntimeModuleControllerDescriptor } from "../contracts";
-import { PHI_ASSET_RUNTIME_MODULE_ID } from "./ids";
+import { PHI_ASSET_RUNTIME_ITEM_RENDERER_KEY, PHI_ASSET_RUNTIME_MODULE_ID } from "./ids";
 import { PHI_ASSET_RUNTIME_DATA_PROVIDER_DESCRIPTORS } from "./data-providers";
 import { PHI_CMS_AREA_KEYS } from "../../../constants/cms-areas";
 import { PHI_CORE_SERVER_BINDING } from "../../../types/server-capabilities";
-import { PHI_ASSET_FOLDER_FORM_HANDLER_PROVIDER_DESCRIPTOR, PHI_ASSET_METADATA_FORM_HANDLER_PROVIDER_DESCRIPTOR, } from "../../../components/media/asset-metadata-form";
-import { PHI_ASSET_FOCAL_RECT_FORM_PROVIDER_DESCRIPTOR } from "../../../components/media/asset-form-field-providers";
-import { PHI_MEDIA_SETTINGS_FORM_HANDLER_PROVIDER_DESCRIPTOR } from "../../../components/media/media-settings-forms";
+import { PHI_ASSET_FOLDER_FORM_HANDLER_PROVIDER_DESCRIPTOR, PHI_ASSET_METADATA_FORM_HANDLER_PROVIDER_DESCRIPTOR, } from "./metadata-form";
+import { PHI_ASSET_FOCAL_RECT_FORM_PROVIDER_DESCRIPTOR } from "./form-providers";
+import { PHI_MEDIA_SETTINGS_FORM_HANDLER_PROVIDER_DESCRIPTOR } from "./settings-forms";
 export const PHI_ASSET_RUNTIME_MODULE_DEFINITION = {
     moduleId: PHI_ASSET_RUNTIME_MODULE_ID,
     kind: "module",
@@ -21,6 +21,14 @@ export const PHI_ASSET_RUNTIME_MODULE_DEFINITION = {
     iconFamily: "media",
     controllerMountPolicy: "area",
     dataProviders: PHI_ASSET_RUNTIME_DATA_PROVIDER_DESCRIPTORS,
+    // Its own card, declared like anybody else's would be: what a Site picks from is one list, and the
+    // renderer a provider ships is in it under its own name rather than as an unnamed default.
+    collectionItemRenderers: [{
+            key: PHI_ASSET_RUNTIME_ITEM_RENDERER_KEY,
+            rendersItemsOf: PHI_ASSET_RUNTIME_ITEM_RENDERER_KEY,
+            title: "Media asset card",
+            description: "Thumbnail, name and metadata, with the Module's own selection and actions.",
+        }],
     formProviders: {
         fieldTypes: [PHI_ASSET_FOCAL_RECT_FORM_PROVIDER_DESCRIPTOR],
         handlers: [

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

@@ -0,0 +1,11 @@
+import { PHI_ASSET_RUNTIME_MODULE_ID } from "./ids";
+import { createPhiSharedFormProviderKey } from "../../../components/forms/form-provider-contract";
+export const PHI_ASSET_FOCAL_RECT_FORM_PROVIDER_KEY = createPhiSharedFormProviderKey("field", "asset-focal-rect");
+export const PHI_ASSET_FOCAL_RECT_FORM_PROVIDER_DESCRIPTOR = {
+    key: PHI_ASSET_FOCAL_RECT_FORM_PROVIDER_KEY,
+    ownerModuleId: PHI_ASSET_RUNTIME_MODULE_ID,
+    title: "Asset focal rectangle",
+    description: "Edits one transient focal rectangle as an atomic Form value.",
+    valueType: "json",
+    presentation: "hidden",
+};

package/plugins/runtime-modules/asset/form-ui-provider.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createPhiFormProviderRegistry, PhiFormProviderRegistryProvider } from "../../../components/forms/form-provider-registry";
+import { PHI_ASSET_FOCAL_RECT_FORM_PROVIDER_DESCRIPTOR } from "./form-providers";
+const PHI_ASSET_FORM_PROVIDER_REGISTRY = createPhiFormProviderRegistry({
+    fieldTypes: [{
+            ...PHI_ASSET_FOCAL_RECT_FORM_PROVIDER_DESCRIPTOR,
+            Control: () => null,
+        }],
+});
+export function PhiAssetFormUiProvider({ children }) {
+    return (_jsx(PhiFormProviderRegistryProvider, { registry: PHI_ASSET_FORM_PROVIDER_REGISTRY, children: children }));
+}

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

@@ -8,3 +8,5 @@ export declare const PHI_ASSET_RUNTIME_DATA_PROVIDER_KEYS: {
     readonly mediaFolders: `${string}/${string}`;
     readonly mediaCollection: `${string}/${string}`;
 };
+/** The card this Module ships for its own items; a Site may name another. */
+export declare const PHI_ASSET_RUNTIME_ITEM_RENDERER_KEY: `${string}/${string}`;

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

@@ -1,5 +1,5 @@
 import { PHI_SHARED_PACKAGE_NAME } from "../../../types/signals";
-import { PHI_MEDIA_LIBRARY_DATA_PROVIDER_KEYS } from "../../../constants/media-library-provider-keys";
+import { PHI_MEDIA_LIBRARY_DATA_PROVIDER_KEYS, PHI_MEDIA_LIBRARY_ITEM_RENDERER_KEY, } from "../../../constants/media-library-provider-keys";
 export const PHI_ASSET_RUNTIME_MODULE_ID = `${PHI_SHARED_PACKAGE_NAME}/modules/asset`;
 /**
  * The Module's own view of the two keys it answers. The names themselves are a Foundation contract, so
@@ -10,3 +10,5 @@ export const PHI_ASSET_RUNTIME_DATA_PROVIDER_KEYS = {
     mediaFolders: PHI_MEDIA_LIBRARY_DATA_PROVIDER_KEYS.folders,
     mediaCollection: PHI_MEDIA_LIBRARY_DATA_PROVIDER_KEYS.collection,
 };
+/** The card this Module ships for its own items; a Site may name another. */
+export const PHI_ASSET_RUNTIME_ITEM_RENDERER_KEY = PHI_MEDIA_LIBRARY_ITEM_RENDERER_KEY;

package/plugins/runtime-modules/asset/media-page-ids.d.ts

@@ -0,0 +1,6 @@
+export declare const PHI_ASSET_INSPECTOR_OVERLAY_IDS: Readonly<Record<"overlayMediaInspector" | "overlayMediaFocalRect" | "overlayMediaFolderCreate", import("@phis/contracts/cms").PhiCmsInstanceId>>;
+export declare const PHI_ASSET_INSPECTOR_LAYOUT_IDS: Readonly<Record<"layoutMediaInspectorHeader" | "layoutMediaInspector" | "layoutMediaInspectorFooter" | "layoutMediaFocalRectBody" | "layoutMediaFocalRectFooter" | "layoutMediaFolderCreateBody" | "layoutMediaFolderCreateFooter", import("@phis/contracts/cms").PhiCmsInstanceId>>;
+export declare const PHI_ASSET_INSPECTOR_WIDGET_IDS: Readonly<Record<"widgetMediaMetadataForm" | "widgetMediaInspectorCommands" | "widgetMediaFocalRect" | "widgetMediaFocalRectCommands" | "widgetMediaFolderCreateForm" | "widgetMediaFolderCreateCommands", import("@phis/contracts/cms").PhiCmsInstanceId>>;
+export declare const PHI_ASSET_MEDIA_PAGE_WIDGET_IDS: Readonly<Record<"widgetMediaPreview" | "widgetMediaInspector", import("@phis/contracts/cms").PhiCmsInstanceId>>;
+/** The Page's own frame: the header bottom it keeps empty and the root its gallery stands in. */
+export declare const PHI_ASSET_MEDIA_PAGE_LAYOUT_IDS: Readonly<Record<"layoutHeaderBottom" | "layoutContent", import("@phis/contracts/cms").PhiCmsInstanceId>>;

package/plugins/runtime-modules/asset/media-page-ids.js

@@ -0,0 +1,36 @@
+import { PHI_ASSET_RUNTIME_MODULE_ID } from "./ids";
+import { createPhiPresetCmsInstanceIdMap } from "../../../types/cms-instance-id";
+const PHI_BUILDER_MEDIA_PAGE_ID_CONTEXT = {
+    domain: "page",
+    ownerModuleId: PHI_ASSET_RUNTIME_MODULE_ID,
+    presetKey: "builder-media-page",
+};
+export const PHI_ASSET_INSPECTOR_OVERLAY_IDS = createPhiPresetCmsInstanceIdMap(PHI_BUILDER_MEDIA_PAGE_ID_CONTEXT, ["overlayMediaInspector", "overlayMediaFocalRect", "overlayMediaFolderCreate"]);
+export const PHI_ASSET_INSPECTOR_LAYOUT_IDS = createPhiPresetCmsInstanceIdMap(PHI_BUILDER_MEDIA_PAGE_ID_CONTEXT, [
+    "layoutMediaInspectorHeader",
+    "layoutMediaInspector",
+    "layoutMediaInspectorFooter",
+    "layoutMediaFocalRectBody",
+    "layoutMediaFocalRectFooter",
+    "layoutMediaFolderCreateBody",
+    "layoutMediaFolderCreateFooter",
+]);
+export const PHI_ASSET_INSPECTOR_WIDGET_IDS = createPhiPresetCmsInstanceIdMap(PHI_BUILDER_MEDIA_PAGE_ID_CONTEXT, [
+    "widgetMediaMetadataForm",
+    "widgetMediaInspectorCommands",
+    "widgetMediaFocalRect",
+    "widgetMediaFocalRectCommands",
+    "widgetMediaFolderCreateForm",
+    "widgetMediaFolderCreateCommands",
+]);
+export const PHI_ASSET_MEDIA_PAGE_WIDGET_IDS = createPhiPresetCmsInstanceIdMap({
+    domain: "area",
+    ownerModuleId: PHI_ASSET_RUNTIME_MODULE_ID,
+    presetKey: "builder-media-page",
+}, ["widgetMediaPreview", "widgetMediaInspector"]);
+/** The Page's own frame: the header bottom it keeps empty and the root its gallery stands in. */
+export const PHI_ASSET_MEDIA_PAGE_LAYOUT_IDS = createPhiPresetCmsInstanceIdMap({
+    domain: "area",
+    ownerModuleId: PHI_ASSET_RUNTIME_MODULE_ID,
+    presetKey: "builder-media-page",
+}, ["layoutHeaderBottom", "layoutContent"]);