@remotion/studio 4.0.524 → 4.0.525

package/dist/components/SettingsModal.js

@@ -104,6 +104,9 @@ const SettingsModal = ({ initialPublicLicenseKey, initialTab }) => {
     }, [initialPublicLicenseKey, setPublicLicenseKey]);
     return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { panelStyle: render_modals_1.outerModalStyle, children: jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                 jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Settings", onClose: dismiss }), jsx_runtime_1.jsxs("div", { style: render_modals_1.horizontalLayout, children: [
-                        jsx_runtime_1.jsxs("div", { style: settingsLeftSidebar, children: [isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'studio', onClick: () => selectTab('studio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(remotion_triangle_1.RemotionTriangleIcon, { color: color, style: render_modals_1.icon }) })), children: "Studio" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'rendering', onClick: () => selectTab('rendering'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: render_modals_1.icon }) })), children: "Defaults" })), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'shortcuts', onClick: () => selectTab('shortcuts'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(keyboard_1.KeyboardIcon, { color: color, style: keyboardIcon }) })), children: "Shortcuts" }), showPackages ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'packages', onClick: () => selectTab('packages'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(package_1.PackageIcon, { color: color, style: render_modals_1.icon }) })), children: "Packages" })) : null, isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'skills', onClick: () => selectTab('skills'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(skills_1.SkillsIcon, { color: color, style: skillsIcon }) })), children: "Skills" })), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'models', onClick: () => selectTab('models'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(models_1.ModelsIcon, { color: color, style: render_modals_1.icon }) })), children: "Models" }), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'apps', onClick: () => selectTab('apps'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(apps_1.AppsIcon, { color: color, style: appsIcon }) })), children: "Apps" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => selectTab('license'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(license_1.LicenseIcon, { color: color, style: render_modals_1.icon }) })), children: "License" })), showUpdates ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'updates', onClick: () => selectTab('updates'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(cloud_download_1.CloudDownloadIcon, { color: color, style: render_modals_1.icon }) })), children: "Updates" })) : null] }), openedTabs.includes('packages') ? (jsx_runtime_1.jsx("div", { style: tab === 'packages' ? render_modals_1.optionsPanel : hiddenPanel, children: jsx_runtime_1.jsx(InstallPackage_1.InstallPackageSettings, { footerContainer: packagesFooterContainer, packageManager: packageManager }) })) : null, openedTabs.includes('apps') ? (jsx_runtime_1.jsx("div", { style: tab === 'apps' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureDefaultEditorModal_1.DefaultEditorSettings, {}) })) : null, openedTabs.includes('models') ? (jsx_runtime_1.jsx("div", { style: tab === 'models' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ModelsSettings_1.ModelsSettings, {}) })) : null, openedTabs.includes('license') ? (jsx_runtime_1.jsx("div", { style: tab === 'license' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureLicenseModal_1.LicenseSettings, {}) })) : null, openedTabs.includes('skills') ? (jsx_runtime_1.jsx("div", { style: tab === 'skills' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(SkillsSettings_1.SkillsSettings, {}) })) : null, openedTabs.includes('shortcuts') ? (jsx_runtime_1.jsx("div", { style: tab === 'shortcuts' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(KeyboardShortcutsSettings_1.KeyboardShortcutsSettings, {}) })) : null, openedTabs.includes('rendering') ? (jsx_runtime_1.jsx("div", { style: tab === 'rendering' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(RenderingSettings_1.RenderingSettings, {}) })) : null, openedTabs.includes('studio') ? (jsx_runtime_1.jsx("div", { style: tab === 'studio' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(StudioSettings_1.StudioSettings, {}) })) : null, showUpdates && openedTabs.includes('updates') ? (jsx_runtime_1.jsx("div", { style: tab === 'updates' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(UpdatesSettings_1.UpdatesSettings, {}) })) : null] }), tab === 'packages' ? (jsx_runtime_1.jsx("div", { ref: setPackagesFooterContainer })) : isBrowserStudio || tab === 'models' || tab === 'updates' ? null : (jsx_runtime_1.jsx(SettingsModalFooter_1.SettingsModalFooter, { showLicenseFaq: tab === 'license' }))] }) }));
+                        jsx_runtime_1.jsxs("div", { style: settingsLeftSidebar, children: [isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'studio', onClick: () => selectTab('studio'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(remotion_triangle_1.RemotionTriangleIcon, { color: color, style: render_modals_1.icon }) })), children: "Studio" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'rendering', onClick: () => selectTab('rendering'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: render_modals_1.icon }) })), children: "Defaults" })), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'shortcuts', onClick: () => selectTab('shortcuts'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(keyboard_1.KeyboardIcon, { color: color, style: keyboardIcon }) })), children: "Shortcuts" }), showPackages ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'packages', onClick: () => selectTab('packages'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(package_1.PackageIcon, { color: color, style: render_modals_1.icon }) })), children: "Packages" })) : null, isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'skills', onClick: () => selectTab('skills'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(skills_1.SkillsIcon, { color: color, style: skillsIcon }) })), children: "Skills" })), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'models', onClick: () => selectTab('models'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(models_1.ModelsIcon, { color: color, style: render_modals_1.icon }) })), children: "Models" }), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'apps', onClick: () => selectTab('apps'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(apps_1.AppsIcon, { color: color, style: appsIcon }) })), children: "Apps" })), isBrowserStudio ? null : (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'license', onClick: () => selectTab('license'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(license_1.LicenseIcon, { color: color, style: render_modals_1.icon }) })), children: "License" })), showUpdates ? (jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'updates', onClick: () => selectTab('updates'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(cloud_download_1.CloudDownloadIcon, { color: color, style: render_modals_1.icon }) })), children: "Updates" })) : null] }), openedTabs.includes('packages') ? (jsx_runtime_1.jsx("div", { style: tab === 'packages' ? render_modals_1.optionsPanel : hiddenPanel, children: jsx_runtime_1.jsx(InstallPackage_1.InstallPackageSettings, { footerContainer: packagesFooterContainer, packageManager: packageManager }) })) : null, openedTabs.includes('apps') ? (jsx_runtime_1.jsx("div", { style: tab === 'apps' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureDefaultEditorModal_1.DefaultEditorSettings, {}) })) : null, openedTabs.includes('models') ? (jsx_runtime_1.jsx("div", { style: tab === 'models' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ModelsSettings_1.ModelsSettings, {}) })) : null, openedTabs.includes('license') ? (jsx_runtime_1.jsx("div", { style: tab === 'license' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ConfigureLicenseModal_1.LicenseSettings, {}) })) : null, openedTabs.includes('skills') ? (jsx_runtime_1.jsx("div", { style: tab === 'skills' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(SkillsSettings_1.SkillsSettings, {}) })) : null, openedTabs.includes('shortcuts') ? (jsx_runtime_1.jsx("div", { style: tab === 'shortcuts' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(KeyboardShortcutsSettings_1.KeyboardShortcutsSettings, {}) })) : null, openedTabs.includes('rendering') ? (jsx_runtime_1.jsx("div", { style: tab === 'rendering' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(RenderingSettings_1.RenderingSettings, {}) })) : null, openedTabs.includes('studio') ? (jsx_runtime_1.jsx("div", { style: tab === 'studio' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(StudioSettings_1.StudioSettings, {}) })) : null, showUpdates && openedTabs.includes('updates') ? (jsx_runtime_1.jsx("div", { style: tab === 'updates' ? settingsOptionsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(UpdatesSettings_1.UpdatesSettings, {}) })) : null] }), tab === 'packages' ? (jsx_runtime_1.jsx("div", { ref: setPackagesFooterContainer })) : isBrowserStudio ||
+                    tab === 'models' ||
+                    tab === 'updates' ||
+                    tab === 'skills' ? null : (jsx_runtime_1.jsx(SettingsModalFooter_1.SettingsModalFooter, { showLicenseFaq: tab === 'license' }))] }) }));
 };
 exports.SettingsModal = SettingsModal;

