@kortix/ui 0.14.9 → 0.14.10

package/dist/i18n/en.js

@@ -372,6 +372,10 @@ const catalog = {
                 "connected": {
                     "label": "Connected accounts"
                 },
+                "chrome": {
+                    "label": "Kortix in Chrome",
+                    "description": "Your sessions use Chrome with your logins. You see every step."
+                },
                 "tokens": {
                     "label": "Personal access keys",
                     "description": "API keys that act as you — for the CLI, a script, or a CI job."
@@ -835,6 +839,14 @@ const catalog = {
                 "session_groups": {
                     "name": "Session groups",
                     "description": "Group the sidebar's sessions into named folders that everyone in the project shares, for example one per store or client. Move a session into a group from its menu or by dragging it; reorder and collapse the groups."
+                },
+                "artifact_comments": {
+                    "name": "Artifact comments",
+                    "description": "Discuss docs and pages in threads with people and agents. Requires Artifacts."
+                },
+                "chrome": {
+                    "name": "Kortix in Chrome",
+                    "description": "Let a session use your connected Chrome browser. You can take over or stop it at any time."
                 }
             },
             "channelsSwitch": {
@@ -1161,7 +1173,8 @@ const catalog = {
             "account": "Account",
             "loadError": "Failed to load projects",
             "createIn": "Create a project in {account}",
-            "localComputer": "Your computer"
+            "localComputer": "Your computer",
+            "appsAndExtensions": "Apps and extensions"
         },
         "manifestUpgrade": {
             "title": "Upgrade to v3",
@@ -1772,6 +1785,13 @@ const catalog = {
                 "updateFailed": "Could not update password",
                 "unexpected": "An unexpected error occurred"
             }
+        },
+        "panel": {
+            "waitingTitle": "Signing you in",
+            "waitingBody": "Connecting this panel to your Kortix account.",
+            "errorTitle": "Couldn't sign in",
+            "errorBody": "Sign in to Kortix in a browser tab, then reopen this panel.",
+            "signIn": "Sign in"
         }
     },
     "tools": {
@@ -6778,6 +6798,127 @@ const catalog = {
         "calendarEstimatedSr": "Past fire, estimated from the schedule",
         "calendarUpcomingSr": "Upcoming"
     },
+    "chrome": {
+        "pill": "Kortix in Chrome",
+        "connectTitle": "Add Kortix to Chrome",
+        "connectDescription": "Let your sessions use Chrome, with your logins. You see what they do and can stop them at any time.",
+        "promoLabel": "Kortix in Chrome",
+        "dismissPromo": "Dismiss",
+        "steps": {
+            "install": {
+                "title": "Add the extension",
+                "description": "From the Chrome Web Store.",
+                "done": "Kortix is in Chrome.",
+                "descriptionUnlisted": "Load it in Chrome."
+            },
+            "connect": {
+                "title": "Sign in",
+                "description": "Sign in to Kortix from the extension.",
+                "done": "Signed in."
+            },
+            "done": {
+                "title": "Connected",
+                "description": "Your browser appears here."
+            }
+        },
+        "addToChrome": "Add to Chrome",
+        "finishInChrome": "Chrome opened a Kortix tab. Click Connect there.",
+        "connect": "Connect",
+        "connecting": "Connecting…",
+        "done": "Done",
+        "unsupported": "Open Kortix in Chrome, Edge, Brave or Arc to connect it. Copy the link to open it there.",
+        "connectFailed": "Could not connect the browser. Try again.",
+        "online": "Online",
+        "offline": "Offline",
+        "lastSeen": "Last seen {time}",
+        "usedBy": "{count, plural, one {Used by # session now} other {Used by # sessions now}}",
+        "connectAnother": "Add another browser",
+        "listTitle": "Connected browsers",
+        "rename": "Rename {name}",
+        "renameLabel": "Browser name",
+        "disconnect": "Disconnect",
+        "disconnectTitle": "Disconnect {name}?",
+        "disconnectDescription": "Sessions that use it stop. To use it again, connect it from Chrome.",
+        "disconnected": "Browser disconnected",
+        "disconnectFailed": "Could not disconnect the browser. Try again.",
+        "updateFailed": "Could not save the change. Try again.",
+        "loadFailed": "Could not load your browsers.",
+        "retry": "Try again",
+        "access": {
+            "label": "Access",
+            "always": "Without asking",
+            "ask": "Ask first",
+            "off": "Off",
+            "description": "Whether a session asks you first."
+        },
+        "scope": {
+            "label": "Tabs",
+            "own": "Only tabs it opens",
+            "all": "All tabs",
+            "description": "Which tabs a session can see."
+        },
+        "how": {
+            "title": "How it works",
+            "group": "Each session works in its own tab group, with a glow on the page.",
+            "control": "Take over or Stop from the bar on the page at any time.",
+            "own": "Only your own sessions can use your browser."
+        },
+        "howToInstall": "How to install",
+        "copyLink": "Copy link",
+        "linkCopied": "Link copied",
+        "copyFailed": "Could not copy the link. Try again.",
+        "extensionMissing": "Kortix did not find the extension. Add it, then reload this page.",
+        "another": {
+            "title": "Another browser",
+            "waiting": "Waiting for the new browser to connect.",
+            "description": "Open Kortix in the other browser or Chrome profile, then add Kortix to Chrome there. Copy the link to open it."
+        },
+        "panel": {
+            "project": "Project",
+            "title": "Ask about this page",
+            "body": "Kortix reads the tab when you send. Nothing leaves this browser before that.",
+            "selectionTitle": "Ask about your selection",
+            "selectionBody": "Kortix gets the quote, the page title and the address. The rest of the page stays in this browser unless you add it.",
+            "actions": {
+                "summarize": "Summarize this page",
+                "tables": "Extract the tables",
+                "compare": "Compare with another tab",
+                "email": "Draft an email about this"
+            },
+            "prompts": {
+                "summarize": "Summarize this page.",
+                "tables": "Extract the tables on this page as CSV.",
+                "compare": "Compare these pages.",
+                "email": "Draft an email about this page."
+            },
+            "recent": "Recent in {project}",
+            "noProjects": "Create a project to start a chat.",
+            "createProject": "Create a project",
+            "addTab": "Tab",
+            "addTabsTitle": "Add tabs",
+            "addTabsHint": "Only the tabs you tick are sent.",
+            "addTabs": "{count, plural, =0 {Add tabs} one {Add # tab} other {Add # tabs}}",
+            "noTabs": "No other tabs in this window.",
+            "tabsFailed": "Could not list your tabs. Try again.",
+            "cancel": "Cancel",
+            "removeTab": "Remove {title}",
+            "removeQuote": "Remove the quote",
+            "wholePage": "Whole page",
+            "unreadable": "Kortix cannot read this page.",
+            "message": "Message",
+            "placeholder": "Ask anything about this tab",
+            "placeholderNoTab": "Ask Kortix anything",
+            "modeLabel": "How Kortix uses the tab",
+            "read": "Read",
+            "act": "Act",
+            "readHint": "Read sends this page's text. Act lets Kortix click and type in this tab.",
+            "actHint": "Kortix puts this tab in its tab group and can click and type there. Stop it from the bar on the page.",
+            "send": "Send",
+            "readFailed": "Kortix could not read the tab. Reload the page and try again.",
+            "screenshot": "Screenshot",
+            "captureFailed": "Kortix could not take a screenshot of this tab."
+        }
+    },
     "computers": {
         "connectYourComputer": "Connect your computer",
         "connectThisComputer": "Connect this computer",
@@ -8087,6 +8228,54 @@ const catalog = {
         "unavailable": "Image unavailable",
         "tryAgain": "Try again",
         "details": "Image details"
+    },
+    "appsModal": {
+        "title": "Apps and extensions",
+        "subtitle": "Use Kortix in your browser, on your computer and from your tools.",
+        "mock": {
+            "group": "Kortix · Return my order",
+            "button": "Start return",
+            "working": "Kortix is working",
+            "takeOver": "Take over",
+            "stop": "Stop"
+        },
+        "chrome": {
+            "name": "Kortix in Chrome",
+            "description": "Kortix opens pages, clicks and fills forms in your own browser, with your logins. You see every step.",
+            "connect": "Connect",
+            "connecting": "Connecting…",
+            "manage": "Manage",
+            "unsupported": "Open Kortix in Chrome, Edge, Brave or Arc to add it. Copy the link to open it there.",
+            "group": "Browser",
+            "manageLabel": "Manage Kortix in Chrome",
+            "summary": "{count, plural, one {# browser} other {# browsers}} · {online} online"
+        },
+        "computer": {
+            "title": "Your computer",
+            "thisComputer": "This computer",
+            "thisComputerDescription": "Let sessions use your files and terminal.",
+            "connected": "Connected",
+            "connect": "Connect",
+            "manage": "Manage",
+            "desktop": "Desktop app",
+            "desktopDescription": "Kortix as an app on your computer.",
+            "desktopRunning": "You are using it.",
+            "download": "Download",
+            "manageLabel": "Manage this computer",
+            "connectLabel": "Connect this computer"
+        },
+        "developers": {
+            "title": "Developers",
+            "cli": "Terminal (CLI)",
+            "cliDescription": "macOS and Linux, WSL on Windows",
+            "copy": "Copy command",
+            "copied": "Copied",
+            "mcp": "MCP",
+            "mcpDescription": "Use Kortix from Claude, Cursor or Codex.",
+            "connect": "Connect",
+            "connectLabel": "Connect MCP",
+            "copyFailed": "Could not copy the command. Try again."
+        }
     }
 };
 export default catalog;

package/dist/internal/apps-and-extensions/apps-modal.d.ts

@@ -0,0 +1,9 @@
+/** @internal Kortix apps only. No semver: it may change in any release. */
+/** Opens the dialog from `?apps=1` and removes the parameter. */
+export declare function useAppsDeepLink(): void;
+export declare function AppsModal({ chrome, onOpenComputer, onOpenMcp, }: {
+    /** The project's `chrome` flag: the Kortix in Chrome card shows only with it on. */
+    chrome: boolean;
+    onOpenComputer: () => void;
+    onOpenMcp: () => void;
+}): import("react").JSX.Element;

package/dist/internal/apps-and-extensions/apps-modal.js

@@ -0,0 +1,107 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * "Apps and extensions": every way to use Kortix outside this tab, in one
+ * dialog. Chrome first, then the computer, then the developer surfaces. Each
+ * row opens the dialog that already owns the flow (computer, MCP, Settings →
+ * Kortix in Chrome); nothing here pairs or connects by itself.
+ *
+ * It is mounted once, in the project sidebar, next to its only triggers: the
+ * workspace menu row, the sidebar row and `?apps=1`. Outside a project there is
+ * no workspace menu and no sidebar, so `?apps=1` there does nothing.
+ */
+import { useChromeConnections } from '@kortix/sdk/react';
+import { ArrowUpRightIcon, DownloadSimpleIcon, LaptopIcon, MonitorIcon, PlugsConnectedIcon, TerminalWindowIcon, } from '@phosphor-icons/react';
+import { useEffect, useId } from 'react';
+import { Button } from '../../primitives/button.js';
+import { Modal, ModalContent, ModalDescription, ModalTitle } from '../../primitives/modal.js';
+import { ChromeCopyLink, ChromeInstallActions, ChromeOnlineDot, useChromeConnect, } from '../chrome/chrome-connect.js';
+import { BrowserLogoTile } from '../chrome/browser-icon.js';
+import { ChromeMock } from '../chrome/chrome-mock.js';
+import { chromeCardState } from '../chrome/chrome-card-state.js';
+import { chromeCounts } from '../chrome/chrome-names.js';
+import { SolidCheckIcon } from '../icons/solid-check-icon.js';
+import { detectPlatform, isMobilePlatform } from '../lib/detect-os.js';
+import { useOwnsPairedComputer } from '../tunnel/computer-connect.js';
+import { errorToast } from '../../primitives/toast.js';
+import { useCopy } from '../hooks/use-copy.js';
+import { useTranslations } from '../../i18n/index.js';
+import { desktopDownloadUrl, isDesktop } from '../lib/desktop.js';
+import { useUiHostConfig, useUiPathname, useUiRouter, useUiSearchParams, } from '../../providers/ui-provider.js';
+import { useDeploymentCliInstallCommand } from '../lib/use-deployment-cli-install-command.js';
+import { useAppsModalStore } from '../stores/apps-modal-store.js';
+import { useSettingsPanelStore } from '../stores/settings-panel-store.js';
+/** Opens the dialog from `?apps=1` and removes the parameter. */
+export function useAppsDeepLink() {
+    const params = useUiSearchParams();
+    const pathname = useUiPathname();
+    const router = useUiRouter();
+    const wanted = params.get('apps') === '1';
+    useEffect(() => {
+        if (!wanted)
+            return;
+        useAppsModalStore.getState().setOpen(true);
+        const next = new URLSearchParams(params.toString());
+        next.delete('apps');
+        const query = next.toString();
+        router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false });
+    }, [wanted, params, pathname, router]);
+}
+export function AppsModal({ chrome, onOpenComputer, onOpenMcp, }) {
+    const t = useTranslations('appsModal');
+    const open = useAppsModalStore((state) => state.open);
+    const setOpen = useAppsModalStore((state) => state.setOpen);
+    useAppsDeepLink();
+    // Close first, then hand over: one dialog on screen at a time.
+    const hand = (next) => () => {
+        setOpen(false);
+        next();
+    };
+    return (_jsx(Modal, { open: open, onOpenChange: setOpen, children: _jsx(ModalContent, { className: "max-h-[90dvh] space-y-0 overflow-y-auto lg:max-w-2xl", children: _jsxs("div", { className: "flex flex-col gap-6 p-5 lg:p-8", children: [_jsxs("header", { className: "space-y-1.5 pr-10", children: [_jsx(ModalTitle, { className: "text-xl font-medium text-balance", children: t('title') }), _jsx(ModalDescription, { className: "text-muted-foreground text-sm text-pretty", children: t('subtitle') })] }), open ? (_jsxs(_Fragment, { children: [chrome ? _jsx(ChromeSection, { onManage: () => setOpen(false) }) : null, _jsx(ComputerSection, { onOpenComputer: hand(onOpenComputer) }), _jsx(DevelopersSection, { onOpenMcp: hand(onOpenMcp) })] })) : null] }) }) }));
+}
+/** The hero decides from THIS browser first. Other browsers are one line plus Manage. */
+function ChromeSection({ onManage }) {
+    const t = useTranslations('appsModal.chrome');
+    const state = useChromeConnect();
+    const { environment, checking, installed, signedIn, connected } = state;
+    const connections = useChromeConnections();
+    const { count, online } = chromeCounts(connections.data ?? []);
+    const cardState = chromeCardState({
+        thisBrowserConnected: Boolean(connected),
+        environment,
+        checking,
+        installed: installed || signedIn,
+    });
+    const manage = (_jsx(Button, { size: "sm", variant: "secondary", "aria-label": t('manageLabel'), onClick: () => {
+            onManage();
+            useSettingsPanelStore.getState().openSettings('chrome');
+        }, children: t('manage') }));
+    return (_jsxs("section", { "aria-labelledby": "apps-modal-browser", className: "space-y-3", children: [_jsx("h3", { id: "apps-modal-browser", className: "text-muted-foreground text-xs font-medium", children: t('group') }), _jsxs("div", { className: "grid items-center gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(BrowserLogoTile, { brand: "chrome", className: "size-7", iconClassName: "size-4" }), _jsx("h4", { className: "text-base font-medium", children: t('name') })] }), _jsx("p", { className: "text-muted-foreground text-sm text-pretty", children: t('description') })] }), cardState === 'connected' && connected ? (_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2", children: [manage, _jsxs("span", { className: "flex min-w-0 items-center gap-1.5 text-xs", children: [_jsx(ChromeOnlineDot, { online: connected.online }), _jsx("span", { className: "truncate", children: connected.name }), count > 1 ? (_jsxs("span", { className: "text-muted-foreground shrink-0", children: ["\u00B7 ", t('summary', { count, online })] })) : null] })] })) : (_jsxs(_Fragment, { children: [cardState === 'unsupported' ? (_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: t('unsupported') }), _jsx(ChromeCopyLink, {})] })) : (_jsx(ChromeInstallActions, { state: state })), count > 0 ? (_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: t('summary', { count, online }) }), manage] })) : null] }))] }), _jsx(ChromeMock, {})] })] }));
+}
+function ComputerSection({ onOpenComputer }) {
+    const t = useTranslations('appsModal.computer');
+    const { owned } = useOwnsPairedComputer();
+    const live = owned.some((machine) => machine.isLive);
+    const inShell = typeof window !== 'undefined' && isDesktop();
+    const platform = typeof navigator === 'undefined' ? null : detectPlatform(navigator.userAgent);
+    const download = platform && !isMobilePlatform(platform) ? desktopDownloadUrl(platform) : desktopDownloadUrl();
+    return (_jsxs(Group, { title: t('title'), children: [_jsx(AppRow, { icon: LaptopIcon, name: t('thisComputer'), description: live ? (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx(ChromeOnlineDot, { online: true }), t('connected')] })) : (t('thisComputerDescription')), action: _jsx(Button, { size: "sm", variant: "secondary", "aria-label": t(live ? 'manageLabel' : 'connectLabel'), onClick: onOpenComputer, children: live ? t('manage') : t('connect') }) }), _jsx(AppRow, { icon: MonitorIcon, name: t('desktop'), description: inShell ? t('desktopRunning') : t('desktopDescription'), action: inShell ? null : (_jsx(Button, { asChild: true, size: "sm", variant: "secondary", className: "gap-1.5", children: _jsxs("a", { href: download, children: [_jsx(DownloadSimpleIcon, { className: "size-3.5 shrink-0" }), t('download')] }) })) })] }));
+}
+function DevelopersSection({ onOpenMcp }) {
+    const t = useTranslations('appsModal.developers');
+    const command = useDeploymentCliInstallCommand(useUiHostConfig().deploymentVersion);
+    const { copy, copied } = useCopy({ toast: false });
+    const copyCommand = async () => {
+        if (!(await copy(command)))
+            errorToast(t('copyFailed'));
+    };
+    return (_jsxs(Group, { title: t('title'), children: [_jsx(AppRow, { icon: TerminalWindowIcon, name: t('cli'), description: t('cliDescription'), action: _jsxs(Button, { size: "sm", variant: "secondary", className: "gap-1.5", onClick: copyCommand, children: [copied ? _jsx(SolidCheckIcon, { className: "size-3.5" }) : null, copied ? t('copied') : t('copy')] }) }), _jsx(AppRow, { icon: PlugsConnectedIcon, name: t('mcp'), description: t('mcpDescription'), action: _jsxs(Button, { size: "sm", variant: "secondary", className: "gap-1.5", "aria-label": t('connectLabel'), onClick: onOpenMcp, children: [t('connect'), _jsx(ArrowUpRightIcon, { className: "size-3.5 shrink-0" })] }) })] }));
+}
+/** A muted label over plain rows: no card, no border, one rule between rows. */
+function Group({ title, children }) {
+    const id = useId();
+    return (_jsxs("section", { "aria-labelledby": id, className: "min-w-0 space-y-1", children: [_jsx("h3", { id: id, className: "text-muted-foreground text-xs font-medium", children: title }), _jsx("ul", { className: "divide-border divide-y", children: children })] }));
+}
+function AppRow({ icon: RowIcon, name, description, action, }) {
+    return (_jsxs("li", { className: "flex items-center gap-3 py-3", children: [_jsx("span", { className: "bg-muted flex size-9 shrink-0 items-center justify-center rounded-sm", children: _jsx(RowIcon, { className: "size-5" }) }), _jsxs("div", { className: "min-w-0 flex-1 space-y-0.5", children: [_jsx("p", { className: "text-sm font-medium", children: name }), _jsx("div", { className: "text-muted-foreground line-clamp-2 text-xs text-pretty", children: description })] }), action] }));
+}

