@kortix/ui 0.14.8 → 0.14.10

package/dist/internal/hooks/use-auto-scroll.js

@@ -1,6 +1,6 @@
 'use client';
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { OWN_SCROLL_MS, chevronVisible, isAtEnd, keyScrollIntentFor, pickAnchorIndex, prefersReducedMotion, roomUnderNewestTurn, settleMotion, shouldReleaseFollow, } from './use-auto-scroll-physics.js';
+import { BOTTOM_GAP_PX, OWN_SCROLL_MS, chevronVisible, isAtEnd, keyScrollIntentFor, pickAnchorIndex, prefersReducedMotion, roomUnderNewestTurn, settleMotion, shouldReleaseFollow, } from './use-auto-scroll-physics.js';
 export { AT_END_PX, BOTTOM_GAP_PX, CHEVRON_PX, GLIDE_MIN_PX, OWN_SCROLL_MS, TURN_TOP_OFFSET, chevronVisible, classifyScrollKey, isAtEnd, isEditableTarget, isSpaceActivatedTarget, keyScrollIntentFor, pickAnchorIndex, roomUnderNewestTurn, settleMotion, shouldReleaseFollow, } from './use-auto-scroll-physics.js';
 /**
  * useAutoScroll — the session transcript's scroll physics, from first
@@ -75,7 +75,7 @@ const SEND_GLIDE_ARM_MS = 1000;
 function distanceFromEnd(el) {
     return el.scrollHeight - el.scrollTop - el.clientHeight;
 }
-export function useAutoScroll({ hasContent = false, } = {}) {
+export function useAutoScroll({ hasContent = false, room = true, } = {}) {
     const scrollRef = useRef(null);
     const contentRef = useRef(null);
     const spacerElRef = useRef(null);
@@ -149,7 +149,7 @@ export function useAutoScroll({ hasContent = false, } = {}) {
         const span = anchor
             ? spacer.getBoundingClientRect().top - anchor.getBoundingClientRect().top
             : null;
-        const h = roomUnderNewestTurn(el.clientHeight, span);
+        const h = room ? roomUnderNewestTurn(el.clientHeight, span) : BOTTOM_GAP_PX;
         if (spacer.style.height !== `${h}px`)
             spacer.style.height = `${h}px`;
         const anchorChanged = previous !== null && anchor !== previous.el;
@@ -161,7 +161,7 @@ export function useAutoScroll({ hasContent = false, } = {}) {
             }
             : null;
         return { room: h, anchorChanged };
-    }, []);
+    }, [room]);
     const settleRef = useRef(null);
     const cancelGlide = useCallback(() => {
         const glide = glideRef.current;

package/dist/internal/icons/edge.d.ts

@@ -0,0 +1,5 @@
+/** @internal Kortix apps only. No semver: it may change in any release. */
+/** Edge brand mark, full colour. Source: gilbarbara/logos (CC0), `logos:microsoft-edge`. */
+export declare const Edge: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;