package/dist/components/SettingsModalFooter.js

@@ -52,7 +52,7 @@ const SettingsModalFooter = ({ showLicenseFaq }) => {
     }, []);
     return (jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, children: jsx_runtime_1.jsxs("div", { style: footerRow, children: [
                 jsx_runtime_1.jsxs("div", { style: configFileHint, children: ["Changes save to",
-                        jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { locationType: null, location: configFileLocation, label: jsx_runtime_1.jsx("strong", { style: configFileName, children: "remotion.config.ts" }) })
+                        jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { locationType: null, location: configFileLocation, label: jsx_runtime_1.jsx("strong", { style: configFileName, children: "remotion.config.ts" }), showTooltips: false })
                     ] }), showLicenseFaq ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: openLicenseFaq, style: { flex: 'none', width: 'fit-content' }, title: "Open the Remotion License FAQ in a new tab", children: ["License FAQ",
                         jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: externalLinkIndicator, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
                     ] })) : null] }) }));

package/dist/components/SidebarCollapserControls.js

@@ -143,6 +143,6 @@ const SidebarCollapserControl = ({ side }) => {
     const toggleRightAction = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx("div", { "data-sidebar-toggle": "right", style: colorStyle(color), children: jsx_runtime_1.jsx("div", { style: rightIcon(color) }) }));
     }, [colorStyle, rightIcon]);
