@kortix/ui 0.14.7 → 0.14.9

package/dist/markdown/setup-links/show-connect-hero.js

@@ -0,0 +1,91 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { LockSimpleIcon } from '@phosphor-icons/react';
+import { useCallback, useState } from 'react';
+import { useLocalizedUiCatalog } from '../../i18n/ui-catalog/use-localized-ui-catalog.js';
+import { Button } from '../../primitives/button.js';
+import { useUiComponents } from '../../providers/ui-provider.js';
+import { ConnectorHandshake } from './connector-handshake.js';
+import { connectorHeadline, useConnectorLinkInfo } from './connector-link-info.js';
+import { onSetupLinkModalClose } from './setup-link-close-finalize.js';
+import { parseSetupLinkHref } from './util.js';
+const COPY = {
+    title: 'Connect {app}',
+    connectedTitle: '{app} connected',
+    connectedDescription: 'Your agent can use {app} now and continues on its own.',
+    connect: 'Connect {app}',
+    view: 'View',
+    trust: 'You sign in on {app}. Kortix never sees your password.',
+    secureHost: 'Secure sign-in at {host}',
+    fallbackApp: 'the app',
+};
+/** Provider-hosted sign-in pages an agent may show instead of a Kortix link. */
+const PROVIDER_HOSTS = /(^|\.)(composio\.dev|pipedream\.com)$/i;
+/**
+ * A `show` URL that is a connect step, not a page: a Kortix link, a provider's
+ * sign-in page, or any URL the agent titled "Connect <app>". A connection URL
+ * never falls back to the plain link card.
+ */
+export function showConnectTarget(url, title = '') {
+    const setup = parseSetupLinkHref(url);
+    if (setup?.kind === 'connector')
+        return { kind: 'kortix', token: setup.token };
+    let host;
+    try {
+        host = new URL(url).hostname;
+    }
+    catch {
+        return null;
+    }
+    if (PROVIDER_HOSTS.test(host) || /^connect\s+\S/i.test(title.trim())) {
+        return { kind: 'provider', host };
+    }
+    return null;
+}
+/** "Connect Snaps YouTube" → "Snaps YouTube"; the agent's own title names the app. */
+function appFromTitle(title) {
+    return title.replace(/^connect\s+/i, '').trim();
+}
+function fill(template, values) {
+    return template.replace(/\{(\w+)\}/g, (_, key) => values[key] ?? '');
+}
+/**
+ * The `show` panel for a connect URL (Paper, "Show tool · connect URL panel" 01):
+ * the Kortix ··· app handshake, one title, the agent's sentence, one action.
+ *
+ * A Kortix link opens the host's connect dialog in place and turns into the
+ * connected record once the account lands. A provider page opens in a sign-in
+ * window; its app comes from the agent's title, never the provider's favicon.
+ */
+export function ShowConnectHero({ url, target, title, description, }) {
+    const copy = useLocalizedUiCatalog(COPY);
+    const { ConnectorConnectModal } = useUiComponents();
+    const token = target.kind === 'kortix' ? target.token : null;
+    const info = useConnectorLinkInfo(token);
+    const [settledHere, setSettledHere] = useState(false);
+    const [open, setOpen] = useState(false);
+    const headline = info ? connectorHeadline(info) : null;
+    const app = headline?.app || appFromTitle(title) || copy.fallbackApp;
+    const connected = settledHere || info?.connected === true;
+    // `undefined` while a Kortix link's info loads (skeleton tile). With no icon on
+    // the link, the catalogue logo by slug (as `approval-decision.tsx` does); a
+    // 404 there falls back to the neutral glyph inside `ConnectorLogo`.
+    const logoSlug = info?.slug || app.toLowerCase().replace(/[^a-z0-9]/g, '');
+    const iconUrl = token && info === undefined
+        ? undefined
+        : (info?.icon_url ?? `https://logos.composio.dev/api/${encodeURIComponent(logoSlug)}`);
+    const inApp = token !== null && !!ConnectorConnectModal;
+    const handleSettled = useCallback(() => setSettledHere(true), []);
+    const handleOpenChange = (next) => {
+        setOpen(next);
+        if (token)
+            void onSetupLinkModalClose({ open: next, kind: 'connector', token });
+    };
+    const onAction = () => {
+        if (inApp)
+            setOpen(true);
+        else
+            window.open(url, '_blank', 'noopener,noreferrer,width=520,height=720');
+    };
+    return (_jsxs("div", { className: "flex w-full max-w-sm flex-col items-center gap-4 py-6 text-center", "data-testid": "show-connect-hero", "data-connected": connected || undefined, children: [_jsx(ConnectorHandshake, { name: app, iconUrl: iconUrl, connected: connected, size: "lg", collapsible: false }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("h3", { className: "text-foreground text-sm font-medium", children: fill(connected ? copy.connectedTitle : copy.title, { app }) }), connected || description ? (_jsx("p", { className: "text-muted-foreground text-sm font-normal text-pretty", children: connected ? fill(copy.connectedDescription, { app }) : description })) : null] }), _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Button, { size: "sm", variant: connected ? 'outline' : 'default', onClick: onAction, children: connected ? copy.view : fill(copy.connect, { app }) }), connected ? null : (_jsx("p", { className: "text-muted-foreground flex items-center gap-1.5 text-xs font-normal", children: target.kind === 'provider' ? (_jsxs(_Fragment, { children: [_jsx(LockSimpleIcon, { className: "size-3 shrink-0" }), fill(copy.secureHost, { host: target.host })] })) : (fill(copy.trust, { app })) }))] }), token && ConnectorConnectModal ? (_jsx(ConnectorConnectModal, { token: token, open: open, onOpenChange: handleOpenChange, onConnected: handleSettled, fallbackName: app })) : null] }));
+}

package/dist/markdown/unified-markdown.js

@@ -107,7 +107,7 @@ export function MarkdownImage({ src, alt, flush = false, compact = false, onErro
         }
         return (_jsxs(Button, { type: "button", variant: "outline", size: "xs", title: alt || undefined, onClick: () => setLoadRequested(true), className: "text-muted-foreground max-w-full", children: [_jsx(ImageIcon, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: label })] }));
     }
