@kortix/ui 0.14.3 → 0.14.4

package/dist/lib/lazy-client.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+/**
+ * Loads a component on first client render and never renders it on the
+ * server: the `next/dynamic(load, { ssr: false, loading })` contract without
+ * Next. It renders `fallback` (default: nothing) until mounted and while the
+ * chunk loads.
+ */
+export declare function lazyClient<C extends React.ComponentType<any>>(load: () => Promise<C>, { fallback }?: {
+    fallback?: React.ReactNode;
+}): React.FC<React.ComponentProps<C>>;

package/dist/lib/lazy-client.js

@@ -0,0 +1,20 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+const subscribeNever = () => () => { };
+/**
+ * Loads a component on first client render and never renders it on the
+ * server: the `next/dynamic(load, { ssr: false, loading })` contract without
+ * Next. It renders `fallback` (default: nothing) until mounted and while the
+ * chunk loads.
+ */
+export function lazyClient(load, { fallback = null } = {}) {
+    const Lazy = React.lazy(() => load().then((component) => ({ default: component })));
+    function LazyClient(props) {
+        const mounted = React.useSyncExternalStore(subscribeNever, () => true, () => false);
+        if (!mounted)
+            return _jsx(_Fragment, { children: fallback });
+        return (_jsx(React.Suspense, { fallback: fallback, children: _jsx(Lazy, { ...props }) }));
+    }
+    return LazyClient;
+}

