@kortix/ui 0.0.0-stage → 0.14.4

package/dist/markdown/unified-markdown-utils.js

@@ -0,0 +1,151 @@
+import { holdPendingSetupLink } from './setup-links/util.js';
+import { stripKortixSystemTags } from '../internal/lib/utils/kortix-system-tags.js';
+import { looksLikeFilePath as sharedLooksLikeFilePath } from '../internal/lib/utils/path-detection.js';
+import { autoLinkUrls } from '../_vendor/kortix-shared.js';
+import { hasReferenceDefinitionOutsideFences, prepareMarkdownForMath } from '../_vendor/kortix-shared.js';
+// Pure, deterministic helpers used by the unified markdown renderer. Extracted
+// so they can be unit-tested without pulling in React / Shiki / Streamdown.
+/**
+ * The text Streamdown parses: KaTeX delimiters normalised, system tags removed,
+ * bare URLs linked. Currency escaping skips code, so a fence (a generative UI
+ * block's `"$10"`, a shell `$1`) reaches its renderer as written.
+ *
+ * While the message streams, a setup link whose URL is still arriving is held
+ * as a pending card first (`holdPendingSetupLink`), so the reader never sees
+ * its raw `[label](` or a card built from a partial token. Settled text is
+ * never held.
+ */
+export function prepareMarkdownSource(content, isStreaming) {
+    const prepared = stripKortixSystemTags(prepareMarkdownForMath(content));
+    return autoLinkUrls(isStreaming ? holdPendingSetupLink(prepared) : prepared);
+}
+/** A reference-style link target: `[label]: destination`, up to three spaces in. */
+const LINK_REFERENCE_DEFINITION = /^ {0,3}\[[^\]\n]{1,999}\]:[ \t]*\S/m;
+/**
+ * Does this markdown define a reference-style link target (`[1]: https://…`)?
+ *
+ * Streamdown parses a streaming message block by block, and a definition in
+ * one block cannot resolve a `[text][1]` in another: the reference renders as
+ * raw brackets. A message with a definition is therefore parsed whole, which is
+ * what Streamdown already does for footnotes. A definition inside a fence or
+ * display math is code the message shows, not a target, so it does not keep
+ * the text whole (`hasReferenceDefinitionOutsideFences`).
+ */
+export function hasLinkReferenceDefinition(markdown) {
+    return hasReferenceDefinitionOutsideFences(markdown, LINK_REFERENCE_DEFINITION);
+}
+/**
+ * Is this href Streamdown's stand-in for a URL that has not arrived yet?
+ *
+ * While a message streams, Streamdown's `remend` closes a half-written link as
+ * `[label](streamdown:incomplete-link)` so the label renders before the URL is
+ * complete. That href is not a destination. It must never become an anchor.
+ */
+export function isStreamingLinkPlaceholder(href) {
+    return !!href && /^streamdown:/i.test(href);
+}
+/** Same-origin link? Internal links route through next/link; the rest open externally. */
+export function isInternalUrl(href) {
+    if (!href)
+        return false;
+    if (href.startsWith('http://') || href.startsWith('https://'))
+        return false;
+    if (href.includes('://'))
+        return false;
+    return href.startsWith('/') || href.startsWith('#');
+}
+/** Base for resolving a relative image URL when there is no window (server render, tests). */
+const NO_WINDOW_PAGE_URL = 'https://page.invalid/';
+/**
+ * The host a markdown image would be fetched from, when that host is not this
+ * app. `null` for a same-origin or relative source, for `data:` and `blob:`,
+ * and for a source the sandbox proxy rewrote (`proxiedSrc !== src`): that is
+ * the session's own file served through the API, not a third party.
+ *
+ * The URL is resolved against the page exactly as the browser will fetch it,
+ * so protocol-relative (`//host`), backslash (`\\host`), padded and
+ * mixed-case forms are classified by where they actually point. Anything that
+ * resolves off this origin is remote; a source that does not parse is too.
+ */
+export function remoteImageHost(src, proxiedSrc = src) {
+    if (proxiedSrc !== src)
+        return null;
+    const page = typeof window !== 'undefined' ? window.location.href : NO_WINDOW_PAGE_URL;
+    let url;
+    try {
+        url = new URL(src, page);
+    }
+    catch {
+        return src.trim().slice(0, 64) || null;
+    }
+    if (url.protocol === 'data:' || url.protocol === 'blob:')
+        return null;
+    if (url.origin === new URL(page).origin)
+        return null;
+    return url.host || url.protocol;
+}
+/**
+ * Can this href be handed to `next/link` without crashing the prefetch path?
+ *
+ * Next.js' app-router `createPrefetchURL` (in `app-router.tsx`) does
+ * `new URL(addBasePath(href), window.location.href)` and, on failure, throws
+ * `Cannot prefetch '<href>' because it cannot be converted to a URL.` — which
+ * fires whenever a `<Link>` carrying a malformed absolute href scrolls into
+ * view (segment-cache `pingVisibleLinks`). A valid external URL is fine
+ * (`isExternalURL` short-circuits prefetch); only URLs that fail `new URL()`
+ * blow up, e.g. `http://:` (an empty host/port template like
+ * `http://${HOST}:${PORT}` that leaked unsubstituted from content).
+ *
+ * Internal (`/`, `#`, `?`) and bare-relative hrefs are always safe. We only
+ * reject protocol-prefixed hrefs that don't parse, so the renderer can fall
+ * back to a plain `<a>` and never feed garbage to `next/link`.
+ */
+export function isLinkSafeHref(href) {
+    if (!href)
+        return false;
+    // Root-relative, hash, and query links are always safe for next/link.
+    if (href.startsWith('/') || href.startsWith('#') || href.startsWith('?')) {
+        return true;
+    }
+    // Protocol-prefixed URLs must parse, or next/link's prefetch throws on
+    // `new URL()` failure when the link enters the viewport.
+    if (/^[a-z][a-z0-9+.-]*:\/\//i.test(href)) {
+        try {
+            new URL(href);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    // Bare-relative paths are resolved against the current URL by next/link —
+    // `new URL(..., window.location.href)` always succeeds for them.
+    return true;
+}
+/** Route only trusted app paths through Next.js Link and its prefetcher. */
+export function shouldUseNextLink(href) {
+    return isInternalUrl(href) && isLinkSafeHref(href);
+}
+export { LANGUAGE_ALIASES, normalizeLanguage, languageLabel } from '../_vendor/kortix-shared.js';
+const FILE_EXTENSION_RE = /\.\w{1,10}$/;
+const COMMON_NON_FILES = new Set(['e.g.', 'i.e.', 'etc.', 'vs.', 'v1.', 'v2.']);
+/** Does this inline-code text look like a clickable URL? */
+export function looksLikeUrl(text) {
+    return /^[a-z][a-z0-9+.-]*:\/\/\S+$/i.test(text);
+}
+/** Does this inline-code text look like a file path we can open in a preview? */
+export function looksLikeFilePath(text) {
+    if (!text || text.length < 3 || text.length > 300)
+        return false;
+    if (text.includes(' ') || text.includes('\n'))
+        return false;
+    if (/^[a-z][a-z0-9+.-]*:\/\//i.test(text))
+        return false;
+    if (COMMON_NON_FILES.has(text.toLowerCase()))
+        return false;
+    if (!text.includes('/'))
+        return false;
+    if (FILE_EXTENSION_RE.test(text))
+        return true;
+    return sharedLooksLikeFilePath(text);
+}

package/dist/markdown/unified-markdown.d.ts

@@ -0,0 +1,46 @@
+import { type MarkdownTrust, type MarkdownVariant } from './markdown-policy.js';
+import React from 'react';
+export declare function MarkdownLink({ href, children }: {
+    href?: string;
+    children?: React.ReactNode;
+}): React.JSX.Element;
+/**
+ * `flush`: no vertical margin, for an image inside a generative UI block that spaces its own children.
+ * `compact`: the click-to-load placeholder is an icon-only button that fills its box, for a small thumbnail
+ * whose box would clip the labelled button.
+ */
+export declare function MarkdownImage({ src, alt, flush, compact, onError, }: {
+    src?: string;
+    alt?: string;
+    flush?: boolean;
+    compact?: boolean;
+    /** The image failed to load: a host can drop its frame or show a fallback. */
+    onError?: () => void;
+}): React.JSX.Element | null;
+export interface UnifiedMarkdownProps {
+    content: string;
+    /**
+     * Who wrote `content`. Decides whether embedded HTML is parsed, whether
+     * remote images load, and whether setup links become in-app cards. See
+     * `MarkdownTrust`.
+     */
+    trust: MarkdownTrust;
+    /** `document` for a markdown file: embedded HTML is not parsed. Defaults to `message`. */
+    variant?: MarkdownVariant;
+    /**
+     * `variant="document"` only: the path of the file being rendered. A
+     * document's relative links are relative to its directory, so with a known
+     * location agent documents resolve and open them (see
+     * `remarkWorkspaceFileLinks`); without one they stay blocked. Untrusted
+     * content never gets file links.
+     */
+    documentPath?: string;
+    className?: string;
+    isStreaming?: boolean;
+    /**
+     * Render ```openui fences as generative UI. Only session transcript assistant text sets it
+     * (the transcript and the share view); everywhere else such a fence is an ordinary code block.
+     */
+    genui?: boolean;
+}
+export declare const UnifiedMarkdown: React.NamedExoticComponent<UnifiedMarkdownProps>;

package/dist/markdown/unified-markdown.js

@@ -0,0 +1,293 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { toSandboxAbsolutePath } from '@kortix/sdk';
+import { useTranslations } from '../i18n/index.js';
+import { ClickablePath, wrapChildrenWithPaths } from '../internal/components/clickable-path.js';
+import { MarkdownCode } from './code/index.js';
+import { closeOpenGenuiFence, openGenuiFence, separateGenuiClosers } from './code/genui-fence.js';
+import { parseFileLinkHref, remarkWorkspaceFileLinks } from './file-links.js';
+import { InsideLinkContext } from './code/inside-link-context.js';
+import { isKatexClassName, katexRehypePlugins, katexRehypePluginsNoRaw, katexRemarkPlugins, normalizeClassName, } from './katex-markdown.js';
+import { markdownPolicy, } from './markdown-policy.js';
+import { MarkdownOrderedList } from './ordered-list.js';
+import { hasLinkReferenceDefinition, isInternalUrl, isStreamingLinkPlaceholder, prepareMarkdownSource, remoteImageHost, shouldUseNextLink, } from './unified-markdown-utils.js';
+import { remarkSetupLinkBlocks } from './setup-link-blocks.js';
+import { rehypeStreamWords, STREAM_WORD_CLASS, StreamFadeGateContext, StreamWord, createStreamFadeGate, } from './stream-words.js';
+import { SetupLinkButton, SetupLinkInlineContext } from './setup-links/setup-link-button.js';
+import { parsePendingSetupLinkHref, parseSetupLinkHref } from './setup-links/util.js';
+import { Button } from '../primitives/button.js';
+import { Checkbox } from '../primitives/checkbox.js';
+import { useSandboxProxy } from '../internal/hooks/use-sandbox-proxy.js';
+import { useOpenPreviewLink } from '../internal/hooks/use-open-preview-link.js';
+import { cn } from '../lib/utils.js';
+import { ImageIcon } from '@phosphor-icons/react';
+import { useUiLink } from '../providers/ui-provider.js';
+import React, { useCallback, useContext, useMemo, useState } from 'react';
+import { parseMarkdownIntoBlocks, Streamdown } from 'streamdown';
+const LINK_CLASS = cn('font-medium text-kortix-blue', 'underline decoration-kortix-blue/40 decoration-[1px] underline-offset-[3px]', 'transition-colors hover:decoration-kortix-blue', '[overflow-wrap:anywhere]');
+function handleHashClick(e, href) {
+    if (!href.startsWith('#'))
+        return;
+    e.preventDefault();
+    document.getElementById(href.slice(1))?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+}
+const MarkdownRenderContext = React.createContext({
+    isStreaming: false,
+    proxy: (url) => url,
+    policy: markdownPolicy('untrusted'),
+    trust: 'untrusted',
+    variant: 'message',
+    genui: false,
+});
+export function MarkdownLink({ href, children }) {
+    const Link = useUiLink();
+    const { proxy, policy, variant } = useContext(MarkdownRenderContext);
+    const openPreview = useOpenPreviewLink();
+    // Only agent content may turn a setup link into the in-app card. From any
+    // other writer it stays a plain link to the same page.
+    const setupLink = policy.setupLinks ? parseSetupLinkHref(href) : null;
+    if (setupLink) {
+        return (_jsx(SetupLinkButton, { kind: setupLink.kind, token: setupLink.token, children: children }));
+    }
+    // A setup link whose URL is still streaming: the card it will
+    // become, with nothing to click yet (see `holdPendingSetupLink`).
+    const pendingSetupLink = policy.setupLinks ? parsePendingSetupLinkHref(href) : null;
+    if (pendingSetupLink) {
+        return (_jsx(SetupLinkButton, { kind: pendingSetupLink, token: null, children: children }));
+    }
+    // A file in the session's workspace opens the file preview, the same
+    // as a path in prose (see `remarkWorkspaceFileLinks`).
+    const decodedFilePath = policy.fileLinks ? parseFileLinkHref(href) : null;
+    const filePath = policy.fileLinks ? parseFileLinkHref(href, variant === 'document') : null;
+    if (decodedFilePath && !filePath) {
+        return _jsx("span", { className: LINK_CLASS, children: children });
+    }
+    if (filePath) {
+        return (_jsx(ClickablePath, { filePath: filePath, className: LINK_CLASS, children: children }));
+    }
+    // The URL is still streaming: show the label in link style, with
+    // nothing to click until the real href arrives.
+    if (isStreamingLinkPlaceholder(href)) {
+        return _jsx("span", { className: LINK_CLASS, children: children });
+    }
+    const resolvedHref = proxy(href) ?? href ?? '#';
+    const isHash = resolvedHref.startsWith('#');
+    const isExternal = !isInternalUrl(resolvedHref);
+    // A sandbox address under a host preview resolver: the proxied href would
+    // land on the host's own origin, so the click opens the host's URL.
+    if (openPreview && href && resolvedHref !== href) {
+        return (_jsx("a", { href: href, className: LINK_CLASS, target: "_blank", rel: "noopener noreferrer", onClick: (e) => openPreview(e, href, resolvedHref), children: _jsx(InsideLinkContext.Provider, { value: true, children: children }) }));
+    }
+    // Markdown can contain arbitrary same-origin absolute URLs. Next.js
+    // treats those as app routes and prefetches them, including typos such
+    // as `/legal/terms.`. Only trusted root-relative/hash paths belong in
+    // the app router; every other href stays a plain anchor.
+    if (!shouldUseNextLink(resolvedHref)) {
+        return (_jsx("a", { href: resolvedHref, className: LINK_CLASS, ...(isExternal && !isHash ? { target: '_blank', rel: 'noopener noreferrer' } : {}), children: _jsx(InsideLinkContext.Provider, { value: true, children: children }) }));
+    }
+    return (_jsx(Link, { href: resolvedHref, onClick: isHash ? (e) => handleHashClick(e, resolvedHref) : undefined, className: LINK_CLASS, ...(isExternal && !isHash ? { target: '_blank', rel: 'noopener noreferrer' } : {}), children: _jsx(InsideLinkContext.Provider, { value: true, children: children }) }));
+}
+/**
+ * `flush`: no vertical margin, for an image inside a generative UI block that spaces its own children.
+ * `compact`: the click-to-load placeholder is an icon-only button that fills its box, for a small thumbnail
+ * whose box would clip the labelled button.
+ */
+export function MarkdownImage({ src, alt, flush = false, compact = false, onError, }) {
+    const { proxy, policy } = useContext(MarkdownRenderContext);
+    const tHardcodedUi = useTranslations('hardcodedUi');
+    const [loadRequested, setLoadRequested] = useState(false);
+    if (!src)
+        return null;
+    const resolvedSrc = proxy(src) ?? src;
+    const remoteHost = remoteImageHost(src, resolvedSrc);
+    if (policy.remoteImages === 'click-to-load' && remoteHost && !loadRequested) {
+        const label = tHardcodedUi('componentsMarkdownUnifiedMarkdown.loadRemoteImage', { host: remoteHost });
+        if (compact) {
+            return (_jsx(Button, { type: "button", variant: "ghost", size: "icon", title: label, "aria-label": label, onClick: () => setLoadRequested(true), className: "text-muted-foreground size-full", children: _jsx(ImageIcon, { className: "size-4" }) }));
+        }
+        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" }) }));
+}
+/**
+ * Every renderer the markdown uses, defined once for the module.
+ *
+ * The identities never change, and that is load-bearing. Each function here is
+ * an element TYPE to React. This map used to be rebuilt whenever `isStreaming`
+ * or the sandbox proxy changed, which changed every type in the message at
+ * once, so React remounted all of it: at the end of every turn an open
+ * setup-link modal closed and its connect poll stopped, and code blocks and
+ * diagrams rendered again. Values that change arrive through
+ * `MarkdownRenderContext` instead. The stable map also lets Streamdown's
+ * per-block memo skip every block the new text did not touch.
+ */
+const MARKDOWN_COMPONENTS = {
+    // Headings — graduated hierarchy bounded by text-base (h6) → text-xl (h1).
+    // Only 3 named sizes live in that range, so deeper levels step down via
+    // weight, colour, and top-margin instead.
+    h1: ({ children }) => (_jsx("h1", { className: "text-foreground mt-10 mb-4 text-xl font-semibold first:mt-0", children: children })),
+    h2: ({ children }) => (_jsx("h2", { className: "text-foreground mt-8 mb-3 text-xl font-semibold first:mt-0", children: children })),
+    h3: ({ children }) => (_jsx("h3", { className: "text-foreground mt-6 mb-2 text-lg font-semibold first:mt-0", children: children })),
+    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 })),
+    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) }) })),
+    // 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
+    // packages/ui/src/markdown/code.
+    code: function MarkdownCodeRenderer(props) {
+        const { isStreaming, policy, trust, variant, genui } = useContext(MarkdownRenderContext);
+        return (_jsx(MarkdownCode, { ...props, isStreaming: isStreaming, setupLinks: policy.setupLinks, trust: trust, variant: variant, genui: genui }));
+    },
+    // `code` returns the fully-styled block; collapse the default `<pre>` wrapper.
+    pre: ({ children }) => _jsx(_Fragment, { children: children }),
+    blockquote: ({ children }) => (_jsx("blockquote", { className: "border-border text-muted-foreground my-5 border-l-2 pl-6 italic [&>p]:my-2", children: wrapChildrenWithPaths(children) })),
+    hr: () => _jsx("hr", { className: "border-border my-6 h-px border-0 border-t" }),
+    table: ({ children }) => (_jsx("div", { className: "kx-md-table border-border my-5 overflow-x-auto rounded-md border", children: _jsx("table", { className: "!m-0 w-full text-sm", children: children }) })),
+    thead: ({ children }) => (_jsx("thead", { className: "border-border bg-muted border-b", children: children })),
+    tbody: ({ children }) => (_jsx("tbody", { className: "divide-border divide-y", children: children })),
+    tr: ({ children }) => _jsx("tr", { children: children }),
+    // cn() is twMerge: the last same-group class wins. Static classes go
+    // last here so an incoming className can't strip whitespace-nowrap/break-normal.
+    th: ({ children, className: thClassName, node: _node, ...props }) => (_jsx("th", { className: cn(thClassName, 'text-foreground px-4 py-2 text-left font-semibold break-normal whitespace-nowrap'), ...props, children: children })),
+    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 })),
+    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.
+    input: ({ checked }) => (_jsx(Checkbox, { checked: !!checked, tabIndex: -1, "aria-readonly": true, className: "pointer-events-none relative -top-px mr-2 inline-flex align-middle" })),
+    // Raw HTML passthrough (GFM) — leave KaTeX-owned nodes untouched.
+    div: ({ children, style, className: divClassName, node: _node, ...props }) => {
+        if (isKatexClassName(divClassName)) {
+            return (_jsx("div", { className: normalizeClassName(divClassName), style: style, ...props, children: children }));
+        }
+        return (_jsx("div", { className: cn('text-foreground text-sm', divClassName), style: style, ...props, children: children }));
+    },
+    span: ({ children, style, className: spanClassName, node: _node, ...props }) => {
+        // A streamed word (see `rehypeStreamWords`): it inherits its parent's
+        // colour, so it must not take the `text-foreground` below.
+        if (spanClassName === STREAM_WORD_CLASS) {
+            return _jsx(StreamWord, { children: children });
+        }
+        if (isKatexClassName(spanClassName)) {
+            return (_jsx("span", { className: normalizeClassName(spanClassName), style: style, ...props, children: children }));
+        }
+        return (_jsx("span", { className: cn('text-foreground', spanClassName), style: style, ...props, children: children }));
+    },
+};
+/**
+ * Streamdown's block split, except that a message defining reference-style
+ * link targets stays one block, so `[text][1]` can reach `[1]: https://…`.
+ * See `hasLinkReferenceDefinition`.
+ */
+function parseMarkdownBlocks(markdown) {
+    return hasLinkReferenceDefinition(markdown) ? [markdown] : parseMarkdownIntoBlocks(markdown);
+}
+/**
+ * Agent content only: the setup-link lift depends on `policy.setupLinks`, the
+ * same gate that turns a setup link into a card. Module-level so the array is
+ * stable across renders (see the `rehypePlugins` note below).
+ */
+const REMARK_PLUGINS_WITH_SETUP_LINKS = [...katexRemarkPlugins, remarkSetupLinkBlocks];
+const REMARK_PLUGINS_WITH_FILE_LINKS = [...REMARK_PLUGINS_WITH_SETUP_LINKS, remarkWorkspaceFileLinks];
+// Last, so the words it wraps are the final, sanitized text.
+const STREAMING_REHYPE_PLUGINS = [...katexRehypePlugins, rehypeStreamWords];
+const STREAMING_REHYPE_PLUGINS_NO_RAW = [...katexRehypePluginsNoRaw, rehypeStreamWords];
+// Single source of truth for markdown rendering across the app — clean, minimal,
+// readable in both themes.
+export const UnifiedMarkdown = React.memo(({ content, trust, variant = 'message', className, isStreaming = false, documentPath, genui = false }) => {
+    const tHardcodedUi = useTranslations('hardcodedUi');
+    const { proxyUrl } = useSandboxProxy();
+    const proxy = useCallback((url) => proxyUrl(url), [proxyUrl]);
+    const policy = markdownPolicy(trust, variant);
+    // A document's file links turn on once its location is known, under the
+    // same trust gate as messages (`markdownPolicy(trust, 'message')`), so
+    // untrusted documents never link files. `workspaceFileLinkPath` resolves
+    // relative links against the document's directory and keeps traversal
+    // inside the sandbox roots.
+    const effectivePolicy = useMemo(() => {
+        if (variant !== 'document' || !documentPath)
+            return policy;
+        if (!markdownPolicy(trust, 'message').fileLinks)
+            return policy;
+        return { ...policy, fileLinks: true };
+    }, [policy, trust, variant, documentPath]);
+    const documentBaseDir = useMemo(() => {
+        if (variant !== 'document' || !documentPath || !effectivePolicy.fileLinks)
+            return undefined;
+        const file = toSandboxAbsolutePath(documentPath);
+        const cut = file.lastIndexOf('/');
+        return cut > 0 ? file.slice(0, cut) : undefined;
+    }, [variant, documentPath, effectivePolicy.fileLinks]);
+    const remarkPlugins = useMemo(() => {
+        if (documentBaseDir) {
+            return [...REMARK_PLUGINS_WITH_SETUP_LINKS, [remarkWorkspaceFileLinks, { baseDir: documentBaseDir }]];
+        }
+        return effectivePolicy.fileLinks
+            ? REMARK_PLUGINS_WITH_FILE_LINKS
+            : policy.setupLinks
+                ? REMARK_PLUGINS_WITH_SETUP_LINKS
+                : katexRemarkPlugins;
+    }, [documentBaseDir, effectivePolicy, policy.setupLinks]);
+    // Streamdown renders streaming text block by block and settled text as one
+    // document: two different React trees. Switching trees when the turn ends
+    // remounts the whole message, the same loss as unstable renderer types
+    // above. A message that mounts streaming keeps the block renderer for good;
+    // one that mounts settled (history) is parsed as one document.
+    const [streamedAtMount] = useState(isStreaming);
+    // Text present at mount shows without the per-word fade (see `StreamFadeGate`).
+    const [fadeGate] = useState(() => createStreamFadeGate(!isStreaming));
+    const safeContent = typeof content === 'string' ? content : content ? String(content) : '';
+    // A generative UI fence still open at the end streams (the model is writing it) or was cut
+    // off. It is closed here, so nothing after it, such as Streamdown's completion of unfinished
+    // markdown, lands inside the block, and its last line tells the block which of the two it is.
+    // A nested fence (`code === null`) in history may be one its container already closed: closing
+    // it again would render an extra empty code block, so it is closed only while streaming.
+    // A closer the model glued to the last statement (`…")````) moves to its own line first, or
+    // CommonMark would not close the fence and the prose after it would land inside the block.
+    const source = useMemo(() => (genui ? separateGenuiClosers(safeContent) : safeContent), [genui, safeContent]);
+    const genuiOpen = useMemo(() => (genui ? openGenuiFence(source) : null), [genui, source]);
+    const renderContext = useMemo(() => ({ isStreaming, proxy, policy: effectivePolicy, trust, variant, genui }), [isStreaming, proxy, effectivePolicy, trust, variant, genui]);
+    // Whole-string rewrites (KaTeX prep, system-tag strip, the pending setup
+    // link, autolink). Run bare, they re-ran on EVERY render of this component
+    // — including every render caused by something other than a new token —
+    // for the full length of the answer. Memoising on the string collapses
+    // that to once per distinct value. It sits ABOVE the empty-content early
+    // return so the hook order stays fixed.
+    const finalContent = useMemo(() => {
+        if (!source)
+            return '';
+        const closed = genuiOpen && (genuiOpen.code !== null || isStreaming)
+            ? closeOpenGenuiFence(source, genuiOpen, isStreaming ? 'streaming' : 'cut-off')
+            : source;
+        return prepareMarkdownSource(closed, isStreaming);
+    }, [source, genuiOpen, isStreaming]);
+    if (!safeContent) {
+        return (_jsx("div", { className: cn('text-muted-foreground text-sm', className), children: tHardcodedUi.raw('componentsMarkdownUnifiedMarkdown.line1115JsxTextNoContent') }));
+    }
+    return (_jsx("div", { className: cn('kortix-markdown max-w-full min-w-0 text-[15px] [overflow-wrap:anywhere]', isStreaming && 'streaming-active', className), "data-streaming": isStreaming ? 'true' : 'false', children: _jsx(MarkdownRenderContext.Provider, { value: renderContext, children: _jsx(StreamFadeGateContext.Provider, { value: fadeGate, children: _jsx(Streamdown, { isAnimating: isStreaming, mode: streamedAtMount || isStreaming ? 'streaming' : 'static', 
+                    // Completing half-written markdown is for text that is still
+                    // arriving. A settled message renders exactly as written.
+                    parseIncompleteMarkdown: isStreaming, parseMarkdownIntoBlocksFn: parseMarkdownBlocks, components: MARKDOWN_COMPONENTS, remarkPlugins: remarkPlugins, 
+                    // Module-level arrays for the same reason as MARKDOWN_COMPONENTS: a
+                    // new array each render made every block re-parse on every token.
+                    // While streaming, each word also fades in as it mounts. Dropping
+                    // the plugin at the end re-renders every block once as plain text.
+                    rehypePlugins: isStreaming
+                        ? policy.rawHtml
+                            ? STREAMING_REHYPE_PLUGINS
+                            : STREAMING_REHYPE_PLUGINS_NO_RAW
+                        : policy.rawHtml
+                            ? katexRehypePlugins
+                            : katexRehypePluginsNoRaw, children: finalContent }) }) }) }));
+});
+UnifiedMarkdown.displayName = 'UnifiedMarkdown';

