@kortix/ui 0.14.8 → 0.14.10

package/dist/markdown/setup-links/approval-decision.js

@@ -12,7 +12,7 @@ import { OutcomeTitle } from '../../internal/auth/auth-consent.js';
 import { Rise, StepHeader } from '../../internal/auth/auth-primitives.js';
 import { useTranslations } from '../../i18n/index.js';
 import { getApprovalLink, resolveApproval } from '@kortix/sdk';
-import { CheckCircleIcon, ClockIcon, EyeIcon, MinusCircleIcon, PencilSimpleIcon, UserIcon, WarningIcon, XCircleIcon, } from '@phosphor-icons/react';
+import { CheckCircleIcon, ClockIcon, EyeIcon, MinusCircleIcon, PencilSimpleIcon, ShieldCheckIcon, UserIcon, WarningIcon, XCircleIcon, } from '@phosphor-icons/react';
 import { UiLink as Link, useUiRouter } from '../../providers/ui-provider.js';
 import { useEffect, useState } from 'react';
 import { isApprovalExpiredError } from '../../internal/lib/approval-expired.js';
@@ -46,6 +46,7 @@ export function approvalIdentity(details) {
         connector: details.connector_name ??
             (details.connector ? details.connector.charAt(0).toUpperCase() + details.connector.slice(1) : null),
         action: actionLabel(details.action),
+        slug: details.connector ?? null,
         iconUrl: connectorLogoUrl(details),
     };
 }