package/dist/internal/icons/edge.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { cn } from '@kortix/ui';
+/** Edge brand mark, full colour. Source: gilbarbara/logos (CC0), `logos:microsoft-edge`. */
+export const Edge = ({ className }) => {
+    // Gradient ids are per instance, so two marks on one page never share a definition.
+    const uid = useId().replace(/[^a-zA-Z0-9_-]/g, '');
+    return (_jsxs("svg", { viewBox: "0 0 256 256", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", className: cn('size-4', className), children: [_jsxs("defs", { children: [_jsxs("radialGradient", { id: `${uid}SVGHFrboeCQ`, cx: "161.83", cy: "788.401", r: "95.38", gradientTransform: "matrix(.9999 0 0 .9498 -4.622 -570.387)", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: ".72", stopOpacity: "0" }), _jsx("stop", { offset: ".95", stopOpacity: ".53" }), _jsx("stop", { offset: "1" })] }), _jsxs("radialGradient", { id: `${uid}SVGVG94vbPK`, cx: "-773.636", cy: "746.715", r: "143.24", gradientTransform: "matrix(.15 -.9898 .8 .12 -410.718 -656.341)", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: ".76", stopOpacity: "0" }), _jsx("stop", { offset: ".95", stopOpacity: ".5" }), _jsx("stop", { offset: "1" })] }), _jsxs("radialGradient", { id: `${uid}SVGw2d8JdCl`, cx: "230.593", cy: "-106.038", r: "202.43", gradientTransform: "matrix(-.04 .9998 -2.1299 -.07998 -190.775 -191.635)", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0", stopColor: "#35c1f1" }), _jsx("stop", { offset: ".11", stopColor: "#34c1ed" }), _jsx("stop", { offset: ".23", stopColor: "#2fc2df" }), _jsx("stop", { offset: ".31", stopColor: "#2bc3d2" }), _jsx("stop", { offset: ".67", stopColor: "#36c752" })] }), _jsxs("radialGradient", { id: `${uid}SVGIqWItcPR`, cx: "536.357", cy: "-117.703", r: "97.34", gradientTransform: "matrix(.28 .9598 -.78 .23 -1.928 -410.318)", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0", stopColor: "#66eb6e" }), _jsx("stop", { offset: "1", stopColor: "#66eb6e", stopOpacity: "0" })] }), _jsxs("linearGradient", { id: `${uid}SVGktZSUcGK`, x1: "63.334", x2: "241.617", y1: "757.83", y2: "757.83", gradientTransform: "translate(-4.63 -580.81)", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0", stopColor: "#0c59a4" }), _jsx("stop", { offset: "1", stopColor: "#114a8b" })] }), _jsxs("linearGradient", { id: `${uid}SVGaPqZBebW`, x1: "157.401", x2: "46.028", y1: "680.556", y2: "801.868", gradientTransform: "translate(-4.63 -580.81)", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0", stopColor: "#1b9de2" }), _jsx("stop", { offset: ".16", stopColor: "#1595df" }), _jsx("stop", { offset: ".67", stopColor: "#0680d7" }), _jsx("stop", { offset: "1", stopColor: "#0078d4" })] })] }), _jsx("path", { fill: `url(#${uid}SVGktZSUcGK)`, d: "M231 190.5c-3.4 1.8-6.9 3.4-10.5 4.7c-11.5 4.3-23.6 6.5-35.9 6.5c-47.3 0-88.5-32.5-88.5-74.3c.1-11.4 6.4-21.9 16.4-27.3c-42.8 1.8-53.8 46.4-53.8 72.5c0 73.9 68.1 81.4 82.8 81.4c7.9 0 19.8-2.3 27-4.6l1.3-.4c27.6-9.5 51-28.1 66.6-52.8c1.2-1.9.6-4.3-1.2-5.5c-1.3-.8-2.9-.9-4.2-.2" }), _jsx("path", { fill: `url(#${uid}SVGHFrboeCQ)`, d: "M231 190.5c-3.4 1.8-6.9 3.4-10.5 4.7c-11.5 4.3-23.6 6.5-35.9 6.5c-47.3 0-88.5-32.5-88.5-74.3c.1-11.4 6.4-21.9 16.4-27.3c-42.8 1.8-53.8 46.4-53.8 72.5c0 73.9 68.1 81.4 82.8 81.4c7.9 0 19.8-2.3 27-4.6l1.3-.4c27.6-9.5 51-28.1 66.6-52.8c1.2-1.9.6-4.3-1.2-5.5c-1.3-.8-2.9-.9-4.2-.2", opacity: ".35" }), _jsx("path", { fill: `url(#${uid}SVGaPqZBebW)`, d: "M105.7 241.4c-8.9-5.5-16.6-12.8-22.7-21.3c-26.3-36-18.4-86.5 17.6-112.8c3.8-2.7 7.7-5.2 11.9-7.2c3.1-1.5 8.4-4.1 15.5-4c10.1.1 19.6 4.9 25.7 13c4 5.4 6.3 11.9 6.4 18.7c0-.2 24.5-79.6-80-79.6c-43.9 0-80 41.7-80 78.2c-.2 19.3 4 38.5 12.1 56c27.6 58.8 94.8 87.6 156.4 67.1c-21.1 6.6-44.1 3.7-62.9-8.1" }), _jsx("path", { fill: `url(#${uid}SVGVG94vbPK)`, d: "M105.7 241.4c-8.9-5.5-16.6-12.8-22.7-21.3c-26.3-36-18.4-86.5 17.6-112.8c3.8-2.7 7.7-5.2 11.9-7.2c3.1-1.5 8.4-4.1 15.5-4c10.1.1 19.6 4.9 25.7 13c4 5.4 6.3 11.9 6.4 18.7c0-.2 24.5-79.6-80-79.6c-43.9 0-80 41.7-80 78.2c-.2 19.3 4 38.5 12.1 56c27.6 58.8 94.8 87.6 156.4 67.1c-21.1 6.6-44.1 3.7-62.9-8.1", opacity: ".41" }), _jsx("path", { fill: `url(#${uid}SVGw2d8JdCl)`, d: "M152.3 148.9c-.8 1-3.3 2.5-3.3 5.7c0 2.6 1.7 5.1 4.7 7.2c14.4 10 41.5 8.7 41.6 8.7c10.7 0 21.1-2.9 30.3-8.3c18.8-11 30.4-31.1 30.4-52.9c.3-22.4-8-37.3-11.3-43.9C223.5 23.9 177.7 0 128 0C58 0 1 56.2 0 126.2c.5-36.5 36.8-66 80-66c3.5 0 23.5.3 42 10.1c16.3 8.6 24.9 18.9 30.8 29.2c6.2 10.7 7.3 24.1 7.3 29.5c0 5.3-2.7 13.3-7.8 19.9" }), _jsx("path", { fill: `url(#${uid}SVGIqWItcPR)`, d: "M152.3 148.9c-.8 1-3.3 2.5-3.3 5.7c0 2.6 1.7 5.1 4.7 7.2c14.4 10 41.5 8.7 41.6 8.7c10.7 0 21.1-2.9 30.3-8.3c18.8-11 30.4-31.1 30.4-52.9c.3-22.4-8-37.3-11.3-43.9C223.5 23.9 177.7 0 128 0C58 0 1 56.2 0 126.2c.5-36.5 36.8-66 80-66c3.5 0 23.5.3 42 10.1c16.3 8.6 24.9 18.9 30.8 29.2c6.2 10.7 7.3 24.1 7.3 29.5c0 5.3-2.7 13.3-7.8 19.9" })] }));
+};

package/dist/internal/icons/telegram.d.ts

@@ -1,4 +1,9 @@
 /** @internal Kortix apps only. No semver: it may change in any release. */
+/**
+ * The official Telegram logo (telegram.org brand mark): a blue gradient
+ * circle with a white paper plane. Static gradient id: the mark is identical
+ * wherever it sits, so a shared id resolves to the same fill.
+ */
 export declare const Telegram: ({ className }: {
     className?: string;
 }) => import("react").JSX.Element;

package/dist/internal/icons/telegram.js

@@ -1,6 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../lib/utils.js';
+/**
+ * The official Telegram logo (telegram.org brand mark): a blue gradient
+ * circle with a white paper plane. Static gradient id: the mark is identical
+ * wherever it sits, so a shared id resolves to the same fill.
+ */
 export const Telegram = ({ className }) => {
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 240 240", className: cn('size-4', className), children: [_jsx("defs", { children: _jsxs("linearGradient", { id: "tg-a", x1: "0.667", x2: "0.417", y1: "0.167", y2: "0.75", children: [_jsx("stop", { offset: "0", stopColor: "#37aee2" }), _jsx("stop", { offset: "1", stopColor: "#1e96c8" })] }) }), _jsx("circle", { cx: "120", cy: "120", r: "120", fill: "url(#tg-a)" }), _jsx("path", { fill: "#c8daea", d: "M98 175c-3.888 0-3.227-1.468-4.568-5.17L82 132.207 170 80" }), _jsx("path", { fill: "#a9c9dd", d: "M98 175c3 0 4.325-1.372 6-3l16-15.558-19.958-12.035" }), _jsx("path", { fill: "#fff", d: "M100.04 144.41l48.36 35.729c5.519 3.045 9.501 1.468 10.876-5.123l19.685-92.763c2.015-8.08-3.08-11.746-8.36-9.349l-115.59 44.571c-7.89 3.165-7.844 7.567-1.438 9.528l29.663 9.259 68.673-43.325c3.242-1.966 6.218-.91 3.776 1.258" })] }));
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 240 240", className: cn('size-4', className), children: [_jsx("defs", { children: _jsxs("linearGradient", { id: "kortix-telegram-logo", x1: "0.5", y1: "0", x2: "0.5", y2: "1", children: [_jsx("stop", { offset: "0", stopColor: "#2AABEE" }), _jsx("stop", { offset: "1", stopColor: "#229ED9" })] }) }), _jsx("circle", { cx: "120", cy: "120", r: "120", fill: "url(#kortix-telegram-logo)" }), _jsx("path", { fill: "#FFFFFF", d: "M54.3 118.8c35-15.2 58.3-25.3 70-30.2 33.3-13.9 40.3-16.3 44.8-16.4 1 0 3.2.2 4.7 1.4 1.2 1 1.5 2.3 1.7 3.3s.4 3.1.2 4.7c-1.8 19-9.6 65.1-13.6 86.3-1.7 9-5 12-8.2 12.3-7 .6-12.3-4.6-19-9-10.6-6.9-16.5-11.2-26.8-18-11.9-7.8-4.2-12.1 2.6-19.1 1.8-1.8 32.5-29.8 33.1-32.3.1-.3.1-1.5-.6-2.1-.7-.6-1.7-.4-2.5-.2-1.1.2-17.9 11.4-50.6 33.5-4.8 3.3-9.1 4.9-13 4.8-4.3-.1-12.5-2.4-18.7-4.4-7.5-2.4-13.5-3.7-13-7.9.3-2.2 3.3-4.4 8.9-6.7z" })] }));
 };

package/dist/internal/layout/nav-hover-card.d.ts

@@ -0,0 +1,35 @@
+/** @internal Kortix apps only. No semver: it may change in any release. */
+import { PopoverContent } from '../../primitives/popover.js';
+import { type ComponentProps, type PointerEvent, type RefObject } from 'react';
+/**
+ * The hover card of a sidebar nav row (Apps, Customize): a mouse that rests on
+ * the row opens a list of where the row leads, so one click lands on the
+ * thing instead of two. The row stays a plain link: the card is a Popover
+ * anchored to it (`anchorRef` as `PopoverAnchor virtualRef`), not a menu
+ * trigger, which would take Enter and Space for itself.
+ *
+ * It opens only where hover exists (the session list's gate) and only on the
+ * expanded sidebar: the collapsed rail shows the row's tooltip there.
+ * `holdRef` names an input that keeps the card open while it has focus.
+ */
+export declare function useNavHoverCard({ enabled, holdRef, }: {
+    enabled: boolean;
+    holdRef?: RefObject<HTMLElement | null>;
+}): {
+    open: boolean;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    anchorRef: RefObject<HTMLElement>;
+    rowProps: {
+        onPointerEnter: (event: PointerEvent<HTMLElement>) => void;
+        onPointerLeave: (event: PointerEvent<HTMLElement>) => void;
+        onClick: () => void;
+    };
+    contentProps: {
+        onPointerEnter: (event: PointerEvent<HTMLElement>) => void;
+        onPointerLeave: (event: PointerEvent<HTMLElement>) => void;
+    };
+};
+/** The card's panel: to the right of the row, top edges aligned, never taking focus. */
+export declare function NavHoverCardContent({ className, ...props }: ComponentProps<typeof PopoverContent>): import("react").JSX.Element;
+/** The card's list: the floating-list padding. A list that can grow long sets its own cap. */
+export declare function NavHoverCardList({ className, ...props }: ComponentProps<'ul'>): import("react").JSX.Element;

package/dist/internal/layout/nav-hover-card.js

@@ -0,0 +1,84 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMediaQuery } from '../hooks/index.js';
+import { PopoverContent } from '../../primitives/popover.js';
+import { useSidebar } from '../../primitives/sidebar.js';
+import { cn } from '../../lib/utils.js';
+import { useEffect, useRef, useState, } from 'react';
+/** Time the pointer rests on the row before the card opens, so passing over it does nothing. */
+const HOVER_OPEN_DELAY_MS = 400;
+/** Time to cross the gap between the row and its card before it closes. Same as the More row. */
+const HOVER_CLOSE_DELAY_MS = 150;
+/**
+ * The hover card of a sidebar nav row (Apps, Customize): a mouse that rests on
+ * the row opens a list of where the row leads, so one click lands on the
+ * thing instead of two. The row stays a plain link: the card is a Popover
+ * anchored to it (`anchorRef` as `PopoverAnchor virtualRef`), not a menu
+ * trigger, which would take Enter and Space for itself.
+ *
+ * It opens only where hover exists (the session list's gate) and only on the
+ * expanded sidebar: the collapsed rail shows the row's tooltip there.
+ * `holdRef` names an input that keeps the card open while it has focus.
+ */
+export function useNavHoverCard({ enabled, holdRef, }) {
+    const canHover = useMediaQuery('(min-width: 768px) and (hover: hover) and (pointer: fine)');
+    const { state } = useSidebar();
+    const [open, setOpen] = useState(false);
+    const anchorRef = useRef(null);
+    const openTimer = useRef(undefined);
+    const closeTimer = useRef(undefined);
+    const active = enabled && canHover && state === 'expanded';
+    const cancelTimers = () => {
+        clearTimeout(openTimer.current);
+        clearTimeout(closeTimer.current);
+    };
+    useEffect(() => cancelTimers, []);
+    // An open card stays open while the pointer crosses between row and card;
+    // a closed one opens only after the pointer rests on the row.
+    const hoverOpen = (event) => {
+        if (event.pointerType !== 'mouse' || !active)
+            return;
+        cancelTimers();
+        if (open)
+            return;
+        openTimer.current = setTimeout(() => setOpen(true), HOVER_OPEN_DELAY_MS);
+    };
+    const hoverClose = (event) => {
+        if (event.pointerType !== 'mouse')
+            return;
+        cancelTimers();
+        closeTimer.current = setTimeout(() => {
+            // Typing in the card keeps it; a click outside or Escape closes it.
+            if (holdRef?.current && document.activeElement === holdRef.current)
+                return;
+            setOpen(false);
+        }, HOVER_CLOSE_DELAY_MS);
+    };
+    return {
+        open: open && active,
+        setOpen,
+        anchorRef: anchorRef,
+        rowProps: {
+            onPointerEnter: (event) => {
+                anchorRef.current = event.currentTarget;
+                hoverOpen(event);
+            },
+            onPointerLeave: hoverClose,
+            onClick: () => {
+                cancelTimers();
+                setOpen(false);
+            },
+        },
+        contentProps: { onPointerEnter: hoverOpen, onPointerLeave: hoverClose },
+    };
+}
+/** The card's panel: to the right of the row, top edges aligned, never taking focus. */
+export function NavHoverCardContent({ className, ...props }) {
+    return (_jsx(PopoverContent, { side: "right", align: "start", sideOffset: 8, className: cn('w-60 overflow-hidden p-0', className), 
+        // Hover must not move focus: the row keeps it, and so does the page.
+        onOpenAutoFocus: (event) => event.preventDefault(), onCloseAutoFocus: (event) => event.preventDefault(), ...props }));
+}
+/** The card's list: the floating-list padding. A list that can grow long sets its own cap. */
+export function NavHoverCardList({ className, ...props }) {
+    return _jsx("ul", { className: cn('p-1', className), ...props });
+}

