@kortix/ui 0.0.0-stage → 0.14.4

package/dist/customize/connectors/catalog/catalog-entry.d.ts

@@ -0,0 +1,111 @@
+import type { UiTranslator } from '../../../i18n/index.js';
+import type { AdminConnector, DiscoverConnector, PipedreamApp } from '@kortix/sdk';
+import { POPULAR_SECTION } from './connector-categories.js';
+/**
+ * Which catalogue an entry came from. This is not cosmetic — it decides which
+ * install the app page's Install runs. A `discover` entry installs from its
+ * template (`discoverInstallTarget`); an `easy-connect` entry installs as a
+ * managed OAuth app via Pipedream (`easyConnectInstallTarget`). The two build
+ * different connectors and cannot be swapped.
+ */
+export type CatalogSource = 'discover' | 'easy-connect';
+interface CatalogEntryFields {
+    /** Stable React key. Prefixed by source, because the two catalogues are
+     *  independent namespaces and both publish a `slack`. */
+    key: string;
+    slug: string;
+    name: string;
+    description: string | null;
+    icon: string | null;
+    categories: string[];
+    /** Only Discover ranks its catalogue. Easy Connect entries are always
+     *  `null`, which keeps them out of the Popular section rather than sorting
+     *  them to the bottom of it. */
+    popularity: number | null;
+}
+/**
+ * One card in the catalogue, normalised across the two sources so the grid,
+ * the search, the category grouping and the connected-state join are written
+ * once instead of twice.
+ *
+ * The raw item rides along on the union arm so the page can hand it straight
+ * back to the matching add flow without a lookup.
+ */
+export type CatalogEntry = (CatalogEntryFields & {
+    source: 'discover';
+    connector: DiscoverConnector;
+    /** The managed catalogue lists the same app too (`mergeSearchEntries`). */
+    alsoApp?: boolean;
+}) | (CatalogEntryFields & {
+    source: 'easy-connect';
+    app: PipedreamApp & {
+        provider?: 'composio' | 'pipedream';
+    };
+}) | (CatalogEntryFields & {
+    source: 'computer';
+});
+/** Native platform provider. Each member's paired machine is one of its accounts. */
+export declare function computersCatalogEntry(tI18nComplete: UiTranslator): CatalogEntry;
+export declare function catalogEntryFromDiscover(connector: DiscoverConnector): CatalogEntry;
+export declare function catalogEntryFromEasyConnect(app: PipedreamApp & {
+    provider?: 'composio' | 'pipedream';
+}): CatalogEntry;
+/**
+ * The one fact that varies between cards: HOW this entry connects. Short
+ * nouns, shown as the card's quiet line under the title — every card gets
+ * one, so the rows scan as a consistent column.
+ */
+/**
+ * One key per app across both catalogues: lower case, letters and digits only,
+ * a trailing "MCP" dropped, so `Linear`, `Linear MCP` and `linear` match. The
+ * API joins managed apps to API/MCP entries with the same rule
+ * (`apps/api/src/connectors/connect-direct-twins.ts`).
+ */
+export declare function appNameKey(name: string): string;
+export declare function catalogEntryKindLabel(entry: CatalogEntry): string;
+/**
+ * Fold the spellings the two catalogues and the connector list disagree on
+ * into one comparable token: `Google Sheets`, `google-sheets` and
+ * `google_sheets` all become `googlesheets`.
+ */
+export declare function foldKey(value: string): string;
+/**
+ * The tokens that mean "this project already has it", for the `+` -> `✓` swap
+ * on a catalogue card.
+ *
+ * **This join is best-effort, and deliberately so.** `AdminConnector` does not
+ * carry the catalogue app it was created from — `buildEasyConnectConnectorDraft`
+ * writes `app: <catalogue slug>` into the draft
+ * (`connector-connection-form.ts:156`) but the read model never returns it
+ * (`connectors.ts:20-50`). So the only evidence available on the client is the
+ * connector's own connection slug and display name.
+ *
+ * Both are indexed, because the default add flow proposes a connection slug from
+ * the app's *name* (`proposeConnectorConnectionSlug(app.name, ...)`), not its
+ * slug, and the two differ whenever the catalogue's slug is not a slugified
+ * name (`google_sheets` vs "Google Sheets"). Folding both sides covers every
+ * default add.
+ *
+ * What it cannot cover: a connector whose slug AND name were both hand-edited
+ * away from the app they came from. That card shows `+` instead of `✓`. The
+ * card is still safe to click — the add flow proposes a fresh, non-colliding
+ * slug — so the failure mode is a redundant offer, never a broken one. The
+ * exact fix is to expose `app` on `AdminConnector`; until then this is the
+ * honest ceiling.
+ */
+export declare function connectedCatalogKeys(connectors: readonly AdminConnector[]): ReadonlySet<string>;
+export declare function isCatalogEntryConnected(entry: CatalogEntry, connectedKeys: ReadonlySet<string>): boolean;
+/**
+ * Every project connector that reads as created from this catalogue entry:
+ * the app page's "In this project" list. It does not skip `needs_auth` rows —
+ * this is "what exists", and the row's status line says what is missing.
+ *
+ * DISPLAY ONLY. It is lenient, so a wrong answer is a wrong row in a list.
+ * Install reuse must not use it: see `connectorInstalledFrom` in
+ * `install/install.ts`.
+ */
+export declare function catalogEntryConnectors(connectors: readonly AdminConnector[], entry: CatalogEntry): AdminConnector[];
+/** The synthetic first browse section. Not a catalogue category — see
+ *  `browseSections` in `browse-sections.ts`. Defined in `connector-categories.ts`
+ *  and re-exported here for the modules that already import this one. */
+export { POPULAR_SECTION };

