@anymux/connect 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { bitbucketService, browserFsService, dropboxService, getScopeLabel, getScopeLabels, giteaService, githubService, gitlabService, googleService, indexeddbService, s3Service, serviceRegistry, webdavService } from "./scope-labels-B4VAwoL6.js";
-import { GitHostBrowser, GitHostBrowserModel, GitRepoBrowser, GitRepoBrowserModel, showActionToast, showErrorToast, showInfoToast } from "./GitBrowser-BLgTNQyd.js";
+import { backblazeB2Service, bitbucketService, browserFsService, cloudflareR2Service, dropboxService, getScopeLabel, getScopeLabels, giteaService, githubService, gitlabService, googleService, imgurService, indexeddbService, pexelsService, s3Service, serviceRegistry, unsplashService, wasabiService, webdavService } from "./scope-labels-C7KX6ju6.js";
+import { GitHostBrowser, GitHostBrowserModel, GitRepoBrowser, GitRepoBrowserModel, showActionToast, showErrorToast, showInfoToast } from "./GitBrowser-C0L48q3x.js";
 import { ObjectStorageBrowser, ObjectStorageBrowserModel } from "./ObjectStorageBrowser-B_25Emfu.js";
 import { RepoPicker, RepoPickerModel } from "./RepoPicker-CoHMiJ-3.js";
 import { createAuthClient } from "better-auth/client";
