@kortix/ui 0.14.8 → 0.14.10

package/dist/customize/sections/component/channel-connect-hero.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { NativeConnectorApp } from '../../../internal/connector-logo/connector-logo-source.js';
 /**
  * The connect hero both chat platforms share (`slack-connect-card.tsx`,
  * `teams-connect-card.tsx`): the logo tile, title, lede and actions on the
@@ -11,8 +12,8 @@ import type { ReactNode } from 'react';
  * link under it. Without it, the wizard is the primary button, so the
  * self-hosted route reads as a deliberate choice, not a missing feature.
  */
-export declare function ChannelConnectHero({ logo, title, lede, preview, canWrite, oneClickUrl, oneClickLabel, ownAppLabel, setupLabel, readOnlyNote, onOwnApp, }: {
-    logo: ReactNode;
+export declare function ChannelConnectHero({ app, title, lede, preview, canWrite, oneClickUrl, oneClickLabel, ownAppLabel, setupLabel, readOnlyNote, onOwnApp, }: {
+    app: NativeConnectorApp;
     title: string;
     lede: string;
     preview: ReactNode;

package/dist/customize/sections/component/channel-connect-hero.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Button } from '../../../primitives/button.js';
 import { CaretRightIcon } from '@phosphor-icons/react';
 import { UiLink as Link } from '../../../providers/ui-provider.js';
+import { ChannelHeroFrame } from './channel-hero-frame.js';
 /**
  * The connect hero both chat platforms share (`slack-connect-card.tsx`,
  * `teams-connect-card.tsx`): the logo tile, title, lede and actions on the
@@ -14,6 +15,6 @@ import { UiLink as Link } from '../../../providers/ui-provider.js';
  * link under it. Without it, the wizard is the primary button, so the
  * self-hosted route reads as a deliberate choice, not a missing feature.
  */
-export function ChannelConnectHero({ logo, title, lede, preview, canWrite, oneClickUrl, oneClickLabel, ownAppLabel, setupLabel, readOnlyNote, onOwnApp, }) {
-    return (_jsxs("div", { className: "bg-popover flex overflow-hidden rounded-lg border", children: [_jsxs("div", { className: "flex w-full shrink-0 flex-col justify-center gap-5 px-7 py-8 md:w-80", children: [_jsx("span", { className: "bg-background flex size-9 shrink-0 items-center justify-center rounded-md border", children: logo }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("h3", { className: "text-foreground text-xl font-medium tracking-tight text-balance", children: title }), _jsx("p", { className: "text-muted-foreground text-sm leading-relaxed text-pretty", children: lede })] }), canWrite ? (_jsx("div", { className: "flex flex-col items-start gap-3", children: oneClickUrl ? (_jsxs(_Fragment, { children: [_jsx(Button, { className: "transition-transform active:scale-96", asChild: true, children: _jsx(Link, { href: oneClickUrl, target: "_blank", rel: "noopener noreferrer", children: oneClickLabel }) }), _jsxs("button", { type: "button", onClick: onOwnApp, className: "text-muted-foreground hover:text-foreground flex items-center gap-1 text-sm transition-colors", children: [ownAppLabel, _jsx(CaretRightIcon, { className: "size-3 shrink-0" })] })] })) : (_jsx(Button, { className: "transition-transform active:scale-96", onClick: onOwnApp, children: setupLabel })) })) : (_jsx("p", { className: "text-muted-foreground text-xs", children: readOnlyNote }))] }), _jsx("div", { "aria-hidden": true, className: "bg-muted/50 hidden min-w-0 flex-1 border-s py-7 ps-7 select-none md:flex", children: _jsx("div", { className: "bg-background flex min-h-72 min-w-0 flex-1 overflow-hidden rounded-l-lg border-y border-s shadow-xs", children: preview }) })] }));
+export function ChannelConnectHero({ app, title, lede, preview, canWrite, oneClickUrl, oneClickLabel, ownAppLabel, setupLabel, readOnlyNote, onOwnApp, }) {
+    return (_jsx(ChannelHeroFrame, { app: app, title: title, lede: lede, preview: preview, actions: canWrite ? (_jsx("div", { className: "flex flex-col items-start gap-3", children: oneClickUrl ? (_jsxs(_Fragment, { children: [_jsx(Button, { className: "transition-transform active:scale-96", asChild: true, children: _jsx(Link, { href: oneClickUrl, target: "_blank", rel: "noopener noreferrer", children: oneClickLabel }) }), _jsxs("button", { type: "button", onClick: onOwnApp, className: "text-muted-foreground hover:text-foreground flex items-center gap-1 text-sm transition-colors", children: [ownAppLabel, _jsx(CaretRightIcon, { className: "size-3 shrink-0" })] })] })) : (_jsx(Button, { className: "transition-transform active:scale-96", onClick: onOwnApp, children: setupLabel })) })) : (_jsx("p", { className: "text-muted-foreground text-xs", children: readOnlyNote })) }));
 }

package/dist/customize/sections/component/channel-hero-frame.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+import type { NativeConnectorApp } from '../../../internal/connector-logo/connector-logo-source.js';
+/**
+ * The one hero every Kortix-native connection page draws: Slack, Teams,
+ * Email, Telegram and Computer. The logo tile, title, lede, a status line when
+ * connected and the actions on the left; on the right a mock of the place the
+ * agent shows up (a Slack channel, an inbox, a terminal). The mock is the
+ * pitch, so the copy column stays short. Below `md` the mock hides.
+ */
+export declare function ChannelHeroFrame({ app, title, lede, status, actions, preview, }: {
+    /** Which Kortix connector this is: its logo is the one every surface shows. */
+    app: NativeConnectorApp;
+    title: string;
+    lede: string;
+    /** The connected line: a green dot and what it is connected to. */
+    status?: ReactNode;
+    actions?: ReactNode;
+    preview: ReactNode;
+}): import("react").JSX.Element;
+/** The connected line inside a hero: a green dot, "Connected", what to. */
+export declare function ChannelHeroStatus({ label, detail }: {
+    label: string;
+    detail?: string | null;
+}): import("react").JSX.Element;
+export declare function ChannelHeroLayoutProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function ChannelHeroLogoInHeader({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useChannelHeroLayout(): boolean;

package/dist/customize/sections/component/channel-hero-frame.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import { ConnectorLogo } from '../../../internal/connector-logo/connector-logo.js';
+/**
+ * The one hero every Kortix-native connection page draws: Slack, Teams,
+ * Email, Telegram and Computer. The logo tile, title, lede, a status line when
+ * connected and the actions on the left; on the right a mock of the place the
+ * agent shows up (a Slack channel, an inbox, a terminal). The mock is the
+ * pitch, so the copy column stays short. Below `md` the mock hides.
+ */
+export function ChannelHeroFrame({ app, title, lede, status, actions, preview, }) {
+    const showLogo = useContext(ChannelHeroLogoShown);
+    return (_jsxs("div", { className: "bg-popover flex overflow-hidden rounded-lg border", children: [_jsxs("div", { className: "flex w-full shrink-0 flex-col justify-center gap-5 px-7 py-8 md:w-80", children: [showLogo ? _jsx(ConnectorLogo, { source: { nativeApp: app }, size: "lg" }) : null, _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("h3", { className: "text-foreground text-xl font-medium tracking-tight text-balance", children: title }), _jsx("p", { className: "text-muted-foreground text-sm leading-relaxed text-pretty", children: lede })] }), status ? _jsx("div", { className: "text-foreground flex min-w-0 items-center gap-2 text-sm", children: status }) : null, actions ? _jsx("div", { className: "flex flex-wrap items-center gap-2", children: actions }) : null] }), _jsx("div", { "aria-hidden": true, className: "bg-muted/50 hidden min-w-0 flex-1 border-s py-7 ps-7 select-none md:flex", children: _jsx("div", { className: "bg-background flex min-h-72 min-w-0 flex-1 overflow-hidden rounded-l-lg border-y border-s shadow-xs", children: preview }) })] }));
+}
+/** The connected line inside a hero: a green dot, "Connected", what to. */
+export function ChannelHeroStatus({ label, detail }) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, className: "bg-kortix-green size-2 shrink-0 rounded-full" }), _jsxs("span", { className: "min-w-0 truncate", children: [_jsx("span", { className: "font-medium", children: label }), detail ? _jsxs("span", { className: "text-muted-foreground", children: [" \u00B7 ", detail] }) : null] })] }));
+}
+/**
+ * On a single channel's page every channel draws as a hero, not a list row:
+ * `ChannelRow` reads this and, when the row carries `hero` copy, renders the
+ * frame with the row's own actions.
+ */
+const ChannelHeroLayout = createContext(false);
+export function ChannelHeroLayoutProvider({ children }) {
+    return _jsx(ChannelHeroLayout.Provider, { value: true, children: children });
+}
+/**
+ * A page whose header already shows the app's logo beside its title (the app
+ * page) wraps its hero in this, so the logo is never drawn twice on one page.
+ * The Channels tab has no per-app header, so its heroes keep theirs.
+ */
+const ChannelHeroLogoShown = createContext(true);
+export function ChannelHeroLogoInHeader({ children }) {
+    return _jsx(ChannelHeroLogoShown.Provider, { value: false, children: children });
+}
+export function useChannelHeroLayout() {
+    return useContext(ChannelHeroLayout);
+}

