@brightspot/ui 6.8.2 → 6.8.3-rc.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [6.8.3](https://github.com/perfectsense/platform-ui/compare/v6.8.2...v6.8.3) (2026-11-06)
+
+
+### Bug Fixes
+
+* account for query restriction filters in search results grid (BSP-20571) ([#410](https://github.com/perfectsense/platform-ui/issues/410)) ([81ac984](https://github.com/perfectsense/platform-ui/commit/81ac9843d0163edf3d4c986a504d87ccc4a555cf))
+* add save conflict compare changes popup BSP-20655 ([#415](https://github.com/perfectsense/platform-ui/issues/415)) ([3049e0d](https://github.com/perfectsense/platform-ui/commit/3049e0db2a4bc900b2ebca8ba90e5f5f5adb978e))
+* BSP-19543 keep the RTE overflow button clear of the character count ([#313](https://github.com/perfectsense/platform-ui/issues/313)) ([a1bdb3e](https://github.com/perfectsense/platform-ui/commit/a1bdb3ecc63ce4bc89eab25b1c33b420b8cad78d))
+* BSP-20373 CMS UI: Modal dropdowns are positioned off-screen below 768px viewport width ([#407](https://github.com/perfectsense/platform-ui/issues/407)) ([ed1eef3](https://github.com/perfectsense/platform-ui/commit/ed1eef36e1bacc2c46a8d899e05ccbd0ce9664e3))
+* BSP-20478 keep Plyr video controls inside the CMS preview frame ([#389](https://github.com/perfectsense/platform-ui/issues/389)) ([a0615a1](https://github.com/perfectsense/platform-ui/commit/a0615a1fa3c7649aab10d26c648cdcc9665d3617))
+* BSP-20569 Popup Is Clipped in String Fields When Using a Rich-Text Toolbar ([#414](https://github.com/perfectsense/platform-ui/issues/414)) ([c306467](https://github.com/perfectsense/platform-ui/commit/c306467c75d6dee6da4e51ed91e84af7bbe8a5e1))
+* BSP-20598 Version compare: details popup for changed rich-text enhancements never loads ([#418](https://github.com/perfectsense/platform-ui/issues/418)) ([812e684](https://github.com/perfectsense/platform-ui/commit/812e6847135822af06c5720f35430a5ea1c019b8))
+* BSP-20613 Long display name makes object picker unusable ([#431](https://github.com/perfectsense/platform-ui/issues/431)) ([72a3ce8](https://github.com/perfectsense/platform-ui/commit/72a3ce80ded747c3cd3bc68ab5301f636eabf3c4))
+* enable keyboard scrolling for content preview frames (BSP-18252) ([#329](https://github.com/perfectsense/platform-ui/issues/329)) ([2be27d8](https://github.com/perfectsense/platform-ui/commit/2be27d8493d979c0b17f39c38229da85dd992979))
+* focus login input on page load (BSP-20356) ([#357](https://github.com/perfectsense/platform-ui/issues/357)) ([83e7bdc](https://github.com/perfectsense/platform-ui/commit/83e7bdc8b1038822cd7ea1e8a7bb9e50641ac896))
+* hide avatar background behind transparent uploaded images (BSP-17436) ([#368](https://github.com/perfectsense/platform-ui/issues/368)) ([3c1215a](https://github.com/perfectsense/platform-ui/commit/3c1215a627ff8fc1f72c0456a4858f285a050ea6))
+* restore content-type filter focus in fullscreen search (BSP-20245) ([#417](https://github.com/perfectsense/platform-ui/issues/417)) ([b28b02d](https://github.com/perfectsense/platform-ui/commit/b28b02da15fc1651a10b2a8fc9e3d7da564c0434))
+* RTE toolbar keyboard accessibility BSP-16135 ([#326](https://github.com/perfectsense/platform-ui/issues/326)) ([82ee758](https://github.com/perfectsense/platform-ui/commit/82ee758a098e94e689cd300a96761a6667bb1521))
+
 ## [6.8.2](https://github.com/perfectsense/platform-ui/compare/v6.8.1...v6.8.2) (2026-11-01)
 
 

package/dist/storybook/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [6.8.3](https://github.com/perfectsense/platform-ui/compare/v6.8.2...v6.8.3) (2026-11-06)
+
+
+### Bug Fixes
+
+* account for query restriction filters in search results grid (BSP-20571) ([#410](https://github.com/perfectsense/platform-ui/issues/410)) ([81ac984](https://github.com/perfectsense/platform-ui/commit/81ac9843d0163edf3d4c986a504d87ccc4a555cf))
+* add save conflict compare changes popup BSP-20655 ([#415](https://github.com/perfectsense/platform-ui/issues/415)) ([3049e0d](https://github.com/perfectsense/platform-ui/commit/3049e0db2a4bc900b2ebca8ba90e5f5f5adb978e))
+* BSP-19543 keep the RTE overflow button clear of the character count ([#313](https://github.com/perfectsense/platform-ui/issues/313)) ([a1bdb3e](https://github.com/perfectsense/platform-ui/commit/a1bdb3ecc63ce4bc89eab25b1c33b420b8cad78d))
+* BSP-20373 CMS UI: Modal dropdowns are positioned off-screen below 768px viewport width ([#407](https://github.com/perfectsense/platform-ui/issues/407)) ([ed1eef3](https://github.com/perfectsense/platform-ui/commit/ed1eef36e1bacc2c46a8d899e05ccbd0ce9664e3))
+* BSP-20478 keep Plyr video controls inside the CMS preview frame ([#389](https://github.com/perfectsense/platform-ui/issues/389)) ([a0615a1](https://github.com/perfectsense/platform-ui/commit/a0615a1fa3c7649aab10d26c648cdcc9665d3617))
+* BSP-20569 Popup Is Clipped in String Fields When Using a Rich-Text Toolbar ([#414](https://github.com/perfectsense/platform-ui/issues/414)) ([c306467](https://github.com/perfectsense/platform-ui/commit/c306467c75d6dee6da4e51ed91e84af7bbe8a5e1))
+* BSP-20598 Version compare: details popup for changed rich-text enhancements never loads ([#418](https://github.com/perfectsense/platform-ui/issues/418)) ([812e684](https://github.com/perfectsense/platform-ui/commit/812e6847135822af06c5720f35430a5ea1c019b8))
+* BSP-20613 Long display name makes object picker unusable ([#431](https://github.com/perfectsense/platform-ui/issues/431)) ([72a3ce8](https://github.com/perfectsense/platform-ui/commit/72a3ce80ded747c3cd3bc68ab5301f636eabf3c4))
+* enable keyboard scrolling for content preview frames (BSP-18252) ([#329](https://github.com/perfectsense/platform-ui/issues/329)) ([2be27d8](https://github.com/perfectsense/platform-ui/commit/2be27d8493d979c0b17f39c38229da85dd992979))
+* focus login input on page load (BSP-20356) ([#357](https://github.com/perfectsense/platform-ui/issues/357)) ([83e7bdc](https://github.com/perfectsense/platform-ui/commit/83e7bdc8b1038822cd7ea1e8a7bb9e50641ac896))
+* hide avatar background behind transparent uploaded images (BSP-17436) ([#368](https://github.com/perfectsense/platform-ui/issues/368)) ([3c1215a](https://github.com/perfectsense/platform-ui/commit/3c1215a627ff8fc1f72c0456a4858f285a050ea6))
+* restore content-type filter focus in fullscreen search (BSP-20245) ([#417](https://github.com/perfectsense/platform-ui/issues/417)) ([b28b02d](https://github.com/perfectsense/platform-ui/commit/b28b02da15fc1651a10b2a8fc9e3d7da564c0434))
+* RTE toolbar keyboard accessibility BSP-16135 ([#326](https://github.com/perfectsense/platform-ui/issues/326)) ([82ee758](https://github.com/perfectsense/platform-ui/commit/82ee758a098e94e689cd300a96761a6667bb1521))
+
 ## [6.8.2](https://github.com/perfectsense/platform-ui/compare/v6.8.1...v6.8.2) (2026-11-01)
 
 

package/dist/storybook/llms-full.txt

@@ -1,8 +1,8 @@
 # Brightspot UI
 
-> `@brightspot/ui` 6.8.2: Lit web components (`btu-*` tags) and a TailwindCSS v3 preset for building Brightspot CMS screens and plugins.
+> `@brightspot/ui` 6.8.3-rc.1: Lit web components (`btu-*` tags) and a TailwindCSS v3 preset for building Brightspot CMS screens and plugins.
 
-These docs describe 6.8.2. Prefer them over what you remember about this library, because component APIs change between minor versions. For the version a project actually uses, read `node_modules/@brightspot/ui/llms.txt` in that project. Releases without that file still have their manifest at `https://cdn.jsdelivr.net/npm/@brightspot/ui@<version>/dist/custom-elements.json`.
+These docs describe 6.8.3-rc.1. Prefer them over what you remember about this library, because component APIs change between minor versions. For the version a project actually uses, read `node_modules/@brightspot/ui/llms.txt` in that project. Releases without that file still have their manifest at `https://cdn.jsdelivr.net/npm/@brightspot/ui@<version>/dist/custom-elements.json`.
 
 Components render in the light DOM, not a shadow root. In HTML, use the attribute names from each component page: many differ from the JavaScript property names, for example `heading-level` for `headingLevel`.
 
@@ -52,10 +52,10 @@ The guide and component pages linked below are markdown.
 
 Each link is a plugin source file; its header comment lists the classes.
 
-- [Button](https://cdn.jsdelivr.net/npm/@brightspot/ui@6.8.2/dist/tailwind-plugin-button.ts): Buttons communicate actions that users can take such as submit a form, begin a new task, trigger a new UI element to appear or take a new or next step in some process
-- [Heading](https://cdn.jsdelivr.net/npm/@brightspot/ui@6.8.2/dist/tailwind-plugin-heading.ts): Headings are a combination of font-size, line-height and weight
-- [Scroll Shadow](https://cdn.jsdelivr.net/npm/@brightspot/ui@6.8.2/dist/tailwind-plugin-scroll-shadow.ts): This plugin adds shadows to the edges of a scrollable container when the content of the container overflows
-- [Icon](https://cdn.jsdelivr.net/npm/@brightspot/ui@6.8.2/dist/tailwind-plugin-icon.ts): Lucide icons as classes, for example `before:btu-icon before:btu-icon-heart`, plus size and gradient modifiers
+- [Button](https://cdn.jsdelivr.net/npm/@brightspot/ui@6.8.3-rc.1/dist/tailwind-plugin-button.ts): Buttons communicate actions that users can take such as submit a form, begin a new task, trigger a new UI element to appear or take a new or next step in some process
+- [Heading](https://cdn.jsdelivr.net/npm/@brightspot/ui@6.8.3-rc.1/dist/tailwind-plugin-heading.ts): Headings are a combination of font-size, line-height and weight
+- [Scroll Shadow](https://cdn.jsdelivr.net/npm/@brightspot/ui@6.8.3-rc.1/dist/tailwind-plugin-scroll-shadow.ts): This plugin adds shadows to the edges of a scrollable container when the content of the container overflows
+- [Icon](https://cdn.jsdelivr.net/npm/@brightspot/ui@6.8.3-rc.1/dist/tailwind-plugin-icon.ts): Lucide icons as classes, for example `before:btu-icon before:btu-icon-heart`, plus size and gradient modifiers
 
 ## Optional
 

package/dist/storybook/llms.txt

@@ -1,8 +1,8 @@
 # Brightspot UI
 
-> `@brightspot/ui` 6.8.2: Lit web components (`btu-*` tags) and a TailwindCSS v3 preset for building Brightspot CMS screens and plugins.
+> `@brightspot/ui` 6.8.3-rc.1: Lit web components (`btu-*` tags) and a TailwindCSS v3 preset for building Brightspot CMS screens and plugins.
 
-These docs describe 6.8.2. Prefer them over what you remember about this library, because component APIs change between minor versions. For the version a project actually uses, read `node_modules/@brightspot/ui/llms.txt` in that project. Releases without that file still have their manifest at `https://cdn.jsdelivr.net/npm/@brightspot/ui@<version>/dist/custom-elements.json`.
+These docs describe 6.8.3-rc.1. Prefer them over what you remember about this library, because component APIs change between minor versions. For the version a project actually uses, read `node_modules/@brightspot/ui/llms.txt` in that project. Releases without that file still have their manifest at `https://cdn.jsdelivr.net/npm/@brightspot/ui@<version>/dist/custom-elements.json`.
 
 Components render in the light DOM, not a shadow root. In HTML, use the attribute names from each component page: many differ from the JavaScript property names, for example `heading-level` for `headingLevel`.
 
@@ -52,10 +52,10 @@ The guide and component pages linked below are markdown.
 
 Each link is a plugin source file; its header comment lists the classes.
 
-- [Button](https://cdn.jsdelivr.net/npm/@brightspot/ui@6.8.2/dist/tailwind-plugin-button.ts): Buttons communicate actions that users can take such as submit a form, begin a new task, trigger a new UI element to appear or take a new or next step in some process
-- [Heading](https://cdn.jsdelivr.net/npm/@brightspot/ui@6.8.2/dist/tailwind-plugin-heading.ts): Headings are a combination of font-size, line-height and weight
-- [Scroll Shadow](https://cdn.jsdelivr.net/npm/@brightspot/ui@6.8.2/dist/tailwind-plugin-scroll-shadow.ts): This plugin adds shadows to the edges of a scrollable container when the content of the container overflows
-- [Icon](https://cdn.jsdelivr.net/npm/@brightspot/ui@6.8.2/dist/tailwind-plugin-icon.ts): Lucide icons as classes, for example `before:btu-icon before:btu-icon-heart`, plus size and gradient modifiers
+- [Button](https://cdn.jsdelivr.net/npm/@brightspot/ui@6.8.3-rc.1/dist/tailwind-plugin-button.ts): Buttons communicate actions that users can take such as submit a form, begin a new task, trigger a new UI element to appear or take a new or next step in some process
+- [Heading](https://cdn.jsdelivr.net/npm/@brightspot/ui@6.8.3-rc.1/dist/tailwind-plugin-heading.ts): Headings are a combination of font-size, line-height and weight
+- [Scroll Shadow](https://cdn.jsdelivr.net/npm/@brightspot/ui@6.8.3-rc.1/dist/tailwind-plugin-scroll-shadow.ts): This plugin adds shadows to the edges of a scrollable container when the content of the container overflows
+- [Icon](https://cdn.jsdelivr.net/npm/@brightspot/ui@6.8.3-rc.1/dist/tailwind-plugin-icon.ts): Lucide icons as classes, for example `before:btu-icon before:btu-icon-heart`, plus size and gradient modifiers
 
 ## Optional
 

package/dist/storybook/project.json

@@ -1 +1 @@
-{"generatedAt":1793577198764,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"knownPackages":{"testPackages":{"@storybook/addon-vitest":"10.2.12","@vitest/browser-playwright":"4.1.11","playwright":"1.58.2","vitest":"4.1.11"},"stylingPackages":{"tailwindcss":"^3.4.13","autoprefixer":"10.4.21"}},"hasRouterPackage":false,"packageManager":{"type":"yarn","agent":"yarn","nodeLinker":"undefined"},"preview":{"usesGlobals":true},"framework":{"name":"@storybook/web-components-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/web-components","portableStoriesFileCount":0,"applicationFileCount":6,"storybookVersion":"10.2.12","storybookVersionSpecifier":"10.2.12","language":"typescript","storybookPackages":{"@storybook/addon-themes":{"version":"10.2.12"},"@storybook/web-components-vite":{"version":"10.2.12"},"@wc-toolkit/storybook-helpers":{"version":"10.0.0"},"eslint-plugin-storybook":{"version":"10.0.7"},"storybook":{}},"addons":{"@storybook/addon-docs":{"version":"10.2.12"},"@storybook/addon-vitest":{"version":"10.2.12"}},"packageJsonType":"module"}
+{"generatedAt":1793991007946,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"knownPackages":{"testPackages":{"@storybook/addon-vitest":"10.2.12","@vitest/browser-playwright":"4.1.11","playwright":"1.58.2","vitest":"4.1.11"},"stylingPackages":{"tailwindcss":"^3.4.13","autoprefixer":"10.4.21"}},"hasRouterPackage":false,"packageManager":{"type":"yarn","agent":"yarn","nodeLinker":"undefined"},"preview":{"usesGlobals":true},"framework":{"name":"@storybook/web-components-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/web-components","portableStoriesFileCount":0,"applicationFileCount":6,"storybookVersion":"10.2.12","storybookVersionSpecifier":"10.2.12","language":"typescript","storybookPackages":{"@storybook/addon-themes":{"version":"10.2.12"},"@storybook/web-components-vite":{"version":"10.2.12"},"@wc-toolkit/storybook-helpers":{"version":"10.0.0"},"eslint-plugin-storybook":{"version":"10.0.7"},"storybook":{}},"addons":{"@storybook/addon-docs":{"version":"10.2.12"},"@storybook/addon-vitest":{"version":"10.2.12"}},"packageJsonType":"module"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspot/ui",
-  "version": "6.8.2",
+  "version": "6.8.3-rc.1",
   "type": "module",
   "license": "UNLICENSED",
   "description": "A UI library for building Brightspot CMS components.",

package/src/legacy/tool-ui/src/Avatar.css

@@ -29,3 +29,12 @@
 .ToolUserAvatar {
   @apply avatar shrink-0;
 }
+
+/* Uploaded images can have transparency, so drop the initials and background that would show through. */
+.ToolUserAvatar--image {
+  @apply bg-transparent hover:bg-transparent;
+
+  > span {
+    @apply hidden;
+  }
+}

package/src/legacy/tool-ui/src/ContentInputGroup.css

@@ -574,6 +574,18 @@
     @apply pointer-events-auto;
   }
 
+  /* A media preview in a note isn't the field's value: its seek and volume
+     sliders must stay usable. Locked content blocks the whole .CIG-note, so
+     restore the frame itself. The sliders inherit rather than force auto so
+     the player can still disable its hidden controls. */
+  .TimedContentPlayerNote-player-frame {
+    @apply pointer-events-auto;
+  }
+
+  .TimedContentPlayerNote-player-frame input[type] {
+    pointer-events: inherit;
+  }
+
   .CIG-note :where(a, button, [role='button'], btu-legacy-copy-to-clipboard) {
     @apply pointer-events-auto cursor-pointer;
   }

package/src/legacy/tool-ui/src/ContentSummary.css

@@ -137,7 +137,7 @@ a.is-active + .ContentSummary-info {
 }
 
 .ContentSummary-preview {
-  @apply bg-gray-100 p-1 [grid-area:preview];
+  @apply overflow-hidden bg-gray-100 p-1 [grid-area:preview];
 }
 
 @scope (.ContentSummary-preview) {
@@ -149,6 +149,16 @@ a.is-active + .ContentSummary-info {
   .PreviewFrame-types {
     @apply hidden;
   }
+
+  /* Size the frame to its reported content height so the wrapper scrolls it
+     (keyboard-accessible) instead of scrolling inside the cross-origin frame. */
+  & .PreviewFrame-typeDisplay {
+    @apply overflow-y-auto overflow-x-hidden;
+  }
+
+  & .PreviewFrame-typeDisplay > iframe[name^='PreviewFrame-preview'] {
+    @apply h-[var(--PreviewFrame-height,100%)] w-full;
+  }
 }
 
 @media (min-width: theme(screens.sm)) {

package/src/legacy/tool-ui/src/ContentSummary.ts

@@ -221,3 +221,27 @@ function iframePostMessage(node: HTMLIFrameElement) {
     )
   }
 }
+
+// The summary preview (cross-origin, inert) reports its content height so the
+// frame can be sized to it and the wrapper — not the frame — becomes the
+// keyboard scroll container (see ContentSummary.css / ViewPreview.js).
+window.addEventListener('message', ({ data, source }) => {
+  if (
+    typeof data !== 'object' ||
+    data?.type !== 'BSP.Preview.ContentSummaryHeight' ||
+    typeof data.height !== 'number' ||
+    !isFinite(data.height)
+  ) {
+    return
+  }
+  document
+    .querySelectorAll<HTMLIFrameElement>(
+      ".ContentSummary-preview iframe[name^='PreviewFrame-preview']",
+    )
+    .forEach((frame) => {
+      if (frame.contentWindow !== source) return
+      frame
+        .closest<HTMLElement>('.PreviewFrame-typeDisplay')
+        ?.style.setProperty('--PreviewFrame-height', `${data.height}px`)
+    })
+})

package/src/legacy/tool-ui/src/Dialog.css

@@ -89,11 +89,13 @@ dialog:modal {
     --padding: ; /* no padding for right-aligned popups. margin is necessary here. */
     @apply [margin-inline-start:auto] [transition:_display_0.3s_allow-discrete,_overlay_0.3s_allow-discrete,_opacity_0.25s_0.3s,_translate_0.25s_cubic-bezier(0.9,0,0.1,1)_0.3s] [translate:0_0] md:[inline-size:70vw] md:[margin-inline-end:0] [@starting-style]:[translate:45dvw_0];
 
-    /* Dropdown lists inside of right-aligned modals need to be shifted over. */
+    /* scale/translate make this modal the containing block for fixed
+       dropdowns, so shift them by the modal's offset, which only exists while
+       it is 70vw wide (md and up). */
     .Dropdown,
     .ComboInput-list {
       &[data-tether-rx='l'] {
-        @apply /*rtl:ignore*/ left-[calc(var(--Tether-rl)-30vw)];
+        @apply /*rtl:ignore*/ md:left-[calc(var(--Tether-rl)-30vw)];
       }
     }
   }
@@ -140,9 +142,11 @@ dialog:modal > .QueryField-frame > .Popup:where(:not([popover])) {
       > .Popup-content > :where(.frame.is-transitioned, .ContentSummary.is-open)
     ),
   &.PrePublish.is-visible,
+  &.popup-show.is-diff,
   &.popup-show[data-popup-source-class^='rte2'],
   &.popup-show[name='queryfield' i],
-  &.popup-show:has(.Paste-popup) {
+  &.popup-show:has(.Paste-popup),
+  &.popup-show.is-diff {
     @apply before:scale-[2] before:opacity-0;
   }
 
@@ -290,6 +294,12 @@ dialog:modal > .QueryField-frame > .Popup:where(:not([popover])) {
     @apply btu-heading-4 col-start-1 flex min-w-0 content-center items-center gap-2 border-b-0 py-[.88rem] ps-6 text-gray-900;
   }
 
+  /* The object picker heading includes the edited object's label, which can be
+     long enough to push the results out of view. Block so the ellipsis renders. */
+  .Popup-content > .SearchWidget-title {
+    @apply blokk truncate;
+  }
+
   .Popup-close {
     @apply my-[.88rem] me-6 ms-2;
   }
@@ -358,7 +368,8 @@ dialog:modal > {
   .Popup[name^='contentEnhancement'],
   .Popup.ContentSummary-popup,
   .Popup[name='searchFields'],
-  .Popup[name='edit-guide'] {
+  .Popup[name='edit-guide'],
+  .Popup.is-diff {
     @apply __modal-popup-lg;
   }
 }

package/src/legacy/tool-ui/src/Diff.css

@@ -42,11 +42,21 @@
   @apply w-1/2 min-w-[400px] overflow-clip bg-white;
 }
 
+/* Span the diff popup content under the close button column too */
+.Popup.is-diff > .Popup-content > .plugin-popup {
+  @apply col-span-full;
+}
+
 /* Hide full-width "Back" bar in favor of the close popup "X" icon */
 .Diff-title {
   @apply hidden;
 }
 
+/* Rich text enhancement diff popup: the body spans the dialog grid like a popup frame does */
+#rtediff {
+  @apply col-span-full;
+}
+
 .Diff-container {
   @apply max-h-[calc(100cqh_-_var(--page-header-h,_68px)_+_3px)] overflow-auto;
 }
@@ -278,3 +288,9 @@
 .Diff-row .CIG-label {
   @apply mb-2 text-xs font-medium text-gray-500;
 }
+
+/* Save conflict "Compare Changes" button in the error message */
+.ContentConflict-compare.Link {
+  /* Inline, not flex, so the underline skips the icon */
+  @apply ms-4 inline whitespace-nowrap before:me-1 before:align-middle before:btu-icon before:btu-icon-git-compare before:btu-icon-xs;
+}

package/src/legacy/tool-ui/src/Diff.ts

@@ -1,14 +1,63 @@
 import Cookies from 'js-cookie'
 import create from './dom/create'
 import onFind from './dom/onFind'
-type DiffFormPostFields = 'left' | 'right'
-
-interface DiffFormPostData extends FormData {
-  append(
-    name: DiffFormPostFields,
-    value: string | Blob,
-    fileName?: string,
-  ): void
+type DiffFormPostFields =
+  | 'left'
+  | 'right'
+  | 'leftLabel'
+  | 'rightLabel'
+  | 'conflictId'
+  | 'conflictChanges'
+
+// Posts the given parameters to the diff page and shows the result in a popup.
+async function openDiffPopup(
+  parameters: Partial<Record<DiffFormPostFields, string>>,
+  title?: string,
+) {
+  // Closing the diff popup if one is already open to prevent close button weirdness
+  $('.is-diff').popup('close')
+  const headers = new Headers()
+  const cookie = Cookies.get('bsp.csrf')
+
+  if (cookie) {
+    headers.append('Brightspot-CSRF', cookie)
+  }
+
+  const body = new FormData()
+
+  Object.entries(parameters).forEach(([name, value]) => {
+    if (value) body.append(name, value)
+  })
+
+  try {
+    const response = await fetch('/cms/diffRevision', {
+      method: 'POST',
+      headers,
+      body,
+    })
+    const itemHtml = await response.text()
+
+    document.getElementById('rtediff')?.remove()
+
+    const container = create('div')
+    container.id = 'rtediff'
+    document.body.appendChild(container)
+    container.innerHTML = itemHtml
+
+    // Leads the column headings so it's the one shown as the popup title.
+    if (title) {
+      const heading = create('h1')
+      heading.textContent = title
+      container.prepend(heading)
+    }
+
+    const jqueryContainer = $(container).popup()
+    // Attaching marker class to popup for cleanup if the user clicks on a clickable diff field
+    jqueryContainer.popup('container').addClass('is-diff')
+    jqueryContainer.popup('open')
+  } catch (err) {
+    console.error(err)
+  }
 }
 
 // Closes Diff popup when clicking title
@@ -47,43 +96,25 @@ onFind('[data-diff-state-id]', (element: HTMLElement) => {
       return
     }
 
-    element.addEventListener('click', async (evt) => {
-      // Closing the diff popup if one is already open to prevent close button weirdness
-      $('.is-diff').popup('close')
-      // If one side has no change the diffs array value can be undefined.  We are checking for that here.
-      const headers = new Headers()
-      const cookie = Cookies.get('bsp.csrf')
-
-      if (cookie) {
-        headers.append('Brightspot-CSRF', cookie)
-      }
-
-      const body: DiffFormPostData = new FormData()
-      body.append('left', diffLeftState)
-      body.append('right', diffRightState)
-
-      try {
-        const response = await fetch('/cms/diffRevision', {
-          method: 'POST',
-          headers,
-          body,
-        })
-        const itemHtml = await response.text()
-
-        document.getElementById('rtediff')?.remove()
-
-        const container = create('div')
-        container.id = 'rtediff'
-        document.body.appendChild(container)
-        container.innerHTML = itemHtml
-
-        const jqueryContainer = $(container).popup()
-        // Attaching marker class to popup for cleanup if the user clicks on a clickable diff field
-        jqueryContainer.popup('container').addClass('is-diff')
-        jqueryContainer.popup('open')
-      } catch (err) {
-        console.error(err)
-      }
+    element.addEventListener('click', () => {
+      openDiffPopup({ left: diffLeftState, right: diffRightState })
     })
   }
 })
+
+// Save conflict: shows what saving again would change in the latest saved version
+onFind('[data-conflict-diff-id]', (element: HTMLElement) => {
+  element.addEventListener('click', () => {
+    const { dataset } = element
+
+    openDiffPopup(
+      {
+        conflictId: dataset.conflictDiffId,
+        conflictChanges: dataset.conflictDiffChanges,
+        leftLabel: dataset.conflictDiffLeftLabel,
+        rightLabel: dataset.conflictDiffRightLabel,
+      },
+      element.textContent?.trim(),
+    )
+  })
+})

package/src/legacy/tool-ui/src/MenuView.css

@@ -7,14 +7,19 @@
 }
 
 .ProseMirrorToolbar {
+  /* Must match the word-count inset for the same icon count, or content lays out under it. */
   --ProseMirrorToolbar-rightControls: 3.75rem;
 
-  &:has(+ .ProseMirror:focus) {
-    @apply border-primary-600;
+  &[data-sidebar-icon-count='2'] {
+    --ProseMirrorToolbar-rightControls: 5.75rem;
   }
 
-  &:has(.rte2-toolbar-find) {
-    --ProseMirrorToolbar-rightControls: 5.75rem;
+  &[data-sidebar-icon-count='3'] {
+    --ProseMirrorToolbar-rightControls: 8rem;
+  }
+
+  &:has(+ .ProseMirror:focus) {
+    @apply border-primary-600;
   }
 
   > ul {

package/src/legacy/tool-ui/src/ProseMirrorEnhancementMenu.css

@@ -1,9 +1,17 @@
 .ProsemirrorEnhancementMenuContainer {
   @apply absolute hidden;
 
-  &.open {
+  /* A popover's visibility follows its popover state, which the browser
+    clears when the editor is moved (e.g. into fullscreen). */
+  &.open:not([popover]) {
     @apply blokk;
   }
+
+  /* Top layer escapes the clipping .ProseMirrorContainer; anchor positioning
+    flips it above the enhancement when there is no room below. */
+  &:popover-open {
+    @apply blokk inset-auto m-0 mt-1 overflow-visible border-0 bg-transparent p-0 text-inherit [position-area:bottom_span-right] [position-try-fallbacks:flip-block,flip-inline] [position-visibility:anchors-visible];
+  }
 }
 
 .ProsemirrorEnhancementMenu-container {

package/src/legacy/tool-ui/src/SearchResult.css

@@ -7,7 +7,7 @@
   --pagination-h: 80px;
   --actions-button-w: 0px;
 
-  @apply relative grid h-full w-full grid-cols-[auto_auto_auto_auto_minmax(0px,1fr)_auto_auto_var(--actions-button-w)_12px] grid-rows-[var(--search-controls-h)_minmax(0px,1fr)_var(--pagination-h)] items-center overflow-hidden bg-gray-50 [grid-area:results] [grid-template-areas:'toggle_sorts_fields_watching_._size-toggle_views_actions_.''results_results_results_results_results_results_results_results_results''limit_limit_limit_limit_pagination_pagination_pagination_pagination_pagination'];
+  @apply relative grid h-full w-full grid-cols-[auto_auto_auto_auto_minmax(0px,1fr)_auto_auto_var(--actions-button-w)_12px] grid-rows-[var(--search-controls-h)_minmax(0px,1fr)_var(--pagination-h)] items-center overflow-hidden bg-gray-50 [grid-area:results] [grid-template-areas:'toggle_sorts_fields_query-restrictions_._size-toggle_views_actions_.''results_results_results_results_results_results_results_results_results''limit_limit_limit_limit_pagination_pagination_pagination_pagination_pagination'];
 
   &:has(.SearchResult-pagination) {
     @apply after:absolute after:z-0 after:col-span-full after:row-[3/4] after:h-full after:w-full after:bg-white;
@@ -43,7 +43,7 @@
   .SearchResult {
     --fullscreen-button-w: calc(36px + 4px + 12px);
 
-    @apply grid-cols-[auto_auto_auto_minmax(0px,1fr)_auto_auto_var(--actions-button-w)_var(--fullscreen-button-w)_var(--popup-close-w)] [grid-template-areas:'toggle_sorts_fields_._size-toggle_views_actions_fullscreen_close''results_results_results_results_results_results_results_results_results''limit_limit_limit_pagination_pagination_pagination_pagination_pagination_pagination'];
+    @apply grid-cols-[auto_auto_auto_auto_minmax(0px,1fr)_auto_auto_var(--actions-button-w)_var(--fullscreen-button-w)_var(--popup-close-w)] [grid-template-areas:'toggle_sorts_fields_query-restrictions_._size-toggle_views_actions_fullscreen_close''results_results_results_results_results_results_results_results_results_results''limit_limit_limit_pagination_pagination_pagination_pagination_pagination_pagination_pagination'];
   }
 }
 
@@ -377,7 +377,7 @@
 
 /* "Watching?" checkbox appears on some Search Widgets */
 .SearchResult-query {
-  @apply mx-1 opacity-[var(--controls-opacity,_1)] transition-opacity [grid-area:watching];
+  @apply mx-1 opacity-[var(--controls-opacity,_1)] transition-opacity [grid-area:query-restrictions];
 }
 
 /* Allows image height controls */

package/src/legacy/tool-ui/src/TimedContent.css

@@ -24,13 +24,17 @@
 }
 
 .TimedContentPlayerNote-player-frame {
-  @apply flex h-[250px] w-[350px] max-w-full items-center justify-center overflow-hidden rounded-lg border border-gray-300 bg-gray-50;
+  @apply flex h-[250px] w-[350px] max-w-full items-center justify-center overflow-hidden rounded-lg border border-gray-300 bg-gray-50 [container-type:size];
 }
 
 .TimedContentPlayerNote-player-frame .frame {
   @apply flex-grow;
 }
 
+.TimedContentPlayerNote-player-frame video:not(:fullscreen, :fullscreen *) {
+  @apply max-h-[100cqh] object-contain;
+}
+
 .TimedContentPlayerNote-player-close {
   @apply btu-button btu-button-text-hidden btu-button-outline btu-button-fill-none btu-button-gray btu-button-xs absolute -top-[34px] right-0 cursor-pointer before:btu-icon before:btu-icon-x;
 }

package/src/legacy/tool-ui/src/ViewPreview.css

@@ -38,6 +38,17 @@
   @apply inset-0 z-10 size-full;
 }
 
+.PreviewFrame-typeDisplay:focus {
+  @apply outline-none;
+}
+
+/* The wrapper is the keyboard focus + scroll target in both the edit page and
+   the Quick View popup. Outset outline, not an inset ring: the iframe fills the
+   wrapper and would paint over anything drawn inside it. */
+.PreviewFrame-typeDisplay:focus-visible {
+  @apply outline-2 outline-offset-2 outline-primary-600;
+}
+
 .PreviewFrame-previewToEditToggle {
   @apply me-auto mt-4 flex whitespace-nowrap;
 

package/src/legacy/tool-ui/src/ViewWatchers.css

@@ -56,7 +56,7 @@
 }
 
 /* Keeps default bg color on hover of non-interactive avatar */
-.ViewWatchers-item-avatar .ToolUserAvatar {
+.ViewWatchers-item-avatar .ToolUserAvatar:not(.ToolUserAvatar--image) {
   @apply hover:bg-purple-600;
 }
 

package/src/legacy/tool-ui/src/Viewers.css

@@ -11,7 +11,16 @@
 
     .Avatar {
       --avatar-size: theme('avatar.size.xs');
-      @apply border-[1.5px] border-white dark:bg-[oklch(from_var(--avatar-bg-color)_calc(l_*_1.6)_c_h)];
+      @apply border-[1.5px] border-white;
+    }
+
+    .Avatar:not(.ToolUserAvatar--image) {
+      @apply dark:bg-[oklch(from_var(--avatar-bg-color)_calc(l_*_1.6)_c_h)];
+    }
+
+    /* Match the surface instead of staying transparent, so an overlapped avatar can't show through the image. */
+    .Avatar.ToolUserAvatar--image {
+      @apply bg-white;
     }
 
     &:where([data-editing], [data-locked]) .Avatar {