package/dist/customize/connectors/catalog/catalog-entry.js

@@ -0,0 +1,172 @@
+import { POPULAR_SECTION } from './connector-categories.js';
+/** Native platform provider. Each member's paired machine is one of its accounts. */
+export function computersCatalogEntry(tI18nComplete) {
+    return {
+        source: 'computer',
+        key: 'computer:computers',
+        slug: 'computers',
+        name: 'Computer',
+        description: tI18nComplete.raw('text070855f4fe8d'),
+        icon: null,
+        categories: ['developer-tools'],
+        popularity: null,
+    };
+}
+export function catalogEntryFromDiscover(connector) {
+    return {
+        source: 'discover',
+        connector,
+        key: `discover:${connector.id}`,
+        slug: connector.slug,
+        name: connector.name,
+        description: connector.description,
+        icon: connector.icon,
+        categories: connector.categories,
+        popularity: connector.popularity,
+    };
+}
+export function catalogEntryFromEasyConnect(app) {
+    return {
+        source: 'easy-connect',
+        app,
+        key: `easy-connect:${app.slug}`,
+        slug: app.slug,
+        name: app.name,
+        description: app.description,
+        icon: app.imgSrc,
+        categories: app.categories,
+        popularity: null,
+    };
+}
+/**
+ * The one fact that varies between cards: HOW this entry connects. Short
+ * nouns, shown as the card's quiet line under the title — every card gets
+ * one, so the rows scan as a consistent column.
+ */
+/**
+ * One key per app across both catalogues: lower case, letters and digits only,
+ * a trailing "MCP" dropped, so `Linear`, `Linear MCP` and `linear` match. The
+ * API joins managed apps to API/MCP entries with the same rule
+ * (`apps/api/src/connectors/connect-direct-twins.ts`).
+ */
+export function appNameKey(name) {
+    return name
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '')
+        .replace(/(mcp|mcpserver)$/, '');
+}
+export function catalogEntryKindLabel(entry) {
+    if (entry.source === 'computer')
+        return 'Native';
+    // An app with both ways to connect names both.
+    if (entry.source === 'easy-connect')
+        return entry.app?.directId ? 'App · MCP' : 'App';
+    if (entry.alsoApp && entry.connector.kind === 'mcp')
+        return 'MCP · App';
+    switch (entry.connector.kind) {
+        case 'mcp':
+            return 'MCP';
+        case 'graphql':
+            return 'GraphQL';
+        case 'cli':
+            return 'CLI';
+        default:
+            return 'API';
+    }
+}
+/**
+ * Fold the spellings the two catalogues and the connector list disagree on
+ * into one comparable token: `Google Sheets`, `google-sheets` and
+ * `google_sheets` all become `googlesheets`.
+ */
+export function foldKey(value) {
+    return value.toLowerCase().replace(/[^a-z0-9]/g, '');
+}
+/**
+ * The tokens that mean "this project already has it", for the `+` -> `✓` swap
+ * on a catalogue card.
+ *
+ * **This join is best-effort, and deliberately so.** `AdminConnector` does not
+ * carry the catalogue app it was created from — `buildEasyConnectConnectorDraft`
+ * writes `app: <catalogue slug>` into the draft
+ * (`connector-connection-form.ts:156`) but the read model never returns it
+ * (`connectors.ts:20-50`). So the only evidence available on the client is the
+ * connector's own connection slug and display name.
+ *
+ * Both are indexed, because the default add flow proposes a connection slug from
+ * the app's *name* (`proposeConnectorConnectionSlug(app.name, ...)`), not its
+ * slug, and the two differ whenever the catalogue's slug is not a slugified
+ * name (`google_sheets` vs "Google Sheets"). Folding both sides covers every
+ * default add.
+ *
+ * What it cannot cover: a connector whose slug AND name were both hand-edited
+ * away from the app they came from. That card shows `+` instead of `✓`. The
+ * card is still safe to click — the add flow proposes a fresh, non-colliding
+ * slug — so the failure mode is a redundant offer, never a broken one. The
+ * exact fix is to expose `app` on `AdminConnector`; until then this is the
+ * honest ceiling.
+ */
+export function connectedCatalogKeys(connectors) {
+    const keys = new Set();
+    for (const connector of connectors) {
+        // A connector ROW is not a working connection. `needs_auth` means the
+        // OAuth handshake never completed — no `connected_account_id`, so every
+        // tool call is refused by the gateway. Showing it as connected is the
+        // worst possible lie: the user sees a checkmark, the agent gets `needs_auth`
+        // on every call, and nothing in the product explains the contradiction.
+        // Prod 2026-08-28: all 6 GitHub connections had a null connected account
+        // and zero GitHub tool calls had ever executed, while the catalogue showed
+        // GitHub as connected.
+        //
+        // `error` stays connected-looking on purpose: the credential exists and the
+        // card's own error affordance is what surfaces the problem. Only the
+        // never-authorized case is a false checkmark.
+        if (connector.status === 'needs_auth')
+            continue;
+        keys.add(`provider:${connector.provider}`);
+        keys.add(foldKey(connector.slug));
+        if (connector.name?.trim())
+            keys.add(foldKey(connector.name));
+    }
+    keys.delete('');
+    return keys;
+}
+export function isCatalogEntryConnected(entry, connectedKeys) {
+    if (entry.source === 'computer')
+        return connectedKeys.has('provider:computer');
+    return connectedKeys.has(foldKey(entry.slug)) || connectedKeys.has(foldKey(entry.name));
+}
+/**
+ * A connector token names an entry when it equals the entry's token, or starts
+ * with it. The prefix pass exists because a default add is named `<App>` then
+ * `<App> 2`, and its slug is `<app>-<random>`: neither equals the app's token.
+ * It only counts for entry tokens of 4+ characters, so "Git" cannot claim
+ * "GitHub".
+ */
+function tokenIdentifiesEntry(connectorToken, entryToken) {
+    if (!entryToken || !connectorToken)
+        return false;
+    if (connectorToken === entryToken)
+        return true;
+    return entryToken.length >= 4 && connectorToken.startsWith(entryToken);
+}
+/**
+ * Every project connector that reads as created from this catalogue entry:
+ * the app page's "In this project" list. It does not skip `needs_auth` rows —
+ * this is "what exists", and the row's status line says what is missing.
+ *
+ * DISPLAY ONLY. It is lenient, so a wrong answer is a wrong row in a list.
+ * Install reuse must not use it: see `connectorInstalledFrom` in
+ * `install/install.ts`.
+ */
+export function catalogEntryConnectors(connectors, entry) {
+    if (entry.source === 'computer') {
+        return connectors.filter((connector) => connector.provider === 'computer');
+    }
+    const tokens = [foldKey(entry.slug), foldKey(entry.name)].filter(Boolean);
+    return connectors.filter((connector) => [foldKey(connector.slug), foldKey(connector.name ?? '')].some((connectorToken) => tokens.some((token) => tokenIdentifiesEntry(connectorToken, token))));
+}
+/** The synthetic first browse section. Not a catalogue category — see
+ *  `browseSections` in `browse-sections.ts`. Defined in `connector-categories.ts`
+ *  and re-exported here for the modules that already import this one. */
+export { POPULAR_SECTION };

