@brightspot/ui 6.8.1 → 6.8.3-rc.1

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@brightspot/ui",
-  "version": "6.8.1",
+  "version": "6.8.3-rc.1",
   "type": "module",
   "license": "UNLICENSED",
   "description": "A UI library for building Brightspot CMS components.",
+  "homepage": "https://ui.brightspot.com",
   "main": "./dist/tailwind.config.js",
   "customElements": "dist/custom-elements.json",
   "exports": {
@@ -22,9 +23,9 @@
     "cem:docs": "yarn cem && node scripts/generate-docs.mjs",
     "build": "yarn clean && tsc --noEmitOnError && yarn cem && node scripts/copy-component-css.mjs && shx cp ./src/*.ts ./dist && shx rm ./dist/tailwind.storybook.config* && shx rm -Rf ./dist/stories && node scripts/check-dist-imports.mjs",
     "build:cms-ui": "yarn build && (cd src/legacy/tool-ui && yarn install --frozen-lockfile && yarn build) && (cd tool-ui && yarn install && yarn build)",
-    "prepack": "yarn build && yarn build-storybook && (cd src/legacy/tool-ui && yarn build)",
+    "prepack": "yarn build && node scripts/generate-docs.mjs && yarn build-storybook && (cd src/legacy/tool-ui && yarn build)",
     "storybook": "yarn cem && storybook dev -p 6006",
-    "build-storybook": "yarn cem && storybook build -o ./dist/storybook",
+    "build-storybook": "yarn cem && storybook build -o ./dist/storybook && node scripts/generate-docs.mjs --site dist/storybook",
     "test:storybook": "vitest --project=storybook",
     "test:css-bloat": "vitest run --project=css-bloat",
     "test:combo-input": "vitest run --project=combo-input",
@@ -40,7 +41,6 @@
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@custom-elements-manifest/to-markdown": "^0.1.0",
     "@eslint/js": "^9.23.0",
     "@storybook/addon-docs": "10.2.12",
     "@storybook/addon-themes": "10.2.12",
@@ -104,6 +104,8 @@
   "files": [
     "dist/**/*",
     "docs/**/*",
+    "llms.txt",
+    "CHANGELOG.md",
     "src/legacy/tool-ui/src/**/*",
     "!src/legacy/tool-ui/src/main/webapp/WEB-INF",
     "!src/legacy/tool-ui/src/main/webapp/v4/__mocks__",
@@ -120,10 +122,10 @@
     "!src/legacy/tool-ui/src/main/webapp/script/**/*.d.ts"
   ],
   "lint-staged": {
-    "src/components/**/*.ts": [
+    "{src/components/**/*.ts,src/util/**/*.ts,src/stories/*.stories.ts,src/tailwind-plugin-*.ts,scripts/generate-docs.mjs}": [
       "node scripts/run-cem.cjs",
       "node scripts/generate-docs.mjs",
-      "git add docs/components/"
+      "git add docs/components/ llms.txt"
     ],
     "*": "prettier --write --ignore-unknown"
   }

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 {