@contractspec/bundle.library 3.9.10 → 3.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contractspec/bundle.library",
-  "version": "3.9.10",
+  "version": "3.10.0",
   "type": "module",
   "scripts": {
     "clean": "rm -rf dist",
@@ -1254,6 +1254,42 @@
       "node": "./dist/node/components/integrations/index.js",
       "default": "./dist/components/integrations/index.js"
     },
+    "./components/integrations/atoms/IntegrationCredentialFieldList": {
+      "types": "./dist/components/integrations/atoms/IntegrationCredentialFieldList.d.ts",
+      "bun": "./dist/components/integrations/atoms/IntegrationCredentialFieldList.js",
+      "node": "./dist/node/components/integrations/atoms/IntegrationCredentialFieldList.js",
+      "default": "./dist/components/integrations/atoms/IntegrationCredentialFieldList.js"
+    },
+    "./components/integrations/atoms/IntegrationCredentialModeTabs": {
+      "types": "./dist/components/integrations/atoms/IntegrationCredentialModeTabs.d.ts",
+      "bun": "./dist/components/integrations/atoms/IntegrationCredentialModeTabs.js",
+      "node": "./dist/node/components/integrations/atoms/IntegrationCredentialModeTabs.js",
+      "default": "./dist/components/integrations/atoms/IntegrationCredentialModeTabs.js"
+    },
+    "./components/integrations/atoms/IntegrationEnvAliasPreview": {
+      "types": "./dist/components/integrations/atoms/IntegrationEnvAliasPreview.d.ts",
+      "bun": "./dist/components/integrations/atoms/IntegrationEnvAliasPreview.js",
+      "node": "./dist/node/components/integrations/atoms/IntegrationEnvAliasPreview.js",
+      "default": "./dist/components/integrations/atoms/IntegrationEnvAliasPreview.js"
+    },
+    "./components/integrations/blocks/IntegrationCredentialSetupBlock": {
+      "types": "./dist/components/integrations/blocks/IntegrationCredentialSetupBlock.d.ts",
+      "bun": "./dist/components/integrations/blocks/IntegrationCredentialSetupBlock.js",
+      "node": "./dist/node/components/integrations/blocks/IntegrationCredentialSetupBlock.js",
+      "default": "./dist/components/integrations/blocks/IntegrationCredentialSetupBlock.js"
+    },
+    "./components/integrations/helpers/credentialSetupAliases": {
+      "types": "./dist/components/integrations/helpers/credentialSetupAliases.d.ts",
+      "bun": "./dist/components/integrations/helpers/credentialSetupAliases.js",
+      "node": "./dist/node/components/integrations/helpers/credentialSetupAliases.js",
+      "default": "./dist/components/integrations/helpers/credentialSetupAliases.js"
+    },
+    "./components/integrations/helpers/credentialSetupModel": {
+      "types": "./dist/components/integrations/helpers/credentialSetupModel.d.ts",
+      "bun": "./dist/components/integrations/helpers/credentialSetupModel.js",
+      "node": "./dist/node/components/integrations/helpers/credentialSetupModel.js",
+      "default": "./dist/components/integrations/helpers/credentialSetupModel.js"
+    },
     "./components/integrations/molecules/IntegrationCard": {
       "types": "./dist/components/integrations/molecules/IntegrationCard.d.ts",
       "bun": "./dist/components/integrations/molecules/IntegrationCard.js",
@@ -1272,6 +1308,12 @@
       "node": "./dist/node/components/integrations/organisms/IntegrationSettings.js",
       "default": "./dist/components/integrations/organisms/IntegrationSettings.js"
     },
