@kortix/ui 0.0.0-bootstrap.0 → 0.14.3

package/dist/lib/z-stack.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+const DialogDepthContext = React.createContext(0);
+DialogDepthContext.displayName = 'DialogDepthContext';
+export function DialogDepthProvider({ depth, children, }) {
+    return _jsx(DialogDepthContext.Provider, { value: depth, children: children });
+}
+export function useDialogDepth() {
+    return React.useContext(DialogDepthContext);
+}
+const dialogLayers = new Map();
+const dialogLayerListeners = new Set();
+function subscribeDialogLayers(listener) {
+    dialogLayerListeners.add(listener);
+    return () => {
+        dialogLayerListeners.delete(listener);
+    };
+}
+/** Level held by `id`, or 0 when unregistered. Kept after close on purpose. */
+export function dialogLayerLevel(id) {
+    return dialogLayers.get(id)?.level ?? 0;
+}
+/**
+ * Mark `id` open and return its level. A layer that is already open keeps its
+ * level (it only rises to `minLevel`, its React-tree floor), so a sibling
+ * opening above it never reshuffles it. A layer that is opening takes the next
+ * level above every other open layer.
+ */
+export function openDialogLayer(id, minLevel) {
+    const current = dialogLayers.get(id);
+    let level;
+    if (current?.open) {
+        level = Math.max(current.level, minLevel);
+        if (level === current.level)
+            return level;
+    }
+    else {
+        let highest = 0;
+        for (const [otherId, layer] of dialogLayers) {
+            if (otherId !== id && layer.open)
+                highest = Math.max(highest, layer.level);
+        }
+        level = Math.max(minLevel, highest + 1);
+    }
+    dialogLayers.set(id, { level, open: true });
+    dialogLayerListeners.forEach((listener) => listener());
+    return level;
+}
+/**
+ * Mark `id` closed. Its level is kept so the exit animation stays above the
+ * layer beneath it; it just stops raising layers that open afterwards.
+ */
+export function closeDialogLayer(id) {
+    const current = dialogLayers.get(id);
+    if (current?.open)
+        dialogLayers.set(id, { level: current.level, open: false });
+}
+export function removeDialogLayer(id) {
+    dialogLayers.delete(id);
+}
+const serverDialogLayerLevel = () => 0;
+/**
+ * Depth for a layer that is `open`: its runtime level, never below the depth
+ * its React ancestors imply. Provide the result through `DialogDepthProvider`
+ * so nested selects, menus, and modals stack above it.
+ */
+export function useDialogLayerDepth(open) {
+    const id = React.useId();
+    const parentDepth = useDialogDepth();
+    const level = React.useSyncExternalStore(subscribeDialogLayers, () => dialogLayerLevel(id), serverDialogLayerLevel);
+    // Layout effect: the level lands in the store, and the store update
+    // re-renders synchronously before paint — the first open frame is never
+    // drawn at the wrong z-index.
+    React.useLayoutEffect(() => {
+        if (open)
+            openDialogLayer(id, parentDepth + 1);
+        else
+            closeDialogLayer(id);
+    }, [id, open, parentDepth]);
+    React.useLayoutEffect(() => () => removeDialogLayer(id), [id]);
+    return Math.max(level, parentDepth + 1);
+}
+/**
+ * `useDialogLayerDepth` for a Radix dialog root. The stack needs the open state
+ * of uncontrolled roots too, so this owns it and hands Radix a controlled
+ * `open` / `onOpenChange` pair — observable behaviour is unchanged.
+ */
+export function useDialogRootLayer({ open, defaultOpen, onOpenChange }) {
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+    const isControlled = open !== undefined;
+    const resolvedOpen = isControlled ? open : uncontrolledOpen;
+    const handleOpenChange = React.useCallback((next) => {
+        if (!isControlled)
+            setUncontrolledOpen(next);
+        onOpenChange?.(next);
+    }, [isControlled, onOpenChange]);
+    return {
+        depth: useDialogLayerDepth(resolvedOpen),
+        open: resolvedOpen,
+        onOpenChange: handleOpenChange,
+    };
+}
+export function dialogOverlayZ(depth) {
+    const level = Math.max(1, depth);
+    return 9998 + (level - 1) * 20;
+}
+export function dialogContentZ(depth) {
+    const level = Math.max(1, depth);
+    return 9999 + (level - 1) * 20;
+}
+export function floatingZ(depth) {
+    if (depth <= 0)
+        return 10001;
+    return dialogContentZ(depth) + 2;
+}
+/** Portaled popovers/menus/selects rendered outside dialog DOM. */
+export const FLOATING_LAYER_SELECTOR = '[role="menu"],[role="listbox"],[role="tooltip"],[data-radix-popper-content-wrapper]';
+export function isFloatingLayerTarget(target) {
+    return target instanceof Element && Boolean(target.closest(FLOATING_LAYER_SELECTOR));
+}
+export function hasOpenFloatingLayer() {
+    return Boolean(document.querySelector('[role="menu"][data-state="open"],[role="listbox"][data-state="open"],[data-radix-popper-content-wrapper] [data-state="open"]'));
+}
+/** Nested modals/sheets opened above the customize panel (or any parent dialog).
+ *  Radix gives alerts `role="alertdialog"`, so confirm dialogs only count here
+ *  if that role is matched too — miss it and Escape aimed at a confirm tears
+ *  down the panel behind it. */
+export function hasOpenNestedDialog() {
+    return (document.querySelectorAll('[role="dialog"][data-state="open"],[role="alertdialog"][data-state="open"]').length > 1);
+}

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