package/dist/internal/layout/project-nav-row.d.ts

@@ -2,8 +2,10 @@
 import { HoverPrefetchLink } from '../components/hover-prefetch-link.js';
 import type { ComponentProps, ReactNode } from 'react';
 /** Keep the anchor's intent handlers and the caller's active-route semantics. */
-export declare function ProjectNavRow({ active, label, children, ...link }: ComponentProps<typeof HoverPrefetchLink> & {
+export declare function ProjectNavRow({ active, label, className, children, ...link }: ComponentProps<typeof HoverPrefetchLink> & {
     active: boolean;
     label: string;
+    /** Added to the row button's classes. */
+    className?: string;
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/internal/layout/project-nav-row.js

@@ -3,11 +3,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { HoverPrefetchLink } from '../components/hover-prefetch-link.js';
 import { SidebarMenuButton, SidebarMenuItem, useSidebar } from '../../primitives/sidebar.js';
 import { useIsMobile } from '../hooks/index.js';
+import { cn } from '../lib/utils.js';
 /** Keep the anchor's intent handlers and the caller's active-route semantics. */
-export function ProjectNavRow({ active, label, children, ...link }) {
+export function ProjectNavRow({ active, label, className, children, ...link }) {
     const isMobile = useIsMobile();
     const { setOpenMobile } = useSidebar();
-    return (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, isActive: active, tooltip: label, className: "group/menu-button text-sidebar-foreground relative", children: _jsx(HoverPrefetchLink, { ...link, onClick: (event) => {
+    return (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, isActive: active, tooltip: label, className: cn('group/menu-button text-sidebar-foreground relative', className), children: _jsx(HoverPrefetchLink, { ...link, onClick: (event) => {
                     link.onClick?.(event);
                     if (isMobile)
                         setOpenMobile(false);

package/dist/internal/layout/project-page-header.d.ts

@@ -5,12 +5,14 @@
  * same title-bar classes as the Customize tab bar (`CapabilityTabs`), so it
  * has the same height and clears the desktop window controls the same way.
  * A page has one view, so the title is plain text, not a one-tab underline
- * bar. `children` sit at the trailing edge (page actions, a docs link).
+ * bar. `titleAccessory` sits right after the title (a docs link). `children`
+ * sit at the trailing edge (page actions).
  *
  * The e2e journey `18-apps-ui` finds the page by the
  * `<h1>`.
  */
-export declare function ProjectPageHeader({ title, children, }: {
+export declare function ProjectPageHeader({ title, titleAccessory, children, }: {
     title: string;
+    titleAccessory?: React.ReactNode;
     children?: React.ReactNode;
 }): import("react").JSX.Element;

package/dist/internal/layout/project-page-header.js

@@ -8,12 +8,13 @@ import { SidebarToggle } from './sidebar-toggle.js';
  * same title-bar classes as the Customize tab bar (`CapabilityTabs`), so it
  * has the same height and clears the desktop window controls the same way.
  * A page has one view, so the title is plain text, not a one-tab underline
- * bar. `children` sit at the trailing edge (page actions, a docs link).
+ * bar. `titleAccessory` sits right after the title (a docs link). `children`
+ * sit at the trailing edge (page actions).
  *
  * The e2e journey `18-apps-ui` finds the page by the
  * `<h1>`.
  */
-export function ProjectPageHeader({ title, children, }) {
+export function ProjectPageHeader({ title, titleAccessory, children, }) {
     const sidebar = useOptionalSidebar();
-    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("div", { className: "kx-titlebar-tabs flex h-10 min-w-0 flex-1 items-center px-3", children: _jsx("h1", { className: "text-foreground truncate text-sm font-medium", children: title }) }), children ? _jsx("div", { className: "flex shrink-0 items-center gap-1", children: children }) : null] }));
+    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, {}), _jsxs("div", { className: "kx-titlebar-tabs flex h-10 min-w-0 flex-1 items-center gap-1.5 px-3", children: [_jsx("h1", { className: "text-foreground truncate text-sm font-medium", children: title }), titleAccessory] }), children ? _jsx("div", { className: "flex shrink-0 items-center gap-1", children: children }) : null] }));
 }

package/dist/internal/layout/project-settings-nav.js

@@ -7,11 +7,37 @@ export { CustomizeGlyph } from '../icons/customize.js';
 import { useTranslations } from '../../i18n/index.js';
 import { useUiPathname } from '../../providers/ui-provider.js';
 import { CountBadge } from '../../primitives/count-badge.js';
-import { activeCapabilityTab, capabilityTabHref, } from '../lib/capability-tab-routes.js';
+import { cn } from '../lib/utils.js';
+import { CAPABILITY_TABS, activeCapabilityTab, capabilityTabHref, } from '../lib/capability-tab-routes.js';
 import { PROJECT_ACTIONS } from '../lib/project-actions.js';
 import { useFeatureFlag } from '@kortix/sdk/react';
 import { useProjectPageCans } from '../lib/use-project-can.js';
 import { useReviewSessionSummary } from '../hooks/use-review-session-summary.js';
+import { HubLink } from '../account-hub/account-hub-location.js';
+import { hubTarget } from '../stores/account-panel-store.js';
+import { HoverPrefetchLink } from '../components/hover-prefetch-link.js';
+import { NavHoverCardContent, NavHoverCardList, useNavHoverCard } from './nav-hover-card.js';
+import { useLocalizedUiCatalog } from '../../i18n/ui-catalog/use-localized-ui-catalog.js';
+import { MENU_SEPARATOR, menuRow } from '../../primitives/menu-recipe.js';
+import { Popover, PopoverAnchor } from '../../primitives/popover.js';
+import { getProjectDetail } from '@kortix/sdk';
+import { contract, qk } from '@kortix/sdk/react';
+import { useQuery } from '@tanstack/react-query';
+import { AlarmIcon, CalendarIcon, CpuIcon, GearSixIcon, GitBranchIcon, LockKeyIcon, PlugIcon, RobotIcon, SquaresFourIcon, TrayIcon, UsersIcon, } from '@phosphor-icons/react';
+import { Fragment } from 'react';
+/** Each tab's glyph: the one the command palette shows for the same page (`menu-registry.ts`). */
+const TAB_ICONS = {
+    agent: RobotIcon,
+    skills: SquaresFourIcon,
+    connectors: PlugIcon,
+    triggers: AlarmIcon,
+    reminders: CalendarIcon,
+    models: CpuIcon,
+    secrets: LockKeyIcon,
+    files: GitBranchIcon,
+    review: TrayIcon,
+    config: GearSixIcon,
+};
 /**
  * The one project-configuration entry in the sidebar:
  * ProjectCustomizeNavItem, top of the panel under New session, navigating to
@@ -197,10 +223,41 @@ export function ProjectCustomizeNavItem({ projectId }) {
     // Connectors or one agent's page, not just on the landing tab.
     const isActive = !!pathname &&
         (pathname === customizePath(projectId) || activeCapabilityTab(pathname) !== null);
+    const card = useNavHoverCard({ enabled: !!tab && !!projectId });
     if (!tab)
         return null;
     // No project id means no valid href, so there is nothing to render.
     if (!projectId)
         return null;
-    return (_jsxs(ProjectNavRow, { active: isActive, label: t('customize'), href: capabilityTabHref(projectId, tab), prefetch: true, children: [_jsx("span", { className: "shrink-0", children: _jsx(CustomizeGlyph, {}) }), t('customize'), reviewCount > 0 ? (_jsx("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: _jsx(CountBadge, { count: reviewCount, tone: "waiting" }) })) : null] }));
+    return (_jsxs(Popover, { open: card.open, onOpenChange: card.setOpen, children: [_jsx(PopoverAnchor, { virtualRef: card.anchorRef }), _jsxs(ProjectNavRow, { active: isActive, label: t('customize'), href: capabilityTabHref(projectId, tab), prefetch: true, ...card.rowProps, children: [_jsx("span", { className: "shrink-0", children: _jsx(CustomizeGlyph, {}) }), t('customize'), reviewCount > 0 ? (_jsx("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: _jsx(CountBadge, { count: reviewCount, tone: "waiting" }) })) : null] }), _jsx(NavHoverCardContent, { ...card.contentProps, children: _jsx(CustomizeCardList, { projectId: projectId, tabs: access.tabs, reviewCount: reviewCount, onOpen: () => card.setOpen(false) }) })] }));
+}
+/**
+ * The Customize card: every tab the caller may open, in the tab bar's order
+ * and with its seams (Agents | the library | Members and Settings), so the
+ * card and the bar read as one list. Members is the bar's launcher into the
+ * Access hub, gated the same way (`project.members.read`).
+ */
+function CustomizeCardList({ projectId, tabs, reviewCount, onOpen, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const allTabs = useLocalizedUiCatalog(CAPABILITY_TABS);
+    const { data } = useQuery({
+        queryKey: qk.project.detail(projectId),
+        queryFn: () => getProjectDetail(projectId),
+        ...contract('config'),
+    });
+    const canReadMembers = useProjectPageCans(projectId)[PROJECT_ACTIONS.PROJECT_MEMBERS_READ]?.allowed === true;
+    const accountId = data?.project?.account_id;
+    const allowed = new Set(tabs);
+    const shown = allTabs.filter((entry) => allowed.has(entry.key));
+    const rowClass = menuRow('sm', 'default', 'cursor-pointer');
+    const tabRow = (entry) => {
+        const TabIcon = TAB_ICONS[entry.key];
+        return (_jsx("li", { children: _jsxs(HoverPrefetchLink, { href: capabilityTabHref(projectId, entry.key), onClick: onOpen, className: rowClass, children: [_jsx(TabIcon, { "aria-hidden": true }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: entry.label }), entry.key === 'review' && reviewCount > 0 ? _jsx(CountBadge, { count: reviewCount, tone: "waiting" }) : null] }) }, entry.key));
+    };
+    const primary = shown.filter((entry) => entry.key === 'agent');
+    const library = shown.filter((entry) => entry.key !== 'agent' && entry.key !== 'config');
+    const trailing = shown.filter((entry) => entry.key === 'config');
+    const members = canReadMembers && accountId ? (_jsx("li", { children: _jsxs(HubLink, { to: hubTarget(accountId, { tab: 'access-projects', project: projectId }), onClick: onOpen, className: rowClass, children: [_jsx(UsersIcon, { "aria-hidden": true }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: tI18nComplete.raw('text1044a4c056d0') })] }) }, "members")) : null;
+    const groups = [primary.map(tabRow), library.map(tabRow), [members, ...trailing.map(tabRow)].filter(Boolean)].filter((group) => group.length > 0);
+    return (_jsx(NavHoverCardList, { children: groups.map((group, index) => (_jsxs(Fragment, { children: [index > 0 ? _jsx("li", { "aria-hidden": true, className: cn(MENU_SEPARATOR, '-mx-1') }) : null, group] }, index))) }));
 }

package/dist/internal/lib/browser-error-noise.d.ts

@@ -4,7 +4,7 @@ export { isEmptyMessageUnresolvedBrowserChunkNoise, isStaleWebpackRuntimeCallNoi
 export { isClientRequestTimeoutMessage, isExpectedBillingGateMessage, isExpectedCompactionNoModelMessage, isGitMirrorUnavailableNoiseMessage, isModelNotServableNoise, isRuntimeNotReadyNoiseMessage, isServerDeadlineNoiseMessage, } from './browser-noise/rules/expected-states.js';
 export { isCaptchaInterceptorNoise, isExtensionRejectedObjectNoise, isExtensionSource, isInjectedAppSource, isInjectedScriptSendMessageNoise, isInpageJsNoErrorMessageNoise, isInpageWalletStreamNoise, isTronLinkProxyNoise, isUserscriptManagerNoise, } from './browser-noise/rules/extensions.js';
 export { isCanvasImageDataOOMNoise, isPaperShaderImageUniformNoise, isPaperShaderNullContextNoise, isPaperShaderWebGLUnsupportedNoise, isSpoofedWebGLGetParameterNoise, } from './browser-noise/rules/graphics.js';
-export { isOneTrustJsonParseNoise, isRedefineInjectedWalletNoise, isRedefineWebdriverNoise, isVercelLiveFeedbackNoise, } from './browser-noise/rules/injected-scripts.js';
+export { isGoogletagUndefinedNoise, isOneTrustJsonParseNoise, isRedefineInjectedWalletNoise, isRedefineWebdriverNoise, isVercelLiveFeedbackNoise, } from './browser-noise/rules/injected-scripts.js';
 export { isKnownBrowserNoiseMessage, isKnownTestNoiseMessage, } from './browser-noise/rules/messages.js';
 export { isConnectionClosedNoise, isFailedToSendMessageNoise, isFramelessNetworkErrorNoise, isSignalTimeoutNoise, } from './browser-noise/rules/network.js';
 export { isIosWebViewInjectedStackOverflowNoise, isOldBrowserDomNullDerefNoise, isFirefoxDeadObjectUnattributableNoise, isOldBrowserSyntaxParseError, isOldWebkitRegexNoiseMessage, isUndefinedVariableThirdPartyNoise, isUnresolvableStackOverflowNoise, } from './browser-noise/rules/old-browsers.js';

package/dist/internal/lib/browser-error-noise.js

@@ -29,7 +29,7 @@ export { isEmptyMessageUnresolvedBrowserChunkNoise, isStaleWebpackRuntimeCallNoi
 export { isClientRequestTimeoutMessage, isExpectedBillingGateMessage, isExpectedCompactionNoModelMessage, isGitMirrorUnavailableNoiseMessage, isModelNotServableNoise, isRuntimeNotReadyNoiseMessage, isServerDeadlineNoiseMessage, } from './browser-noise/rules/expected-states.js';
 export { isCaptchaInterceptorNoise, isExtensionRejectedObjectNoise, isExtensionSource, isInjectedAppSource, isInjectedScriptSendMessageNoise, isInpageJsNoErrorMessageNoise, isInpageWalletStreamNoise, isTronLinkProxyNoise, isUserscriptManagerNoise, } from './browser-noise/rules/extensions.js';
 export { isCanvasImageDataOOMNoise, isPaperShaderImageUniformNoise, isPaperShaderNullContextNoise, isPaperShaderWebGLUnsupportedNoise, isSpoofedWebGLGetParameterNoise, } from './browser-noise/rules/graphics.js';
-export { isOneTrustJsonParseNoise, isRedefineInjectedWalletNoise, isRedefineWebdriverNoise, isVercelLiveFeedbackNoise, } from './browser-noise/rules/injected-scripts.js';
+export { isGoogletagUndefinedNoise, isOneTrustJsonParseNoise, isRedefineInjectedWalletNoise, isRedefineWebdriverNoise, isVercelLiveFeedbackNoise, } from './browser-noise/rules/injected-scripts.js';
 export { isKnownBrowserNoiseMessage, isKnownTestNoiseMessage, } from './browser-noise/rules/messages.js';
 export { isConnectionClosedNoise, isFailedToSendMessageNoise, isFramelessNetworkErrorNoise, isSignalTimeoutNoise, } from './browser-noise/rules/network.js';
 export { isIosWebViewInjectedStackOverflowNoise, isOldBrowserDomNullDerefNoise, isFirefoxDeadObjectUnattributableNoise, isOldBrowserSyntaxParseError, isOldWebkitRegexNoiseMessage, isUndefinedVariableThirdPartyNoise, isUnresolvableStackOverflowNoise, } from './browser-noise/rules/old-browsers.js';

package/dist/internal/lib/browser-noise/rules/extensions.js

@@ -615,8 +615,9 @@ export function isCaptchaInterceptorNoise(input) {
 }
 /**
  * An injected wallet provider rejecting a pending request with the EIP-1474
- * default internal error, `{ code: -32603, message: 'Internal JSON-RPC error.' }`
- * (the wording of the wallet RPC error library). The rejected value is a plain
+ * default internal error, `{ code: -32603, message: 'Internal JSON-RPC error.' }`,
+ * or the exact missing-account error captured in KRTX-2150 (code 4001).
+ * Both use the wallet provider's own wording. The rejected value is a plain
  * object with no `stack`, so Sentry reports a frameless synthetic
  * "Object captured as promise rejection with keys: code, message" and the
  * extension-stack anchor above cannot see it. Better Stack, Kortix Frontend
@@ -633,7 +634,11 @@ function isWalletInternalRpcRejectionNoise(input) {
     const value = serialized;
     if (Object.keys(value).sort().join(',') !== 'code,message')
         return false;
-    if (value.code !== -32603 || value.message !== 'Internal JSON-RPC error.')
+    // KRTX-2150 recurred with a second frameless wallet payload (2026-10-29).
+    // Match the exact pair, not EIP-1193 code 4001 alone (user rejection).
+    const internal = value.code === -32603 && value.message === 'Internal JSON-RPC error.';
+    const missingAccount = value.code === 4001 && value.message === 'wallet must has at least one account';
+    if (!internal && !missingAccount)
         return false;
     return !sourcesOf(input).some((source) => isBrowserBundleSource(source) || isFirstPartyResolvedSource(source));
 }
@@ -677,6 +682,15 @@ function isWalletProviderDisconnectedRejectionNoise(input) {
     return !sourcesOf(input).some((source) => isBrowserBundleSource(source) || isFirstPartyResolvedSource(source));
 }
 export const EXTENSION_RULES = [
+    {
+        // Talisman's injected page.js rejects before wallet onboarding (KRTX-3678).
+        // Require its exact message and response frame; page.js alone is ambiguous.
+        id: 'talisman-onboarding',
+        appliesTo: 'sentry',
+        match: ({ message, frames }) => normalizeString(message) === 'Talisman extension has not been configured yet. Please continue with onboarding.' &&
+            !frames.some((frame) => isFirstPartyResolvedSource(frame.filename)) &&
+            frames.some((frame) => frame.filename === 'app:///page.js' && frame.function === 'ne.handleResponse'),
+    },
     {
         id: 'injected-app-source',
         appliesTo: 'both',

package/dist/internal/lib/browser-noise/rules/injected-scripts.d.ts

@@ -70,6 +70,13 @@ export declare function isInjectedWalletProviderWriteNoise(input: {
         filename?: unknown;
     } | undefined>;
 }): boolean;
+export declare function isGoogletagUndefinedNoise(input: {
+    message?: unknown;
+    filename?: unknown;
+    frames?: Array<{
+        filename?: unknown;
+    } | undefined>;
+}): boolean;
 /** Vercel toolbar frames have a reserved source path outside app bundles. */
 export declare function isVercelLiveFeedbackNoise(input: {
     filename?: unknown;

package/dist/internal/lib/browser-noise/rules/injected-scripts.js

@@ -213,6 +213,20 @@ export function isInjectedWalletProviderWriteNoise(input) {
     return (UNDEFINED_WALLET_PROVIDER_WRITE_MESSAGE.test(stripped) &&
         !sources.some((source) => isBrowserBundleSource(source) || isFirstPartyResolvedSource(source)));
 }
+/**
+ * A tag that calls Google Publisher Tag (`googletag`) before its library
+ * loads: `googletag is not defined` (V8, Gecko) or `Can't find variable:
+ * googletag` (WebKit). Better Stack, Kortix Frontend prod, 2026-10-27
+ * (KRTX-3549): 71 events in 2 s from one `<anonymous>` frame, 0 users. Kortix
+ * never loads or calls `googletag`; its Google Tag Manager writes only to
+ * `dataLayer`. A frame in our bundles or resolved first-party source keeps
+ * reporting.
+ */
+const GOOGLETAG_UNDEFINED_MESSAGE = /^(?:googletag is not defined|Can't find variable: googletag)$/;
+export function isGoogletagUndefinedNoise(input) {
+    return (GOOGLETAG_UNDEFINED_MESSAGE.test(stripErrorWrappers(normalizeString(input.message))) &&
+        !sourcesOf(input).some((source) => isBrowserBundleSource(source) || isFirstPartyResolvedSource(source)));
+}
 /** Vercel toolbar frames have a reserved source path outside app bundles. */
 export function isVercelLiveFeedbackNoise(input) {
     const sources = sourcesOf(input);
@@ -225,5 +239,6 @@ export const INJECTED_SCRIPT_RULES = [
     { id: 'redefine-webdriver', appliesTo: 'both', match: isRedefineWebdriverNoise },
     { id: 'redefine-wallet-provider', appliesTo: 'both', match: isRedefineInjectedWalletNoise },
     { id: 'wallet-provider-write', appliesTo: 'both', match: isInjectedWalletProviderWriteNoise },
+    { id: 'googletag-undefined', appliesTo: 'both', match: isGoogletagUndefinedNoise },
     { id: 'vercel-live-feedback', appliesTo: 'both', match: isVercelLiveFeedbackNoise },
 ];

package/dist/internal/lib/detect-os.d.ts

@@ -0,0 +1,43 @@
+/** @internal Kortix apps only. No semver: it may change in any release. */
+/**
+ * Platform detection for the /download page and the per-platform redirect
+ * routes.
+ *
+ * Detection runs on the SERVER, from the request's user-agent header, so the
+ * page paints the correct filled button (and, on a phone, the mobile card
+ * first) on first render. A client-side `useEffect` swap would let a visitor click the wrong
+ * installer during the flash — the exact failure this page exists to prevent.
+ *
+ * Architecture is deliberately NOT detected: macOS ships a single universal
+ * .dmg, and macOS user agents misreport arch anyway (they always claim Intel).
+ */
+export type DesktopOs = 'macos' | 'windows' | 'linux';
+export type MobileOs = 'ios' | 'android';
+export type Platform = DesktopOs | MobileOs;
+/** Fixed row order. Detection never reorders rows; it only picks the filled button. */
+export declare const DESKTOP_ORDER: readonly DesktopOs[];
+export declare const MOBILE_ORDER: readonly MobileOs[];
+/** Map an explicit `?platform=` value or `/download/<segment>` to a platform. */
+export declare function normalizePlatform(raw: string | null | undefined): Platform | null;
+/**
+ * Best-effort platform from a user-agent string.
+ *
+ * THE ORDER OF THESE CHECKS IS LOAD-BEARING. Two user agents carry another
+ * platform's token:
+ *   iPad     "Mozilla/5.0 (iPad; CPU OS 17_0 like Mac OS X)"  contains "mac"
+ *   Android  "Mozilla/5.0 (Linux; Android 14; Pixel 8)"       contains "linux"
+ * So iOS is tested before macOS, and Android before Linux. `detect-os.test.ts`
+ * pins both; if you reorder these lines, those tests fail.
+ *
+ * KNOWN LIMITATION: an iPad with "Request Desktop Website" enabled sends a UA
+ * byte-identical to a Mac's. No server can separate them — real detection needs
+ * `navigator.maxTouchPoints`, which is not in any request header. That visitor
+ * gets the Desktop card first; the Mobile card is still on the page, one tap
+ * away. Fixing it client-side would reintroduce the wrong-file-click window
+ * this module exists to close.
+ *
+ * Defaults to macOS: the largest desktop segment for this product, and every
+ * other platform stays one click away on the page.
+ */
+export declare function detectPlatform(userAgent: string | null | undefined): Platform;
+export declare function isMobilePlatform(platform: Platform): platform is MobileOs;

package/dist/internal/lib/detect-os.js

@@ -0,0 +1,70 @@
+/**
+ * Platform detection for the /download page and the per-platform redirect
+ * routes.
+ *
+ * Detection runs on the SERVER, from the request's user-agent header, so the
+ * page paints the correct filled button (and, on a phone, the mobile card
+ * first) on first render. A client-side `useEffect` swap would let a visitor click the wrong
+ * installer during the flash — the exact failure this page exists to prevent.
+ *
+ * Architecture is deliberately NOT detected: macOS ships a single universal
+ * .dmg, and macOS user agents misreport arch anyway (they always claim Intel).
+ */
+/** Fixed row order. Detection never reorders rows; it only picks the filled button. */
+export const DESKTOP_ORDER = ['macos', 'windows', 'linux'];
+export const MOBILE_ORDER = ['ios', 'android'];
+const PLATFORM_ALIASES = {
+    mac: 'macos',
+    macos: 'macos',
+    osx: 'macos',
+    darwin: 'macos',
+    apple: 'macos',
+    win: 'windows',
+    windows: 'windows',
+    linux: 'linux',
+    ios: 'ios',
+    iphone: 'ios',
+    ipad: 'ios',
+    android: 'android',
+};
+/** Map an explicit `?platform=` value or `/download/<segment>` to a platform. */
+export function normalizePlatform(raw) {
+    return PLATFORM_ALIASES[(raw || '').toLowerCase()] ?? null;
+}
+/**
+ * Best-effort platform from a user-agent string.
+ *
+ * THE ORDER OF THESE CHECKS IS LOAD-BEARING. Two user agents carry another
+ * platform's token:
+ *   iPad     "Mozilla/5.0 (iPad; CPU OS 17_0 like Mac OS X)"  contains "mac"
+ *   Android  "Mozilla/5.0 (Linux; Android 14; Pixel 8)"       contains "linux"
+ * So iOS is tested before macOS, and Android before Linux. `detect-os.test.ts`
+ * pins both; if you reorder these lines, those tests fail.
+ *
+ * KNOWN LIMITATION: an iPad with "Request Desktop Website" enabled sends a UA
+ * byte-identical to a Mac's. No server can separate them — real detection needs
+ * `navigator.maxTouchPoints`, which is not in any request header. That visitor
+ * gets the Desktop card first; the Mobile card is still on the page, one tap
+ * away. Fixing it client-side would reintroduce the wrong-file-click window
+ * this module exists to close.
+ *
+ * Defaults to macOS: the largest desktop segment for this product, and every
+ * other platform stays one click away on the page.
+ */
+export function detectPlatform(userAgent) {
+    const ua = (userAgent || '').toLowerCase();
+    if (ua.includes('iphone') || ua.includes('ipad') || ua.includes('ipod'))
+        return 'ios';
+    if (ua.includes('android'))
+        return 'android';
+    if (ua.includes('windows'))
+        return 'windows';
+    if (ua.includes('mac') || ua.includes('darwin'))
+        return 'macos';
+    if (ua.includes('linux'))
+        return 'linux';
+    return 'macos';
+}
+export function isMobilePlatform(platform) {
+    return platform === 'ios' || platform === 'android';
+}

package/dist/internal/lib/manifest-version.d.ts

@@ -3,7 +3,7 @@ export type ManifestVersion = 1 | 2 | 3;
 export declare function detectManifestVersion(manifestRaw: string | null | undefined): ManifestVersion;
 /** The manifest file a version lives in. An unresolved read (`null`) reads as v1. */
 export declare function manifestFilename(version: number | null): 'kortix.toml' | 'kortix.yaml';
-/** Only a v1 project is offered an upgrade (to v2). v3 is opt-in and not offered yet. `null` (not read yet) is not. */
+/** A v1 or v2 project is offered the upgrade to v3. `null` (not read yet) is not. */
 export declare function manifestNeedsUpgrade(version: ManifestVersion | null): boolean;
 export interface ProjectManifestVersionState {
     /** `null` while the project-detail fetch is still in flight — callers that

package/dist/internal/lib/manifest-version.js

@@ -27,9 +27,9 @@ export function detectManifestVersion(manifestRaw) {
 export function manifestFilename(version) {
     return (version ?? 1) >= 2 ? 'kortix.yaml' : 'kortix.toml';
 }
-/** Only a v1 project is offered an upgrade (to v2). v3 is opt-in and not offered yet. `null` (not read yet) is not. */
+/** A v1 or v2 project is offered the upgrade to v3. `null` (not read yet) is not. */
 export function manifestNeedsUpgrade(version) {
-    return version === 1;
+    return version === 1 || version === 2;
 }
 /**
  * Reads the SAME `qk.project.detail(id)` query the rest of Customize already