@kortix/ui 0.0.0-stage → 0.14.4

package/dist/customize/shared/capability-page-shell.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../internal/lib/utils.js';
+import { CapabilityScrollRootProvider, useCapabilityScrollRootRef } from './capability-scroll-root.js';
+/**
+ * Shared page shell for the three capability routes (agents, connectors,
+ * skills). `max-w-5xl` is a deliberate departure from
+ * `CustomizeSectionWrapper`'s `max-w-2xl` — a 3-up card grid does not fit in
+ * `max-w-2xl`. These are standalone routed pages, not Customize sections; do
+ * not reuse or edit `section-wrapper.tsx` for them.
+ *
+ * This element — not the window — is the page's scroll container, and it is
+ * published through `CapabilityScrollRootProvider` because the connectors
+ * catalogue observes it for infinite scroll. It has to be handed THIS element
+ * rather than the viewport: the `(capabilities)` layout wraps the shell in
+ * `overflow-hidden`, and a clipped target intersects the viewport never.
+ *
+ * The ref costs this shell nothing — no state, no re-render — so the two
+ * capability pages that do not page are unaffected by the one that does.
+ */
+export function CapabilityPageShell({ title, description, titleAddon, action, search, filters, wide = false, stacked = false, children, }) {
+    const scrollRef = useCapabilityScrollRootRef();
+    return (_jsx("div", { ref: scrollRef, className: "min-h-0 flex-1 overflow-y-auto", children: _jsxs("div", { className: wide
+                ? 'mx-auto w-full max-w-7xl space-y-5 px-4 py-10 pb-20 md:px-8 lg:py-14'
+                : 'mx-auto w-full max-w-5xl space-y-5 px-4 py-10 pb-20 lg:py-14', children: [_jsxs("header", { className: cn('flex flex-col gap-3', !stacked && 'sm:flex-row sm:items-start sm:justify-between'), children: [_jsxs("div", { className: "space-y-1 sm:max-w-md", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("h1", { className: "text-foreground text-xl font-medium text-balance", children: title }), titleAddon] }), _jsx("p", { className: "text-muted-foreground text-sm text-balance", children: description })] }), search || action ? (_jsxs("div", { className: cn('flex w-full shrink-0 items-center gap-2', !stacked && 'sm:w-auto'), children: [search ? (_jsx("div", { className: cn('min-w-0 flex-1', !stacked && 'sm:w-64 sm:flex-none'), children: search })) : null, action] })) : null] }), filters ? (_jsx("div", { className: "flex flex-wrap items-center justify-between gap-2", children: filters })) : null, _jsx(CapabilityScrollRootProvider, { scrollRef: scrollRef, children: children })] }) }));
+}