-    return (_jsx("span", { className: cn('block', !flush && 'my-5'), children: _jsx("img", { src: resolvedSrc, alt: alt || '', loading: "lazy", onError: onError, className: "h-auto max-w-full rounded-lg outline outline-1 -outline-offset-1 outline-black/10 dark:outline-white/10" }) }));
+    return (_jsx("span", { className: cn('block', !flush && 'my-5'), children: _jsx("img", { src: resolvedSrc, alt: alt || '', loading: "lazy", onError: onError, className: "h-auto max-w-full rounded-lg outline outline-1 -outline-offset-1 outline-border" }) }));
 }
 /**
  * Every renderer the markdown uses, defined once for the module.
@@ -131,13 +131,13 @@ const MARKDOWN_COMPONENTS = {
     h4: ({ children }) => (_jsx("h4", { className: "text-foreground mt-6 mb-2 text-lg font-semibold first:mt-0", children: children })),
     h5: ({ children }) => (_jsx("h5", { className: "text-foreground mt-4 mb-1 text-base font-semibold first:mt-0", children: children })),
     h6: ({ children }) => (_jsx("h6", { className: "text-foreground mt-4 mb-1 text-base font-semibold tracking-wide first:mt-0", children: children })),
-    p: ({ children }) => (_jsx("div", { className: "text-foreground/95 my-4 leading-relaxed font-medium [overflow-wrap:anywhere] first:mt-0 last:mb-0 [&:has(img)]:my-0", children: wrapChildrenWithPaths(children) })),
-    ul: ({ children }) => (_jsx("ul", { className: "marker:text-muted-foreground/60 my-4 list-outside list-disc space-y-1 pl-6 first:mt-0 last:mb-0 [&_p]:mb-2 [&_p]:last:mb-0", children: children })),
+    p: ({ children }) => (_jsx("div", { className: "text-foreground my-4 leading-relaxed font-medium [overflow-wrap:anywhere] first:mt-0 last:mb-0 [&:has(img)]:my-0", children: wrapChildrenWithPaths(children) })),
+    ul: ({ children }) => (_jsx("ul", { className: "marker:text-muted-foreground my-4 list-outside list-disc space-y-1 pl-6 first:mt-0 last:mb-0 [&_p]:mb-2 [&_p]:last:mb-0", children: children })),
     ol: MarkdownOrderedList,
     // A setup link still inside a list or table is part of a sentence or a row of
     // data (`liftSetupLinkBlocks` lifted the ones that were not), so it renders
     // as an inline chip rather than a full-width card.
-    li: ({ children }) => (_jsx("li", { className: "text-foreground/95 leading-relaxed font-medium [overflow-wrap:anywhere]", children: _jsx(SetupLinkInlineContext.Provider, { value: true, children: wrapChildrenWithPaths(children) }) })),
+    li: ({ children }) => (_jsx("li", { className: "text-foreground leading-relaxed font-medium [overflow-wrap:anywhere]", children: _jsx(SetupLinkInlineContext.Provider, { value: true, children: wrapChildrenWithPaths(children) }) })),
     // Links — brand-blue, routed through next/link. Setup links open an in-app modal.
     a: MarkdownLink,
     // Every fence kind and inline code resolve in one shared place; see
@@ -160,7 +160,7 @@ const MARKDOWN_COMPONENTS = {
     td: ({ children, className: tdClassName, node: _node, ...props }) => (_jsx("td", { className: cn(tdClassName, 'text-foreground px-4 py-2 text-left font-normal break-normal'), ...props, children: _jsx(SetupLinkInlineContext.Provider, { value: true, children: wrapChildrenWithPaths(children) }) })),
     img: MarkdownImage,
     strong: ({ children }) => (_jsx("strong", { className: "text-foreground font-semibold", children: children })),
-    em: ({ children }) => (_jsx("em", { className: "text-foreground/90 italic", children: children })),
+    em: ({ children }) => (_jsx("em", { className: "text-foreground italic", children: children })),
     del: ({ children }) => (_jsx("del", { className: "text-muted-foreground decoration-muted-foreground/50 line-through", children: children })),
     // GFM task-list checkbox.
     // Read-only: the control is shown, never toggled.

package/dist/primitives/badge.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const badgeVariants: (props?: ({
-    variant?: "outline" | "accent" | "secondary" | "success" | "warning" | "info" | "beta" | "default" | "kortix" | "destructive" | "new" | "update" | "muted" | "transparent" | "solid" | "badgeSuccess" | "highlight" | null | undefined;
+    variant?: "outline" | "accent" | "secondary" | "success" | "warning" | "info" | "beta" | "default" | "kortix" | "destructive" | "update" | "new" | "muted" | "transparent" | "solid" | "badgeSuccess" | "highlight" | "royal" | null | undefined;
     size?: "default" | "xs" | "sm" | "tabular" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Badge({ className, variant, size, asChild, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {

package/dist/primitives/badge.js

@@ -22,6 +22,8 @@ const badgeVariants = cva('inline-flex shrink-0 items-center justify-center gap-
             info: 'bg-kortix-blue/15 text-foreground ring-1 ring-inset ring-kortix-blue/15 normal-case [&>svg]:text-kortix-blue',
             muted: 'bg-muted/50 text-muted-foreground ring-1 ring-inset ring-muted/50 normal-case',
             transparent: 'bg-transparent text-foreground ring-0 normal-case',
+            // The owner tier of the role badge hierarchy (decisions.md, R1).
+            royal: 'bg-kortix-purple/15 text-foreground ring-1 ring-inset ring-kortix-purple/15 normal-case',
         },
         size: {
             default: 'px-1.5',

package/dist/primitives/disclosure.js

@@ -89,8 +89,15 @@ export function DisclosureTrigger({ children, className, variant = 'default', })
                 return child;
             const typedChild = child;
             const childClassName = typedChild.props.className;
+            // Composed, never replaced: a tooltip around the trigger closes on its
+            // own onClick. A keyboard toggle is an activation (a native button's
+            // Enter is a click), so it runs the child's onClick too.
+            const activate = (event) => {
+                typedChild.props.onClick?.(event);
+                toggle();
+            };
             return React.cloneElement(typedChild, {
-                onClick: toggle,
+                onClick: activate,
                 role: 'button',
                 'aria-expanded': open,
                 // The region is unmounted while collapsed, so only promise an id that
@@ -98,9 +105,14 @@ export function DisclosureTrigger({ children, className, variant = 'default', })
                 'aria-controls': open ? contentId : undefined,
                 tabIndex: 0,
                 onKeyDown: (e) => {
+                    typedChild.props.onKeyDown?.(e);
+                    if (e.defaultPrevented)
+                        return;
                     if (e.key === 'Enter' || e.key === ' ') {
+                        // Activate before preventing the default: a composed handler
+                        // (Radix's tooltip close) skips a prevented event.
+                        activate(e);
                         e.preventDefault();
-                        toggle();
                     }
                 },
                 className: cn(className, 'select-none', childClassName, variant === 'outline' &&

package/dist/primitives/empty-art.d.ts

@@ -0,0 +1,12 @@
+import type { Icon } from '@phosphor-icons/react';
+/**
+ * The artwork above an `EmptyState`: two cards fanned behind a front card.
+ * Without `icon` the front card is a document (an empty folder); with one,
+ * the icon sits on a plain front card (a channel's empty Memory, Links,
+ * Triggers, Apps and Threads), so every empty tab draws one picture.
+ * `glyphClassName` tints the icon (a channel's setup cards).
+ */
+export declare function EmptyArt({ icon: Glyph, glyphClassName }: {
+    icon?: Icon;
+    glyphClassName?: string;
+}): import("react").JSX.Element;

