@brightspot/ui 6.4.2 → 6.4.3-pr.366.2026.10.5-2

package/dist/tailwind-plugin-badge.ts

@@ -185,7 +185,8 @@ module.exports = plugin(
               lineHeight: fontSize[1],
               padding: `var(--badge-py) var(--badge-px)`,
               minWidth: size.minWidth,
-              maxWidth: 'max-content',
+              flexShrink: '0',
+              maxWidth: 'fit-content',
               display: 'inline-flex',
             },
           })

package/dist/tailwind-plugin-message.js

@@ -91,8 +91,11 @@ module.exports = plugin(function ({ addComponents }) {
             fontWeight: '500',
             color: 'inherit',
         },
+        // The badge slot is the header's flex item, so it must not shrink.
         '.btu-message-badge': {
             display: 'inline-flex',
+            flexShrink: '0',
+            maxWidth: '100%',
             '&:empty': {
                 display: 'none',
             },

package/dist/tailwind-plugin-message.js.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind-plugin-message.js","sourceRoot":"","sources":["../src/tailwind-plugin-message.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tailwind-plugin-message.js","sourceRoot":"","sources":["../src/tailwind-plugin-message.ts"],"names":[],"mappings":"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"}

package/dist/tailwind-plugin-message.ts

@@ -143,8 +143,11 @@ module.exports = plugin(function ({ addComponents }) {
       color: 'inherit',
     },
 
+    // The badge slot is the header's flex item, so it must not shrink.
     '.btu-message-badge': {
       display: 'inline-flex',
+      flexShrink: '0',
+      maxWidth: '100%',
       '&:empty': {
         display: 'none',
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspot/ui",
-  "version": "6.4.2",
+  "version": "6.4.3-pr.366.2026.10.5-2",
   "type": "module",
   "license": "UNLICENSED",
   "description": "A UI library for building Brightspot CMS components.",

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

@@ -39,6 +39,13 @@
 .Conversation-reply-main {
   @apply grid grid-cols-[auto_minmax(0px,1fr)] grid-rows-[auto_1fr] gap-2 p-4 @container hover:bg-gray-50 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-b-gray-200;
 
+  /* Shared Preview commenting uses a slightly stronger hover for clearer
+     affordance over the preview overlay; scoped so it doesn't restyle every
+     conversation in the CMS. */
+  .SharePreview & {
+    @apply hover:bg-gray-100;
+  }
+
   &.is-pinned {
     @apply bg-warning-25 hover:bg-warning-50;
 
@@ -101,7 +108,7 @@
   @apply col-span-full break-words text-sm text-gray-900 after:text-xs after:italic after:text-gray-500 [&[data-edited]]:after:[content:'_'_attr(data-edited)];
 
   a:has(img) {
-    @apply mx-auto my-2 blokk max-w-fit rounded-lg rounded-ss-none border border-solid border-gray-200 bg-white px-3 py-2 hover:bg-gray-100;
+    @apply mx-auto my-2 max-w-fit rounded-lg rounded-ss-none border border-solid border-gray-200 bg-white px-3 py-2 blokk hover:bg-gray-100;
 
     img {
       @apply max-h-[50dvh] rounded-lg @lg:max-w-[75cqi];
@@ -222,7 +229,7 @@
     }
 
     .Conversation-pinned-list {
-      @apply blokk max-h-[300px] overflow-y-auto;
+      @apply max-h-[300px] overflow-y-auto blokk;
     }
   }
 }
@@ -250,7 +257,11 @@
 }
 
 .Conversation-actionsToggle {
-  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs bg-white before:btu-icon before:btu-icon-ellipsis touch-device:btu-button-sm before:btu-icon-md;
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs bg-white before:btu-icon before:btu-icon-ellipsis before:btu-icon-md touch-device:btu-button-sm;
+}
+
+.Conversation-viewSharedPreview {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs bg-white before:btu-icon before:btu-icon-scan-eye touch-device:btu-button-sm;
 }
 
 .Conversation-resolve,

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

@@ -267,6 +267,9 @@ onFind('.Conversation-newPostButton', (button: HTMLElement): void => {
       body.append('fieldName', data.fieldName || '')
       body.append('contextual', data.contextual || 'false')
       body.append('overlayId', data.overlayId || '')
+      if (data.previewId) {
+        body.append('sharedPreviewId', data.previewId)
+      }
     }
 
     body.append('postsOnly', 'true')

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

@@ -10,6 +10,7 @@ import './ContentForm'
 import './ContentInputGroup'
 import './ContentSummary'
 import './Conversation'
+import './SharePreviewCommenting'
 import './theme'
 import './dialog'
 import './Diff'
@@ -806,7 +807,7 @@ onFind('.Suggestions-list', (legacySuggestionsList: HTMLElement) => {
   hidden with CSS on the markup returned from the server (e.g., `display: none;` or a CSS
   class equivalent) and not hidden with JavaScript.
 */
-onVisible('.Deferred', (deferred) => {
+onVisible('.Deferred', (deferred: HTMLElement) => {
   const parent = deferred.parentElement
   const template = deferred.querySelector(':scope > template')
   if (template instanceof HTMLTemplateElement && parent) {
@@ -817,7 +818,7 @@ onVisible('.Deferred', (deferred) => {
     // Trigger change events for all selects in the cloned content.
     parent
       .querySelectorAll('.CIG-row.StyleguidePreset-row .CIG-small > select')
-      .forEach((select) => {
+      .forEach((select: Element) => {
         select.dispatchEvent(new CustomEvent('change', { bubbles: true }))
       })
 
@@ -826,7 +827,7 @@ onVisible('.Deferred', (deferred) => {
       .querySelectorAll(
         '.CIG-row.StyleguidePreset-row .CIG-small > input.objectId',
       )
-      .forEach((input) => {
+      .forEach((input: Element) => {
         const row = input.closest('.CIG-row')
         row?.dispatchEvent(new CustomEvent('create', { bubbles: true }))
       })

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

@@ -1,6 +1,10 @@
 .SharePreview,
 .ViewMirror {
   @apply grid h-[100dvh] w-[100vw] bg-gray-50 [grid-template:"title_title"_auto_"type_controls"_auto_"content_content"_1fr_/_auto_1fr];
+
+  &.is-commenting-open {
+    @apply [grid-template:"title_title_title"_auto_"type_controls_panel"_auto_"banner_banner_panel"_auto_"content_content_panel"_1fr_/_auto_1fr_360px];
+  }
 }
 
 .SharePreview-title,
@@ -24,11 +28,83 @@
   @apply flex items-center gap-2;
 }
 
-@scope (.SharePreview, .ViewMirror) {
+.SharePreview-panel {
+  @apply hidden flex-col border-l border-gray-200 bg-gray-50 [grid-area:panel];
+
+  .is-commenting-open & {
+    @apply flex;
+  }
+
+  /* Login widget inside the panel — reuse .Page-login visual styles without
+     the full-page layout rules (pt-45dvh, absolute positioning, etc.) */
+  .Page-login {
+    @apply p-6;
+
+    .inputLabel {
+      @apply text-sm font-semibold;
+    }
+
+    input[type] {
+      @apply w-full border-transparent bg-gray-100 focus:border-primary-600;
+    }
+
+    .ActionBar {
+      @apply justify-end border-none bg-transparent px-0;
+    }
+
+    > form .CIG-row {
+      @apply [grid-column:fullbleed-start/fullbleed-end];
+    }
+  }
+
+  .CIG-row::after {
+    @apply hidden;
+  }
+}
+
+.SharePreview-panel-header {
+  @apply btu-heading-5 flex shrink-0 items-center justify-between border-b border-gray-200 px-6 py-4 capitalize text-gray-900;
+}
+
+.SharePreview-panel-title {
+  @apply grow;
+}
+
+.SharePreview-conversation {
+  @apply flex min-h-0 grow flex-col;
+
+  /* Make the Conversation frame transparent to flex layout so its children
+     (Conversation-posts and Conversation-newPost) become direct flex items */
+  > .Conversation.frame {
+    @apply contents;
+  }
+
+  .Conversation-posts {
+    @apply min-h-0 grow overflow-y-auto;
+  }
+
+  .Widget-filters {
+    @apply px-4;
+  }
+}
+
+.SharePreview-toggle {
+  @apply before:btu-icon-message-circle;
+
+  &[aria-pressed='true'] {
+    @apply btu-button-pressed;
+  }
+}
+
+.SharePreview-panel-close {
+  @apply before:btu-icon-x;
+}
+
+.SharePreview,
+.ViewMirror {
   & .PreviewFrame,
-  .PreviewFrame-typeFrame,
-  .PreviewFrame-typeControlsContainer,
-  .PreviewFrame-typeControlsContainer > form {
+  & .PreviewFrame-typeFrame,
+  & .PreviewFrame-typeControlsContainer {
     @apply contents;
   }
 
@@ -42,6 +118,9 @@
     + .PreviewFrame-typeFrame
     .PreviewFrame-iFrameControlsForm {
     @apply col-span-full ps-6;
+    & .IconButton.SharePreview-toggle {
+      @apply ms-auto;
+    }
   }
 
   & .PreviewFrame-typeDisplay {
@@ -69,3 +148,129 @@
     @apply max-w-[25dvw];
   }
 }
+
+/* ─── Commenting mode banner ──────────────────────────────────────────────── */
+
+.SharePreview-commentingBanner {
+  @apply hidden [grid-area:banner];
+
+  .is-commenting-open & {
+    @apply flex;
+  }
+}
+
+/* ─── Click overlay iframe ───────────────────────────────────────────────── */
+/* A same-origin about:blank iframe that sits above the cross-origin preview
+   iframe. When commenting is open it captures wheel (forwarded as ScrollBy
+   postMessage) and click (triggers pin placement) events. */
+
+.SharePreview-clickOverlay {
+  @apply pointer-events-none absolute inset-0 z-10;
+
+  .is-commenting-open & {
+    @apply pointer-events-auto cursor-crosshair;
+  }
+}
+
+/* ─── Pin overlay ────────────────────────────────────────────────────────── */
+/* Always pointer-events-none; sits above the click overlay so pin buttons
+   (which have pointer-events:auto) are still clickable. */
+
+.SharePreview-pinsOverlay {
+  @apply pointer-events-none invisible absolute inset-0 z-20 overflow-hidden;
+
+  /* Pins only show while commenting is open; invisible (not display:none) keeps the overlay
+     laid out so pin positions stay correct and reappear on reopen. */
+  .is-commenting-open & {
+    @apply visible;
+  }
+}
+
+/* ─── Individual pin bubbles ─────────────────────────────────────────────── */
+
+.SharePreview-pin {
+  @apply pointer-events-auto absolute flex h-8 w-8 -translate-x-1/2 -translate-y-1/2 cursor-pointer select-none items-center justify-center rounded-full text-xs font-bold text-white shadow-md ring-2 ring-white transition-transform focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
+
+  &.is-active {
+    @apply scale-125 ring-4;
+  }
+}
+
+.SharePreview-pin--placeholder {
+  @apply pointer-events-none bg-primary-100 ring-primary-700;
+}
+
+/* 8 distinct avatar colors — index matches colorIndex from the server.
+   The white ring comes from the base .SharePreview-pin rule. */
+.SharePreview-pin--color0 {
+  @apply bg-primary-600;
+}
+.SharePreview-pin--color1 {
+  @apply bg-purple-600;
+}
+.SharePreview-pin--color2 {
+  @apply bg-teal-500;
+}
+.SharePreview-pin--color3 {
+  @apply bg-success-500;
+}
+.SharePreview-pin--color4 {
+  @apply bg-warning-500;
+}
+.SharePreview-pin--color5 {
+  @apply bg-error-600;
+}
+.SharePreview-pin--color6 {
+  @apply bg-purple-400;
+}
+.SharePreview-pin--color7 {
+  @apply bg-primary-800;
+}
+
+/* ─── Panel post active highlight (from pin click) ──────────────────────── */
+
+.Conversation-post.is-pin-active {
+  @apply ring-2 ring-inset ring-primary-400 transition-shadow duration-300;
+}
+
+/* ─── Pin placement popover ─────────────────────────────────────────────── */
+
+.SharePreview-pinPopover {
+  @apply fixed z-[200] flex w-[360px] max-w-[calc(100vw-24px)] flex-col gap-2 rounded-lg border border-gray-200 bg-white p-3 shadow-xl;
+
+  /* Positioned by Tether relative to the placeholder pin; mirrors the Popup tether contract
+     (RTL is resolved in TetherLayout, so left/right map directly to the --Tether-* vars). */
+  &[data-tether-rx='l'] {
+    @apply left-[--Tether-rl] right-auto;
+  }
+
+  &[data-tether-rx='r'] {
+    @apply left-auto right-[calc(100vw-var(--Tether-rl)-var(--Tether-rw))];
+  }
+
+  &[data-tether-ry='t'] {
+    @apply bottom-auto top-[calc(var(--Tether-rt)+var(--Tether-rh))];
+  }
+
+  &[data-tether-ry='b'] {
+    @apply bottom-[calc(100dvh-var(--Tether-rt))] top-auto;
+  }
+
+  .SharePreview-pinPopover-input {
+    @apply w-full resize-none rounded border border-gray-200 bg-gray-50 p-2 text-sm focus:border-primary-600 focus:bg-white focus:outline-none;
+  }
+
+  /* Host for the cloned conversation rich-text editor. The padding gives the editor's blue focus
+     halo (ProseMirrorContainer ring-4) room to render — overflow-y-auto would otherwise clip it. */
+  .SharePreview-pinPopover-editor {
+    @apply max-h-[40dvh] overflow-y-auto p-1.5;
+  }
+
+  .SharePreview-pinPopover-actions {
+    @apply flex justify-end gap-2;
+  }
+
+  .SharePreview-pinPopover-submit.Button {
+    @apply bg-primary-700 text-white;
+  }
+}