+    "./components/integrations/organisms/IntegrationSettingsSecretReference": {
+      "types": "./dist/components/integrations/organisms/IntegrationSettingsSecretReference.d.ts",
+      "bun": "./dist/components/integrations/organisms/IntegrationSettingsSecretReference.js",
+      "node": "./dist/node/components/integrations/organisms/IntegrationSettingsSecretReference.js",
+      "default": "./dist/components/integrations/organisms/IntegrationSettingsSecretReference.js"
+    },
     "./components/integrations/organisms/KnowledgeSourceList": {
       "types": "./dist/components/integrations/organisms/KnowledgeSourceList.d.ts",
       "bun": "./dist/components/integrations/organisms/KnowledgeSourceList.js",
@@ -1986,27 +2028,27 @@
     "react": "19.2.0"
   },
   "dependencies": {
-    "@contractspec/bundle.workspace": "4.6.0",
+    "@contractspec/bundle.workspace": "4.7.0",
     "@apollo/client": "^4.1.7",
     "@modelcontextprotocol/sdk": "^1.29.0",
-    "@contractspec/example.data-grid-showcase": "3.8.22",
-    "@contractspec/lib.ai-providers": "3.7.20",
-    "@contractspec/lib.contracts-spec": "6.2.0",
-    "@contractspec/lib.contracts-library": "3.7.27",
-    "@contractspec/lib.content-gen": "3.7.27",
-    "@contractspec/lib.contracts-runtime-server-mcp": "3.8.7",
-    "@contractspec/lib.design-system": "4.4.1",
-    "@contractspec/lib.surface-runtime": "0.5.27",
-    "@contractspec/lib.provider-ranking": "0.7.20",
-    "@contractspec/lib.example-shared-ui": "7.0.7",
-    "@contractspec/lib.knowledge": "3.8.3",
-    "@contractspec/lib.logger": "3.7.20",
-    "@contractspec/lib.runtime-sandbox": "3.0.6",
+    "@contractspec/example.data-grid-showcase": "3.8.23",
+    "@contractspec/lib.ai-providers": "3.7.21",
+    "@contractspec/lib.contracts-spec": "6.3.0",
+    "@contractspec/lib.contracts-library": "3.7.28",
+    "@contractspec/lib.content-gen": "3.7.28",
+    "@contractspec/lib.contracts-runtime-server-mcp": "3.8.8",
+    "@contractspec/lib.design-system": "4.4.2",
+    "@contractspec/lib.surface-runtime": "0.5.28",
+    "@contractspec/lib.provider-ranking": "0.7.21",
+    "@contractspec/lib.example-shared-ui": "7.0.8",
+    "@contractspec/lib.knowledge": "3.8.4",
+    "@contractspec/lib.logger": "3.7.21",
+    "@contractspec/lib.runtime-sandbox": "3.0.7",
     "@contractspec/lib.schema": "3.7.14",
-    "@contractspec/lib.ui-kit-web": "3.13.2",
-    "@contractspec/lib.ui-link": "3.7.22",
-    "@contractspec/module.context-storage": "0.7.26",
-    "@contractspec/module.examples": "4.0.7",
+    "@contractspec/lib.ui-kit-web": "3.13.3",
+    "@contractspec/lib.ui-link": "3.7.23",
+    "@contractspec/module.context-storage": "0.7.27",
+    "@contractspec/module.examples": "4.0.8",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -2022,10 +2064,10 @@
     "posthog-react-native": "^4.43.10",
     "react-hook-form": "^7.74.0",
     "zod": "^4.3.5",
-    "@contractspec/lib.contracts-integrations": "3.8.19",
-    "@contractspec/lib.contracts-runtime-server-rest": "3.9.0",
-    "@contractspec/lib.contracts-runtime-server-graphql": "3.8.6",
-    "@contractspec/lib.contracts-runtime-client-react": "3.14.0"
+    "@contractspec/lib.contracts-integrations": "3.9.0",
+    "@contractspec/lib.contracts-runtime-server-rest": "3.9.1",
+    "@contractspec/lib.contracts-runtime-server-graphql": "3.8.7",
+    "@contractspec/lib.contracts-runtime-client-react": "3.14.1"
   },
   "devDependencies": {
     "@types/react": "~19.2.14",
@@ -3279,6 +3321,42 @@
         "node": "./dist/node/components/integrations/index.js",
         "default": "./dist/components/integrations/index.js"
       },