package/dist/lib/portal-container.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export declare const PortalContainerProvider: React.Provider<HTMLElement | null>;
+export declare function usePortalContainer(): HTMLElement | undefined;
+type PortalLike = {
+    container?: Element | DocumentFragment | null;
+};
+/** Wraps a Radix-style Portal so it defaults `container` to the nearest ThemeScope. */
+export declare function withPortalContainer<P extends PortalLike>(Portal: React.ComponentType<P>): {
+    (props: P): React.JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/lib/portal-container.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+/**
+ * Where overlays portal to. Unset (the default), every overlay portals to
+ * document.body as Radix does. ThemeScope sets it to an element inside its
+ * subtree, so a dialog, popover or menu opened in a scope paints the scope's
+ * tokens instead of the page's.
+ */
+const PortalContainerContext = React.createContext(null);
+export const PortalContainerProvider = PortalContainerContext.Provider;
+export function usePortalContainer() {
+    return React.useContext(PortalContainerContext) ?? undefined;
+}
+/** Wraps a Radix-style Portal so it defaults `container` to the nearest ThemeScope. */
+export function withPortalContainer(Portal) {
+    function ScopedPortal(props) {
+        const scoped = usePortalContainer();
+        return _jsx(Portal, { ...props, container: props.container ?? scoped });
+    }
+    ScopedPortal.displayName = `Scoped(${Portal.displayName ?? Portal.name ?? 'Portal'})`;
+    return ScopedPortal;
+}

package/dist/lib/routes.d.ts

@@ -0,0 +1,52 @@
+/**
+ * The host's URL for every page the components link to or navigate to.
+ * Module-level, like `setUiHostEnv`: plain functions (review deep links, the
+ * new-session flow) build these URLs outside React. A host whose router serves
+ * another URL scheme calls `setUiRoutes` once at module load.
+ *
+ * A route that returns null is a page the host does not serve: every link to
+ * it is hidden and no navigation goes there. `project` and `session` are the
+ * two pages every session host serves, so they cannot be null.
+ *
+ * Defaults: apps/web's paths.
+ */
+export interface UiRoutes {
+    /** The project home: the new-session composer. */
+    project: (projectId: string) => string;
+    session: (projectId: string, sessionId: string) => string;
+    /** The full session list, optionally on its archived or deleted view. */
+    sessions: (projectId: string, view?: 'archived' | 'deleted') => string | null;
+    /** The project's files, optionally with the proposed-changes panel open. */
+    files: (projectId: string, panel?: 'proposed-changes') => string | null;
+    drive: (projectId: string) => string | null;
+    apps: (projectId: string) => string | null;
+    /** The project's chat rooms (flag `agent_rooms`). */
+    rooms: (projectId: string) => string | null;
+    members: (projectId: string) => string | null;
+    /** The project settings page, on its sandbox section. */
+    sandboxSettings: (projectId: string) => string | null;
+    /**
+     * The capability pages: agents, skills, connectors, triggers, reminders,
+     * models, secrets, review, settings. `path` is the part after the
+     * capability root, for example `models` or `triggers?id=<slug>`.
+     */
+    customize: (projectId: string, path?: string) => string | null;
+}
+export declare const defaultUiRoutes: UiRoutes;
+/** Replaces the routes the host passes. Omitted routes keep their default. */
+export declare function setUiRoutes(overrides: Partial<UiRoutes>): void;
+export declare function uiRoutes(): UiRoutes;
+/**
+ * A capability page's URL for the customize pages themselves: they are mounted
+ * only by a host that serves them, so a null `customize` route falls back to
+ * the default path instead of breaking their own tabs.
+ */
+export declare function customizePath(projectId: string, path?: string): string;
+/**
+ * The session id `pathname` shows, read through the host's `session` route
+ * (so a host URL scheme works), or null when it is not a session page of
+ * `projectId`.
+ */
+export declare function sessionIdFromPath(pathname: string | null | undefined, projectId: string): string | null;
+/** True when `pathname` is the project's page or a page under it, per the host's `project` route. */
+export declare function isProjectPath(pathname: string | null | undefined, projectId: string): boolean;

package/dist/lib/routes.js

@@ -0,0 +1,54 @@
+const DEFAULT_ROUTES = {
+    project: (p) => `/projects/${p}`,
+    session: (p, s) => `/projects/${p}/sessions/${s}`,
+    sessions: (p, view) => `/projects/${p}/sessions${view ? `?view=${view}` : ''}`,
+    files: (p, panel) => `/projects/${p}/files${panel ? `?panel=${panel}` : ''}`,
+    drive: (p) => `/projects/${p}/drive`,
+    apps: (p) => `/projects/${p}/apps`,
+    rooms: (p) => `/projects/${p}/rooms`,
+    members: (p) => `/projects/${p}/members`,
+    sandboxSettings: (p) => `/projects/${p}/config?section=sandbox`,
+    customize: (p, path) => `/projects/${p}/customize${path ? `/${path}` : ''}`,
+};
+export const defaultUiRoutes = DEFAULT_ROUTES;
+let routes = DEFAULT_ROUTES;
+/** Replaces the routes the host passes. Omitted routes keep their default. */
+export function setUiRoutes(overrides) {
+    routes = { ...DEFAULT_ROUTES, ...overrides };
+}
+export function uiRoutes() {
+    return routes;
+}
+/**
+ * A capability page's URL for the customize pages themselves: they are mounted
+ * only by a host that serves them, so a null `customize` route falls back to
+ * the default path instead of breaking their own tabs.
+ */
+export function customizePath(projectId, path) {
+    return routes.customize(projectId, path) ?? DEFAULT_ROUTES.customize(projectId, path);
+}
+/**
+ * The session id `pathname` shows, read through the host's `session` route
+ * (so a host URL scheme works), or null when it is not a session page of
+ * `projectId`.
+ */
+export function sessionIdFromPath(pathname, projectId) {
+    if (!pathname)
+        return null;
+    const MARK = '\u0001';
+    const [prefix, suffix = ''] = routes.session(projectId, MARK).split(MARK);
+    if (!prefix || !pathname.startsWith(prefix))
+        return null;
+    const rest = pathname.slice(prefix.length);
+    const id = rest.split(/[/?#]/)[0];
+    if (!id || (suffix && !rest.slice(id.length).startsWith(suffix)))
+        return null;
+    return decodeURIComponent(id);
+}
+/** True when `pathname` is the project's page or a page under it, per the host's `project` route. */
+export function isProjectPath(pathname, projectId) {
+    if (!pathname)
+        return false;
+    const root = routes.project(projectId).replace(/\/$/, '');
+    return pathname === root || pathname.startsWith(`${root}/`) || pathname.startsWith(`${root}?`);
+}

package/dist/lib/telemetry.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Telemetry sink for @kortix/ui. Module-level, not context: plain functions
+ * (click handlers, store actions) report too. A host calls `setUiTelemetry`
+ * once at module load. Defaults: `track`, `captureMessage` and
+ * `addBreadcrumb` do nothing; `captureException` logs to the console.
+ * Properties carry kinds, counts and sources only: never a name, path, URL or title.
+ */
+/**
+ * A host narrows the event names `track` accepts by declaration merging:
+ *   declare module '@kortix/ui/lib/telemetry' {
+ *     interface UiTelemetryRegister { event: 'panel_opened' | 'panel_closed' }
+ *   }
+ * Without it, any string is accepted.
+ */
+export interface UiTelemetryRegister {
+}
+export type UiTrackEvent = UiTelemetryRegister extends {
+    event: infer E extends string;
+} ? E : string;
+export type UiTrackProperties = Record<string, string | number | boolean>;
+export type UiSeverity = 'fatal' | 'error' | 'warning' | 'info' | 'debug';
+export interface UiCaptureContext {
+    level?: UiSeverity;
+    /** Indexed, searchable values: kinds, codes and statuses only. */
+    tags?: Record<string, string | undefined>;
+    extra?: Record<string, unknown>;
+}
+export interface UiBreadcrumb {
+    category?: string;
+    level?: UiSeverity;
+    data?: Record<string, unknown>;
+}
+export interface UiTelemetry {
+    track(event: UiTrackEvent, properties?: UiTrackProperties): void;
+    captureException(error: unknown, context?: UiCaptureContext): void;
+    captureMessage(message: string, context?: UiCaptureContext): void;
+    addBreadcrumb(breadcrumb: UiBreadcrumb): void;
+}
+/** Replaces the sink. Omitted functions keep their default. */
+export declare function setUiTelemetry(next: Partial<UiTelemetry>): void;
+export declare const track: (event: string, properties?: UiTrackProperties | undefined) => void;
+export declare const captureException: (error: unknown, context?: UiCaptureContext | undefined) => void;
+export declare const captureMessage: (message: string, context?: UiCaptureContext | undefined) => void;
+export declare const addBreadcrumb: (breadcrumb: UiBreadcrumb) => void;

package/dist/lib/telemetry.js

@@ -0,0 +1,24 @@
+const defaults = {
+    track: () => { },
+    captureException: (error) => console.error(error),
+    captureMessage: () => { },
+    addBreadcrumb: () => { },
+};
+let sink = defaults;
+/** Replaces the sink. Omitted functions keep their default. */
+export function setUiTelemetry(next) {
+    sink = { ...defaults, ...next };
+}
+// Each call swallows a sink error: telemetry never takes a feature down with it.
+function guarded(pick) {
+    return (...args) => {
+        try {
+            pick(sink)(...args);
+        }
+        catch { }
+    };
+}
+export const track = guarded((t) => t.track);
+export const captureException = guarded((t) => t.captureException);
+export const captureMessage = guarded((t) => t.captureMessage);
+export const addBreadcrumb = guarded((t) => t.addBreadcrumb);

package/dist/lib/utils.d.ts

@@ -1,2 +1,3 @@
 import { type ClassValue } from 'clsx';
 export declare function cn(...inputs: ClassValue[]): string;
+export declare function cx(...values: Array<string | undefined | null | false>): string;

package/dist/lib/utils.js

@@ -1,5 +1,12 @@
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { extendTailwindMerge } from 'tailwind-merge';
+/** The theme's named duration steps (theme.css), so `cn('duration-moderate', 'duration-300')` keeps the last one. */
+const twMerge = extendTailwindMerge({
+    extend: { classGroups: { duration: [{ duration: ['fast', 'normal', 'moderate', 'slow', 'slower'] }] } },
+});
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
+export function cx(...values) {
+    return values.filter(Boolean).join(' ');
+}

package/dist/markdown/code/children-text.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+/**
+ * The literal text a markdown `code` node carries.
+ *
+ * The parser hands `code` a plain string, so both code renderers used to read
+ * it as `String(children)`. That is only true until something in the render
+ * path replaces the string with an element: `wrapChildrenWithPaths` did
+ * exactly that for any fence whose body contained a file path, and
+ * `String(<Fragment/>)` is the string `[object Object]` — which is what the
+ * highlighter then drew, and what the copy button then copied.
+ *
+ * Reading the text out of the tree instead of stringifying the top node makes
+ * the code text independent of whatever wraps it.
+ */
+export declare function childrenToText(children: React.ReactNode): string;

package/dist/markdown/code/children-text.js

@@ -0,0 +1,29 @@
+import React from 'react';
+/**
+ * The literal text a markdown `code` node carries.
+ *
+ * The parser hands `code` a plain string, so both code renderers used to read
+ * it as `String(children)`. That is only true until something in the render
+ * path replaces the string with an element: `wrapChildrenWithPaths` did
+ * exactly that for any fence whose body contained a file path, and
+ * `String(<Fragment/>)` is the string `[object Object]` — which is what the
+ * highlighter then drew, and what the copy button then copied.
+ *
+ * Reading the text out of the tree instead of stringifying the top node makes
+ * the code text independent of whatever wraps it.
+ */
+export function childrenToText(children) {
+    if (children === null || children === undefined || typeof children === 'boolean')
+        return '';
+    if (typeof children === 'string')
+        return children;
+    if (typeof children === 'number')
+        return String(children);
+    if (Array.isArray(children))
+        return children.map(childrenToText).join('');
+    if (React.isValidElement(children)) {
+        const props = children.props;
+        return childrenToText(props?.children);
+    }
+    return '';
+}

package/dist/markdown/code/code-block.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+export declare function HighlightedCode({ code, language, children, unbounded, isStreaming, }: {
+    code: string;
+    language: string;
+    /** Plain-text fallback before the grammar is ready. Defaults to `code`. */
+    children?: React.ReactNode;
+    /**
+     * Highlight past Shiki's length limit. Without it, code over the limit
+     * renders whole as plain text — the limit guards perf against Streamdown
+     * remounting this component per streamed token. A surface whose purpose IS
+     * showing the complete content (e.g. a request/response log) sets it to
+     * keep colour at any length.
+     */
+    unbounded?: boolean;
+    /**
+     * The message this block belongs to is still streaming. The block renders
+     * plain while its text changes and highlights once it holds still for
+     * `CODE_SETTLE_MS` (see there).
+     */
+    isStreaming?: boolean;
+}): React.JSX.Element;
+export declare function CodeBlock({ code, language, children, isStreaming, className, }: {
+    code: string;
+    language: string;
+    children: React.ReactNode;
+    isStreaming?: boolean;
+    className?: string;
+}): React.JSX.Element;
+export declare function CodeHighlight({ code, language, className, }: {
+    code: string;
+    language: string;
+    className?: string;
+}): React.JSX.Element;

package/dist/markdown/code/code-block.js

@@ -0,0 +1,88 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CopyButton } from '../copy-button.js';
+import { languageLabel } from '../unified-markdown-utils.js';
+import { cn } from '../../lib/utils.js';
+import { useIsDark } from '../../hooks/use-is-dark.js';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { CODE_SETTLE_MS, useSettledValue } from '../../lib/settle.js';
+import { highlightAsync, highlightSync, SHIKI_RESET, SHIKI_THEME_DARK, SHIKI_THEME_LIGHT, } from './shiki-highlighter.js';
+export function HighlightedCode({ code, language, children = code, unbounded, isStreaming = false, }) {
+    const isDark = useIsDark();
+    // Which half of the one palette to draw. There is no third option.
+    const theme = isDark ? SHIKI_THEME_DARK : SHIKI_THEME_LIGHT;
+    const opts = useMemo(() => ({ unbounded }), [unbounded]);
+    const target = useSettledValue(code, isStreaming, CODE_SETTLE_MS);
+    const [result, setResult] = useState(null);
+    useEffect(() => {
+        if (target === null)
+            return;
+        if (highlightSync(target, language, theme, opts))
+            return; // rendered synchronously below
+        let alive = true;
+        highlightAsync(target, language, theme, opts).then((html) => {
+            if (alive && html)
+                setResult({ code: target, language, theme, html, unbounded: !!opts.unbounded });
+        });
+        return () => {
+            alive = false;
+        };
+    }, [target, language, theme, opts]);
+    // A settled block reads its HTML synchronously from the cache (or the loaded
+    // grammar) during render, so a remount never flashes plain → colour. Only a
+    // grammar that is not loaded yet goes through the async result above.
+    const html = target === null
+        ? null
+        : (highlightSync(target, language, theme, opts) ??
+            (result &&
+                result.code === target &&
+                result.language === language &&
+                result.theme === theme &&
+                result.unbounded === !!unbounded
+                ? result.html
+                : null));
+    if (html) {
+        return _jsx("code", { className: SHIKI_RESET, dangerouslySetInnerHTML: { __html: html } });
+    }
+    return _jsx("code", { className: "font-mono text-sm leading-[1.65] whitespace-pre", children: children });
+}
+// Flat code card: rounded-lg surface, dashed header (language + copy), highlighted body.
+export function CodeBlock({ code, language, children, isStreaming, className, }) {
+    const scrollRef = useRef(null);
+    const pinRaf = useRef(null);
+    // Follow the tail while the block is still streaming. Without this the
+    // `max-h-[520px]` clamp holds the reader at the top of a block that keeps
+    // growing underneath it — the newest lines, the only ones worth watching,
+    // stay off-screen until the turn ends.
+    //
+    // `el.scrollHeight` is a layout read. Doing it once per streamed token in a
+    // layout effect forces a synchronous layout flush per delta; scheduling it
+    // in `requestAnimationFrame` moves the read to the point the browser is
+    // already computing layout for that frame's paint. Cancelling a pending rAF
+    // before scheduling a new one collapses several deltas that land in the same
+    // frame into the single measurement that frame actually paints.
+    useEffect(() => {
+        if (!isStreaming)
+            return;
+        if (pinRaf.current !== null)
+            cancelAnimationFrame(pinRaf.current);
+        pinRaf.current = requestAnimationFrame(() => {
+            pinRaf.current = null;
+            const el = scrollRef.current;
+            if (el)
+                el.scrollTop = el.scrollHeight;
+        });
+        return () => {
+            if (pinRaf.current !== null) {
+                cancelAnimationFrame(pinRaf.current);
+                pinRaf.current = null;
+            }
+        };
+    }, [isStreaming, code]);
+    return (_jsxs("figure", { className: cn('group not-prose bg-card dark:bg-muted relative my-5 overflow-hidden rounded-md border', className), children: [_jsxs("figcaption", { className: "flex min-h-[29.5px] items-center justify-between gap-2 px-2 py-0.5 text-[12px]", children: [_jsx("span", { "data-testid": "code-block-language", className: "text-muted-foreground font-mono font-medium tracking-wide lowercase select-none", children: languageLabel(language) }), code && _jsx(CopyButton, { code: code })] }), _jsx("pre", { ref: scrollRef, className: cn('bg-popover max-h-[520px] overflow-auto px-4 py-2.5 tracking-tight', 'text-foreground rounded-t-sm font-mono text-xs leading-[1.65]', '[&_code]:border-none [&_code]:bg-transparent [&_code]:p-0 [&_code]:text-xs', '[&_.shiki]:!bg-transparent [&_span]:border-none [&_span]:!bg-transparent [&_span]:outline-none'), children: children })] }));
+}
+// Standalone highlighted code block — bypasses the markdown parser. Used by tool
+// views that render raw file content where markdown parsing would interfere.
+export function CodeHighlight({ code, language, className, }) {
+    return (_jsx(CodeBlock, { code: code, language: language, className: cn('my-0', className), children: _jsx(HighlightedCode, { code: code, language: language }) }));
+}

package/dist/markdown/code/copy-overlay.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare function CopyOverlay({ code, className, children, }: {
+    code: string;
+    className?: string;
+    children: React.ReactNode;
+}): React.JSX.Element;

package/dist/markdown/code/copy-overlay.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CopyButton } from '../copy-button.js';
+import { cn } from '../../lib/utils.js';
+// A floating copy control over whatever the caller already drew.
+//
+// Three sites (write-tool, edit-tool, audit-tab) bring their own frame and only
+// want the copy affordance on top of it. The alternative was pasting the same
+// `absolute top-3 right-3 z-30` at each of them and watching them drift apart —
+// the placement is `BetterCodeBlock`'s, kept byte-identical so those sites do
+// not shift when they move over. The child is rendered as given: no clone, no
+// extra element around it.
+export function CopyOverlay({ code, className, children, }) {
+    return (_jsxs("div", { className: cn('group relative h-full w-full', className), children: [children, _jsx("div", { className: "absolute top-3 right-3 z-30", children: _jsx(CopyButton, { code: code }) })] }));
+}

package/dist/markdown/code/genui-fence.d.ts

@@ -0,0 +1,35 @@
+import { genuiVersionFromClassName, separateGenuiClosers } from '@kortix/sdk/genui/fence';
+export { genuiVersionFromClassName, separateGenuiClosers };
+/** The generative UI fence still open at the end of a reply (`openGenuiFence`). */
+export interface OpenGenuiFence {
+    /**
+     * Its body so far, as the markdown code node holds it (the opener's indentation removed).
+     * Null for a fence inside a blockquote or opened on a list-marker line: the SDK splitter counts
+     * top-level fences only, so its body is unknown.
+     */
+    code: string | null;
+    /** The line that closes it inside the same container: its prefix and marker. */
+    closer: string;
+}
+/**
+ * The generative UI fence still open at the end of `text`, or null. Only the last block of a reply
+ * can be open. Open means the model is still writing it, or the reply was cut off inside it.
+ */
+export declare function openGenuiFence(text: string): OpenGenuiFence | null;
+declare const OPEN_MARK: {
+    readonly streaming: "⁣openui:streaming";
+    readonly 'cut-off': "⁣openui:cut-off";
+};
+/** How an open fence ended: the model is still writing it, or the reply ended inside it. */
+export type GenuiOpenState = keyof typeof OPEN_MARK;
+/**
+ * `text` with its open fence closed in its own container, and a last body line that carries the
+ * fence's state. Streamdown commits a streaming tick's blocks one render after the text changes, so
+ * a block must read its state from its own text: a value beside the text would be a tick ahead.
+ */
+export declare function closeOpenGenuiFence(text: string, fence: OpenGenuiFence, state: GenuiOpenState): string;
+/** A fence body without the state line `closeOpenGenuiFence` added, and that state (null: the fence is closed). */
+export declare function readGenuiOpenMark(code: string): {
+    code: string;
+    open: GenuiOpenState | null;
+};

package/dist/markdown/code/genui-fence.js

@@ -0,0 +1,81 @@
+// The one apps/web import of `@kortix/sdk/genui/fence`: fence detection only, it never loads
+// `@openuidev/*` or `zod`. Listed in CANONICAL_SDK_ENTRIES (`scripts/sdk-boundary.mjs`).
+// eslint-disable-next-line no-restricted-imports -- light fence helpers for the main markdown chunk
+import { genuiVersionFromClassName, genuiVersionOf, separateGenuiClosers, splitGenui } from '@kortix/sdk/genui/fence';
+export { genuiVersionFromClassName, separateGenuiClosers };
+// A fence line after its container prefix (spaces, `>`, one list marker), as CommonMark reads it.
+const CONTAINER_FENCE = /^([ \t>]*(?:(?:[-*+]|\d{1,9}[.)])[ \t]+)?)(`{3,}|~{3,})([^`]*)$/;
+const CLOSE = /^[ \t>]*(`{3,}|~{3,})[ \t]*$/;
+/**
+ * The generative UI fence still open at the end of `text`, or null. Only the last block of a reply
+ * can be open. Open means the model is still writing it, or the reply was cut off inside it.
+ */
+export function openGenuiFence(text) {
+    if (!/openui/i.test(text))
+        return null;
+    const last = splitGenui(text).at(-1);
+    if (last?.kind === 'genui' && !last.closed) {
+        // The body is everything after the opener line, so the opener is the last line before it.
+        const opener = text.slice(0, text.length - last.code.length).replace(/\n$/, '').split('\n').pop() ?? '';
+        const indent = /^ */.exec(opener)[0];
+        const marker = /`{3,}|~{3,}/.exec(opener)?.[0] ?? '```';
+        // CommonMark removes up to the opener's indentation from each content line (a fence in a list item).
+        const strip = (line) => {
+            let cut = 0;
+            while (cut < indent.length && line[cut] === ' ')
+                cut++;
+            return line.slice(cut);
+        };
+        const code = indent ? last.code.split('\n').map(strip).join('\n') : last.code;
+        return { code, closer: `\n${indent}${marker}` };
+    }
+    return openNestedFence(text);
+}
+/** An unclosed generative UI fence the top-level splitter does not count: in a blockquote, or on a list-marker line. */
+function openNestedFence(text) {
+    let open = null;
+    for (const line of text.split('\n')) {
+        if (open) {
+            const close = CLOSE.exec(line);
+            if (close && close[1][0] === open.marker[0] && close[1].length >= open.marker.length)
+                open = null;
+            continue;
+        }
+        const fence = CONTAINER_FENCE.exec(line);
+        if (fence)
+            open = { prefix: fence[1], marker: fence[2], genui: genuiVersionOf(fence[3].trim().split(/\s/)[0] ?? '') !== null };
+    }
+    if (!open?.genui)
+        return null;
+    // Inside the same container: a quote keeps its `>`, a list marker becomes the content indent.
+    const prefix = open.prefix.replace(/[-*+]|\d{1,9}[.)]/g, (marker) => ' '.repeat(marker.length));
+    return { code: null, closer: `\n${prefix}${open.marker}` };
+}
+// The last body line `closeOpenGenuiFence` adds. U+2063 (invisible separator) keeps it from
+// colliding with a line the model writes; `readGenuiOpenMark` removes it before anything renders.
+const OPEN_MARK = { streaming: '⁣openui:streaming', 'cut-off': '⁣openui:cut-off' };
+/**
+ * `text` with its open fence closed in its own container, and a last body line that carries the
+ * fence's state. Streamdown commits a streaming tick's blocks one render after the text changes, so
+ * a block must read its state from its own text: a value beside the text would be a tick ahead.
+ */
+export function closeOpenGenuiFence(text, fence, state) {
+    // The closer without its marker. A loop, not /[`~]+$/: that regex backtracks quadratically on a long run of backticks.
+    const line = fence.closer.slice(1);
+    let end = line.length;
+    while (end > 0 && (line[end - 1] === '`' || line[end - 1] === '~'))
+        end--;
+    const prefix = line.slice(0, end);
+    return `${text}\n${prefix}${OPEN_MARK[state]}${fence.closer}`;
+}
+/** A fence body without the state line `closeOpenGenuiFence` added, and that state (null: the fence is closed). */
+export function readGenuiOpenMark(code) {
+    for (const state of Object.keys(OPEN_MARK)) {
+        const mark = OPEN_MARK[state];
+        if (code === mark)
+            return { code: '', open: state };
+        if (code.endsWith(`\n${mark}`))
+            return { code: code.slice(0, -mark.length - 1), open: state };
+    }
+    return { code, open: null };
+}