@@ -202,6 +203,7 @@ export function ApprovalDecisionPanel({ details, outcome, busyDecision, error, o
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const tHardcodedUi = useTranslations('hardcodedUi');
     const t = useTranslations('hardcodedUi.approvalPage');
+    const tSets = useTranslations('connectorPolicySets');
     const priorityWord = useIssuePriorityWord();
     const now = useClock();
     const expiresAt = Date.parse(details.expires_at);
@@ -213,7 +215,9 @@ export function ApprovalDecisionPanel({ details, outcome, busyDecision, error, o
     const reviewable = approvalReviewable(details.args_preview, details.review_complete, details.resolved_preview);
     const label = resolvedLabel({
         status: expired ? 'expired' : details.status,
-        resolution: !details.pending && details.status === 'ok'
+        resolution: 
+        // `approved`: Kortix runs the held call; `ok`: an approve the caller repeats.
+        !details.pending && (details.status === 'ok' || details.status === 'approved')
             ? 'approve'
             : !details.pending && details.status === 'denied'
                 ? 'deny'
@@ -316,7 +320,9 @@ export function ApprovalDecisionPanel({ details, outcome, busyDecision, error, o
     const risk = details.risk === 'destructive' ? (_jsx(FactRow, { icon: _jsx(WarningIcon, { "aria-hidden": true, className: "text-kortix-red size-4" }), children: t('riskDestructive') })) : details.risk === 'write' ? (_jsx(FactRow, { icon: _jsx(PencilSimpleIcon, { "aria-hidden": true, className: "text-foreground size-4" }), children: t('riskWrite', { action: (readable ?? details.action).toLowerCase() }) })) : details.risk === 'read' ? (_jsx(FactRow, { icon: _jsx(EyeIcon, { "aria-hidden": true, className: "text-foreground size-4" }), children: t('riskRead') })) : null;
     const decidable = details.pending && !resolved && !!onDecision;
     const footer = error || expired || decidable || waiting;
-    return (_jsxs(Rise, { children: [_jsxs("div", { className: "flex flex-col gap-3 px-5 pt-5 pb-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", title: details.action, children: [_jsx(ConnectorAppMark, { name: connectorName ?? details.action, iconUrl: connectorLogoUrl(details), size: "md" }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("p", { className: "text-foreground truncate text-sm leading-5 font-medium", children: connectorName ?? readable ?? details.action }), connectorName ? (_jsx("p", { className: "text-muted-foreground truncate text-xs leading-4", children: readable ?? details.action })) : null] })] }), chip] }), _jsx("h2", { className: "text-foreground text-xl leading-snug font-semibold wrap-anywhere", children: headline }), _jsx(ApprovalAgentContext, { quote: true, context: details.approval_context })] }), showsPreview ? (_jsx("div", { className: "px-5", children: _jsx(ApprovalParameters, { native: true, action: details.action, argsPreview: details.args_preview, reviewComplete: details.review_complete !== false, resolvedPreview: details.resolved_preview, resolvedError: details.resolved_error, className: "overflow-hidden rounded-lg border" }) })) : null, _jsxs("div", { className: cn('flex flex-col gap-2 px-5 pb-4', showsPreview && 'pt-4'), children: [risk, _jsxs(FactRow, { muted: true, icon: _jsx(UserIcon, { "aria-hidden": true, className: "text-muted-foreground size-4" }), children: [asked, expiresWhen ? ` · ${t('expiresAt', { when: expiresWhen })}` : null] })] }), footer ? (_jsxs("div", { className: "border-border flex flex-col gap-3 border-t px-5 pt-4 pb-5", children: [error ? (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: error }) })) : null, expired ? (_jsxs(_Fragment, { children: [_jsx(Alert, { children: _jsx(AlertDescription, { children: tHardcodedUi('approvalPage.expiredHint') }) }), onDecision ? (_jsx(ApprovalDecisionActions, { onDecision: onDecision, disabled: true, sessionId: details.session_id, notePlaceholder: agent ? t('notePlaceholder', { agent }) : t('notePlaceholderAgent'), approveLabel: approveLabel, noteMinHeight: 80, className: "border-0 p-0" })) : null] })) : decidable && onDecision ? (_jsxs(_Fragment, { children: [reviewable ? null : (_jsx(Alert, { variant: "warning", children: _jsx(AlertDescription, { children: previewAuthorized
+    return (_jsxs(Rise, { children: [_jsxs("div", { className: "flex flex-col gap-3 px-5 pt-5 pb-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", title: details.action, children: [_jsx(ConnectorAppMark, { name: connectorName ?? details.action, slug: details.connector, iconUrl: connectorLogoUrl(details), size: "md" }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("p", { className: "text-foreground truncate text-sm leading-5 font-medium", children: connectorName ?? readable ?? details.action }), connectorName ? (_jsx("p", { className: "text-muted-foreground truncate text-xs leading-4", children: readable ?? details.action })) : null] })] }), chip] }), _jsx("h2", { className: "text-foreground text-xl leading-snug font-semibold wrap-anywhere", children: headline }), _jsx(ApprovalAgentContext, { quote: true, context: details.approval_context })] }), showsPreview ? (_jsx("div", { className: "px-5", children: _jsx(ApprovalParameters, { native: true, action: details.action, argsPreview: details.args_preview, reviewComplete: details.review_complete !== false, resolvedPreview: details.resolved_preview, resolvedError: details.resolved_error, className: "overflow-hidden rounded-lg border" }) })) : null, _jsxs("div", { className: cn('flex flex-col gap-2 px-5 pb-4', showsPreview && 'pt-4'), children: [risk, details.policy_set ? (_jsx(FactRow, { muted: true, icon: _jsx(ShieldCheckIcon, { "aria-hidden": true, className: "text-muted-foreground size-4" }), children: details.agent
+                            ? tSets('approvalSetAgent', { agent: details.agent, set: details.policy_set })
+                            : tSets('approvalSet', { set: details.policy_set }) })) : null, _jsxs(FactRow, { muted: true, icon: _jsx(UserIcon, { "aria-hidden": true, className: "text-muted-foreground size-4" }), children: [asked, expiresWhen ? ` · ${t('expiresAt', { when: expiresWhen })}` : null] })] }), footer ? (_jsxs("div", { className: "border-border flex flex-col gap-3 border-t px-5 pt-4 pb-5", children: [error ? (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: error }) })) : null, expired ? (_jsxs(_Fragment, { children: [_jsx(Alert, { children: _jsx(AlertDescription, { children: tHardcodedUi('approvalPage.expiredHint') }) }), onDecision ? (_jsx(ApprovalDecisionActions, { onDecision: onDecision, disabled: true, sessionId: details.session_id, notePlaceholder: agent ? t('notePlaceholder', { agent }) : t('notePlaceholderAgent'), approveLabel: approveLabel, noteMinHeight: 80, className: "border-0 p-0" })) : null] })) : decidable && onDecision ? (_jsxs(_Fragment, { children: [reviewable ? null : (_jsx(Alert, { variant: "warning", children: _jsx(AlertDescription, { children: previewAuthorized
                                         ? tI18nComplete.raw('text7c4a3e7e2251')
                                         : tI18nComplete.raw('textf7873b149941') }) })), _jsx(ApprovalDecisionActions, { onDecision: onDecision, busyDecision: busyDecision, approvable: reviewable, sessionId: details.session_id, notePlaceholder: agent ? t('notePlaceholder', { agent }) : t('notePlaceholderAgent'), approveLabel: approveLabel, noteMinHeight: 80, className: "border-0 p-0" })] })) : waiting ? (_jsx(ApprovalWaitingNotice, { dense: true, resolvers: resolvers })) : null] })) : null] }));
 }