package/dist/customize/connectors/catalog/catalog-foot.d.ts

@@ -0,0 +1,24 @@
+/**
+ * What the foot of the catalogue says about how much of it is on screen.
+ *
+ * A pure function because this line is the one place the page makes a claim
+ * about a number the user cannot count, and every one of its states has been
+ * wrong at least once: it has said "48 of 5,758" under a filtered grid showing
+ * 6 cards, and it has said nothing at all on the source most projects actually
+ * get. The rules below are asserted rather than eyeballed.
+ */
+export interface CatalogFootInput {
+    /** Every entry rendered for the current query, across all loaded pages. */
+    loaded: number;
+    total: number;
+    /** A text search is running, so `total` is the size of the RESULT set. */
+    searching: boolean;
+    hasMore: boolean;
+    /** A request is in flight underneath a grid that has already painted. */
+    isLoadingMore: boolean;
+}
+/**
+ * The summary line, or `null` when there is nothing honest and useful to say.
+ *
+ */
+export declare function catalogFootSummary(input: CatalogFootInput): string | null;

package/dist/customize/connectors/catalog/catalog-foot.js

@@ -0,0 +1,39 @@
+/**
+ * What the foot of the catalogue says about how much of it is on screen.
+ *
+ * A pure function because this line is the one place the page makes a claim
+ * about a number the user cannot count, and every one of its states has been
+ * wrong at least once: it has said "48 of 5,758" under a filtered grid showing
+ * 6 cards, and it has said nothing at all on the source most projects actually
+ * get. The rules below are asserted rather than eyeballed.
+ */
+function count(value) {
+    return value.toLocaleString();
+}
+/**
+ * The summary line, or `null` when there is nothing honest and useful to say.
+ *
+ */
+export function catalogFootSummary(input) {
+    if (input.loaded === 0)
+        return null;
+    // While a request is in flight the foot used to stack two lines — a spinner
+    // reading "Loading more connectors…" over a separate "Showing 192 of 2,713".
+    // Two lines saying overlapping things, and the one with the spinner was the
+    // one with no information in it. Merged: the spinner says work is happening,
+    // and the text says how far along it is.
+    if (input.isLoadingMore) {
+        return input.total > input.loaded
+            ? `Loading more — ${count(input.loaded)} of ${count(input.total)}`
+            : `Loading more — ${count(input.loaded)} so far`;
+    }
+    const noun = input.searching ? 'result' : 'connector';
+    const plural = input.total === 1 ? noun : `${noun}s`;
+    if (input.hasMore && input.total > input.loaded) {
+        return `Showing ${count(input.loaded)} of ${count(input.total)} ${plural}`;
+    }
+    if (input.hasMore) {
+        return `${count(input.loaded)} ${plural} loaded`;
+    }
+    return `All ${count(input.total)} ${plural}`;
+}