package/dist/markdown/code/index.d.ts

@@ -0,0 +1,6 @@
+export { childrenToText } from './children-text.js';
+export { CodeBlock, CodeHighlight, HighlightedCode } from './code-block.js';
+export { CopyOverlay } from './copy-overlay.js';
+export { ClickableInlineCode } from './inline-code.js';
+export { HexColorCode, INLINE_CODE, isHexColor } from './inline-chip.js';
+export { MarkdownCode } from './markdown-code.js';

package/dist/markdown/code/index.js

@@ -0,0 +1,18 @@
+// The one import path for the code COMPONENTS: `@/components/markdown/code`.
+//
+// The rule: own frame → `HighlightedCode`. Want a finished card →
+// `CodeHighlight`. Inside markdown → nothing, `MarkdownCode` handles it.
+// `CopyOverlay` floats a copy button over any of them.
+//
+// The palette is not a parameter. Every surface renders under the one pair in
+// `@/lib/code-theme` — that module, not this barrel, is the import path for
+// the theme constants; `HighlightedCode` picks the half from the active theme.
+export { childrenToText } from './children-text.js';
+export { CodeBlock, CodeHighlight, HighlightedCode } from './code-block.js';
+export { CopyOverlay } from './copy-overlay.js';
+export { ClickableInlineCode } from './inline-code.js';
+// From the server-safe module, not through the client one: re-exporting a
+// plain function out of a `'use client'` file hands a server consumer a client
+// reference, which throws the moment it is CALLED. See `inline-chip.tsx`.
+export { HexColorCode, INLINE_CODE, isHexColor } from './inline-chip.js';
+export { MarkdownCode } from './markdown-code.js';

