@phis/ui 0.1.0 → 0.2.0

package/components/media/media-upload-flow.js

@@ -1,4 +1,64 @@
+import { buildPhiMediaClientDigest } from "./media-upload-digest";
 import { PHIS_AREA_HEADER, buildPhiMediaRequestHeaders } from "./phi-media-request-headers";
+/** How many parts travel at once. Enough to fill a high-latency link, few enough to stay polite. */
+const PHI_MEDIA_UPLOAD_PART_CONCURRENCY = 3;
+/** How often one part is tried again before the whole upload is given up on. */
+export const PHI_MEDIA_UPLOAD_PART_ATTEMPTS = 3;
+/**
+ * Which bytes one part covers.
+ *
+ * The plan states a part size and numbers the parts from one, so this is the whole of the addressing.
+ * The last part is short and every other one is exactly `partSizeBytes`; a number past the end yields an
+ * empty range rather than reading past the file, because a plan and a file disagreeing about the size is
+ * something to notice at finalize and not to paper over here.
+ */
+export function resolvePhiMediaUploadPartRange(partNumber, partSizeBytes, fileSize) {
+    const start = Math.min(Math.max(0, (partNumber - 1) * partSizeBytes), fileSize);
+    return { start, end: Math.min(start + partSizeBytes, fileSize) };
+}
+/**
+ * How much of the body is already at the storage, part by part.
+ *
+ * A part that is there counts as delivered, because it is. The figure comes from the same addressing rule
+ * the upload uses rather than from anything reported back: part *n* covers a known range of this file, so
+ * there is no second account of how large a part is to disagree with the first. Without it the bar would
+ * start at zero for a body that is half there, and the person watching would have no way to tell that the
+ * reload had cost them nothing.
+ */
+export function resolvePhiMediaUploadStoredProgress(stored, partSizeBytes, fileSize) {
+    const loadedByPart = new Map();
+    for (const part of stored) {
+        const range = resolvePhiMediaUploadPartRange(part.partNumber, partSizeBytes, fileSize);
+        loadedByPart.set(part.partNumber, range.end - range.start);
+    }
+    return loadedByPart;
+}
+/**
+ * Whether a refused part is worth sending again.
+ *
+ * A transport failure has no status and may well be the network settling down. A `5xx` is the endpoint
+ * saying it could not, this time. A `4xx` is the endpoint saying it will not -- a signature it rejected
+ * will be rejected identically on the next attempt, so repeating it only delays the report.
+ */
+export function isPhiMediaUploadPartWorthRepeating(status) {
+    return status === 0 || status >= 500;
+}
+/**
+ * How far along the whole body is, from what each part has reported.
+ *
+ * A sum rather than a count of finished parts, so a single large part in flight still moves the figure.
+ * It is clamped because a part that reported progress and then started again would otherwise be counted
+ * twice -- the caller drops a part's contribution before retrying it, and the clamp is what keeps a bug
+ * there from showing somebody 140 per cent.
+ */
+export function resolvePhiMediaUploadPartProgress(loadedByPart, fileSize) {
+    if (fileSize <= 0)
+        return 0;
+    let loaded = 0;
+    for (const bytes of loadedByPart.values())
+        loaded += bytes;
+    return Math.max(0, Math.min(100, Math.round((loaded / fileSize) * 100)));
+}
 export class PhiMediaUploadError extends Error {
     code;
     status;
@@ -23,6 +83,15 @@ export const PHI_MEDIA_UPLOAD_FAILURE_REASONS = {
     /** The storage endpoint answered, and refused. */
     StorageRejected: "storage_rejected",
     Cancelled: "cancelled",
+    /**
+     * The page went away while the body was still in flight.
+     *
+     * Kept apart from `cancelled`, which it used to be reported as, because the Server does opposite things
+     * with them. A person who stops an upload has decided against it and what arrived is waste. A reload, a
+     * crash or a closed tab decided nothing -- and a body travelling in parts leaves those parts at the
+     * storage, where the next attempt at the same file carries on from them instead of paying again.
+     */
+    Interrupted: "interrupted",
     ClientError: "client_error",
 };
 /**
@@ -47,6 +116,50 @@ export async function reportPhiMediaUploadFailure(reportUrl, reason, detail) {
         // Nothing to do about it here; the original failure is what the caller is still holding.
     }
 }
+/**
+ * Says the body will not arrive, from a page that is going away.
+ *
+ * The one abandonment nothing else can report. `reportPhiMediaUploadFailure` needs the upload to have
+ * failed *and* the page to still be there to say so; a person who closes the tab mid-body produces
+ * neither, so the session sat at Pending until it expired and its staged bytes stayed paid for. Since
+ * expiry deliberately leaves storage alone, nothing was ever going to come back for them.
+ *
+ * `sendBeacon` and not `fetch`, because this is the moment a document stops being allowed to start
+ * ordinary requests: the browser takes the body and delivers it after the page is gone. `pagehide` and
+ * not `unload`, which is deprecated and unreliable, nor `beforeunload`, which is for asking a question
+ * nobody here wants to ask.
+ *
+ * Which word it uses depends on what can be salvaged, and that is the whole of the difference. A body sent
+ * in parts leaves them at the storage: saying `interrupted` is what keeps them, so the next attempt at the
+ * same file carries on instead of sending those bytes again. Any other plan leaves nothing a second page
+ * could build on, so leaving the page really is a person stopping it, and `cancelled` has the Server clear
+ * up after it.
+ *
+ * Returns the way to stand down. A caller that reaches finalize must use it: see `runPhiMediaUploadSession`
+ * for why the moment matters.
+ */
+function reportPhiMediaUploadAbandonmentOnLeaving(reportUrl, plan) {
+    if (typeof window === "undefined" || typeof navigator === "undefined") {
+        return () => { };
+    }
+    const reason = plan.kind === "multipart-put"
+        ? PHI_MEDIA_UPLOAD_FAILURE_REASONS.Interrupted
+        : PHI_MEDIA_UPLOAD_FAILURE_REASONS.Cancelled;
+    const announce = () => {
+        try {
+            navigator.sendBeacon(reportUrl, new Blob([JSON.stringify({
+                    reason,
+                    detail: "The page was left while the body was in flight.",
+                })], { type: "application/json" }));
+        }
+        catch {
+            // Leaving is not the moment to handle a failure to say one is leaving. Expiry still releases the
+            // reservation; only the staged object is worse off, which is the state this existed to improve.
+        }
+    };
+    window.addEventListener("pagehide", announce);
+    return () => window.removeEventListener("pagehide", announce);
+}
 /**
  * What the Server is told this failure was.
  *
@@ -60,10 +173,37 @@ function readPhiMediaUploadFailureReason(error) {
         ? code
         : PHI_MEDIA_UPLOAD_FAILURE_REASONS.ClientError;
 }
+/**
+ * Whether a plan says enough to be carried out.
+ *
+ * Per kind, because a multipart plan has no single address: what makes it usable is an upload to name and
+ * at least one part to send. A plan missing that is a control-plane answer nobody can act on, and saying
+ * so at init is better than failing at the first part.
+ */
+/* Exported for the test that freezes the resumed case, not for a caller: init is the only reader. */
+export function isUsablePhiMediaUploadPlan(plan, storedParts = 0) {
+    if (!plan)
+        return false;
+    if (plan.kind === "multipart-put") {
+        /*
+         * A part to send, or one that is already there. The second case is a body that finished arriving and
+         * was never finalized -- the page went away in between -- and it has no part left to address. Refusing
+         * it as unusable would mean re-sending a whole body that is complete at the storage.
+         */
+        return Boolean(plan.uploadId)
+            && plan.partSizeBytes > 0
+            && plan.parts.length + storedParts > 0;
+    }
+    return Boolean(plan.url);
+}
+/** The address a plan delivers to -- for a multipart plan, the one its parts share. */
+function readPlanAddress(plan) {
+    return plan.kind === "multipart-put" ? plan.parts[0]?.url ?? "" : plan.url;
+}
 /** The origin the browser was told to deliver to, and never the signature that came with it. */
 function readPlanTarget(plan) {
     try {
-        const target = new URL(plan.url, typeof location === "undefined" ? undefined : location.href);
+        const target = new URL(readPlanAddress(plan), typeof location === "undefined" ? undefined : location.href);
         const pageProtocol = typeof location === "undefined" ? null : location.protocol;
         const blockedAsMixedContent = pageProtocol === "https:" && target.protocol === "http:";
         return {
@@ -122,6 +262,12 @@ export async function initPhiMediaUploadSession(file, options) {
     // The Space is named the way every Media route names one -- as a query parameter -- while the Folder
     // and the flags travel in the body, because those describe the Asset rather than the Space it lands in.
     const spaceAddress = options?.spaceAddress?.trim() || null;
+    /*
+     * Hashed before the session is asked for, because the Server signs the digest into the upload request
+     * and cannot do that after it has issued one. Null where the browser cannot hash -- an upload without a
+     * digest still works; it simply arrives with nothing the storage was asked to verify.
+     */
+    const digest = await buildPhiMediaClientDigest(file);
     const initUrl = spaceAddress
         ? `/api/site/media/uploads/init?spaceId=${encodeURIComponent(spaceAddress)}`
         : "/api/site/media/uploads/init";
@@ -139,23 +285,153 @@ export async function initPhiMediaUploadSession(file, options) {
             ...(folderId ? { folderId } : {}),
             ...(presentationFlags != null ? { presentationFlags } : {}),
             ...(meta ? { meta } : {}),
+            ...(digest ?? {}),
         }),
     });
     const payload = await readJsonResponse(response);
-    if (!payload.token || !payload.plan?.url || !payload.finalizeUrl) {
+    const uploaded = payload.uploaded ?? [];
+    // A stored part this side cannot name is one finalize would leave out; that is not the Server's upload.
+    const partsReadable = uploaded.every((part) => Number.isInteger(part?.partNumber) && part.partNumber > 0 && Boolean(part?.eTag));
+    if (!payload.token ||
+        !partsReadable ||
+        !isUsablePhiMediaUploadPlan(payload.plan, uploaded.length) ||
+        !payload.finalizeUrl ||
+        !payload.reportUrl ||
+        !payload.expiresAt) {
         throw new Error(payload.error ?? "Failed to create upload session.");
     }
     return {
         token: payload.token,
         plan: payload.plan,
         finalizeUrl: payload.finalizeUrl,
-        // Derived when an older control plane did not send it: reporting is a courtesy, and losing it must
-        // not be what makes an upload fail.
-        reportUrl: payload.reportUrl ?? `/api/site/media/uploads/${payload.token}/report`,
-        expiresAt: payload.expiresAt ?? "",
+        reportUrl: payload.reportUrl,
+        expiresAt: payload.expiresAt,
+        uploaded,
+        resumed: payload.resumed === true,
+    };
+}
+/**
+ * One part of a body, to its own signed address.
+ *
+ * The entity tag is the point. `CompleteMultipartUpload` names every part by number and tag, so a part
+ * whose tag the browser cannot read is a part that cannot be assembled -- which is why the bucket's CORS
+ * rule exposes `ETag`, and why a missing one is an error here rather than an empty string passed along.
+ *
+ * Retried on a transport failure and on a `5xx`, and never on a `4xx`: a signature the endpoint rejected
+ * will be rejected again, and repeating it only delays saying so.
+ */
+async function uploadPhiMediaUploadPart(part, body, onPartProgress) {
+    let lastError = null;
+    for (let attempt = 1; attempt <= PHI_MEDIA_UPLOAD_PART_ATTEMPTS; attempt += 1) {
+        try {
+            return await new Promise((resolve, reject) => {
+                const xhr = new XMLHttpRequest();
+                xhr.open("PUT", part.url);
+                for (const [header, value] of Object.entries(part.headers ?? {})) {
+                    xhr.setRequestHeader(header, value);
+                }
+                xhr.upload.onprogress = (event) => {
+                    if (event.lengthComputable)
+                        onPartProgress(event.loaded);
+                };
+                xhr.onerror = () => reject(new PhiMediaUploadError(`Part ${part.partNumber} did not reach the storage endpoint.`, PHI_MEDIA_UPLOAD_FAILURE_REASONS.StorageUnreachable, 0));
+                xhr.onload = () => {
+                    if (xhr.status < 200 || xhr.status >= 300) {
+                        reject(new PhiMediaUploadError(`Part ${part.partNumber} was refused (${xhr.status}).`, PHI_MEDIA_UPLOAD_FAILURE_REASONS.StorageRejected, xhr.status));
+                        return;
+                    }
+                    const eTag = (xhr.getResponseHeader("etag") ?? "").trim();
+                    if (!eTag) {
+                        reject(new PhiMediaUploadError(`Part ${part.partNumber} arrived without an entity tag, so it cannot be assembled.`, PHI_MEDIA_UPLOAD_FAILURE_REASONS.ClientError, xhr.status));
+                        return;
+                    }
+                    onPartProgress(body.size);
+                    resolve({ partNumber: part.partNumber, eTag });
+                };
+                xhr.send(body);
+            });
+        }
+        catch (error) {
+            lastError = error;
+            const status = error instanceof PhiMediaUploadError ? error.status : 0;
+            if (!isPhiMediaUploadPartWorthRepeating(status) || attempt === PHI_MEDIA_UPLOAD_PART_ATTEMPTS) {
+                throw error;
+            }
+            // Whatever a part already reported is undone before it is sent again, or the total would grow.
+            onPartProgress(0);
+        }
+    }
+    throw lastError ?? new Error("Part upload failed.");
+}
+/**
+ * The body as parts, which is what makes a large upload survivable.
+ *
+ * The gain is not a higher ceiling but a smaller unit of failure: a single request that dies at ninety
+ * per cent has to start over, while a part that dies repeats alone. That is why the threshold for this is
+ * the part size rather than some number where a file counts as large.
+ *
+ * The same reasoning reaches one step further than a failed request. A page that is reloaded or closed used
+ * to cost every part that had arrived; now those parts stay at the storage and the Server hands them back
+ * with the plan, so this sends what is missing and names the rest. Which parts they are is not this side's
+ * to work out -- the storage was asked.
+ *
+ * Progress is the sum of what every part reports, which is why a retry resets its own contribution
+ * first: a part that reported ten megabytes and then started again would otherwise count them twice and
+ * the total would run past the file.
+ */
+async function uploadPhiMediaUploadParts(plan, file, onProgress, 
+/** What an earlier attempt already delivered, which this one neither sends nor waits for. */
+stored = []) {
+    const loadedByPart = new Map();
+    const report = () => onProgress?.(resolvePhiMediaUploadPartProgress(loadedByPart, file.size));
+    for (const [partNumber, bytes] of resolvePhiMediaUploadStoredProgress(stored, plan.partSizeBytes, file.size)) {
+        loadedByPart.set(partNumber, bytes);
+    }
+    if (stored.length > 0)
+        report();
+    const queue = [...plan.parts].sort((left, right) => left.partNumber - right.partNumber);
+    // Seeded with what is already there: a completion has to name every part, and these tags come from the
+    // Server because the page that read them is gone.
+    const done = stored.map((part) => ({
+        partNumber: part.partNumber,
+        eTag: part.eTag,
+    }));
+    let next = 0;
+    const worker = async () => {
+        for (;;) {
+            const index = next;
+            next += 1;
+            const part = queue[index];
+            if (!part)
+                return;
+            const range = resolvePhiMediaUploadPartRange(part.partNumber, plan.partSizeBytes, file.size);
+            const body = file.slice(range.start, range.end);
+            done.push(await uploadPhiMediaUploadPart(part, body, (loadedBytes) => {
+                loadedByPart.set(part.partNumber, loadedBytes);
+                report();
+            }));
+        }
+    };
+    /*
+     * `Promise.all` and not `allSettled`: the first part to give up ends the upload, because an assembly
+     * missing one part cannot be completed and the parts already sent are aborted by the Server once the
+     * failure is reported. Waiting for the rest would only send bytes nobody will assemble.
+     */
+    await Promise.all(Array.from({ length: Math.min(PHI_MEDIA_UPLOAD_PART_CONCURRENCY, queue.length) }, worker));
+    return {
+        status: "uploaded",
+        completion: {
+            uploadId: plan.uploadId,
+            parts: done.sort((left, right) => left.partNumber - right.partNumber),
+        },
     };
 }
-export async function uploadPhiMediaUploadBody(plan, file, onProgress) {
+export async function uploadPhiMediaUploadBody(plan, file, onProgress, 
+/** Parts an earlier attempt delivered, where this session was taken over rather than opened. */
+stored = []) {
+    if (plan.kind === "multipart-put") {
+        return await uploadPhiMediaUploadParts(plan, file, onProgress, stored);
+    }
     if (plan.kind !== "proxy-stream" && plan.kind !== "presigned-put") {
         // A newer control plane issued a plan this Client cannot carry out. Saying so is the only safe
         // answer: there is no transport to fall back to that would not be a guess about where the body goes.
@@ -254,15 +530,28 @@ export async function finalizePhiMediaUploadSession(finalizeUrl, completion) {
 }
 export async function runPhiMediaUploadSession(file, onProgress, options) {
     const init = await initPhiMediaUploadSession(file, options);
+    const standDown = reportPhiMediaUploadAbandonmentOnLeaving(init.reportUrl, init.plan);
     let upload;
     try {
-        upload = await uploadPhiMediaUploadBody(init.plan, file, onProgress);
+        upload = await uploadPhiMediaUploadBody(init.plan, file, onProgress, init.uploaded);
     }
     catch (uploadError) {
+        standDown();
         // The Server cannot see this leg, so it is told rather than left to infer it from an expiry.
         await reportPhiMediaUploadFailure(init.reportUrl, readPhiMediaUploadFailureReason(uploadError), uploadError instanceof Error ? uploadError.message : null);
         throw uploadError;
     }
+    /*
+     * Stood down before finalize is sent, and deliberately not after it answers.
+     *
+     * Once the Server holds the finalize request it copies the staged object onto its final key and closes
+     * the session; a beacon arriving in the middle of that would be a second request racing the first for
+     * the same row and the same object. A beacon arriving *after* it is harmless -- the row is gone, so the
+     * report answers 404 and touches nothing -- but the window in between is not worth leaving open for a
+     * body that has already arrived. What this gives up is the sliver where somebody leaves after the body
+     * landed and before finalize was sent, and expiry already answers for that.
+     */
+    standDown();
     const finalize = await finalizePhiMediaUploadSession(init.finalizeUrl, upload.completion);
     return {
         asset: finalize.asset,
@@ -290,13 +579,17 @@ export async function runPhiAddonAssetUpload(input) {
     const { file, reservation, finalize, onProgress } = input;
     const reportUrl = input.reportUrl
         ?? `/api/site/media/uploads/${encodeURIComponent(reservation.token)}/report`;
+    const standDown = reportPhiMediaUploadAbandonmentOnLeaving(reportUrl, reservation.plan);
     let upload;
     try {
         upload = await uploadPhiMediaUploadBody(reservation.plan, file, onProgress);
     }
     catch (uploadError) {
+        standDown();
         await reportPhiMediaUploadFailure(reportUrl, readPhiMediaUploadFailureReason(uploadError), uploadError instanceof Error ? uploadError.message : null);
         throw uploadError;
     }
+    // The same moment as Core's own flow, for the same reason: there is one upload lifecycle.
+    standDown();
     return await finalize(upload.completion);
 }

package/components/media/media-widget-labels.d.ts

@@ -117,6 +117,7 @@ export type PhiMediaPickerWidgetLabels = {
     popoverTitle: string;
     selectedLabel: string;
     emptyDescription: string;
+    loadFailedDescription: string;
     clearLabel: string;
     tileSizeLabel: string;
 };

package/components/media/media-widget-labels.js

@@ -98,6 +98,7 @@ export const PHI_MEDIA_WIDGET_DEFAULT_LABELS = {
         popoverTitle: "Mediathek",
         selectedLabel: "Selected asset",
         emptyDescription: "No assets found.",
+        loadFailedDescription: "The media library could not be loaded.",
         clearLabel: "Clear selection",
         tileSizeLabel: "Tile size",
     },

package/components/media/phi-area-upload-widget.d.ts

@@ -1,4 +1,4 @@
-import type { PhiCmsAreaUploadWidgetConfig } from "../../plugins/runtime-modules/asset/widgets/area-upload/config";
+import type { PhiCmsAreaUploadWidgetConfig } from "../../types/media";
 import type { PhiCollectionProviderQuery } from "../../types/collection-provider";
 import type { PhiAreaUploadWidgetLabels } from "./media-widget-labels";
 import { type PhiImagePreviewStoreState } from "./phi-image-preview-store";

package/components/media/phi-area-upload-widget.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DeleteOutlined, UploadOutlined } from "@ant-design/icons";
-import { Flex, Progress, Space, Spin, Typography, Upload } from "antd";
 import { PhiTagControl } from "../controls/phi-tag-control";
 import { PhiButtonControl } from "../controls/phi-button-control";
 import NextImage from "next/image";
@@ -13,12 +12,18 @@ import { PhiMediaKindIcon } from "./phi-media-kind-icon";
 import { PhiMediaUploadError, resolvePhiMediaUploadInitOptions, runPhiMediaUploadSession, } from "./media-upload-flow";
 import { PHI_MEDIA_UPLOAD_DEFAULT_LABELS, readPhiMediaUploadErrorMessage, } from "./phi-media-upload";
 import { 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 { applyPhiAssetCollectionData, buildPhiAssetCollectionQuery, PHI_ASSET_COLLECTION_DATA_SOURCE, } from "./asset-collection-runtime";
 import { PhiFileDropGuard } from "./phi-file-drop-guard";
 import { usePhiApplicationFeedback } from "../runtime/use-phi-application-feedback";
+import { resolvePhiThemeBorderLine } from "../../helpers/border-widget-style";
 import { usePhiConfig } from "../root/phi-config-provider";
 import { usePhiCollectionProviderAction } from "../widgets/client/shared/phi-collection-provider";
+import { PhiFileDropControl } from "../controls/phi-file-drop-control";
+import { PhiProgressControl } from "../controls/phi-progress-control";
+import { PhiFlexControl } from "../controls/phi-flex-control";
+import { PhiTypographyControl } from "../controls/phi-typography-control";
+import { PhiSpinControl } from "../controls/phi-spin-control";
 function buildUploadWallItem(asset, localId) {
     return {
         localId,
@@ -193,6 +198,14 @@ export function PhiAreaUploadBinding({ config, labels, onUploadComplete, collect
         ]);
         return nextLocalId;
     }
+    /*
+     * One file, transported by us.
+     *
+     * This was `customRequest`, whose `onProgress`, `onSuccess` and `onError` fed an Ant Design file
+     * list that `showUploadList={false}` never rendered -- every visible part of the progress already
+     * came from `uploadWall` below. Dropping the primitive dropped that second, invisible copy with it.
+     * A retry from the wall comes through here as well, into the tile it already has (`localId`).
+     */
     async function uploadFileToWallItem(file, localId) {
         const nextLocalId = startUploadWallItem(file, localId);
         try {
@@ -217,42 +230,7 @@ export function PhiAreaUploadBinding({ config, labels, onUploadComplete, collect
             showUploadMessage("error", errorMessage);
         }
     }
-    const customRequest = async (options) => {
-        const uploadOptions = options;
-        const { file, onProgress, onSuccess, onError } = uploadOptions;
-        const uploadFile = file;
-        let localId = "";
-        try {
-            localId = await Promise.resolve(startUploadWallItem(uploadFile));
-            const payload = await runPhiMediaUploadSession(uploadFile, (progress) => {
-                onProgress?.({ percent: progress });
-                setUploadWall((current) => current.map((item) => item.localId === localId ? { ...item, progress, status: "uploading" } : item));
-            }, uploadInitOptions);
-            const uploadedTile = normalizePhiImagePreviewTile(payload.asset, []);
-            setUploadWall((current) => current.map((item) => item.localId === localId ? buildUploadWallItem(uploadedTile, localId) : item));
-            onUploadComplete?.();
-            onSuccess?.(payload.asset);
-        }
-        catch (error) {
-            onError?.(error);
-            showUploadMessage("error", resolveUploadErrorMessage(error, labels));
-            setUploadWall((current) => current.map((item) => item.localId === localId
-                ? {
-                    ...item,
-                    progress: 100,
-                    status: "error",
-                    error: resolveUploadErrorMessage(error, labels),
-                }
-                : item));
-        }
-    };
-    const uploadProps = {
-        multiple,
-        showUploadList: false,
-        accept,
-        customRequest,
-    };
-    return (_jsxs(Flex, { vertical: true, gap: 12, style: { width: "100%" }, children: [_jsx(PhiFileDropGuard, {}), _jsx("div", { "data-phi-media-dropzone": "true", onDragEnter: () => {
+    return (_jsxs(PhiFlexControl, { vertical: true, gap: 12, style: { width: "100%" }, children: [_jsx(PhiFileDropGuard, {}), _jsx("div", { "data-phi-media-dropzone": "true", onDragEnter: () => {
                     dragDepth.current += 1;
                     setIsDragActive(true);
                 }, onDragLeave: () => {
@@ -267,21 +245,28 @@ export function PhiAreaUploadBinding({ config, labels, onUploadComplete, collect
                 }, onDrop: () => {
                     dragDepth.current = 0;
                     setIsDragActive(false);
-                }, style: { width: "100%" }, children: _jsx(Upload.Dragger, { ...uploadProps, style: {
+                }, style: { width: "100%" }, children: _jsx(PhiFileDropControl, { dropZone: true, multiple: multiple, accept: accept, onFile: (file) => void uploadFileToWallItem(file), style: {
                         padding: 0,
                         width: "100%",
                         borderColor: isDragActive ? token.colorPrimary : undefined,
                         background: isDragActive ? token.colorFillQuaternary : undefined,
-                    }, children: _jsxs(Space, { orientation: "vertical", align: "center", size: 4, style: {
+                    }, children: _jsxs(PhiFlexControl, { vertical: true, align: "center", gap: 4, style: {
                             width: "100%",
                             minHeight: uploadTileMinHeight,
                             justifyContent: "center",
                             cursor: isDragActive ? "copy" : "default",
-                        }, children: [_jsx(UploadOutlined, { style: { fontSize: uploadTileIconSize, color: token.colorTextSecondary } }), _jsx(Typography.Text, { strong: true, children: labels.dropTitle }), _jsx(Typography.Text, { type: "secondary", children: labels.dropHint })] }) }) }), _jsx(PhiCollectionLayoutControl, { mode: "grid", gap: token.paddingSM, minColumnWidth: uploadTileFrameSize, items: uploadWall.map((item) => {
+                        }, children: [_jsx(UploadOutlined, { style: { fontSize: uploadTileIconSize, color: token.colorTextSecondary } }), _jsx(PhiTypographyControl, { strong: true, children: labels.dropTitle }), _jsx(PhiTypographyControl, { type: "secondary", children: labels.dropHint })] }) }) }), _jsx(PhiCollectionLayoutControl, { mode: "grid", gap: token.paddingSM, minColumnWidth: uploadTileFrameSize, items: uploadWall.map((item) => {
                     const displayDimensions = resolveUploadWallDisplayDimensions(item);
                     return (_jsxs("div", { style: {
-                            border: `1px solid ${token.colorBorderSecondary}`,
-                            borderRadius: token.borderRadiusLG,
+                            border: resolvePhiThemeBorderLine(token.colorBorderSecondary),
+                            /*
+                             * The same corner the finished tile beside it takes: the Site's surface step, not the
+                             * widest corner the numeric scale happens to have (THEME.md, "Control shape").
+                             * `borderRadiusLG` here meant an upload stood square in a `pill` Site and then changed
+                             * shape the moment it turned into an asset tile. No antd fallback beside it -- the
+                             * Provider `usePhiConfig` reads is what writes this property.
+                             */
+                            borderRadius: "var(--phi-surface-radius)",
                             overflow: "hidden",
                             background: item.status === "uploading" ? token.colorFillTertiary : token.colorBgContainer,
                             position: "relative",
@@ -290,7 +275,7 @@ export function PhiAreaUploadBinding({ config, labels, onUploadComplete, collect
                                     width: "100%",
                                     aspectRatio: "1 / 1",
                                     background: item.status === "uploading" ? token.colorFillSecondary : token.colorFillTertiary,
-                                }, children: [item.kind === "image" && item.thumbnailUrl ? (_jsx(NextImage, { alt: item.title ?? item.originalName, src: item.thumbnailUrl, fill: true, sizes: "100px", unoptimized: true, style: { objectFit: "cover" } })) : (_jsx(Flex, { align: "center", justify: "center", style: { width: "100%", height: "100%" }, children: _jsx(PhiMediaKindIcon, { kind: item.kind, size: 32 }) })), item.kind === "image" && displayDimensions ? (_jsxs(Typography.Text, { style: {
+                                }, children: [item.kind === "image" && item.thumbnailUrl ? (_jsx(NextImage, { alt: item.title ?? item.originalName, src: item.thumbnailUrl, fill: true, sizes: "100px", unoptimized: true, style: { objectFit: "cover" } })) : (_jsx(PhiFlexControl, { align: "center", justify: "center", style: { width: "100%", height: "100%" }, children: _jsx(PhiMediaKindIcon, { kind: item.kind, size: 32 }) })), item.kind === "image" && displayDimensions ? (_jsxs(PhiTypographyControl, { style: {
                                             position: "absolute",
                                             left: 6,
                                             bottom: 6,
@@ -307,7 +292,7 @@ export function PhiAreaUploadBinding({ config, labels, onUploadComplete, collect
                                             justifyContent: "center",
                                             background: "rgba(255, 255, 255, 0.68)",
                                             color: token.colorText,
-                                        }, children: _jsx(Progress, { type: "circle", percent: item.progress, size: 48 }) })) : null, item.status === "error" ? (_jsx("div", { style: {
+                                        }, children: _jsx(PhiProgressControl, { type: "circle", percent: item.progress, size: 48 }) })) : null, item.status === "error" ? (_jsx("div", { style: {
                                             position: "absolute",
                                             inset: 0,
                                             display: "flex",
@@ -317,7 +302,7 @@ export function PhiAreaUploadBinding({ config, labels, onUploadComplete, collect
                                             color: token.colorTextLightSolid,
                                             padding: 12,
                                             textAlign: "center",
-                                        }, children: _jsx(Typography.Text, { style: { color: token.colorTextLightSolid }, children: item.error ?? labels.uploadFailedText }) })) : null, item.deleting ? (_jsx("div", { style: {
+                                        }, children: _jsx(PhiTypographyControl, { style: { color: token.colorTextLightSolid }, children: item.error ?? labels.uploadFailedText }) })) : null, item.deleting ? (_jsx("div", { style: {
                                             position: "absolute",
                                             inset: 0,
                                             display: "flex",
@@ -325,9 +310,9 @@ export function PhiAreaUploadBinding({ config, labels, onUploadComplete, collect
                                             justifyContent: "center",
                                             background: "rgba(0, 0, 0, 0.28)",
                                             color: "#fff",
-                                        }, children: _jsx(Spin, {}) })) : null] }), _jsxs(Flex, { vertical: true, gap: 6, style: { padding: token.paddingSM }, children: [_jsx(Flex, { align: "center", justify: "space-between", gap: 8, children: _jsx(Typography.Text, { strong: true, ellipsis: true, title: item.title ?? item.originalName, style: { minWidth: 0 }, children: item.title ?? item.originalName }) }), _jsxs(Flex, { align: "center", justify: "space-between", gap: 8, wrap: true, children: [_jsx(Typography.Text, { type: "secondary", ellipsis: true, style: { display: "block", minWidth: 0 }, children: resolveAssetTypeLabel(item.kind, item.contentType, item.originalName) }), allowDelete && item.assetId > 0 ? (_jsx(PhiButtonControl, { ariaLabel: labels.deleteLabel, icon: _jsx(DeleteOutlined, {}), type: "text", size: "small", danger: true, onClick: () => {
+                                        }, children: _jsx(PhiSpinControl, {}) })) : null] }), _jsxs(PhiFlexControl, { vertical: true, gap: 6, style: { padding: token.paddingSM }, children: [_jsx(PhiFlexControl, { align: "center", justify: "space-between", gap: 8, children: _jsx(PhiTypographyControl, { strong: true, ellipsis: true, title: item.title ?? item.originalName, style: { minWidth: 0 }, children: item.title ?? item.originalName }) }), _jsxs(PhiFlexControl, { align: "center", justify: "space-between", gap: 8, wrap: true, children: [_jsx(PhiTypographyControl, { type: "secondary", ellipsis: true, style: { display: "block", minWidth: 0 }, children: resolveAssetTypeLabel(item.kind, item.contentType, item.originalName) }), allowDelete && item.assetId > 0 ? (_jsx(PhiButtonControl, { ariaLabel: labels.deleteLabel, icon: _jsx(DeleteOutlined, {}), type: "text", size: "small", danger: true, onClick: () => {
                                                     void deleteUploadedAsset(item.localId, item.assetId);
-                                                } })) : null] }), _jsxs(Flex, { align: "center", gap: 6, wrap: true, children: [_jsx(PhiTagControl, { color: item.status === "error" ? "red" : item.status === "uploading" ? "blue" : "green", children: resolveUploadStatusLabel(item, labels) }), item.status === "error" && item.file ? (_jsx(PhiButtonControl, { type: "primary", size: "small", onClick: () => {
+                                                } })) : null] }), _jsxs(PhiFlexControl, { align: "center", gap: 6, wrap: true, children: [_jsx(PhiTagControl, { color: item.status === "error" ? "red" : item.status === "uploading" ? "blue" : "green", children: resolveUploadStatusLabel(item, labels) }), item.status === "error" && item.file ? (_jsx(PhiButtonControl, { type: "primary", size: "small", onClick: () => {
                                                     void uploadFileToWallItem(item.file, item.localId);
                                                 }, label: labels.retryLabel })) : null] })] })] }, item.localId));
                 }) })] }));

package/components/media/phi-asset-focal-rect-widget.d.ts

@@ -1,4 +1,4 @@
-import type { PhiCmsAssetFocalRectWidgetConfig } from "../../plugins/runtime-modules/asset/widgets/asset-focal-rect/config";
+import type { PhiCmsAssetFocalRectWidgetConfig } from "../../types/media";
 export declare function PhiAssetFocalRectWidget({ config, }: {
     config?: PhiCmsAssetFocalRectWidgetConfig | null;
-}): import("react").JSX.Element | null;
+}): import("react").JSX.Element;

package/components/media/phi-asset-focal-rect-widget.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import NextImage from "next/image";
 import { useCallback, useLayoutEffect, useMemo, useRef, useState, } from "react";
-import { findPhiSignalRoutesByCapabilityId } from "../../types/signals";
+import { findPhiSignalRoutesByCapabilityId, resolvePhiSignalRouteValue, } from "../../types/signals";
 import { usePhiSignalListener } from "../runtime/runtime-signal-bus";
 import { usePhiSignalEmitter, usePhiSignalIdentity } from "../runtime/runtime-signal-identity";
 import { PhiTagControl } from "../controls/phi-tag-control";
@@ -49,6 +49,13 @@ export function PhiAssetFocalRectWidget({ config, }) {
     const state = usePhiImagePreviewStore(PHI_ASSET_CONTROLLER_STORE_KEY);
     const selectedTile = state.selectedAsset ?? state.assets.find((asset) => asset.id === state.selectedAssetId) ?? null;
     const asset = useMemo(() => selectedTile ? normalizePhiImagePreviewSelectionAsset(selectedTile) : null, [selectedTile]);
+    /*
+     * The draft and the rectangle `reset` returns to are seeded from the asset they were opened on. A
+     * different asset is a different edit, so it gets a fresh editor instead of the last asset's draft.
+     */
+    return _jsx(PhiAssetFocalRectEditor, { asset: asset, config: config }, asset?.id ?? "");
+}
+function PhiAssetFocalRectEditor({ asset, config, }) {
     const currentRect = useMemo(() => normalizeMediaFocalRect(asset?.meta?.focalRect), [asset?.meta?.focalRect]);
     const [draft, setDraft] = useState(() => currentRect ?? createDefaultFocalRect());
     const originalRef = useRef(currentRect);
@@ -89,7 +96,7 @@ export function PhiAssetFocalRectWidget({ config, }) {
                 scope: route.scope,
                 channel: route.channel,
                 action: route.action,
-                value: route.valueType === "none" ? null : value,
+                value: resolvePhiSignalRouteValue(route, value),
                 valueType: route.valueType,
                 valueSchema: route.valueSchema ?? null,
                 receiver: route.receiver,
@@ -126,7 +133,11 @@ export function PhiAssetFocalRectWidget({ config, }) {
             ...current,
             meta: { ...(current.meta ?? {}), focalRect: next },
         }));
-        emitCapability("focalRectChange", { fieldKey: "focalRect", value: next }, signal.correlationId);
+        /*
+         * The rectangle, and not a field: which field it lands in is written on the route
+         * (`fieldKey`), so this Widget can sit beside a different Form without being changed.
+         */
+        emitCapability("focalRectChange", next, signal.correlationId);
         emitCapability("close", null, signal.correlationId);
     }, [asset, draft, emitCapability, listenRoutes, receiver]);
     const signalFilter = useMemo(() => {