@btst/stack 3.0.0-rc.2 → 3.0.0-rc.3

package/src/plugins/media/client/components/pages/library-page.internal.tsx

@@ -5,17 +5,21 @@ import { Button } from "@workspace/ui/components/button";
 import { Upload, Loader2 } from "lucide-react";
 import { cn } from "@workspace/ui/lib/utils";
 import {
-	CanAccess,
-	useCan,
 	useNotify,
 	usePluginOverrides,
+	useStack,
 	useTranslate,
 } from "@btst/stack/context";
-import { useListState, type ListStateSchema } from "@btst/stack/client";
-import type { MediaPluginOverrides } from "../../overrides";
+import { useListState, type ListStateSchema } from "@btst/stack/client/hooks";
+import type {
+	MediaPluginOverrides,
+	MediaProviderConfig,
+} from "../../overrides";
+import { MEDIA_PLUGIN_ID } from "../../constants";
 import { useRouteLifecycle } from "@workspace/ui/hooks/use-route-lifecycle";
 import { BrowseTab } from "../media-picker/browse-tab";
 import { FolderTree } from "../media-picker/folder-tree";
+import { MediaUploadPermissionCheck } from "../upload-permission-check";
 
 export function LibraryPage() {
 	const t = useTranslate();
@@ -23,7 +27,12 @@ export function LibraryPage() {
 	const overrides = usePluginOverrides<
 		MediaPluginOverrides,
 		Partial<MediaPluginOverrides>
-	>("media", {});
+	>(MEDIA_PLUGIN_ID, {});
+	const { plugins } = useStack();
+	const providerConfig = plugins?.[MEDIA_PLUGIN_ID]?.config as
+		| MediaProviderConfig
+		| undefined;
+	const uploadMode = providerConfig?.uploadMode ?? "direct";
 	useRouteLifecycle({
 		routeName: "library",
 		context: {
@@ -65,14 +74,8 @@ export function LibraryPage() {
 	const fileInputRef = useRef<HTMLInputElement>(null);
 	const { mutateAsync: uploadAsset, isPending: isUploading } = useUploadAsset();
 	const { mutateAsync: deleteAsset } = useDeleteAsset();
-	const { can: canCreateAsset } = useCan({
-		resource: "media:asset",
-		action: "create",
-	});
-
 	const handleUpload = useCallback(
 		async (files: FileList | File[]) => {
-			if (!canCreateAsset) return;
 			const arr = Array.from(files);
 			for (const file of arr) {
 				try {
@@ -91,7 +94,7 @@ export function LibraryPage() {
 				}
 			}
 		},
-		[canCreateAsset, notify, selectedFolder, t, uploadAsset],
+		[notify, selectedFolder, t, uploadAsset],
 	);
 
 	const handleDelete = async (id: string) => {
@@ -109,81 +112,99 @@ export function LibraryPage() {
 	};
 
 	return (
-		<div className="flex h-[calc(100dvh-4rem)] flex-col overflow-hidden md:flex-row">
-			<div className="max-h-48 shrink-0 overflow-hidden border-b bg-muted/20 md:h-full md:max-h-none md:w-52 md:border-b-0 md:border-r">
-				<FolderTree selectedId={selectedFolder} onSelect={setSelectedFolder} />
-			</div>
+		<MediaUploadPermissionCheck
+			mode={uploadMode}
+			folderId={selectedFolder ?? undefined}
+		>
+			{({ can: canUpload, isPending, error }) => {
+				if (error) throw error;
+				const uploadAllowed = canUpload && !isPending;
+				return (
+					<div className="flex h-[calc(100dvh-4rem)] flex-col overflow-hidden md:flex-row">
+						<div className="max-h-48 shrink-0 overflow-hidden border-b bg-muted/20 md:h-full md:max-h-none md:w-52 md:border-b-0 md:border-r">
+							<FolderTree
+								selectedId={selectedFolder}
+								onSelect={setSelectedFolder}
+							/>
+						</div>
 
-			<div
-				className={cn(
-					"relative flex flex-1 flex-col overflow-hidden border-t md:border-t-0",
-					dragging && "ring-2 ring-inset ring-ring",
-				)}
-				onDragOver={(e) => {
-					if (!canCreateAsset) return;
-					e.preventDefault();
-					setDragging(true);
-				}}
-				onDragLeave={() => setDragging(false)}
-				onDrop={(e) => {
-					if (!canCreateAsset) return;
-					e.preventDefault();
-					setDragging(false);
-					void handleUpload(e.dataTransfer.files);
-				}}
-			>
-				{/* Toolbar */}
-				<div className="flex flex-col gap-3 border-b px-4 py-3 sm:flex-row sm:items-center sm:justify-end">
-					<CanAccess resource="media:asset" action="create">
-						<Button
-							size="sm"
-							onClick={() => fileInputRef.current?.click()}
-							disabled={isUploading}
-							className="w-full sm:w-auto"
+						<div
+							className={cn(
+								"relative flex flex-1 flex-col overflow-hidden border-t md:border-t-0",
+								dragging && "ring-2 ring-inset ring-ring",
+							)}
+							onDragOver={(e) => {
+								if (!uploadAllowed) return;
+								e.preventDefault();
+								setDragging(true);
+							}}
+							onDragLeave={() => setDragging(false)}
+							onDrop={(e) => {
+								if (!uploadAllowed) return;
+								e.preventDefault();
+								setDragging(false);
+								void handleUpload(e.dataTransfer.files);
+							}}
 						>
-							{isUploading ? (
-								<Loader2 className="mr-2 size-3.5 animate-spin" />
-							) : (
-								<Upload className="mr-2 size-3.5" />
+							{/* Toolbar */}
+							<div className="flex flex-col gap-3 border-b px-4 py-3 sm:flex-row sm:items-center sm:justify-end">
+								{uploadAllowed ? (
+									<>
+										<Button
+											size="sm"
+											onClick={() => fileInputRef.current?.click()}
+											disabled={isUploading}
+											className="w-full sm:w-auto"
+										>
+											{isUploading ? (
+												<Loader2 className="mr-2 size-3.5 animate-spin" />
+											) : (
+												<Upload className="mr-2 size-3.5" />
+											)}
+											{t("media.actions.upload", "Upload")}
+										</Button>
+										<input
+											ref={fileInputRef}
+											type="file"
+											multiple
+											className="hidden"
+											onChange={(e) =>
+												e.target.files && handleUpload(e.target.files)
+											}
+										/>
+									</>
+								) : null}
+							</div>
+
+							{/* Drop overlay */}
+							{dragging && uploadAllowed && (
+								<div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-background/80">
+									<div className="rounded-lg border-2 border-dashed border-ring p-8 text-center">
+										<Upload className="mx-auto mb-2 size-10 text-ring" />
+										<p className="font-medium">
+											{t("media.upload.dropFiles", "Drop files to upload")}
+										</p>
+									</div>
+								</div>
 							)}
-							{t("media.actions.upload", "Upload")}
-						</Button>
-						<input
-							ref={fileInputRef}
-							type="file"
-							multiple
-							className="hidden"
-							onChange={(e) => e.target.files && handleUpload(e.target.files)}
-						/>
-					</CanAccess>
-				</div>
 
-				{/* Drop overlay */}
-				{dragging && canCreateAsset && (
-					<div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-background/80">
-						<div className="rounded-lg border-2 border-dashed border-ring p-8 text-center">
-							<Upload className="mx-auto mb-2 size-10 text-ring" />
-							<p className="font-medium">
-								{t("media.upload.dropFiles", "Drop files to upload")}
-							</p>
+							<div className="flex-1 min-h-0 p-3 sm:p-4">
+								<BrowseTab
+									folderId={selectedFolder}
+									search={searchInput}
+									searchQuery={search}
+									onSearchChange={setSearchInput}
+									onDelete={handleDelete}
+									emptyMessage={t(
+										"media.assets.emptyLibrary",
+										"No files yet. Drag & drop or click Upload.",
+									)}
+								/>
+							</div>
 						</div>
 					</div>
-				)}
-
-				<div className="flex-1 min-h-0 p-3 sm:p-4">
-					<BrowseTab
-						folderId={selectedFolder}
-						search={searchInput}
-						searchQuery={search}
-						onSearchChange={setSearchInput}
-						onDelete={handleDelete}
-						emptyMessage={t(
-							"media.assets.emptyLibrary",
-							"No files yet. Drag & drop or click Upload.",
-						)}
-					/>
-				</div>
-			</div>
-		</div>
+				);
+			}}
+		</MediaUploadPermissionCheck>
 	);
 }

package/src/plugins/media/client/components/pages/library-page.tsx

@@ -4,7 +4,9 @@ import type { FallbackProps } from "react-error-boundary";
 import { usePluginOverrides } from "@btst/stack/context";
 import { ComposedRoute } from "@btst/stack/client/components";
 import type { MediaPluginOverrides } from "../../overrides";
+import { MEDIA_PLUGIN_ID } from "../../constants";
 import { Loader2 } from "lucide-react";
+import { mediaPermissions } from "../../../permissions";
 
 const LibraryPage = lazy(() =>
 	import("./library-page.internal").then((m) => ({ default: m.LibraryPage })),
@@ -28,11 +30,11 @@ function LibraryError({ error }: FallbackProps) {
 }
 
 export function LibraryPageComponent() {
-	usePluginOverrides<MediaPluginOverrides>("media");
+	usePluginOverrides<MediaPluginOverrides>(MEDIA_PLUGIN_ID);
 	return (
 		<ComposedRoute
 			path="/media"
-			permission={{ resource: "media:asset", action: "read" }}
+			permission={mediaPermissions.library.read()}
 			PageComponent={LibraryPage}
 			ErrorComponent={LibraryError}
 			LoadingComponent={LibraryLoading}

package/src/plugins/media/client/components/upload-permission-check.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import {
+	PermissionCheck,
+	type PermissionCheckState,
+} from "@btst/stack/context";
+import type { ReactNode } from "react";
+import { mediaPermissions } from "../../permissions";
+import type { MediaUploadMode } from "../overrides";
+
+function UploadPhaseCheck({
+	phases,
+	folderId,
+	children,
+}: {
+	phases: readonly ("initialize" | "direct" | "finalize")[];
+	folderId?: string;
+	children: (state: PermissionCheckState) => ReactNode;
+}) {
+	const [phase, ...rest] = phases;
+	if (!phase) return children({ can: true, isPending: false });
+	return (
+		<PermissionCheck
+			permission={mediaPermissions.asset.upload({
+				phase,
+				...(folderId ? { folderId } : {}),
+			})}
+		>
+			{(state) => {
+				if (state.error || state.isPending || !state.can)
+					return children(state);
+				return (
+					<UploadPhaseCheck phases={rest} folderId={folderId}>
+						{children}
+					</UploadPhaseCheck>
+				);
+			}}
+		</PermissionCheck>
+	);
+}
+
+/** Gate a browser upload flow through every server phase it will invoke. */
+export function MediaUploadPermissionCheck({
+	mode,
+	folderId,
+	children,
+}: {
+	mode: MediaUploadMode;
+	folderId?: string;
+	children: (state: PermissionCheckState) => ReactNode;
+}) {
+	return (
+		<UploadPhaseCheck
+			phases={mode === "direct" ? ["direct"] : ["initialize", "finalize"]}
+			folderId={folderId}
+		>
+			{children}
+		</UploadPhaseCheck>
+	);
+}
+
+/** Gate URL registration through the exact finalization descriptor. */
+export function MediaFinalizePermissionCheck({
+	folderId,
+	children,
+}: {
+	folderId?: string;
+	children: (state: PermissionCheckState) => ReactNode;
+}) {
+	return (
+		<UploadPhaseCheck phases={["finalize"]} folderId={folderId}>
+			{children}
+		</UploadPhaseCheck>
+	);
+}

package/src/plugins/media/client/constants.ts

@@ -0,0 +1,2 @@
+/** Stable programmatic ID used by Media registration, resources, and overrides. */
+export const MEDIA_PLUGIN_ID = "media" as const;

package/src/plugins/media/client/hooks/media-resource.ts

@@ -2,9 +2,10 @@
 
 import { createResource } from "@btst/stack/plugins/client/hooks";
 import { mediaResources } from "../../query-keys";
+import { MEDIA_PLUGIN_ID } from "../constants";
 
 /** Factory-generated hooks shared by the public Media hook wrappers. */
 export const media = createResource({
-	plugin: "media",
+	plugin: MEDIA_PLUGIN_ID,
 	resources: mediaResources,
 });