+      "./components/integrations/atoms/IntegrationCredentialFieldList": {
+        "types": "./dist/components/integrations/atoms/IntegrationCredentialFieldList.d.ts",
+        "bun": "./dist/components/integrations/atoms/IntegrationCredentialFieldList.js",
+        "node": "./dist/node/components/integrations/atoms/IntegrationCredentialFieldList.js",
+        "default": "./dist/components/integrations/atoms/IntegrationCredentialFieldList.js"
+      },
+      "./components/integrations/atoms/IntegrationCredentialModeTabs": {
+        "types": "./dist/components/integrations/atoms/IntegrationCredentialModeTabs.d.ts",
+        "bun": "./dist/components/integrations/atoms/IntegrationCredentialModeTabs.js",
+        "node": "./dist/node/components/integrations/atoms/IntegrationCredentialModeTabs.js",
+        "default": "./dist/components/integrations/atoms/IntegrationCredentialModeTabs.js"
+      },
+      "./components/integrations/atoms/IntegrationEnvAliasPreview": {
+        "types": "./dist/components/integrations/atoms/IntegrationEnvAliasPreview.d.ts",
+        "bun": "./dist/components/integrations/atoms/IntegrationEnvAliasPreview.js",
+        "node": "./dist/node/components/integrations/atoms/IntegrationEnvAliasPreview.js",
+        "default": "./dist/components/integrations/atoms/IntegrationEnvAliasPreview.js"
+      },
+      "./components/integrations/blocks/IntegrationCredentialSetupBlock": {
+        "types": "./dist/components/integrations/blocks/IntegrationCredentialSetupBlock.d.ts",
+        "bun": "./dist/components/integrations/blocks/IntegrationCredentialSetupBlock.js",
+        "node": "./dist/node/components/integrations/blocks/IntegrationCredentialSetupBlock.js",
+        "default": "./dist/components/integrations/blocks/IntegrationCredentialSetupBlock.js"
+      },
+      "./components/integrations/helpers/credentialSetupAliases": {
+        "types": "./dist/components/integrations/helpers/credentialSetupAliases.d.ts",
+        "bun": "./dist/components/integrations/helpers/credentialSetupAliases.js",
+        "node": "./dist/node/components/integrations/helpers/credentialSetupAliases.js",
+        "default": "./dist/components/integrations/helpers/credentialSetupAliases.js"
+      },
+      "./components/integrations/helpers/credentialSetupModel": {
+        "types": "./dist/components/integrations/helpers/credentialSetupModel.d.ts",
+        "bun": "./dist/components/integrations/helpers/credentialSetupModel.js",
+        "node": "./dist/node/components/integrations/helpers/credentialSetupModel.js",
+        "default": "./dist/components/integrations/helpers/credentialSetupModel.js"
+      },
       "./components/integrations/molecules/IntegrationCard": {
         "types": "./dist/components/integrations/molecules/IntegrationCard.d.ts",
         "bun": "./dist/components/integrations/molecules/IntegrationCard.js",
@@ -3297,6 +3375,12 @@
         "node": "./dist/node/components/integrations/organisms/IntegrationSettings.js",
         "default": "./dist/components/integrations/organisms/IntegrationSettings.js"
       },