package/dist/customize/shared/capability-scroll-root.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode, type RefObject } from 'react';
+export declare function CapabilityScrollRootProvider({ scrollRef, children, }: {
+    scrollRef: RefObject<HTMLElement | null>;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The shell's scroll element, for an `IntersectionObserver` `root`. Read
+ *  `.current` inside an effect — it is `null` during render. */
+export declare function useCapabilityScrollRoot(): RefObject<HTMLElement | null>;
+/** Creates the ref a shell attaches to its scroll box and hands to the
+ *  provider. A one-line helper so the shell does not have to name the generic
+ *  parameter, and so both halves of the pair always come from one import. */
+export declare function useCapabilityScrollRootRef(): RefObject<HTMLDivElement | null>;

package/dist/customize/shared/capability-scroll-root.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useRef } from 'react';
+/**
+ * The capability pages' scroll container, published to anything that needs to
+ * observe it.
+ *
+ * **Why this has to exist.** `CapabilityPageShell` is the scroll box, not the
+ * window: the `(capabilities)` layout wraps it in `overflow-hidden`. An
+ * `IntersectionObserver` with the default `root` observes the viewport, and a
+ * target clipped by an `overflow-hidden` ancestor never intersects it — so an
+ * infinite-scroll sentinel built the obvious way silently never fires. The
+ * observer has to be handed THIS element as its root.
+ *
+ * **Why a ref in context, and not state.** Three routed pages render this
+ * shell. Putting the element in `useState` means every one of them re-renders
+ * once on mount to publish a value that only one descendant reads. A ref is
+ * stable across renders, so the provider re-renders nothing; consumers resolve
+ * `.current` in a layout effect after the ref has attached — the same handoff
+ * `AncestorVirtualGrid` uses in `marketplace-paged-grid.tsx:326-331`.
+ *
+ * The context defaults to a ref holding `null`, which is exactly what an
+ * observer wants when there is no shell: `root: null` means the viewport, so a
+ * consumer rendered outside a shell degrades to window scrolling instead of
+ * throwing.
+ */
+const CapabilityScrollRootContext = createContext({
+    current: null,
+});
+export function CapabilityScrollRootProvider({ scrollRef, children, }) {
+    return (_jsx(CapabilityScrollRootContext.Provider, { value: scrollRef, children: children }));
+}
+/** The shell's scroll element, for an `IntersectionObserver` `root`. Read
+ *  `.current` inside an effect — it is `null` during render. */
+export function useCapabilityScrollRoot() {
+    return useContext(CapabilityScrollRootContext);
+}
+/** Creates the ref a shell attaches to its scroll box and hands to the
+ *  provider. A one-line helper so the shell does not have to name the generic
+ *  parameter, and so both halves of the pair always come from one import. */
+export function useCapabilityScrollRootRef() {
+    return useRef(null);
+}

package/dist/customize/shared/capability-skeleton.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Placeholder chrome for the capability routes (agents, connectors,
+ * skills) while their page resolves.
+ *
+ * Shared by `(capabilities)/loading.tsx` (the navigation Suspense boundary),
+ * so the sidebar's `<Link prefetch>` on ProjectCustomizeNavItem has something
+ * to cache — same reason `project-files-skeleton.tsx` exists for the Files
+ * entry.
+ *
+ * Matches `CapabilityPageShell`'s `max-w-5xl` header, then hands the grid to
+ * `CatalogGridSkeleton` — the same loading chrome each page renders once its
+ * query is in flight. One skeleton for navigation prefetch and in-page load.
+ */
+export declare function CapabilitiesSkeleton(): import("react").JSX.Element;

package/dist/customize/shared/capability-skeleton.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from '../../primitives/skeleton.js';
+import { CatalogGridSkeleton } from './catalog/catalog-grid.js';
+/**
+ * Placeholder chrome for the capability routes (agents, connectors,
+ * skills) while their page resolves.
+ *
+ * Shared by `(capabilities)/loading.tsx` (the navigation Suspense boundary),
+ * so the sidebar's `<Link prefetch>` on ProjectCustomizeNavItem has something
+ * to cache — same reason `project-files-skeleton.tsx` exists for the Files
+ * entry.
+ *
+ * Matches `CapabilityPageShell`'s `max-w-5xl` header, then hands the grid to
+ * `CatalogGridSkeleton` — the same loading chrome each page renders once its
+ * query is in flight. One skeleton for navigation prefetch and in-page load.
+ */
+export function CapabilitiesSkeleton() {
+    return (_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", "data-slot": "capability-skeleton", children: _jsxs("div", { className: "mx-auto w-full max-w-5xl space-y-5 px-4 py-10 pb-20 lg:py-14", children: [_jsxs("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-6 w-24 rounded-sm py-0" }), _jsx(Skeleton, { className: "h-4 w-56 rounded-sm py-0" })] }), _jsx(Skeleton, { className: "h-9 w-full rounded-md py-0 sm:w-64" })] }), _jsx(CatalogGridSkeleton, {})] }) }));
+}

package/dist/customize/shared/capability-tabs.d.ts

@@ -0,0 +1,3 @@
+export declare function CapabilityTabs({ projectId }: {
+    projectId: string;
+}): import("react").JSX.Element;

package/dist/customize/shared/capability-tabs.js

@@ -0,0 +1,136 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { hubTarget } from '../../internal/stores/account-panel-store.js';
+import { useLocalizedUiCatalog } from '../../i18n/ui-catalog/use-localized-ui-catalog.js';
+import { useTranslations } from '../../i18n/index.js';
+import { ArrowUpRightIcon } from '@phosphor-icons/react';
+import { UiLink as Link, useUiPathname } from '../../providers/ui-provider.js';
+import { FadedScrollArea } from '../../primitives/faded-scroll-area.js';
+import { useOptionalSidebar } from '../../primitives/sidebar.js';
+import { Tabs, TabsList, TabsTrigger } from '../../primitives/tabs.js';
+import { HubLink } from '../../internal/account-hub/account-hub-location.js';
+import { SidebarToggle } from '../../internal/layout/sidebar-toggle.js';
+import { useCapabilityAccess } from '../../internal/layout/project-settings-nav.js';
+import { PROJECT_ACTIONS } from '../../internal/lib/project-actions.js';
+import { useProjectPageCans } from '../../internal/lib/use-project-can.js';
+import { cn } from '../../internal/lib/utils.js';
+import { getProjectDetail } from '@kortix/sdk';
+import { contract, qk } from '@kortix/sdk/react';
+import { useQuery } from '@tanstack/react-query';
+import { receivedDenial } from './capability-access-gate.js';
+import { CAPABILITY_TABS, PRIMARY_TABS, activeCapabilityTab, capabilityTabHref, } from '../../internal/lib/capability-tab-routes.js';
+/**
+ * "Members" — the tab-shaped row-item that launches the account-level Access
+ * hub for this project, rather than a real capability page. It is NOT a
+ * `CapabilityTab`: `capabilityTabHref`/`activeCapabilityTab` are shape-
+ * sensitive to "every capability tab is a real page at /projects/<id>/<key>",
+ * and this row is not one — clicking it navigates away entirely. So it's a
+ * plain styled `Link` rendered as a `TabsList` sibling, matching a
+ * `TabsTrigger`'s exact classes for visual parity, but living outside the
+ * `Tabs`/`TabsTrigger` roving-tabindex/active-state machinery: it never lights
+ * up as "current" (you're never actually on it), and Radix never needs to
+ * reason about it as a tab panel.
+ *
+ * Needs the project's account_id, which this bar doesn't otherwise fetch —
+ * `qk.project.detail(projectId)` is the same query key the page shell above
+ * already populates, so this is a cache hit, not a second request.
+ *
+ * Gated on `project.members.read`, NOT `project.members.manage`: the hub's
+ * project panel renders read-only for anyone who can read the member list and
+ * probes `members.manage` itself for every write control it offers
+ * (`components/iam/access-projects-tab.tsx`). Gating this launcher on manage
+ * would hide a page a member can legitimately open.
+ *
+ * It holds its place from the first frame. While the account id or the probe
+ * is still in flight it renders as inert text of the same size, so the row
+ * never reflows when they land; it leaves only on a denial the engine
+ * returned. The probe rides the shared `PROJECT_PAGE_ACTIONS` batch, which the
+ * sidebar has usually cached already.
+ */
+const MEMBERS_LINK_CLASS = 'text-muted-foreground hover:text-foreground ml-auto flex w-fit flex-none items-center gap-1 px-1 py-3 text-sm font-medium whitespace-nowrap transition-colors';
+function MembersLaunchLink({ projectId }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const { data } = useQuery({
+        queryKey: qk.project.detail(projectId),
+        queryFn: () => getProjectDetail(projectId),
+        ...contract('config'),
+    });
+    const canReadMembers = useProjectPageCans(projectId)[PROJECT_ACTIONS.PROJECT_MEMBERS_READ];
+    const accountId = data?.project?.account_id;
+    if (receivedDenial(canReadMembers))
+        return null;
+    const label = (_jsxs(_Fragment, { children: [tI18nComplete.raw('text1044a4c056d0'), _jsx(ArrowUpRightIcon, { className: "size-3 opacity-60", "aria-hidden": true })] }));
+    if (!accountId)
+        return _jsx("span", { className: MEMBERS_LINK_CLASS, children: label });
+    return (_jsx(HubLink, { to: hubTarget(accountId, {
+            tab: 'access-projects',
+            project: projectId,
+        }), className: MEMBERS_LINK_CLASS, children: label }));
+}
+/**
+ * Shared tab bar for
+ * /projects/[id]/{agent,connectors,skills,schedules,webhooks}. Lives in the
+ * `(capabilities)` route group layout so it does not remount when switching
+ * tabs. Each trigger wraps a real `next/link` via `asChild`.
+ *
+ * One flex row, everything in flow: [sidebar toggle?] [tabs].
+ * Absolute overlays and expanded hit areas are forbidden here — they steal
+ * pointer events across the row.
+ *
+ * Global rules used to sit at the far right of this bar. It is connector
+ * approval policy, not a project-wide setting, so it now lives at the far
+ * right of the Connectors page's own Discovery/All/Connected row
+ * (`connectors/connectors-page.tsx`). Nothing capability-wide belongs here —
+ * this bar navigates, it does not act.
+ *
+ * `shrink-0` keeps the bar pinned at full height inside the layout's `h-svh`
+ * column; the page body below is the flex-1 scroller.
+ *
+ * **Only the tabs the caller may open** (`capabilityAccess()`, the rule the
+ * sidebar row and `CapabilityAccessGate` read). Until that answer arrives the
+ * bar paints every tab with `invisible`: the row holds its height and nothing
+ * flies in, and no tab the caller cannot open is ever clickable. It used to
+ * paint every tab unconditionally, so a limited member saw five tabs that
+ * opened onto "You don't have access" (KRTX-2144).
+ */
+/**
+ * The hairline between Agents and everything an agent draws on (Skills
+ * through Secrets). One `TabsList` still —
+ * this is a `span`, not a second list, so the underline indicator and the
+ * keyboard roving stay unified. It is `aria-hidden` because the grouping is
+ * visual: a screen reader walks seven tabs either way.
+ */
+/**
+ * Settings trails the row, on the right, after the Members link — one
+ * `TabsList`, so the underline indicator, keyboard roving and `role="tablist"`
+ * stay unified; only the visual position of this tab changes. It reads as
+ * "how the project is configured", a different register from the build-the-
+ * agent tabs to its left, and the gap says so without a second list.
+ */
+const TRAILING_TABS = ['config'];
+/** Tabs that need a project flag: left out of the bar until access settles. */
+const FLAG_GATED_TABS = ['files', 'reminders'];
+function GroupSeam() {
+    return _jsx("span", { "aria-hidden": true, className: "bg-border mx-1 h-4 w-px shrink-0 self-center" });
+}
+export function CapabilityTabs({ projectId }) {
+    const pathname = useUiPathname();
+    const activeKey = activeCapabilityTab(pathname);
+    // This bar is the first in-flow child of the capabilities layout, which the
+    // layout's own doc confirms adds no vertical offset — so on the desktop
+    // shell it starts at y=0 and shares the band with the OS window controls.
+    // Without the indent the first tab renders under the macOS traffic lights.
+    const sidebar = useOptionalSidebar();
+    const allTabs = useLocalizedUiCatalog(CAPABILITY_TABS);
+    // Repo (key `files`) and Reminders are the flag-gated tabs: each exists only
+    // once the project turns its flag on. `capabilityAccess()` applies the flags
+    // and the leaves; before it settles the bar is invisible and both are left out.
+    const access = useCapabilityAccess(projectId);
+    const tabs = allTabs.filter((tab) => access.settled ? access.tabs.includes(tab.key) : !FLAG_GATED_TABS.includes(tab.key));
+    const leading = tabs.filter((tab) => !TRAILING_TABS.includes(tab.key));
+    const primary = leading.filter((tab) => PRIMARY_TABS.includes(tab.key));
+    const library = leading.filter((tab) => !PRIMARY_TABS.includes(tab.key));
+    const trailing = tabs.filter((tab) => TRAILING_TABS.includes(tab.key));
+    const renderTab = (tab) => (_jsx(TabsTrigger, { value: tab.key, asChild: true, className: "w-fit flex-none px-1 py-3", children: _jsx(Link, { href: capabilityTabHref(projectId, tab.key), prefetch: true, children: tab.label }) }, tab.key));
+    return (_jsxs("div", { className: "kx-titlebar-row kx-capability-titlebar relative flex shrink-0 items-center gap-1 border-b px-2", "data-sidebar-collapsed": sidebar?.state === 'collapsed' || undefined, children: [_jsx(SidebarToggle, {}), _jsx(FadedScrollArea, { orientation: "horizontal", fadeColor: "from-background", rootClassName: "min-w-0 flex-1", children: _jsx(Tabs, { value: activeKey ?? '', className: "w-max min-w-full", children: _jsxs(TabsList, { type: "underline", underlineSize: "md", size: "lg", className: cn('kx-titlebar-tabs h-auto w-full justify-start gap-5 border-b-0 px-2', !access.settled && 'invisible'), "aria-busy": !access.settled || undefined, children: [primary.map(renderTab), primary.length > 0 && library.length > 0 ? _jsx(GroupSeam, {}) : null, library.map(renderTab), _jsx(MembersLaunchLink, { projectId: projectId }), trailing.map(renderTab)] }) }) })] }));
+}

package/dist/customize/shared/catalog/catalog-card.d.ts

@@ -0,0 +1,45 @@
+import type { CSSProperties, ReactNode } from 'react';
+export interface CatalogCardProps {
+    leading?: ReactNode;
+    title: ReactNode;
+    description?: string | null;
+    badges?: ReactNode;
+    /** A muted facts line under the description — the card's third row. */
+    meta?: ReactNode;
+    /** Rendered on its own row directly under the title — a short token, not
+     *  prose. Unlike `description` it takes nodes. */
+    subtitle?: ReactNode;
+    /** `plain` drops the border and resting fill — icon and title on the bare
+     *  page, only a hover fill. The connector catalogue uses it; every other
+     *  catalogue keeps the outlined default. */
+    variant?: 'default' | 'plain';
+    trailing?: ReactNode;
+    /** `trailing` holds its own control (an Install menu). With `href` the card
+     *  then renders the link and the control as siblings: a button inside an
+     *  anchor is invalid HTML and a hydration error. */
+    trailingInteractive?: boolean;
+    /** A card that NAVIGATES renders as a real `next/link` — prefetched, middle-
+     *  clickable, and a client transition rather than a `router.push` from a
+     *  button (see the no-hard-refresh nav contract). Cards that open a modal
+     *  in place keep `onClick`. Exactly one of the two. */
+    href?: string;
+    /** Pointer or keyboard intent on a navigating card, before the click. Used
+     *  to start the destination's data read ~200–500 ms early. */
+    onIntent?: () => void;
+    onClick?: () => void;
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    /** A card in a PICK list — the agent editor's grant pages. The checkbox
+     *  toggles membership; the body still opens the entity (`onClick`), so one
+     *  card answers both "is it granted?" and "what is it?". Two sibling
+     *  controls, never one nested in the other. */
+    select?: {
+        checked: boolean;
+        onCheckedChange: () => void;
+        /** Off in All / None mode — the set is decided for every card. */
+        disabled?: boolean;
+        label: string;
+    };
+}
+export declare function CatalogCard({ leading, title, description, badges, meta, subtitle, variant, trailing, trailingInteractive, href, onIntent, onClick, disabled, className, style, select, }: CatalogCardProps): import("react").JSX.Element;

package/dist/customize/shared/catalog/catalog-card.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { UiLink as Link } from '../../../providers/ui-provider.js';
+import { Checkbox } from '../../../primitives/checkbox.js';
+import { cn } from '../../../internal/lib/utils.js';
+export function CatalogCard({ leading, title, description, badges, meta, subtitle, variant = 'default', trailing, trailingInteractive, href, onIntent, onClick, disabled, className, style, select, }) {
+    const classes = cn('group flex w-full items-start gap-3 rounded-md border text-left', 'transition-[background-color,border-color] duration-(--duration-normal) ease-out', variant === 'plain'
+        ? 'border-transparent bg-transparent px-3 py-2.5 hover:bg-accent'
+        : 'bg-accent/50 border-border/60 hover:bg-accent hover:border-border px-4 py-3.5', 'focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none', disabled && 'pointer-events-none opacity-60', className);
+    // `trailing` may hold its own control (the connectors grant page's Required
+    // toggle), so in select mode it is a SIBLING of the body button, never a
+    // child — a <button> inside a <button> is invalid HTML and a hydration error.
+    const trailingSlot = trailing ? _jsx("span", { className: "shrink-0", children: trailing }) : null;
+    const content = (_jsxs(_Fragment, { children: [leading ? _jsx("span", { className: "shrink-0", children: leading }) : null, _jsxs("span", { className: cn('min-w-0 flex-1', variant === 'plain' ? 'space-y-0' : 'space-y-1'), children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-foreground truncate text-sm font-medium", children: title }), badges] }), subtitle ? _jsx("span", { className: "flex flex-wrap items-center gap-1.5", children: subtitle }) : null, description ? (_jsx("span", { className: "text-muted-foreground line-clamp-2 text-xs text-pretty", children: description })) : null, meta ? (_jsx("span", { className: "text-muted-foreground/80 flex flex-wrap items-center gap-x-2 gap-y-0.5 pt-1 text-xs", children: meta })) : null] })] }));
+    const body = (_jsxs(_Fragment, { children: [content, trailingSlot] }));
+    if (select) {
+        return (_jsxs("div", { style: style, "data-selected": select.checked || undefined, className: cn(classes, select.checked && 'border-border bg-accent'), children: [_jsx(Checkbox, { "aria-label": select.label, checked: select.checked, disabled: disabled || select.disabled, onCheckedChange: () => select.onCheckedChange(), className: "mt-0.5" }), _jsx("button", { type: "button", onClick: onClick, disabled: disabled, className: "flex min-w-0 flex-1 items-start gap-3 text-left focus-visible:outline-none", children: content }), trailingSlot] }));
+    }
+    if (href && trailingInteractive) {
+        return (
+        // The wrapper is not focusable, so `classes`' own `focus-visible` ring
+        // never paints here: `has-` draws the same ring while the link holds
+        // keyboard focus. The link's `after` covers the card, so the padding
+        // still navigates; the control is `relative` to stay above it.
+        _jsxs("div", { style: style, className: cn(classes, 'has-[a:focus-visible]:ring-ring/50 relative has-[a:focus-visible]:ring-2'), children: [_jsx(Link, { href: href, prefetch: true, "aria-disabled": disabled || undefined, onPointerEnter: onIntent, onFocus: onIntent, className: "flex min-w-0 flex-1 items-start gap-3 text-left after:absolute after:inset-0 after:content-[''] focus-visible:outline-none", children: content }), trailing ? _jsx("span", { className: "relative shrink-0", children: trailing }) : null] }));
+    }
+    if (href) {
+        return (_jsx(Link, { href: href, prefetch: true, "aria-disabled": disabled || undefined, onPointerEnter: onIntent, onFocus: onIntent, style: style, className: classes, children: body }));
+    }
+    return (_jsx("button", { type: "button", onClick: onClick, disabled: disabled, style: style, className: classes, children: body }));
+}

package/dist/customize/shared/catalog/catalog-empty-state.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+/**
+ * The "nothing here" line every catalog uses, so five hand-typed copies of one
+ * class string cannot drift into five different-looking messages. `CatalogGrid`
+ * owns loading/error/empty; this is what callers put IN the empty slot when the
+ * cause is the search box rather than an empty project.
+ */
+export declare function CatalogEmptyNote({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * "No matches for `<query>`."
+ *
+ * The query is trimmed HERE, once. Echoing it raw put the user's own trailing
+ * spaces inside a monospace span, which reads as a rendering bug rather than as
+ * a report of what was searched for.
+ */
+export declare function CatalogNoMatch({ query, excludedNoActions, }: {
+    query: string;
+    /**
+     * Apps that matched but expose no actions, so the catalogue does not offer
+     * them.
+     *
+     * Without this the page reports a flat "No matches for SAP" — which is wrong
+     * twice, because `sap_s_4hana_cloud` and `sap_s_4hana_cloud_sandbox` both
+     * exist upstream and the reason they are absent is one we can state.
+     * Reporting a bare zero is what made the catalogue look broken rather than
+     * selective.
+     */
+    excludedNoActions?: number;
+}): import("react").JSX.Element;

package/dist/customize/shared/catalog/catalog-empty-state.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslations } from '../../../i18n/index.js';
+/**
+ * The "nothing here" line every catalog uses, so five hand-typed copies of one
+ * class string cannot drift into five different-looking messages. `CatalogGrid`
+ * owns loading/error/empty; this is what callers put IN the empty slot when the
+ * cause is the search box rather than an empty project.
+ */
+export function CatalogEmptyNote({ children }) {
+    return _jsx("p", { className: "text-muted-foreground px-3 py-6 text-center text-xs", children: children });
+}
+/**
+ * "No matches for `<query>`."
+ *
+ * The query is trimmed HERE, once. Echoing it raw put the user's own trailing
+ * spaces inside a monospace span, which reads as a rendering bug rather than as
+ * a report of what was searched for.
+ */
+export function CatalogNoMatch({ query, excludedNoActions = 0, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    return (_jsxs(CatalogEmptyNote, { children: [tI18nComplete.raw('texta8897de42124'), ' ', _jsx("span", { className: "text-foreground font-mono", children: query.trim() }), ".", excludedNoActions > 0 ? (_jsxs(_Fragment, { children: [" ", tI18nComplete('catalogExcludedNoActions', { count: excludedNoActions })] })) : null] }));
+}

package/dist/customize/shared/catalog/catalog-empty.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Which "nothing to show" copy applies, given a catalog's total item count
+ * and the count left after the current filter/search. Shared by every
+ * capability catalog (skills, commands, ...) — the logic has no domain-specific
+ * shape, only counts in and a three-way outcome out, so one implementation
+ * here is the only way the skills and commands pages can't drift apart on it.
+ * Lives at the `capabilities/` root, not inside `skills/`, for the same reason
+ * `capability-page-shell.tsx`/`catalog-card.tsx`/`catalog-grid.tsx` do: it
+ * carries zero knowledge of any one catalog's domain.
+ *
+ * `null` means there is content to render — the caller shouldn't reach for
+ * either empty variant. `'empty'` is the catalog genuinely has zero items
+ * (the "Create a ..." invitation is honest here). `'no-match'` is items exist
+ * but the current filter/search hid all of them — telling the user "No ...
+ * yet" in that case is false and points at the wrong action (they need to
+ * clear the filter, not create anything).
+ */
+export declare function catalogEmptyKind(totalCount: number, filteredCount: number): 'empty' | 'no-match' | null;

package/dist/customize/shared/catalog/catalog-empty.js

@@ -0,0 +1,22 @@
+/**
+ * Which "nothing to show" copy applies, given a catalog's total item count
+ * and the count left after the current filter/search. Shared by every
+ * capability catalog (skills, commands, ...) — the logic has no domain-specific
+ * shape, only counts in and a three-way outcome out, so one implementation
+ * here is the only way the skills and commands pages can't drift apart on it.
+ * Lives at the `capabilities/` root, not inside `skills/`, for the same reason
+ * `capability-page-shell.tsx`/`catalog-card.tsx`/`catalog-grid.tsx` do: it
+ * carries zero knowledge of any one catalog's domain.
+ *
+ * `null` means there is content to render — the caller shouldn't reach for
+ * either empty variant. `'empty'` is the catalog genuinely has zero items
+ * (the "Create a ..." invitation is honest here). `'no-match'` is items exist
+ * but the current filter/search hid all of them — telling the user "No ...
+ * yet" in that case is false and points at the wrong action (they need to
+ * clear the filter, not create anything).
+ */
+export function catalogEmptyKind(totalCount, filteredCount) {
+    if (filteredCount > 0)
+        return null;
+    return totalCount === 0 ? 'empty' : 'no-match';
+}

package/dist/customize/shared/catalog/catalog-error.d.ts

@@ -0,0 +1,9 @@
+import type { UiTranslator } from '../../../i18n/index.js';
+export interface CatalogErrorCopy {
+    title: string;
+    description: string;
+    /** Whether to offer Retry. Hidden where pressing it cannot change the
+     *  outcome, so the button never becomes the thing that lies instead. */
+    canRetry: boolean;
+}
+export declare function catalogErrorCopy(error: unknown, tI18nComplete: UiTranslator): CatalogErrorCopy;

package/dist/customize/shared/catalog/catalog-error.js

@@ -0,0 +1,65 @@
+/**
+ * What a failed catalog load should actually say.
+ *
+ * Every one of these surfaces used to print "Couldn't load — Check your
+ * connection and try again." for any failure at all. For a `500` that sentence
+ * is not vague, it is **wrong**: it names a cause (the user's network) that has
+ * been ruled out by the fact that a response came back at all, and it sends the
+ * one person who could report the fault off to check their wifi instead.
+ *
+ * The API deliberately returns an opaque body on a 500 (`apps/api/src/index.ts`
+ * → `{"error":true,"message":"Internal server error"}`) so schema and table
+ * names never reach a client, and that is right — the real cause is in the
+ * server log, with `pgCode`, `schema` and `table` attached. So this does not
+ * try to explain the failure. It only has to stop misattributing it, and say
+ * whether retrying is worth the user's time.
+ */
+/** The status a failed request came back with, if it came back at all. Reads
+ *  `ApiError.status` (`packages/sdk/.../http/api/errors.ts`) without importing
+ *  the class — a `instanceof` check across the SDK's ESM build and its IIFE
+ *  global can be `false` for the very same error (the dual-package hazard the
+ *  SDK's own guide calls out), and this copy is not worth that risk. */
+function statusOf(error) {
+    if (typeof error !== 'object' || error === null || !('status' in error))
+        return null;
+    const status = error.status;
+    return typeof status === 'number' ? status : null;
+}
+export function catalogErrorCopy(error, tI18nComplete) {
+    const status = statusOf(error);
+    // No status: the request never completed. This is the ONLY case where the
+    // user's connection is a fair thing to point at.
+    if (status === null) {
+        return {
+            title: tI18nComplete.raw('text2c1cff23cb89'),
+            description: tI18nComplete.raw('text481859b689b0'),
+            canRetry: true,
+        };
+    }
+    if (status === 401 || status === 403 || status === 404) {
+        // The credentials are wrong (401), the role lacks it (403) or it is gone
+        // (404) — all three are the connection's fault, none is retryable.
+        const [title, description] = {
+            401: ['texte5ee1e7e84aa', 'text40f531d6cd85'],
+            403: ['text9b1f0823459d', 'text516f7c6c91fd'],
+            404: ['texte3ebaa16dd9d', 'textf7571d57f984'],
+        }[status];
+        return {
+            title: tI18nComplete.raw(title),
+            description: tI18nComplete.raw(description),
+            canRetry: false,
+        };
+    }
+    if (status >= 500) {
+        return {
+            title: tI18nComplete.raw('textdfe0c2e802b1'),
+            description: tI18nComplete('text9ebbc86cb85b', { value0: status }),
+            canRetry: true,
+        };
+    }
+    return {
+        title: tI18nComplete.raw('text2c1cff23cb89'),
+        description: tI18nComplete('text164e80bf993e', { value0: status }),
+        canRetry: false,
+    };
+}

package/dist/customize/shared/catalog/catalog-grid-tokens.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Layout tokens shared by the catalog grid and its loading skeleton.
+ *
+ * A `.ts` sibling of `catalog-grid.tsx` rather than two more exports on it:
+ * React Fast Refresh only hot-swaps a module whose every export is a component,
+ * so a single exported string here would make editing the grid reload the whole
+ * page. Named `-tokens` (not `catalog-grid.ts`) because a `.ts`/`.tsx` pair
+ * sharing one basename is ambiguous to module resolution.
+ */
+/**
+ * Shared by the loading skeleton and the real grid so the two class strings
+ * cannot drift apart. Two independently hand-typed copies of the same
+ * breakpoint is what caused this class of grid to drift out of sync before.
+ *
+ * `sm:grid-cols-2 xl:grid-cols-3` (not `lg:grid-cols-3`) is deliberate: at the
+ * `lg` breakpoint (1024-1279px) a 3-up card does not have room for a title, a
+ * description line, and a trailing slot without truncating hard.
+ */
+export declare const GRID_CLASSNAME = "grid gap-3 sm:grid-cols-2 xl:grid-cols-3";
+/**
+ * The CONNECTOR catalogue's dense variant: borderless `plain` cards carrying
+ * only icon + title + a kind line, so they fit three across from `lg` and
+ * nearly touch — the hover fill separates rows, not gaps. Agents and skills
+ * keep `GRID_CLASSNAME`; their outlined, description-carrying cards need the room.
+ *
+ * Columns follow the grid's own width, not the viewport: a split sheet
+ * narrows the page, and the cards must reflow with it. Wrap the grid in
+ * `DENSE_GRID_CONTAINER_CLASSNAME`.
+ */
+export declare const DENSE_GRID_CONTAINER_CLASSNAME = "@container";
+export declare const DENSE_GRID_CLASSNAME = "grid gap-1 @xl:grid-cols-2 @3xl:grid-cols-3";
+/**
+ * Height of a real `CatalogCard`, sized to the common two-line-description
+ * case so the loading skeleton and the settled card never reflow vertically.
+ *
+ * Measured against the running app's compiled stylesheet: **83.42px** for a
+ * two-line description. The math below reproduces that to within a
+ * sub-pixel-rounding fraction — it must use this repo's actual spacing
+ * token, `--spacing: 0.23rem` (`globals.css:670`), not Tailwind's framework
+ * default of `0.25rem`, and it must count the button's own 1px top + 1px
+ * bottom border, which is easy to forget because it isn't a `padding` line:
+ *
+ *   border (button, 1px top + 1px bottom)                       =  2.00px
+ * + py-3.5 (2 x 3.5 x 0.23rem x 16px/rem)                        = 25.76px
+ * + max(
+ *     leading tile (size-9 = 9 x 0.23rem x 16px/rem)             = 33.12px,
+ *     title row (text-sm line-height, 20px)
+ *       + space-y-1 gap (1 x 0.23rem x 16px/rem)                 =  3.68px
+ *       + two clamped description lines (text-xs, 16px each)     = 32.00px
+ *                                                           total = 55.68px,
+ *   )
+ * = 2.00 + 25.76 + 55.68 = 83.44px  (measured: 83.42px; the ~0.02px gap is
+ *   the browser's own sub-pixel layout rounding, not an error in this math)
+ *
+ * Rounded up to 84px so the skeleton is never a hair shorter than the real
+ * card.
+ */
+export declare const CATALOG_CARD_HEIGHT_CLASSNAME = "h-[84px]";

package/dist/customize/shared/catalog/catalog-grid-tokens.js

@@ -0,0 +1,58 @@
+/**
+ * Layout tokens shared by the catalog grid and its loading skeleton.
+ *
+ * A `.ts` sibling of `catalog-grid.tsx` rather than two more exports on it:
+ * React Fast Refresh only hot-swaps a module whose every export is a component,
+ * so a single exported string here would make editing the grid reload the whole
+ * page. Named `-tokens` (not `catalog-grid.ts`) because a `.ts`/`.tsx` pair
+ * sharing one basename is ambiguous to module resolution.
+ */
+/**
+ * Shared by the loading skeleton and the real grid so the two class strings
+ * cannot drift apart. Two independently hand-typed copies of the same
+ * breakpoint is what caused this class of grid to drift out of sync before.
+ *
+ * `sm:grid-cols-2 xl:grid-cols-3` (not `lg:grid-cols-3`) is deliberate: at the
+ * `lg` breakpoint (1024-1279px) a 3-up card does not have room for a title, a
+ * description line, and a trailing slot without truncating hard.
+ */
+export const GRID_CLASSNAME = 'grid gap-3 sm:grid-cols-2 xl:grid-cols-3';
+/**
+ * The CONNECTOR catalogue's dense variant: borderless `plain` cards carrying
+ * only icon + title + a kind line, so they fit three across from `lg` and
+ * nearly touch — the hover fill separates rows, not gaps. Agents and skills
+ * keep `GRID_CLASSNAME`; their outlined, description-carrying cards need the room.
+ *
+ * Columns follow the grid's own width, not the viewport: a split sheet
+ * narrows the page, and the cards must reflow with it. Wrap the grid in
+ * `DENSE_GRID_CONTAINER_CLASSNAME`.
+ */
+export const DENSE_GRID_CONTAINER_CLASSNAME = '@container';
+export const DENSE_GRID_CLASSNAME = 'grid gap-1 @xl:grid-cols-2 @3xl:grid-cols-3';
+/**
+ * Height of a real `CatalogCard`, sized to the common two-line-description
+ * case so the loading skeleton and the settled card never reflow vertically.
+ *
+ * Measured against the running app's compiled stylesheet: **83.42px** for a
+ * two-line description. The math below reproduces that to within a
+ * sub-pixel-rounding fraction — it must use this repo's actual spacing
+ * token, `--spacing: 0.23rem` (`globals.css:670`), not Tailwind's framework
+ * default of `0.25rem`, and it must count the button's own 1px top + 1px
+ * bottom border, which is easy to forget because it isn't a `padding` line:
+ *
+ *   border (button, 1px top + 1px bottom)                       =  2.00px
+ * + py-3.5 (2 x 3.5 x 0.23rem x 16px/rem)                        = 25.76px
+ * + max(
+ *     leading tile (size-9 = 9 x 0.23rem x 16px/rem)             = 33.12px,
+ *     title row (text-sm line-height, 20px)
+ *       + space-y-1 gap (1 x 0.23rem x 16px/rem)                 =  3.68px
+ *       + two clamped description lines (text-xs, 16px each)     = 32.00px
+ *                                                           total = 55.68px,
+ *   )
+ * = 2.00 + 25.76 + 55.68 = 83.44px  (measured: 83.42px; the ~0.02px gap is
+ *   the browser's own sub-pixel layout rounding, not an error in this math)
+ *
+ * Rounded up to 84px so the skeleton is never a hair shorter than the real
+ * card.
+ */
+export const CATALOG_CARD_HEIGHT_CLASSNAME = 'h-[84px]';