package/dist/primitives/empty-art.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The artwork above an `EmptyState`: two cards fanned behind a front card.
+ * Without `icon` the front card is a document (an empty folder); with one,
+ * the icon sits on a plain front card (a channel's empty Memory, Links,
+ * Triggers, Apps and Threads), so every empty tab draws one picture.
+ * `glyphClassName` tints the icon (a channel's setup cards).
+ */
+export function EmptyArt({ icon: Glyph, glyphClassName = 'text-muted-foreground' }) {
+    return (_jsxs("svg", { width: "72", height: "60", viewBox: "0 0 72 60", fill: "none", "aria-hidden": "true", children: [[-1, 1].map((side) => (_jsx("rect", { x: "21", y: "10", width: "30", height: "43", rx: "4", transform: `translate(${side * 7} 0) rotate(${side * 8} 36 53)`, className: "fill-card stroke-foreground/10" }, side))), Glyph ? (_jsxs(_Fragment, { children: [_jsx("rect", { x: "21", y: "12", width: "30", height: "43", rx: "4", className: "fill-muted stroke-foreground/20" }), _jsx(Glyph, { x: 27, y: 24.5, size: 18, className: glyphClassName })] })) : (_jsxs("g", { transform: "translate(3 0)", children: [_jsx("path", { d: "M22 12h17l9 9v30a4 4 0 0 1-4 4H22a4 4 0 0 1-4-4V16a4 4 0 0 1 4-4Z", className: "fill-muted stroke-foreground/20" }), _jsx("path", { d: "M39 12v6a3 3 0 0 0 3 3h6", className: "stroke-foreground/20" }), _jsx("path", { d: "M25 30h16M25 36h16M25 42h10", strokeWidth: "1.5", strokeLinecap: "round", className: "stroke-foreground/15" })] }))] }));
+}

package/dist/primitives/entity-avatar.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { Icon } from './kortix-icons.js';
 import { type Icon as IconType } from '@phosphor-icons/react';
 /**
@@ -79,6 +80,8 @@ export interface EntityAvatarProps {
     icon?: Icon | IconType;
     size?: EntityAvatarSize;
     className?: string;
+    /** Shows on hover, through `Hint`: who or what this avatar stands for. */
+    hint?: ReactNode;
 }
-export declare function EntityAvatar({ label, glyph, emoji, icon: IconComponent, size, className, }: EntityAvatarProps): import("react").JSX.Element;
+export declare function EntityAvatar({ hint, label, glyph, emoji, icon: IconComponent, size, className, }: EntityAvatarProps): import("react").JSX.Element;
 export {};

package/dist/primitives/entity-avatar.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Hint } from './hint.js';
 import { emojiTint } from './emoji-tint.js';
 import { glyphFace } from './glyph-face.js';
 import { glyphForeground, glyphTint } from './glyph-tint.js';
@@ -48,12 +49,12 @@ function resolveGlyph(glyph) {
     const GlyphComponent = glyphFace(glyph.name);
     return GlyphComponent ? { GlyphComponent, color: glyph.color } : null;
 }
