@phis/ui 0.2.1 → 0.4.0

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

@@ -1,3 +1,4 @@
+import { isPhiRecord } from "../../helpers/is-record";
 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. */
@@ -70,6 +71,36 @@ export class PhiMediaUploadError extends Error {
         Object.setPrototypeOf(this, PhiMediaUploadError.prototype);
     }
 }
+/**
+ * What an upload that was stopped throws.
+ *
+ * A `PhiMediaUploadError` with the `cancelled` code, so the report to the Server and the reading a
+ * surface gives it come from one place: a person who stopped an upload decided against it, and the
+ * Server clears up what arrived. A surface that stopped it itself reads it with
+ * `isPhiMediaUploadCancelled` and shows nothing, since nobody is waiting for an answer.
+ */
+function createPhiMediaUploadCancelledError() {
+    return new PhiMediaUploadError("The upload was stopped.", "cancelled", 0);
+}
+export function isPhiMediaUploadCancelled(error) {
+    return error instanceof PhiMediaUploadError && error.code === "cancelled";
+}
+function throwIfPhiMediaUploadAborted(signal) {
+    if (signal?.aborted)
+        throw createPhiMediaUploadCancelledError();
+}
+/**
+ * Ends a request when the signal does.
+ *
+ * Returns the way to stop listening, which the request calls once it settled: a signal outlives the
+ * request it was handed to, and a listener left on it would abort a request that is long finished.
+ */
+function bindPhiMediaUploadAbort(signal, abort) {
+    if (!signal)
+        return () => { };
+    signal.addEventListener("abort", abort, { once: true });
+    return () => signal.removeEventListener("abort", abort);
+}
 /**
  * What a Client may say about a body it could not deliver.
  *
@@ -100,7 +131,7 @@ export const PHI_MEDIA_UPLOAD_FAILURE_REASONS = {
  * Deliberately quiet: it is a courtesy to the operator's log, not a step the upload depends on, so a
  * failure to report must not replace the failure being reported.
  */