-    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: label, shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: side === 'left' ? toggleLeft : toggleRight, renderAction: side === 'left' ? toggleLeftAction : toggleRightAction, style: side === 'left' ? { marginRight: 4 } : undefined, "aria-label": label, "aria-expanded": expanded, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined }) }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: label, shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: side === 'left' ? toggleLeft : toggleRight, renderAction: side === 'left' ? toggleLeftAction : toggleRightAction, unhoveredColor: colors_1.WHITE_ALPHA_80, style: side === 'left' ? { marginRight: 4 } : undefined, "aria-label": label, "aria-expanded": expanded, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined }) }));
 };
 exports.SidebarCollapserControl = SidebarCollapserControl;

package/dist/components/SkillsSettings.js

@@ -3,15 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkillsSettings = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const copy_text_1 = require("../helpers/copy-text");
 const use_copy_feedback_1 = require("../helpers/use-copy-feedback");
 const check_circle_filled_1 = require("../icons/check-circle-filled");
+const cloud_download_1 = require("../icons/cloud-download");
 const copy_1 = require("../icons/copy");
+const trash_1 = require("../icons/trash");
 const InlineAction_1 = require("./InlineAction");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const SettingsContext_1 = require("./SettingsContext");
+const Spinner_1 = require("./Spinner");
 const INSTALL_COMMAND = 'npx remotion skills add';
 const container = {
     alignSelf: 'flex-start',
@@ -87,13 +91,28 @@ const status = {
     lineHeight: 1.4,
     whiteSpace: 'nowrap',
 };
+const actionIcon = {
+    height: 14,
+    width: 14,
+};
+const actionSlot = {
+    alignItems: 'center',
+    display: 'inline-flex',
+    flexShrink: 0,
+    height: 24,
+    justifyContent: 'center',
+    width: 24,
+};
 const loading = {
     ...description,
     marginTop: 14,
 };
 const SkillsSettings = () => {
     var _a;
-    const { error, remotionSkillsInfo } = (0, SettingsContext_1.useSettings)();
+    const { error, remotionSkillsInfo, installSkill, removeSkill, skillAction, skillActionError, } = (0, SettingsContext_1.useSettings)();
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const canInstall = !window.remotion_isReadOnlyStudio &&
+        previewServerState.type === 'connected';
     const { copied, markCopied } = (0, use_copy_feedback_1.useCopyFeedback)();
     const installedSkills = (0, react_1.useMemo)(() => {
         var _a;
@@ -110,23 +129,35 @@ const SkillsSettings = () => {
     const renderCopyAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: copied, color: color, style: copyIcon });
     }, [copied]);
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [remotionSkillsInfo === null && error === null ? (jsx_runtime_1.jsx("p", { style: loading, children: "Checking installed skills..." })) : null, remotionSkillsInfo === null && error ? (jsx_runtime_1.jsx("div", { style: { marginTop: 14 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: error, align: "flex-start", type: "error" }) })) : null, missingSkills > 0 ? (jsx_runtime_1.jsxs("div", { children: [
+    const renderInstallAction = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(cloud_download_1.CloudDownloadIcon, { color: color, style: actionIcon });
+    }, []);
+    const renderRemoveAction = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(trash_1.TrashIcon, { color: color, style: actionIcon });
+    }, []);
+    const actionInProgress = skillAction !== null;
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [remotionSkillsInfo === null && error === null ? (jsx_runtime_1.jsx("p", { style: loading, children: "Checking installed skills..." })) : null, remotionSkillsInfo === null && error ? (jsx_runtime_1.jsx("div", { style: { marginTop: 14 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: error, align: "flex-start", type: "error" }) })) : null, missingSkills > 0 && canInstall ? (jsx_runtime_1.jsx("p", { style: description, children: "Install skills in this project to use them with your coding agent." })) : null, skillActionError ? (jsx_runtime_1.jsx("div", { style: { marginTop: 14 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: skillActionError, align: "flex-start", type: "error" }) })) : null, missingSkills > 0 && !canInstall ? (jsx_runtime_1.jsxs("div", { children: [
                     jsx_runtime_1.jsx("p", { style: description, children: "Not all skills are installed. Run this command in the project directory, then reload Studio and restart your coding agent." }), jsx_runtime_1.jsxs("div", { style: commandField, children: [
                             jsx_runtime_1.jsx("pre", { style: command, children: INSTALL_COMMAND }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, title: "Copy install command" })
                         ] })
                 ] })) : null, remotionSkillsInfo ? (jsx_runtime_1.jsx("div", { style: list, role: "list", "aria-label": "Remotion Agent Skills", children: remotionSkillsInfo.skills.map((skill, index) => {
                     const installed = skill.installedInProject || skill.installedGlobally;
+                    const processingThisSkill = (skillAction === null || skillAction === void 0 ? void 0 : skillAction.skill) === skill.name;
                     const installedLocation = skill.installedInProject && skill.installedGlobally
                         ? 'Project and global'
                         : skill.installedInProject
                             ? 'Project'
                             : skill.installedGlobally
                                 ? 'Global'
-                                : 'Not installed';
+                                : null;
                     return (jsx_runtime_1.jsxs("div", { role: "listitem", style: index === remotionSkillsInfo.skills.length - 1
                             ? lastSkillRow
                             : skillRow, children: [
-                            jsx_runtime_1.jsxs("span", { style: skillName, children: ["/", skill.name] }), jsx_runtime_1.jsx("span", { style: status, children: installedLocation }), installed ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { "aria-hidden": true, style: { ...statusIcon, fill: colors_1.BLUE } })) : null] }, skill.name));
+                            jsx_runtime_1.jsxs("span", { style: skillName, children: ["/", skill.name] }), processingThisSkill ? (jsx_runtime_1.jsx("span", { style: status, children: skillAction.type === 'installing'
+                                    ? 'Installing…'
+                                    : 'Removing…' })) : installedLocation ? (jsx_runtime_1.jsx("span", { style: status, children: installedLocation })) : null, installed ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { "aria-hidden": true, style: { ...statusIcon, fill: colors_1.BLUE } })) : null, processingThisSkill ? (jsx_runtime_1.jsx("span", { style: actionSlot, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 14 }) })) : installed && canInstall ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: skill.installedInProject
+                                    ? `Remove ${skill.name} from this project`
+                                    : `Remove ${skill.name} globally`, disabled: actionInProgress, onClick: () => removeSkill(skill.name), renderAction: renderRemoveAction, variant: null })) : canInstall ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: `Install ${skill.name} in this project`, disabled: actionInProgress, onClick: () => installSkill(skill.name), renderAction: renderInstallAction, variant: null })) : null] }, skill.name));
                 }) })) : null] }));
 };
 exports.SkillsSettings = SkillsSettings;