package/dist/primitives/accordion.d.ts

@@ -0,0 +1,7 @@
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import * as React from 'react';
+declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): React.JSX.Element;
+declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): React.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): React.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): React.JSX.Element;
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/primitives/accordion.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CaretDownIcon as ChevronDownIcon } from '@phosphor-icons/react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { cn } from '../lib/utils.js';
+function Accordion({ ...props }) {
+    return _jsx(AccordionPrimitive.Root, { "data-slot": "accordion", ...props });
+}
+function AccordionItem({ className, ...props }) {
+    return (_jsx(AccordionPrimitive.Item, { "data-slot": "accordion-item", className: cn('border-b last:border-b-0', className), ...props }));
+}
+function AccordionTrigger({ className, children, ...props }) {
+    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn('focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-2xl py-4 text-left text-sm font-medium transition-colors outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180', className), ...props, children: [children, _jsx(ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-moderate" })] }) }));
+}
+function AccordionContent({ className, children, ...props }) {
+    return (_jsx(AccordionPrimitive.Content, { "data-slot": "accordion-content", className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm", ...props, children: _jsx("div", { className: cn('pt-0 pb-4', className), children: children }) }));
+}
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/primitives/alert-dialog.d.ts

@@ -0,0 +1,19 @@
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import * as React from 'react';
+import { ButtonProps } from './button.js';
+declare function AlertDialog({ children, open, defaultOpen, onOpenChange, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): React.JSX.Element;
+declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): React.JSX.Element;
+declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): React.JSX.Element;
+declare function AlertDialogOverlay({ className, style, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): React.JSX.Element;
+declare function AlertDialogContent({ className, style, overlayClassName, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+    overlayClassName?: string;
+}): React.JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): React.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): React.JSX.Element;
+declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action> & {
+    variant?: ButtonProps['variant'];
+}): React.JSX.Element;
+declare function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>): React.JSX.Element;
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };

