@brightspot/ui 3.0.1-cms-ui-migration.0 → 3.0.1-cms-ui-migration.2

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

@@ -0,0 +1,97 @@
+@property --progress {
+  syntax: '<integer>';
+  initial-value: 0;
+  inherits: true;
+}
+
+@property --progress-from {
+  syntax: '<integer>';
+  initial-value: 0;
+  inherits: true;
+}
+
+@property --progress-to {
+  syntax: '<integer>';
+  initial-value: 100;
+  inherits: true;
+}
+
+@keyframes progress {
+  from {
+    --progress: var(--progress-from);
+  }
+  to {
+    --progress: var(--progress-to);
+  }
+}
+
+.p-workStreams-working,
+.p-workStreams-notWorking {
+  @apply relative flex flex-wrap justify-between gap-2;
+
+  .RPB,
+  .progress .progress-stats-label {
+    @apply hidden;
+  }
+
+  .progress {
+    @apply w-full text-sm;
+  }
+}
+
+.p-workStreams .block {
+  @apply flex items-end justify-end rounded-lg border border-gray-300 p-4;
+}
+
+.p-workStreams .block.animated .progress-percent-label {
+  @apply [animation:progress_1s_forwards_ease-out];
+}
+
+.p-workStreams .block:has(+ .block) {
+  @apply mb-2;
+}
+
+.p-workStreams .block .button {
+  @apply btu-button btu-button-primary btu-button-md order-5 mt-4;
+}
+
+.progress-percent-label {
+  @apply order-2 mt-2 text-sm font-medium text-gray-700 [counter-reset:progress_var(--progress)] before:absolute before:[content:counter(progress)'%'];
+}
+
+/* Reserve the space of the original text while the progress is animating to avoid layout shift. */
+.progress-percent-label > span {
+  @apply invisible;
+}
+
+.progress-stats-label {
+  @apply order-2 ms-auto text-sm font-normal text-gray-500;
+}
+
+.progress {
+  @apply order-3 h-2 rounded-lg bg-gray-100;
+}
+
+.progress .progressBar {
+  @apply h-full w-0 rounded-lg bg-primary-600;
+}
+
+.block.animated .progress .progressBar {
+  @apply transition-all duration-1000 [width:calc(1%_*_var(--progress-to))];
+}
+
+.p-workStreams-working-info {
+  @apply order-1 mb-2 flex-[1_0_100%] text-sm;
+}
+
+.p-workStreams-working-info a {
+  @apply font-semibold text-primary-600 no-underline hover:text-primary-800 focus:text-primary-600;
+}
+
+.p-workStreams-continue {
+  @apply !order-last;
+}
+
+.p-workStreams-stop {
+  @apply !btu-button-gray;
+}

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