-export async function reportPhiMediaUploadFailure(reportUrl, reason, detail) {
+async function reportPhiMediaUploadFailure(reportUrl, reason, detail) {
     try {
         await fetch(reportUrl, {
             method: "POST",
@@ -251,12 +282,12 @@ async function readJsonResponse(response) {
     }
     return payload;
 }
-export async function initPhiMediaUploadSession(file, options) {
+export async function initPhiMediaUploadSession(file, options, signal) {
     const folderId = Number.isInteger(options?.folderId) && (options?.folderId ?? 0) > 0
         ? options?.folderId
         : null;
     const presentationFlags = Number.isInteger(options?.presentationFlags) && (options?.presentationFlags ?? 0) >= 0 ? options?.presentationFlags : null;
-    const meta = options?.meta && typeof options.meta === "object" && !Array.isArray(options.meta)
+    const meta = isPhiRecord(options?.meta)
         ? options.meta
         : null;
     // The Space is named the way every Media route names one -- as a query parameter -- while the Folder
@@ -271,6 +302,7 @@ export async function initPhiMediaUploadSession(file, options) {
     const initUrl = spaceAddress
         ? `/api/site/media/uploads/init?spaceId=${encodeURIComponent(spaceAddress)}`
         : "/api/site/media/uploads/init";
+    throwIfPhiMediaUploadAborted(signal);
     const response = await fetch(initUrl, {
         method: "POST",
         headers: buildPhiMediaRequestHeaders({
@@ -278,6 +310,7 @@ export async function initPhiMediaUploadSession(file, options) {
             "Content-Type": "application/json",
         }),
         cache: "no-store",
+        ...(signal ? { signal } : {}),
         body: JSON.stringify({
             filename: file.name,
             contentType: file.type || "application/octet-stream",
@@ -320,12 +353,17 @@ export async function initPhiMediaUploadSession(file, options) {
  * 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) {
+async function uploadPhiMediaUploadPart(part, body, onPartProgress, signal) {
     let lastError = null;
     for (let attempt = 1; attempt <= PHI_MEDIA_UPLOAD_PART_ATTEMPTS; attempt += 1) {
+        throwIfPhiMediaUploadAborted(signal);
+        let abort = () => { };
+        const unbind = bindPhiMediaUploadAbort(signal, () => abort());
         try {
             return await new Promise((resolve, reject) => {
                 const xhr = new XMLHttpRequest();
+                abort = () => xhr.abort();
+                xhr.onabort = () => reject(createPhiMediaUploadCancelledError());
                 xhr.open("PUT", part.url);
                 for (const [header, value] of Object.entries(part.headers ?? {})) {
                     xhr.setRequestHeader(header, value);
@@ -354,12 +392,17 @@ async function uploadPhiMediaUploadPart(part, body, onPartProgress) {
         catch (error) {
             lastError = error;
             const status = error instanceof PhiMediaUploadError ? error.status : 0;
-            if (!isPhiMediaUploadPartWorthRepeating(status) || attempt === PHI_MEDIA_UPLOAD_PART_ATTEMPTS) {
+            if (isPhiMediaUploadCancelled(error) ||
+                !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);
         }
+        finally {
+            unbind();
+        }
     }
     throw lastError ?? new Error("Part upload failed.");
 }
@@ -378,12 +421,22 @@ async function uploadPhiMediaUploadPart(part, body, onPartProgress) {
  * 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.
+ *
+ * The first part to give up ends the upload, and ends it for every worker: an assembly missing one part
+ * cannot be completed, and the Server aborts the parts already sent once the failure is reported. So
+ * the failure stops the others -- no worker takes another part, and the ones in flight are aborted --
+ * and only once all of them have stopped is it thrown. Thrown earlier, the failure would be reported
+ * while the remaining workers were still sending bytes nobody will assemble, and their progress would
+ * land on an upload that already reads as failed.
  */
 async function uploadPhiMediaUploadParts(plan, file, onProgress, 
 /** What an earlier attempt already delivered, which this one neither sends nor waits for. */
-stored = []) {
+stored = [], signal) {
     const loadedByPart = new Map();
     const report = () => onProgress?.(resolvePhiMediaUploadPartProgress(loadedByPart, file.size));
+    const stop = new AbortController();
+    const unbind = bindPhiMediaUploadAbort(signal, () => stop.abort());
+    const failures = [];
     for (const [partNumber, bytes] of resolvePhiMediaUploadStoredProgress(stored, plan.partSizeBytes, file.size)) {
         loadedByPart.set(partNumber, bytes);
     }
@@ -398,7 +451,7 @@ stored = []) {
     }));
     let next = 0;
     const worker = async () => {
-        for (;;) {
+        while (!stop.signal.aborted) {
             const index = next;
             next += 1;
             const part = queue[index];
@@ -406,18 +459,32 @@ stored = []) {
                 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();
-            }));
+            try {
+                done.push(await uploadPhiMediaUploadPart(part, body, (loadedBytes) => {
+                    if (stop.signal.aborted)
+                        return;
+                    loadedByPart.set(part.partNumber, loadedBytes);
+                    report();
+                }, stop.signal));
+            }
+            catch (error) {
+                // The first failure is the one reported; the others are this one stopping them.
+                failures.push(error);
+                stop.abort();
+                return;
+            }
         }
     };
-    /*
-     * `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));
+    try {
+        await Promise.all(Array.from({ length: Math.min(PHI_MEDIA_UPLOAD_PART_CONCURRENCY, queue.length) }, worker));
+    }
+    finally {
+        unbind();
+    }
+    // A person who stopped it is the reason, whichever part noticed first.
+    throwIfPhiMediaUploadAborted(signal);
+    if (failures.length > 0)
+        throw failures[0];
     return {
         status: "uploaded",
         completion: {
@@ -428,9 +495,12 @@ stored = []) {
 }
 export async function uploadPhiMediaUploadBody(plan, file, onProgress, 
 /** Parts an earlier attempt delivered, where this session was taken over rather than opened. */
-stored = []) {
+stored = [], 
+/** Stops the body where it is; what is in flight is aborted and the call throws `cancelled`. */
+signal) {
+    throwIfPhiMediaUploadAborted(signal);
     if (plan.kind === "multipart-put") {
-        return await uploadPhiMediaUploadParts(plan, file, onProgress, stored);
+        return await uploadPhiMediaUploadParts(plan, file, onProgress, stored, signal);
     }
     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
@@ -440,8 +510,23 @@ stored = []) {
     // A presigned plan addresses the Provider, not this Site: its credentials must not travel with the
     // body, and its content type is whatever the signature was issued over.
     const external = plan.kind === "presigned-put";
-    return await new Promise((resolve, reject) => {
+    let abort = () => { };
+    const unbind = bindPhiMediaUploadAbort(signal, () => abort());
+    try {
+        return await sendPhiMediaUploadSingleBody(plan, file, external, onProgress, (abortRequest) => {
+            abort = abortRequest;
+        });
+    }
+    finally {
+        unbind();
+    }
+}
+/** The single-request plans: one PUT to the Site or to a presigned address. */
+function sendPhiMediaUploadSingleBody(plan, file, external, onProgress, onRequest) {
+    return new Promise((resolve, reject) => {
         const xhr = new XMLHttpRequest();
+        onRequest(() => xhr.abort());
+        xhr.onabort = () => reject(createPhiMediaUploadCancelledError());
         xhr.open(plan.method, plan.url);
         xhr.withCredentials = !external;
         if (!external) {
@@ -502,7 +587,7 @@ stored = []) {
         xhr.send(file);
     });
 }
-export async function finalizePhiMediaUploadSession(finalizeUrl, completion) {
+async function finalizePhiMediaUploadSession(finalizeUrl, completion) {
     const response = await fetch(finalizeUrl, {
         method: "POST",
         headers: buildPhiMediaRequestHeaders({
@@ -528,12 +613,35 @@ export async function finalizePhiMediaUploadSession(finalizeUrl, completion) {
         asset: payload.asset,
     };
 }
-export async function runPhiMediaUploadSession(file, onProgress, options) {
-    const init = await initPhiMediaUploadSession(file, options);
+/**
+ * An init aborted by the signal reads as `cancelled`, not as the `AbortError` fetch throws: the
+ * caller asks one question, whether it was stopped.
+ */
+async function readPhiMediaUploadCancellation(run, signal) {
+    try {
+        return await run();
+    }
+    catch (error) {
+        throwIfPhiMediaUploadAborted(signal);
+        throw error;
+    }
+}
+/**
+ * One file through Core's own upload routes.
+ *
+ * `signal` stops it up to the moment finalize is sent: an init in flight is aborted, a body in flight is
+ * aborted and reported `cancelled`, so the Server clears up the reservation and whatever arrived. Once
+ * finalize is sent it is not stopped -- the Server is already turning the body into an Asset, and aborting
+ * the request would only hide the answer. A caller that stopped it ignores what comes back.
+ */
+export async function runPhiMediaUploadSession(file, onProgress, options, signal) {
+    const init = await readPhiMediaUploadCancellation(() => initPhiMediaUploadSession(file, options, signal), signal);
     const standDown = reportPhiMediaUploadAbandonmentOnLeaving(init.reportUrl, init.plan);
     let upload;
     try {
-        upload = await uploadPhiMediaUploadBody(init.plan, file, onProgress, init.uploaded);
+        upload = await uploadPhiMediaUploadBody(init.plan, file, onProgress, init.uploaded, signal);
+        // Stopped after the last byte and before finalize: the body is there, and nobody wants the Asset.
+        throwIfPhiMediaUploadAborted(signal);
     }
     catch (uploadError) {
         standDown();
@@ -576,13 +684,14 @@ export async function runPhiMediaUploadSession(file, onProgress, options) {
  * called with whatever the plan's issuer wanted reported back, unread on the way through.
  */
 export async function runPhiAddonAssetUpload(input) {
-    const { file, reservation, finalize, onProgress } = input;
+    const { file, reservation, finalize, onProgress, signal } = 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);
+        upload = await uploadPhiMediaUploadBody(reservation.plan, file, onProgress, [], signal);
+        throwIfPhiMediaUploadAborted(signal);
     }
     catch (uploadError) {
         standDown();

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

@@ -1,15 +1,15 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DeleteOutlined, UploadOutlined } from "@ant-design/icons";
+import { resolvePhiMediaAssetTypeLabel } from "./asset-type-label";
 import { PhiTagControl } from "../controls/phi-tag-control";
 import { PhiButtonControl } from "../controls/phi-button-control";
 import NextImage from "next/image";
-import { useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { PhiCollectionLayoutControl } from "../controls/phi-collection-layout-control";
 import { resolvePhiMediaKindFromContentType, } from "../../constants/media";
 import { normalizePhiImagePreviewTile, resolvePhiMediaAssetDisplayDimensions, } from "./phi-image-preview-data";
 import { PhiMediaKindIcon } from "./phi-media-kind-icon";
-import { PhiMediaUploadError, resolvePhiMediaUploadInitOptions, runPhiMediaUploadSession, } from "./media-upload-flow";
+import { PhiMediaUploadError, isPhiMediaUploadCancelled, 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 "./asset-controller-signals";
@@ -24,6 +24,7 @@ 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";
+import { PhiIcon } from "../shell/phi-icon";
 function buildUploadWallItem(asset, localId) {
     return {
         localId,
@@ -74,27 +75,6 @@ function resolveUploadErrorMessage(error, labels) {
         errorStorageUnreachable: labels.uploadStorageUnreachableText,
     });
 }
-function resolveAssetTypeLabel(kind, contentType, originalName) {
-    const normalizedContentType = contentType.trim().toLowerCase();
-    if (kind === "image") {
-        const subtype = normalizedContentType.startsWith("image/")
-            ? normalizedContentType.split("/", 2)[1]
-            : null;
-        if (subtype) {
-            return subtype.split(";")[0].trim();
-        }
-        return normalizedContentType || "image";
-    }
-    const extension = originalName.trim().split(".").pop()?.trim().toLowerCase();
-    if (extension && extension !== originalName.trim().toLowerCase()) {
-        return extension;
-    }
-    const [, subtype] = normalizedContentType.split("/", 2);
-    if (subtype) {
-        return subtype.split(";")[0].trim();
-    }
-    return kind;
-}
 function resolveUploadWallDisplayDimensions(item) {
     return resolvePhiMediaAssetDisplayDimensions(item);
 }
@@ -108,6 +88,20 @@ export function PhiAreaUploadBinding({ config, labels, onUploadComplete, collect
     const previewState = usePhiImagePreviewStore(PHI_ASSET_CONTROLLER_STORE_KEY);
     const activateCollectionAction = usePhiCollectionProviderAction(PHI_ASSET_COLLECTION_DATA_SOURCE);
     const dragDepth = useRef(0);
+    /*
+     * Uploads still on their way. The wall belongs to whatever shows it -- a Media picker in an Overlay
+     * more often than not -- and closing that stops them, so no Asset is finalized that nobody sees
+     * arrive. The Server is told `cancelled` and clears up what had arrived.
+     */
+    const runningUploads = useRef(new Set());
+    useEffect(() => {
+        const controllers = runningUploads.current;
+        return () => {
+            for (const controller of controllers)
+                controller.abort();
+            controllers.clear();
+        };
+    }, []);
     const [uploadWall, setUploadWall] = useState([]);
     const [isDragActive, setIsDragActive] = useState(false);
     const allowDelete = config?.allowDelete ?? true;
@@ -208,16 +202,22 @@ export function PhiAreaUploadBinding({ config, labels, onUploadComplete, collect
      */
     async function uploadFileToWallItem(file, localId) {
         const nextLocalId = startUploadWallItem(file, localId);
+        const controller = new AbortController();
+        runningUploads.current.add(controller);
         try {
             const payload = await runPhiMediaUploadSession(file, (progress) => {
                 setUploadWall((current) => current.map((item) => item.localId === nextLocalId ? { ...item, progress, status: "uploading" } : item));
-            }, uploadInitOptions);
+            }, uploadInitOptions, controller.signal);
+            if (controller.signal.aborted)
+                return;
             const uploadedTile = normalizePhiImagePreviewTile(payload.asset, []);
             setUploadWall((current) => current.map((item) => item.localId === nextLocalId ? buildUploadWallItem(uploadedTile, nextLocalId) : item));
             onUploadComplete?.();
             showUploadMessage("success", labels.uploadSuccessTemplate.replace("%1", file.name));
         }
         catch (error) {
+            if (controller.signal.aborted || isPhiMediaUploadCancelled(error))
+                return;
             const errorMessage = resolveUploadErrorMessage(error, labels);
             setUploadWall((current) => current.map((item) => item.localId === nextLocalId
                 ? {
@@ -229,6 +229,9 @@ export function PhiAreaUploadBinding({ config, labels, onUploadComplete, collect
                 : item));
             showUploadMessage("error", errorMessage);
         }
+        finally {
+            runningUploads.current.delete(controller);
+        }
     }
     return (_jsxs(PhiFlexControl, { vertical: true, gap: 12, style: { width: "100%" }, children: [_jsx(PhiFileDropGuard, {}), _jsx("div", { "data-phi-media-dropzone": "true", onDragEnter: () => {
                     dragDepth.current += 1;
@@ -255,7 +258,7 @@ export function PhiAreaUploadBinding({ config, labels, onUploadComplete, collect
                             minHeight: uploadTileMinHeight,
                             justifyContent: "center",
                             cursor: isDragActive ? "copy" : "default",
-                        }, 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) => {
+                        }, children: [_jsx(PhiIcon, { name: "upload", size: "inherit", 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: resolvePhiThemeBorderLine(token.colorBorderSecondary),
@@ -310,7 +313,7 @@ export function PhiAreaUploadBinding({ config, labels, onUploadComplete, collect
                                             justifyContent: "center",
                                             background: "rgba(0, 0, 0, 0.28)",
                                             color: "#fff",
-                                        }, 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: () => {
+                                        }, 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: resolvePhiMediaAssetTypeLabel(item.kind, item.contentType, item.originalName) }), allowDelete && item.assetId > 0 ? (_jsx(PhiButtonControl, { ariaLabel: labels.deleteLabel, icon: _jsx(PhiIcon, { name: "delete", size: "inherit" }), type: "text", size: "small", danger: true, onClick: () => {
                                                     void deleteUploadedAsset(item.localId, item.assetId);
                                                 } })) : 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);

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

@@ -255,7 +255,6 @@ function PhiAssetFocalRectEditor({ asset, config, }) {
             maxHeight: "calc(100dvh - 240px)",
             minHeight: 240,
             overflow: "hidden",
-            borderRadius: "var(--ant-border-radius-lg)",
             background: "var(--ant-color-fill-tertiary)",
         }, children: _jsx("div", { ref: canvasRef, onPointerDown: pointerDown, onPointerMove: pointerMove, onPointerUp: pointerUp, onPointerCancel: pointerUp, style: { position: "absolute", inset: 0, cursor, touchAction: "none", userSelect: "none" }, children: _jsxs("div", { ref: imageRef, style: {
                     position: "absolute",

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CopyOutlined } from "@ant-design/icons";
+import { resolvePhiMediaAssetTypeLabel } from "./asset-type-label";
 import NextImage from "next/image";
 import { PhiImageAssetVariantKeyName, PhiMediaKind, isPhiMediaAssetOriginalOptimizable, resolvePhiImageAssetVariantSpec, } from "../../constants/media";
 import { PhiButtonControl } from "../controls/phi-button-control";
@@ -13,6 +13,7 @@ import { resolveFocalRectCoverImageStyle } from "./focal-rect";
 import { resolvePhiImagePresentation } from "./image-presentation";
 import { PhiFlexControl } from "../controls/phi-flex-control";
 import { PhiTypographyControl } from "../controls/phi-typography-control";
+import { PhiIcon } from "../shell/phi-icon";
 function formatBytes(bytes) {
     if (typeof bytes !== "number" || !Number.isFinite(bytes) || bytes <= 0)
         return null;
@@ -25,10 +26,6 @@ function formatBytes(bytes) {
     }
     return `${value.toFixed(value >= 10 || unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`;
 }
-function resolveAssetTypeLabel(contentType) {
-    const [, subtype] = contentType.trim().toLowerCase().split("/", 2);
-    return subtype?.split(";", 1)[0]?.trim() || contentType.trim() || null;
-}
 function resolvePreviewFrame(asset, selectedVariantKey) {
     if (asset.kind !== PhiMediaKind.Image)
         return null;
@@ -41,7 +38,7 @@ function resolvePreviewFrame(asset, selectedVariantKey) {
             fitAxis: variant.width >= variant.height ? "width" : "height",
             fixedCropBox: variant.width === variant.height && variant.width <= 256 ? variant.width : null,
             label: `${variant.width} × ${variant.height}`,
-            kindLabel: resolveAssetTypeLabel(asset.contentType) ?? asset.kind,
+            kindLabel: resolvePhiMediaAssetTypeLabel(asset.kind, asset.contentType, asset.originalName),
         };
     }
     const displayDimensions = resolvePhiMediaAssetDisplayDimensions(asset);
@@ -53,8 +50,8 @@ function resolvePreviewFrame(asset, selectedVariantKey) {
         fit: "contain",
         fitAxis: width && height && height > width ? "height" : "width",
         fixedCropBox: null,
-        label: width && height ? `${width} × ${height}` : resolveAssetTypeLabel(asset.contentType),
-        kindLabel: resolveAssetTypeLabel(asset.contentType) ?? asset.kind,
+        label: width && height ? `${width} × ${height}` : resolvePhiMediaAssetTypeLabel(asset.kind, asset.contentType, asset.originalName),
+        kindLabel: resolvePhiMediaAssetTypeLabel(asset.kind, asset.contentType, asset.originalName),
     };
 }
 function resolveOverlayTagStyle(background, color, borderColor) {
@@ -76,7 +73,7 @@ export function PhiAssetInspectorSection({ section, asset, selectedVariantKey, s
             [labels.inspector.contentTypeLabel, asset.contentType],
             [labels.inspector.originalNameLabel, asset.originalName],
         ];
-        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))) }));
+        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(PhiIcon, { name: "copy", size: "inherit" }), onClick: () => copy(value) })] })] }, label))) }));
     }
     const previewFrame = resolvePreviewFrame(asset, selectedVariantKey);
     const isOriginalSelection = selectedVariantKey == null;

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

@@ -3,16 +3,6 @@ export type PhiImagePreviewApiRecord = Omit<PhiMediaAsset, "kind"> & {
     thumbnailUrl?: string | null;
     previewUrl?: string | null;
 };
-export type PhiImagePreviewApiResponse = {
-    activeSpace?: PhiMediaSpaceOption;
-    spaces?: PhiMediaSpaceOption[];
-    assets?: PhiImagePreviewApiRecord[];
-    folders?: PhiMediaAssetFolder[];
-    pagination?: PhiMediaPickerPagination;
-    asset?: PhiImagePreviewApiRecord;
-    error?: string;
-};
-export declare function normalizePhiImagePreviewAsset(asset: PhiImagePreviewApiRecord): PhiMediaAsset;
 export declare function resolvePhiMediaAssetDisplayDimensions(asset: Pick<PhiMediaAssetTile, "contentType" | "width" | "height">): {
     width: number;
     height: number;

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

@@ -1,6 +1,6 @@
 import { resolvePhiMediaKindFromContentType } from "../../constants/media";
 const PHI_SVG_MEDIA_MIN_DISPLAY_DIMENSION = 48;
-export function normalizePhiImagePreviewAsset(asset) {
+function normalizePhiImagePreviewAsset(asset) {
     return {
         ...asset,
         kind: resolvePhiMediaKindFromContentType(asset.contentType),

package/components/media/phi-media-kind-icon.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { AudioTwoTone, FileImageTwoTone, FilePdfTwoTone, FileTextTwoTone, FileUnknownTwoTone, FileZipTwoTone, HddTwoTone, HighlightTwoTone, VideoCameraTwoTone, } from "@ant-design/icons";
 import { PhiMediaKind } from "../../constants/media";
+import { PhiIcon } from "../shell/phi-icon";
 const PHI_COLOR_TEXT_SECONDARY = "var(--ant-color-text-secondary)";
 const PHI_COLOR_PRIMARY = "var(--ant-color-primary)";
 export function PhiMediaKindIcon({ kind, size = 32, style, className }) {
@@ -12,23 +12,23 @@ export function PhiMediaKindIcon({ kind, size = 32, style, className }) {
     };
     switch (kind) {
         case PhiMediaKind.Image:
-            return _jsx(FileImageTwoTone, { className: className, style: iconStyle, twoToneColor: PHI_COLOR_PRIMARY });
+            return _jsx(PhiIcon, { name: "file-image-two-tone", size: "inherit", className: className, style: iconStyle, twoToneColor: PHI_COLOR_PRIMARY });
         case PhiMediaKind.Video:
-            return _jsx(VideoCameraTwoTone, { className: className, style: iconStyle, twoToneColor: PHI_COLOR_PRIMARY });
+            return _jsx(PhiIcon, { name: "video-camera-two-tone", size: "inherit", className: className, style: iconStyle, twoToneColor: PHI_COLOR_PRIMARY });
         case PhiMediaKind.Audio:
-            return _jsx(AudioTwoTone, { className: className, style: iconStyle, twoToneColor: PHI_COLOR_PRIMARY });
+            return _jsx(PhiIcon, { name: "audio-two-tone", size: "inherit", className: className, style: iconStyle, twoToneColor: PHI_COLOR_PRIMARY });
         case PhiMediaKind.Pdf:
-            return _jsx(FilePdfTwoTone, { className: className, style: iconStyle, twoToneColor: PHI_COLOR_PRIMARY });
+            return _jsx(PhiIcon, { name: "file-pdf-two-tone", size: "inherit", className: className, style: iconStyle, twoToneColor: PHI_COLOR_PRIMARY });
         case PhiMediaKind.Markdown:
         case PhiMediaKind.Document:
-            return _jsx(FileTextTwoTone, { className: className, style: iconStyle, twoToneColor: PHI_COLOR_PRIMARY });
+            return _jsx(PhiIcon, { name: "file-text-two-tone", size: "inherit", className: className, style: iconStyle, twoToneColor: PHI_COLOR_PRIMARY });
         case PhiMediaKind.Archive:
-            return _jsx(FileZipTwoTone, { className: className, style: iconStyle, twoToneColor: PHI_COLOR_PRIMARY });
+            return _jsx(PhiIcon, { name: "file-zip-two-tone", size: "inherit", className: className, style: iconStyle, twoToneColor: PHI_COLOR_PRIMARY });
         case PhiMediaKind.Font:
-            return _jsx(HighlightTwoTone, { className: className, style: iconStyle, twoToneColor: PHI_COLOR_PRIMARY });
+            return _jsx(PhiIcon, { name: "highlight-two-tone", size: "inherit", className: className, style: iconStyle, twoToneColor: PHI_COLOR_PRIMARY });
         case PhiMediaKind.Binary:
-            return _jsx(HddTwoTone, { className: className, style: iconStyle, twoToneColor: PHI_COLOR_PRIMARY });
+            return _jsx(PhiIcon, { name: "hdd-two-tone", size: "inherit", className: className, style: iconStyle, twoToneColor: PHI_COLOR_PRIMARY });
         default:
-            return _jsx(FileUnknownTwoTone, { className: className, style: iconStyle, twoToneColor: PHI_COLOR_PRIMARY });
+            return _jsx(PhiIcon, { name: "file-unknown-two-tone", size: "inherit", className: className, style: iconStyle, twoToneColor: PHI_COLOR_PRIMARY });
     }
 }

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

@@ -64,8 +64,8 @@ export function usePhiMediaPickerBinding({ config, labels, searchLabels, value:
     const flagsSignals = usePhiControlSignalController({ key: PHI_ASSET_SIGNAL_CHANNELS.presentationFlags, signalRoutes: config?.signalRoutes, valueType: "number[]", typeKey: "media-picker-presentationFlags", clearValue: [], coerceValue: (next) => Array.isArray(next) && next.every((entry) => typeof entry === "number") ? next : null });
     const paginationSignals = usePhiControlSignalController({ key: PHI_ASSET_SIGNAL_CHANNELS.pagination, signalRoutes: config?.signalRoutes, valueType: "json", typeKey: "media-picker-pagination", onSetValue: (next) => { if (typeof next.page === "number" && next.page > 0)
             setPage(next.page); if (typeof next.pageSize === "number" && next.pageSize > 0)
-            setPageSize(next.pageSize); }, coerceValue: (next) => next && typeof next === "object" && !Array.isArray(next) ? next : null });
-    const selectionSignals = usePhiControlSignalController({ key: "assetSelection", signalRoutes: config?.signalRoutes, valueType: "json", typeKey: "media-picker-selection", coerceValue: (next) => next && typeof next === "object" && !Array.isArray(next) ? next : null });
+            setPageSize(next.pageSize); }, coerceValue: (next) => isPhiRecord(next) ? next : null });
+    const selectionSignals = usePhiControlSignalController({ key: "assetSelection", signalRoutes: config?.signalRoutes, valueType: "json", typeKey: "media-picker-selection", coerceValue: (next) => isPhiRecord(next) ? next : null });
     useEffect(() => {
         if (!isOpen)
             return;

package/components/media/phi-media-restricted-icon.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { StopOutlined } from "@ant-design/icons";
+import { PhiIcon } from "../shell/phi-icon";
 const PHI_COLOR_ERROR = "var(--ant-color-error)";
 export function PhiMediaRestrictedIcon({ size = 32, style, className, title = "not allowed", }) {
     const iconStyle = {
@@ -8,5 +8,5 @@ export function PhiMediaRestrictedIcon({ size = 32, style, className, title = "n
         color: PHI_COLOR_ERROR,
         ...style,
     };
-    return _jsx(StopOutlined, { className: className, style: iconStyle, title: title });
+    return _jsx(PhiIcon, { name: "stop", size: "inherit", className: className, style: iconStyle, title: title });
 }

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

@@ -50,7 +50,7 @@ export declare function readPhiMediaUploadRejection(file: File, acceptance: PhiM
  * rather than leaking a server message into an interface.
  */
 export declare function readPhiMediaUploadErrorMessage(error: unknown, labels: PhiMediaUploadLabels): string;
-export type PhiMediaUploadItem = {
+type PhiMediaUploadItem = {
     localId: string;
     file: File;
     progress: number;
@@ -64,6 +64,15 @@ export type PhiMediaUploadItem = {
  * What it deliberately does not own is what happens afterwards -- appending a tile, binding an avatar,
  * replacing a preview. That is the only part that differs between the surfaces, so it stays with them
  * and arrives through `onUploaded`.
+ *
+ * An upload belongs to the surface that started it. When that surface goes away -- an Overlay closed, a
+ * form unmounted -- every upload still running is stopped and reported `cancelled`, so no Asset is
+ * finalized that nobody will enter anywhere. `cancel()` does the same while the surface stays. A stopped
+ * upload leaves the list and calls neither `onUploaded` nor `onRejected`: nobody is waiting for it.
+ *
+ * `uploading` is true while any file is still on its way. A surface whose value is only complete once the
+ * upload settled -- a form field that receives the Asset id in `onUploaded` -- reads it to hold back
+ * whatever would act on the incomplete value.
  */
 export declare function usePhiMediaUpload(input: {
     labels: PhiMediaUploadLabels;
@@ -84,8 +93,11 @@ export declare function usePhiMediaUpload(input: {
 }): {
     accept: string;
     items: readonly PhiMediaUploadItem[];
+    uploading: boolean;
     upload: (file: File) => Promise<{
         id: number;
     } | null>;
+    cancel: () => void;
     reset: () => void;
 };
+export {};