@kortix/ui 0.14.8 → 0.14.10

package/dist/i18n/ui-catalog/localize-ui-catalog.js

@@ -25,6 +25,8 @@ const DISPLAY_PROPERTIES = new Set([
     'title',
     'tooltip',
 ]);
+/** Structural keys: a discriminant or an address, never copy. Translating one breaks the shape (2026-10-28: Italian turned `kind: 'steps'` into 'passaggi' and the /it/slack build crashed). */
+const STRUCTURAL_PROPERTIES = new Set(['kind', 'type', 'id', 'href', 'variant', 'icon', 'tone', 'status']);
 export function translateUiCatalogText(value, tI18nComplete, translationKeys) {
     if (value.length === 0)
         return value;
@@ -41,6 +43,8 @@ export function localizeUiCatalog(value, tI18nComplete, translationKeys) {
     if (!value || typeof value !== 'object' || '$$typeof' in value)
         return value;
     return Object.fromEntries(Object.entries(value).map(([key, entry]) => {
+        if (STRUCTURAL_PROPERTIES.has(key))
+            return [key, entry];
         if (typeof entry === 'string' && DISPLAY_PROPERTIES.has(key)) {
             return [key, translateUiCatalogText(entry, tI18nComplete, translationKeys)];
         }

package/dist/i18n/ui-catalog/remaining-ui-translation-keys.generated.js

@@ -1,5 +1,17 @@
 // Generated from the final user-visible i18n audit. Keys are SHA-256(message)[0:12].
 export const REMAINING_UI_TRANSLATION_KEYS = {
+    "Connector events": 'text0ba357fa63f8',
+    "Connector event": 'textca395c4d19b2',
+    "connector event": 'text6064256ee716',
+    "New connector event": 'text85a6c98e5584',
+    "Search connector events": 'text165d9237c163',
+    "No connector events yet": 'texta9caf7909165',
+    "Have an agent run when one of your Kortix Apps emits an event.": 'text451ef98453d2',
+    "App event": 'text5441e7146193',
+    "New App event": 'text064694999e1f',
+    "Search App events": 'text1934aa0740bb',
+    "No App events yet": 'text25db7e5609e5',
+    "An App starts agents by emitting events. Add a trigger with on: { event, app } in kortix.yaml.": 'text9f8f92588517',
     Drive: 'text6312b4b9baf1',
     Drives: 'text729fe0e7b138',
     '{label} has finished.': 'text27d628c8b427',
@@ -201,9 +213,9 @@ export const REMAINING_UI_TRANSLATION_KEYS = {
     'Every tool runs without asking. Only the rules below can stop one.': 'texta63fb2eebd02',
     'Everything an owner can do except deleting the account or transferring ownership. Also Manager on every project.': 'textc8ef36aed650',
     Expired: 'text424a2551d356',
-    'Converts the v1 kortix.toml into the governance-first kortix.yaml, refreshes platform-managed skills to the latest marketplace baseline, and opens a change request for review.': 'textc3d1545dd522',
+    'Moves kortix.toml or a version 2 kortix.yaml to version 3: the project registers skills, tools, commands and extensions, and each agent enables them by name. Refreshes platform-managed skills and opens a change request for review.': 'text7823a1f3af93',
     Extensions: 'textfe3436af86b4',
-    'Migrate manifest to v2 (kortix.yaml)': 'textd85a383e851d',
+    'Upgrade manifest to v3 (kortix.yaml)': 'text08edd5b6dcdc',
     Failed: 'text031a8f0f659d',
     Favicon: 'text4295528943df',
     'Fetching deals updated ≤ 7d': 'text5bae674104b6',
@@ -778,7 +790,7 @@ export const REMAINING_UI_TRANSLATION_KEYS = {
     'What does an agent actually run on?': 'text7b84ea95f8ae',
     'Its own machine. Every session boots an isolated Linux cloud computer with your repo and your tools already on it, on its own git branch — the session id, the sandbox id and the branch name are one and the same string. The agent can install, run and break anything inside it; only what it commits survives, because the machine is destroyed with everything on it.': 'text97bbd1c3b346',
     'What stops it doing something I did not want?': 'textc145665dd580',
-    'You set allow, ask or block per action, and a rule can match on a glob, a regular expression, or the arguments of the call itself. Be aware that nothing is switched on for you: a project with no policy declared runs every action, so this is a thing you configure rather than a thing you inherit. Session work reaches main through a change request, and merge is default-deny for an agent — an admin has to grant it in kortix.yaml, and that grant is itself an edit somebody else has to merge.': 'texta9fe46474f33',
+    'You set allow, ask or block per action, and a rule can match on a glob, a regular expression, or the arguments of the call itself. Be aware that nothing is switched on for you: a project with no policy declared runs every action, so this is a thing you configure rather than a thing you inherit. Session work reaches main through a change request, and merge is default-deny for an agent unless an admin grants it.': 'texta9fe46474f33',
     'Can I see everything an agent did?': 'text3a8d0e57770e',
     'It is all recorded, on every plan. Recording is never gated — actions, approvals and the session transcript are captured whatever you pay. Reading, exporting and streaming that audit trail out to your own SIEM is an Enterprise entitlement, so on the lower plans the record exists but the export does not.': 'text36814e8d3c88',
     'Is my company data yours?': 'text618ad8d1c91a',

package/dist/index.d.ts

@@ -25,11 +25,11 @@ export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, Me
 export { Marker, MarkerContent, MarkerIcon, markerVariants, } from './primitives/marker.js';
 export { useDebounce } from './hooks/use-debounce.js';
 export { useIsMobile } from './hooks/use-mobile.js';
-export { useMediaQuery } from './internal/hooks/use-media-query.js';
+export { useMediaQuery } from './hooks/use-media-query.js';
 export { useSlashFocus } from './internal/hooks/use-slash-focus.js';
 export { faviconUrlForHostname } from './lib/favicon.js';
 export { setUiHostEnv } from './lib/host-env.js';
-export { defaultUiRoutes, setUiRoutes, uiRoutes, type UiRoutes } from './lib/routes.js';
+export { decodeSpaceSegment, defaultUiRoutes, setUiRoutes, uiRoutes, type UiRoutes } from './lib/routes.js';
 export { DEFAULT_ICON_WEIGHT, ICON_WEIGHTS, SHIPPED_ICON_WEIGHTS } from './lib/icon-config.js';
 export { lazyClient } from './lib/lazy-client.js';
 export { spring } from './lib/springs.js';

package/dist/index.js

@@ -34,11 +34,11 @@ export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, Me
 export { Marker, MarkerContent, MarkerIcon, markerVariants, } from './primitives/marker.js';
 export { useDebounce } from './hooks/use-debounce.js';
 export { useIsMobile } from './hooks/use-mobile.js';
-export { useMediaQuery } from './internal/hooks/use-media-query.js';
+export { useMediaQuery } from './hooks/use-media-query.js';
 export { useSlashFocus } from './internal/hooks/use-slash-focus.js';
 export { faviconUrlForHostname } from './lib/favicon.js';
 export { setUiHostEnv } from './lib/host-env.js';
-export { defaultUiRoutes, setUiRoutes, uiRoutes } from './lib/routes.js';
+export { decodeSpaceSegment, defaultUiRoutes, setUiRoutes, uiRoutes } from './lib/routes.js';
 export { DEFAULT_ICON_WEIGHT, ICON_WEIGHTS, SHIPPED_ICON_WEIGHTS } from './lib/icon-config.js';
 export { lazyClient } from './lib/lazy-client.js';
 export { spring } from './lib/springs.js';

package/dist/internal/account-hub/account-settings-sidebar.js

@@ -47,7 +47,7 @@ const ROW_CLASS = 'text-sidebar-foreground/75 font-medium hover:bg-hover hover:t
 // stay put. Same two targets the user menu's Help group lists first.
 const FOOTER_LINKS = [
     { label: 'Docs', href: '/docs', icon: BookOpenIcon },
-    { label: 'Support', href: '/support', icon: QuestionIcon },
+    { label: 'Support', href: '/contact', icon: QuestionIcon },
 ];
 function NavRow({ entry }) {
     const { isMobile, setOpenMobile } = useSidebar();

package/dist/internal/account-hub/hub-sheet.d.ts

@@ -18,7 +18,8 @@
  * footer (`AccessDialog`) goes in `body` alone and draws its own sticky
  * footer: it reads `useInAccountHubSheetBody()`.
  */
-import { type ReactNode } from 'react';
+import { type ComponentProps, type ReactNode } from 'react';
+import { SelectionBar } from '../selection/selection-bar.js';
 export interface AccountHubSheetContent {
     title: ReactNode;
     description?: ReactNode;
@@ -29,6 +30,13 @@ export interface AccountHubSheet {
     open: (content: AccountHubSheetContent) => void;
     close: () => void;
 }
+/**
+ * A pane's bulk-action bar: the shared `SelectionBar`, pinned to the bottom of
+ * the hub's page column. The column scrolls, so `sticky` would stop under a
+ * short list: this renders into a slot that overlays the column's bottom edge
+ * and never scrolls. Render it only while something is selected.
+ */
+export declare function AccountHubSelectionBar(props: ComponentProps<typeof SelectionBar>): import("react").ReactPortal | null;
 /** True inside the hub sheet's body: a form there draws the sheet layout, not a modal. */
 export declare function useInAccountHubSheetBody(): boolean;
 /** Opens and closes the hub's split sheet. Throws outside the hub shell. */

package/dist/internal/account-hub/hub-sheet.js

@@ -19,10 +19,25 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * footer (`AccessDialog`) goes in `body` alone and draws its own sticky
  * footer: it reads `useInAccountHubSheetBody()`.
  */
-import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { createContext, useCallback, useContext, useMemo, useState, } from 'react';
+import { createPortal } from 'react-dom';
+import { SelectionBar } from '../selection/selection-bar.js';
 import { SplitSheet, SplitSheetBody, SplitSheetContent, SplitSheetDescription, SplitSheetFooter, SplitSheetHeader, SplitSheetMain, SplitSheetTitle, } from '../../primitives/split-sheet.js';
 const AccountHubSheetContext = createContext(null);
 const SheetBodyContext = createContext(false);
+const BottomBarSlotContext = createContext(null);
+/**
+ * A pane's bulk-action bar: the shared `SelectionBar`, pinned to the bottom of
+ * the hub's page column. The column scrolls, so `sticky` would stop under a
+ * short list: this renders into a slot that overlays the column's bottom edge
+ * and never scrolls. Render it only while something is selected.
+ */
+export function AccountHubSelectionBar(props) {
+    const slot = useContext(BottomBarSlotContext);
+    if (!slot)
+        return null;
+    return createPortal(_jsx("div", { className: "pointer-events-auto w-full max-w-xl", children: _jsx(SelectionBar, { ...props }) }), slot);
+}
 /** True inside the hub sheet's body: a form there draws the sheet layout, not a modal. */
 export function useInAccountHubSheetBody() {
     return useContext(SheetBodyContext);
@@ -39,8 +54,9 @@ export function AccountHubSheetProvider({ children }) {
     const [content, setContent] = useState(null);
     const close = useCallback(() => setContent(null), []);
     const sheet = useMemo(() => ({ open: setContent, close }), [close]);
-    return (_jsx(AccountHubSheetContext.Provider, { value: sheet, children: _jsxs(SplitSheet, { open: content !== null, onOpenChange: (next) => {
-                if (!next)
-                    close();
-            }, size: "md", children: [_jsx(SplitSheetMain, { children: children }), content ? (_jsxs(SplitSheetContent, { children: [_jsxs(SplitSheetHeader, { children: [_jsx(SplitSheetTitle, { children: content.title }), content.description ? (_jsx(SplitSheetDescription, { children: content.description })) : null] }), _jsx(SplitSheetBody, { children: _jsx(SheetBodyContext.Provider, { value: true, children: content.body }) }), content.footer ? _jsx(SplitSheetFooter, { children: content.footer }) : null] })) : null] }) }));
+    const [barSlot, setBarSlot] = useState(null);
+    return (_jsx(AccountHubSheetContext.Provider, { value: sheet, children: _jsx(BottomBarSlotContext.Provider, { value: barSlot, children: _jsxs(SplitSheet, { open: content !== null, onOpenChange: (next) => {
+                    if (!next)
+                        close();
+                }, size: "md", children: [_jsx(SplitSheetMain, { children: children }), _jsx("div", { ref: setBarSlot, className: "pointer-events-none z-10 col-start-1 row-start-1 flex justify-center self-end px-4 pb-4 empty:hidden" }), content ? (_jsxs(SplitSheetContent, { children: [_jsxs(SplitSheetHeader, { children: [_jsx(SplitSheetTitle, { children: content.title }), content.description ? (_jsx(SplitSheetDescription, { children: content.description })) : null] }), _jsx(SplitSheetBody, { children: _jsx(SheetBodyContext.Provider, { value: true, children: content.body }) }), content.footer ? _jsx(SplitSheetFooter, { children: content.footer }) : null] })) : null] }) }) }));
 }

package/dist/internal/account-hub/sections.d.ts

@@ -43,7 +43,7 @@ export declare function localizedAccountPaneMeta(tI18nComplete: UiTranslator): P
  * next step up, and the usage ledger needs the room a table with seven
  * columns takes.
  */
-/** `fluid`: the whole pane, Linear's members table — no centred column. */
+/** `fluid`: the whole pane, for the members and project tables — no centred column. */
 export type AccountPaneWidth = 'default' | 'wide' | 'full' | 'fluid';
 export declare function paneWidth(section: AccountSection): AccountPaneWidth;
 /**

package/dist/internal/account-hub/sections.js

@@ -127,7 +127,6 @@ export function localizedAccountPaneMeta(tI18nComplete) {
 }
 const WIDE_SECTIONS = [
     'groups',
-    'access-projects',
     'roles',
     'identity',
     'help',
@@ -135,7 +134,9 @@ const WIDE_SECTIONS = [
     'billing',
 ];
 const PANE_WIDTH = {
+    // The Members table and the project tables share one width: the whole pane.
     members: 'fluid',
+    'access-projects': 'fluid',
     ...Object.fromEntries(WIDE_SECTIONS.map((section) => [section, 'wide'])),
     transactions: 'full',
 };

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/auth/auth-card-shell.js

@@ -23,9 +23,9 @@ export function AuthLegalFooter({ variant = 'default' }) {
         if (openExternalRoute(href))
             event.preventDefault();
     };
-    const terms = (_jsx(Link, { href: "/legal/terms", onClick: (event) => onLegalClick(event, '/legal/terms'), className: "hover:text-muted-foreground transition-colors", children: t('termsOfService') }));
-    const privacy = (_jsx(Link, { href: "/legal?tab=privacy", onClick: (event) => onLegalClick(event, '/legal?tab=privacy'), className: "hover:text-muted-foreground transition-colors", children: t('privacyPolicy') }));
-    return (_jsx("footer", { className: "text-muted-foreground/60 mx-auto max-w-[380px] px-6 pb-10 text-center text-sm text-balance", children: variant === 'continue'
+    const terms = (_jsx(Link, { href: "/legal/terms", onClick: (event) => onLegalClick(event, '/legal/terms'), className: "hover:text-foreground transition-colors", children: t('termsOfService') }));
+    const privacy = (_jsx(Link, { href: "/legal?tab=privacy", onClick: (event) => onLegalClick(event, '/legal?tab=privacy'), className: "hover:text-foreground transition-colors", children: t('privacyPolicy') }));
+    return (_jsx("footer", { className: "text-muted-foreground mx-auto max-w-[380px] px-6 pb-10 text-center text-sm text-balance", children: variant === 'continue'
             ? t.rich('byContinuingYouAgree', {
                 termsOfService: () => terms,
                 privacyPolicy: () => privacy,

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 {};