@@ -0,0 +1,100 @@
+.Workflow-ui {
+  @apply relative min-h-96 overflow-clip rounded-lg border border-gray-300 bg-gray-50;
+}
+
+/* Arrows drawn on the canvas should be gray. */
+.Workflow-ui canvas {
+  @apply grayscale dark:[filter:grayscale(1)_invert(1)];
+}
+
+.Workflow-ui input[type] {
+  @apply block truncate !border-gray-300 bg-white focus:[field-sizing:content];
+}
+
+/* Every box is absolutely positioned via JS. */
+.Workflow-state,
+.Workflow-transition {
+  @apply absolute;
+}
+
+/* State boxes are movable. */
+.Workflow-state {
+  @apply cursor-grab rounded-lg border border-gray-300 bg-white p-4;
+}
+
+.Workflow-state .sp-replacer {
+  @apply h-[calc(theme(iconSize.md)_+_1rem_+_2px)] w-[calc(theme(iconSize.md)_+_1rem_+_2px)] p-2 before:hidden hover:border-solid;
+}
+
+.Workflow-state .sp-replacer.sp-active {
+  @apply border-solid;
+}
+
+.Workflow-state .sp-dd {
+  @apply hidden;
+}
+
+.Workflow-state .sp-preview {
+  @apply [overflow:inherit] after:hidden;
+}
+
+.Workflow-state.is-intermediate {
+  @apply grid w-[16.7rem] grid-cols-[auto_1fr_auto] gap-x-2;
+}
+
+.Workflow-state.is-intermediate:has(input:focus) {
+  @apply border-primary-600 bg-primary-50;
+}
+
+.Workflow-state.is-intermediate.is-dragging {
+  @apply cursor-grabbing border-primary-600 bg-gray-100;
+}
+
+.Workflow-state[data-id='initial'],
+.Workflow-state[data-id='final'] {
+  @apply cursor-default text-sm font-semibold;
+}
+
+/* Initial state at top left. */
+.Workflow-state[data-id='initial'] {
+  @apply left-6 top-[calc(theme(iconSize.md)_+_3.5rem)];
+}
+
+.Workflow-state[data-id='initial'] .Workflow-addTransition {
+  @apply block pt-2;
+}
+
+/* Final state at bottom right. */
+.Workflow-state[data-id='final'] {
+  @apply bottom-6 right-6;
+}
+
+.Workflow-state .ComboInput {
+  @apply absolute h-px w-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)];
+}
+
+.Workflow-removeState,
+.Workflow-removeTransition {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm before:btu-icon before:btu-icon-x;
+}
+
+/* Remove transition button is overlaid on top of the input. */
+.Workflow-removeTransition {
+  @apply absolute right-px top-[calc(50%_-theme(iconSize.lg)_/_2_-_theme(spacing.2)_+_2px)] rounded-l-none border-l border-solid border-gray-300;
+}
+
+.Workflow-transition {
+  @apply w-48;
+}
+
+input.Workflow-transitionName {
+  @apply pe-[calc(theme(iconSize.lg)_+_1.5rem)];
+}
+
+.Workflow-addState {
+  @apply inline-block w-full rounded-b-none border-b border-solid border-gray-200 bg-white p-4 text-start text-sm font-semibold no-underline before:btu-icon before:btu-icon-plus before:me-2;
+}
+
+.Workflow-addTransition {
+  @apply btu-button btu-button-gray col-start-1 col-end-4 -mx-4 -mb-4 mt-4 rounded-t-none before:btu-icon before:btu-icon-plus before:me-2;
+}

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

@@ -0,0 +1,52 @@
+import onFind from './dom/onFind'
+
+/*
+  Copies the progress stats label and inserts it after the percentage label.
+
+  From:
+  -------------------------
+  | RPB || working info |
+  | RPB ||progress stats|
+  ------------------------
+
+  To:
+  ------------------------------
+  |progress % (new)|
+  |working info|
+  |progress bar (visible in v5)|
+  |progress stats|
+  ------------------------------
+*/
+onFind('.DashboardWidget.p-workStreams .block', (workstream) => {
+  const stats = workstream.querySelector('.progress .progress-stats-label')
+  if (!stats) return
+  const statsCopy = stats.cloneNode(true)
+  if (statsCopy instanceof HTMLElement) {
+    statsCopy.classList.add('v5-only')
+    statsCopy.classList.remove('v4-contents-only')
+    workstream.append(statsCopy)
+  }
+
+  // Also makes progress bar visible in v5
+  const bar = workstream.querySelector('.progressBar')
+  if (!bar) return
+  bar.classList.remove('hidden')
+  bar.removeAttribute('hidden')
+
+  // Animate workstream when it's in view.
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('animated')
+          observer.unobserve(entry.target)
+        }
+      })
+    },
+    {
+      threshold: 0.5,
+    },
+  )
+
+  observer.observe(workstream)
+})

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