package/dist/customize/sections/component/channel-mocks.d.ts

@@ -0,0 +1,6 @@
+/** An inbox thread: Maya writes to the project's address and the agent replies in the thread. */
+export declare function EmailThreadMock(): import("react").JSX.Element;
+/** A Telegram chat with the project's bot. */
+export declare function TelegramChatMock(): import("react").JSX.Element;
+/** A terminal on the person's own machine: the agent reads files, runs a command and uses an app. */
+export declare function ComputerTerminalMock(): import("react").JSX.Element;

package/dist/customize/sections/component/channel-mocks.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The previews beside the Email, Telegram and Computer heroes
+ * (`channel-hero-frame.tsx`), drawn like the Slack and Teams ones: a glimpse
+ * of the place the agent shows up, with one person asking and the agent
+ * answering. Decorative: the hero's heading and lede say it in words.
+ */
+import { EnvelopeSimpleIcon, PaperPlaneTiltIcon, TerminalWindowIcon } from '@phosphor-icons/react';
+import { useTranslations } from '../../../i18n/index.js';
+import { Kortix } from '../../../internal/icons/kortix.js';
+/** Telegram's own colours, so the mock reads as Telegram at a glance: its
+ *  blue, the outgoing bubble (light and dark), and white on the blue. */
+const TELEGRAM_ACCENT = '#229ed9';
+const TELEGRAM_BUBBLE = 'light-dark(#effdde, #2b5278)';
+const TELEGRAM_ON_ACCENT = '#ffffff';
+const TELEGRAM_UI = {
+    '--telegram-accent': TELEGRAM_ACCENT,
+    '--telegram-bubble': TELEGRAM_BUBBLE,
+    '--telegram-on-accent': TELEGRAM_ON_ACCENT,
+};
+/** An inbox thread: Maya writes to the project's address and the agent replies in the thread. */
+export function EmailThreadMock() {
+    const t = useTranslations('connectorPages');
+    return (_jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-5 py-3", children: [_jsx(EnvelopeSimpleIcon, { className: "text-muted-foreground size-4 shrink-0" }), _jsx("p", { className: "text-foreground truncate text-sm font-semibold", children: t('mockEmailSubject') })] }), _jsxs("div", { className: "flex flex-1 flex-col gap-4 px-5 py-4 text-sm", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs("p", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-foreground font-semibold", children: "Maya" }), _jsx("span", { className: "text-muted-foreground truncate text-xs", children: t('mockEmailTo') })] }), _jsx("p", { className: "text-foreground text-pretty", children: t('mockEmailAsk') })] }), _jsxs("div", { className: "bg-muted/40 space-y-1 rounded-md border px-3 py-2.5", children: [_jsxs("p", { className: "flex items-center gap-2", children: [_jsx("span", { className: "bg-background flex size-5 items-center justify-center rounded-sm border", children: _jsx(Kortix, { className: "size-3" }) }), _jsx("span", { className: "text-foreground font-semibold", children: "Kortix" }), _jsx("span", { className: "text-muted-foreground text-xs", children: t('mockEmailReplied') })] }), _jsx("p", { className: "text-foreground text-pretty", children: t('mockEmailReply') })] })] })] }));
+}
+/** A Telegram chat with the project's bot. */
+export function TelegramChatMock() {
+    const t = useTranslations('connectorPages');
+    return (_jsxs("div", { className: "flex min-w-0 flex-1 flex-col", style: TELEGRAM_UI, children: [_jsxs("div", { className: "flex items-center gap-2.5 border-b px-5 py-3", children: [_jsx("span", { className: "flex size-7 items-center justify-center rounded-full bg-(--telegram-accent)", children: _jsx(Kortix, { className: "size-3.5 text-(--telegram-on-accent)" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-foreground text-sm font-semibold", children: "Kortix" }), _jsx("p", { className: "text-muted-foreground text-xs", children: t('mockTelegramBot') })] })] }), _jsxs("div", { className: "flex flex-1 flex-col justify-end gap-2.5 px-5 py-4 text-sm", children: [_jsx("p", { className: "text-foreground ms-auto max-w-[80%] rounded-lg rounded-br-xs bg-(--telegram-bubble) px-3 py-2 text-pretty", children: t('mockTelegramAsk') }), _jsx("p", { className: "text-foreground bg-muted max-w-[80%] rounded-lg rounded-bl-xs px-3 py-2 text-pretty", children: t('mockTelegramReply') })] }), _jsxs("div", { className: "mx-5 mb-4 flex h-9 items-center justify-between rounded-full border px-3", children: [_jsx("span", { className: "bg-muted h-2 w-28 rounded-full" }), _jsx(PaperPlaneTiltIcon, { className: "size-4 shrink-0 text-(--telegram-accent)" })] })] }));
+}
+/** A terminal on the person's own machine: the agent reads files, runs a command and uses an app. */
+export function ComputerTerminalMock() {
+    const t = useTranslations('connectorPages');
+    const lines = [
+        { prompt: true, text: t('mockComputerFiles') },
+        { text: t('mockComputerFilesResult'), muted: true },
+        { prompt: true, text: 'npm test' },
+        { text: t('mockComputerTestsResult'), muted: true },
+        { prompt: true, text: t('mockComputerScreen') },
+        { text: t('mockComputerScreenResult'), muted: true },
+    ];
+    return (
+    // A terminal is dark in both themes, so its tokens resolve under `dark`.
+    _jsxs("div", { className: "dark bg-background text-foreground flex min-w-0 flex-1 flex-col", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-4 py-2.5", children: [_jsx(TerminalWindowIcon, { className: "text-muted-foreground size-4 shrink-0" }), _jsx("p", { className: "text-muted-foreground truncate font-mono text-xs", children: t('mockComputerTitle') })] }), _jsx("div", { className: "flex flex-1 flex-col gap-1.5 px-4 py-4 font-mono text-xs", children: lines.map((line, index) => (_jsxs("p", { className: line.muted ? 'text-muted-foreground' : 'text-foreground', children: [line.prompt ? _jsx("span", { className: "text-kortix-green", children: "\u25CF " }) : _jsx("span", { children: '  ' }), line.text] }, index))) })] }));
+}

package/dist/customize/sections/component/channel-row.d.ts

@@ -1,15 +1,25 @@
-export declare function ChannelRow({ icon, name, connected, 
+import type { NativeConnectorApp } from '../../../internal/connector-logo/connector-logo-source.js';
+export declare function ChannelRow({ app, name, connected, 
 /** Shown when connected — the workspace, tenant, or address we're bound to. */
 detail, 
 /** Shown when NOT connected — what this channel gets you, in one line. */
-pitch, badge, actions, }: {
-    icon: React.ReactNode;
+pitch, badge, actions, hero, }: {
+    /** Which Kortix channel: its logo is the one every surface shows. */
+    app: NativeConnectorApp;
     name: string;
     connected: boolean;
     detail?: string | null;
     pitch: string;
     badge?: React.ReactNode;
     actions?: React.ReactNode;
+    /** The channel's own page draws it as a hero (`ChannelHeroLayoutProvider`):
+     *  its pitch when not connected, a connected line when it is. */
+    hero?: {
+        title: string;
+        connectedTitle: string;
+        lede?: string;
+        preview: React.ReactNode;
+    };
 }): import("react").JSX.Element;
 /**
  * Disconnect as a two-step inline swap (Disconnect → Cancel | Disconnect).

package/dist/customize/sections/component/channel-row.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations } from '../../../i18n/index.js';
 /**
  * One channel as an entity row — the shape that replaced the four-column
@@ -27,18 +27,24 @@ import { Button } from '../../../primitives/button.js';
 import Loading from '../../../primitives/loading.js';
 import { cn } from '../../../internal/lib/utils.js';
 import { XIcon } from '@phosphor-icons/react';
+import { ConnectorLogo } from '../../../internal/connector-logo/connector-logo.js';
 import { useState } from 'react';
+import { ChannelHeroFrame, ChannelHeroStatus, useChannelHeroLayout } from './channel-hero-frame.js';
 /** Local, not exported — `ChannelRow` is the only sanctioned way to draw it. */
 function ChannelStatusDot({ connected }) {
     return (_jsx("span", { "aria-hidden": true, className: cn('size-1.5 shrink-0 rounded-full', connected ? 'bg-kortix-green' : 'bg-muted-foreground/40') }));
 }
-export function ChannelRow({ icon, name, connected, 
+export function ChannelRow({ app, name, connected, 
 /** Shown when connected — the workspace, tenant, or address we're bound to. */
 detail, 
 /** Shown when NOT connected — what this channel gets you, in one line. */
-pitch, badge, actions, }) {
+pitch, badge, actions, hero, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
-    return (_jsxs("li", { className: "bg-popover flex items-center gap-3 rounded-md border px-4 py-2.5", children: [_jsx("span", { className: "bg-muted/60 flex size-9 shrink-0 items-center justify-center rounded-sm", children: icon }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: name }), badge] }), _jsxs("div", { className: "text-muted-foreground flex min-w-0 items-center gap-1.5 text-xs", children: [_jsx(ChannelStatusDot, { connected: connected }), connected ? (_jsxs("span", { className: "max-w-[240px] truncate", title: detail ?? undefined, children: [tI18nComplete.raw('text22965568d22a'), detail ? ` · ${detail}` : ''] })) : (_jsx("span", { className: "truncate", children: pitch }))] })] }), actions ? _jsx("div", { className: "flex shrink-0 items-center gap-1", children: actions }) : null] }));
+    const heroLayout = useChannelHeroLayout();
+    if (heroLayout && hero) {
+        return (_jsx(ChannelHeroFrame, { app: app, title: connected ? hero.connectedTitle : hero.title, lede: hero.lede ?? pitch, status: connected ? _jsx(ChannelHeroStatus, { label: tI18nComplete.raw('text22965568d22a'), detail: detail }) : undefined, actions: badge || actions ? (_jsxs(_Fragment, { children: [badge, actions] })) : undefined, preview: hero.preview }));
+    }
+    return (_jsxs("li", { className: "bg-popover flex items-center gap-3 rounded-md border px-4 py-2.5", children: [_jsx(ConnectorLogo, { source: { nativeApp: app }, size: "lg" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: name }), badge] }), _jsxs("div", { className: "text-muted-foreground flex min-w-0 items-center gap-1.5 text-xs", children: [_jsx(ChannelStatusDot, { connected: connected }), connected ? (_jsxs("span", { className: "max-w-[240px] truncate", title: detail ?? undefined, children: [tI18nComplete.raw('text22965568d22a'), detail ? ` · ${detail}` : ''] })) : (_jsx("span", { className: "truncate", children: pitch }))] })] }), actions ? _jsx("div", { className: "flex shrink-0 items-center gap-1", children: actions }) : null] }));
 }
 /**
  * Disconnect as a two-step inline swap (Disconnect → Cancel | Disconnect).

package/dist/customize/sections/component/email-connect-form.d.ts

@@ -0,0 +1,27 @@
+import { type EmailSenderPolicy } from '../../../internal/hooks/channels/use-channels-installations.js';
+import { type EmailInbox } from '../../../internal/hooks/channels/use-email-inboxes.js';
+export type Senders = 'me' | 'team' | 'anyone' | 'custom';
+/** The viewer's work domain, or null for a public mail provider or no email. */
+export declare function teamDomainOf(email: string | null | undefined): string | null;
+/** The choice preselected for a new inbox: the narrowest one that still names a real sender. */
+export declare function defaultSenders(email: string | null | undefined): Senders;
+/** The wire policy for a choice. `custom` routes each entry by shape: with a local part an email, else a domain. */
+export declare function senderPolicyFor(choice: Senders, input: {
+    email: string | null;
+    customList: string;
+}): EmailSenderPolicy;
+/**
+ * The email half of "Add inbox": where the inbox lives, its address and who may
+ * email it. The account half (its name, who can use it) is `AddAccountFields`
+ * above it in the same dialog, passed in as `account`. Each inbox is one
+ * account on the `kortix_email` connector profile.
+ */
+export declare function EmailConnectForm({ projectId, account, onConnected, }: {
+    projectId: string;
+    /** The new account's name and owner: you only, or the project (shared). */
+    account: {
+        label?: string;
+        share: 'me' | 'project';
+    };
+    onConnected: (inbox: EmailInbox) => void;
+}): import("react").JSX.Element;

package/dist/customize/sections/component/email-connect-form.js

@@ -0,0 +1,183 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Connect Email: give the agent a Resend inbox. Two homes for it:
+ *   - Your Resend account (first, and the default): your API key, on any
+ *     domain you verified there with receiving on. A new domain is added here
+ *     and shows the DNS records to set, with "Check again" until Resend
+ *     verifies it.
+ *   - Kortix managed: the deployment's Resend team on its managed domain
+ *     (`mode.managed_domain`). Offered only where the operator turned it on
+ *     (`mode.managed_available`).
+ * Then who may email the agent: a new inbox starts sessions on this
+ * project's credits, so the preselected choice is the viewer alone, or their
+ * work domain. "Anyone" stays one click away.
+ */
+import { CheckIcon, CopyIcon, EnvelopeSimpleIcon } from '@phosphor-icons/react';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslations } from '../../../i18n/index.js';
+import { useAddEmailDomain, useEmailMode, useListEmailDomains, useVerifyEmailDomain, } from '../../../internal/hooks/channels/use-channels-installations.js';
+import { useAddEmailInbox } from '../../../internal/hooks/channels/use-email-inboxes.js';
+import { useCopy } from '../../../internal/hooks/use-copy.js';
+import { Badge } from '../../../primitives/badge.js';
+import { Button } from '../../../primitives/button.js';
+import { Field, FieldDescription, FieldLabel } from '../../../primitives/field.js';
+import { InfoBanner } from '../../../primitives/info-banner.js';
+import { Input } from '../../../primitives/input.js';
+import Loading from '../../../primitives/loading.js';
+import { RadioGroup, RadioGroupItem } from '../../../primitives/radio-group.js';
+import { Select, SelectContent, SelectItem, SelectSeparator, SelectTrigger, SelectValue } from '../../../primitives/select.js';
+import { Textarea } from '../../../primitives/textarea.js';
+import { UiLink as Link, useUiViewer } from '../../../providers/ui-provider.js';
+const ADD_DOMAIN = '__add__';
+/** What an own-key inbox needs, at Resend. */
+const RESEND_LINKS = {
+    apiKeys: 'https://resend.com/api-keys',
+    inboxes: 'https://resend.com/docs/dashboard/inboxes/introduction',
+    receiving: 'https://resend.com/docs/dashboard/receiving/custom-domains',
+};
+// ponytail: a short list of public mail providers, so "people at gmail.com" is
+// never offered as a team. A provider not listed only changes the preselection.
+const PUBLIC_MAIL_DOMAINS = new Set([
+    'gmail.com', 'googlemail.com', 'outlook.com', 'hotmail.com', 'live.com', 'yahoo.com', 'icloud.com',
+    'me.com', 'proton.me', 'protonmail.com', 'aol.com', 'gmx.de', 'gmx.net', 'web.de',
+]);
+function splitList(value) {
+    return Array.from(new Set(value.split(/[\n,]+/).map((v) => v.trim().toLowerCase()).filter(Boolean)));
+}
+/** The viewer's work domain, or null for a public mail provider or no email. */
+export function teamDomainOf(email) {
+    const domain = email?.trim().toLowerCase().split('@')[1] || null;
+    return domain && !PUBLIC_MAIL_DOMAINS.has(domain) ? domain : null;
+}
+/** The choice preselected for a new inbox: the narrowest one that still names a real sender. */
+export function defaultSenders(email) {
+    return teamDomainOf(email) ? 'team' : email ? 'me' : 'anyone';
+}
+/** The wire policy for a choice. `custom` routes each entry by shape: with a local part an email, else a domain. */
+export function senderPolicyFor(choice, input) {
+    const none = { allowedEmails: [], allowedDomains: [], allowedRegex: null };
+    const team = teamDomainOf(input.email);
+    if (choice === 'anyone')
+        return { mode: 'allow_all', ...none };
+    if (choice === 'team' && team)
+        return { mode: 'restricted', ...none, allowedDomains: [team] };
+    // `me`, or a `team` choice with no work domain: never wider than the viewer.
+    if (choice !== 'custom') {
+        return { mode: 'restricted', ...none, allowedEmails: input.email ? [input.email.toLowerCase()] : [] };
+    }
+    const items = splitList(input.customList);
+    return {
+        mode: 'restricted',
+        allowedRegex: null,
+        allowedEmails: items.filter((v) => v.includes('@') && !v.startsWith('@')),
+        allowedDomains: items.filter((v) => !v.includes('@') || v.startsWith('@')).map((v) => v.replace(/^@+/, '')),
+    };
+}
+/**
+ * The email half of "Add inbox": where the inbox lives, its address and who may
+ * email it. The account half (its name, who can use it) is `AddAccountFields`
+ * above it in the same dialog, passed in as `account`. Each inbox is one
+ * account on the `kortix_email` connector profile.
+ */
+export function EmailConnectForm({ projectId, account, onConnected, }) {
+    const t = useTranslations('emailConnect');
+    const mode = useEmailMode(projectId);
+    const connect = useAddEmailInbox();
+    const listDomains = useListEmailDomains();
+    const viewerEmail = useUiViewer()?.email?.trim().toLowerCase() || null;
+    const teamDomain = teamDomainOf(viewerEmail);
+    // Kortix managed is a second, optional home: the operator turns it on for
+    // the whole deployment (RESEND_MANAGED_EMAIL_ENABLED), never a project.
+    const managedAvailable = mode.data?.managed_available === true;
+    // An older server omits it; the address preview then shows "…".
+    const managedDomain = mode.data?.managed_domain || '…';
+    const [homeChoice, setHome] = useState(null);
+    // Until the user picks, the home follows what the deployment offers.
+    const home = managedAvailable ? (homeChoice ?? 'own') : 'own';
+    const [apiKey, setApiKey] = useState('');
+    // '' until the user picks: then the first verified domain of the key's account.
+    const [domainChoice, setDomain] = useState('');
+    const [added, setAdded] = useState([]);
+    const [username, setUsername] = useState('agent');
+    const [displayName, setDisplayName] = useState('Kortix Agent');
+    const [senders, setSenders] = useState(() => defaultSenders(viewerEmail));
+    const [customList, setCustomList] = useState('');
+    const [attachOpen, setAttachOpen] = useState(false);
+    const [inboxId, setInboxId] = useState('');
+    const [inboxEmail, setInboxEmail] = useState('');
+    const [error, setError] = useState(null);
+    // A pasted key loads that account's domains, half a second after typing stops.
+    const key = apiKey.trim();
+    useEffect(() => {
+        if (home !== 'own' || key.length < 8)
+            return;
+        const timer = setTimeout(() => listDomains.mutate({ projectId, apiKey: key }), 500);
+        return () => clearTimeout(timer);
+        // `listDomains.mutate` is stable; re-running on it would refetch on every render.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [home, key, projectId]);
+    const ownDomains = useMemo(() => {
+        const listed = home === 'own' && key ? (listDomains.data?.domains ?? []) : [];
+        const byName = new Map();
+        for (const d of [...listed, ...added])
+            byName.set(d.domain, d);
+        return [...byName.values()];
+    }, [added, home, key, listDomains.data]);
+    // A Resend account has no shared domain: an inbox lives on one of its own.
+    const domain = domainChoice || ownDomains.find((d) => d.verified)?.domain || ownDomains[0]?.domain || (key ? ADD_DOMAIN : '');
+    const selected = home === 'own' ? ownDomains.find((d) => d.domain === domain) : undefined;
+    const addressDomain = home === 'managed' ? managedDomain : !domain || domain === ADD_DOMAIN ? '…' : domain;
+    const address = `${username || 'agent'}@${addressDomain}`;
+    const domainReady = home === 'managed' || (Boolean(domain) && domain !== ADD_DOMAIN && selected?.verified !== false);
+    const submit = () => {
+        setError(null);
+        if (home === 'own' && !key)
+            return setError(t('errorKeyRequired'));
+        if (attachOpen && !inboxId.trim())
+            return setError(t('errorAttachBoth'));
+        const policy = senderPolicyFor(senders, { email: viewerEmail, customList });
+        if (senders === 'custom' && policy.allowedEmails.length + policy.allowedDomains.length === 0) {
+            return setError(t('errorCustomEmpty'));
+        }
+        connect.mutate({
+            projectId,
+            share: account.share,
+            ...(account.label?.trim() ? { label: account.label.trim() } : {}),
+            ...(home === 'own' ? { api_key: key } : {}),
+            display_name: displayName.trim() || undefined,
+            ...(attachOpen
+                ? { inbox_id: inboxId.trim(), ...(inboxEmail.trim() ? { email: inboxEmail.trim() } : {}) }
+                : {
+                    username: username.trim() || undefined,
+                    ...(home === 'own' ? { domain } : {}),
+                }),
+            sender_policy: policy,
+        }, { onSuccess: onConnected, onError: (e) => setError(e.message) });
+    };
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("section", { className: "space-y-3", children: [_jsx("h3", { className: "text-foreground text-sm font-medium", children: managedAvailable ? t('homeTitle') : t('homeOwn') }), managedAvailable ? (_jsxs(RadioGroup, { value: home, onValueChange: (v) => setHome(v), className: "grid gap-2 sm:grid-cols-2", children: [_jsx(RadioGroupItem, { value: "own", variant: "outline", label: t('homeOwn'), description: t('homeOwnHint') }), _jsx(RadioGroupItem, { value: "managed", variant: "outline", label: t('homeManaged'), description: t('homeManagedHint', { domain: managedDomain }) })] })) : null, home === 'own' ? (_jsxs("p", { className: "text-muted-foreground text-sm text-pretty", children: [t('ownNeeds'), ' ', _jsx(Link, { href: RESEND_LINKS.apiKeys, target: "_blank", rel: "noopener noreferrer", className: "text-foreground underline underline-offset-2", children: t('linkApiKeys') }), ' · ', _jsx(Link, { href: RESEND_LINKS.receiving, target: "_blank", rel: "noopener noreferrer", className: "text-foreground underline underline-offset-2", children: t('linkReceiving') }), ' · ', _jsx(Link, { href: RESEND_LINKS.inboxes, target: "_blank", rel: "noopener noreferrer", className: "text-foreground underline underline-offset-2", children: t('linkInboxes') })] })) : null, home === 'own' ? (_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "email-connect-key", children: t('keyLabel') }), _jsx(Input, { id: "email-connect-key", type: "password", value: apiKey, onChange: (e) => setApiKey(e.target.value), placeholder: "re_\u2026", autoComplete: "off", spellCheck: false }), _jsx(FieldDescription, { children: listDomains.isPending ? t('keyChecking') : listDomains.isError ? (_jsx("span", { className: "text-destructive", children: listDomains.error.message })) : listDomains.data && key ? (t('keyOk', { count: listDomains.data.domains.length })) : (t('keyHint')) })] })) : null] }), !attachOpen ? (_jsxs("section", { className: "space-y-3", children: [_jsx("h3", { className: "text-foreground text-sm font-medium", children: t('addressTitle') }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { "aria-label": t('usernameLabel'), value: username, onChange: (e) => setUsername(e.target.value.toLowerCase().replace(/[^a-z0-9._-]/g, '')), placeholder: "support", autoComplete: "off", spellCheck: false, className: "min-w-0 flex-1" }), _jsx("span", { className: "text-muted-foreground text-sm", children: "@" }), home === 'managed' ? (_jsx("span", { className: "bg-muted text-foreground flex h-9 min-w-0 flex-1 items-center rounded-md px-3 text-sm", children: _jsx("span", { className: "truncate", children: managedDomain }) })) : (_jsxs(Select, { value: domain, onValueChange: setDomain, children: [_jsx(SelectTrigger, { "aria-label": t('domainLabel'), className: "min-w-0 flex-1", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [ownDomains.map((d) => (_jsx(SelectItem, { value: d.domain, children: _jsxs("span", { className: "flex items-center gap-2", children: [d.domain, d.verified ? null : _jsx(Badge, { variant: "secondary", children: t('domainPending') })] }) }, d.domain))), _jsx(SelectSeparator, {}), _jsx(SelectItem, { value: ADD_DOMAIN, disabled: !key, children: t('domainAdd') })] })] }))] }), _jsxs("p", { className: "text-muted-foreground flex items-center gap-1.5 text-xs", children: [_jsx(EnvelopeSimpleIcon, { className: "size-3.5 shrink-0" }), _jsxs("span", { className: "truncate", children: [displayName.trim() || 'Kortix Agent', " <", address, ">"] })] }), home === 'own' && domain === ADD_DOMAIN ? (_jsx(AddDomain, { projectId: projectId, apiKey: key, onAdded: (result) => {
+                            setAdded((list) => [...list.filter((d) => d.domain !== result.domain.domain), result.domain]);
+                            setDomain(result.domain.domain);
+                        } })) : null, home === 'own' && selected && !selected.verified ? (_jsx(DomainRecords, { projectId: projectId, apiKey: key, domain: selected, onChecked: (result) => setAdded((list) => [...list.filter((d) => d.domain !== result.domain.domain), result.domain]) })) : null, _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "email-connect-name", children: t('displayNameLabel') }), _jsx(Input, { id: "email-connect-name", value: displayName, onChange: (e) => setDisplayName(e.target.value), placeholder: "Kortix Agent" })] })] })) : null, _jsxs("section", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-foreground text-sm font-medium", children: t('sendersTitle') }), _jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: t('sendersHint') })] }), _jsxs(RadioGroup, { value: senders, onValueChange: (v) => setSenders(v), children: [viewerEmail ? _jsx(RadioGroupItem, { value: "me", label: t('sendersMe', { email: viewerEmail }) }) : null, teamDomain ? _jsx(RadioGroupItem, { value: "team", label: t('sendersTeam', { domain: teamDomain }) }) : null, _jsx(RadioGroupItem, { value: "custom", label: t('sendersCustom') }), _jsx(RadioGroupItem, { value: "anyone", label: t('sendersAnyone'), description: t('sendersAnyoneHint') })] }), senders === 'custom' ? (_jsx(Textarea, { "aria-label": t('sendersCustom'), value: customList, onChange: (e) => setCustomList(e.target.value), placeholder: t('sendersCustomPlaceholder'), rows: 3, spellCheck: false })) : null] }), _jsxs("section", { className: "space-y-3", children: [_jsx(Button, { type: "button", variant: "text", size: "sm", className: "px-0", onClick: () => setAttachOpen((open) => !open), children: attachOpen ? t('attachClose') : t('attachOpen') }), attachOpen ? (_jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "email-connect-inbox-email", children: t('attachEmail') }), _jsx(Input, { id: "email-connect-inbox-email", value: inboxEmail, onChange: (e) => setInboxEmail(e.target.value.trim().toLowerCase()), placeholder: "support@example.com", autoComplete: "off", spellCheck: false })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "email-connect-inbox-id", children: t('attachId') }), _jsx(Input, { id: "email-connect-inbox-id", value: inboxId, onChange: (e) => setInboxId(e.target.value.trim()), autoComplete: "off", spellCheck: false })] }), _jsx("p", { className: "text-muted-foreground text-xs sm:col-span-2", children: t('attachHint') })] })) : null] }), error ? _jsx(InfoBanner, { tone: "destructive", children: error }) : null, _jsx("div", { className: "flex justify-end", children: _jsxs(Button, { onClick: submit, disabled: connect.isPending || mode.isLoading || (!attachOpen && !domainReady), children: [connect.isPending ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, attachOpen ? t('submitAttach') : t('submitCreate', { address })] }) })] }));
+}
+/** Add a custom domain to the account of `apiKey`. */
+function AddDomain({ projectId, apiKey, onAdded, }) {
+    const t = useTranslations('emailConnect');
+    const add = useAddEmailDomain();
+    const [value, setValue] = useState('');
+    return (_jsxs("div", { className: "bg-muted/40 space-y-2 rounded-md border p-3", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { "aria-label": t('domainAddLabel'), value: value, onChange: (e) => setValue(e.target.value.trim().toLowerCase()), placeholder: "mail.example.com", autoComplete: "off", spellCheck: false, className: "min-w-0 flex-1" }), _jsxs(Button, { variant: "secondary", disabled: !value || add.isPending, onClick: () => add.mutate({ projectId, apiKey, domain: value }, { onSuccess: onAdded }), children: [add.isPending ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, t('domainAddSubmit')] })] }), _jsx("p", { className: "text-muted-foreground text-xs", children: add.isError ? _jsx("span", { className: "text-destructive", children: add.error.message }) : t('domainAddHint') })] }));
+}
+/** The DNS records an unverified domain still needs, with one-click setup and "Check again". */
+function DomainRecords({ projectId, apiKey, domain, onChecked, }) {
+    const t = useTranslations('emailConnect');
+    const verify = useVerifyEmailDomain();
+    const setup = verify.data?.domain.domain === domain.domain ? verify.data.setup : null;
+    return (_jsxs("div", { className: "space-y-3 rounded-md border p-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: t('recordsTitle', { domain: domain.domain }) }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-xs", children: domain.reason || t('recordsHint') })] }), _jsxs(Button, { size: "sm", variant: "secondary", disabled: !domain.domain_id || verify.isPending, onClick: () => domain.domain_id &&
+                            verify.mutate({ projectId, apiKey, domainId: domain.domain_id }, { onSuccess: onChecked }), children: [verify.isPending ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, t('recordsCheck')] })] }), setup ? (_jsx(Button, { size: "sm", asChild: true, children: _jsx(Link, { href: setup.url, target: "_blank", rel: "noopener noreferrer", children: setup.provider_name ? t('recordsOneClickAt', { provider: setup.provider_name }) : t('recordsOneClick') }) })) : null, _jsx("ul", { className: "divide-y rounded-md border", children: domain.records.map((record) => (_jsx(RecordRow, { record: record }, `${record.type}:${record.name}:${record.value}`))) }), verify.isError ? _jsx("p", { className: "text-destructive text-xs", children: verify.error.message }) : null] }));
+}
+function RecordRow({ record }) {
+    const t = useTranslations('emailConnect');
+    const { copied, copy } = useCopy({ toast: false });
+    const valid = record.status === 'VALID';
+    return (_jsxs("li", { className: "grid grid-cols-[3.5rem_minmax(0,1fr)_auto] items-start gap-2 px-3 py-2 text-xs", children: [_jsx("span", { className: "text-muted-foreground font-mono", children: record.type }), _jsxs("div", { className: "min-w-0 space-y-0.5", children: [_jsx("p", { className: "text-foreground truncate font-mono", children: record.name }), _jsxs("p", { className: "text-muted-foreground font-mono break-all", children: [record.priority !== undefined ? `${record.priority} ` : '', record.value] }), record.reason ? _jsx("p", { className: "text-destructive", children: record.reason }) : null] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("span", { className: "text-muted-foreground flex items-center gap-1 text-xs", children: [valid ? _jsx(CheckIcon, { "aria-hidden": true, className: "text-kortix-green size-3.5" }) : null, valid ? t('recordValid') : t('recordMissing')] }), _jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": t('recordCopy'), onClick: () => void copy(record.value), children: copied ? _jsx(CheckIcon, { className: "size-3.5" }) : _jsx(CopyIcon, { className: "size-3.5" }) })] })] }));
+}

package/dist/customize/sections/component/slack-connect-card.d.ts

@@ -3,3 +3,10 @@ export declare function SlackConnectCard({ projectId, oauthInstallUrl, canWrite,
     oauthInstallUrl: string | null;
     canWrite: boolean;
 }): import("react").JSX.Element;
+/**
+ * A Slack channel at a glance: the aubergine sidebar as a skeleton, then
+ * `#launch` with Slack's message anatomy — a rounded-square avatar, a bold
+ * name, a small timestamp, the blue mention pill, and the `APP` tag on the
+ * agent's reply. The composer at the bottom is a skeleton too.
+ */
+export declare function SlackChannelMock(): import("react").JSX.Element;

package/dist/customize/sections/component/slack-connect-card.js

@@ -11,7 +11,6 @@ import { useTranslations } from '../../../i18n/index.js';
  * teammate @mentions the agent and it answers.
  */
 import { Kortix } from '../../../internal/icons/kortix.js';
-import { Slack } from '../../../internal/icons/slack.js';
 import { ChannelConnectHero } from './channel-connect-hero.js';
 import { SlackByoWizard } from './slack-byo-wizard.js';
 import { useState } from 'react';
@@ -38,7 +37,7 @@ const SLACK_UI = {
 export function SlackConnectCard({ projectId, oauthInstallUrl, canWrite, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const [wizardOpen, setWizardOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(ChannelConnectHero, { logo: _jsx(Slack, { className: "size-5 shrink-0" }), title: tI18nComplete.raw('text89e9e20668f3'), lede: oauthInstallUrl
+    return (_jsxs(_Fragment, { children: [_jsx(ChannelConnectHero, { app: "slack", title: tI18nComplete.raw('text89e9e20668f3'), lede: oauthInstallUrl
                     ? tI18nComplete.raw('textadb4acada861')
                     : tI18nComplete.raw('text4a79cdb7ab5e'), preview: _jsx(SlackChannelMock, {}), canWrite: canWrite, oneClickUrl: oauthInstallUrl, oneClickLabel: tI18nComplete.raw('text3357cd3d0cee'), ownAppLabel: tI18nComplete.raw('text260f0001800b'), setupLabel: tI18nComplete.raw('text68382ef84e6c'), readOnlyNote: tI18nComplete.raw('text581144514350'), onOwnApp: () => setWizardOpen(true) }), _jsx(SlackByoWizard, { projectId: projectId, open: wizardOpen, onOpenChange: setWizardOpen })] }));
 }
@@ -48,7 +47,7 @@ export function SlackConnectCard({ projectId, oauthInstallUrl, canWrite, }) {
  * name, a small timestamp, the blue mention pill, and the `APP` tag on the
  * agent's reply. The composer at the bottom is a skeleton too.
  */
-function SlackChannelMock() {
+export function SlackChannelMock() {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     return (_jsxs("div", { className: "flex flex-1", style: SLACK_UI, children: [_jsxs("div", { className: "flex w-28 shrink-0 flex-col gap-2.5 bg-(--slack-sidebar) px-3 py-4", children: [_jsx("span", { className: "mb-1.5 h-2.5 w-16 rounded-full bg-(--slack-on-sidebar)/50" }), _jsx("span", { className: "h-2 w-14 rounded-full bg-(--slack-on-sidebar)/20" }), _jsx("span", { className: "h-2 w-18 rounded-full bg-(--slack-on-sidebar)/20" }), _jsx("span", { className: "-mx-1.5 flex h-6 items-center rounded-md bg-(--slack-active) px-1.5", children: _jsx("span", { className: "h-2 w-12 rounded-full bg-(--slack-on-sidebar)/80" }) }), _jsx("span", { className: "h-2 w-16 rounded-full bg-(--slack-on-sidebar)/20" }), _jsx("span", { className: "h-2 w-10 rounded-full bg-(--slack-on-sidebar)/20" })] }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("p", { className: "text-foreground border-b px-5 py-3 text-sm font-semibold", children: tI18nComplete.raw('textd3d6fcf27034') }), _jsxs("div", { className: "flex flex-1 flex-col gap-4 px-5 py-4", children: [_jsxs("div", { className: "flex gap-2.5", children: [_jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-lg bg-(--slack-avatar) text-sm font-semibold text-(--slack-on-sidebar)", children: "M" }), _jsxs("div", { className: "min-w-0 text-sm", children: [_jsxs("p", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-foreground font-semibold", children: tI18nComplete.raw('textc6c8dad55129') }), _jsx("span", { className: "text-muted-foreground text-xs tabular-nums", children: tI18nComplete.raw('text9a059d44c8e5') })] }), _jsxs("p", { className: "text-foreground", children: [_jsx("span", { className: "rounded-xs bg-(--slack-mention-fill) px-0.5 text-(--slack-mention)", children: tI18nComplete.raw('text9bfa706b0569') }), ' ', tI18nComplete.raw('text675d4a4174ba')] })] })] }), _jsxs("div", { className: "flex gap-2.5", children: [_jsx("span", { className: "bg-background flex size-9 shrink-0 items-center justify-center rounded-lg border", children: _jsx(Kortix, { className: "size-4" }) }), _jsxs("div", { className: "min-w-0 text-sm", children: [_jsxs("p", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-foreground font-semibold", children: "Kortix" }), _jsx("span", { className: "bg-muted text-muted-foreground rounded-xs px-1 text-xs font-semibold", children: "APP" }), _jsx("span", { className: "text-muted-foreground text-xs tabular-nums", children: tI18nComplete.raw('text9a059d44c8e5') })] }), _jsx("p", { className: "text-foreground text-pretty", children: tI18nComplete.raw('textbd52d3eb5ed1') })] })] })] }), _jsx("div", { className: "mx-5 mb-4 flex h-9 items-center rounded-lg border px-3", children: _jsx("span", { className: "bg-muted h-2 w-28 rounded-full" }) })] })] }));
 }

package/dist/customize/sections/component/teams-connect-card.d.ts

@@ -4,3 +4,10 @@ export declare function TeamsConnectCard({ projectId, mode, canWrite, }: {
     mode: TeamsMode;
     canWrite: boolean;
 }): import("react").JSX.Element;
+/**
+ * A Teams channel at a glance: the app rail and the channel list as
+ * skeletons, then Launch's Posts tab with Teams' post anatomy — a card with a
+ * round initials avatar, a bold name and timestamp, the purple mention, and
+ * the agent's answer in the card's reply section. The composer is a skeleton.
+ */
+export declare function TeamsChannelMock(): import("react").JSX.Element;

package/dist/customize/sections/component/teams-connect-card.js

@@ -11,7 +11,6 @@ import { useTranslations } from '../../../i18n/index.js';
  * the one-click org-consent URL; the bring-your-own path is `TeamsByoWizard`.
  */
 import { Kortix } from '../../../internal/icons/kortix.js';
-import { MicrosoftTeams } from '../../../internal/icons/microsoft-teams.js';
 import { ChannelConnectHero } from './channel-connect-hero.js';
 import { TeamsByoWizard } from './teams-byo-wizard.js';
 import { useState } from 'react';
@@ -33,7 +32,7 @@ export function TeamsConnectCard({ projectId, mode, canWrite, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const [wizardOpen, setWizardOpen] = useState(false);
     const oneClickUrl = mode.available && !mode.byo ? mode.orgConsentUrl : null;
-    return (_jsxs(_Fragment, { children: [_jsx(ChannelConnectHero, { logo: _jsx(MicrosoftTeams, { className: "size-5 shrink-0" }), title: tI18nComplete.raw('textc1bd5ca19f5f'), lede: oneClickUrl
+    return (_jsxs(_Fragment, { children: [_jsx(ChannelConnectHero, { app: "teams", title: tI18nComplete.raw('textc1bd5ca19f5f'), lede: oneClickUrl
                     ? tI18nComplete.raw('texta15b754f2e91')
                     : tI18nComplete.raw('text7fd0fd8f2405'), preview: _jsx(TeamsChannelMock, {}), canWrite: canWrite, oneClickUrl: oneClickUrl, oneClickLabel: tI18nComplete.raw('text1fece1858ee9'), ownAppLabel: tI18nComplete.raw('texte2065cb79c86'), setupLabel: tI18nComplete.raw('texte2065cb79c86'), readOnlyNote: tI18nComplete.raw('text776fd1de4147'), onOwnApp: () => setWizardOpen(true) }), _jsx(TeamsByoWizard, { projectId: projectId, mode: mode, open: wizardOpen, onOpenChange: setWizardOpen })] }));
 }
@@ -43,7 +42,7 @@ export function TeamsConnectCard({ projectId, mode, canWrite, }) {
  * round initials avatar, a bold name and timestamp, the purple mention, and
  * the agent's answer in the card's reply section. The composer is a skeleton.
  */
-function TeamsChannelMock() {
+export function TeamsChannelMock() {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     return (_jsxs("div", { className: "flex flex-1", style: TEAMS_UI, children: [_jsxs("div", { className: "bg-muted/60 flex w-12 shrink-0 flex-col items-center gap-3 py-4", children: [_jsx("span", { className: "size-5 rounded-md bg-(--teams-brand)" }), _jsx("span", { className: "bg-muted-foreground/25 size-5 rounded-md" }), _jsx("span", { className: "bg-muted-foreground/25 size-5 rounded-md" }), _jsx("span", { className: "bg-muted-foreground/25 size-5 rounded-md" })] }), _jsxs("div", { className: "bg-muted/30 flex w-28 shrink-0 flex-col gap-3 border-e px-3 py-4", children: [_jsx("span", { className: "bg-muted-foreground/40 mb-1 h-2.5 w-14 rounded-full" }), _jsx("span", { className: "bg-muted-foreground/20 h-2 w-16 rounded-full" }), _jsx("span", { className: "bg-background -mx-1.5 flex h-6 items-center rounded-md border px-1.5", children: _jsx("span", { className: "bg-muted-foreground/50 h-2 w-12 rounded-full" }) }), _jsx("span", { className: "bg-muted-foreground/20 h-2 w-14 rounded-full" })] }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsxs("div", { className: "flex items-end gap-4 border-b px-4 pt-3", children: [_jsx("p", { className: "text-foreground pb-2.5 text-sm font-semibold", children: tI18nComplete.raw('texta4b2d28ad49b') }), _jsx("p", { className: "text-foreground border-b-2 border-(--teams-brand) pb-2 text-xs font-semibold", children: tI18nComplete.raw('text2c2e44899866') })] }), _jsxs("div", { className: "bg-muted/30 flex flex-1 flex-col justify-between gap-4 p-4", children: [_jsxs("div", { className: "bg-background overflow-hidden rounded-md border shadow-xs", children: [_jsxs("div", { className: "flex gap-2.5 p-3", children: [_jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-full bg-(--teams-avatar) text-xs font-semibold text-(--teams-avatar-text)", children: "M" }), _jsxs("div", { className: "min-w-0 text-sm", children: [_jsxs("p", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-foreground font-semibold", children: tI18nComplete.raw('textc6c8dad55129') }), _jsx("span", { className: "text-muted-foreground text-xs tabular-nums", children: tI18nComplete.raw('text9a059d44c8e5') })] }), _jsxs("p", { className: "text-foreground", children: [_jsx("span", { className: "font-semibold text-(--teams-brand)", children: "Kortix" }), ' ', tI18nComplete.raw('text5df6373cf99f')] })] })] }), _jsxs("div", { className: "bg-muted/30 flex gap-2.5 border-t py-2.5 ps-6 pe-3", children: [_jsx("span", { className: "bg-background flex size-6 shrink-0 items-center justify-center rounded-full border", children: _jsx(Kortix, { className: "size-3" }) }), _jsxs("div", { className: "min-w-0 text-sm", children: [_jsxs("p", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-foreground font-semibold", children: "Kortix" }), _jsx("span", { className: "text-muted-foreground text-xs tabular-nums", children: tI18nComplete.raw('text92dca4f34a6f') })] }), _jsx("p", { className: "text-foreground text-pretty", children: tI18nComplete.raw('textf4d1a9671f2f') })] })] })] }), _jsx("div", { className: "bg-background flex h-9 items-center rounded-md border px-3", children: _jsx("span", { className: "bg-muted h-2 w-24 rounded-full" }) })] })] })] }));
 }