+      "./components/integrations/organisms/IntegrationSettingsSecretReference": {
+        "types": "./dist/components/integrations/organisms/IntegrationSettingsSecretReference.d.ts",
+        "bun": "./dist/components/integrations/organisms/IntegrationSettingsSecretReference.js",
+        "node": "./dist/node/components/integrations/organisms/IntegrationSettingsSecretReference.js",
+        "default": "./dist/components/integrations/organisms/IntegrationSettingsSecretReference.js"
+      },
       "./components/integrations/organisms/KnowledgeSourceList": {
         "types": "./dist/components/integrations/organisms/KnowledgeSourceList.d.ts",
         "bun": "./dist/components/integrations/organisms/KnowledgeSourceList.js",

package/src/components/integrations/atoms/IntegrationCredentialFieldList.tsx

@@ -0,0 +1,51 @@
+import {
+	HStack,
+	Muted,
+	Small,
+	Text,
+	VStack,
+} from '@contractspec/lib.design-system';
+import { Badge } from '@contractspec/lib.ui-kit-web/ui/badge';
+import type { CredentialSetupFieldRow } from '../helpers/credentialSetupModel';
+
+export interface IntegrationCredentialFieldListProps {
+	fields: CredentialSetupFieldRow[];
+	emptyLabel?: string;
+}
+
+export function IntegrationCredentialFieldList({
+	fields,
+	emptyLabel = 'No credential fields declared.',
+}: IntegrationCredentialFieldListProps) {
+	if (fields.length === 0) return <Muted>{emptyLabel}</Muted>;
+
+	return (
+		<VStack gap="sm" align="stretch">
+			{fields.map((field) => (
+				<VStack
+					key={`${field.kind}:${field.key}`}
+					gap="sm"
+					align="stretch"
+					className="rounded-xl border p-3 text-sm"
+				>
+					<HStack justify="between" align="start" gap="md">
+						<VStack gap="sm" align="start">
+							<Small>{field.label}</Small>
+							<Muted className="text-xs">{field.kind}</Muted>
+						</VStack>
+						<Badge
+							variant={field.status === 'missing' ? 'destructive' : 'secondary'}
+						>
+							<Text>{field.status}</Text>
+						</Badge>
+					</HStack>
+					{field.description ? <Muted>{field.description}</Muted> : null}
+					{field.secretRef ? (
+						<Muted className="font-mono text-xs">{field.secretRef}</Muted>
+					) : null}
+					{field.required ? <Text className="text-xs">Required</Text> : null}
+				</VStack>
+			))}
+		</VStack>
+	);
+}

package/src/components/integrations/atoms/IntegrationCredentialModeTabs.tsx

@@ -0,0 +1,44 @@
+import { HStack, Text } from '@contractspec/lib.design-system';
+import { Badge } from '@contractspec/lib.ui-kit-web/ui/badge';
+import { Button } from '@contractspec/lib.ui-kit-web/ui/button';
+import type {
+	CredentialSetupModeOption,
+	IntegrationCredentialSetupModel,
+} from '../helpers/credentialSetupModel';
+
+export interface IntegrationCredentialModeTabsProps {
+	modes: CredentialSetupModeOption[];
+	selectedMode: IntegrationCredentialSetupModel['selectedMode'];
+	onModeChange?: (
+		mode: IntegrationCredentialSetupModel['selectedMode']
+	) => void;
+}
+
+export function IntegrationCredentialModeTabs({
+	modes,
+	selectedMode,
+	onModeChange,
+}: IntegrationCredentialModeTabsProps) {
+	return (
+		<HStack wrap="wrap" gap="sm" role="tablist" aria-label="Credential mode">
+			{modes.map((mode) => (
+				<Button
+					key={mode.mode}
+					type="button"
+					variant={mode.mode === selectedMode ? 'default' : 'outline'}
+					disabled={!mode.available}
+					onClick={() => onModeChange?.(mode.mode)}
+					role="tab"
+					aria-selected={mode.mode === selectedMode}
+				>
+					<Text>{mode.label}</Text>
+					{mode.missingRequiredCount > 0 ? (
+						<Badge variant="destructive">
+							<Text>{`${mode.missingRequiredCount} missing`}</Text>
+						</Badge>
+					) : null}
+				</Button>
+			))}
+		</HStack>
+	);
+}

package/src/components/integrations/atoms/IntegrationEnvAliasPreview.tsx

@@ -0,0 +1,56 @@
+import {
+	Code,
+	HStack,
+	Muted,
+	Text,
+	VStack,
+} from '@contractspec/lib.design-system';
+import { Badge } from '@contractspec/lib.ui-kit-web/ui/badge';
+import type {
+	CredentialSetupAliasRow,
+	CredentialSetupWarning,
+} from '../helpers/credentialSetupModel';
+
+export interface IntegrationEnvAliasPreviewProps {
+	aliases: CredentialSetupAliasRow[];
+	warnings?: CredentialSetupWarning[];
+	emptyLabel?: string;
+}
+
+export function IntegrationEnvAliasPreview({
+	aliases,
+	warnings = [],
+	emptyLabel = 'No env aliases declared.',
+}: IntegrationEnvAliasPreviewProps) {
+	return (
+		<VStack gap="sm" align="stretch">
+			{aliases.length === 0 ? <Muted>{emptyLabel}</Muted> : null}
+			{aliases.map((alias) => (
+				<VStack
+					key={`${alias.logicalKey}:${alias.envName}:${alias.targetId ?? 'root'}`}
+					gap="sm"
+					align="stretch"
+					className="rounded-xl border p-3 text-sm"
+				>
+					<HStack wrap="wrap" gap="sm" align="center">
+						<Code>{alias.envName}</Code>
+						<Badge variant={alias.public ? 'default' : 'secondary'}>
+							<Text>{alias.public ? 'public' : 'server'}</Text>
+						</Badge>
+					</HStack>
+					<Muted className="text-xs">
+						{`${alias.logicalKey} → ${alias.targetLabel ?? alias.targetId ?? 'workspace root'}${alias.framework ? ` · ${alias.framework}` : ''}${alias.profile ? ` · ${alias.profile}` : ''}`}
+					</Muted>
+					{alias.warning ? (
+						<Text className="text-xs">{alias.warning}</Text>
+					) : null}
+				</VStack>
+			))}
+			{warnings.map((warning) => (
+				<Muted key={`${warning.level}:${warning.fieldKey ?? warning.message}`}>
+					{`${warning.level.toUpperCase()}: ${warning.message}`}
+				</Muted>
+			))}
+		</VStack>
+	);
+}

package/src/components/integrations/blocks/IntegrationCredentialSetupBlock.tsx

@@ -0,0 +1,95 @@
+import { Small, Text, VStack } from '@contractspec/lib.design-system';
+import { Button } from '@contractspec/lib.ui-kit-web/ui/button';
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from '@contractspec/lib.ui-kit-web/ui/card';
+import { IntegrationCredentialFieldList } from '../atoms/IntegrationCredentialFieldList';
+import { IntegrationCredentialModeTabs } from '../atoms/IntegrationCredentialModeTabs';
+import { IntegrationEnvAliasPreview } from '../atoms/IntegrationEnvAliasPreview';
+import {
+	type BuildIntegrationCredentialSetupModelInput,
+	buildIntegrationCredentialSetupModel,
+	type IntegrationCredentialSetupModel,
+} from '../helpers/credentialSetupModel';
+
+export interface IntegrationCredentialSetupBlockProps
+	extends BuildIntegrationCredentialSetupModelInput {
+	title?: string;
+	description?: string;
+	onModeChange?: (
+		mode: IntegrationCredentialSetupModel['selectedMode']
+	) => void;
+	onTestConnection?: () => void | Promise<void>;
+	onSave?: () => void | Promise<void>;
+	isTesting?: boolean;
+	isSaving?: boolean;
+}
+
+export function IntegrationCredentialSetupBlock({
+	title = 'Credential setup',
+	description = 'Configure managed credentials or BYOK secret references without exposing raw secrets.',
+	onModeChange,
+	onTestConnection,
+	onSave,
+	isTesting,
+	isSaving,
+	...input
+}: IntegrationCredentialSetupBlockProps) {
+	const model = buildIntegrationCredentialSetupModel(input);
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle>{title}</CardTitle>
+				<CardDescription>{description}</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<VStack gap="lg" align="stretch">
+					<IntegrationCredentialModeTabs
+						modes={model.modes}
+						selectedMode={model.selectedMode}
+						onModeChange={onModeChange}
+					/>
+					<VStack gap="sm" align="stretch">
+						<Small>Required fields</Small>
+						<IntegrationCredentialFieldList fields={model.fields} />
+					</VStack>
+					<VStack gap="sm" align="stretch">
+						<Small>Environment aliases</Small>
+						<IntegrationEnvAliasPreview
+							aliases={model.aliases}
+							warnings={model.warnings}
+						/>
+					</VStack>
+				</VStack>
+			</CardContent>
+			{onTestConnection || onSave ? (
+				<CardFooter className="flex flex-wrap justify-end gap-2">
+					{onTestConnection ? (
+						<Button
+							type="button"
+							variant="outline"
+							disabled={isTesting}
+							onClick={() => void onTestConnection()}
+						>
+							<Text>{isTesting ? 'Testing...' : 'Test connection'}</Text>
+						</Button>
+					) : null}
+					{onSave ? (
+						<Button
+							type="button"
+							disabled={isSaving}
+							onClick={() => void onSave()}
+						>
+							<Text>{isSaving ? 'Saving...' : 'Save settings'}</Text>
+						</Button>
+					) : null}
+				</CardFooter>
+			) : null}
+		</Card>
+	);
+}