@@ -0,0 +1,77 @@
+import { LitElement } from 'lit'
+
+export declare class WrappingMixinInterface {
+  _child: HTMLElement
+  find(): HTMLElement | null
+}
+
+/*
+  #wrap an element with an instance of the provided Class and
+  execute the callback with a reference to the new instance.
+*/
+export const wrap = (
+  element: HTMLElement,
+  ComponentClass: Class<HTMLElement>,
+  createdCb?: (component: HTMLElement) => void,
+) => {
+  // Already wrapped?
+  if (element.parentElement instanceof ComponentClass) return
+
+  // Create the new component instance, run provided callback.
+  const wc = new ComponentClass()
+  if (createdCb) {
+    createdCb(wc)
+  }
+
+  // Wrap.
+  element.parentNode?.insertBefore(wc, element)
+  wc.appendChild(element)
+}
+
+export const WrappingMixin = <T extends Constructor<LitElement>>(
+  superClass: T,
+) => {
+  class WrappingMixinClass extends superClass {
+    _child?: HTMLElement
+    #observer?: MutationObserver
+
+    protected get child() {
+      return this._child
+    }
+
+    protected set child(_c) {
+      this._child = _c
+    }
+
+    /*
+      Must override this method in a subclass.
+    */
+    find(): HTMLElement | null {
+      return null // No-Op
+    }
+
+    connectedCallback() {
+      super.connectedCallback()
+      const found = this.find()
+      if (found) {
+        this.child = found
+      }
+      this.#observer = new MutationObserver(async (mutations) => {
+        const found = this.find()
+        if (found) {
+          this.child = found
+        }
+      })
+      this.#observer.observe(this.renderRoot, {
+        childList: true,
+        subtree: false,
+      })
+    }
+
+    disconnectedCallback() {
+      super.disconnectedCallback()
+      this.#observer?.disconnect()
+    }
+  }
+  return WrappingMixinClass as Constructor<WrappingMixinInterface> & T
+}

package/src/legacy/tool-ui/src/additional-tailwind-classes.txt

