@devicai/ui 0.57.0 → 0.58.0

package/dist/cjs/components/Feedback/MessageActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageActions.js","sources":["../../../../../src/components/Feedback/MessageActions.tsx"],"sourcesContent":["import React, { useState, useCallback, useMemo } from 'react';\nimport { FeedbackModal } from './FeedbackModal';\nimport type { MessageActionsProps, FeedbackState } from './Feedback.types';\n\n/**\n * Action buttons for a message (copy, thumbs up, thumbs down)\n */\nexport function MessageActions({\n  messageId,\n  messageContent,\n  currentFeedback = 'none',\n  onFeedback,\n  onCopy,\n  showCopy = true,\n  showFeedback = true,\n  disabled = false,\n  theme,\n}: MessageActionsProps): JSX.Element {\n  const [feedbackState, setFeedbackState] = useState<FeedbackState>(currentFeedback);\n  const [modalOpen, setModalOpen] = useState(false);\n  const [pendingFeedbackType, setPendingFeedbackType] = useState<'positive' | 'negative'>('positive');\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [copied, setCopied] = useState(false);\n\n  // Build inline styles from theme for the actions container\n  const containerStyle = useMemo(() => {\n    if (!theme) return undefined;\n    return {\n      '--devic-bg-secondary': theme.secondaryBackgroundColor,\n      '--devic-text-secondary': theme.textMutedColor,\n    } as React.CSSProperties;\n  }, [theme]);\n\n  const handleCopy = useCallback(async () => {\n    if (!messageContent) return;\n\n    try {\n      await navigator.clipboard.writeText(messageContent);\n      setCopied(true);\n      onCopy?.(messageContent);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error('Failed to copy:', err);\n    }\n  }, [messageContent, onCopy]);\n\n  const handleFeedbackClick = useCallback((type: 'positive' | 'negative') => {\n    // If clicking the same feedback type that's already selected, toggle it off\n    if ((type === 'positive' && feedbackState === 'positive') ||\n        (type === 'negative' && feedbackState === 'negative')) {\n      // Optionally could allow removal - for now we just open modal to change comment\n    }\n\n    setPendingFeedbackType(type);\n    setModalOpen(true);\n  }, [feedbackState]);\n\n  const handleModalSubmit = useCallback(async (comment: string) => {\n    setIsSubmitting(true);\n    try {\n      const isPositive = pendingFeedbackType === 'positive';\n      await onFeedback?.(messageId, isPositive, comment || undefined);\n      setFeedbackState(isPositive ? 'positive' : 'negative');\n      setModalOpen(false);\n    } catch (err) {\n      console.error('Failed to submit feedback:', err);\n    } finally {\n      setIsSubmitting(false);\n    }\n  }, [messageId, pendingFeedbackType, onFeedback]);\n\n  return (\n    <>\n      <div className=\"devic-message-actions\" style={containerStyle}>\n        {showCopy && messageContent && (\n          <button\n            type=\"button\"\n            className={`devic-action-btn ${copied ? 'devic-action-btn--active' : ''}`}\n            onClick={handleCopy}\n            disabled={disabled}\n            title=\"Copy to clipboard\"\n            aria-label=\"Copy to clipboard\"\n          >\n            {copied ? <CheckIcon /> : <CopyIcon />}\n          </button>\n        )}\n\n        {showFeedback && (\n          <>\n            <button\n              type=\"button\"\n              className={`devic-action-btn ${feedbackState === 'positive' ? 'devic-action-btn--active devic-action-btn--positive' : ''}`}\n              onClick={() => handleFeedbackClick('positive')}\n              disabled={disabled}\n              title=\"Good response\"\n              aria-label=\"Good response\"\n            >\n              <ThumbsUpIcon filled={feedbackState === 'positive'} />\n            </button>\n\n            <button\n              type=\"button\"\n              className={`devic-action-btn ${feedbackState === 'negative' ? 'devic-action-btn--active devic-action-btn--negative' : ''}`}\n              onClick={() => handleFeedbackClick('negative')}\n              disabled={disabled}\n              title=\"Bad response\"\n              aria-label=\"Bad response\"\n            >\n              <ThumbsDownIcon filled={feedbackState === 'negative'} />\n            </button>\n          </>\n        )}\n      </div>\n\n      <FeedbackModal\n        isOpen={modalOpen}\n        onClose={() => setModalOpen(false)}\n        onSubmit={handleModalSubmit}\n        feedbackType={pendingFeedbackType}\n        isSubmitting={isSubmitting}\n        theme={theme}\n      />\n    </>\n  );\n}\n\n/* ── Icons ── */\n\nfunction CopyIcon(): JSX.Element {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\" />\n      <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\" />\n    </svg>\n  );\n}\n\nfunction CheckIcon(): JSX.Element {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <polyline points=\"20,6 9,17 4,12\" />\n    </svg>\n  );\n}\n\nfunction ThumbsUpIcon({ filled = false }: { filled?: boolean }): JSX.Element {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill={filled ? 'currentColor' : 'none'}\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M7 10v12M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z\" />\n    </svg>\n  );\n}\n\nfunction ThumbsDownIcon({ filled = false }: { filled?: boolean }): JSX.Element {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill={filled ? 'currentColor' : 'none'}\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M17 14V2M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z\" />\n    </svg>\n  );\n}\n"],"names":["useState","useMemo","useCallback","_jsxs","_jsx","_Fragment","FeedbackModal"],"mappings":"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"}
+{"version":3,"file":"MessageActions.js","sources":["../../../../../src/components/Feedback/MessageActions.tsx"],"sourcesContent":["import React, { useState, useCallback, useMemo } from 'react';\nimport { FeedbackModal } from './FeedbackModal';\nimport type { MessageActionsProps, FeedbackState } from './Feedback.types';\nimport { useTranslations } from '../../i18n';\n\n/**\n * Action buttons for a message (copy, thumbs up, thumbs down)\n */\nexport function MessageActions({\n  messageId,\n  messageContent,\n  currentFeedback = 'none',\n  onFeedback,\n  onCopy,\n  showCopy = true,\n  showFeedback = true,\n  disabled = false,\n  theme,\n}: MessageActionsProps): JSX.Element {\n  const t = useTranslations();\n  const [feedbackState, setFeedbackState] = useState<FeedbackState>(currentFeedback);\n  const [modalOpen, setModalOpen] = useState(false);\n  const [pendingFeedbackType, setPendingFeedbackType] = useState<'positive' | 'negative'>('positive');\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [copied, setCopied] = useState(false);\n\n  // Build inline styles from theme for the actions container\n  const containerStyle = useMemo(() => {\n    if (!theme) return undefined;\n    return {\n      '--devic-bg-secondary': theme.secondaryBackgroundColor,\n      '--devic-text-secondary': theme.textMutedColor,\n    } as React.CSSProperties;\n  }, [theme]);\n\n  const handleCopy = useCallback(async () => {\n    if (!messageContent) return;\n\n    try {\n      await navigator.clipboard.writeText(messageContent);\n      setCopied(true);\n      onCopy?.(messageContent);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error('Failed to copy:', err);\n    }\n  }, [messageContent, onCopy]);\n\n  const handleFeedbackClick = useCallback((type: 'positive' | 'negative') => {\n    // If clicking the same feedback type that's already selected, toggle it off\n    if ((type === 'positive' && feedbackState === 'positive') ||\n        (type === 'negative' && feedbackState === 'negative')) {\n      // Optionally could allow removal - for now we just open modal to change comment\n    }\n\n    setPendingFeedbackType(type);\n    setModalOpen(true);\n  }, [feedbackState]);\n\n  const handleModalSubmit = useCallback(async (comment: string) => {\n    setIsSubmitting(true);\n    try {\n      const isPositive = pendingFeedbackType === 'positive';\n      await onFeedback?.(messageId, isPositive, comment || undefined);\n      setFeedbackState(isPositive ? 'positive' : 'negative');\n      setModalOpen(false);\n    } catch (err) {\n      console.error('Failed to submit feedback:', err);\n    } finally {\n      setIsSubmitting(false);\n    }\n  }, [messageId, pendingFeedbackType, onFeedback]);\n\n  return (\n    <>\n      <div className=\"devic-message-actions\" style={containerStyle}>\n        {showCopy && messageContent && (\n          <button\n            type=\"button\"\n            className={`devic-action-btn ${copied ? 'devic-action-btn--active' : ''}`}\n            onClick={handleCopy}\n            disabled={disabled}\n            title={t('Copy to clipboard')}\n            aria-label={t('Copy to clipboard')}\n          >\n            {copied ? <CheckIcon /> : <CopyIcon />}\n          </button>\n        )}\n\n        {showFeedback && (\n          <>\n            <button\n              type=\"button\"\n              className={`devic-action-btn ${feedbackState === 'positive' ? 'devic-action-btn--active devic-action-btn--positive' : ''}`}\n              onClick={() => handleFeedbackClick('positive')}\n              disabled={disabled}\n              title={t('Good response')}\n              aria-label={t('Good response')}\n            >\n              <ThumbsUpIcon filled={feedbackState === 'positive'} />\n            </button>\n\n            <button\n              type=\"button\"\n              className={`devic-action-btn ${feedbackState === 'negative' ? 'devic-action-btn--active devic-action-btn--negative' : ''}`}\n              onClick={() => handleFeedbackClick('negative')}\n              disabled={disabled}\n              title={t('Bad response')}\n              aria-label={t('Bad response')}\n            >\n              <ThumbsDownIcon filled={feedbackState === 'negative'} />\n            </button>\n          </>\n        )}\n      </div>\n\n      <FeedbackModal\n        isOpen={modalOpen}\n        onClose={() => setModalOpen(false)}\n        onSubmit={handleModalSubmit}\n        feedbackType={pendingFeedbackType}\n        isSubmitting={isSubmitting}\n        theme={theme}\n      />\n    </>\n  );\n}\n\n/* ── Icons ── */\n\nfunction CopyIcon(): JSX.Element {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\" />\n      <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\" />\n    </svg>\n  );\n}\n\nfunction CheckIcon(): JSX.Element {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <polyline points=\"20,6 9,17 4,12\" />\n    </svg>\n  );\n}\n\nfunction ThumbsUpIcon({ filled = false }: { filled?: boolean }): JSX.Element {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill={filled ? 'currentColor' : 'none'}\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M7 10v12M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z\" />\n    </svg>\n  );\n}\n\nfunction ThumbsDownIcon({ filled = false }: { filled?: boolean }): JSX.Element {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill={filled ? 'currentColor' : 'none'}\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M17 14V2M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z\" />\n    </svg>\n  );\n}\n"],"names":["useTranslations","useState","useMemo","useCallback","_jsxs","_Fragment","_jsx","FeedbackModal"],"mappings":"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"}

package/dist/cjs/components/IntegrationsModal/ConnectFieldsForm.js

@@ -5,6 +5,7 @@ var React = require('react');
 var reactDom = require('react-dom');
 var theme = require('../theme.js');
 var IntegrationLogo = require('./IntegrationLogo.js');
+var useTranslations = require('../../i18n/useTranslations.js');
 
 /** Whether a field belongs in the form, given the server's shortlist. */
 function wanted(field, only) {
@@ -26,6 +27,7 @@ function wanted(field, only) {
  * Values go straight into the connection and are never kept here.
  */
 function ConnectFieldsForm({ integration, schemes, initialScheme, onlyFields, submitting, error, theme: theme$1, onCancel, onSubmit, }) {
+    const t = useTranslations.useTranslations();
     const [mode, setMode] = React.useState(initialScheme ?? schemes[0]?.mode ?? "");
     const [values, setValues] = React.useState({});
     const [touched, setTouched] = React.useState(false);
@@ -50,23 +52,25 @@ function ConnectFieldsForm({ integration, schemes, initialScheme, onlyFields, su
         }
         onSubmit({ authScheme: scheme.mode, accountFields });
     };
-    return reactDom.createPortal(jsxRuntime.jsx("div", { className: "devic-int-overlay devic-int-overlay-stacked", style: theme.themeVars(theme$1), "data-dark": theme.isDarkTheme(theme$1), onClick: onCancel, children: jsxRuntime.jsxs("form", { className: "devic-int-connect-dialog", role: "dialog", "aria-modal": "true", "aria-label": `Connect ${integration.name}`, onClick: (e) => e.stopPropagation(), onSubmit: handleSubmit, children: [jsxRuntime.jsxs("div", { className: "devic-int-connect-header", children: [jsxRuntime.jsx(IntegrationLogo.IntegrationLogo, { integration: integration }), jsxRuntime.jsxs("div", { className: "devic-int-connect-heading", children: [jsxRuntime.jsxs("strong", { children: ["Connect ", integration.name] }), jsxRuntime.jsx("span", { children: scheme.redirect
-                                        ? `You'll be sent to ${integration.name} to finish authorising.`
-                                        : "Your credentials go straight to the app — only you can use this account." })] }), jsxRuntime.jsx("button", { type: "button", className: "devic-int-close", onClick: onCancel, "aria-label": "Close", children: "\u00D7" })] }), jsxRuntime.jsxs("div", { className: "devic-int-connect-body", children: [error && jsxRuntime.jsx("div", { className: "devic-int-error", children: error }), schemes.length > 1 && (jsxRuntime.jsxs("label", { className: "devic-int-connect-field", children: [jsxRuntime.jsx("span", { className: "devic-int-connect-label", children: "Connect with" }), jsxRuntime.jsx("select", { value: scheme.mode, onChange: (e) => {
+    return reactDom.createPortal(jsxRuntime.jsx("div", { className: "devic-int-overlay devic-int-overlay-stacked", style: theme.themeVars(theme$1), "data-dark": theme.isDarkTheme(theme$1), onClick: onCancel, children: jsxRuntime.jsxs("form", { className: "devic-int-connect-dialog", role: "dialog", "aria-modal": "true", "aria-label": t("Connect {app}", { app: integration.name }), onClick: (e) => e.stopPropagation(), onSubmit: handleSubmit, children: [jsxRuntime.jsxs("div", { className: "devic-int-connect-header", children: [jsxRuntime.jsx(IntegrationLogo.IntegrationLogo, { integration: integration }), jsxRuntime.jsxs("div", { className: "devic-int-connect-heading", children: [jsxRuntime.jsx("strong", { children: t("Connect {app}", { app: integration.name }) }), jsxRuntime.jsx("span", { children: scheme.redirect
+                                        ? t("You'll be sent to {app} to finish authorising.", {
+                                            app: integration.name,
+                                        })
+                                        : t("Your credentials go straight to the app — only you can use this account.") })] }), jsxRuntime.jsx("button", { type: "button", className: "devic-int-close", onClick: onCancel, "aria-label": t("Close"), children: "\u00D7" })] }), jsxRuntime.jsxs("div", { className: "devic-int-connect-body", children: [error && jsxRuntime.jsx("div", { className: "devic-int-error", children: error }), schemes.length > 1 && (jsxRuntime.jsxs("label", { className: "devic-int-connect-field", children: [jsxRuntime.jsx("span", { className: "devic-int-connect-label", children: t("Connect with") }), jsxRuntime.jsx("select", { value: scheme.mode, onChange: (e) => {
                                         setMode(e.target.value);
                                         setValues({});
                                         setTouched(false);
                                     }, children: schemes.map((s) => (jsxRuntime.jsx("option", { value: s.mode, children: s.mode }, s.mode))) })] })), fields.map((field, index) => {
                             const invalid = touched && field.required && !valueOf(field).trim();
-                            return (jsxRuntime.jsxs("label", { className: "devic-int-connect-field", children: [jsxRuntime.jsxs("span", { className: "devic-int-connect-label", children: [field.label, !field.required && jsxRuntime.jsx("em", { children: " (optional)" })] }), jsxRuntime.jsx("input", { autoFocus: index === 0, type: field.secret ? "password" : "text", value: valueOf(field), onChange: (e) => setValues((prev) => ({
+                            return (jsxRuntime.jsxs("label", { className: "devic-int-connect-field", children: [jsxRuntime.jsxs("span", { className: "devic-int-connect-label", children: [field.label, !field.required && jsxRuntime.jsxs("em", { children: [" ", t("(optional)")] })] }), jsxRuntime.jsx("input", { autoFocus: index === 0, type: field.secret ? "password" : "text", value: valueOf(field), onChange: (e) => setValues((prev) => ({
                                             ...prev,
                                             [field.name]: e.target.value,
                                         })), placeholder: field.default, autoComplete: field.secret ? "new-password" : "off", spellCheck: false, "aria-invalid": invalid || undefined, "data-invalid": invalid || undefined }), field.description && (jsxRuntime.jsx("small", { className: "devic-int-connect-hint", children: field.description }))] }, field.name));
-                        }), scheme.guideUrl && (jsxRuntime.jsx("a", { className: "devic-int-connect-guide", href: scheme.guideUrl, target: "_blank", rel: "noopener noreferrer", children: "Where do I find this?" }))] }), jsxRuntime.jsxs("div", { className: "devic-int-connect-actions", children: [jsxRuntime.jsx("button", { type: "button", className: "devic-int-btn", onClick: onCancel, disabled: submitting, children: "Cancel" }), jsxRuntime.jsx("button", { type: "submit", className: "devic-int-btn devic-int-btn-primary", disabled: submitting, children: submitting
-                                ? "Connecting…"
+                        }), scheme.guideUrl && (jsxRuntime.jsx("a", { className: "devic-int-connect-guide", href: scheme.guideUrl, target: "_blank", rel: "noopener noreferrer", children: t("Where do I find this?") }))] }), jsxRuntime.jsxs("div", { className: "devic-int-connect-actions", children: [jsxRuntime.jsx("button", { type: "button", className: "devic-int-btn", onClick: onCancel, disabled: submitting, children: t("Cancel") }), jsxRuntime.jsx("button", { type: "submit", className: "devic-int-btn devic-int-btn-primary", disabled: submitting, children: submitting
+                                ? t("Connecting…")
                                 : scheme.redirect
-                                    ? "Continue"
-                                    : "Connect" })] })] }) }), document.body);
+                                    ? t("Continue")
+                                    : t("Connect") })] })] }) }), document.body);
 }
 
 exports.ConnectFieldsForm = ConnectFieldsForm;

package/dist/cjs/components/IntegrationsModal/ConnectFieldsForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectFieldsForm.js","sources":["../../../../../src/components/IntegrationsModal/ConnectFieldsForm.tsx"],"sourcesContent":["import { useMemo, useState, type FormEvent, type JSX } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n  Integration,\n  IntegrationAuthField,\n  IntegrationAuthScheme,\n} from \"../../api/types\";\nimport { isDarkTheme, themeVars, type DevicTheme } from \"../theme\";\nimport { IntegrationLogo } from \"./IntegrationLogo\";\n\nexport interface ConnectFieldsFormProps {\n  integration: Integration;\n  /** Every way this app can be connected, from `GET /:app/auth`. */\n  schemes: IntegrationAuthScheme[];\n  /** The scheme to start on, when the server named one. */\n  initialScheme?: string;\n  /** Only these are asked for, when the server named what was missing. */\n  onlyFields?: IntegrationAuthField[];\n  submitting?: boolean;\n  /** Failure from the last attempt, shown above the fields. */\n  error?: string | null;\n  /** Passed down from the dialog that opened this one. */\n  theme?: DevicTheme;\n  onCancel: () => void;\n  onSubmit: (values: {\n    authScheme: string;\n    accountFields: Record<string, string>;\n  }) => void;\n}\n\n/** Whether a field belongs in the form, given the server's shortlist. */\nfunction wanted(\n  field: IntegrationAuthField,\n  only?: IntegrationAuthField[]\n): boolean {\n  return !only?.length || only.some((f) => f.name === field.name);\n}\n\n/**\n * The credentials an app asks the end user for.\n *\n * Most apps do not authenticate with credentials Devic holds — they take an\n * API key the user creates at the provider — so without this they cannot be\n * connected at all, no matter how many popups are opened.\n *\n * A dialog of its own rather than something inside the app's card: a provider\n * explains where to find a key in a paragraph, and three of those do not fit\n * in one column of a grid without turning into a stack of clipped text. The\n * fields are rendered from what the server describes, never from anything\n * per-app — there are hundreds of them.\n *\n * Values go straight into the connection and are never kept here.\n */\nexport function ConnectFieldsForm({\n  integration,\n  schemes,\n  initialScheme,\n  onlyFields,\n  submitting,\n  error,\n  theme,\n  onCancel,\n  onSubmit,\n}: ConnectFieldsFormProps): JSX.Element | null {\n  const [mode, setMode] = useState(initialScheme ?? schemes[0]?.mode ?? \"\");\n  const [values, setValues] = useState<Record<string, string>>({});\n  const [touched, setTouched] = useState(false);\n\n  const scheme = useMemo(\n    () => schemes.find((s) => s.mode === mode) ?? schemes[0],\n    [schemes, mode]\n  );\n\n  const fields = useMemo(\n    () => (scheme?.accountFields ?? []).filter((f) => wanted(f, onlyFields)),\n    [scheme, onlyFields]\n  );\n\n  if (!scheme) return null;\n\n  const valueOf = (field: IntegrationAuthField) =>\n    values[field.name] ?? field.default ?? \"\";\n\n  const missing = fields.filter((f) => f.required && !valueOf(f).trim());\n\n  const handleSubmit = (event: FormEvent) => {\n    event.preventDefault();\n    setTouched(true);\n    if (missing.length || submitting) return;\n\n    // Only what this scheme declares, trimmed. A value left blank is left out\n    // rather than sent empty: the provider would store it and fail later.\n    const accountFields: Record<string, string> = {};\n    for (const field of scheme.accountFields) {\n      const value = valueOf(field).trim();\n      if (value) accountFields[field.name] = value;\n    }\n    onSubmit({ authScheme: scheme.mode, accountFields });\n  };\n\n  return createPortal(\n    <div\n      className=\"devic-int-overlay devic-int-overlay-stacked\"\n      style={themeVars(theme)}\n      data-dark={isDarkTheme(theme)}\n      onClick={onCancel}\n    >\n      <form\n        className=\"devic-int-connect-dialog\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={`Connect ${integration.name}`}\n        onClick={(e) => e.stopPropagation()}\n        onSubmit={handleSubmit}\n      >\n        <div className=\"devic-int-connect-header\">\n          <IntegrationLogo integration={integration} />\n          <div className=\"devic-int-connect-heading\">\n            <strong>Connect {integration.name}</strong>\n            <span>\n              {scheme.redirect\n                ? `You'll be sent to ${integration.name} to finish authorising.`\n                : \"Your credentials go straight to the app — only you can use this account.\"}\n            </span>\n          </div>\n          <button\n            type=\"button\"\n            className=\"devic-int-close\"\n            onClick={onCancel}\n            aria-label=\"Close\"\n          >\n            ×\n          </button>\n        </div>\n\n        <div className=\"devic-int-connect-body\">\n          {error && <div className=\"devic-int-error\">{error}</div>}\n\n          {/* Only when there is a real choice — a picker with one option is\n              just another thing to read before typing a key. */}\n          {schemes.length > 1 && (\n            <label className=\"devic-int-connect-field\">\n              <span className=\"devic-int-connect-label\">Connect with</span>\n              <select\n                value={scheme.mode}\n                onChange={(e) => {\n                  setMode(e.target.value);\n                  setValues({});\n                  setTouched(false);\n                }}\n              >\n                {schemes.map((s) => (\n                  <option key={s.mode} value={s.mode}>\n                    {s.mode}\n                  </option>\n                ))}\n              </select>\n            </label>\n          )}\n\n          {fields.map((field, index) => {\n            const invalid = touched && field.required && !valueOf(field).trim();\n            return (\n              <label key={field.name} className=\"devic-int-connect-field\">\n                <span className=\"devic-int-connect-label\">\n                  {field.label}\n                  {!field.required && <em> (optional)</em>}\n                </span>\n                <input\n                  autoFocus={index === 0}\n                  type={field.secret ? \"password\" : \"text\"}\n                  value={valueOf(field)}\n                  onChange={(e) =>\n                    setValues((prev) => ({\n                      ...prev,\n                      [field.name]: e.target.value,\n                    }))\n                  }\n                  placeholder={field.default}\n                  autoComplete={field.secret ? \"new-password\" : \"off\"}\n                  spellCheck={false}\n                  aria-invalid={invalid || undefined}\n                  data-invalid={invalid || undefined}\n                />\n                {field.description && (\n                  <small className=\"devic-int-connect-hint\">\n                    {field.description}\n                  </small>\n                )}\n              </label>\n            );\n          })}\n\n          {scheme.guideUrl && (\n            <a\n              className=\"devic-int-connect-guide\"\n              href={scheme.guideUrl}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              Where do I find this?\n            </a>\n          )}\n        </div>\n\n        <div className=\"devic-int-connect-actions\">\n          <button\n            type=\"button\"\n            className=\"devic-int-btn\"\n            onClick={onCancel}\n            disabled={submitting}\n          >\n            Cancel\n          </button>\n          <button\n            type=\"submit\"\n            className=\"devic-int-btn devic-int-btn-primary\"\n            disabled={submitting}\n          >\n            {submitting\n              ? \"Connecting…\"\n              : scheme.redirect\n                ? \"Continue\"\n                : \"Connect\"}\n          </button>\n        </div>\n      </form>\n    </div>,\n    document.body\n  );\n}\n"],"names":["theme","useState","useMemo","createPortal","_jsx","themeVars","isDarkTheme","_jsxs","IntegrationLogo"],"mappings":"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"}
+{"version":3,"file":"ConnectFieldsForm.js","sources":["../../../../../src/components/IntegrationsModal/ConnectFieldsForm.tsx"],"sourcesContent":["import { useMemo, useState, type FormEvent, type JSX } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n  Integration,\n  IntegrationAuthField,\n  IntegrationAuthScheme,\n} from \"../../api/types\";\nimport { isDarkTheme, themeVars, type DevicTheme } from \"../theme\";\nimport { IntegrationLogo } from \"./IntegrationLogo\";\nimport { useTranslations } from \"../../i18n\";\n\nexport interface ConnectFieldsFormProps {\n  integration: Integration;\n  /** Every way this app can be connected, from `GET /:app/auth`. */\n  schemes: IntegrationAuthScheme[];\n  /** The scheme to start on, when the server named one. */\n  initialScheme?: string;\n  /** Only these are asked for, when the server named what was missing. */\n  onlyFields?: IntegrationAuthField[];\n  submitting?: boolean;\n  /** Failure from the last attempt, shown above the fields. */\n  error?: string | null;\n  /** Passed down from the dialog that opened this one. */\n  theme?: DevicTheme;\n  onCancel: () => void;\n  onSubmit: (values: {\n    authScheme: string;\n    accountFields: Record<string, string>;\n  }) => void;\n}\n\n/** Whether a field belongs in the form, given the server's shortlist. */\nfunction wanted(\n  field: IntegrationAuthField,\n  only?: IntegrationAuthField[]\n): boolean {\n  return !only?.length || only.some((f) => f.name === field.name);\n}\n\n/**\n * The credentials an app asks the end user for.\n *\n * Most apps do not authenticate with credentials Devic holds — they take an\n * API key the user creates at the provider — so without this they cannot be\n * connected at all, no matter how many popups are opened.\n *\n * A dialog of its own rather than something inside the app's card: a provider\n * explains where to find a key in a paragraph, and three of those do not fit\n * in one column of a grid without turning into a stack of clipped text. The\n * fields are rendered from what the server describes, never from anything\n * per-app — there are hundreds of them.\n *\n * Values go straight into the connection and are never kept here.\n */\nexport function ConnectFieldsForm({\n  integration,\n  schemes,\n  initialScheme,\n  onlyFields,\n  submitting,\n  error,\n  theme,\n  onCancel,\n  onSubmit,\n}: ConnectFieldsFormProps): JSX.Element | null {\n  const t = useTranslations();\n  const [mode, setMode] = useState(initialScheme ?? schemes[0]?.mode ?? \"\");\n  const [values, setValues] = useState<Record<string, string>>({});\n  const [touched, setTouched] = useState(false);\n\n  const scheme = useMemo(\n    () => schemes.find((s) => s.mode === mode) ?? schemes[0],\n    [schemes, mode]\n  );\n\n  const fields = useMemo(\n    () => (scheme?.accountFields ?? []).filter((f) => wanted(f, onlyFields)),\n    [scheme, onlyFields]\n  );\n\n  if (!scheme) return null;\n\n  const valueOf = (field: IntegrationAuthField) =>\n    values[field.name] ?? field.default ?? \"\";\n\n  const missing = fields.filter((f) => f.required && !valueOf(f).trim());\n\n  const handleSubmit = (event: FormEvent) => {\n    event.preventDefault();\n    setTouched(true);\n    if (missing.length || submitting) return;\n\n    // Only what this scheme declares, trimmed. A value left blank is left out\n    // rather than sent empty: the provider would store it and fail later.\n    const accountFields: Record<string, string> = {};\n    for (const field of scheme.accountFields) {\n      const value = valueOf(field).trim();\n      if (value) accountFields[field.name] = value;\n    }\n    onSubmit({ authScheme: scheme.mode, accountFields });\n  };\n\n  return createPortal(\n    <div\n      className=\"devic-int-overlay devic-int-overlay-stacked\"\n      style={themeVars(theme)}\n      data-dark={isDarkTheme(theme)}\n      onClick={onCancel}\n    >\n      <form\n        className=\"devic-int-connect-dialog\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={t(\"Connect {app}\", { app: integration.name })}\n        onClick={(e) => e.stopPropagation()}\n        onSubmit={handleSubmit}\n      >\n        <div className=\"devic-int-connect-header\">\n          <IntegrationLogo integration={integration} />\n          <div className=\"devic-int-connect-heading\">\n            <strong>{t(\"Connect {app}\", { app: integration.name })}</strong>\n            <span>\n              {scheme.redirect\n                ? t(\"You'll be sent to {app} to finish authorising.\", {\n                    app: integration.name,\n                  })\n                : t(\n                    \"Your credentials go straight to the app — only you can use this account.\"\n                  )}\n            </span>\n          </div>\n          <button\n            type=\"button\"\n            className=\"devic-int-close\"\n            onClick={onCancel}\n            aria-label={t(\"Close\")}\n          >\n            ×\n          </button>\n        </div>\n\n        <div className=\"devic-int-connect-body\">\n          {error && <div className=\"devic-int-error\">{error}</div>}\n\n          {/* Only when there is a real choice — a picker with one option is\n              just another thing to read before typing a key. */}\n          {schemes.length > 1 && (\n            <label className=\"devic-int-connect-field\">\n              <span className=\"devic-int-connect-label\">\n                {t(\"Connect with\")}\n              </span>\n              <select\n                value={scheme.mode}\n                onChange={(e) => {\n                  setMode(e.target.value);\n                  setValues({});\n                  setTouched(false);\n                }}\n              >\n                {schemes.map((s) => (\n                  <option key={s.mode} value={s.mode}>\n                    {s.mode}\n                  </option>\n                ))}\n              </select>\n            </label>\n          )}\n\n          {fields.map((field, index) => {\n            const invalid = touched && field.required && !valueOf(field).trim();\n            return (\n              <label key={field.name} className=\"devic-int-connect-field\">\n                <span className=\"devic-int-connect-label\">\n                  {field.label}\n                  {!field.required && <em> {t(\"(optional)\")}</em>}\n                </span>\n                <input\n                  autoFocus={index === 0}\n                  type={field.secret ? \"password\" : \"text\"}\n                  value={valueOf(field)}\n                  onChange={(e) =>\n                    setValues((prev) => ({\n                      ...prev,\n                      [field.name]: e.target.value,\n                    }))\n                  }\n                  placeholder={field.default}\n                  autoComplete={field.secret ? \"new-password\" : \"off\"}\n                  spellCheck={false}\n                  aria-invalid={invalid || undefined}\n                  data-invalid={invalid || undefined}\n                />\n                {field.description && (\n                  <small className=\"devic-int-connect-hint\">\n                    {field.description}\n                  </small>\n                )}\n              </label>\n            );\n          })}\n\n          {scheme.guideUrl && (\n            <a\n              className=\"devic-int-connect-guide\"\n              href={scheme.guideUrl}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              {t(\"Where do I find this?\")}\n            </a>\n          )}\n        </div>\n\n        <div className=\"devic-int-connect-actions\">\n          <button\n            type=\"button\"\n            className=\"devic-int-btn\"\n            onClick={onCancel}\n            disabled={submitting}\n          >\n            {t(\"Cancel\")}\n          </button>\n          <button\n            type=\"submit\"\n            className=\"devic-int-btn devic-int-btn-primary\"\n            disabled={submitting}\n          >\n            {submitting\n              ? t(\"Connecting…\")\n              : scheme.redirect\n                ? t(\"Continue\")\n                : t(\"Connect\")}\n          </button>\n        </div>\n      </form>\n    </div>,\n    document.body\n  );\n}\n"],"names":["theme","useTranslations","useState","useMemo","createPortal","_jsx","themeVars","isDarkTheme","_jsxs","IntegrationLogo"],"mappings":"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"}

package/dist/cjs/components/IntegrationsModal/IntegrationsHint.js

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var IntegrationLogo = require('./IntegrationLogo.js');
+var useTranslations = require('../../i18n/useTranslations.js');
 
 const STORAGE_PREFIX = "devic:apps-hint-dismissed:";
 /** Reading storage throws in Safari's private mode and in sandboxed frames. */
@@ -100,6 +101,7 @@ function flyTarget(bar, selector) {
  * what was dismissed is understood to still be there.
  */
 function IntegrationsHint({ state, onOpen, label, maxLogos = 6, storageKey, flyToSelector = ".devic-int-launcher", dark = false, className = "", }) {
+    const t = useTranslations.useTranslations();
     const sorted = React.useMemo(() => order(state.integrations), [state.integrations]);
     const ref = React.useRef(null);
     const [boxes, setBoxes] = React.useState(maxLogos + 1);
@@ -219,13 +221,13 @@ function IntegrationsHint({ state, onOpen, label, maxLogos = 6, storageKey, flyT
         return null;
     const text = label ??
         (sorted.some((i) => i.connected)
-            ? "Explore connected apps"
-            : "Connect your apps");
+            ? t("Explore connected apps")
+            : t("Connect your apps"));
     // When some apps will not fit, the `+N` box takes one of the slots itself.
     const capacity = Math.max(1, boxes);
     const shown = sorted.slice(0, sorted.length > capacity ? capacity - 1 : capacity);
     const extra = sorted.length - shown.length;
-    return (jsxRuntime.jsxs("div", { ref: ref, className: `devic-int-hint ${className}`.trim(), "data-dark": dark, "data-leaving": leaving, children: [jsxRuntime.jsxs("button", { type: "button", className: "devic-int-hint-main", onClick: onOpen, children: [jsxRuntime.jsx("span", { className: "devic-int-hint-label", children: text }), jsxRuntime.jsxs("span", { className: "devic-int-hint-logos", "aria-hidden": "true", children: [shown.map((integration) => (jsxRuntime.jsx("span", { className: "devic-int-hint-item", "data-connected": integration.connected, children: jsxRuntime.jsx(IntegrationLogo.IntegrationLogo, { integration: integration, className: "devic-int-hint-logo" }) }, integration.app))), extra > 0 && (jsxRuntime.jsxs("span", { className: "devic-int-hint-item devic-int-hint-more", children: ["+", extra] }))] })] }), jsxRuntime.jsx("button", { type: "button", className: "devic-int-hint-close", onClick: dismiss, "aria-label": "Hide this", title: "Hide this. Your apps stay in the header.", children: "\u00D7" })] }));
+    return (jsxRuntime.jsxs("div", { ref: ref, className: `devic-int-hint ${className}`.trim(), "data-dark": dark, "data-leaving": leaving, children: [jsxRuntime.jsxs("button", { type: "button", className: "devic-int-hint-main", onClick: onOpen, children: [jsxRuntime.jsx("span", { className: "devic-int-hint-label", children: text }), jsxRuntime.jsxs("span", { className: "devic-int-hint-logos", "aria-hidden": "true", children: [shown.map((integration) => (jsxRuntime.jsx("span", { className: "devic-int-hint-item", "data-connected": integration.connected, children: jsxRuntime.jsx(IntegrationLogo.IntegrationLogo, { integration: integration, className: "devic-int-hint-logo" }) }, integration.app))), extra > 0 && (jsxRuntime.jsxs("span", { className: "devic-int-hint-item devic-int-hint-more", children: ["+", extra] }))] })] }), jsxRuntime.jsx("button", { type: "button", className: "devic-int-hint-close", onClick: dismiss, "aria-label": t("Hide this"), title: t("Hide this. Your apps stay in the header."), children: "\u00D7" })] }));
 }
 
 exports.IntegrationsHint = IntegrationsHint;

package/dist/cjs/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":["useMemo","useRef","useState","useEffect","useCallback","_jsxs","_jsx","IntegrationLogo"],"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":["useTranslations","useMemo","useRef","useState","useEffect","useCallback","_jsxs","_jsx","IntegrationLogo"],"mappings":"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"}

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var IntegrationLogo = require('./IntegrationLogo.js');
+var useTranslations = require('../../i18n/useTranslations.js');
 
 /** How many logos fit before the rest are counted instead. */
 const DEFAULT_MAX_LOGOS = 6;
@@ -40,7 +41,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.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 = React.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
@@ -64,7 +69,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 (jsxRuntime.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) => (jsxRuntime.jsx("span", { className: "devic-int-launcher-item devic-int-launcher-skeleton" }, i))) }));
+        return (jsxRuntime.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) => (jsxRuntime.jsx("span", { className: "devic-int-launcher-item devic-int-launcher-skeleton" }, i))) }));
     }
     const offersApps = state.offered && sorted.length > 0;
     if (!offersApps && mcpConnected.length === 0)
@@ -77,7 +82,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 (jsxRuntime.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) => (jsxRuntime.jsx("span", { className: "devic-int-launcher-item", "data-connected": integration.connected, title: integration.name, children: jsxRuntime.jsx(IntegrationLogo.IntegrationLogo, { integration: integration, className: "devic-int-launcher-logo" }) }, integration.app))), mcpShown.map((server) => (jsxRuntime.jsx("span", { className: "devic-int-launcher-item", "data-connected": server.connection.status === "active", title: server.name, children: server.logoUrl ? (jsxRuntime.jsx("img", { className: "devic-int-launcher-logo", src: server.logoUrl, alt: "", "aria-hidden": "true" })) : (jsxRuntime.jsx("span", { className: "devic-int-launcher-logo devic-int-launcher-initial", children: server.name.slice(0, 1).toUpperCase() })) }, server.connection.id))), extra > 0 && (jsxRuntime.jsxs("span", { className: "devic-int-launcher-item devic-int-launcher-more", children: ["+", extra] }))] }));
+    return (jsxRuntime.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) => (jsxRuntime.jsx("span", { className: "devic-int-launcher-item", "data-connected": integration.connected, title: integration.name, children: jsxRuntime.jsx(IntegrationLogo.IntegrationLogo, { integration: integration, className: "devic-int-launcher-logo" }) }, integration.app))), mcpShown.map((server) => (jsxRuntime.jsx("span", { className: "devic-int-launcher-item", "data-connected": server.connection.status === "active", title: server.name, children: server.logoUrl ? (jsxRuntime.jsx("img", { className: "devic-int-launcher-logo", src: server.logoUrl, alt: "", "aria-hidden": "true" })) : (jsxRuntime.jsx("span", { className: "devic-int-launcher-logo devic-int-launcher-initial", children: server.name.slice(0, 1).toUpperCase() })) }, server.connection.id))), extra > 0 && (jsxRuntime.jsxs("span", { className: "devic-int-launcher-item devic-int-launcher-more", children: ["+", extra] }))] }));
 }
 
 exports.DEFAULT_MAX_LOGOS = DEFAULT_MAX_LOGOS;

