@devicai/ui 0.57.0 → 0.59.0

package/dist/esm/components/IntegrationsModal/IntegrationsHint.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntegrationsHint.js","sources":["../../../../src/components/IntegrationsModal/IntegrationsHint.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type JSX,\n} from \"react\";\nimport type { Integration } from \"../../api/types\";\nimport { IntegrationLogo } from \"./IntegrationLogo\";\nimport type { IntegrationsState } from \"./useIntegrations\";\nimport \"./IntegrationsModal.css\";\n\nexport interface IntegrationsHintProps {\n  /** Shared listing (see `useIntegrations`). */\n  state: IntegrationsState;\n  /** Opens the connected-apps modal. */\n  onOpen: () => void;\n  /**\n   * Text on the left. Defaults to \"Connect your apps\", or \"Explore connected\n   * apps\" once at least one is connected — an invitation the user has already\n   * accepted stops being an invitation.\n   */\n  label?: string;\n  /** Most logos to show before the `+N` box. @default 6 */\n  maxLogos?: number;\n  /**\n   * Identity the dismissal is remembered against, so closing it for one end\n   * user does not close it for the next one on the same browser.\n   */\n  storageKey?: string;\n  /** Where the bar flies to when closed — the header control. */\n  flyToSelector?: string;\n  /** Light chips for a dark surface. */\n  dark?: boolean;\n  className?: string;\n}\n\nconst STORAGE_PREFIX = \"devic:apps-hint-dismissed:\";\n\n/** Reading storage throws in Safari's private mode and in sandboxed frames. */\nfunction wasDismissed(key?: string): boolean {\n  if (!key) return false;\n  try {\n    return localStorage.getItem(STORAGE_PREFIX + key) === \"1\";\n  } catch {\n    return false;\n  }\n}\n\nfunction rememberDismissal(key?: string): void {\n  if (!key) return;\n  try {\n    localStorage.setItem(STORAGE_PREFIX + key, \"1\");\n  } catch {\n    // Then it comes back next session. Not worth a word to the user.\n  }\n}\n\n/** Connected first, same order as the header control. */\nfunction order(integrations: Integration[]): Integration[] {\n  return [...integrations].sort((a, b) => {\n    if (a.connected !== b.connected) return a.connected ? -1 : 1;\n    return 0;\n  });\n}\n\n/**\n * How many 24px chips fit once the label and the close button are paid for.\n *\n * The label is the whole reason this row exists, so it gets its space first:\n * a strip reading \"Connect your …\" beside seven logos has lost the argument.\n * Never fewer than three chips, below which the row stops reading as a set of\n * apps at all.\n */\nfunction boxesThatFit(width: number, max: number): number {\n  if (!width) return max + 1;\n  const LABEL_AND_CLOSE = 195;\n  return Math.max(3, Math.min(max + 1, Math.floor((width - LABEL_AND_CLOSE) / 30)));\n}\n\n/** Whether an element is on screen right now. */\nfunction isVisible(el: Element): boolean {\n  const r = el.getBoundingClientRect();\n  if (!r.width || !r.height) return false;\n  return (\n    r.bottom > 0 &&\n    r.right > 0 &&\n    r.top < window.innerHeight &&\n    r.left < window.innerWidth\n  );\n}\n\n/**\n * The header control this bar belongs to.\n *\n * Scoped to its own drawer first — a page can hold several, each with its own\n * header — and only then to the nearest visible one anywhere. The class name is\n * checked against both the drawer's own container and the legacy one, because\n * getting this wrong is silent: `closest` returns null, the search widens to the\n * whole document, and the copy flies to whichever control happens to be first\n * in the DOM.\n */\nfunction flyTarget(bar: Element, selector: string): HTMLElement | null {\n  if (!selector) return null;\n\n  const drawer = bar.closest(\".devic-chat-drawer, .devic-drawer\");\n  const own = drawer?.querySelector(selector) as HTMLElement | null;\n  if (own && isVisible(own)) return own;\n\n  const barRect = bar.getBoundingClientRect();\n  const candidates = [...document.querySelectorAll(selector)].filter(isVisible);\n  if (!candidates.length) return null;\n\n  // Nearest to the bar, so a page with several drawers still animates towards\n  // the one the user is looking at.\n  return candidates.reduce((best, el) => {\n    const d = (e: Element) => {\n      const r = e.getBoundingClientRect();\n      return Math.hypot(r.left - barRect.left, r.top - barRect.top);\n    };\n    return d(el) < d(best) ? el : best;\n  }) as HTMLElement;\n}\n\n/**\n * The strip above the composer that tells the end user their own apps can be\n * connected here.\n *\n * It exists because the header control is a row of small logos and nothing\n * else: discoverable once you know what it is, invisible until then. This says\n * it in words, once, and then gets out of the way for good — the dismissal is\n * remembered per end user, and closing it animates towards the header so that\n * what was dismissed is understood to still be there.\n */\nexport function IntegrationsHint({\n  state,\n  onOpen,\n  label,\n  maxLogos = 6,\n  storageKey,\n  flyToSelector = \".devic-int-launcher\",\n  dark = false,\n  className = \"\",\n}: IntegrationsHintProps): JSX.Element | null {\n  const sorted = useMemo(() => order(state.integrations), [state.integrations]);\n  const ref = useRef<HTMLDivElement>(null);\n  const [boxes, setBoxes] = useState(maxLogos + 1);\n  const [dismissed, setDismissed] = useState(() => wasDismissed(storageKey));\n  const [leaving, setLeaving] = useState(false);\n\n  // A different end user has their own answer to whether this was dismissed.\n  useEffect(() => {\n    setDismissed(wasDismissed(storageKey));\n    setLeaving(false);\n  }, [storageKey]);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el || typeof ResizeObserver === \"undefined\") return;\n    const measure = () =>\n      setBoxes(boxesThatFit(el.getBoundingClientRect().width, maxLogos));\n    measure();\n    const observer = new ResizeObserver(measure);\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [maxLogos, state.offered, dismissed]);\n\n  /**\n   * Sends a copy of the logos from the bar to the header control.\n   *\n   * A dismissal that simply blanks the row reads as \"that is gone now\". The\n   * flight is the sentence \"it moved up there\" said without words — so if it\n   * cannot be drawn (reduced motion, no target, no Web Animations API), the bar\n   * just closes and nothing is lost.\n   */\n  const flyToLauncher = useCallback(() => {\n    const bar = ref.current;\n    if (!bar || typeof document === \"undefined\") return;\n    if (window.matchMedia?.(\"(prefers-reduced-motion: reduce)\").matches) return;\n\n    const target = flyTarget(bar, flyToSelector);\n    // Nothing to fly to, or nothing the user can see: the bar just closes.\n    // A copy sailing off towards something 2000px down the page says the\n    // opposite of what this animation is for.\n    if (!target) return;\n\n    const logos = bar.querySelector(\".devic-int-hint-logos\");\n    const from = (logos ?? bar).getBoundingClientRect();\n    const to = target.getBoundingClientRect();\n\n    const ghost = (logos ?? bar).cloneNode(true) as HTMLElement;\n    ghost.classList.add(\"devic-int-hint-ghost\");\n    ghost.style.left = `${from.left}px`;\n    ghost.style.top = `${from.top}px`;\n    ghost.style.width = `${from.width}px`;\n    ghost.style.height = `${from.height}px`;\n    document.body.appendChild(ghost);\n\n    const dx = to.left + to.width / 2 - (from.left + from.width / 2);\n    const dy = to.top + to.height / 2 - (from.top + from.height / 2);\n    const scale = from.width ? Math.max(0.4, to.width / from.width) : 0.6;\n\n    // An arc, not a straight line. The bow is perpendicular to the path, which\n    // is what actually reads as a curve: this trip is nearly vertical, and\n    // pulling only on Y just makes it accelerate. It opens away from the\n    // target's side so the copy swings out and comes back in, and both terms\n    // scale with the distance — a short hop should not loop — and are capped so\n    // a long page does not throw it off screen.\n    const len = Math.hypot(dx, dy) || 1;\n    const bow = Math.min(48, Math.max(16, len * 0.18));\n    const side = dx <= 0 ? 1 : -1;\n    const bowX = ((-dy / len) * bow) * side;\n    const bowY = ((dx / len) * bow) * side;\n    const lift = Math.min(70, Math.max(18, len * 0.18));\n\n    // The curve the copy travels, as a quadratic Bézier through that midpoint.\n    // The control point is derived so the curve actually passes through it —\n    // a Bézier does not go through its control.\n    const midX = dx * 0.45 + bowX;\n    const midY = dy * 0.5 - lift + bowY;\n    const ctrlX = 2 * midX - dx / 2;\n    const ctrlY = 2 * midY - dy / 2;\n\n    // Sampled into many linear steps rather than three keyframes with an easing\n    // each. Per-keyframe easings ease OUT into the midpoint and IN out of it,\n    // which is a stop halfway — the shape was right and the motion was two\n    // hops. Here the keyframes carry only the shape, and one global easing\n    // carries the pace: speed builds to a peak at the centre and settles into\n    // the target.\n    const STEPS = 24;\n    // Above the 1.2 of a plain keyframe: this rides on top of the shrink\n    // towards the target's size, so the two partly cancel at the apex.\n    const PEAK = 1.35;\n    const frames = Array.from({ length: STEPS + 1 }, (_, i) => {\n      const t = i / STEPS;\n      const u = 1 - t;\n      return {\n        offset: t,\n        transform:\n          `translate(${2 * u * t * ctrlX + t * t * dx}px, ` +\n          `${2 * u * t * ctrlY + t * t * dy}px) ` +\n          // Swells on the way and shrinks into the header, so the eye follows\n          // the thing rather than the fade.\n          `scale(${1 + (scale - 1) * t + (PEAK - 1) * Math.sin(Math.PI * t)})`,\n        opacity: t <= 0.5 ? 1 : 1 - Math.pow((t - 0.5) * 2, 1.6),\n        easing: \"linear\",\n      };\n    });\n\n    const animation = ghost.animate?.(frames, {\n      duration: 780,\n      easing: \"cubic-bezier(0.5, 0, 0.5, 1)\",\n      fill: \"forwards\",\n    });\n\n    const remove = () => ghost.remove();\n    if (animation) animation.onfinish = remove;\n    else remove();\n    // Belt and braces: a tab backgrounded mid-flight never fires onfinish.\n    window.setTimeout(remove, 2000);\n  }, [flyToSelector]);\n\n  const dismiss = () => {\n    flyToLauncher();\n    rememberDismissal(storageKey);\n    setLeaving(true);\n    window.setTimeout(() => setDismissed(true), 220);\n  };\n\n  if (dismissed || !state.offered || sorted.length === 0) return null;\n\n  const text =\n    label ??\n    (sorted.some((i) => i.connected)\n      ? \"Explore connected apps\"\n      : \"Connect your apps\");\n\n  // When some apps will not fit, the `+N` box takes one of the slots itself.\n  const capacity = Math.max(1, boxes);\n  const shown = sorted.slice(\n    0,\n    sorted.length > capacity ? capacity - 1 : capacity\n  );\n  const extra = sorted.length - shown.length;\n\n  return (\n    <div\n      ref={ref}\n      className={`devic-int-hint ${className}`.trim()}\n      data-dark={dark}\n      data-leaving={leaving}\n    >\n      <button\n        type=\"button\"\n        className=\"devic-int-hint-main\"\n        onClick={onOpen}\n      >\n        <span className=\"devic-int-hint-label\">{text}</span>\n        <span className=\"devic-int-hint-logos\" aria-hidden=\"true\">\n          {shown.map((integration) => (\n            <span\n              key={integration.app}\n              className=\"devic-int-hint-item\"\n              data-connected={integration.connected}\n            >\n              <IntegrationLogo\n                integration={integration}\n                className=\"devic-int-hint-logo\"\n              />\n            </span>\n          ))}\n          {extra > 0 && (\n            <span className=\"devic-int-hint-item devic-int-hint-more\">\n              +{extra}\n            </span>\n          )}\n        </span>\n      </button>\n      <button\n        type=\"button\"\n        className=\"devic-int-hint-close\"\n        onClick={dismiss}\n        aria-label=\"Hide this\"\n        title=\"Hide this. Your apps stay in the header.\"\n      >\n        ×\n      </button>\n    </div>\n  );\n}\n\nexport default IntegrationsHint;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"IntegrationsHint.js","sources":["../../../../src/components/IntegrationsModal/IntegrationsHint.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type JSX,\n} from \"react\";\nimport type { Integration } from \"../../api/types\";\nimport { IntegrationLogo } from \"./IntegrationLogo\";\nimport { useTranslations } from \"../../i18n\";\nimport type { IntegrationsState } from \"./useIntegrations\";\nimport \"./IntegrationsModal.css\";\n\nexport interface IntegrationsHintProps {\n  /** Shared listing (see `useIntegrations`). */\n  state: IntegrationsState;\n  /** Opens the connected-apps modal. */\n  onOpen: () => void;\n  /**\n   * Text on the left. Defaults to \"Connect your apps\", or \"Explore connected\n   * apps\" once at least one is connected — an invitation the user has already\n   * accepted stops being an invitation.\n   */\n  label?: string;\n  /** Most logos to show before the `+N` box. @default 6 */\n  maxLogos?: number;\n  /**\n   * Identity the dismissal is remembered against, so closing it for one end\n   * user does not close it for the next one on the same browser.\n   */\n  storageKey?: string;\n  /** Where the bar flies to when closed — the header control. */\n  flyToSelector?: string;\n  /** Light chips for a dark surface. */\n  dark?: boolean;\n  className?: string;\n}\n\nconst STORAGE_PREFIX = \"devic:apps-hint-dismissed:\";\n\n/** Reading storage throws in Safari's private mode and in sandboxed frames. */\nfunction wasDismissed(key?: string): boolean {\n  if (!key) return false;\n  try {\n    return localStorage.getItem(STORAGE_PREFIX + key) === \"1\";\n  } catch {\n    return false;\n  }\n}\n\nfunction rememberDismissal(key?: string): void {\n  if (!key) return;\n  try {\n    localStorage.setItem(STORAGE_PREFIX + key, \"1\");\n  } catch {\n    // Then it comes back next session. Not worth a word to the user.\n  }\n}\n\n/** Connected first, same order as the header control. */\nfunction order(integrations: Integration[]): Integration[] {\n  return [...integrations].sort((a, b) => {\n    if (a.connected !== b.connected) return a.connected ? -1 : 1;\n    return 0;\n  });\n}\n\n/**\n * How many 24px chips fit once the label and the close button are paid for.\n *\n * The label is the whole reason this row exists, so it gets its space first:\n * a strip reading \"Connect your …\" beside seven logos has lost the argument.\n * Never fewer than three chips, below which the row stops reading as a set of\n * apps at all.\n */\nfunction boxesThatFit(width: number, max: number): number {\n  if (!width) return max + 1;\n  const LABEL_AND_CLOSE = 195;\n  return Math.max(3, Math.min(max + 1, Math.floor((width - LABEL_AND_CLOSE) / 30)));\n}\n\n/** Whether an element is on screen right now. */\nfunction isVisible(el: Element): boolean {\n  const r = el.getBoundingClientRect();\n  if (!r.width || !r.height) return false;\n  return (\n    r.bottom > 0 &&\n    r.right > 0 &&\n    r.top < window.innerHeight &&\n    r.left < window.innerWidth\n  );\n}\n\n/**\n * The header control this bar belongs to.\n *\n * Scoped to its own drawer first — a page can hold several, each with its own\n * header — and only then to the nearest visible one anywhere. The class name is\n * checked against both the drawer's own container and the legacy one, because\n * getting this wrong is silent: `closest` returns null, the search widens to the\n * whole document, and the copy flies to whichever control happens to be first\n * in the DOM.\n */\nfunction flyTarget(bar: Element, selector: string): HTMLElement | null {\n  if (!selector) return null;\n\n  const drawer = bar.closest(\".devic-chat-drawer, .devic-drawer\");\n  const own = drawer?.querySelector(selector) as HTMLElement | null;\n  if (own && isVisible(own)) return own;\n\n  const barRect = bar.getBoundingClientRect();\n  const candidates = [...document.querySelectorAll(selector)].filter(isVisible);\n  if (!candidates.length) return null;\n\n  // Nearest to the bar, so a page with several drawers still animates towards\n  // the one the user is looking at.\n  return candidates.reduce((best, el) => {\n    const d = (e: Element) => {\n      const r = e.getBoundingClientRect();\n      return Math.hypot(r.left - barRect.left, r.top - barRect.top);\n    };\n    return d(el) < d(best) ? el : best;\n  }) as HTMLElement;\n}\n\n/**\n * The strip above the composer that tells the end user their own apps can be\n * connected here.\n *\n * It exists because the header control is a row of small logos and nothing\n * else: discoverable once you know what it is, invisible until then. This says\n * it in words, once, and then gets out of the way for good — the dismissal is\n * remembered per end user, and closing it animates towards the header so that\n * what was dismissed is understood to still be there.\n */\nexport function IntegrationsHint({\n  state,\n  onOpen,\n  label,\n  maxLogos = 6,\n  storageKey,\n  flyToSelector = \".devic-int-launcher\",\n  dark = false,\n  className = \"\",\n}: IntegrationsHintProps): JSX.Element | null {\n  const t = useTranslations();\n  const sorted = useMemo(() => order(state.integrations), [state.integrations]);\n  const ref = useRef<HTMLDivElement>(null);\n  const [boxes, setBoxes] = useState(maxLogos + 1);\n  const [dismissed, setDismissed] = useState(() => wasDismissed(storageKey));\n  const [leaving, setLeaving] = useState(false);\n\n  // A different end user has their own answer to whether this was dismissed.\n  useEffect(() => {\n    setDismissed(wasDismissed(storageKey));\n    setLeaving(false);\n  }, [storageKey]);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el || typeof ResizeObserver === \"undefined\") return;\n    const measure = () =>\n      setBoxes(boxesThatFit(el.getBoundingClientRect().width, maxLogos));\n    measure();\n    const observer = new ResizeObserver(measure);\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [maxLogos, state.offered, dismissed]);\n\n  /**\n   * Sends a copy of the logos from the bar to the header control.\n   *\n   * A dismissal that simply blanks the row reads as \"that is gone now\". The\n   * flight is the sentence \"it moved up there\" said without words — so if it\n   * cannot be drawn (reduced motion, no target, no Web Animations API), the bar\n   * just closes and nothing is lost.\n   */\n  const flyToLauncher = useCallback(() => {\n    const bar = ref.current;\n    if (!bar || typeof document === \"undefined\") return;\n    if (window.matchMedia?.(\"(prefers-reduced-motion: reduce)\").matches) return;\n\n    const target = flyTarget(bar, flyToSelector);\n    // Nothing to fly to, or nothing the user can see: the bar just closes.\n    // A copy sailing off towards something 2000px down the page says the\n    // opposite of what this animation is for.\n    if (!target) return;\n\n    const logos = bar.querySelector(\".devic-int-hint-logos\");\n    const from = (logos ?? bar).getBoundingClientRect();\n    const to = target.getBoundingClientRect();\n\n    const ghost = (logos ?? bar).cloneNode(true) as HTMLElement;\n    ghost.classList.add(\"devic-int-hint-ghost\");\n    ghost.style.left = `${from.left}px`;\n    ghost.style.top = `${from.top}px`;\n    ghost.style.width = `${from.width}px`;\n    ghost.style.height = `${from.height}px`;\n    document.body.appendChild(ghost);\n\n    const dx = to.left + to.width / 2 - (from.left + from.width / 2);\n    const dy = to.top + to.height / 2 - (from.top + from.height / 2);\n    const scale = from.width ? Math.max(0.4, to.width / from.width) : 0.6;\n\n    // An arc, not a straight line. The bow is perpendicular to the path, which\n    // is what actually reads as a curve: this trip is nearly vertical, and\n    // pulling only on Y just makes it accelerate. It opens away from the\n    // target's side so the copy swings out and comes back in, and both terms\n    // scale with the distance — a short hop should not loop — and are capped so\n    // a long page does not throw it off screen.\n    const len = Math.hypot(dx, dy) || 1;\n    const bow = Math.min(48, Math.max(16, len * 0.18));\n    const side = dx <= 0 ? 1 : -1;\n    const bowX = ((-dy / len) * bow) * side;\n    const bowY = ((dx / len) * bow) * side;\n    const lift = Math.min(70, Math.max(18, len * 0.18));\n\n    // The curve the copy travels, as a quadratic Bézier through that midpoint.\n    // The control point is derived so the curve actually passes through it —\n    // a Bézier does not go through its control.\n    const midX = dx * 0.45 + bowX;\n    const midY = dy * 0.5 - lift + bowY;\n    const ctrlX = 2 * midX - dx / 2;\n    const ctrlY = 2 * midY - dy / 2;\n\n    // Sampled into many linear steps rather than three keyframes with an easing\n    // each. Per-keyframe easings ease OUT into the midpoint and IN out of it,\n    // which is a stop halfway — the shape was right and the motion was two\n    // hops. Here the keyframes carry only the shape, and one global easing\n    // carries the pace: speed builds to a peak at the centre and settles into\n    // the target.\n    const STEPS = 24;\n    // Above the 1.2 of a plain keyframe: this rides on top of the shrink\n    // towards the target's size, so the two partly cancel at the apex.\n    const PEAK = 1.35;\n    const frames = Array.from({ length: STEPS + 1 }, (_, i) => {\n      const t = i / STEPS;\n      const u = 1 - t;\n      return {\n        offset: t,\n        transform:\n          `translate(${2 * u * t * ctrlX + t * t * dx}px, ` +\n          `${2 * u * t * ctrlY + t * t * dy}px) ` +\n          // Swells on the way and shrinks into the header, so the eye follows\n          // the thing rather than the fade.\n          `scale(${1 + (scale - 1) * t + (PEAK - 1) * Math.sin(Math.PI * t)})`,\n        opacity: t <= 0.5 ? 1 : 1 - Math.pow((t - 0.5) * 2, 1.6),\n        easing: \"linear\",\n      };\n    });\n\n    const animation = ghost.animate?.(frames, {\n      duration: 780,\n      easing: \"cubic-bezier(0.5, 0, 0.5, 1)\",\n      fill: \"forwards\",\n    });\n\n    const remove = () => ghost.remove();\n    if (animation) animation.onfinish = remove;\n    else remove();\n    // Belt and braces: a tab backgrounded mid-flight never fires onfinish.\n    window.setTimeout(remove, 2000);\n  }, [flyToSelector]);\n\n  const dismiss = () => {\n    flyToLauncher();\n    rememberDismissal(storageKey);\n    setLeaving(true);\n    window.setTimeout(() => setDismissed(true), 220);\n  };\n\n  if (dismissed || !state.offered || sorted.length === 0) return null;\n\n  const text =\n    label ??\n    (sorted.some((i) => i.connected)\n      ? t(\"Explore connected apps\")\n      : t(\"Connect your apps\"));\n\n  // When some apps will not fit, the `+N` box takes one of the slots itself.\n  const capacity = Math.max(1, boxes);\n  const shown = sorted.slice(\n    0,\n    sorted.length > capacity ? capacity - 1 : capacity\n  );\n  const extra = sorted.length - shown.length;\n\n  return (\n    <div\n      ref={ref}\n      className={`devic-int-hint ${className}`.trim()}\n      data-dark={dark}\n      data-leaving={leaving}\n    >\n      <button\n        type=\"button\"\n        className=\"devic-int-hint-main\"\n        onClick={onOpen}\n      >\n        <span className=\"devic-int-hint-label\">{text}</span>\n        <span className=\"devic-int-hint-logos\" aria-hidden=\"true\">\n          {shown.map((integration) => (\n            <span\n              key={integration.app}\n              className=\"devic-int-hint-item\"\n              data-connected={integration.connected}\n            >\n              <IntegrationLogo\n                integration={integration}\n                className=\"devic-int-hint-logo\"\n              />\n            </span>\n          ))}\n          {extra > 0 && (\n            <span className=\"devic-int-hint-item devic-int-hint-more\">\n              +{extra}\n            </span>\n          )}\n        </span>\n      </button>\n      <button\n        type=\"button\"\n        className=\"devic-int-hint-close\"\n        onClick={dismiss}\n        aria-label={t(\"Hide this\")}\n        title={t(\"Hide this. Your apps stay in the header.\")}\n      >\n        ×\n      </button>\n    </div>\n  );\n}\n\nexport default IntegrationsHint;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/IntegrationsModal/IntegrationsLauncher.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo, useRef, useState, useEffect } from 'react';
 import { IntegrationLogo } from './IntegrationLogo.js';