@@ -215,6 +215,21 @@ var TokenManager = class {
 
 //#endregion
 //#region src/models/ConnectionManagerModel.ts
+/** Auth providers that use stored credentials instead of OAuth */
+const CREDENTIAL_AUTH_PROVIDERS = new Set([
+	"s3",
+	"backblaze-b2",
+	"cloudflare-r2",
+	"wasabi",
+	"webdav",
+	"gitea",
+	"icloud",
+	"unsplash",
+	"pexels",
+	"imgur",
+	"browser-fs",
+	"indexeddb"
+]);
 const STORAGE_KEY = "anymux-connect-connections";
 const USER_PROFILES_STORAGE_KEY = "anymux-connect-user-profiles";
 var ConnectionManagerModel = class {
@@ -284,7 +299,7 @@ var ConnectionManagerModel = class {
 					}
 					for (const [provider, configured] of Object.entries(config.providers)) if (configured) this.configuredProviders.add(provider);
 					for (const service of serviceRegistry.getAll()) {
-						if (service.authProvider === "s3" || service.authProvider === "webdav" || service.authProvider === "gitea" || service.authProvider === "browser-fs" || service.authProvider === "indexeddb") continue;
+						if (CREDENTIAL_AUTH_PROVIDERS.has(service.authProvider)) continue;
 						if (!this.configuredProviders.has(service.authProvider) && !this.isConnected(service.id)) this.connections.set(service.id, {
 							serviceId: service.id,
 							status: "not_configured",
@@ -474,14 +489,7 @@ var ConnectionManagerModel = class {
 			console.warn(`[AnyMux] refreshToken(${serviceId}): no service or authClient`);
 			return null;
 		}
-		if ([
-			"s3",
-			"webdav",
-			"gitea",
-			"icloud",
-			"browser-fs",
-			"indexeddb"
-		].includes(service.authProvider)) return this.tokenManager.getToken(serviceId);
+		if (CREDENTIAL_AUTH_PROVIDERS.has(service.authProvider)) return this.tokenManager.getToken(serviceId);
 		const oldToken = this.tokenManager.getToken(serviceId);
 		try {
 			const token = await this.authClient.getAccessToken(service.authProvider);
@@ -519,7 +527,7 @@ var ConnectionManagerModel = class {
 	hasCapabilityScopes(serviceId, capabilityId) {
 		const service = serviceRegistry.get(serviceId);
 		if (!service) return false;
-		if (service.authProvider === "s3" || service.authProvider === "webdav" || service.authProvider === "gitea" || service.authProvider === "browser-fs" || service.authProvider === "indexeddb") return true;
+		if (CREDENTIAL_AUTH_PROVIDERS.has(service.authProvider)) return true;
 		const requiredScopes = service.scopes[capabilityId];
 		if (!requiredScopes || requiredScopes.length === 0) return false;
 		if (!this.grantedScopes.has(service.authProvider)) return true;
@@ -693,6 +701,16 @@ var DashboardModel = class {
 
 //#endregion
 //#region src/models/CredentialFormModel.ts
+/** S3-compatible service types that share the same credential fields */
+const S3_COMPATIBLE_TYPES = [
+	"s3",
+	"backblaze-b2",
+	"cloudflare-r2",
+	"wasabi"
+];
+function isS3Compatible(type) {
+	return S3_COMPATIBLE_TYPES.includes(type);
+}
 var CredentialFormModel = class {
 	constructor() {
 		this.open = false;
@@ -710,6 +728,7 @@ var CredentialFormModel = class {
 		this.repo = "";
 		this.email = "";
 		this.appPassword = "";
+		this.apiKey = "";
 		makeAutoObservable(this);
 	}
 	openForm(serviceType, prefill) {
@@ -726,17 +745,17 @@ var CredentialFormModel = class {
 	}
 	/** Serialize current form state to JSON credential string */
 	serialize() {
+		if (isS3Compatible(this.serviceType)) {
+			const creds = {
+				accessKeyId: this.accessKeyId,
+				secretAccessKey: this.secretAccessKey,
+				region: this.region,
+				bucket: this.bucket
+			};
+			if (this.endpoint) creds.endpoint = this.endpoint;
+			return JSON.stringify(creds);
+		}
 		switch (this.serviceType) {
-			case "s3": {
-				const creds = {
-					accessKeyId: this.accessKeyId,
-					secretAccessKey: this.secretAccessKey,
-					region: this.region,
-					bucket: this.bucket
-				};
-				if (this.endpoint) creds.endpoint = this.endpoint;
-				return JSON.stringify(creds);
-			}
 			case "webdav": return JSON.stringify({
 				url: this.url,
 				username: this.username,
@@ -754,6 +773,9 @@ var CredentialFormModel = class {
 				email: this.email,
 				appPassword: this.appPassword
 			});
+			case "unsplash": return JSON.stringify({ accessKey: this.apiKey });
+			case "pexels": return JSON.stringify({ apiKey: this.apiKey });
+			case "imgur": return JSON.stringify({ clientId: this.apiKey });
 		}
 	}
 	resetFields() {
@@ -770,6 +792,7 @@ var CredentialFormModel = class {
 		this.repo = "";
 		this.email = "";
 		this.appPassword = "";
+		this.apiKey = "";
 	}
 	applyPrefill(values) {
 		for (const [k, v] of Object.entries(values)) if (typeof v === "string" && k in this) this[k] = v;
@@ -819,7 +842,25 @@ const CredentialForm = observer(({ model, onSubmit }) => {
 	};
 	const inputClass = "w-full rounded-md border border-border px-3 py-2 text-base sm:text-sm bg-card text-foreground focus:border-ring focus:outline-none focus:ring-1 focus:ring-ring";
 	const labelClass = "block text-sm font-medium text-foreground mb-1";
-	const title = model.serviceType === "s3" ? "S3 Credentials" : model.serviceType === "webdav" ? "WebDAV Credentials" : model.serviceType === "icloud" ? "iCloud Credentials" : "Gitea Credentials";
+	const titleMap = {
+		"s3": "Amazon S3 Credentials",
+		"backblaze-b2": "Backblaze B2 Credentials",
+		"cloudflare-r2": "Cloudflare R2 Credentials",
+		"wasabi": "Wasabi Credentials",
+		"webdav": "WebDAV Credentials",
+		"icloud": "iCloud Credentials",
+		"gitea": "Gitea Credentials",
+		"unsplash": "Unsplash API Key",
+		"pexels": "Pexels API Key",
+		"imgur": "Imgur Client ID"
+	};
+	const title = titleMap[model.serviceType] || "Credentials";
+	const endpointPlaceholder = {
+		"s3": "https://s3.amazonaws.com",
+		"backblaze-b2": "https://s3.us-west-004.backblazeb2.com",
+		"cloudflare-r2": "https://<account-id>.r2.cloudflarestorage.com",
+		"wasabi": "https://s3.wasabisys.com"
+	};
 	return /* @__PURE__ */ jsx("div", {
 		className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50",
 		onClick: () => model.closeForm(),
@@ -834,7 +875,7 @@ const CredentialForm = observer(({ model, onSubmit }) => {
 				className: "flex flex-col flex-1 min-h-0",
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "flex-1 overflow-y-auto px-4 sm:px-6 space-y-3",
-					children: model.serviceType === "s3" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					children: isS3Compatible(model.serviceType) ? /* @__PURE__ */ jsxs(Fragment, { children: [
 						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
 							className: labelClass,
 							children: "Access Key ID"
@@ -875,15 +916,16 @@ const CredentialForm = observer(({ model, onSubmit }) => {
 							value: model.bucket,
 							onChange: (e) => model.setField("bucket", e.target.value)
 						})] }),
-						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("label", {
 							className: labelClass,
-							children: "Endpoint (optional)"
+							children: ["Endpoint", model.serviceType === "s3" ? " (optional)" : ""]
 						}), /* @__PURE__ */ jsx("input", {
 							type: "text",
+							required: model.serviceType !== "s3",
 							className: inputClass,
 							value: model.endpoint,
 							onChange: (e) => model.setField("endpoint", e.target.value),
-							placeholder: "https://s3.amazonaws.com"
+							placeholder: endpointPlaceholder[model.serviceType] || ""
 						})] })
 					] }) : model.serviceType === "webdav" ? /* @__PURE__ */ jsxs(Fragment, { children: [
 						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
@@ -956,7 +998,50 @@ const CredentialForm = observer(({ model, onSubmit }) => {
 								"under Sign-In and Security → App-Specific Passwords."
 							]
 						})
-					] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					] }) : model.serviceType === "unsplash" || model.serviceType === "pexels" || model.serviceType === "imgur" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+						className: labelClass,
+						children: model.serviceType === "imgur" ? "Client ID" : "API Key"
+					}), /* @__PURE__ */ jsx("input", {
+						type: "password",
+						required: true,
+						className: inputClass,
+						value: model.apiKey,
+						onChange: (e) => model.setField("apiKey", e.target.value),
+						placeholder: model.serviceType === "unsplash" ? "Unsplash Access Key" : model.serviceType === "pexels" ? "Pexels API Key" : "Imgur Client ID"
+					})] }), /* @__PURE__ */ jsx("p", {
+						className: "text-xs text-muted-foreground",
+						children: model.serviceType === "unsplash" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+							"Get a free API key at",
+							" ",
+							/* @__PURE__ */ jsx("a", {
+								href: "https://unsplash.com/developers",
+								target: "_blank",
+								rel: "noopener noreferrer",
+								className: "underline text-primary hover:text-primary/80",
+								children: "unsplash.com/developers"
+							})
+						] }) : model.serviceType === "pexels" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+							"Get a free API key at",
+							" ",
+							/* @__PURE__ */ jsx("a", {
+								href: "https://www.pexels.com/api/",
+								target: "_blank",
+								rel: "noopener noreferrer",
+								className: "underline text-primary hover:text-primary/80",
+								children: "pexels.com/api"
+							})
+						] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+							"Register an app at",
+							" ",
+							/* @__PURE__ */ jsx("a", {
+								href: "https://api.imgur.com/oauth2/addclient",
+								target: "_blank",
+								rel: "noopener noreferrer",
+								className: "underline text-primary hover:text-primary/80",
+								children: "api.imgur.com"
+							})
+						] })
+					})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
 						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
 							className: labelClass,
 							children: "URL"