-export function EntityAvatar({ label, glyph, emoji, icon: IconComponent, size = 'md', className, }) {
+export function EntityAvatar({ hint, label, glyph, emoji, icon: IconComponent, size = 'md', className, }) {
     const sizes = SIZE_MAP[size];
     const initial = (label?.trim()?.charAt(0) || '?').toUpperCase();
     const chalk = chalkColors(`${label?.trim()}` || initial);
     const resolvedGlyph = resolveGlyph(glyph);
-    return (_jsx("span", { "data-slot": "entity-avatar", 
+    const tile = (_jsx("span", { "data-slot": "entity-avatar", 
         // chalkColors() is an inline style, so it beats any class a caller
         // passes. A glyph or an emoji is already the colour — sitting either on
         // a saturated hash-derived pastel reads as noise, and in dark mode that
@@ -103,4 +104,5 @@ export function EntityAvatar({ label, glyph, emoji, icon: IconComponent, size =
         // before the label that says the same thing. Same treatment as the
         // picker trigger in packages/ui/src/workspace/projects/modal/project-icon-field.tsx.
         _jsx("span", { "aria-hidden": true, className: "leading-none", children: emoji })) : IconComponent ? (_jsx(IconComponent, { className: sizes.icon })) : (initial) }));
+    return hint ? (_jsx(Hint, { side: "top", sideOffset: 6, alignOffset: 0, label: hint, children: tile })) : (tile);
 }

package/dist/primitives/mermaid-renderer.d.ts

@@ -8,6 +8,8 @@ interface MermaidRendererProps {
      * still for `CODE_SETTLE_MS`, not once per streamed token.
      */
     isStreaming?: boolean;
+    /** Extra controls beside copy and fullscreen, shown on hover (e.g. "Edit diagram"). */
+    actions?: React.ReactNode;
 }
 export declare const MermaidRenderer: React.FC<MermaidRendererProps>;
 export {};

package/dist/primitives/mermaid-renderer.js

@@ -11,7 +11,7 @@ import { cn } from '../lib/utils.js';
 import { CheckIcon as Check, ArrowsOutSimpleIcon as Maximize2, ArrowCounterClockwiseIcon as RotateCcw, XIcon as X, MagnifyingGlassPlusIcon as ZoomIn, MagnifyingGlassMinusIcon as ZoomOut, } from '@phosphor-icons/react';
 import { Copy } from '../icons/copy.js';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-export const MermaidRenderer = React.memo(({ chart, className, enableFullscreen = true, isStreaming = false }) => {
+export const MermaidRenderer = React.memo(({ chart, className, enableFullscreen = true, isStreaming = false, actions }) => {
     const containerRef = useRef(null);
     const [error, setError] = useState(null);
     const [isLoading, setIsLoading] = useState(true);
@@ -234,26 +234,32 @@ export const MermaidRenderer = React.memo(({ chart, className, enableFullscreen
             display: block !important;
             margin: 0 auto !important;
           }
-          .mermaid-container .node {
-            fill: hsl(var(--card)) !important;
-            stroke: hsl(var(--foreground)) !important;
+          .mermaid-container .node :is(rect, polygon, circle, ellipse, path) {
+            fill: var(--card) !important;
+            stroke: var(--border) !important;
           }
-          .mermaid-container .cluster {
-            fill: hsl(var(--muted)) !important;
-            stroke: hsl(var(--foreground)) !important;
+          .mermaid-container .cluster rect {
+            fill: var(--muted) !important;
+            stroke: var(--border) !important;
           }
-          .mermaid-container text {
-            fill: hsl(var(--foreground)) !important;
-            font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif !important;
+          .mermaid-container :is(text, .nodeLabel, .edgeLabel, .label) {
+            fill: var(--foreground) !important;
+            color: var(--foreground) !important;
+            font-family: var(--font-sans) !important;
           }
-          .mermaid-container .edgePath {
-            stroke: hsl(var(--foreground)) !important;
+          .mermaid-container :is(.edgePath path, .flowchart-link) {
+            stroke: var(--muted-foreground) !important;
           }
-          .mermaid-container .marker {
-            fill: hsl(var(--foreground)) !important;
+          .mermaid-container :is(.marker, .arrowheadPath, .arrowMarkerPath) {
+            fill: var(--muted-foreground) !important;
+            stroke: var(--muted-foreground) !important;
+          }
+          .mermaid-container .edgeLabel :is(rect, p) {
+            background-color: var(--background) !important;
+            fill: var(--background) !important;
           }
         `,
-                } }), _jsxs("div", { className: cn('mermaid-container group bg-background relative my-4 w-full overflow-auto rounded-lg border', className), style: { minHeight: '200px' }, children: [_jsx("div", { className: "absolute top-2 right-2 z-10 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100", children: _jsxs(ButtonGroup, { children: [enableFullscreen && (_jsx(Hint, { label: "Fullscreen", side: "top", children: _jsx(Button, { variant: "outline", size: "icon-sm", onClick: handleFullscreenOpen, className: "bg-background/90 backdrop-blur-sm", "aria-label": "Open diagram fullscreen", children: _jsx(Maximize2, { className: "size-3.5" }) }) })), _jsx(Hint, { label: copied ? 'Copied' : 'Copy source', side: "top", children: _jsx(Button, { variant: "outline", size: "icon-sm", onClick: handleCopySource, className: "bg-background/90 backdrop-blur-sm", "aria-label": "Copy diagram source", children: copied ? (_jsx(Check, { className: "text-kortix-green size-3.5" })) : (_jsx(Copy, { className: "size-3.5" })) }) })] }) }), _jsx("div", { ref: containerRef, dangerouslySetInnerHTML: { __html: renderedContent } })] }), _jsx(Modal, { open: isFullscreenOpen, onOpenChange: setIsFullscreenOpen, children: _jsxs(ModalContent, { variant: "base", showCloseButton: false, className: "flex h-[90vh] flex-col space-y-0 overflow-hidden lg:h-[90vh] lg:max-w-7xl", closeButtonChildren: _jsxs(ButtonGroup, { children: [_jsx(Hint, { label: "Zoom in", side: "bottom", children: _jsx(Button, { variant: "outline", size: "icon", onClick: handleZoomIn, "aria-label": "Zoom in", children: _jsx(ZoomIn, { className: "size-4" }) }) }), _jsx(Hint, { label: "Zoom out", side: "bottom", children: _jsx(Button, { variant: "outline", size: "icon", onClick: handleZoomOut, "aria-label": "Zoom out", children: _jsx(ZoomOut, { className: "size-4" }) }) }), _jsx(Hint, { label: "Rotate", side: "bottom", children: _jsx(Button, { variant: "outline", size: "icon", onClick: handleRotate, "aria-label": "Rotate diagram", children: _jsx(RotateCcw, { className: "size-4" }) }) }), _jsx(ModalClose, { asChild: true, children: _jsx(Button, { variant: "outline", size: "icon", "aria-label": "Close", children: _jsx(X, { className: "size-4" }) }) })] }), children: [_jsx(ModalTitle, { className: "sr-only", children: "Diagram" }), _jsx(ModalBody, { className: "relative min-h-0 flex-1 space-y-0 p-0", children: _jsx("div", { ref: canvasRef, className: "bg-muted/10 absolute inset-0 touch-none overflow-hidden select-none", onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, style: { cursor: isDragging ? 'grabbing' : 'grab' }, children: renderedContent ? (_jsx("div", { className: "mermaid-container absolute inset-0 flex items-center justify-center", style: {
+                } }), _jsxs("div", { className: cn('mermaid-container group bg-background relative my-4 w-full overflow-auto rounded-lg border', className), children: [_jsx("div", { className: "absolute top-2 right-2 z-10 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100", children: _jsxs(ButtonGroup, { children: [actions, enableFullscreen && (_jsx(Hint, { label: "Fullscreen", side: "top", children: _jsx(Button, { variant: "outline", size: "icon-sm", onClick: handleFullscreenOpen, className: "bg-background/90 backdrop-blur-sm", "aria-label": "Open diagram fullscreen", children: _jsx(Maximize2, { className: "size-3.5" }) }) })), _jsx(Hint, { label: copied ? 'Copied' : 'Copy source', side: "top", children: _jsx(Button, { variant: "outline", size: "icon-sm", onClick: handleCopySource, className: "bg-background/90 backdrop-blur-sm", "aria-label": "Copy diagram source", children: copied ? (_jsx(Check, { className: "text-kortix-green size-3.5" })) : (_jsx(Copy, { className: "size-3.5" })) }) })] }) }), _jsx("div", { ref: containerRef, dangerouslySetInnerHTML: { __html: renderedContent } })] }), _jsx(Modal, { open: isFullscreenOpen, onOpenChange: setIsFullscreenOpen, children: _jsxs(ModalContent, { variant: "base", showCloseButton: false, className: "flex h-[90vh] flex-col space-y-0 overflow-hidden lg:h-[90vh] lg:max-w-7xl", closeButtonChildren: _jsxs(ButtonGroup, { children: [_jsx(Hint, { label: "Zoom in", side: "bottom", children: _jsx(Button, { variant: "outline", size: "icon", onClick: handleZoomIn, "aria-label": "Zoom in", children: _jsx(ZoomIn, { className: "size-4" }) }) }), _jsx(Hint, { label: "Zoom out", side: "bottom", children: _jsx(Button, { variant: "outline", size: "icon", onClick: handleZoomOut, "aria-label": "Zoom out", children: _jsx(ZoomOut, { className: "size-4" }) }) }), _jsx(Hint, { label: "Rotate", side: "bottom", children: _jsx(Button, { variant: "outline", size: "icon", onClick: handleRotate, "aria-label": "Rotate diagram", children: _jsx(RotateCcw, { className: "size-4" }) }) }), _jsx(ModalClose, { asChild: true, children: _jsx(Button, { variant: "outline", size: "icon", "aria-label": "Close", children: _jsx(X, { className: "size-4" }) }) })] }), children: [_jsx(ModalTitle, { className: "sr-only", children: "Diagram" }), _jsx(ModalBody, { className: "relative min-h-0 flex-1 space-y-0 p-0", children: _jsx("div", { ref: canvasRef, className: "bg-muted/10 absolute inset-0 touch-none overflow-hidden select-none", onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, style: { cursor: isDragging ? 'grabbing' : 'grab' }, children: renderedContent ? (_jsx("div", { className: "mermaid-container absolute inset-0 flex items-center justify-center", style: {
                                         transform: `translate(${panOffset.x}px, ${panOffset.y}px) scale(${zoom}) rotate(${rotation}deg)`,
                                         transformOrigin: 'center center',
                                         transition: isDragging ? 'none' : 'transform 0.15s ease-out',

package/dist/primitives/resizable.js

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import * as ResizablePrimitive from 'react-resizable-panels';
 import { cn } from '../lib/utils.js';
+import { RESIZE_SEAM_CLASS } from './resize-seam.js';
 function ResizablePanelGroup({ className, ...props }) {
     return (_jsx(ResizablePrimitive.PanelGroup, { "data-slot": "resizable-panel-group", className: cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className), ...props }));
 }
@@ -11,6 +12,10 @@ const ResizablePanel = React.forwardRef((props, ref) => {
 });
 ResizablePanel.displayName = 'ResizablePanel';
 function ResizableHandle({ withHandle, className, ...props }) {
-    return (_jsx(ResizablePrimitive.PanelResizeHandle, { "data-slot": "resizable-handle", className: cn('focus-visible:ring-ring relative flex cursor-col-resize items-center justify-center focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:cursor-row-resize [&[data-panel-group-direction=vertical]>div]:rotate-90', className), ...props, children: withHandle && (_jsx("div", { className: "group z-10 flex cursor-col-resize items-center justify-center", children: _jsx("span", { className: "bg-muted-foreground/40 group-hover:bg-muted-foreground/70 h-[15px] w-[3px] rounded-full transition-colors" }) })) }));
+    return (_jsx(ResizablePrimitive.PanelResizeHandle, { "data-slot": "resizable-handle", className: cn('relative flex cursor-col-resize items-center justify-center focus-visible:outline-hidden data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:cursor-row-resize [&[data-panel-group-direction=vertical]>div]:rotate-90', 
+        // The sidebar rail's seam on hover, keyboard focus and drag: one look
+        // for every drag-to-resize edge. Horizontal groups only; a vertical
+        // handle keeps its plain row cursor.
+        RESIZE_SEAM_CLASS, 'data-[panel-group-direction=vertical]:before:hidden', 'data-[resize-handle-state=hover]:before:opacity-100 data-[resize-handle-state=drag]:before:opacity-100 focus-visible:before:opacity-100', className), ...props, children: withHandle && (_jsx("div", { className: "group z-10 flex cursor-col-resize items-center justify-center", children: _jsx("span", { className: "bg-muted-foreground/40 group-hover:bg-muted-foreground/70 h-[15px] w-[3px] rounded-full transition-colors" }) })) }));
 }
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/dist/primitives/resize-seam.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The resize seam: a 2px `kortix-base` line on a drag edge, tapered at both
+ * ends and faded top and bottom, so it reads as a seam, not a border. Drawn by
+ * `before:`, so a caller keeps `after:` for its hit strip. Hidden at rest; the
+ * caller reveals it (`before:opacity-100`) on hover, focus and drag. Opacity
+ * only: a width or position transition would animate layout on hover.
+ *
+ * The sidebar rail (`sidebar-panel.tsx`) and every `ResizableHandle` draw it,
+ * so every drag-to-resize edge in the app looks the same.
+ */
+export declare const RESIZE_SEAM_CLASS: string;

package/dist/primitives/resize-seam.js

@@ -0,0 +1,12 @@
+import { cn } from '../lib/utils.js';
+/**
+ * The resize seam: a 2px `kortix-base` line on a drag edge, tapered at both
+ * ends and faded top and bottom, so it reads as a seam, not a border. Drawn by
+ * `before:`, so a caller keeps `after:` for its hit strip. Hidden at rest; the
+ * caller reveals it (`before:opacity-100`) on hover, focus and drag. Opacity
+ * only: a width or position transition would animate layout on hover.
+ *
+ * The sidebar rail (`sidebar-panel.tsx`) and every `ResizableHandle` draw it,
+ * so every drag-to-resize edge in the app looks the same.
+ */
+export const RESIZE_SEAM_CLASS = cn('before:pointer-events-none before:absolute before:inset-y-0 before:left-1/2 before:z-10 before:w-[2px] before:-translate-x-1/2 before:opacity-0', 'before:bg-kortix-base before:transition-opacity before:duration-fast before:ease-out', 'before:[clip-path:polygon(calc(50%-0.0625rem)_0%,calc(50%+0.0625rem)_0%,calc(50%+0.125rem)_50%,calc(50%+0.0625rem)_100%,calc(50%-0.0625rem)_100%,calc(50%-0.125rem)_50%)]', 'before:[mask-image:linear-gradient(to_bottom,transparent,black_15%,black_85%,transparent)]', 'motion-reduce:before:transition-none');

package/dist/primitives/sidebar-panel.js

@@ -6,6 +6,7 @@ import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from
 import { SIDEBAR_RESIZE_STEP_COARSE_PX, SIDEBAR_RESIZE_STEP_PX, SIDEBAR_UNDOCK_MS, SIDEBAR_WIDTH_MOBILE, useSidebar, } from './sidebar-context.js';
 import { SIDEBAR_MAX_WIDTH_PX, SIDEBAR_MIN_WIDTH_PX, SIDEBAR_WIDTH_PX, clampSidebarWidth, } from './sidebar-width.js';
 import { cn } from '../lib/utils.js';
+import { RESIZE_SEAM_CLASS } from './resize-seam.js';
 import { SidebarGlyph as PanelLeftIcon } from '../icons/sidebar-toggle.js';
 function Sidebar({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, ...props }) {
     const { isMobile, state, openMobile, setOpenMobile, peek, peekEnter, peekLeave, instantToggle } = useSidebar();
@@ -251,13 +252,9 @@ function SidebarRail({ className, ...props }) {
                 setWidth(SIDEBAR_WIDTH_PX);
             }
         }, className: cn('absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 cursor-col-resize touch-none outline-none select-none group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex', 
-        // The hairline is a pseudo-element so the 16px hit area stays 16px
-        // (well over the 8px a pointer needs) while the visible line stays 2px.
-        // Opacity only — a width/position transition here would animate layout
-        // on hover, on an element that sits over the content pane.
-        'after:pointer-events-none after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] after:-translate-x-1/2 after:opacity-0', 'after:bg-kortix-base after:transition-opacity after:duration-fast after:ease-out', 'hover:after:opacity-100 focus-visible:after:opacity-100 data-[resizing]:after:opacity-100', 
-        // Tapered top and bottom so the line reads as a seam, not a border.
-        'after:[clip-path:polygon(calc(50%-0.0625rem)_0%,calc(50%+0.0625rem)_0%,calc(50%+0.125rem)_50%,calc(50%+0.0625rem)_100%,calc(50%-0.0625rem)_100%,calc(50%-0.125rem)_50%)]', 'after:[mask-image:linear-gradient(to_bottom,transparent,black_15%,black_85%,transparent)]', 'motion-reduce:after:transition-none', className), ...props }));
+        // The seam is a pseudo-element so the 16px hit area stays 16px (well
+        // over the 8px a pointer needs) while the visible line stays 2px.
+        RESIZE_SEAM_CLASS, 'hover:before:opacity-100 focus-visible:before:opacity-100 data-[resizing]:before:opacity-100', className), ...props }));
 }
 function SidebarInset({ className, ...props }) {
     return (_jsx("main", { "data-slot": "sidebar-inset", className: cn('bg-background relative flex w-full flex-1 flex-col overflow-hidden', 'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2', className), ...props }));

package/dist/primitives/tabs.d.ts

@@ -26,6 +26,19 @@ type TabsUnderlineSize = 'xs' | 'sm' | 'md' | 'lg';
  * never segmented.
  */
 type TabsListType = 'default' | 'underline' | 'segmented';
+/**
+ * Segmented track + chip. Radii are concentric: the track is `rounded-md` (8px)
+ * with 2px of padding, so the chip is `rounded-sm` (6px). The chip lifts with a
+ * hairline ring plus `shadow-xs` — raised, not bordered, so it reads as the
+ * selected thing in both themes.
+ *
+ * The padding is `p-[2px]`, not `p-0.5`: `--spacing` is 0.23rem, so `p-0.5` is
+ * 1.84px. The chip's 1px ring leaves 0.84px of track showing, and a fraction of
+ * a pixel rounds differently on each side — 1px of track on one end and none on
+ * the other at 1x. A whole 2px leaves exactly 1px on every side.
+ */
+declare const tabsSegmentedTrackClasses = "bg-muted rounded-md p-[2px]";
+declare const tabsSegmentedChipClasses = "bg-popover ring-border rounded-sm shadow-xs ring-1";
 declare function Tabs({ className, value, defaultValue, onValueChange, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element;
 interface TabsListProps extends React.ComponentProps<typeof TabsPrimitive.List> {
     type?: TabsListType;
@@ -69,5 +82,5 @@ declare function TabsTriggerCompact({ className, variant, value, ...props }: Rea
 declare function FilterBar({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 /** Standalone filter pill — works WITHOUT a <Tabs> root. Pair with FilterBar. */
 declare function FilterBarItem({ className, ...props }: React.ComponentProps<'button'>): React.JSX.Element;
-export { FilterBar, FilterBarItem, Tabs, TabsContent, TabsList, TabsListCompact, TabsTrigger, TabsTriggerCompact, tabsTriggerHeightVariants, tabsTriggerPaddingVariants, tabsTriggerTextVariants, };
+export { tabsSegmentedChipClasses, tabsSegmentedTrackClasses, FilterBar, FilterBarItem, Tabs, TabsContent, TabsList, TabsListCompact, TabsTrigger, TabsTriggerCompact, tabsTriggerHeightVariants, tabsTriggerPaddingVariants, tabsTriggerTextVariants, };
 export type { TabsListType, TabsSize, TabsTriggerSize, TabsTriggerVariant, TabsUnderlineSize };

package/dist/primitives/tabs.js

@@ -204,4 +204,4 @@ function FilterBar({ className, ...props }) {
 function FilterBarItem({ className, ...props }) {
     return (_jsx("button", { "data-slot": "filter-bar-item", role: "tab", type: "button", className: cn('inline-flex h-[calc(100%-4px)] flex-1 cursor-pointer items-center justify-center gap-1.5 border border-transparent px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors duration-normal', 'text-muted-foreground/60 hover:text-foreground/80', 'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:ring-foreground/6 data-[state=active]:shadow-sm data-[state=active]:ring-1', 'disabled:pointer-events-none disabled:opacity-50', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", className), ...props }));
 }
-export { FilterBar, FilterBarItem, Tabs, TabsContent, TabsList, TabsListCompact, TabsTrigger, TabsTriggerCompact, tabsTriggerHeightVariants, tabsTriggerPaddingVariants, tabsTriggerTextVariants, };
+export { tabsSegmentedChipClasses, tabsSegmentedTrackClasses, FilterBar, FilterBarItem, Tabs, TabsContent, TabsList, TabsListCompact, TabsTrigger, TabsTriggerCompact, tabsTriggerHeightVariants, tabsTriggerPaddingVariants, tabsTriggerTextVariants, };

package/dist/primitives/user-avatar.d.ts

@@ -42,6 +42,8 @@ export interface UserAvatarProps {
     className?: string;
     ring?: boolean;
     variant?: 'default' | 'primary';
+    /** Shows on hover, through `Hint`: usually the person's name or email. */
+    hint?: React.ReactNode;
 }
-export declare function UserAvatar({ email, name, avatarUrl, size, variant, className, ring, }: UserAvatarProps): React.JSX.Element;
+export declare function UserAvatar({ hint, email, name, avatarUrl, size, variant, className, ring, }: UserAvatarProps): React.JSX.Element;
 export {};

package/dist/primitives/user-avatar.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Hint } from './hint.js';
 import { Avatar, AvatarFallback, AvatarImage } from './avatar.js';
 import { cn } from '../lib/utils.js';
 import { AVATAR_INK, avatarFill } from '../_vendor/kortix-shared.js';
@@ -34,13 +35,14 @@ const SIZE_MAP = {
     lg: { box: 'size-10', text: 'text-sm', initials: 2 },
     xl: { box: 'size-14', text: 'text-base', initials: 2 },
 };
-export function UserAvatar({ email, name, avatarUrl, size = 'md', variant = 'default', className, ring = false, }) {
+export function UserAvatar({ hint, email, name, avatarUrl, size = 'md', variant = 'default', className, ring = false, }) {
     const sizes = SIZE_MAP[size] ?? SIZE_MAP.md;
     const initials = React.useMemo(() => initialsFromIdentity(name ?? undefined, email || '').slice(0, sizes.initials), [name, email, sizes.initials]);
     // Avatar v2: a solid fill keyed on the email, so a rename keeps the colour.
     const fill = avatarFill(email || name || '');
-    return (_jsxs(Avatar, { className: cn(sizes.box, 'shrink-0 overflow-hidden rounded-sm p-0 font-medium', ring && 'ring-background ring-2', 
+    const avatar = (_jsxs(Avatar, { className: cn(sizes.box, 'shrink-0 overflow-hidden rounded-sm p-0 font-medium', ring && 'ring-background ring-2', 
         // A photo keeps an edge on a light page: a 1px inset hairline over it.
         avatarUrl &&
             'after:ring-border after:pointer-events-none after:absolute after:inset-0 after:rounded-sm after:ring-1 after:ring-inset', variant === 'primary' && 'bg-primary text-primary-foreground', className), children: [avatarUrl ? _jsx(AvatarImage, { src: avatarUrl, alt: name || email }) : null, _jsx(AvatarFallback, { className: cn('rounded-sm font-medium', sizes.text), style: { backgroundColor: fill, color: AVATAR_INK }, children: initials || '?' })] }));
+    return hint ? (_jsx(Hint, { side: "top", sideOffset: 6, alignOffset: 0, label: hint, children: avatar })) : (avatar);
 }

package/dist/providers/ui-provider.d.ts

@@ -145,7 +145,7 @@ export interface UiHostConfig {
     terminalEnabled: boolean;
     /**
      * The Terminal panel offers "Connect from your machine": the deployment's
-     * CLI installer (`<origin>/install`) and `kortix sessions connect`. A host
+     * CLI installer (`<origin>/install`) and `kortix sessions shell`. A host
      * that serves no installer and ships no Kortix CLI sets false, and the bar
      * is hidden. Default: true.
      */
@@ -304,6 +304,15 @@ export interface UiHostComponents {
         /** False or missing: read only. */
         canWrite?: boolean;
     }>;
+    /**
+     * The full artifact viewer (doc editor, history, share, PDF export) for a
+     * session panel. Without it, the panel shows the artifact's page read-only.
+     */
+    ArtifactViewer?: React.ComponentType<{
+        projectId: string;
+        artifactId: string;
+        onClose: () => void;
+    }>;
     /** The decorative background of an empty session. Without it, the plain surface. */
     Wallpaper?: React.ComponentType;
     /**

package/dist/session/composer/ComposerAboveCard.d.ts

@@ -20,4 +20,4 @@ export interface ComposerAboveCardDerived {
     handleRemoveQuote: (id: string) => void;
 }
 export type ComposerAboveCardProps = SessionChatInputProps & ComposerAboveCardDerived;
-export declare function ComposerAboveCard({ dockId, quotes, quoteListLabels, handleRemoveQuote, aboveSlot, inputSlot, notice, onNoticeRetry, onModelChange, slashMenuPlacement, questionActive, }: ComposerAboveCardProps): import("react").JSX.Element;
+export declare function ComposerAboveCard({ dockId, quotes, quoteListLabels, handleRemoveQuote, aboveSlot, inputSlot, notice, noticeAsleep, onNoticeRetry, onModelChange, slashMenuPlacement, questionActive, }: ComposerAboveCardProps): import("react").JSX.Element;

package/dist/session/composer/ComposerAboveCard.js

@@ -14,7 +14,7 @@ import { QuoteList } from './quote-list.js';
  * keeps only the side ring, so no ring line crosses a seam.
  */
 const DOCKED_MIDDLE_LAYER_CLASS = 'ring-muted/15 rounded-t-none ring-3 [clip-path:inset(0_-8px_0_-8px)]';
-export function ComposerAboveCard({ dockId, quotes, quoteListLabels, handleRemoveQuote, aboveSlot, inputSlot, notice = null, onNoticeRetry, onModelChange, slashMenuPlacement = 'above', questionActive = false, }) {
+export function ComposerAboveCard({ dockId, quotes, quoteListLabels, handleRemoveQuote, aboveSlot, inputSlot, notice = null, noticeAsleep, onNoticeRetry, onModelChange, slashMenuPlacement = 'above', questionActive = false, }) {
     const showQueueStrip = Boolean(inputSlot);
     return (_jsxs(_Fragment, { children: [slashMenuPlacement === 'above' && _jsx("div", { id: dockId }), _jsx("div", { className: "mb-2 w-full empty:hidden", children: _jsx(QuoteList, { quotes: quotes, labels: quoteListLabels, onRemove: handleRemoveQuote }, quotes.length === 0 ? 'empty' : 'quotes') }), aboveSlot && _jsx("div", { className: "mb-2 w-full empty:hidden", children: aboveSlot }), (notice || showQueueStrip) && (_jsxs("div", { "data-composer-stack": true, className: "relative isolate flex w-full flex-col items-center justify-center [&>[data-composer-strip]:not(:empty)~*]:rounded-t-none", children: [showQueueStrip && (
                     // A pending question also carries a ring around the whole
@@ -24,5 +24,5 @@ export function ComposerAboveCard({ dockId, quotes, quoteListLabels, handleRemov
                         // Rounded when topmost; square under a visible strip (the
                         // wrapper's sibling rule). Under a docked question it also
                         // carries the side ring.
-                        className: cn('bg-sidebar border-border flex w-full items-center gap-2 rounded-t-xl border border-b-0 px-3 py-1.5', questionActive && DOCKED_MIDDLE_LAYER_CLASS), children: [notice === SESSION_NOTICE.idle ? (_jsx(MoonIcon, { className: "text-muted-foreground size-3.5 shrink-0", "aria-hidden": "true" })) : (_jsx(Loading, { className: "size-3.5 shrink-0" })), _jsx("span", { className: "text-muted-foreground min-w-0 flex-1 truncate text-xs", children: notice }), onNoticeRetry && (_jsx(Button, { type: "button", variant: "ghost", size: "xs", className: "text-muted-foreground hover:text-foreground h-auto shrink-0 px-1.5 py-0.5 text-xs", onClick: onNoticeRetry, children: 'Retry' }))] }))] }))] }));
+                        className: cn('bg-sidebar border-border flex w-full items-center gap-2 rounded-t-xl border border-b-0 px-3 py-1.5', questionActive && DOCKED_MIDDLE_LAYER_CLASS), children: [(noticeAsleep ?? notice === SESSION_NOTICE.idle) ? (_jsx(MoonIcon, { className: "text-muted-foreground size-3.5 shrink-0", "aria-hidden": "true" })) : (_jsx(Loading, { className: "size-3.5 shrink-0" })), _jsx("span", { className: "text-muted-foreground min-w-0 flex-1 truncate text-xs", children: notice }), onNoticeRetry && (_jsx(Button, { type: "button", variant: "ghost", size: "xs", className: "text-muted-foreground hover:text-foreground h-auto shrink-0 px-1.5 py-0.5 text-xs", onClick: onNoticeRetry, children: 'Retry' }))] }))] }))] }));
 }

package/dist/session/composer/ComposerCard.d.ts

@@ -71,4 +71,4 @@ export interface ComposerCardDerived {
     noModelsConnected: boolean;
 }
 export type ComposerCardProps = SessionChatInputProps & ComposerCardDerived;
-export declare function ComposerCard({ tHardcodedUi, isDragOver, handleDragEnter, handleDragOver, handleDragLeave, handleDropFiles, attachedFiles, promptAttachmentItems, removeAttachedFile, retryAttachedFile, pastes, removePaste, onOpenPastedContent, commandAttachmentPlan, editorDisabled, editorRef, setEditorRef, editorPlaceholder, animatePlaceholder, handleSubmit, handleArrowUpAtStart, setIsEmpty, handleDocChange, allSessions, slashActions, handleSelectAction, dockId, setMenuOpen, fileInputRef, handleFileSelect, sessionId, handleAttachClick, primaryAgents, availableSelectedModel, agentMenuOpen, setAgentMenuOpen, modelMenuOpen, setModelMenuOpen, reasoningMenuOpen, setReasoningMenuOpen, isEmpty, canSubmit, submitDisabled, attachmentFailed, modelRejectingImages, imagesUnsupportedReason, modelUnavailable, agentUnavailable, noModelsConnected, agents, commands, slashFiles, models, notice, disabled, lockForQuestion, lockForApproval, questionButtonLabel, questionActive, submitLabel, questionCanAct, escCount, isBusy, isSending, onStop, stopDisabled, canStop, modelsLoading, modelRequired, onModelChange, modelDefaultControls, providers, variants, selectedVariant, onVariantChange, projectId, toolbarSlot, rewind, selectedAgent, onAgentChange, noAccessibleAgents, onContextClick, messages, underbarPlacement, slashMenuPlacement, cardClassName, onArrowUpAtStart, }: ComposerCardProps): import("react").JSX.Element;
+export declare function ComposerCard({ tHardcodedUi, isDragOver, handleDragEnter, handleDragOver, handleDragLeave, handleDropFiles, attachedFiles, promptAttachmentItems, removeAttachedFile, retryAttachedFile, pastes, removePaste, onOpenPastedContent, commandAttachmentPlan, editorDisabled, editorRef, setEditorRef, editorPlaceholder, animatePlaceholder, handleSubmit, handleArrowUpAtStart, setIsEmpty, handleDocChange, allSessions, slashActions, handleSelectAction, dockId, setMenuOpen, fileInputRef, handleFileSelect, sessionId, handleAttachClick, primaryAgents, availableSelectedModel, agentMenuOpen, setAgentMenuOpen, modelMenuOpen, setModelMenuOpen, reasoningMenuOpen, setReasoningMenuOpen, isEmpty, canSubmit, submitDisabled, attachmentFailed, modelRejectingImages, imagesUnsupportedReason, modelUnavailable, agentUnavailable, noModelsConnected, agents, commands, slashFiles, models, notice, disabled, lockForQuestion, lockForApproval, questionButtonLabel, questionActive, submitLabel, questionCanAct, escCount, isBusy, isSending, onStop, stopDisabled, canStop, modelsLoading, modelRequired, onModelChange, modelDefaultControls, providers, variants, selectedVariant, onVariantChange, projectId, toolbarSlot, rewind, selectedAgent, onAgentChange, noAccessibleAgents, onContextClick, messages, underbarPlacement, agentPickerCompact, slashMenuPlacement, cardClassName, onArrowUpAtStart, }: ComposerCardProps): import("react").JSX.Element;

package/dist/session/composer/ComposerCard.js

@@ -21,7 +21,7 @@ export function ComposerCard({ tHardcodedUi, isDragOver, handleDragEnter, handle
 // Raw props the moved JSX reads; `{...props}` carries the rest. These
 // defaults mirror `ComposerImpl`'s, because the spread passes the raw
 // values, not the component's defaulted locals.
-agents = EMPTY_AGENTS, commands = EMPTY_COMMANDS, slashFiles = EMPTY_SLASH_FILES, models = EMPTY_MODELS, notice = null, disabled = false, lockForQuestion = false, lockForApproval = false, questionButtonLabel = null, questionActive = false, submitLabel = null, questionCanAct = true, escCount = 0, isBusy = false, isSending = false, onStop, stopDisabled = false, canStop = true, modelsLoading = false, modelRequired = false, onModelChange, modelDefaultControls, providers, variants = EMPTY_VARIANTS, selectedVariant = null, onVariantChange, projectId, toolbarSlot, rewind, selectedAgent = null, onAgentChange, noAccessibleAgents = false, onContextClick, messages, underbarPlacement = 'below', slashMenuPlacement = 'above', cardClassName, onArrowUpAtStart, }) {
+agents = EMPTY_AGENTS, commands = EMPTY_COMMANDS, slashFiles = EMPTY_SLASH_FILES, models = EMPTY_MODELS, notice = null, disabled = false, lockForQuestion = false, lockForApproval = false, questionButtonLabel = null, questionActive = false, submitLabel = null, questionCanAct = true, escCount = 0, isBusy = false, isSending = false, onStop, stopDisabled = false, canStop = true, modelsLoading = false, modelRequired = false, onModelChange, modelDefaultControls, providers, variants = EMPTY_VARIANTS, selectedVariant = null, onVariantChange, projectId, toolbarSlot, rewind, selectedAgent = null, onAgentChange, noAccessibleAgents = false, onContextClick, messages, underbarPlacement = 'below', agentPickerCompact = false, slashMenuPlacement = 'above', cardClassName, onArrowUpAtStart, }) {
     const cardRef = useRef(null);
     const { attachAccept } = useUiHostConfig();
     const inlineUnderbar = underbarPlacement === 'inline';
@@ -33,7 +33,7 @@ agents = EMPTY_AGENTS, commands = EMPTY_COMMANDS, slashFiles = EMPTY_SLASH_FILES
                 'bg-background border-border relative isolate z-10 w-full rounded-xl border', 'pt-3', 
                 // The drag border swaps colour AND gains a ring. Without this it
                 // snapped: a hard flash the moment a file crossed the card.
-                'duration-normal ease-default transition-[border-color]', 'motion-reduce:transition-none', cardClassName, isDragOver && 'border-kortix-blue/80 ring-primary/40 border ring', 
+                'duration-normal ease-default transition-[border-color]', 'motion-reduce:transition-none', cardClassName, isDragOver && 'border-ring ring-ring/15 border ring', 
                 // A layer above (`ComposerAboveCard`) owns the top corners: a notice,
                 // or a visible strip (known only to CSS, through `data-composer-stack`).
                 (notice || questionActive) &&
@@ -51,7 +51,7 @@ agents = EMPTY_AGENTS, commands = EMPTY_COMMANDS, slashFiles = EMPTY_SLASH_FILES
                                             // the div and immediately fights the caret we are placing.
                                             e.preventDefault();
                                             editorRef.current?.focus();
-                                        }, children: [_jsx(AnimatedComposerPlaceholder, { placeholder: editorPlaceholder, active: animatePlaceholder }), _jsx(Suspense, { fallback: _jsx(ComposerEditorFallback, {}), children: _jsx(ComposerEditorLazy, { ref: setEditorRef, placeholder: animatePlaceholder ? '' : editorPlaceholder, disabled: editorDisabled, onSubmit: handleSubmit, onArrowUpAtStart: onArrowUpAtStart ? handleArrowUpAtStart : undefined, onEmptyChange: setIsEmpty, onDocChange: handleDocChange, agents: agents, sessions: allSessions ?? [], currentSessionId: sessionId, commands: commands, actions: slashActions, files: slashFiles, onSelectAction: handleSelectAction, slashDockSelector: `#${dockId}`, onMenuOpenChange: setMenuOpen }) })] }), _jsx("input", { ref: fileInputRef, type: "file", accept: attachAccept ?? DEFAULT_ATTACH_ACCEPT, multiple: true, className: "hidden", onChange: handleFileSelect }), _jsx(ComposerToolbar, { leading: inlineUnderbar ? (_jsx(ComposerUnderbar, { variant: "inline", onAttachClick: handleAttachClick, agents: primaryAgents, selectedAgent: selectedAgent, onAgentChange: onAgentChange, agentMenuOpen: agentMenuOpen, onAgentMenuOpenChange: setAgentMenuOpen, noAccessibleAgents: noAccessibleAgents, messages: messages, models: models, selectedModel: availableSelectedModel, onContextClick: onContextClick })) : null, modelsLoading: modelsLoading, models: models, selectedModel: availableSelectedModel, onModelChange: onModelChange, modelDefaultControls: modelDefaultControls, providers: providers, modelRequired: modelRequired, modelMenuOpen: modelMenuOpen, onModelMenuOpenChange: setModelMenuOpen, reasoningMenuOpen: reasoningMenuOpen, onReasoningMenuOpenChange: setReasoningMenuOpen, variants: variants, selectedVariant: selectedVariant, onVariantChange: onVariantChange, projectId: projectId, 
+                                        }, children: [_jsx(AnimatedComposerPlaceholder, { placeholder: editorPlaceholder, active: animatePlaceholder }), _jsx(Suspense, { fallback: _jsx(ComposerEditorFallback, {}), children: _jsx(ComposerEditorLazy, { ref: setEditorRef, placeholder: animatePlaceholder ? '' : editorPlaceholder, disabled: editorDisabled, onSubmit: handleSubmit, onArrowUpAtStart: onArrowUpAtStart ? handleArrowUpAtStart : undefined, onEmptyChange: setIsEmpty, onDocChange: handleDocChange, agents: agents, sessions: allSessions ?? [], currentSessionId: sessionId, commands: commands, actions: slashActions, files: slashFiles, onSelectAction: handleSelectAction, slashDockSelector: `#${dockId}`, onMenuOpenChange: setMenuOpen }) })] }), _jsx("input", { ref: fileInputRef, type: "file", accept: attachAccept ?? DEFAULT_ATTACH_ACCEPT, multiple: true, className: "hidden", onChange: handleFileSelect }), _jsx(ComposerToolbar, { leading: inlineUnderbar ? (_jsx(ComposerUnderbar, { variant: "inline", agentPickerCompact: agentPickerCompact, onAttachClick: handleAttachClick, agents: primaryAgents, selectedAgent: selectedAgent, onAgentChange: onAgentChange, agentMenuOpen: agentMenuOpen, onAgentMenuOpenChange: setAgentMenuOpen, noAccessibleAgents: noAccessibleAgents, messages: messages, models: models, selectedModel: availableSelectedModel, onContextClick: onContextClick })) : null, modelsLoading: modelsLoading, models: models, selectedModel: availableSelectedModel, onModelChange: onModelChange, modelDefaultControls: modelDefaultControls, providers: providers, modelRequired: modelRequired, modelMenuOpen: modelMenuOpen, onModelMenuOpenChange: setModelMenuOpen, reasoningMenuOpen: reasoningMenuOpen, onReasoningMenuOpenChange: setReasoningMenuOpen, variants: variants, selectedVariant: selectedVariant, onVariantChange: onVariantChange, projectId: projectId, 
                                         // Inline placement has no under-row, so the slot (the session
                                         // overrides gear, meta indicator) rides the toolbar itself. With
                                         // the 'below' placement the ComposerUnderbar further down renders