package/dist/internal/chrome/browser-icon.d.ts

@@ -0,0 +1,24 @@
+/** @internal Kortix apps only. No semver: it may change in any release. */
+type BrowserKey = 'chrome' | 'brave' | 'arc' | 'opera' | 'vivaldi' | 'edge';
+/** Maps the API's `brand` string (Chrome, Edge, Brave, Arc, Dia, …) to a mark. Any other Chromium browser gets Chrome. */
+export declare function browserKey(brand: string | null | undefined): BrowserKey;
+/**
+ * The browser's mark. `tone="brand"` paints the official color; `tone="current"`
+ * paints `currentColor`, for the monochrome sidebar and settings rail.
+ */
+export declare function BrowserIcon({ brand, tone, className, }: {
+    brand?: string | null;
+    tone?: 'brand' | 'current';
+    className?: string;
+}): import("react").JSX.Element;
+/** The browser mark on a white tile. `className` sets the tile size and radius. */
+export declare function BrowserLogoTile({ brand, className, iconClassName, }: {
+    brand?: string | null;
+    className?: string;
+    iconClassName?: string;
+}): import("react").JSX.Element;
+/** Monochrome Chrome mark with the `Icon` call shape the settings rail expects. */
+export declare function ChromeRailIcon({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/internal/chrome/browser-icon.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Edge } from '../icons/edge.js';
+import { cn } from '../lib/utils.js';
+/** A third-party logo tile is white in both themes (color.md). */
+const LOGO_TILE_BACKGROUND = 'bg-white';
+/**
+ * Official brand colors, from simple-icons (CC0). The SVG files in
+ * `public/browser-icons/` are the same set. Edge is not in simple-icons 13:
+ * it renders the house full-colour `Edge` mark instead.
+ */
+const CHROME_BLUE = '#4285F4';
+const BRAVE_ORANGE = '#FB542B';
+const ARC_PINK = '#FCBFBD';
+const OPERA_RED = '#FF1B2D';
+const VIVALDI_RED = '#EF3939';
+const BROWSER_BRAND_HEX = {
+    chrome: CHROME_BLUE,
+    brave: BRAVE_ORANGE,
+    arc: ARC_PINK,
+    opera: OPERA_RED,
+    vivaldi: VIVALDI_RED,
+};
+const BROWSER_KEYS = ['brave', 'arc', 'opera', 'vivaldi', 'edge', 'chrome'];
+/** Maps the API's `brand` string (Chrome, Edge, Brave, Arc, Dia, …) to a mark. Any other Chromium browser gets Chrome. */
+export function browserKey(brand) {
+    const name = (brand ?? '').toLowerCase();
+    return BROWSER_KEYS.find((key) => name.includes(key)) ?? 'chrome';
+}
+/**
+ * The browser's mark. `tone="brand"` paints the official color; `tone="current"`
+ * paints `currentColor`, for the monochrome sidebar and settings rail.
+ */
+export function BrowserIcon({ brand, tone = 'brand', className, }) {
+    const key = browserKey(brand);
+    if (key === 'edge' && tone === 'brand')
+        return _jsx(Edge, { className: className });
+    const file = key === 'edge' ? 'chrome' : key;
+    const url = `url(/browser-icons/${file}.svg)`;
+    return (_jsx("span", { "aria-hidden": "true", className: cn('inline-block size-4 shrink-0', tone === 'current' && 'bg-current', className), style: {
+            backgroundColor: tone === 'brand' && key !== 'edge' ? BROWSER_BRAND_HEX[key] : undefined,
+            maskImage: url,
+            WebkitMaskImage: url,
+            maskSize: 'contain',
+            WebkitMaskSize: 'contain',
+            maskRepeat: 'no-repeat',
+            WebkitMaskRepeat: 'no-repeat',
+            maskPosition: 'center',
+            WebkitMaskPosition: 'center',
+        } }));
+}
+/** The browser mark on a white tile. `className` sets the tile size and radius. */
+export function BrowserLogoTile({ brand, className, iconClassName, }) {
+    return (_jsx("span", { className: cn(LOGO_TILE_BACKGROUND, 'ring-border flex size-9 shrink-0 items-center justify-center rounded-sm ring-1 ring-inset', className), children: _jsx(BrowserIcon, { brand: brand, className: cn('size-5', iconClassName) }) }));
+}
+/** Monochrome Chrome mark with the `Icon` call shape the settings rail expects. */
+export function ChromeRailIcon({ className }) {
+    return _jsx(BrowserIcon, { brand: "chrome", tone: "current", className: className });
+}

package/dist/internal/chrome/chrome-card-state.d.ts

@@ -0,0 +1,16 @@
+/** @internal Kortix apps only. No semver: it may change in any release. */
+/**
+ * Which call to action the Chrome card shows. Pure, so the three states
+ * (not installed, installed, connected) are testable without a browser.
+ */
+export type ChromeCardState = 'connected' | 'unsupported' | 'checking' | 'installed' | 'notInstalled';
+export declare function chromeCardState(input: {
+    /** THIS browser is connected. Other connected browsers do not count. */
+    thisBrowserConnected: boolean;
+    /** `unsupported`: Safari, Firefox, the desktop shell. */
+    environment: 'checking' | 'supported' | 'unsupported';
+    /** The first ping has not answered yet. */
+    checking: boolean;
+    /** The extension answered a ping, or a browser connected. */
+    installed: boolean;
+}): ChromeCardState;

package/dist/internal/chrome/chrome-card-state.js

@@ -0,0 +1,9 @@
+export function chromeCardState(input) {
+    if (input.thisBrowserConnected)
+        return 'connected';
+    if (input.environment === 'unsupported')
+        return 'unsupported';
+    if (input.checking)
+        return 'checking';
+    return input.installed ? 'installed' : 'notInstalled';
+}

package/dist/internal/chrome/chrome-connect.d.ts

@@ -0,0 +1,69 @@
+/** @internal Kortix apps only. No semver: it may change in any release. */
+import { type ChromeConnection } from '@kortix/sdk';
+type Environment = 'checking' | 'supported' | 'unsupported';
+/**
+ * The live state of the three steps: the extension is installed (ping every
+ * 2 s), the extension is signed in, and the new browser shows in the list
+ * (poll every 3 s). Mount it only while the steps are on screen.
+ */
+export type ChromeConnectState = ReturnType<typeof useChromeConnect>;
+/**
+ * `fresh`: the person adds ANOTHER browser. This browser's own extension state
+ * does not count: no ping, and only a browser that was not in the list when the
+ * dialog opened completes it.
+ */
+export declare function useChromeConnect({ fresh }?: {
+    fresh?: boolean;
+}): {
+    environment: Environment;
+    /** The first ping has not answered yet. */
+    checking: boolean;
+    installed: boolean;
+    signedIn: boolean;
+    connected: ChromeConnection | undefined;
+    connect: import("@tanstack/react-query").UseMutationResult<import("./extension.js").ExtensionConnectResult, Error, void, unknown>;
+};
+/** The Chrome mark on a small white tile, for a button label. */
+export declare function ChromeButtonMark(): import("react").JSX.Element;
+export declare function ChromeOnlineDot({ online, className }: {
+    online: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+/** Copies the link that opens Settings → Kortix in Chrome, for a browser that cannot run the extension. */
+export declare function ChromeCopyLink({ size, className }: {
+    size?: 'sm' | 'lg';
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * The action that moves this browser forward: Connect once the extension is
+ * there, otherwise Connect plus "How to install" (or "Add to Chrome" once the
+ * Web Store listing is public). Renders nothing for a connected browser.
+ */
+export declare function ChromeInstallActions({ state, size, className, showGuide, }: {
+    state: ChromeConnectState;
+    size?: 'sm' | 'lg';
+    className?: string;
+    /** The "How to install" link. Off where the page already links the docs. */
+    showGuide?: boolean;
+}): import("react").JSX.Element | null;
+/**
+ * The three steps and the one action that moves them. Used in the connect
+ * dialog and, with no browser connected yet, inline in Settings → Kortix in
+ * Chrome (`showActions={false}`: the page header holds the action there).
+ */
+export declare function ChromeConnectSteps({ state, onDone, showActions, }: {
+    state: ChromeConnectState;
+    onDone?: () => void;
+    showActions?: boolean;
+}): import("react").JSX.Element;
+/**
+ * "Add Kortix to Chrome": add the Kortix extension to Chrome, sign it in, and
+ * watch the browser appear. `fresh`: add ANOTHER browser. Same frame as
+ * `ComputerConnectModal`.
+ */
+export declare function ChromeConnectModal({ open, onOpenChange, fresh, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    fresh?: boolean;
+}): import("react").JSX.Element;
+export {};