[pull] main from remotion-dev:main

packages/browser-studio/e2e/browser-studio.test.ts

@@ -1017,16 +1017,17 @@ export const BrowserElement = () => <Rect width={320} height={180} fill="red" />
 	await canvas.dispatchEvent('drop', coordinates);
 
 	await expect(
-		studio.getByText('Install Element', {exact: true}),
+		studio.getByText('Install Browser Element', {exact: true}),
 	).toBeVisible();
 	await expect(
 		studio.getByText('Unverified drag-and-drop payload'),
 	).toBeVisible();
 	await expect(
-		studio.getByText(
-			'Dependencies are resolved in the browser; package lifecycle scripts do not run.',
-		),
-	).toHaveCount(0);
+		studio.getByText('Packages to install', {exact: true}),
+	).toBeVisible();
+	await expect(
+		studio.getByText('@remotion/shapes', {exact: true}),
+	).toBeVisible();
 	await studio.getByRole('button', {name: /^Install/}).click();
 
 	await expect
@@ -1099,7 +1100,7 @@ export const LinkedElement = () => <Rect width={320} height={180} fill="red" />;
 	await expect(studio.getByTitle('/project').getByText('MyComp')).toBeVisible();
 
 	await expect(
-		studio.getByText('Install Element', {exact: true}),
+		studio.getByText('Install Linked Element', {exact: true}),
 	).toBeVisible();
 	await expect(page).toHaveTitle(
 		'📦 Install Linked Element - Remotion Studio',

packages/docs/components/layout/Button.tsx

@@ -28,14 +28,26 @@ type PrestyledProps = DetailedHTMLProps<
 	MandatoryProps;
 
 export const Button: React.FC<Props> = (props) => {
-	const {children, loading, hoverColor, fullWidth, color, size, ...other} =
-		props;
+	const {
+		children,
+		loading,
+		hoverColor,
+		fullWidth,
+		color,
+		size,
+		className,
+		...other
+	} = props;
 	const actualDisabled = other.disabled || loading;
 
 	return (
 		<button
 			type="button"
-			className={styles.buttoncontainer}
+			className={
+				className
+					? `${styles.buttoncontainer} ${className}`
+					: styles.buttoncontainer
+			}
 			disabled={actualDisabled}
 			{...other}
 			style={{

packages/docs/docs/studio-protocol/install-in-studio.mdx

@@ -73,6 +73,7 @@ On failure, one of:
 
 - `unsupported-origin`
 - `no-compatible-studio`
+- `loopback-network-permission-denied` <AvailableFrom v="4.0.521" inline />
 - `studio-upgrade-required`
 - `no-installable-target`
 - `unsupported-protocol`
@@ -90,8 +91,6 @@ A human-readable failure message. Use `code` for application logic.
 
 When called outside Studio, ports 3000 through 3009 are probed in parallel. The most recently focused compatible target is selected. Discovery returns a short-lived, single-use token bound to that Studio tab and contextual composition.
 
-Studios older than 4.0.502 are detected and return `studio-upgrade-required`. The Element is not sent through the legacy endpoint.
-
 ## Supported origins
 
 The function supports any HTTPS website. HTTP is supported only on `localhost` and `127.0.0.1` for local development.

packages/docs/docs/studio-protocol/security.mdx

@@ -19,7 +19,7 @@ Studio reflects only the requesting allowed origin in CORS. It does not use wild
 
 Elements delivered using [`setStudioDragData()`](/docs/studio-protocol/set-studio-drag-data) or [`installInStudio()`](/docs/studio-protocol/install-in-studio) require confirmation in Studio. A successful `installInStudio()` result only means the request reached Studio and is awaiting confirmation.
 
-Before confirming, Studio shows the target composition and destination file, source code, and every declared dependency with its installation status. For an installation request, Studio also shows the requesting website. Drag-and-drop data has no reliable website provenance and is labeled as unverified. Source code and package lifecycle scripts run with the project's file and network access.
+Before confirming, Studio shows the requesting source, destination choice, source code, packages that will be installed, and whether an existing Element source file will be replaced. Drag-and-drop data has no reliable website provenance and is labeled as unverified. Installed source code runs with the project's file and network access. Package lifecycle scripts may also run when packages are installed.
 
 Declining the confirmation does not write source files or install packages.
 

packages/docs/src/components/Elements/ElementPage.module.css

@@ -97,71 +97,103 @@
 
 .actionRow {
 	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
+	flex-direction: column;
 	gap: 10px;
 }
 
+.studioAction {
+	display: flex;
+	align-items: stretch;
+	width: 100%;
+	border-radius: 8px;
+	background: var(--blue-underlay);
+}
+
+.studioAction .installButtonWithDragHandle {
+	border-top-right-radius: 0;
+	border-right-width: 0;
+	border-bottom-right-radius: 0;
+}
+
 .dragHandle {
-	position: relative;
 	display: flex;
 	align-items: center;
-	margin-top: 8px;
-	padding: 8px 40px;
-	border: 1px solid var(--ifm-color-emphasis-300);
-	border-radius: 8px;
-	background: var(--ifm-background-surface-color);
-	color: var(--ifm-color-emphasis-800);
+	justify-content: center;
+	width: 46px;
+	min-height: 46px;
+	flex: none;
+	border: 2px solid black;
+	border-bottom-width: 4px;
+	border-left: 1px solid rgb(0 0 0 / 30%);
+	border-radius: 0 8px 8px 0;
+	background: transparent;
+	color: white;
 	cursor: grab;
-	font-size: 0.8125rem;
 	user-select: none;
 }
 
 .dragHandle:hover {
-	background: var(--ifm-color-emphasis-100);
+	background: rgb(0 0 0 / 8%);
 }
 
 .dragHandle:active {
 	cursor: grabbing;
 }
 
-[data-theme='dark'] .dragHandle {
-	border-color: var(--ifm-color-emphasis-200);
-	color: var(--ifm-color-emphasis-700);
-}
-
 .dragHandleIcon {
-	position: absolute;
-	left: 12px;
-	top: 50%;
 	font-size: 1.5rem;
 	line-height: 1;
-	transform: translateY(-50%);
 }
 
-[data-theme='dark'] .dragHandleIcon {
-	color: var(--ifm-color-emphasis-500);
+.studioGuidance {
+	margin-top: 12px;
+	padding: 12px;
+	border: 1px solid var(--ifm-color-emphasis-300);
+	border-radius: 8px;
+	background: var(--ifm-color-emphasis-100);
+	font-size: 0.875rem;
+}
+
+.studioGuidanceTitle {
+	margin: 0;
+	font-weight: 600;
 }
 
-.dragHandleText {
+.studioGuidanceSteps {
 	display: flex;
-	flex: 1;
 	flex-direction: column;
-	line-height: 1.3;
-	text-align: center;
-	white-space: nowrap;
+	gap: 8px;
+	margin: 10px 0 0;
+	padding: 0;
+	list-style: none;
 }
 
-.dragHandleText strong {
-	font-weight: 600;
+.studioGuidanceSteps li {
+	display: flex;
+	align-items: flex-start;
+	gap: 8px;
+	line-height: 1.5;
+}
+
+.studioGuidanceSteps li > div {
+	flex: none;
+}
+
+.studioGuidanceSteps li > span {
+	min-width: 0;
 }
 
+.installingStatus,
 .successStatus,
 .errorStatus {
 	margin: 12px 0 0;
 	font-size: 0.875rem;
 }
 
+.installingStatus {
+	color: var(--ifm-color-emphasis-700);
+}
+
 .successStatus {
 	color: var(--ifm-color-success-dark);
 }
@@ -171,9 +203,7 @@
 }
 
 .details {
-	margin-top: 16px;
-	padding-top: 16px;
-	border-top: 1px solid var(--ifm-color-emphasis-200);
+	margin-top: 20px;
 }
 
 .description {
@@ -184,7 +214,7 @@
 }
 
 .metadata {
-	margin: 14px 0 0;
+	margin: 16px 0 0;
 	font-size: 0.8125rem;
 }
 
@@ -202,8 +232,8 @@
 
 .metadata dd {
 	margin: 0;
+	color: var(--ifm-color-emphasis-800);
 	font-variant-numeric: tabular-nums;
-	font-weight: 600;
 }
 
 .metadata > .dependenciesMetadata {
@@ -225,11 +255,6 @@
 	overflow-wrap: anywhere;
 }
 
-.dependencyList li::marker {
-	color: var(--ifm-color-primary);
-	font-size: 0.85em;
-}
-
 .dependencyList li + li {
 	margin-top: 4px;
 }
@@ -242,9 +267,7 @@
 }
 
 .contributors:not(:first-child) {
-	margin-top: 16px;
-	padding-top: 16px;
-	border-top: 1px solid var(--ifm-color-emphasis-200);
+	margin-top: 24px;
 }
 
 .contributorsLabel {
@@ -257,7 +280,7 @@
 .contributorList {
 	display: flex;
 	flex-wrap: wrap;
-	gap: 12px;
+	gap: 8px;
 	min-width: 0;
 }
 
@@ -301,7 +324,6 @@
 }
 
 @container actions-column (max-width: 400px) {
-	.actionsColumn .actionRow,
 	.actionsColumn .contributors,
 	.actionsColumn .contributorList {
 		align-items: stretch;
@@ -314,9 +336,8 @@
 		height: 160px;
 	}
 
-	.actionRow {
-		align-items: stretch;
-		flex-direction: column;
+	.studioGuidance {
+		font-size: 1rem;
 	}
 
 	.contributors {