@adatechnology/conversations-ui 0.8.0 → 0.9.0

package/src/styles.css

@@ -1188,7 +1188,7 @@
   overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
 }
 
-.cv-p-button, .cv-p-chip, .cv-p-row, .cv-p-thread__older, .cv-p-bubble__retry, .cv-p-bubble__action {
+.cv-p-button, .cv-p-chip, .cv-p-row, .cv-p-thread__older, .cv-p-failed-menu__trigger, .cv-p-failed-menu__item {
   font: inherit; color: inherit; cursor: pointer;
 }
 .cv-p-button {
@@ -1300,15 +1300,27 @@
 }
 .cv-p-bubble__author { display: block; flex: 1 0 100%; margin-bottom: 0.15rem; font: 0.65rem 'SFMono-Regular', Consolas, monospace; text-transform: uppercase; color: var(--cv-p-i-accent); }
 .cv-p-bubble > .cv-p-text { flex: 0 1 auto; min-width: 0; margin-inline-end: auto; }
-.cv-p-bubble > .cv-p-attachment, .cv-p-bubble > .cv-p-bubble__actions { flex: 1 0 100%; }
+.cv-p-bubble > .cv-p-attachment { flex: 1 0 100%; }
 .cv-p-bubble__meta { display: flex; flex: 0 0 auto; justify-content: flex-end; align-items: center; gap: 0.35rem; margin-inline-start: auto; margin-top: 0.25rem; font: 0.65rem 'SFMono-Regular', Consolas, monospace; color: var(--cv-p-i-text-muted); }
 .cv-p-bubble__status { display: inline-flex; align-items: center; gap: 0.25rem; }
 .cv-p-bubble .cv-status-ticks--queued, .cv-p-bubble .cv-status-ticks--sent, .cv-p-bubble .cv-status-ticks--delivered { color: var(--cv-p-i-tick); }
 .cv-p-bubble .cv-status-ticks--read { color: var(--cv-p-i-tick-read); }
 .cv-p-bubble .cv-status-ticks--failed { color: var(--cv-p-i-danger); }
-.cv-p-bubble__retry { min-height: var(--cv-p-i-touch); display: inline-flex; align-items: center; gap: 0.25rem; padding: 0 0.5rem; background: transparent; border: 1px solid var(--cv-p-i-danger); color: var(--cv-p-i-danger); border-radius: var(--cv-p-i-radius); font-size: 0.7rem; }
-.cv-p-bubble__actions { display: inline-flex; gap: 0.5rem; margin-top: 0.25rem; }
-.cv-p-bubble__action { min-height: var(--cv-p-i-touch); display: inline-flex; align-items: center; padding: 0 0.75rem; background: transparent; border: 1px solid var(--cv-p-i-border); color: inherit; border-radius: var(--cv-p-i-radius); font-size: 0.7rem; }
+@supports (color: color-mix(in srgb, red, blue)) {
+  .cv-p-bubble--failed { border-color: color-mix(in srgb, var(--cv-p-i-danger) 55%, var(--cv-p-i-border)); --cv-p-tail-edge: color-mix(in srgb, var(--cv-p-i-danger) 55%, var(--cv-p-i-border)); }
+  .cv-p-bubble--mine.cv-p-bubble--failed { border-color: color-mix(in srgb, var(--cv-p-i-danger) 55%, var(--cv-p-i-accent)); --cv-p-tail-edge: color-mix(in srgb, var(--cv-p-i-danger) 55%, var(--cv-p-i-accent)); }
+}
+.cv-p-failed-retry { position: absolute; top: 50%; right: calc(100% + 0.125rem); transform: translateY(-50%); display: grid; place-items: center; width: var(--cv-p-i-touch); height: var(--cv-p-i-touch); padding: 0; background: transparent; border: 0; color: var(--cv-p-i-danger); font: inherit; cursor: pointer; }
+.cv-p-failed-retry__icon { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--cv-p-i-danger); border-radius: 50%; }
+.cv-p-failed-retry:hover .cv-p-failed-retry__icon, .cv-p-failed-retry:focus-visible .cv-p-failed-retry__icon { background: var(--cv-p-i-surface-raised); }
+.cv-p-failed-menu { display: inline-flex; }
+.cv-p-failed-menu__trigger { position: relative; display: inline-grid; place-items: center; min-width: 1.25rem; height: 0.75rem; padding: 0; background: transparent; border: 0; color: var(--cv-p-i-text-muted); font: inherit; line-height: 0.75rem; cursor: pointer; }
+.cv-p-failed-menu__trigger::after { content: ''; position: absolute; inset: -0.5rem -0.4rem; }
+.cv-p-failed-menu__list { position: absolute; right: 0; bottom: calc(100% + 0.25rem); z-index: 2; display: flex; flex-direction: column; min-width: 8rem; background: var(--cv-p-i-surface-raised); border: 1px solid var(--cv-p-i-border); border-radius: var(--cv-p-i-radius); }
+.cv-p-failed-menu__item { min-height: var(--cv-p-i-touch); padding: 0 0.75rem; background: transparent; border: 0; color: var(--cv-p-i-text); font: 0.7rem 'SFMono-Regular', Consolas, monospace; text-align: start; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; }
+.cv-p-failed-menu__list--below { bottom: auto; top: calc(100% + 0.25rem); }
+.cv-p-failed-menu__item--danger { color: var(--cv-p-i-danger); }
+.cv-p-failed-menu__item:hover, .cv-p-failed-menu__item:focus-visible { background: var(--cv-p-i-highlight); }
 .cv-p-attachment { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.35rem; color: inherit; }
 .cv-p-attachment--document { flex-direction: row; justify-content: space-between; min-height: var(--cv-p-i-touch); align-items: center; text-decoration: underline; }
 .cv-p-attachment__image { display: block; max-width: 100%; max-height: 16rem; object-fit: contain; }