package/src/components/integrations/byok-env-ui-kit.test.tsx

@@ -0,0 +1,194 @@
+import { describe, expect, it } from 'bun:test';
+import type { IntegrationSpec } from '@contractspec/lib.contracts-integrations';
+import { renderToStaticMarkup } from 'react-dom/server';
+import {
+	buildIntegrationCredentialSetupModel,
+	IntegrationCredentialSetupBlock,
+} from './index';
+
+const baseIntegration: IntegrationSpec = {
+	meta: {
+		key: 'integration.postmark',
+		version: '1.0.0',
+		title: 'Postmark',
+		description: 'Postmark email provider.',
+		stability: 'experimental',
+		owners: ['platform.marketplace'],
+		tags: ['marketplace'],
+		category: 'email',
+	},
+	supportedModes: ['managed', 'byok'],
+	capabilities: { provides: [] },
+	configSchema: {
+		schema: {
+			type: 'object',
+			required: ['region'],
+			properties: {
+				region: { type: 'string', description: 'Provider region.' },
+			},
+		},
+	},
+	secretSchema: {
+		schema: {
+			type: 'object',
+			required: ['apiToken'],
+			properties: {
+				apiToken: { type: 'string', description: 'API token.' },
+			},
+		},
+	},
+	byokSetup: {
+		keyRotationSupported: true,
+		provisioningSteps: ['Create an API token.'],
+	},
+};
+
+describe('BYOK env UI config kit', () => {
+	it('builds rows from legacy integration schemas', () => {
+		const model = buildIntegrationCredentialSetupModel({
+			integration: baseIntegration,
+			selectedMode: 'byok',
+		});
+
+		expect(model.fields.map((field) => field.key)).toEqual([
+			'region',
+			'apiToken',
+		]);
+		expect(model.fields.find((field) => field.key === 'apiToken')?.status).toBe(
+			'missing'
+		);
+		expect(
+			model.warnings.some((warning) => warning.message.includes('required'))
+		).toBe(true);
+	});
+
+	it('prefers explicit credential manifests over legacy fallback', () => {
+		const model = buildIntegrationCredentialSetupModel({
+			integration: {
+				...baseIntegration,
+				credentialManifest: {
+					modes: {
+						managed: {
+							mode: 'managed',
+							configFields: [{ key: 'workspaceId', required: true }],
+						},
+					},
+				},
+			},
+			selectedMode: 'managed',
+		});
+
+		expect(model.fields.map((field) => field.key)).toEqual(['workspaceId']);
+	});
+
+	it('omits raw secret-looking values from the setup model', () => {
+		const model = buildIntegrationCredentialSetupModel({
+			credentialManifest: {
+				modes: {
+					byok: {
+						mode: 'byok',
+						secretFields: [{ key: 'apiToken', required: true }],
+					},
+				},
+			},
+			selectedMode: 'byok',
+			secretRefs: { apiToken: 'sk_live_should_not_render' },
+		});
+
+		expect(JSON.stringify(model)).not.toContain('sk_live_should_not_render');
+		expect(
+			model.warnings.some((warning) => warning.message.includes('hidden'))
+		).toBe(true);
+	});
+
+	it('renders managed mode actions and requirements', () => {
+		const html = renderToStaticMarkup(
+			<IntegrationCredentialSetupBlock
+				credentialManifest={{
+					modes: {
+						managed: {
+							mode: 'managed',
+							configFields: [{ key: 'workspaceId', required: true }],
+						},
+					},
+				}}
+				supportedModes={['managed']}
+				selectedMode="managed"
+				onTestConnection={() => undefined}
+				onSave={() => undefined}
+			/>
+		);
+
+		expect(html).toContain('Managed');
+		expect(html).toContain('WorkspaceId');
+		expect(html).toContain('Test connection');
+		expect(html).toContain('Save settings');
+	});
+
+	it('renders BYOK references, app aliases, and no raw secrets', () => {
+		const html = renderToStaticMarkup(
+			<IntegrationCredentialSetupBlock
+				credentialManifest={{
+					modes: {
+						byok: {
+							mode: 'byok',
+							secretFields: [{ key: 'apiToken', required: true }],
+						},
+					},
+				}}
+				environment={{
+					targets: {
+						web: { id: 'web', framework: 'next', packageName: '@acme/web' },
+						mobile: {
+							id: 'mobile',
+							framework: 'expo',
+							packageName: '@acme/mobile',
+						},
+					},
+					variables: {
+						PUBLIC_API_URL: {
+							key: 'PUBLIC_API_URL',
+							sensitivity: 'public',
+							aliases: [
+								{
+									targetId: 'web',
+									framework: 'next',
+									name: 'NEXT_PUBLIC_API_URL',
+								},
+								{
+									targetId: 'mobile',
+									framework: 'expo',
+									name: 'EXPO_PUBLIC_API_URL',
+								},
+							],
+						},
+						apiToken: {
+							key: 'apiToken',
+							sensitivity: 'secret',
+							aliases: [
+								{
+									targetId: 'web',
+									framework: 'next',
+									name: 'NEXT_PUBLIC_TOKEN',
+								},
+							],
+						},
+					},
+				}}
+				secretRefs={{ apiToken: 'env://POSTMARK_TOKEN' }}
+				supportedModes={['byok']}
+				selectedMode="byok"
+				targetIds={['web', 'mobile']}
+			/>
+		);
+
+		expect(html).toContain('BYOK');
+		expect(html).toContain('env://POSTMARK_TOKEN');
+		expect(html).toContain('NEXT_PUBLIC_API_URL');
+		expect(html).toContain('EXPO_PUBLIC_API_URL');
+		expect(html).toContain('@acme/web');
+		expect(html).toContain('@acme/mobile');
+		expect(html).toContain('Public client alias');
+		expect(html).not.toContain('NEXT_PUBLIC_TOKEN');
+	});
+});