@@ -0,0 +1,141 @@
+import * as React from 'react';
+/**
+ * The host adapters for @kortix/ui: the copy components render when the
+ * caller passes no label, the link component they navigate with, and the
+ * organization marks KortixLogo renders. A host mounts <UiProvider> once at
+ * its root. Without one, components render the English defaults, a plain <a>
+ * and the Kortix logo.
+ */
+/**
+ * The copy @kortix/ui/chat renders. Every key has an English default; a host
+ * passes the keys it translates as `strings.chat`. Function keys take the
+ * value they interpolate.
+ */
+export interface ChatStrings {
+    /** Empty transcript hint. */
+    emptyState: string;
+    loadingConversation: string;
+    sending: string;
+    agentWorking: string;
+    /** Composer placeholder while the runtime is ready. */
+    placeholder: string;
+    /** Appended to `placeholder` when the session has at least one command. */
+    placeholderCommandsHint: string;
+    /** Composer placeholder while the runtime is not ready. */
+    placeholderWaiting: string;
+    /** Composer textarea label. */
+    message: string;
+    /** Slash-command menu label and header. */
+    commands: string;
+    send: string;
+    stop: string;
+    runtimeStopped: string;
+    reconnect: string;
+    connectingRuntime: string;
+    /** Model picker trigger label. */
+    model: string;
+    defaultModel: string;
+    searchModels: string;
+    models: string;
+    noModelsMatch: string;
+    /** Agent picker trigger label. */
+    agent: string;
+    defaultAgent: string;
+    /** The default agent's row: `name (default)`. */
+    defaultAgentNamed: (name: string) => string;
+    thoughtProcess: string;
+    /** Retry note while the model call is retried. */
+    retrying: (attempt: number, message: string) => string;
+    /** Under the error row that ended an automatic recovery chain. */
+    autoRetried: (count: number) => string;
+    contextCompacted: string;
+    contextCompactedAuto: string;
+    delegatedTo: (agent: string) => string;
+    filesChanged: (count: number) => string;
+    questionTitle: string;
+    questionsTitle: (count: number) => string;
+    stopAndCancel: string;
+    customAnswerPlaceholder: string;
+    customAnswerLabel: string;
+    submitAnswer: string;
+    answerFailed: string;
+    /** Permission prompt: the `Allow` before the permission name and the `?` after it. */
+    allowPrefix: string;
+    allowSuffix: string;
+    /** Fallback permission name. */
+    thisAction: string;
+    deny: string;
+    always: string;
+    allowOnce: string;
+    decisionFailed: string;
+    sendFailedBilling: string;
+    sendFailedRuntimeNotReady: string;
+    sendFailedRuntimeError: string;
+    sendFailedModel: (provider: string) => string;
+    sendFailed: string;
+    /** Title of the alert when a slash command is refused. */
+    commandFailed: string;
+    webSearchFailed: (error: string) => string;
+    noResults: string;
+    noMatches: string;
+    todoItems: (count: number) => string;
+}
+export declare const defaultChatStrings: ChatStrings;
+/**
+ * Every string @kortix/ui renders by itself. Components that render copy
+ * without a caller-supplied label read it from here, so a host translates
+ * them once through `<UiProvider strings>`. Copy not listed here is English
+ * only (MermaidRenderer's controls).
+ */
+export interface UiStrings {
+    /** ConfirmDialog confirm button. */
+    confirm: string;
+    /** ConfirmDialog and TypeToConfirmDialog cancel button. */
+    cancel: string;
+    /** Screen-reader label of the Dialog and Sheet close button. */
+    close: string;
+    /** CommandDialog screen-reader title. */
+    commandPaletteTitle: string;
+    /** CommandDialog screen-reader description. */
+    commandPaletteDescription: string;
+    /** @kortix/ui/chat copy. */
+    chat: ChatStrings;
+}
+export declare const defaultUiStrings: UiStrings;
+/** What a host passes as `strings`: any subset, `chat` included. */
+export type UiStringsInput = Partial<Omit<UiStrings, 'chat'>> & {
+    chat?: Partial<ChatStrings>;
+};
+export type UiLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+    ref?: React.Ref<HTMLAnchorElement>;
+};
+export type UiLinkComponent = React.ComponentType<UiLinkProps>;
+/** Organization marks that replace the Kortix logo. Each `*_dark_url` falls back to its light mark. */
+export interface UiBrand {
+    /** Alt text of the replaced logo. */
+    app_name?: string | null;
+    /** Wide brandmark: replaces the `brandmark` logo variant. */
+    logo_url?: string | null;
+    /** Square symbol: replaces the `icon` logo variant. */
+    icon_url?: string | null;
+    logo_dark_url?: string | null;
+    icon_dark_url?: string | null;
+}
+/**
+ * A hook that returns the brand for the subtree it is called in. KortixLogo
+ * calls it on every render, so the host can read its own context (apps/web
+ * passes `useBranding`). It must call the same hooks on every render.
+ */
+export type UseUiBrand = () => UiBrand | null;
+export declare function UiProvider({ strings, link, useBrand, children, }: {
+    strings?: UiStringsInput;
+    link?: UiLinkComponent;
+    /** Default: no brand, so KortixLogo renders the Kortix marks. */
+    useBrand?: UseUiBrand;
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function useUiStrings(): UiStrings;
+export declare function useUiLink(): UiLinkComponent;
+/** The host's organization brand for this subtree, or null for the Kortix marks. */
+export declare function useUiBrand(): UiBrand | null;

package/dist/providers/ui-provider.js

@@ -0,0 +1,93 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+export const defaultChatStrings = {
+    emptyState: 'Send a message to get the agent working.',
+    loadingConversation: 'Loading conversation…',
+    sending: 'Sending…',
+    agentWorking: 'Agent is working…',
+    placeholder: 'Message the agent…',
+    placeholderCommandsHint: '  (/ for commands)',
+    placeholderWaiting: 'Waiting for the runtime…',
+    message: 'Message',
+    commands: 'Commands',
+    send: 'Send',
+    stop: 'Stop',
+    runtimeStopped: 'The runtime stopped. Reconnect to keep chatting.',
+    reconnect: 'Reconnect',
+    connectingRuntime: 'Connecting to the runtime…',
+    model: 'Model',
+    defaultModel: 'Default model',
+    searchModels: 'Search models…',
+    models: 'Models',
+    noModelsMatch: 'No models match.',
+    agent: 'Agent',
+    defaultAgent: 'Default agent',
+    defaultAgentNamed: (name) => `${name} (default)`,
+    thoughtProcess: 'Thought process',
+    retrying: (attempt, message) => `Retrying (attempt ${attempt}): ${message}`,
+    autoRetried: (count) => `Retried automatically ${count === 1 ? 'once' : `${count} times`} before this failure.`,
+    contextCompacted: 'Context compacted',
+    contextCompactedAuto: 'Context compacted automatically',
+    delegatedTo: (agent) => `Delegated to ${agent}`,
+    filesChanged: (count) => `${count} file${count === 1 ? '' : 's'} changed`,
+    questionTitle: 'The agent has a question',
+    questionsTitle: (count) => `${count} questions`,
+    stopAndCancel: 'Stop and cancel',
+    customAnswerPlaceholder: 'Type your own answer…',
+    customAnswerLabel: 'Your own answer',
+    submitAnswer: 'Submit answer',
+    answerFailed: 'Could not send your answer',
+    allowPrefix: 'Allow',
+    allowSuffix: '?',
+    thisAction: 'this action',
+    deny: 'Deny',
+    always: 'Always',
+    allowOnce: 'Allow once',
+    decisionFailed: 'Could not send your decision',
+    sendFailedBilling: 'This session is out of credit',
+    sendFailedRuntimeNotReady: 'The runtime is still starting',
+    sendFailedRuntimeError: 'The agent could not run that',
+    sendFailedModel: (provider) => `The ${provider} model failed`,
+    sendFailed: 'Your message was not sent',
+    commandFailed: 'The command did not run',
+    webSearchFailed: (error) => `Web search failed: ${error}`,
+    noResults: 'No results.',
+    noMatches: 'No matches.',
+    todoItems: (count) => `${count} item${count === 1 ? '' : 's'}`,
+};
+export const defaultUiStrings = {
+    confirm: 'Confirm',
+    cancel: 'Cancel',
+    close: 'Close',
+    commandPaletteTitle: 'Command Palette',
+    commandPaletteDescription: 'Search for a command to run...',
+    chat: defaultChatStrings,
+};
+const useNoBrand = () => null;
+const DefaultLink = React.forwardRef(function DefaultLink(props, ref) {
+    return _jsx("a", { ref: ref, ...props });
+});
+const UiContext = React.createContext({
+    strings: defaultUiStrings,
+    link: DefaultLink,
+    useBrand: useNoBrand,
+});
+export function UiProvider({ strings, link, useBrand, children, }) {
+    const value = React.useMemo(() => ({
+        strings: { ...defaultUiStrings, ...strings, chat: { ...defaultChatStrings, ...strings?.chat } },
+        link: link ?? DefaultLink,
+        useBrand: useBrand ?? useNoBrand,
+    }), [strings, link, useBrand]);
+    return _jsx(UiContext.Provider, { value: value, children: children });
+}
+export function useUiStrings() {
+    return React.useContext(UiContext).strings;
+}
+export function useUiLink() {
+    return React.useContext(UiContext).link;
+}
+/** The host's organization brand for this subtree, or null for the Kortix marks. */
+export function useUiBrand() {
+    return React.useContext(UiContext).useBrand();
+}