package/dist/customize/connectors/catalog/catalog-paging.d.ts

@@ -0,0 +1,34 @@
+/**
+ * How the catalogue reaches past its first page.
+ *
+ * **One mechanism.** Reaching the foot of the grid — by scrolling to the
+ * sentinel or by pressing the button beside it — fetches the next page. There
+ * is no ceiling, because reaching the foot is an explicit request for more.
+ *
+ * This module used to hold three more mechanisms: `CATALOG_INITIAL_PAGES` (four
+ * pages fetched eagerly on every load), `CATALOG_FOCUS_TARGET` /
+ * `CATALOG_AUTOLOAD_MAX_PAGES` (an effect chain that kept fetching while a
+ * client-side category bucket looked thin), and `CATALOG_REVEAL_STEP` /
+ * `CATALOG_INITIAL_REVEAL` (a reveal window layered over the flat grid). All
+ * three existed for one reason: the client had to accumulate enough pages to
+ * fake a category filter the API could not perform. They are gone because the
+ * server performs it now — see `apps/api/src/connectors/pipedream-index.ts`.
+ *
+ * They were also the reported jank. Eager paging plus in-place section growth
+ * meant the browse page reflowed under the reader on every landed page, and the
+ * reveal window meant a scroll sometimes uncovered cards and sometimes fetched
+ * them, with no way for the user to tell which.
+ *
+ * `shouldLoadOnScroll` is a pure predicate so the paging decision is testable
+ * without a real `IntersectionObserver`, react-query, or a DOM. Same split as
+ * `marketplace-grid.ts:shouldFetchNextMarketplacePage`.
+ */
+/**
+ * Whether the bottom sentinel coming into view should fetch the next page.
+ *
+ * The only guards are "there is more" and "one is not already in flight".
+ */
+export declare function shouldLoadOnScroll(isIntersecting: boolean, query: {
+    hasMore: boolean;
+    isLoadingMore: boolean;
+}): boolean;