package/dist/primitives/alert-dialog.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { buttonVariants } from './button.js';
+import { usePortalContainer } from '../lib/portal-container.js';
+import { cn } from '../lib/utils.js';
+import { DialogDepthProvider, dialogContentZ, dialogOverlayZ, useDialogDepth, useDialogRootLayer, } from '../lib/z-stack.js';
+// Depth follows the runtime layer stack, so an alert stacks above whatever is
+// open even when it is rendered as a sibling. Still prefer rendering an alert
+// that confirms for a dialog INSIDE that dialog's React tree: React events from
+// the alert then bubble through the dialog, so the dialog's own outside-click
+// and focus handlers never see the alert as "outside".
+function AlertDialog({ children, open, defaultOpen, onOpenChange, ...props }) {
+    const layer = useDialogRootLayer({ open, defaultOpen, onOpenChange });
+    return (_jsx(DialogDepthProvider, { depth: layer.depth, children: _jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props, open: layer.open, onOpenChange: layer.onOpenChange, children: children }) }));
+}
+function AlertDialogTrigger({ ...props }) {
+    return _jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+}
+function AlertDialogPortal({ ...props }) {
+    const scoped = usePortalContainer();
+    return _jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props, container: props.container ?? scoped });
+}
+function AlertDialogOverlay({ className, style, ...props }) {
+    const depth = useDialogDepth();
+    return (_jsx(AlertDialogPrimitive.Overlay, { "data-slot": "alert-dialog-overlay", className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 bg-black/65 backdrop-blur-xs', className), style: { zIndex: dialogOverlayZ(depth), ...style }, ...props }));
+}
+function AlertDialogContent({ className, style, overlayClassName, ...props }) {
+    const depth = useDialogDepth();
+    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, { className: overlayClassName }), _jsx(AlertDialogPrimitive.Content, { "data-slot": "alert-dialog-content", className: cn('bg-sidebar border-muted/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 space-y-5 rounded-xl border p-5 shadow-lg duration-moderate sm:max-w-md', className), style: { zIndex: dialogContentZ(depth), ...style }, ...props })] }));
+}
+function AlertDialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn('flex flex-col gap-2 text-center sm:text-left', className), ...props }));
+}
+function AlertDialogFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-footer", className: cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className), ...props }));
+}
+function AlertDialogTitle({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Title, { "data-slot": "alert-dialog-title", className: cn('text-lg font-medium', className), ...props }));
+}
+function AlertDialogDescription({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Description, { "data-slot": "alert-dialog-description", className: cn('text-muted-foreground text-[length:var(--text-md,0.9rem)] leading-snug', className), ...props }));
+}
+function AlertDialogAction({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Action, { className: cn(buttonVariants({ size: 'sm', variant: props.variant }), className), ...props }));
+}
+function AlertDialogCancel({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Cancel, { className: cn(buttonVariants({ variant: 'outline-ghost', size: 'sm' }), className), ...props }));
+}
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };

package/dist/primitives/alert.d.ts

@@ -0,0 +1,13 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const alertVariants: (props?: ({
+    variant?: "success" | "warning" | "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Replaces the variant's glyph. Only for a state the glyph cannot say (a spinner while loading). */
+declare function AlertMedia({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function AlertContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function AlertActions({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function Alert({ className, variant, children, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>): React.JSX.Element;
+export { Alert, AlertActions, AlertContent, AlertDescription, AlertMedia, AlertTitle };