package/dist/components/SnappingToggle.js

@@ -10,6 +10,7 @@ const magnet_1 = require("../icons/magnet");
 const editor_snapping_1 = require("../state/editor-snapping");
 const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
+const buttonStyle = { width: 26 };
 const SnappingToggle = () => {
     const { editorSnapping, setEditorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const onClick = (0, react_1.useCallback)(() => {
@@ -21,6 +22,6 @@ const SnappingToggle = () => {
         ? 'Disable snapping'
         : 'Enable snapping';
     const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
-    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: accessibilityLabel, shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-pressed": editorSnapping, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaKeyShortcuts || undefined, onClick: onClick, children: (color) => (jsx_runtime_1.jsx(magnet_1.MagnetIcon, { style: { width: 18, height: 18, transform: 'translateY(1px)' }, color: editorSnapping ? colors_1.BLUE : color, "aria-hidden": "true", focusable: "false" })) }) }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Snapping", shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-pressed": editorSnapping, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaKeyShortcuts || undefined, onClick: onClick, style: buttonStyle, children: (color) => (jsx_runtime_1.jsx(magnet_1.MagnetIcon, { style: { width: 18, height: 18, transform: 'translateY(1px)' }, color: editorSnapping ? colors_1.BLUE : color, "aria-hidden": "true", focusable: "false" })) }) }));
 };
 exports.SnappingToggle = SnappingToggle;

package/dist/components/Splitter/SplitterHandle.js

@@ -116,8 +116,7 @@ const SplitterHandle = ({ allowToCollapse, onCollapse, onCollapseDuringDrag }) =
                 onMove: onPointerMove,
                 onEnd: (reason, endEvent) => {
                     var _a, _b;
-                    if ((reason === 'pointerup' || reason === 'buttons-released') &&
-                        endEvent) {
+                    if ((0, pointer_session_1.isPointerSessionRelease)(reason, endEvent)) {
                         lastFlex = getNewValue(endEvent, true);
                         lastCollapsedSide = getCollapsedSide(endEvent);
                     }

package/dist/components/Tabs/vertical.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare const VerticalTab: React.FC<{
-    readonly children: React.ReactNode;
+    readonly children: string;
     readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
     readonly renderIcon?: (color: string) => React.ReactNode;
     readonly style?: React.CSSProperties;

package/dist/components/Tabs/vertical.js

@@ -4,7 +4,10 @@ exports.VerticalTab = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
+const use_breakpoint_1 = require("../../helpers/use-breakpoint");
 const z_index_1 = require("../../state/z-index");
+const ActionTooltip_1 = require("../ActionTooltip");
+const compactTabBreakpoint = 700;
 const selectorButton = {
     border: 'none',
     flex: 1,
@@ -19,9 +22,15 @@ const selectorButton = {
     userSelect: 'none',
     WebkitUserSelect: 'none',
 };
+const compactSelectorButton = {
+    width: 42,
+    paddingLeft: 12,
+    paddingRight: 4,
+};
 const VerticalTab = ({ children, onClick, renderIcon, style, selected, autoFocus }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const { tabIndex } = (0, z_index_1.useZIndex)();
+    const isCompact = (0, use_breakpoint_1.useBreakpoint)(compactTabBreakpoint);
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHovered(true);
     }, []);
@@ -36,8 +45,13 @@ const VerticalTab = ({ children, onClick, renderIcon, style, selected, autoFocus
             color,
             boxShadow: 'none',
             ...style,
+            ...(isCompact ? compactSelectorButton : null),
         };
-    }, [color, hovered, selected, style]);
-    return (jsx_runtime_1.jsxs("button", { autoFocus: autoFocus, style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: [renderIcon ? renderIcon(color) : null, children] }));
+    }, [color, hovered, isCompact, selected, style]);
+    const button = (jsx_runtime_1.jsxs("button", { "aria-label": children, autoFocus: autoFocus, style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: [renderIcon ? renderIcon(color) : null, isCompact ? null : children] }));
+    if (!isCompact) {
+        return button;
+    }
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: children, shortcut: null, delay: 800, dismissOnClick: true, side: "right", children: button }));
 };
 exports.VerticalTab = VerticalTab;