@@ -1417,6 +1429,8 @@
   .cv-p-filters, .cv-p-quick { mask-image: none; -webkit-mask-image: none; }
   .cv-p-thread__latest-badge { border: 1px solid ButtonText; }
   .cv-p-bubble .cv-status-ticks, .cv-p-copyable__done { color: CanvasText; }
+  .cv-p-failed-menu__list { border-color: CanvasText; }
+  .cv-p-failed-menu__item:focus-visible, .cv-p-failed-menu__item:hover { outline: 2px solid Highlight; }
 }
 @media (forced-colors: active) {
   .cv-p-text__code, .cv-p-text__pre, .cv-p-copyable { border: 1px solid; background: none; }

package/src/tooltipLayerRegistry.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'bun:test'
+
+import { createTooltipLayerRegistry } from './tooltipLayerRegistry'
+
+function track() {
+  const events: boolean[] = []
+  return { events, notify: (isOwner: boolean) => void events.push(isOwner) }
+}
+
+describe('createTooltipLayerRegistry', () => {
+  it('makes the first mounted layer the owner and keeps the others quiet', () => {
+    const registry = createTooltipLayerRegistry()
+    const first = track()
+    const second = track()
+    registry.register({}, first.notify)
+    registry.register({}, second.notify)
+
+    expect(first.events).toEqual([true])
+    expect(second.events).toEqual([])
+  })
+
+  it('hands the ownership to the next mounted layer when the owner unmounts', () => {
+    const registry = createTooltipLayerRegistry()
+    const first = track()
+    const second = track()
+    const third = track()
+    const unmountFirst = registry.register({}, first.notify)
+    registry.register({}, second.notify)
+    registry.register({}, third.notify)
+
+    unmountFirst()
+
+    expect(second.events).toEqual([true])
+    expect(third.events).toEqual([])
+  })
+
+  it('does not disturb the owner when a waiting layer unmounts', () => {
+    const registry = createTooltipLayerRegistry()
+    const first = track()
+    const second = track()
+    registry.register({}, first.notify)
+    registry.register({}, second.notify)()
+
+    expect(first.events).toEqual([true])
+    expect(second.events).toEqual([])
+  })
+
+  it('lets a layer mounted after everyone left become the owner again', () => {
+    const registry = createTooltipLayerRegistry()
+    registry.register({}, () => undefined)()
+    const late = track()
+    registry.register({}, late.notify)
+
+    expect(late.events).toEqual([true])
+  })
+})

package/src/tooltipLayerRegistry.ts

@@ -0,0 +1,34 @@
+export type TooltipLayerRegistry = {
+  /** Mounts a layer; the callback hears when it becomes (true) or stops being (false) the one that draws. */
+  readonly register: (layer: object, onOwnershipChange: (isOwner: boolean) => void) => () => void
+}
+
+/** Layers in mount order: one draws at a time, and when it unmounts the next mounted one takes over. */
+export function createTooltipLayerRegistry(): TooltipLayerRegistry {
+  const layers = new Map<object, (isOwner: boolean) => void>()
+  let owner: object | undefined
+
+  function handOff(): void {
+    const next = layers.entries().next()
+    if (next.done) {
+      owner = undefined
+      return
+    }
+    const [layer, onOwnershipChange] = next.value
+    owner = layer
+    onOwnershipChange(true)
+  }
+
+  return {
+    register(layer, onOwnershipChange) {
+      layers.set(layer, onOwnershipChange)
+      if (owner === undefined) handOff()
+      return () => {
+        layers.delete(layer)
+        if (owner !== layer) return
+        owner = undefined
+        handOff()
+      }
+    },
+  }
+}