package/dist/cjs/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":["useMemo","useRef","useState","useEffect","_jsx","_jsxs","IntegrationLogo"],"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":["useTranslations","useMemo","useRef","useState","useEffect","_jsx","_jsxs","IntegrationLogo"],"mappings":"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"}

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

@@ -9,6 +9,7 @@ var IntegrationLogo = require('./IntegrationLogo.js');
 var useIntegrations = require('./useIntegrations.js');
 var McpServersSection = require('./McpServersSection.js');
 var useTenantMcp = require('./useTenantMcp.js');
+var useTranslations = require('../../i18n/useTranslations.js');
 
 function PlugIcon() {
     return (jsxRuntime.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: [jsxRuntime.jsx("path", { d: "M12 22v-5" }), jsxRuntime.jsx("path", { d: "M9 8V2" }), jsxRuntime.jsx("path", { d: "M15 8V2" }), jsxRuntime.jsx("path", { d: "M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z" })] }));
@@ -24,21 +25,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
@@ -85,7 +89,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: theme$1, 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: theme$1, state, mcpState, active = true, showHeader = true, showSearch = true, showFooter = true, onClose, className, dialog = false, }) {
+    const t = useTranslations.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.useIntegrations({
@@ -347,8 +356,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 {
@@ -395,37 +403,39 @@ function IntegrationsPanel({ assistantId, tenantId, subtenantId, apiKey, baseUrl
             className ?? "",
         ]
             .filter(Boolean)
-            .join(" "), style: theme.themeVars(theme$1), "data-dark": dark, role: dialog ? "dialog" : "region", "aria-modal": dialog || undefined, "aria-label": title, onClick: dialog ? (e) => e.stopPropagation() : undefined, children: [showHeader && (jsxRuntime.jsxs("div", { className: "devic-int-header", children: [jsxRuntime.jsxs("h3", { className: "devic-int-title", children: [jsxRuntime.jsx(PlugIcon, {}), title] }), onClose && (jsxRuntime.jsx("button", { className: "devic-int-close", onClick: onClose, type: "button", "aria-label": "Close", children: "\u00D7" }))] })), showSearch && (jsxRuntime.jsxs("div", { className: "devic-int-search", children: [jsxRuntime.jsx(SearchIcon, {}), jsxRuntime.jsx("input", { type: "search", value: query, onChange: (e) => setQuery(e.target.value), placeholder: searchPlaceholder, "aria-label": searchPlaceholder, autoComplete: "off" })] })), jsxRuntime.jsxs("div", { className: "devic-int-body", children: [error && jsxRuntime.jsx("div", { className: "devic-int-error", children: error }), blockedUrl && (jsxRuntime.jsxs("div", { className: "devic-int-notice", children: ["Your browser blocked the pop-up.", " ", jsxRuntime.jsx("a", { href: blockedUrl.url, target: "_blank", rel: "noopener noreferrer", onClick: () => {
+            .join(" "), style: theme.themeVars(theme$1), "data-dark": dark, role: dialog ? "dialog" : "region", "aria-modal": dialog || undefined, "aria-label": title, onClick: dialog ? (e) => e.stopPropagation() : undefined, children: [showHeader && (jsxRuntime.jsxs("div", { className: "devic-int-header", children: [jsxRuntime.jsxs("h3", { className: "devic-int-title", children: [jsxRuntime.jsx(PlugIcon, {}), title] }), onClose && (jsxRuntime.jsx("button", { className: "devic-int-close", onClick: onClose, type: "button", "aria-label": t("Close"), children: "\u00D7" }))] })), showSearch && (jsxRuntime.jsxs("div", { className: "devic-int-search", children: [jsxRuntime.jsx(SearchIcon, {}), jsxRuntime.jsx("input", { type: "search", value: query, onChange: (e) => setQuery(e.target.value), placeholder: searchPlaceholder, "aria-label": searchPlaceholder, autoComplete: "off" })] })), jsxRuntime.jsxs("div", { className: "devic-int-body", children: [error && jsxRuntime.jsx("div", { className: "devic-int-error", children: error }), blockedUrl && (jsxRuntime.jsxs("div", { className: "devic-int-notice", children: [t("Your browser blocked the pop-up."), " ", jsxRuntime.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 : (jsxRuntime.jsx("div", { className: "devic-int-loading", children: "Loading apps\u2026" }))) : integrations.length === 0 ? (
+                    appsRefusalIsNoise ? null : (jsxRuntime.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 : (jsxRuntime.jsx("div", { className: "devic-int-empty", children: "No apps available here yet." }))) : visible.length === 0 ? (jsxRuntime.jsxs("div", { className: "devic-int-empty", children: ["No apps match \u201C", query.trim(), "\u201D."] })) : (jsxRuntime.jsx("div", { className: "devic-int-grid", children: visible.map((integration) => {
-                            const cardState = stateOf(integration);
+                    mcp.offered ? null : (jsxRuntime.jsx("div", { className: "devic-int-empty", children: t("No apps available here yet.") }))) : visible.length === 0 ? (jsxRuntime.jsx("div", { className: "devic-int-empty", children: t("No apps match “{query}”.", { query: query.trim() }) })) : (jsxRuntime.jsx("div", { className: "devic-int-grid", children: visible.map((integration) => {
+                            const cardState = stateOf(t, integration);
                             const busy = busyApp === integration.app;
                             return (jsxRuntime.jsxs("div", { className: "devic-int-card", "data-state": cardState.key, children: [jsxRuntime.jsxs("div", { className: "devic-int-card-head", children: [jsxRuntime.jsx(IntegrationLogo.IntegrationLogo, { integration: integration }), jsxRuntime.jsxs("span", { className: "devic-int-state", children: [jsxRuntime.jsx("span", { className: "devic-int-dot", "data-ok": cardState.key === "connected", "data-off": cardState.key === "disconnected", "aria-hidden": "true" }), cardState.label] })] }), jsxRuntime.jsx("div", { className: "devic-int-name", title: integration.name, children: integration.name }), integration.description && (jsxRuntime.jsx("div", { className: "devic-int-description", title: integration.description, children: integration.description })), jsxRuntime.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 && (jsxRuntime.jsx("ul", { className: "devic-int-accounts", children: integration.accounts.map((account) => (jsxRuntime.jsxs("li", { className: "devic-int-account", children: [jsxRuntime.jsx("span", { className: "devic-int-dot", "data-ok": !account.needsReconnect, "aria-hidden": "true" }), jsxRuntime.jsxs("span", { className: "devic-int-account-label", children: [accountLabel(account), account.needsReconnect && (jsxRuntime.jsxs("span", { className: "devic-int-account-warn", children: [" ", "\u00B7 reconnect required"] }))] }), jsxRuntime.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 && (jsxRuntime.jsx("div", { className: "devic-int-body devic-int-body-secondary", children: jsxRuntime.jsx(McpServersSection.McpServersSection, { state: mcp, theme: theme$1, query: query }) })), showFooter && (jsxRuntime.jsxs("div", { className: "devic-int-footer", children: [jsxRuntime.jsx("span", { children: "Only you can see and use the accounts you connect here." }), jsxRuntime.jsx("button", { type: "button", className: "devic-int-btn devic-int-btn-small", onClick: () => {
+                                                        t("Switch account") }), integration.accounts.length > 0 && (jsxRuntime.jsx("ul", { className: "devic-int-accounts", children: integration.accounts.map((account) => (jsxRuntime.jsxs("li", { className: "devic-int-account", children: [jsxRuntime.jsx("span", { className: "devic-int-dot", "data-ok": !account.needsReconnect, "aria-hidden": "true" }), jsxRuntime.jsxs("span", { className: "devic-int-account-label", children: [accountLabel(t, account), account.needsReconnect && (jsxRuntime.jsxs("span", { className: "devic-int-account-warn", children: [" ", "\u00B7 ", t("reconnect required")] }))] }), jsxRuntime.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 && (jsxRuntime.jsx("div", { className: "devic-int-body devic-int-body-secondary", children: jsxRuntime.jsx(McpServersSection.McpServersSection, { state: mcp, theme: theme$1, query: query }) })), showFooter && (jsxRuntime.jsxs("div", { className: "devic-int-footer", children: [jsxRuntime.jsx("span", { children: t("Only you can see and use the accounts you connect here.") }), jsxRuntime.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 && (jsxRuntime.jsx(ConnectFieldsForm.ConnectFieldsForm, { integration: promptIntegration, schemes: setupPrompt.schemes, initialScheme: setupPrompt.setup?.authScheme, onlyFields: setupPrompt.setup?.fields, submitting: busyApp === setupPrompt.app, error: formError, theme: theme$1, onCancel: () => {
+                        }, disabled: loading || mcp.loading || !!busyApp, children: t("Refresh") })] })), setupPrompt && promptIntegration && (jsxRuntime.jsx(ConnectFieldsForm.ConnectFieldsForm, { integration: promptIntegration, schemes: setupPrompt.schemes, initialScheme: setupPrompt.setup?.authScheme, onlyFields: setupPrompt.setup?.fields, submitting: busyApp === setupPrompt.app, error: formError, theme: theme$1, onCancel: () => {
                     setSetupPrompt(null);
                     setFormError(null);
                 }, onSubmit: (values) => handleConnect(promptIntegration, values) }))] }));