package/dist/components/Timeline/EasingEditorModal.js

@@ -687,8 +687,8 @@ const EasingEditor = ({ state, renderHeader }) => {
             onMove: (moveEvent) => {
                 updateHandleFromPointer(handle, moveEvent);
             },
-            onEnd: (reason) => {
-                if (reason === 'pointerup' || reason === 'buttons-released') {
+            onEnd: (reason, endEvent) => {
+                if ((0, pointer_session_1.isPointerSessionRelease)(reason, endEvent)) {
                     commitEasing(serializeBezier(bezierRef.current), liveOverrideVersionRef.current);
                 }
                 else {

package/dist/components/Timeline/TimelineAssetField.js

@@ -6,6 +6,8 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const write_static_file_1 = require("../../api/write-static-file");
+const colors_1 = require("../../helpers/colors");
+const hoverable_1 = require("../../helpers/hoverable");
 const pen_1 = require("../../icons/pen");
 const modals_1 = require("../../state/modals");
 const import_assets_1 = require("../import-assets");
@@ -13,6 +15,7 @@ const InlineAction_1 = require("../InlineAction");
 const common_1 = require("../InspectorPanel/common");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const use_static_files_1 = require("../use-static-files");
+const timeline_asset_link_1 = require("./timeline-asset-link");
 const penIcon = {
     display: 'block',
     height: 14,
@@ -37,6 +40,72 @@ const assetTypeToAccept = {
     video: 'video/*',
     image: 'image/*',
 };
+const imageAssetField = {
+    alignItems: 'center',
+    display: 'flex',
+    flex: 1,
+    gap: 8,
+    minWidth: 0,
+    padding: '4px 12px',
+};
+const thumbnailButton = {
+    ...(0, hoverable_1.hoverableStyle)({
+        idleBackground: colors_1.TRANSPARENT,
+        hoverBackground: colors_1.TRANSPARENT,
+        idleColor: colors_1.LIGHT_TEXT,
+        hoverColor: colors_1.WHITE,
+    }),
+    appearance: 'none',
+    border: 'none',
+    cursor: 'default',
+    flexShrink: 0,
+    height: 40,
+    margin: 0,
+    padding: 0,
+    width: 40,
+};
+const thumbnail = {
+    display: 'block',
+    height: '100%',
+    objectFit: 'contain',
+    width: '100%',
+};
+const imageAssetInfo = {
+    ...(0, hoverable_1.hoverableStyle)({
+        idleBackground: colors_1.TRANSPARENT,
+        hoverBackground: colors_1.TRANSPARENT,
+        idleColor: colors_1.LIGHT_TEXT,
+        hoverColor: colors_1.WHITE,
+    }),
+    appearance: 'none',
+    border: 'none',
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    gap: 2,
+    margin: 0,
+    minWidth: 0,
+    padding: 0,
+    textAlign: 'left',
+};
+const imageAssetName = {
+    color: colors_1.WHITE,
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    lineHeight: '16px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const imageAssetSource = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 11,
+    lineHeight: '14px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
 exports.AssetSelectionContext = (0, react_1.createContext)({
     getSourceAction: () => null,
     sourceAction: null,
@@ -49,6 +118,7 @@ const toFileToken = (name) => {
 };
 exports.toFileToken = toFileToken;
 const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragValueChange, onDragEnd, }) => {
+    var _a, _b;
     if (field.fieldSchema.type !== 'asset') {
         throw new Error('TimelineAssetField rendered for non-asset field');
     }
@@ -73,6 +143,15 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
             onDragEnd();
         });
     }, [propStatus.codeValue, onDragValueChange, onSave, onDragEnd]);
+    const onSelectUrl = (0, react_1.useCallback)((url) => {
+        if (url === propStatus.codeValue) {
+            return;
+        }
+        onDragValueChange(url);
+        onSave(url).finally(() => {
+            onDragEnd();
+        });
+    }, [propStatus.codeValue, onDragValueChange, onDragEnd, onSave]);
     const selectFile = (0, react_1.useCallback)(async () => {
         const [file] = await (0, import_assets_1.pickFilesToImport)({
             multiple: false,
@@ -103,25 +182,85 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
         }
     }, [assetType, onSelect, staticFiles]);
     const openAssetSelection = (0, react_1.useCallback)(() => {
+        const assetSelection = {
+            initialQuery,
+            onSelectFile: () => {
+                selectFile().catch(() => undefined);
+            },
+            onSelected: (asset) => onSelect(asset.name, asset.src),
+        };
+        if (assetType !== undefined) {
+            const linkInfo = typeof effectiveValue === 'string'
+                ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(effectiveValue)
+                : null;
+            setSelectedModal({
+                type: 'asset-selection',
+                assetType,
+                initialUrl: (linkInfo === null || linkInfo === void 0 ? void 0 : linkInfo.kind) === 'remote' ? linkInfo.href : null,
+                invocationTimestamp: Date.now(),
+                assetSelection,
+                onSelectedUrl: onSelectUrl,
+            });
+            return;
+        }
         setSelectedModal({
             type: 'quick-switcher',
             mode: 'assets',
             invocationTimestamp: Date.now(),
-            assetSelection: {
-                initialQuery,
-                onSelectFile: () => {
-                    selectFile().catch(() => undefined);
-                },
-                onSelected: (asset) => onSelect(asset.name, asset.src),
-            },
+            assetSelection,
             compositionSelection: null,
         });
-    }, [initialQuery, onSelect, selectFile, setSelectedModal]);
+    }, [
+        assetType,
+        effectiveValue,
+        initialQuery,
+        onSelect,
+        onSelectUrl,
+        selectFile,
+        setSelectedModal,
+    ]);
     const action = (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openAssetSelection, disabled: window.remotion_isReadOnlyStudio, title: "Change source", renderAction: (color) => jsx_runtime_1.jsx(pen_1.PenIcon, { color: color, style: penIcon }) }));
+    if (assetType === 'image' && typeof effectiveValue === 'string') {
+        const linkInfo = (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(effectiveValue);
+        if (linkInfo !== null) {
+            let name;
+            let source;
+            let previewSrc;
+            if (linkInfo.kind === 'local') {
+                name = (_a = linkInfo.assetPath.split('/').pop()) !== null && _a !== void 0 ? _a : linkInfo.assetPath;
+                source = 'Project asset';
+                previewSrc = (0, remotion_1.staticFile)(linkInfo.assetPath);
+            }
+            else {
+                previewSrc = linkInfo.href.startsWith('//')
+                    ? `https:${linkInfo.href}`
+                    : linkInfo.href;
+                try {
+                    const url = new URL(previewSrc);
+                    const encodedName = url.pathname.split('/').filter(Boolean).pop();
+                    name = encodedName ? decodeURIComponent(encodedName) : url.hostname;
+                    source = url.hostname;
+                }
+                catch (_c) {
+                    name = 'Remote image';
+                    source = linkInfo.href;
+                }
+            }
+            const title = (_b = inlineSourceAction === null || inlineSourceAction === void 0 ? void 0 : inlineSourceAction.title) !== null && _b !== void 0 ? _b : linkInfo.title;
+            return (jsx_runtime_1.jsxs("div", { style: imageAssetField, children: [
+                    jsx_runtime_1.jsx("button", { "aria-label": `Replace ${name}`, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, disabled: window.remotion_isReadOnlyStudio, onClick: openAssetSelection, style: thumbnailButton, title: title, type: "button", children: jsx_runtime_1.jsx("img", { alt: "", src: previewSrc, style: thumbnail }) }), jsx_runtime_1.jsxs("button", { "aria-label": `Replace ${name}`, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, disabled: window.remotion_isReadOnlyStudio, onClick: openAssetSelection, style: imageAssetInfo, title: title, type: "button", children: [
+                            jsx_runtime_1.jsx("span", { style: imageAssetName, children: name }), jsx_runtime_1.jsx("span", { style: imageAssetSource, children: source })
+                        ] }), action] }));
+        }
+    }
     if (inlineSourceAction === null) {
         return action;
     }
     return (jsx_runtime_1.jsxs("div", { style: sourceActions, children: [
-            jsx_runtime_1.jsx(common_1.InspectorQuickAction, { ...inlineSourceAction, size: "compact", style: standaloneSourceActionStyle }), action] }));
+            jsx_runtime_1.jsx(common_1.InspectorQuickAction, { ...inlineSourceAction, disabled: assetType === undefined
+                    ? inlineSourceAction.disabled
+                    : window.remotion_isReadOnlyStudio, onClick: assetType === undefined
+                    ? inlineSourceAction.onClick
+                    : openAssetSelection, size: "compact", style: standaloneSourceActionStyle }), action] }));
 };
 exports.TimelineAssetField = TimelineAssetField;