@@ -0,0 +1,205 @@
+group
+group-hover:visible
+group-hover
+hover:!bg-gray-300
+before:btu-icon-ellipsis-vertical
+before:btu-icon-chart-no-axes-column
+group-[.is-open]:Dropdown-is-open
+[&.is-open]:visible
+group-[.is-open]:!bg-gray-300
+after:-right-[--space]
+
+after:w-[--pageNav-item-icon-size]
+before:btu-icon-replace
+before:btu-icon-between-horizontal-start
+before:btu-icon-copy
+before:btu-icon-send-horizontal
+before:btu-icon-sparkle
+before:btu-icon-sparkles
+before:btu-icon-octagon-x
+before:btu-icon-lock
+before:btu-icon-clock
+!gap-0
+[--avatar-size:theme(avatar.size.sm)]
+!rounded-none
+[&>form>btu-input]:grow
+last:pb-0
+[&:has(+_.AIChat-response)]:hidden
+dark:[&.is-disabled]:btu-button-outline
+dark:[&.is-disabled]:bg-white
+dark:[&.is-disabled]:text-gray-400
+dark:[&.is-disabled]:[--button-outline-color:_theme(colors.gray.300)]
+!mt-0
+!border-t-0
+gap-x-[3px]
+[&:not(.ToolUserAvatar)]:bg-ai-gradient
+[&.is-active]:before:btu-icon-x
+after:btu-icon-gradient-ai
+before:btu-icon-gradient-ai
+before:btu-icon-via-mask-sparkles
+after:btu-icon-via-mask-sparkles
+[&>btu-input]:grow
+last-of-type:me-2
+bottom-[1px]
+[.AskAi-referencesContainer.is-expanded_&]:rotate-90
+[background-image:linear-gradient(theme(colors.gray.300),theme(colors.gray.300))]
+[background-position:calc(1.25rem_/_2)_0]
+[background-size:1px_100%]
+hover:[background-image:linear-gradient(theme(colors.primary.500),theme(colors.primary.500))]
+transition-[height,padding]
+group-[.is-expanded]:visible
+group-[.is-expanded]:h-auto
+group-[.is-expanded]:overflow-visible
+group-[.is-expanded]:pb-3
+group-[.is-expanded]:pb-1
+[animation-delay:-0.3s]
+[animation-delay:-0.15s]
+size-[4px]
+animate-up-back-fade
+bg-gray-600
+
+-ms-1
+size-[18px]
+rounded-[50%]
+
+# === BEGIN brightspot Java content (auto-generated; do not hand-edit) ===
+# Source: 13 brightspot Java files.
+# Pipeline: defaultExtractor → v5.css class-presence filter.
+# Only candidates whose class form appears in the compiled v5.css survive;
+# identifier noise is dropped. Re-run produces byte-identical v5.css.
+![grid-column:content-start_/_content-end]
+!frame
+!hidden
+!px-4
+!readOnly
+-order-1
+ActionBar
+Admin
+Alert-badge
+BackgroundTasks
+Badge
+CIG
+CIG-comments
+CIG-guide
+CIG-help
+CIG-label
+CIG-note
+CIG-noteItem
+CIG-requiredLabel
+CIG-row
+CIG-small
+Container-broadcast
+ContentTemplate
+DT
+EIG
+GuideField
+Label
+Message
+Page
+Page-avatar
+Page-broadcast
+Page-broadcastAlert
+Page-broadcastAlert-messages
+Page-container
+Page-content
+Page-create
+Page-env
+Page-guide
+Page-guideLink
+Page-header
+Page-main
+Page-search
+Page-site
+Page-siteName
+Page-title
+Page-user
+Popup
+Popup-content
+PrePublish
+StandardForm
+TC-unselected
+Tab
+ToolUserNotifications
+ToolUserWorksInProgress
+TranslationReadOnlyTargetLocales
+Widget
+Widget-restoreButton
+Widget-title
+[grid-column:content-start_/_content-end]
+[grid-column:span_2_/_fullbleed-end]
+absolute
+action-create
+action-save
+bg-gray-200
+bg-white
+border-b
+border-b-gray-200
+btu-badge-gray
+btu-badge-md
+btu-button
+btu-button-gray
+btu-button-md
+button
+button--aria-skip
+cms-textAlign-center
+cms-textAlign-right
+col-span-full
+container
+contents
+crosslinker
+drawerDropOverlay
+edit
+filter
+first
+fixedScrollable
+font-semibold
+frame
+grid
+group
+hidden
+icon
+icon-action-cancel
+icon-action-delete
+inline
+inputContainer
+inputLabel
+is-error
+is-guideOpen
+is-ready
+is-visible
+label
+last
+max-w-max
+max-w-min
+mb-1
+mb-4
+mb-8
+message
+mt-8
+nested
+next
+objectInputs
+overflow-y-auto
+pagination
+pagination-count
+pb-4
+previous
+px-4
+readOnly
+remove
+row-start-1
+screen-reader-only
+selected
+static
+text
+text-gray-700
+text-sm
+toolUser
+toolUserControls
+toolUserDisplay
+toolUserSite
+toolUserSiteControls
+transition
+visible-if-focused
+widget
+# === END brightspot Java content ===

package/src/legacy/tool-ui/src/bsp-tracking.d.ts

@@ -0,0 +1,27 @@
+declare module 'bsp-tracking' {
+  interface TrackData {
+    feature: string
+    interaction: string
+  }
+
+  interface TrackingHandler {
+    eventType: string
+    setup: (
+      element: HTMLElement,
+      manager: TrackingManager,
+      trackData: TrackData,
+    ) => void
+  }
+
+  class TrackingManager {
+    track(
+      handler: TrackingHandler,
+      selector: string | string[],
+      trackData: TrackData,
+    ): void
+    sendData(eventType: string, trackData: TrackData, event?: Event): void
+  }
+
+  export const trackingManager: TrackingManager | null
+  export const ClickHandler: TrackingHandler
+}

package/src/legacy/tool-ui/src/dialog/README.md