package/dist/markdown/setup-links/connector-handshake.d.ts

@@ -19,8 +19,10 @@ declare const TILE_SIZE: {
  * not contain it: WebKit skips a rounded overflow clip for a composited child
  * (the card animates in), and the logo's square corners painted past the edge.
  */
-export declare function ConnectorAppMark({ name, iconUrl, size, }: {
+export declare function ConnectorAppMark({ name: _name, slug, iconUrl, size, }: {
     name: string;
+    /** The connector's slug, so a Kortix-built connector shows its own mark. */
+    slug?: string | null;
     iconUrl: string | null | undefined;
     size?: keyof typeof TILE_SIZE;
 }): React.JSX.Element;

package/dist/markdown/setup-links/connector-handshake.js

@@ -1,11 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { EntityAvatar } from '../../primitives/entity-avatar.js';
+import { ConnectorLogo } from '../../internal/connector-logo/connector-logo.js';
 import { KortixLogo } from '../../primitives/kortix-logo.js';
 import { Skeleton } from '../../primitives/skeleton.js';
 import { cn } from '../../lib/utils.js';
 import { CheckIcon } from '@phosphor-icons/react';
-import { useState } from 'react';
 /**
  * The logo tile is white in both themes. Catalogue logos are third-party art
  * drawn for a white ground: on the dark `bg-popover` a black glyph (Notion,
@@ -13,6 +12,8 @@ import { useState } from 'react';
  * exception, kept here as a named constant rather than inline.
  */
 const LOGO_TILE_BACKGROUND = 'bg-white';
+/** The Kortix tile is the light variant in both themes: white ground, black mark, no edge. */
+const KORTIX_TILE_COLORS = 'bg-white text-black';
 const TILE_SIZE = {
     xl: 'size-14 rounded-xl',
     lg: 'size-10 rounded-md',
@@ -41,15 +42,13 @@ function HandshakeTile({ size, className, children, }) {
  * not contain it: WebKit skips a rounded overflow clip for a composited child
  * (the card animates in), and the logo's square corners painted past the edge.
  */
-export function ConnectorAppMark({ name, iconUrl, size = 'md', }) {
-    const [broken, setBroken] = useState(false);
-    if (iconUrl === undefined) {
+export function ConnectorAppMark({ name: _name, slug, iconUrl, size = 'md', }) {
+    if (iconUrl === undefined && !slug) {
         return _jsx(Skeleton, { "aria-hidden": true, className: cn('shrink-0 py-0', TILE_SIZE[size]) });
     }
-    if (!iconUrl || broken) {
-        return _jsx(EntityAvatar, { label: name, size: size, className: size === 'xl' ? 'rounded-xl' : undefined });
-    }
-    return (_jsx(HandshakeTile, { size: size, className: LOGO_TILE_BACKGROUND, children: _jsx("img", { src: iconUrl, alt: "", referrerPolicy: "no-referrer", draggable: false, onError: () => setBroken(true), className: cn('size-full object-contain select-none', TILE_SIZE[size]) }) }));
+    // The one connector logo (`ConnectorLogo`), so a connect card, an approval and the
+    // connector's own page show the same mark.
+    return _jsx(ConnectorLogo, { source: { slug, icon: iconUrl ?? null }, size: size });
 }
 /** The Kortix glyph inside its tile, per tile size. */
 const KORTIX_MARK_PX = { md: 14, lg: 18, xl: 24 };
@@ -67,5 +66,8 @@ const KORTIX_MARK_PX = { md: 14, lg: 18, xl: 24 };
  * away and the app logo alone leads, which gives the title the room it needs.
  */
 export function ConnectorHandshake({ name, iconUrl, connected = false, size = 'md', collapsible = true, mark, }) {
-    return (_jsxs("span", { className: cn('flex shrink-0 items-center', size === 'xl' ? 'gap-3' : 'gap-1.5'), "aria-hidden": true, children: [_jsx(HandshakeTile, { size: size, className: cn('bg-background text-foreground ring-border ring-1 ring-inset', collapsible && 'hidden @md/connect:flex'), children: _jsx(KortixLogo, { variant: "icon", size: KORTIX_MARK_PX[size] }) }), _jsxs("svg", { width: size === 'xl' ? 36 : 24, height: size === 'xl' ? 9 : 6, viewBox: "0 0 24 6", className: cn('text-muted-foreground shrink-0', collapsible && 'hidden @md/connect:block'), fill: "currentColor", children: [_jsx("circle", { cx: "2", cy: "3", r: "1", opacity: "0.3" }), _jsx("circle", { cx: "7", cy: "3", r: "1.25", opacity: "0.7" }), _jsx("circle", { cx: "12", cy: "3", r: "1.75" }), _jsx("circle", { cx: "17", cy: "3", r: "1.25", opacity: "0.7" }), _jsx("circle", { cx: "22", cy: "3", r: "1", opacity: "0.3" })] }), _jsxs("span", { className: "relative flex", children: [mark ? (_jsx(HandshakeTile, { size: size, className: cn(LOGO_TILE_BACKGROUND, 'ring-border ring-1 ring-inset'), children: mark })) : (_jsx(ConnectorAppMark, { name: name, iconUrl: iconUrl, size: size })), connected ? (_jsx("span", { className: "bg-kortix-green ring-background absolute -right-1 -bottom-1 flex size-3.5 items-center justify-center rounded-full ring-2", children: _jsx(CheckIcon, { weight: "bold", className: "text-background size-2" }) })) : null] })] }));
+    return (_jsxs("span", { className: cn('flex shrink-0 items-center', size === 'xl' ? 'gap-3' : 'gap-1.5'), "aria-hidden": true, children: [_jsx(HandshakeTile, { size: size, className: cn(KORTIX_TILE_COLORS, collapsible && 'hidden @md/connect:flex'), children: _jsx(KortixLogo, { variant: "icon", size: KORTIX_MARK_PX[size] }) }), _jsxs("svg", { width: size === 'xl' ? 36 : 24, height: size === 'xl' ? 9 : 6, viewBox: "0 0 24 6", className: cn('text-muted-foreground shrink-0', collapsible && 'hidden @md/connect:block'), fill: "currentColor", children: [_jsx("circle", { cx: "2", cy: "3", r: "1", opacity: "0.3" }), _jsx("circle", { cx: "7", cy: "3", r: "1.25", opacity: "0.7" }), _jsx("circle", { cx: "12", cy: "3", r: "1.75" }), _jsx("circle", { cx: "17", cy: "3", r: "1.25", opacity: "0.7" }), _jsx("circle", { cx: "22", cy: "3", r: "1", opacity: "0.3" })] }), _jsxs("span", { className: "relative flex", children: [mark ? (_jsx(HandshakeTile, { size: size, className: cn(LOGO_TILE_BACKGROUND, 'ring-border ring-1 ring-inset'), children: mark })) : (
+                    // A white ground behind the bare logo, so a black glyph (GitHub,
+                    // Notion) stays visible on a dark surface.
+                    _jsx("span", { className: cn(iconUrl !== undefined && LOGO_TILE_BACKGROUND, 'flex', TILE_SIZE[size]), children: _jsx(ConnectorAppMark, { name: name, iconUrl: iconUrl, size: size }) })), connected ? (_jsx("span", { className: "bg-kortix-green ring-background absolute -right-1 -bottom-1 flex size-3.5 items-center justify-center rounded-full ring-2", children: _jsx(CheckIcon, { weight: "bold", className: "text-background size-2" }) })) : null] })] }));
 }

package/dist/markdown/setup-links/secret-intake-form.d.ts

@@ -1,13 +1,3 @@
-import type { OutcomeTone } from '../../internal/outcomes/outcome-types.js';
-import { type Icon } from '@phosphor-icons/react';
-import { type ReactElement } from 'react';
-/** Every phase that is not the form: tinted tile, title, one muted line. */
-export declare function StatusNotice({ icon: Glyph, tone, title, description, }: {
-    icon: Icon;
-    tone: OutcomeTone;
-    title: string;
-    description?: string;
-}): ReactElement;
 /**
  * Renders the fields an agent-minted secret link asks for, and submits the
  * values the human types. Shared by the public /secret-intake/[token] page and

package/dist/markdown/setup-links/secret-intake-form.js

@@ -14,7 +14,7 @@ import { Fragment, useEffect, useState } from 'react';
 import { classifySetupLinkError, describeLinkExpiry, describeWithheldSecrets, splitTextLinks, } from './util.js';
 import { setupLinkApiBase } from './api-base.js';
 /** Every phase that is not the form: tinted tile, title, one muted line. */
-export function StatusNotice({ icon: Glyph, tone, title, description, }) {
+function StatusNotice({ icon: Glyph, tone, title, description, }) {
     const tint = outcomeTint(tone);
     return (_jsxs("div", { role: "status", className: "flex flex-col items-center gap-3 py-8 text-center", children: [_jsx("span", { className: cn('flex size-9 items-center justify-center rounded-sm ring-1', tint.ring, tint.bg), children: _jsx(Glyph, { weight: "fill", className: cn('size-5', tint.fg) }) }), _jsxs("div", { className: "max-w-xs space-y-1", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: title }), description ? (_jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: description })) : null] })] }));
 }

package/dist/markdown/setup-links/show-connect-hero.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+export type ShowConnectTarget = {
+    kind: 'kortix';
+    token: string;
+} | {
+    kind: 'provider';
+    host: string;
+};
+/**
+ * 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 declare function showConnectTarget(url: string, title?: string): ShowConnectTarget | null;
+/**
+ * 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 declare function ShowConnectHero({ url, target, title, description, }: {
+    url: string;
+    target: ShowConnectTarget;
+    title: string;
+    description: string;
+}): React.JSX.Element;

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/empty-state.d.ts

@@ -2,9 +2,9 @@ import { type Icon as IconMynauiType, type Icon as IconType, type Icon as Lucide
 import type { ReactNode } from 'react';
 export interface EmptyStateProps {
     icon?: LucideIcon | IconMynauiType | IconType;
-    /** Custom artwork in place of `icon`. */
+    /** Custom artwork in place of `EmptyArt`. */
     media?: ReactNode;
-    title: string;
+    title: ReactNode;
     description?: ReactNode;
     action?: ReactNode;
     secondaryAction?: ReactNode;

package/dist/primitives/empty-state.js

@@ -3,9 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Kortix <EmptyState> — centered empty view.
  *
- * Minimal. An icon, a one-line headline, an optional body, and up to two
- * actions (primary + secondary). A calm teaching moment rather than a
- * brick wall.
+ * Minimal. The fanned-card artwork (`EmptyArt`, with `icon` on its front card,
+ * or a blank document without one), a one-line headline, an optional body,
+ * and up to two actions (primary + secondary). Every empty view draws the
+ * same picture, title and body; only the glyph and the words change.
  *
  *   <EmptyState
  *     icon={IconInbox}
@@ -14,10 +15,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *     action={<Button>New issue</Button>}
  *   />
  */
+import { EmptyArt } from './empty-art.js';
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from './empty.js';
 import { cn } from '../lib/utils.js';
 export function EmptyState({ icon: IconComponent, media, title, description, action, secondaryAction, size = 'default', className, }) {
-    const iconSize = size === 'sm' ? 'h-8 w-8' : 'h-10 w-10';
     const maxW = size === 'sm' ? 'max-w-[240px]' : 'max-w-[320px]';
-    return (_jsxs(Empty, { className: cn('', className), children: [_jsxs(EmptyHeader, { className: maxW, children: [media ? (_jsx(EmptyMedia, { className: "mb-5", children: media })) : (IconComponent && (_jsx(EmptyMedia, { className: "mb-4", children: _jsx(IconComponent, { className: cn(iconSize, 'text-muted-foreground') }) }))), _jsx(EmptyTitle, { className: "text-foreground text-sm font-semibold tracking-tight", children: title }), description && (_jsx(EmptyDescription, { className: "text-muted-foreground/80 mt-1.5", children: description }))] }), (action || secondaryAction) && (_jsxs(EmptyContent, { className: "flex-row justify-center gap-2", children: [action, secondaryAction] }))] }));
+    return (_jsxs(Empty, { className: cn('', className), children: [_jsxs(EmptyHeader, { className: maxW, children: [_jsx(EmptyMedia, { className: "mb-5", children: media ?? _jsx(EmptyArt, { icon: IconComponent }) }), _jsx(EmptyTitle, { className: "text-foreground text-sm font-semibold tracking-tight", children: title }), description && (_jsx(EmptyDescription, { className: "text-muted-foreground mt-1.5", children: description }))] }), (action || secondaryAction) && (_jsxs(EmptyContent, { className: "flex-row justify-center gap-2", children: [action, secondaryAction] }))] }));
 }

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, _jsx(Hint, { label: copied ? 'Copied' : 'Copy source', side: "top", children: _jsx(Button, { variant: "secondary", size: "icon-sm", onClick: handleCopySource, "aria-label": "Copy diagram source", children: copied ? (_jsx(Check, { className: "text-kortix-green size-3.5" })) : (_jsx(Copy, { className: "size-3.5" })) }) }), enableFullscreen && (_jsx(Hint, { label: "Fullscreen", side: "top", children: _jsx(Button, { variant: "secondary", size: "icon-sm", onClick: handleFullscreenOpen, "aria-label": "Open diagram fullscreen", children: _jsx(Maximize2, { 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 }));