package/dist/components/Timeline/TimelineDragHandler.js

@@ -279,8 +279,7 @@ const TimelineDragHandlerInner = () => {
             captureTarget: dragging.target,
             onMove: onPointerMoveScrubbing,
             onEnd: (reason, endEvent) => {
-                if ((reason === 'pointerup' || reason === 'buttons-released') &&
-                    endEvent) {
+                if ((0, pointer_session_1.isPointerSessionRelease)(reason, endEvent)) {
                     onPointerUpScrubbing(endEvent);
                 }
                 else {

package/dist/components/Timeline/TimelineEffectItem.d.ts

@@ -13,6 +13,7 @@ export declare const TimelineEffectItem: React.FC<{
     readonly validatedLocation: CodePosition;
     readonly rowDepth: number;
     readonly labelNextToToggle: boolean;
+    readonly revealInInspector: boolean;
     readonly getIsExpanded: GetIsExpanded;
     readonly toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
 }>;

package/dist/components/Timeline/TimelineEffectItem.js

@@ -75,7 +75,7 @@ const getEffectReorderDragData = (dataTransfer) => {
 const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
     return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
 };
-const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, documentationLink, nodePath, validatedLocation, rowDepth, labelNextToToggle, getIsExpanded, toggleTrack, }) => {
+const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, documentationLink, nodePath, validatedLocation, rowDepth, labelNextToToggle, revealInInspector, getIsExpanded, toggleTrack, }) => {
     var _a;
     var _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -83,7 +83,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
     const canMutateEffects = (0, browser_studio_operations_1.canUseEffectOperations)();
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo, revealInInspector);
     const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
     const [dropIndicator, setDropIndicator] = (0, react_1.useState)(null);
     const effectStatus = (0, react_1.useMemo)(() => remotion_1.Internals.getEffectPropStatusesCtx({

package/dist/components/Timeline/TimelineEffectPropItem.d.ts

@@ -19,5 +19,6 @@ export declare const TimelineEffectPropItem: React.FC<{
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly keyframeDisplayOffset: number;
     readonly keyframeControlsMode: TimelineKeyframeControlsMode;
+    readonly revealInInspector: boolean;
     readonly runtimeValueStore: RuntimeValueStore | null;
 }>;

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -232,7 +232,7 @@ const TimelineEffectPropValueAtCurrentFrame = ({ field, nodePath, validatedLocat
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     return (jsx_runtime_1.jsx(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: timelinePosition - keyframeDisplayOffset, runtimeValueStore: runtimeValueStore }));
 };
-const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, keyframeControlsMode, runtimeValueStore, }) => {
+const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, keyframeControlsMode, revealInInspector, runtimeValueStore, }) => {
     var _a;
     var _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -240,7 +240,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
-    const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo, revealInInspector);
     const style = (0, react_1.useMemo)(() => {
         return field.typeName === 'text-content'
             ? fieldRowBase

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -40,7 +40,7 @@ const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getI
         if (node.effectInfo) {
             return (
             // A single effect
-            jsx_runtime_1.jsx(TimelineEffectItem_1.TimelineEffectItem, { label: node.label, nodePathInfo: node.nodePathInfo, effectIndex: node.effectInfo.effectIndex, effectSchema: node.effectInfo.effectSchema, documentationLink: node.effectInfo.documentationLink, nodePath: nodePath, validatedLocation: validatedLocation, rowDepth: rowDepth, labelNextToToggle: isInspector, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack }));
+            jsx_runtime_1.jsx(TimelineEffectItem_1.TimelineEffectItem, { label: node.label, nodePathInfo: node.nodePathInfo, effectIndex: node.effectInfo.effectIndex, effectSchema: node.effectInfo.effectSchema, documentationLink: node.effectInfo.documentationLink, nodePath: nodePath, validatedLocation: validatedLocation, rowDepth: rowDepth, labelNextToToggle: isInspector, revealInInspector: !isInspector, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack }));
         }
         // Group like "Effects"
         const isExpanded = getIsExpanded(node.nodePathInfo);
@@ -50,7 +50,7 @@ const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getI
     }
     if (node.field) {
         if (node.field.kind === 'effect-field') {
-            return (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: isInspector ? rowDepth - 1 : rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode, runtimeValueStore: node.runtimeValueStore }));
+            return (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: isInspector ? rowDepth - 1 : rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode, revealInInspector: !isInspector, runtimeValueStore: node.runtimeValueStore }));
         }
         if (node.field.kind === 'sequence-field') {
             return (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequencePropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode, runtimeValue: node.runtimeValue }));