package/dist/markdown/code/inline-chip.d.ts

@@ -0,0 +1,42 @@
+import type React from 'react';
+/**
+ * The chip sits IN the line, not beside it.
+ *
+ * No `display` of its own, and no `vertical-align`: an inline box shares the
+ * paragraph's baseline for free, and its border box hugs the font's content
+ * area, so the chip is the height of the text it interrupts. Both of the
+ * obvious-looking alternatives are what knocked it out of line:
+ *
+ *   - `align-middle` centres the box on the parent's baseline PLUS half the
+ *     parent's x-height. The chip is `text-[0.8rem]` inside `text-sm` prose,
+ *     so its own baseline landed visibly BELOW the surrounding text's — the
+ *     chip appeared to sag under the sentence.
+ *   - `inline-flex` makes the chip atomic: its height comes from the flex line
+ *     box (`code { line-height: 1.2 }` in globals.css) plus padding rather than
+ *     from the glyphs, so it towers over the prose, and — being unbreakable —
+ *     a long URL can no longer wrap across two lines the way
+ *     `[overflow-wrap:anywhere]` promises.
+ *
+ * `text-center` is gone with them: a chip is one line of text as wide as its
+ * content, so there is nothing for it to centre.
+ */
+export declare const INLINE_CODE: string;
+export declare function isHexColor(text: string): boolean;
+/**
+ * A hex colour in a message, showing the colour it names.
+ *
+ * `#0ea5e9` in prose is a value nobody can read: the reader has to paste it
+ * somewhere to find out whether the agent picked a blue or a green. The chip
+ * keeps the hex — it is what gets copied into a stylesheet, so it must stay
+ * literal and selectable — and puts a square of the actual colour in front of
+ * it, sized in `em` so it tracks the chip's own text.
+ *
+ * The square is `aria-hidden`: it adds no information a screen reader can use
+ * that the hex itself does not already carry. The ring is what keeps
+ * `#ffffff` visible on a light chip and `#000000` visible on a dark one — a
+ * swatch with no edge disappears into exactly the background it matches.
+ */
+export declare function HexColorCode({ hex, children }: {
+    hex: string;
+    children: React.ReactNode;
+}): React.JSX.Element;