@@ -0,0 +1,83 @@
+# `<btu-dialog>` Web Component
+
+This is a web component that adds functionality to the native `<dialog>` element.
+
+In Java, you can use this as a custom Dari HTML component like:
+
+```
+import static com.psddev.cms.ui.Components.*;
+
+.add(DIALOG.with(DIV.with("this is the content of the dialog...")));
+```
+
+or in HTML:
+
+```
+<btu-dialog><div>This is the content</div></btu-dialog>
+```
+
+or Typescript/JS:
+
+```
+import Dialog from 'dialog/index'
+
+const dialog = new Dialog()
+dialog.append(document.createElement('div'))
+document.appendChild(dialog)
+```
+
+## Properties
+
+| Name            | Attribute       | Type (default)                           | Description                                                                                                                                                                                                                                              |
+| --------------- | --------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `autoOpen`      | auto-open       | boolean (true)                           | Opens the dialog immediately after it is attached to the DOM.                                                                                                                                                                                            |
+| `enterFrom`     | enter-from      | 'left' \| 'right' \| 'center' ('center') | Indicates the direction from which the popup enters. Automatically detected from Popup classes (`is-fromLeft`, `is-fromRight`). This property is reflected to the DOM as an attribute for CSS targeting.                                                 |
+| `id`            | id              | uuid (automatic)                         | A unique UUID is generated for each dialog when it is attached to the DOM.                                                                                                                                                                               |
+| `loaded`        | loaded          | boolean (false)                          | Indicates whether the Popup is fully loaded and ready. Automatically set to `true` when the Popup has the classes `loaded`, `is-ready`, and `is-visible`. This property is reflected to the DOM as an attribute and is used to hide the loading spinner. |
+| `removeOnClose` | remove-on-close | boolean (true)                           | Removes the dialog from the DOM after it closes.                                                                                                                                                                                                         |
+
+## Methods
+
+| Name      | Params          | Description                                                                                                                                |
+| --------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `close()` | Event(optional) | Closes the dialog after checking for unsaved changes and prompting for confirmation if needed. Emits `btu-dialog-closed` event on success. |
+| `show()`  | none            | Shows the dialog.                                                                                                                          |
+
+## Events
+
+| Name                | Description                                                                         |
+| ------------------- | ----------------------------------------------------------------------------------- |
+| `btu-dialog-closed` | Indicates that the request to close the dialog was successful and it is now closed. |
+| `btu-dialog-ready`  | Indicates that the dialog is connected to the DOM.                                  |
+
+## Dialog Popup sizes
+
+Dialog modals have a default size that can be overridden via CSS by the `data-popup-size` attribute with the following values:
+
+- `sm`: For popups smaller than default size
+  - 100cqw x 45cqh for mobile devices
+  - 65cqw x 45cqh for tablet devices
+  - 55cqw x 45cqh for desktop
+- `lg`: For popups larger than default size
+  - 100cqw x 100cqh for mobile devices
+  - 90cqw x 100cqh for tablet devices
+  - 80cqw x 100cqh for desktop
+- `auto-height`: For popups with content less than `sm` size, the height will be determined by the content, but the width will be default values.
+
+## Performance Optimizations
+
+To avoid expensive CSS `:has()` selectors, the dialog component automatically annotates its DOM with context classes. These classes are added via JavaScript when relevant elements are detected, allowing CSS to use simple class selectors instead of complex `:has()` queries.
+
+### Context Classes
+
+The following classes are automatically added to elements within modal dialogs:
+
+| Class                  | Applied To                                           | Condition                                                                                                                                       |
+| ---------------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| `has-ActionBar`        | `.Popup-content`                                     | Contains an `.ActionBar` element (and not in editing mode or Admin nav context)                                                                 |
+| `has-AdminNav`         | `.Popup-content`                                     | Contains `.Admin .Admin-nav` elements                                                                                                           |
+| `has-ActionBarContent` | Ancestor elements                                    | Contains an `.ActionBar` with substantive content (not just `ImageEditor-closeButton`)                                                          |
+| `has-StatusMessage`    | Ancestor elements                                    | Contains success, error, or info messages (`.Message.is-success`, `.Widget-title + .Message.is-error`, `.Widget-title + .Message.message-info`) |
+| `before-ActionBar`     | `form`, `.TC`, `.AIChat-wrapper`, `.fixedScrollable` | Element immediately precedes an `.ActionBar`                                                                                                    |
+
+These classes are managed automatically through a `MutationObserver` that watches for dynamically added content and updates annotations accordingly. The observer is properly cleaned up when the dialog is removed from the DOM to prevent memory leaks.