package/dist/components/Timeline/TimelineInOutDragHandler.js

@@ -279,8 +279,7 @@ const TimelineInOutDragHandlerInner = () => {
             captureTarget: inOutDragging.target,
             onMove: onPointerMoveInOut,
             onEnd: (reason, endEvent) => {
-                if ((reason === 'pointerup' || reason === 'buttons-released') &&
-                    endEvent) {
+                if ((0, pointer_session_1.isPointerSessionRelease)(reason, endEvent)) {
                     onPointerUpInOut(endEvent);
                 }
                 else {

package/dist/components/Timeline/TimelineSchemaField.js

@@ -47,6 +47,8 @@ const unsupportedStatusWrapper = {
     alignItems: 'center',
     display: 'inline-flex',
     gap: 4,
+    maxWidth: '100%',
+    minWidth: 0,
     userSelect: 'none',
     WebkitUserSelect: 'none',
 };
@@ -62,7 +64,11 @@ const computedValue = {
     fontFamily: 'Arial, Helvetica, sans-serif',
     fontSize: 12,
     lineHeight: '18px',
+    minWidth: 0,
+    overflow: 'hidden',
     pointerEvents: 'none',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
 };
 const fixLinkBase = {
     ...(0, hoverable_1.hoverableStyle)({
@@ -72,6 +78,7 @@ const fixLinkBase = {
         hoverColor: colors_1.WHITE,
     }),
     display: 'inline-block',
+    flexShrink: 0,
     fontSize: 10,
     fontStyle: 'normal',
     fontWeight: 600,
@@ -101,7 +108,7 @@ const UnsupportedStatus = ({ label, onFix, formattedValue }) => {
     const stopPointerPropagation = (event) => {
         event.stopPropagation();
     };
-    return (jsx_runtime_1.jsxs("span", { style: unsupportedStatusWrapper, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [
+    return (jsx_runtime_1.jsxs("span", { style: unsupportedStatusWrapper, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), title: formattedValue && typeof label === 'string' ? label : undefined, children: [
             jsx_runtime_1.jsx("span", { style: formattedValue ? computedValue : unsupportedLabel, inert: formattedValue, children: label }), onFix ? (jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME} ${hoverable_1.HOVERABLE_CLASS_NAME}`, style: fixLink, title: "Fix computed Studio value", onClick: (event) => {
                     stopMousePropagation(event);
                     onFix();

package/dist/components/Timeline/TimelineSelection.d.ts

@@ -91,6 +91,7 @@ export declare const extendTimelineMarqueeSelection: ({ currentSelection, marque
 }) => readonly CanvasSelectionItem[];
 type TimelineSelectionContextValue = {
     readonly canSelect: boolean;
+    readonly inspectorRevealRequest: TimelineSelectionRevealRequest | null;
     readonly revealRequest: TimelineSelectionRevealRequest | null;
     readonly selectedItems: readonly TimelineSelection[];
     readonly isSelected: (item: TimelineSelection) => boolean;
@@ -111,6 +112,7 @@ export declare const TimelineSelectionOrderProvider: React.FC<{
 }>;
 type TimelineSelectionOptions = {
     readonly reveal?: boolean;
+    readonly revealInInspector?: boolean;
 };
 type TimelineSelectionRevealRequest = {
     readonly item: TimelineSelection;
@@ -152,7 +154,7 @@ export declare const useTimelineMarqueeSelection: () => {
     onPointerDownCapture: (event: React.PointerEvent<HTMLDivElement>) => void;
 };
 export declare const useTimelineMarqueeSelectableItem: (item: CanvasSelectionItem | null, ref: React.RefObject<Element | null>) => void;
-export declare const useTimelineRowSelection: (nodePathInfo: SequenceNodePathInfo | null) => {
+export declare const useTimelineRowSelection: (nodePathInfo: SequenceNodePathInfo | null, revealInInspector?: boolean) => {
     onSelect: (interaction?: CanvasSelectionInteraction | undefined) => void;
     selectable: boolean;
     selectionItem: CanvasSelectionItem | null;