package/dist/customize/connectors/catalog/catalog-paging.js

@@ -0,0 +1,33 @@
+/**
+ * How the catalogue reaches past its first page.
+ *
+ * **One mechanism.** Reaching the foot of the grid — by scrolling to the
+ * sentinel or by pressing the button beside it — fetches the next page. There
+ * is no ceiling, because reaching the foot is an explicit request for more.
+ *
+ * This module used to hold three more mechanisms: `CATALOG_INITIAL_PAGES` (four
+ * pages fetched eagerly on every load), `CATALOG_FOCUS_TARGET` /
+ * `CATALOG_AUTOLOAD_MAX_PAGES` (an effect chain that kept fetching while a
+ * client-side category bucket looked thin), and `CATALOG_REVEAL_STEP` /
+ * `CATALOG_INITIAL_REVEAL` (a reveal window layered over the flat grid). All
+ * three existed for one reason: the client had to accumulate enough pages to
+ * fake a category filter the API could not perform. They are gone because the
+ * server performs it now — see `apps/api/src/connectors/pipedream-index.ts`.
+ *
+ * They were also the reported jank. Eager paging plus in-place section growth
+ * meant the browse page reflowed under the reader on every landed page, and the
+ * reveal window meant a scroll sometimes uncovered cards and sometimes fetched
+ * them, with no way for the user to tell which.
+ *
+ * `shouldLoadOnScroll` is a pure predicate so the paging decision is testable
+ * without a real `IntersectionObserver`, react-query, or a DOM. Same split as
+ * `marketplace-grid.ts:shouldFetchNextMarketplacePage`.
+ */
+/**
+ * Whether the bottom sentinel coming into view should fetch the next page.
+ *
+ * The only guards are "there is more" and "one is not already in flight".
+ */
+export function shouldLoadOnScroll(isIntersecting, query) {
+    return isIntersecting && query.hasMore && !query.isLoadingMore;
+}

package/dist/customize/connectors/catalog/connector-browse.d.ts

@@ -0,0 +1,34 @@
+import { type CatalogEntry } from './catalog-entry.js';
+import type { CatalogState } from './use-catalog.js';
+/** Everything a catalogue card needs to run Install. One stable object per page. */
+export interface CatalogInstall {
+    /** The project's connector list has loaded. Until it has, an install cannot
+     *  tell an app the project already has from a new one. */
+    ready: boolean;
+    canWrite: boolean;
+    /** The app slug being installed, or `null`. */
+    pendingKey: string | null;
+    onInstall: (entry: CatalogEntry) => void;
+}
+/**
+ * The catalogue body: one flat, paginated, searchable grid.
+ *
+ * **One paging mechanism.** Scrolling to the foot fetches the next page, and so
+ * does the button beside it. Nothing else fetches: no eager first-paint budget,
+ * no per-category deepening loop, no reveal window uncovering already-loaded
+ * cards.
+ */
+export declare function ConnectorBrowse({ state, connectedKeys, hrefFor, onOpen, install, emptyTitle, emptyDescription, suppressNoMatch, }: {
+    state: CatalogState;
+    connectedKeys: ReadonlySet<string>;
+    /** The card's page, or `null` for an entry that opens in place. */
+    hrefFor: (entry: CatalogEntry) => string | null;
+    onOpen: (entry: CatalogEntry) => void;
+    install: CatalogInstall;
+    emptyTitle: string;
+    emptyDescription: string;
+    /** The caller already shows matches for this query (the project's own
+     *  connectors, KRTX-2531): the catalogue's "No matches" must not contradict
+     *  them underneath. */
+    suppressNoMatch?: boolean;
+}): import("react").JSX.Element;

package/dist/customize/connectors/catalog/connector-browse.js