+import { useTranslations } from '../../i18n/useTranslations.js';
 
 /** How many logos fit before the rest are counted instead. */
 const DEFAULT_MAX_LOGOS = 6;
@@ -38,7 +39,11 @@ function logosThatFit(hostWidth, max) {
  * it promises the end user something the assistant was never configured to
  * give them.
  */
-function IntegrationsLauncher({ state, mcp, onClick, label = "Connected apps", maxLogos = DEFAULT_MAX_LOGOS, dark = false, placeholders = 0, loading = false, className = "", }) {
+function IntegrationsLauncher({ state, mcp, onClick, label, maxLogos = DEFAULT_MAX_LOGOS, dark = false, placeholders = 0, loading = false, className = "", }) {
+    const t = useTranslations();
+    // The host's own label wins; with none, the default goes through the
+    // dictionary like every other text the launcher renders.
+    const text = label ?? t("Connected apps");
     const sorted = useMemo(() => order(state.integrations), [state.integrations]);
     // Only the servers this tenant actually connected: an offer they have not
     // taken up is not a logo, it is an invitation, and the modal is where
@@ -62,7 +67,7 @@ function IntegrationsLauncher({ state, mcp, onClick, label = "Connected apps", m
     // when the logos land.
     const holding = placeholders > 0 ? placeholders : loading ? 1 : 0;
     if (sorted.length === 0 && mcpConnected.length === 0 && holding > 0) {
-        return (jsx("span", { className: `devic-int-launcher devic-int-launcher-loading ${className}`.trim(), "data-dark": dark, "aria-busy": "true", "aria-label": `${label} (loading)`, children: Array.from({ length: Math.min(holding, Math.max(1, fit)) }).map((_, i) => (jsx("span", { className: "devic-int-launcher-item devic-int-launcher-skeleton" }, i))) }));
+        return (jsx("span", { className: `devic-int-launcher devic-int-launcher-loading ${className}`.trim(), "data-dark": dark, "aria-busy": "true", "aria-label": t("{label} (loading)", { label: text }), children: Array.from({ length: Math.min(holding, Math.max(1, fit)) }).map((_, i) => (jsx("span", { className: "devic-int-launcher-item devic-int-launcher-skeleton" }, i))) }));
     }
     const offersApps = state.offered && sorted.length > 0;
     if (!offersApps && mcpConnected.length === 0)
@@ -75,7 +80,11 @@ function IntegrationsLauncher({ state, mcp, onClick, label = "Connected apps", m
     const extra = total - appsShown.length - mcpShown.length;
     const connected = sorted.filter((i) => i.connected).length +
         mcpConnected.filter((s) => s.connection?.status === "active").length;
-    return (jsxs("button", { type: "button", ref: ref, className: `devic-int-launcher ${className}`.trim(), "data-dark": dark, onClick: onClick, title: label, "aria-label": `${label} (${connected}/${total} connected)`, children: [appsShown.map((integration) => (jsx("span", { className: "devic-int-launcher-item", "data-connected": integration.connected, title: integration.name, children: jsx(IntegrationLogo, { integration: integration, className: "devic-int-launcher-logo" }) }, integration.app))), mcpShown.map((server) => (jsx("span", { className: "devic-int-launcher-item", "data-connected": server.connection.status === "active", title: server.name, children: server.logoUrl ? (jsx("img", { className: "devic-int-launcher-logo", src: server.logoUrl, alt: "", "aria-hidden": "true" })) : (jsx("span", { className: "devic-int-launcher-logo devic-int-launcher-initial", children: server.name.slice(0, 1).toUpperCase() })) }, server.connection.id))), extra > 0 && (jsxs("span", { className: "devic-int-launcher-item devic-int-launcher-more", children: ["+", extra] }))] }));
+    return (jsxs("button", { type: "button", ref: ref, className: `devic-int-launcher ${className}`.trim(), "data-dark": dark, onClick: onClick, title: text, "aria-label": t("{label} ({connected}/{total} connected)", {
+            label: text,
+            connected,
+            total,
+        }), children: [appsShown.map((integration) => (jsx("span", { className: "devic-int-launcher-item", "data-connected": integration.connected, title: integration.name, children: jsx(IntegrationLogo, { integration: integration, className: "devic-int-launcher-logo" }) }, integration.app))), mcpShown.map((server) => (jsx("span", { className: "devic-int-launcher-item", "data-connected": server.connection.status === "active", title: server.name, children: server.logoUrl ? (jsx("img", { className: "devic-int-launcher-logo", src: server.logoUrl, alt: "", "aria-hidden": "true" })) : (jsx("span", { className: "devic-int-launcher-logo devic-int-launcher-initial", children: server.name.slice(0, 1).toUpperCase() })) }, server.connection.id))), extra > 0 && (jsxs("span", { className: "devic-int-launcher-item devic-int-launcher-more", children: ["+", extra] }))] }));
 }
 
 export { DEFAULT_MAX_LOGOS, IntegrationsLauncher };

package/dist/esm/components/IntegrationsModal/IntegrationsLauncher.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntegrationsLauncher.js","sources":["../../../../src/components/IntegrationsModal/IntegrationsLauncher.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState, type JSX } from \"react\";\nimport type { Integration, TenantMcpServer } from \"../../api/types\";\nimport { IntegrationLogo } from \"./IntegrationLogo\";\nimport type { IntegrationsState } from \"./useIntegrations\";\nimport type { TenantMcpState } from \"./useTenantMcp\";\nimport \"./IntegrationsModal.css\";\n\n/** How many logos fit before the rest are counted instead. */\nexport const DEFAULT_MAX_LOGOS = 6;\n\nexport interface IntegrationsLauncherProps {\n  /** Shared listing, so this and the modal load the catalogue once. */\n  state: IntegrationsState;\n  /**\n   * The tenant's own MCP servers, when offered. Counted here because an\n   * assistant may offer nothing but those, and a control that only knew about\n   * apps would leave that panel with no way in.\n   */\n  mcp?: TenantMcpState;\n  onClick: () => void;\n  /** Tooltip and accessible name. @default \"Connected apps\" */\n  label?: string;\n  /** Logos shown before the `+N` box. @default 6 */\n  maxLogos?: number;\n  /**\n   * Whether the surrounding surface is dark, so the logo chips go light. Many\n   * app logos are solid black on transparency and vanish otherwise.\n   */\n  dark?: boolean;\n  /**\n   * How many placeholder chips to hold while the listing is on its way.\n   *\n   * Only pass a number when the apps are known to exist — the assistant having\n   * said so — never on the chance that they might. A placeholder is a promise\n   * that something is coming, and one that resolves to nothing is worse than\n   * the gap it filled.\n   */\n  placeholders?: number;\n  /**\n   * Whether the requests that decide if this control exists are still running.\n   *\n   * Unlike `placeholders`, this makes no claim about what will arrive — only\n   * that the answer is not in yet. It holds a single chip, which is the\n   * smallest promise that can be made, and is the difference between a header\n   * that fills in and one that appears to change its mind.\n   */\n  loading?: boolean;\n  className?: string;\n}\n\n/** Connected first: with more apps than fit, those are the ones worth showing. */\nfunction order(integrations: Integration[]): Integration[] {\n  return [...integrations].sort((a, b) => {\n    if (a.connected !== b.connected) return a.connected ? -1 : 1;\n    return 0;\n  });\n}\n\n/**\n * Logos a row this wide can afford.\n *\n * The stack shares the drawer header with a title, the conversation picker and\n * two more buttons, and a 400px drawer is the common case. Six logos there push\n * the picker down to a stub — so on a narrow header the count drops and the\n * `+N` box absorbs the difference, which is what it is for.\n */\nfunction logosThatFit(hostWidth: number, max: number): number {\n  if (!hostWidth) return max;\n  if (hostWidth >= 520) return max;\n  if (hostWidth >= 460) return Math.min(max, 5);\n  return Math.min(max, 4);\n}\n\n/**\n * The header control that opens the connected-apps modal, drawn as the real\n * logos of the apps on offer.\n *\n * It renders nothing until the server has confirmed the assistant offers apps\n * to its tenants. A button that opens an empty dialog is worse than no button:\n * it promises the end user something the assistant was never configured to\n * give them.\n */\nexport function IntegrationsLauncher({\n  state,\n  mcp,\n  onClick,\n  label = \"Connected apps\",\n  maxLogos = DEFAULT_MAX_LOGOS,\n  dark = false,\n  placeholders = 0,\n  loading = false,\n  className = \"\",\n}: IntegrationsLauncherProps): JSX.Element | null {\n  const sorted = useMemo(() => order(state.integrations), [state.integrations]);\n  // Only the servers this tenant actually connected: an offer they have not\n  // taken up is not a logo, it is an invitation, and the modal is where\n  // invitations belong.\n  const mcpConnected = useMemo(\n    () => (mcp?.offered ? (mcp.servers ?? []).filter((s) => s.connection) : []),\n    [mcp?.offered, mcp?.servers]\n  );\n  const ref = useRef<HTMLButtonElement>(null);\n  const [fit, setFit] = useState(maxLogos);\n\n  useEffect(() => {\n    const host =\n      ref.current?.closest(\".devic-drawer-header\") ??\n      ref.current?.parentElement;\n    if (!host || typeof ResizeObserver === \"undefined\") return;\n    const measure = () =>\n      setFit(logosThatFit(host.getBoundingClientRect().width, maxLogos));\n    measure();\n    const observer = new ResizeObserver(measure);\n    observer.observe(host);\n    return () => observer.disconnect();\n  }, [maxLogos, state.offered]);\n\n  // Nothing yet, but the assistant has already said there will be — or the\n  // answer is simply not in. Hold the shape rather than let the header reflow\n  // when the logos land.\n  const holding = placeholders > 0 ? placeholders : loading ? 1 : 0;\n  if (sorted.length === 0 && mcpConnected.length === 0 && holding > 0) {\n    return (\n      <span\n        className={`devic-int-launcher devic-int-launcher-loading ${className}`.trim()}\n        data-dark={dark}\n        aria-busy=\"true\"\n        aria-label={`${label} (loading)`}\n      >\n        {Array.from({ length: Math.min(holding, Math.max(1, fit)) }).map(\n          (_, i) => (\n            <span\n              key={i}\n              className=\"devic-int-launcher-item devic-int-launcher-skeleton\"\n            />\n          )\n        )}\n      </span>\n    );\n  }\n\n  const offersApps = state.offered && sorted.length > 0;\n  if (!offersApps && mcpConnected.length === 0) return null;\n\n  const appsShown = offersApps ? sorted.slice(0, Math.max(1, fit)) : [];\n  // Servers fill whatever room the apps left, so an assistant with both does\n  // not push the header wider than it was.\n  const mcpShown = mcpConnected.slice(\n    0,\n    Math.max(offersApps ? 0 : 1, Math.max(1, fit) - appsShown.length)\n  );\n  const total = sorted.length + mcpConnected.length;\n  const extra = total - appsShown.length - mcpShown.length;\n  const connected =\n    sorted.filter((i) => i.connected).length +\n    mcpConnected.filter((s) => s.connection?.status === \"active\").length;\n\n  return (\n    <button\n      type=\"button\"\n      ref={ref}\n      className={`devic-int-launcher ${className}`.trim()}\n      data-dark={dark}\n      onClick={onClick}\n      title={label}\n      aria-label={`${label} (${connected}/${total} connected)`}\n    >\n      {appsShown.map((integration) => (\n        <span\n          key={integration.app}\n          className=\"devic-int-launcher-item\"\n          // Dimmed until connected, so the stack doubles as the status: the\n          // end user can see at a glance which of their apps are set up.\n          data-connected={integration.connected}\n          title={integration.name}\n        >\n          <IntegrationLogo\n            integration={integration}\n            className=\"devic-int-launcher-logo\"\n          />\n        </span>\n      ))}\n      {mcpShown.map((server) => (\n        <span\n          key={server.connection!.id}\n          className=\"devic-int-launcher-item\"\n          data-connected={server.connection!.status === \"active\"}\n          title={server.name}\n        >\n          {server.logoUrl ? (\n            <img\n              className=\"devic-int-launcher-logo\"\n              src={server.logoUrl}\n              alt=\"\"\n              aria-hidden=\"true\"\n            />\n          ) : (\n            <span className=\"devic-int-launcher-logo devic-int-launcher-initial\">\n              {server.name.slice(0, 1).toUpperCase()}\n            </span>\n          )}\n        </span>\n      ))}\n      {extra > 0 && (\n        <span className=\"devic-int-launcher-item devic-int-launcher-more\">\n          +{extra}\n        </span>\n      )}\n    </button>\n  );\n}\n\nexport default IntegrationsLauncher;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"IntegrationsLauncher.js","sources":["../../../../src/components/IntegrationsModal/IntegrationsLauncher.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState, type JSX } from \"react\";\nimport type { Integration, TenantMcpServer } from \"../../api/types\";\nimport { IntegrationLogo } from \"./IntegrationLogo\";\nimport { useTranslations } from \"../../i18n\";\nimport type { IntegrationsState } from \"./useIntegrations\";\nimport type { TenantMcpState } from \"./useTenantMcp\";\nimport \"./IntegrationsModal.css\";\n\n/** How many logos fit before the rest are counted instead. */\nexport const DEFAULT_MAX_LOGOS = 6;\n\nexport interface IntegrationsLauncherProps {\n  /** Shared listing, so this and the modal load the catalogue once. */\n  state: IntegrationsState;\n  /**\n   * The tenant's own MCP servers, when offered. Counted here because an\n   * assistant may offer nothing but those, and a control that only knew about\n   * apps would leave that panel with no way in.\n   */\n  mcp?: TenantMcpState;\n  onClick: () => void;\n  /** Tooltip and accessible name. @default \"Connected apps\" */\n  label?: string;\n  /** Logos shown before the `+N` box. @default 6 */\n  maxLogos?: number;\n  /**\n   * Whether the surrounding surface is dark, so the logo chips go light. Many\n   * app logos are solid black on transparency and vanish otherwise.\n   */\n  dark?: boolean;\n  /**\n   * How many placeholder chips to hold while the listing is on its way.\n   *\n   * Only pass a number when the apps are known to exist — the assistant having\n   * said so — never on the chance that they might. A placeholder is a promise\n   * that something is coming, and one that resolves to nothing is worse than\n   * the gap it filled.\n   */\n  placeholders?: number;\n  /**\n   * Whether the requests that decide if this control exists are still running.\n   *\n   * Unlike `placeholders`, this makes no claim about what will arrive — only\n   * that the answer is not in yet. It holds a single chip, which is the\n   * smallest promise that can be made, and is the difference between a header\n   * that fills in and one that appears to change its mind.\n   */\n  loading?: boolean;\n  className?: string;\n}\n\n/** Connected first: with more apps than fit, those are the ones worth showing. */\nfunction order(integrations: Integration[]): Integration[] {\n  return [...integrations].sort((a, b) => {\n    if (a.connected !== b.connected) return a.connected ? -1 : 1;\n    return 0;\n  });\n}\n\n/**\n * Logos a row this wide can afford.\n *\n * The stack shares the drawer header with a title, the conversation picker and\n * two more buttons, and a 400px drawer is the common case. Six logos there push\n * the picker down to a stub — so on a narrow header the count drops and the\n * `+N` box absorbs the difference, which is what it is for.\n */\nfunction logosThatFit(hostWidth: number, max: number): number {\n  if (!hostWidth) return max;\n  if (hostWidth >= 520) return max;\n  if (hostWidth >= 460) return Math.min(max, 5);\n  return Math.min(max, 4);\n}\n\n/**\n * The header control that opens the connected-apps modal, drawn as the real\n * logos of the apps on offer.\n *\n * It renders nothing until the server has confirmed the assistant offers apps\n * to its tenants. A button that opens an empty dialog is worse than no button:\n * it promises the end user something the assistant was never configured to\n * give them.\n */\nexport function IntegrationsLauncher({\n  state,\n  mcp,\n  onClick,\n  label,\n  maxLogos = DEFAULT_MAX_LOGOS,\n  dark = false,\n  placeholders = 0,\n  loading = false,\n  className = \"\",\n}: IntegrationsLauncherProps): JSX.Element | null {\n  const t = useTranslations();\n  // The host's own label wins; with none, the default goes through the\n  // dictionary like every other text the launcher renders.\n  const text = label ?? t(\"Connected apps\");\n  const sorted = useMemo(() => order(state.integrations), [state.integrations]);\n  // Only the servers this tenant actually connected: an offer they have not\n  // taken up is not a logo, it is an invitation, and the modal is where\n  // invitations belong.\n  const mcpConnected = useMemo(\n    () => (mcp?.offered ? (mcp.servers ?? []).filter((s) => s.connection) : []),\n    [mcp?.offered, mcp?.servers]\n  );\n  const ref = useRef<HTMLButtonElement>(null);\n  const [fit, setFit] = useState(maxLogos);\n\n  useEffect(() => {\n    const host =\n      ref.current?.closest(\".devic-drawer-header\") ??\n      ref.current?.parentElement;\n    if (!host || typeof ResizeObserver === \"undefined\") return;\n    const measure = () =>\n      setFit(logosThatFit(host.getBoundingClientRect().width, maxLogos));\n    measure();\n    const observer = new ResizeObserver(measure);\n    observer.observe(host);\n    return () => observer.disconnect();\n  }, [maxLogos, state.offered]);\n\n  // Nothing yet, but the assistant has already said there will be — or the\n  // answer is simply not in. Hold the shape rather than let the header reflow\n  // when the logos land.\n  const holding = placeholders > 0 ? placeholders : loading ? 1 : 0;\n  if (sorted.length === 0 && mcpConnected.length === 0 && holding > 0) {\n    return (\n      <span\n        className={`devic-int-launcher devic-int-launcher-loading ${className}`.trim()}\n        data-dark={dark}\n        aria-busy=\"true\"\n        aria-label={t(\"{label} (loading)\", { label: text })}\n      >\n        {Array.from({ length: Math.min(holding, Math.max(1, fit)) }).map(\n          (_, i) => (\n            <span\n              key={i}\n              className=\"devic-int-launcher-item devic-int-launcher-skeleton\"\n            />\n          )\n        )}\n      </span>\n    );\n  }\n\n  const offersApps = state.offered && sorted.length > 0;\n  if (!offersApps && mcpConnected.length === 0) return null;\n\n  const appsShown = offersApps ? sorted.slice(0, Math.max(1, fit)) : [];\n  // Servers fill whatever room the apps left, so an assistant with both does\n  // not push the header wider than it was.\n  const mcpShown = mcpConnected.slice(\n    0,\n    Math.max(offersApps ? 0 : 1, Math.max(1, fit) - appsShown.length)\n  );\n  const total = sorted.length + mcpConnected.length;\n  const extra = total - appsShown.length - mcpShown.length;\n  const connected =\n    sorted.filter((i) => i.connected).length +\n    mcpConnected.filter((s) => s.connection?.status === \"active\").length;\n\n  return (\n    <button\n      type=\"button\"\n      ref={ref}\n      className={`devic-int-launcher ${className}`.trim()}\n      data-dark={dark}\n      onClick={onClick}\n      title={text}\n      aria-label={t(\"{label} ({connected}/{total} connected)\", {\n        label: text,\n        connected,\n        total,\n      })}\n    >\n      {appsShown.map((integration) => (\n        <span\n          key={integration.app}\n          className=\"devic-int-launcher-item\"\n          // Dimmed until connected, so the stack doubles as the status: the\n          // end user can see at a glance which of their apps are set up.\n          data-connected={integration.connected}\n          title={integration.name}\n        >\n          <IntegrationLogo\n            integration={integration}\n            className=\"devic-int-launcher-logo\"\n          />\n        </span>\n      ))}\n      {mcpShown.map((server) => (\n        <span\n          key={server.connection!.id}\n          className=\"devic-int-launcher-item\"\n          data-connected={server.connection!.status === \"active\"}\n          title={server.name}\n        >\n          {server.logoUrl ? (\n            <img\n              className=\"devic-int-launcher-logo\"\n              src={server.logoUrl}\n              alt=\"\"\n              aria-hidden=\"true\"\n            />\n          ) : (\n            <span className=\"devic-int-launcher-logo devic-int-launcher-initial\">\n              {server.name.slice(0, 1).toUpperCase()}\n            </span>\n          )}\n        </span>\n      ))}\n      {extra > 0 && (\n        <span className=\"devic-int-launcher-item devic-int-launcher-more\">\n          +{extra}\n        </span>\n      )}\n    </button>\n  );\n}\n\nexport default IntegrationsLauncher;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/components/IntegrationsModal/IntegrationsModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntegrationsModal.js","sources":["../../../../src/components/IntegrationsModal/IntegrationsModal.tsx"],"sourcesContent":["import type { JSX } from \"react\";\nimport { IntegrationsPanel, type IntegrationsPanelProps } from \"./IntegrationsPanel\";\n\nexport interface IntegrationsModalProps\n  extends Omit<IntegrationsPanelProps, \"active\" | \"dialog\" | \"onClose\"> {\n  /** Whether the modal is visible. */\n  isOpen: boolean;\n  onClose: () => void;\n}\n\n/**\n * Modal where the END USER of an application manages their *own* third-party\n * accounts: the apps the developer offered to tenants of this assistant, each\n * with the accounts this tenant has connected, and the buttons to add or\n * remove one.\n *\n * The dialog shape of `IntegrationsPanel`, which is where all of it lives —\n * see there for what it does and why. Use that one directly to put the same\n * content in a page instead of over it.\n *\n * Closed, it stays mounted and simply renders nothing: what it has already\n * loaded survives, so reopening costs a re-read rather than the whole listing\n * again.\n */\nexport function IntegrationsModal({\n  isOpen,\n  ...rest\n}: IntegrationsModalProps): JSX.Element | null {\n  return <IntegrationsPanel {...rest} active={isOpen} dialog />;\n}\n\nexport default IntegrationsModal;\n"],"names":["_jsx"],"mappings":";;;AAUA;;;;;;;;;;;;;AAaG;AACG,SAAU,iBAAiB,CAAC,EAChC,MAAM,EACN,GAAG,IAAI,EACgB,EAAA;IACvB,OAAOA,GAAA,CAAC,iBAAiB,EAAA,EAAA,GAAK,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAA,IAAA,EAAA,CAAG;AAC/D;;"}
+{"version":3,"file":"IntegrationsModal.js","sources":["../../../../src/components/IntegrationsModal/IntegrationsModal.tsx"],"sourcesContent":["import type { JSX } from \"react\";\nimport { IntegrationsPanel, type IntegrationsPanelProps } from \"./IntegrationsPanel\";\n\nexport interface IntegrationsModalProps\n  extends Omit<IntegrationsPanelProps, \"active\" | \"dialog\" | \"onClose\"> {\n  /** Whether the modal is visible. */\n  isOpen: boolean;\n  onClose: () => void;\n}\n\n/**\n * Modal where the END USER of an application manages their *own* third-party\n * accounts: the apps the developer offered to tenants of this assistant, each\n * with the accounts this tenant has connected, and the buttons to add or\n * remove one.\n *\n * The dialog shape of `IntegrationsPanel`, which is where all of it lives —\n * see there for what it does and why. Use that one directly to put the same\n * content in a page instead of over it.\n *\n * Closed, it stays mounted and simply renders nothing: what it has already\n * loaded survives, so reopening costs a re-read rather than the whole listing\n * again.\n */\nexport function IntegrationsModal({\n  isOpen,\n  ...rest\n}: IntegrationsModalProps): JSX.Element | null {\n  return <IntegrationsPanel {...rest} active={isOpen} dialog />;\n}\n\nexport default IntegrationsModal;\n"],"names":["_jsx"],"mappings":";;;AAUA;;;;;;;;;;;;;AAaG;AACG,SAAU,iBAAiB,CAAC,EAChC,MAAM,EACN,GAAG,IAAI,EACgB,EAAA;IACvB,OAAOA,GAAA,CAAC,iBAAiB,EAAA,EAAA,GAAK,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAA,IAAA,EAAA,CAAG;AAC/D;;;;"}

package/dist/esm/components/IntegrationsModal/IntegrationsPanel.d.ts

@@ -105,5 +105,5 @@ export interface IntegrationsPanelProps {
  * after the round trip is what gets it blocked. When it is blocked anyway, the
  * URL is offered as a link instead.
  */
-export declare function IntegrationsPanel({ assistantId, tenantId, subtenantId, apiKey, baseUrl, title, searchPlaceholder, onChange, theme, state, mcpState, active, showHeader, showSearch, showFooter, onClose, className, dialog, }: IntegrationsPanelProps): JSX.Element | null;
+export declare function IntegrationsPanel({ assistantId, tenantId, subtenantId, apiKey, baseUrl, title: titleProp, searchPlaceholder: searchPlaceholderProp, onChange, theme, state, mcpState, active, showHeader, showSearch, showFooter, onClose, className, dialog, }: IntegrationsPanelProps): JSX.Element | null;
 export default IntegrationsPanel;

package/dist/esm/components/IntegrationsModal/IntegrationsPanel.js

@@ -7,6 +7,7 @@ import { IntegrationLogo } from './IntegrationLogo.js';
 import { useIntegrations } from './useIntegrations.js';
 import { McpServersSection } from './McpServersSection.js';
 import { useTenantMcp } from './useTenantMcp.js';
+import { useTranslations } from '../../i18n/useTranslations.js';
 
 function PlugIcon() {
     return (jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [jsx("path", { d: "M12 22v-5" }), jsx("path", { d: "M9 8V2" }), jsx("path", { d: "M15 8V2" }), jsx("path", { d: "M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z" })] }));
@@ -22,21 +23,24 @@ function newNonce() {
     return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
 }
 /** How the card describes an app at a glance. */
-function stateOf(integration) {
-    if (integration.connected)
-        return { key: "connected", label: "Connected" };
+function stateOf(t, integration) {
+    if (integration.connected) {
+        return { key: "connected", label: t("Connected") };
+    }
     if (integration.accounts.some((a) => a.needsReconnect)) {
-        return { key: "reconnect", label: "Needs reconnection" };
+        return { key: "reconnect", label: t("Needs reconnection") };
     }
-    return { key: "disconnected", label: "Not connected" };
+    return { key: "disconnected", label: t("Not connected") };
 }
-function accountLabel(account) {
+function accountLabel(t, account) {
+    // The status comes from the provider, so it is passed through the dictionary
+    // as-is rather than assumed to be one of a known set.
     if (!account.connectedAt)
-        return account.status.toLowerCase();
+        return t(account.status.toLowerCase());
     const when = new Date(account.connectedAt);
     if (Number.isNaN(when.getTime()))
-        return account.status.toLowerCase();
-    return `connected ${when.toLocaleDateString()}`;
+        return t(account.status.toLowerCase());
+    return t("connected {date}", { date: when.toLocaleDateString() });
 }
 /**
  * The scheme the server would pick, given no explicit choice: the one asking
@@ -83,7 +87,12 @@ function matches(integration, query) {
  * after the round trip is what gets it blocked. When it is blocked anyway, the
  * URL is offered as a link instead.
  */
-function IntegrationsPanel({ assistantId, tenantId, subtenantId, apiKey, baseUrl, title = "Connected apps", searchPlaceholder = "Search connected apps", onChange, theme, state, mcpState, active = true, showHeader = true, showSearch = true, showFooter = true, onClose, className, dialog = false, }) {
+function IntegrationsPanel({ assistantId, tenantId, subtenantId, apiKey, baseUrl, title: titleProp, searchPlaceholder: searchPlaceholderProp, onChange, theme, state, mcpState, active = true, showHeader = true, showSearch = true, showFooter = true, onClose, className, dialog = false, }) {
+    const t = useTranslations();
+    // The host's own wording wins; with none, the defaults go through the
+    // dictionary like every other text in the panel.
+    const title = titleProp ?? t("Connected apps");
+    const searchPlaceholder = searchPlaceholderProp ?? t("Search connected apps");
     // Hooks cannot be skipped, so the fallback is always built and only fetches
     // when nobody handed a listing down.
     const own = useIntegrations({
@@ -345,8 +354,7 @@ function IntegrationsPanel({ assistantId, tenantId, subtenantId, apiKey, baseUrl
      */
     const openSetupForm = async (integration, setup) => {
         if (setup.stage === "app") {
-            setActionError(`${integration.name} is not available yet — it still needs to be set up ` +
-                `by the app's provider.`);
+            setActionError(t("{app} is not available yet — it still needs to be set up by the app's provider.", { app: integration.name }));
             return;
         }
         try {
@@ -393,37 +401,39 @@ function IntegrationsPanel({ assistantId, tenantId, subtenantId, apiKey, baseUrl
             className ?? "",
         ]
             .filter(Boolean)
-            .join(" "), style: themeVars(theme), "data-dark": dark, role: dialog ? "dialog" : "region", "aria-modal": dialog || undefined, "aria-label": title, onClick: dialog ? (e) => e.stopPropagation() : undefined, children: [showHeader && (jsxs("div", { className: "devic-int-header", children: [jsxs("h3", { className: "devic-int-title", children: [jsx(PlugIcon, {}), title] }), onClose && (jsx("button", { className: "devic-int-close", onClick: onClose, type: "button", "aria-label": "Close", children: "\u00D7" }))] })), showSearch && (jsxs("div", { className: "devic-int-search", children: [jsx(SearchIcon, {}), jsx("input", { type: "search", value: query, onChange: (e) => setQuery(e.target.value), placeholder: searchPlaceholder, "aria-label": searchPlaceholder, autoComplete: "off" })] })), jsxs("div", { className: "devic-int-body", children: [error && jsx("div", { className: "devic-int-error", children: error }), blockedUrl && (jsxs("div", { className: "devic-int-notice", children: ["Your browser blocked the pop-up.", " ", jsx("a", { href: blockedUrl.url, target: "_blank", rel: "noopener noreferrer", onClick: () => {
+            .join(" "), style: themeVars(theme), "data-dark": dark, role: dialog ? "dialog" : "region", "aria-modal": dialog || undefined, "aria-label": title, onClick: dialog ? (e) => e.stopPropagation() : undefined, children: [showHeader && (jsxs("div", { className: "devic-int-header", children: [jsxs("h3", { className: "devic-int-title", children: [jsx(PlugIcon, {}), title] }), onClose && (jsx("button", { className: "devic-int-close", onClick: onClose, type: "button", "aria-label": t("Close"), children: "\u00D7" }))] })), showSearch && (jsxs("div", { className: "devic-int-search", children: [jsx(SearchIcon, {}), jsx("input", { type: "search", value: query, onChange: (e) => setQuery(e.target.value), placeholder: searchPlaceholder, "aria-label": searchPlaceholder, autoComplete: "off" })] })), jsxs("div", { className: "devic-int-body", children: [error && jsx("div", { className: "devic-int-error", children: error }), blockedUrl && (jsxs("div", { className: "devic-int-notice", children: [t("Your browser blocked the pop-up."), " ", jsx("a", { href: blockedUrl.url, target: "_blank", rel: "noopener noreferrer", onClick: () => {
                                     pendingRef.current = null;
                                     setBlockedUrl(null);
-                                }, children: "Open the authorisation page" }), " ", "and come back \u2014 then use Refresh."] })), loading && integrations.length === 0 ? (
+                                }, children: t("Open the authorisation page") }), " ", t("and come back — then use Refresh.")] })), loading && integrations.length === 0 ? (
                     // Silent while the MCP section is what this assistant offers: a
                     // spinner labelled "Loading apps" over a list of servers describes
                     // something that is not happening.
-                    appsRefusalIsNoise ? null : (jsx("div", { className: "devic-int-loading", children: "Loading apps\u2026" }))) : integrations.length === 0 ? (
+                    appsRefusalIsNoise ? null : (jsx("div", { className: "devic-int-loading", children: t("Loading apps…") }))) : integrations.length === 0 ? (
                     // Silent when MCP servers are the whole offer: "no apps available"
                     // over a list of servers reads as a broken panel.
-                    mcp.offered ? null : (jsx("div", { className: "devic-int-empty", children: "No apps available here yet." }))) : visible.length === 0 ? (jsxs("div", { className: "devic-int-empty", children: ["No apps match \u201C", query.trim(), "\u201D."] })) : (jsx("div", { className: "devic-int-grid", children: visible.map((integration) => {
-                            const cardState = stateOf(integration);
+                    mcp.offered ? null : (jsx("div", { className: "devic-int-empty", children: t("No apps available here yet.") }))) : visible.length === 0 ? (jsx("div", { className: "devic-int-empty", children: t("No apps match “{query}”.", { query: query.trim() }) })) : (jsx("div", { className: "devic-int-grid", children: visible.map((integration) => {
+                            const cardState = stateOf(t, integration);
                             const busy = busyApp === integration.app;
                             return (jsxs("div", { className: "devic-int-card", "data-state": cardState.key, children: [jsxs("div", { className: "devic-int-card-head", children: [jsx(IntegrationLogo, { integration: integration }), jsxs("span", { className: "devic-int-state", children: [jsx("span", { className: "devic-int-dot", "data-ok": cardState.key === "connected", "data-off": cardState.key === "disconnected", "aria-hidden": "true" }), cardState.label] })] }), jsx("div", { className: "devic-int-name", title: integration.name, children: integration.name }), integration.description && (jsx("div", { className: "devic-int-description", title: integration.description, children: integration.description })), jsx("button", { type: "button", className: `devic-int-btn devic-int-btn-block${cardState.key === "connected"
                                             ? ""
                                             : " devic-int-btn-primary"}`, onClick: () => handleConnect(integration), disabled: busy || !!busyApp, title: cardState.key === "connected"
-                                            ? "Sign in with a different account. The one connected now is replaced."
+                                            ? t("Sign in with a different account. The one connected now is replaced.")
                                             : undefined, children: busy
-                                            ? "Waiting…"
+                                            ? t("Waiting…")
                                             : cardState.key === "disconnected"
-                                                ? "Connect"
+                                                ? t("Connect")
                                                 : cardState.key === "reconnect"
-                                                    ? "Reconnect"
+                                                    ? t("Reconnect")
                                                     : // Not "Add account": one account per app is all
                                                         // the assistant can use, and connecting again
                                                         // retires the previous one.
-                                                        "Switch account" }), integration.accounts.length > 0 && (jsx("ul", { className: "devic-int-accounts", children: integration.accounts.map((account) => (jsxs("li", { className: "devic-int-account", children: [jsx("span", { className: "devic-int-dot", "data-ok": !account.needsReconnect, "aria-hidden": "true" }), jsxs("span", { className: "devic-int-account-label", children: [accountLabel(account), account.needsReconnect && (jsxs("span", { className: "devic-int-account-warn", children: [" ", "\u00B7 reconnect required"] }))] }), jsx("button", { type: "button", className: "devic-int-unlink", onClick: () => handleDisconnect(integration.app, account), disabled: !!busyApp, title: "Disconnect this account", "aria-label": `Disconnect ${integration.name}`, children: "\u00D7" })] }, account.id))) }))] }, integration.app));
-                        }) }))] }), mcp.offered && (jsx("div", { className: "devic-int-body devic-int-body-secondary", children: jsx(McpServersSection, { state: mcp, theme: theme, query: query }) })), showFooter && (jsxs("div", { className: "devic-int-footer", children: [jsx("span", { children: "Only you can see and use the accounts you connect here." }), jsx("button", { type: "button", className: "devic-int-btn devic-int-btn-small", onClick: () => {
+                                                        t("Switch account") }), integration.accounts.length > 0 && (jsx("ul", { className: "devic-int-accounts", children: integration.accounts.map((account) => (jsxs("li", { className: "devic-int-account", children: [jsx("span", { className: "devic-int-dot", "data-ok": !account.needsReconnect, "aria-hidden": "true" }), jsxs("span", { className: "devic-int-account-label", children: [accountLabel(t, account), account.needsReconnect && (jsxs("span", { className: "devic-int-account-warn", children: [" ", "\u00B7 ", t("reconnect required")] }))] }), jsx("button", { type: "button", className: "devic-int-unlink", onClick: () => handleDisconnect(integration.app, account), disabled: !!busyApp, title: t("Disconnect this account"), "aria-label": t("Disconnect {app}", {
+                                                        app: integration.name,
+                                                    }), children: "\u00D7" })] }, account.id))) }))] }, integration.app));
+                        }) }))] }), mcp.offered && (jsx("div", { className: "devic-int-body devic-int-body-secondary", children: jsx(McpServersSection, { state: mcp, theme: theme, query: query }) })), showFooter && (jsxs("div", { className: "devic-int-footer", children: [jsx("span", { children: t("Only you can see and use the accounts you connect here.") }), jsx("button", { type: "button", className: "devic-int-btn devic-int-btn-small", onClick: () => {
                             void refresh(true);
                             void mcp.refresh();
-                        }, disabled: loading || mcp.loading || !!busyApp, children: "Refresh" })] })), setupPrompt && promptIntegration && (jsx(ConnectFieldsForm, { integration: promptIntegration, schemes: setupPrompt.schemes, initialScheme: setupPrompt.setup?.authScheme, onlyFields: setupPrompt.setup?.fields, submitting: busyApp === setupPrompt.app, error: formError, theme: theme, onCancel: () => {
+                        }, disabled: loading || mcp.loading || !!busyApp, children: t("Refresh") })] })), setupPrompt && promptIntegration && (jsx(ConnectFieldsForm, { integration: promptIntegration, schemes: setupPrompt.schemes, initialScheme: setupPrompt.setup?.authScheme, onlyFields: setupPrompt.setup?.fields, submitting: busyApp === setupPrompt.app, error: formError, theme: theme, onCancel: () => {
                     setSetupPrompt(null);
                     setFormError(null);
                 }, onSubmit: (values) => handleConnect(promptIntegration, values) }))] }));