@@ -1150,7 +1235,7 @@ function ConnectedMenu({ service, connectionManager, user, profile, isOAuth }) {
 const ConnectButton = observer(({ service, connectionManager }) => {
 	const [formModel] = useState(() => new CredentialFormModel());
 	const state = getServiceConnectionState(connectionManager, service.id);
-	const needsCredentialForm = service.authProvider === "s3" || service.authProvider === "webdav" || service.authProvider === "gitea" || service.authProvider === "icloud";
+	const needsCredentialForm = isS3Compatible(service.authProvider) || service.authProvider === "webdav" || service.authProvider === "gitea" || service.authProvider === "icloud" || service.authProvider === "unsplash" || service.authProvider === "pexels" || service.authProvider === "imgur";
 	const isBrowserFs = service.authProvider === "browser-fs";
 	const isIndexedDb = service.authProvider === "indexeddb";
 	const pendingReconnect = connectionManager.pendingReconnect.has(service.id);
@@ -1439,6 +1524,12 @@ const adapterRegistry = {
 		return factories.has(serviceId);
 	}
 };
+/** Safely invoke a capability factory, throwing a descriptive error for unsupported capabilities */
+function invokeCapability(adapters, capabilityId, serviceId) {
+	const factory = adapters[capabilityId];
+	if (!factory) throw new Error(`Unsupported capability "${capabilityId}" for service "${serviceId}". Supported: ${Object.keys(adapters).join(", ")}`);
+	return factory();
+}
 adapterRegistry.register("google", async (token, capabilityId) => {
 	const m = await import("@anymux/google-drive");
 	const adapters = {
@@ -1446,7 +1537,7 @@ adapterRegistry.register("google", async (token, capabilityId) => {
 		"contacts": () => new m.GoogleContactsProvider(token),
 		"calendar": () => new m.GoogleCalendarProvider(token)
 	};
-	return adapters[capabilityId]();
+	return invokeCapability(adapters, capabilityId, "google");
 });
 adapterRegistry.register("dropbox", async (token) => {
 	const { DropboxFileSystem } = await import("@anymux/dropbox");
@@ -1471,7 +1562,7 @@ adapterRegistry.register("github", async (token, capabilityId, ctx) => {
 		"git-repo": () => new m.GitHubGitRepo(config),
 		"git-host": () => new m.GitHubGitHost(config)
 	};
-	return adapters[capabilityId]();
+	return invokeCapability(adapters, capabilityId, "github");
 });
 adapterRegistry.register("gitlab", async (token, capabilityId, ctx) => {
 	const repo = ctx.selectedRepo;
@@ -1487,7 +1578,7 @@ adapterRegistry.register("gitlab", async (token, capabilityId, ctx) => {
 		"git-repo": () => new m.GitLabGitRepo(config),
 		"git-host": () => new m.GitLabGitHost(config)
 	};
-	return adapters[capabilityId]();
+	return invokeCapability(adapters, capabilityId, "gitlab");
 });
 adapterRegistry.register("bitbucket", async (token, capabilityId, ctx) => {
 	const repo = ctx.selectedRepo;
@@ -1504,7 +1595,7 @@ adapterRegistry.register("bitbucket", async (token, capabilityId, ctx) => {
 		"git-repo": () => new m.BitbucketGitRepo(config),
 		"git-host": () => new m.BitbucketGitHost(config)
 	};
-	return adapters[capabilityId]();
+	return invokeCapability(adapters, capabilityId, "bitbucket");
 });
 adapterRegistry.register("gitea", async (token, capabilityId, ctx) => {
 	const creds = JSON.parse(token);
@@ -1525,7 +1616,7 @@ adapterRegistry.register("gitea", async (token, capabilityId, ctx) => {
 		"git-repo": () => new m.GiteaGitRepo(config),
 		"git-host": () => new m.GiteaGitHost(config)
 	};
-	return adapters[capabilityId]();
+	return invokeCapability(adapters, capabilityId, "gitea");
 });
 adapterRegistry.register("webdav", async (token) => {
 	const creds = JSON.parse(token);
@@ -1538,7 +1629,7 @@ adapterRegistry.register("webdav", async (token) => {
 		proxyUrl
 	});
 });
-adapterRegistry.register("s3", async (token) => {
+async function createS3Adapter(token) {
 	const creds = JSON.parse(token);
 	const proxyUrl = typeof window !== "undefined" ? window.location.origin : void 0;
 	if (proxyUrl) {
@@ -1570,6 +1661,25 @@ adapterRegistry.register("s3", async (token) => {
 		storage,
 		bucket: creds.bucket || "anymux-test"
 	};
+}
+adapterRegistry.register("s3", createS3Adapter);
+adapterRegistry.register("backblaze-b2", createS3Adapter);
+adapterRegistry.register("cloudflare-r2", createS3Adapter);
+adapterRegistry.register("wasabi", createS3Adapter);
+adapterRegistry.register("unsplash", async (token) => {
+	const creds = JSON.parse(token);
+	const { UnsplashMediaProvider } = await import("@anymux/unsplash");
+	return new UnsplashMediaProvider({ accessKey: creds.accessKey });
+});
+adapterRegistry.register("pexels", async (token) => {
+	const creds = JSON.parse(token);
+	const { PexelsMediaProvider } = await import("@anymux/pexels");
+	return new PexelsMediaProvider({ apiKey: creds.apiKey });
+});
+adapterRegistry.register("imgur", async (token) => {
+	const creds = JSON.parse(token);
+	const { ImgurMediaProvider } = await import("@anymux/imgur");
+	return new ImgurMediaProvider({ clientId: creds.clientId });
 });
 adapterRegistry.register("browser-fs", async () => {
 	const { BrowserFileSystemFactory } = await import("@anymux/browser-fs");
@@ -1655,8 +1765,8 @@ function CapabilityError({ error, onRetry, onReconnect, onGoBack }) {
 
 //#endregion
 //#region src/components/CapabilityPanel.tsx
-const FileBrowser = React.lazy(() => import("@anymux/fs-ui").then((m) => ({ default: m.FileBrowser })));
-const LazyMediaBrowser = React.lazy(() => import("@anymux/object-ui").then((m) => ({ default: ({ provider }) => {
+const FileBrowser = React.lazy(() => import("@anymux/ui-kit/file-browser").then((m) => ({ default: m.FileBrowser })));
+const LazyMediaBrowser = React.lazy(() => import("@anymux/ui-kit/media").then((m) => ({ default: ({ provider }) => {
 	const model = new m.MediaBrowserModel(provider);
 	return React.createElement(m.MediaBrowser, {
 		model,
@@ -1664,14 +1774,14 @@ const LazyMediaBrowser = React.lazy(() => import("@anymux/object-ui").then((m) =
 		className: "h-full"
 	});
 } })));
-const LazyContactBrowser = React.lazy(() => import("@anymux/object-ui").then((m) => ({ default: ({ provider }) => {
+const LazyContactBrowser = React.lazy(() => import("@anymux/ui-kit/contacts").then((m) => ({ default: ({ provider }) => {
 	const model = new m.ContactListModel(provider);
 	return React.createElement(m.ContactBrowser, {
 		model,
 		className: "h-full"
 	});
 } })));
-const LazyCalendarBrowser = React.lazy(() => import("@anymux/object-ui").then((m) => ({ default: ({ provider }) => {
+const LazyCalendarBrowser = React.lazy(() => import("@anymux/ui-kit/calendar").then((m) => ({ default: ({ provider }) => {
 	const model = new m.CalendarModel(provider);
 	return React.createElement(m.CalendarBrowser, {
 		model,
@@ -1680,8 +1790,8 @@ const LazyCalendarBrowser = React.lazy(() => import("@anymux/object-ui").then((m
 } })));
 const RepoPicker$1 = React.lazy(() => import("./RepoPicker-BprFGOn7.js").then((m) => ({ default: m.RepoPicker })));
 const ObjectStorageBrowserLazy = React.lazy(() => import("./ObjectStorageBrowser-B2YkUxMl.js").then((m) => ({ default: m.ObjectStorageBrowser })));
-const GitRepoBrowserLazy = React.lazy(() => import("./GitBrowser-CIyWiuX-.js").then((m) => ({ default: m.GitRepoBrowser })));
-const GitHostBrowserLazy = React.lazy(() => import("./GitBrowser-CIyWiuX-.js").then((m) => ({ default: m.GitHostBrowser })));
+const GitRepoBrowserLazy = React.lazy(() => import("./GitBrowser-BFyS9qJb.js").then((m) => ({ default: m.GitRepoBrowser })));
+const GitHostBrowserLazy = React.lazy(() => import("./GitBrowser-BFyS9qJb.js").then((m) => ({ default: m.GitHostBrowser })));
 const CAPABILITY_LABELS = {
 	"file-system": "File System",
 	"object-storage": "Object Storage",
@@ -1845,14 +1955,21 @@ const GenericCapabilityContent = observer(function GenericCapabilityContent$1({
 		const service = dashboardModel.selectedService;
 		await connectionManager.disconnect(serviceId);
 		dashboardModel.closePanel();
-		const isOAuth = service && ![
+		const CRED_PROVIDERS = new Set([
 			"s3",
+			"backblaze-b2",
+			"cloudflare-r2",
+			"wasabi",
 			"webdav",
 			"gitea",
 			"icloud",
+			"unsplash",
+			"pexels",
+			"imgur",
 			"browser-fs",
 			"indexeddb"
-		].includes(service.authProvider);
+		]);
+		const isOAuth = service && !CRED_PROVIDERS.has(service.authProvider);
 		if (isOAuth) await connectionManager.connect(serviceId);
 		else connectionManager.requestReconnect(serviceId);
 	};
@@ -2535,5 +2652,5 @@ const ServiceDashboardDemo = observer(({ authBaseURL, initialService, initialCap
 });
 
 //#endregion
-export { ActionHistoryPanel, ActionNotificationModel, CapabilityCell, CapabilityPanel, CapabilityPill, ConnectButton, ConnectedMenu, ConnectionManagerModel, ConnectionStatusIndicator, CredentialForm, CredentialFormModel, DashboardModel, FullScreenBrowser, GitHostBrowser, GitHostBrowserModel, GitHubRepoPicker, GitRepoBrowser, GitRepoBrowserModel, ObjectStorageBrowser, ObjectStorageBrowserModel, RepoPicker, RepoPickerModel, ServiceCard, ServiceDashboard, ServiceDashboardDemo, ServiceIcon, ServiceRow, TokenManager, bitbucketService, browserFsService, createConnectAuthClient, dropboxService, getScopeLabel, getScopeLabels, giteaService, githubService, gitlabService, googleService, icloudService, indexeddbService, microsoftService, s3Service, serviceRegistry, showActionToast, showErrorToast, showInfoToast, webdavService };
+export { ActionHistoryPanel, ActionNotificationModel, CapabilityCell, CapabilityPanel, CapabilityPill, ConnectButton, ConnectedMenu, ConnectionManagerModel, ConnectionStatusIndicator, CredentialForm, CredentialFormModel, DashboardModel, FullScreenBrowser, GitHostBrowser, GitHostBrowserModel, GitHubRepoPicker, GitRepoBrowser, GitRepoBrowserModel, ObjectStorageBrowser, ObjectStorageBrowserModel, RepoPicker, RepoPickerModel, S3_COMPATIBLE_TYPES, ServiceCard, ServiceDashboard, ServiceDashboardDemo, ServiceIcon, ServiceRow, TokenManager, backblazeB2Service, bitbucketService, browserFsService, cloudflareR2Service, createConnectAuthClient, dropboxService, getScopeLabel, getScopeLabels, giteaService, githubService, gitlabService, googleService, icloudService, imgurService, indexeddbService, isS3Compatible, microsoftService, pexelsService, s3Service, serviceRegistry, showActionToast, showErrorToast, showInfoToast, unsplashService, wasabiService, webdavService };
 //# sourceMappingURL=index.js.map