@@ -0,0 +1,151 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslations } from '../../../i18n/index.js';
+import { GlobeIcon, MonitorIcon } from '@phosphor-icons/react';
+import { memo } from 'react';
+import { Badge } from '../../../primitives/badge.js';
+import { Button } from '../../../primitives/button.js';
+import Loading from '../../../primitives/loading.js';
+import { EmptyState } from '../../../primitives/empty-state.js';
+import { CatalogCard } from '../../shared/catalog/catalog-card.js';
+import { CatalogNoMatch } from '../../shared/catalog/catalog-empty-state.js';
+import { CatalogCardSkeleton, CatalogGrid, } from '../../shared/catalog/catalog-grid.js';
+import { DENSE_GRID_CLASSNAME, DENSE_GRID_CONTAINER_CLASSNAME, } from '../../shared/catalog/catalog-grid-tokens.js';
+import { cn } from '../../../internal/lib/utils.js';
+import { InstallButton } from '../install/install-menu.js';
+import { catalogEntryKindLabel, isCatalogEntryConnected } from './catalog-entry.js';
+import { catalogFootSummary } from './catalog-foot.js';
+import { useCatalogAutoload } from './use-catalog-autoload.js';
+/** The Install control is offered only where the caller may add the app, and
+ *  never on the computer card: a computer is paired, not installed. */
+function canInstallEntry(entry, install) {
+    return install.canWrite && entry.source !== 'computer';
+}
+/**
+ * What a catalogue card offers on its right edge: "Added" when the project has
+ * the app, the Install control when the caller may add it, nothing otherwise.
+ *
+ * The connected marker is a labelled badge, not a bare glyph. It was a 16px
+ * green check in the trailing slot, which asked the user to decode a symbol
+ * whose only context was its colour — reported as "the connected state is a
+ * bit too hidden". A word costs one badge's width and needs no decoding.
+ */
+function CatalogAffordance({ entry, connected, install, }) {
+    const t = useTranslations('connectorPages');
+    if (connected) {
+        return (_jsx(Badge, { variant: "success", size: "sm", "data-testid": "catalog-connected", children: t('added') }));
+    }
+    if (!canInstallEntry(entry, install))
+        return null;
+    return (_jsx(InstallButton, { label: t('install'), variant: "outline", className: "gap-1 rounded-full", "aria-label": t('installNamed', { name: entry.name }), onInstall: () => install.onInstall(entry), pending: install.pendingKey === entry.slug, 
+        // `pendingKey` holds one install. A second one started beside it would
+        // clear the first one's pending state when it settles.
+        disabled: !install.ready || install.pendingKey !== null, "data-testid": "catalog-add" }));
+}
+/**
+ * A catalog favicon, or a neutral glyph tile when the record has none.
+ *
+ * A plain `<img>`, not `next/image`. These are third-party favicons on
+ * arbitrary hosts, so the loader was already bypassed with `unoptimized` — which
+ * left `fill` costing an absolutely-positioned child inside a `relative`
+ * wrapper, per card, for no optimisation in return. Native `loading="lazy"`
+ * defers every icon below the fold, which is most of them on a browse page.
+ *
+ * `width`/`height` are set so the box is reserved before the image arrives and
+ * the grid never reflows around a late favicon.
+ */
+function ConnectorIcon({ icon, computer = false }) {
+    if (!icon) {
+        return (_jsx("span", { className: "bg-card flex size-9 shrink-0 items-center justify-center rounded-sm", children: computer ? _jsx(MonitorIcon, { className: "size-5" }) : _jsx(GlobeIcon, { className: "size-5" }) }));
+    }
+    return (_jsx("span", { className: "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-sm", children: _jsx("img", { src: icon, alt: "", width: 36, height: 36, loading: "lazy", decoding: "async", referrerPolicy: "no-referrer", className: "size-9 object-contain" }) }));
+}
+/**
+ * One catalogue card: icon and title on the bare page — no border, no
+ * description — with one quiet line under the title saying how the entry
+ * connects.
+ *
+ * `memo`'d because the grid renders several hundred of these. `entry` and `connectedKeys` are referentially stable
+ * across a page landing (the arrays they come from are rebuilt, but the entry
+ * objects inside them are not), so the comparison actually pays off.
+ * `hrefFor`, `onOpen` and `install` must be stable for the same reason;
+ * `install` changes identity only when an install starts or ends.
+ */
+const CatalogEntryCard = memo(function CatalogEntryCard({ entry, connectedKeys, hrefFor, onOpen, install, }) {
+    const href = hrefFor(entry);
+    const connected = isCatalogEntryConnected(entry, connectedKeys);
+    const shared = {
+        variant: 'plain',
+        leading: _jsx(ConnectorIcon, { icon: entry.icon, computer: entry.source === 'computer' }),
+        title: entry.name,
+        subtitle: _jsx("span", { className: "text-muted-foreground text-xs", children: catalogEntryKindLabel(entry) }),
+        trailing: _jsx(CatalogAffordance, { entry: entry, connected: connected, install: install }),
+    };
+    // An entry with no page of its own (the computer card) opens in place.
+    return href ? (
+    // Only the Install control needs to sit beside the link. The "Added" badge
+    // stays inside it, so a click on the badge still opens the page.
+    _jsx(CatalogCard, { ...shared, href: href, trailingInteractive: !connected && canInstallEntry(entry, install) })) : (_jsx(CatalogCard, { ...shared, onClick: () => onOpen(entry) }));
+});
+/** Skeletons appended to a growing grid while a request is in flight. Six —
+ *  two full rows of the widest layout — so the placeholder block is the same
+ *  shape as the batch about to replace it. */
+const LOADING_MORE_SKELETONS = 6;
+/**
+ * The foot of the catalogue: how much is on screen, and how to get more.
+ *
+ * **Why there is a button under a scroll-driven grid.** The sentinel above it
+ * covers the pointer. A control is what covers everything else — keyboard
+ * users, who never scroll a container they have not focused, and assistive
+ * tech, where "more content appeared somewhere below" is not an interaction.
+ *
+ * A pointer user rarely sees it: the sentinel fires 400px early, so by the time
+ * this scrolls into view a fetch is usually already running and the button has
+ * been replaced by its own pending state.
+ */
+function CatalogFoot({ summary, hasMore, isLoadingMore, loadMore, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    if (!hasMore && summary === null)
+        return null;
+    return (_jsxs("div", { className: "flex flex-col items-center gap-2 pt-2", children: [hasMore && !isLoadingMore ? (_jsx(Button, { variant: "outline", size: "sm", onClick: loadMore, className: "transition-transform duration-(--duration-normal) ease-out active:scale-[0.96]", children: tI18nComplete.raw('textac8991ef0101') })) : null, summary ? (_jsxs("p", { className: "text-muted-foreground/70 flex items-center gap-2 text-xs tabular-nums", role: isLoadingMore ? 'status' : undefined, "aria-live": isLoadingMore ? 'polite' : undefined, children: [isLoadingMore ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, summary] })) : null] }));
+}
+/**
+ * The catalogue body: one flat, paginated, searchable grid.
+ *
+ * **One paging mechanism.** Scrolling to the foot fetches the next page, and so
+ * does the button beside it. Nothing else fetches: no eager first-paint budget,
+ * no per-category deepening loop, no reveal window uncovering already-loaded
+ * cards.
+ */
+export function ConnectorBrowse({ state, connectedKeys, hrefFor, onOpen, install, emptyTitle, emptyDescription, suppressNoMatch = false, }) {
+    const { activeQuery, entries, total } = state;
+    const searching = activeQuery.length > 0;
+    const hasMore = state.hasMore;
+    // Depends on `state.loadMore`, NOT on `state`. `useCatalog` returns a fresh
+    // object every render, so closing over `state` would give this a new identity
+    // every render, and `useCatalogAutoload` lists it in its observer effect's
+    // deps — the observer would be torn down and rebuilt on every render.
+    const loadMore = state.loadMore;
+    const sentinelRef = useCatalogAutoload({
+        hasMore,
+        isLoadingMore: state.isLoadingMore,
+        loadMore,
+    });
+    const isEmpty = entries.length === 0;
+    // Loading, error and "nothing to show" are `CatalogGrid`'s contract in its
+    // documented order, so those three states are delegated here and the grid
+    // gets no children it could render.
+    if (state.isLoading || state.isError || isEmpty) {
+        return (_jsx(CatalogGrid, { isLoading: state.isLoading, isError: state.isError, error: state.error, onRetry: state.refetch, isEmpty: true, empty: searching ? (suppressNoMatch ? null : (_jsx(CatalogNoMatch, { query: activeQuery, excludedNoActions: state.excludedNoActions }))) : (_jsx(EmptyState, { icon: GlobeIcon, size: "sm", title: emptyTitle, description: emptyDescription })), children: null }));
+    }
+    const summary = catalogFootSummary({
+        loaded: entries.length,
+        total,
+        searching,
+        hasMore,
+        isLoadingMore: state.isLoadingMore,
+    });
+    return (_jsxs("div", { "aria-busy": state.isRefreshing || undefined, className: cn('space-y-6 transition-opacity duration-(--duration-normal) ease-out', state.isRefreshing && 'pointer-events-none opacity-60'), children: [_jsx("div", { className: DENSE_GRID_CONTAINER_CLASSNAME, children: _jsxs("div", { className: DENSE_GRID_CLASSNAME, children: [entries.map((entry) => (_jsx(CatalogEntryCard, { entry: entry, connectedKeys: connectedKeys, hrefFor: hrefFor, onOpen: onOpen, install: install }, entry.key))), state.isLoadingMore
+                            ? Array.from({ length: LOADING_MORE_SKELETONS }, (_, index) => (_jsx(CatalogCardSkeleton, {}, `loading-${index}`)))
+                            : null] }) }), hasMore ? _jsx("div", { ref: sentinelRef, "aria-hidden": true, className: "h-px" }) : null, _jsx(CatalogFoot, { summary: summary, hasMore: hasMore, isLoadingMore: state.isLoadingMore, loadMore: loadMore })] }));
+}

package/dist/customize/connectors/catalog/connector-categories.d.ts

@@ -0,0 +1,20 @@
+import type { UiTranslator } from '../../../i18n/index.js';
+export { OTHER, POPULAR_SECTION, CURATED_SECTIONS, sectionKeyForCategory, sectionTitle, sectionKeysForEntry, countInSection, groupIntoSections, humanizeCategory, } from '../../../_vendor/shared/connector-sections.js';
+export type { CatalogSectionDef } from '../../../_vendor/shared/connector-sections.js';
+/**
+ * Two rows of the widest grid (`xl:grid-cols-3`). The live catalogue makes
+ * this load-bearing rather than theoretical: one page of
+ * `listDiscoverConnectors` puts 26 of its 48 items under `productivity`
+ * alone, so a category section renders its first 6 and defers the rest to
+ * "View all".
+ */
+export declare const CATEGORY_ROW_CAP = 6;
+/**
+ * The category `Select`'s "no category" value. Radix `SelectItem` cannot hold
+ * an empty string, so this needs a sentinel no real category can collide with.
+ * `groupIntoSections` trims every key and every curated key is
+ * lowercase-kebab, so a leading space is unreachable by construction — this is
+ * provably distinct rather than merely unlikely.
+ */
+export declare const ALL_CATEGORIES = " all";
+export declare function localizedSectionTitle(key: string, tI18nComplete: UiTranslator): string;

package/dist/customize/connectors/catalog/connector-categories.js

@@ -0,0 +1,25 @@
+import { sectionTitle } from '../../../_vendor/kortix-shared.js';
+import { translateUiCatalogText } from '../../../i18n/ui-catalog/localize-ui-catalog.js';
+import { REMAINING_UI_TRANSLATION_KEYS } from '../../../i18n/ui-catalog/remaining-ui-translation-keys.generated.js';
+// The category rules live in `@kortix/shared` so the API groups the complete
+// catalogue with exactly the rules this app renders with.
+export { OTHER, POPULAR_SECTION, CURATED_SECTIONS, sectionKeyForCategory, sectionTitle, sectionKeysForEntry, countInSection, groupIntoSections, humanizeCategory, } from '../../../_vendor/kortix-shared.js';
+/**
+ * Two rows of the widest grid (`xl:grid-cols-3`). The live catalogue makes
+ * this load-bearing rather than theoretical: one page of
+ * `listDiscoverConnectors` puts 26 of its 48 items under `productivity`
+ * alone, so a category section renders its first 6 and defers the rest to
+ * "View all".
+ */
+export const CATEGORY_ROW_CAP = 6;
+/**
+ * The category `Select`'s "no category" value. Radix `SelectItem` cannot hold
+ * an empty string, so this needs a sentinel no real category can collide with.
+ * `groupIntoSections` trims every key and every curated key is
+ * lowercase-kebab, so a leading space is unreachable by construction — this is
+ * provably distinct rather than merely unlikely.
+ */
+export const ALL_CATEGORIES = ' all';
+export function localizedSectionTitle(key, tI18nComplete) {
+    return translateUiCatalogText(sectionTitle(key), tI18nComplete, REMAINING_UI_TRANSLATION_KEYS);
+}