@ctrl-ui/react 0.8.7 → 0.8.9

package/dist/hooks/use-textarea-trigger-menu.js

@@ -1,6 +1,6 @@
 "use client";
+import { isComposingKey, useTriggerMenu } from "./use-trigger-menu.js";
 import { caretRectInTextarea, detectTrigger } from "../lib/trigger-detect.js";
-import { useTriggerMenu } from "./use-trigger-menu.js";
 import { useEffect, useEffectEvent } from "react";
 //#region src/hooks/use-textarea-trigger-menu.ts
 function replaceRange(element, start, end, text) {
@@ -36,6 +36,7 @@ function useTextareaTriggerMenu(ref, options) {
 		controller.report(match, match === null ? null : caretRectInTextarea(element, match.start));
 	});
 	const handleKeyDown = useEffectEvent((event) => {
+		if (isComposingKey(event)) return;
 		if (controller.open && controller.handleKeyDown(event.key)) event.preventDefault();
 	});
 	const closeAfterBlur = useEffectEvent(() => {

package/dist/hooks/use-trigger-menu.d.ts

@@ -27,6 +27,16 @@ export type UseTriggerMenuOptions<Item extends TriggerMenuItemData> = {
   triggers: readonly TriggerConfig<Item>[];
   onCommit: (item: Item, trigger: TriggerConfig<Item>, match: TriggerMatch) => void;
 };
+/**
+ * Popup attributes for the element that keeps focus (textarea or editor) while the menu is up. It stays a
+ * multiline textbox (a <textarea> can't take role="combobox"), so open state is conveyed by `aria-controls`.
+ */
+export type TriggerMenuInputAria = {
+  "aria-autocomplete": "list";
+  "aria-haspopup": "listbox";
+  "aria-controls"?: string;
+  "aria-activedescendant"?: string;
+};
 export type TriggerMenuController<Item extends TriggerMenuItemData> = {
   open: boolean;
   items: readonly Item[];
@@ -34,6 +44,11 @@ export type TriggerMenuController<Item extends TriggerMenuItemData> = {
   anchorRect: DOMRect | null;
   activeChar: string | null;
   query: string;
+  /** Id for `TriggerMenuList`; the input's `aria-controls` points at it. */
+  listId: string;
+  /** Id for the option at `index`; the input's `aria-activedescendant` points at the active one. */
+  optionId: (index: number) => string;
+  inputAria: TriggerMenuInputAria;
   /** Binding → engine: publish current trigger match (or null) and caret rect to anchor to. */
   report: (match: TriggerMatch | null, anchorRect: DOMRect | null) => void;
   /** Binding → engine: route keydown while open. Returns true when engine consumed key. */
@@ -44,5 +59,44 @@ export type TriggerMenuController<Item extends TriggerMenuItemData> = {
   close: () => void;
   setOpen: (open: boolean) => void;
 };
+type DismissedMatch = {
+  char: string;
+  start: number;
+  query: string;
+};
+export type TriggerMenuState = {
+  open: boolean;
+  char: string | null;
+  query: string;
+  anchorRect: DOMRect | null;
+  activeIndex: number;
+  dismissed: DismissedMatch | null;
+};
+export type TriggerMenuAction = {
+  type: "report";
+  match: TriggerMatch | null;
+  anchorRect: DOMRect | null;
+} | {
+  type: "close";
+  dismissed: DismissedMatch | null;
+} | {
+  type: "move";
+  delta: number;
+  count: number;
+} | {
+  type: "activate";
+  index: number;
+};
+export declare const CLOSED_TRIGGER_MENU: TriggerMenuState;
+/** A dismissed token stays closed until its query changes, so keyup/click re-detection after Escape can't reopen it. */
+export declare function triggerMenuReducer(state: TriggerMenuState, action: TriggerMenuAction): TriggerMenuState;
+/** Keys an IME is still composing must never reach the menu or the composer's submit. */
+export declare function isComposingKey(event: {
+  isComposing: boolean;
+  keyCode: number;
+}): boolean;
+export type TriggerMenuKeyIntent = "next" | "previous" | "commit" | "dismiss" | "pass";
+/** What a key means to an open menu; an empty list passes Enter/Tab through so newline, submit and Tab-out still work. */
+export declare function triggerMenuKeyIntent(key: string, open: boolean, itemCount: number): TriggerMenuKeyIntent;
 export declare function useTriggerMenu<Item extends TriggerMenuItemData>({ triggers, onCommit }: UseTriggerMenuOptions<Item>): TriggerMenuController<Item>;
 //#endregion

package/dist/hooks/use-trigger-menu.js

@@ -1,12 +1,48 @@
-import { useRef, useState } from "react";
+import { useId, useReducer, useRef } from "react";
 //#region src/hooks/use-trigger-menu.ts
-const CLOSED = {
+const CLOSED_TRIGGER_MENU = {
 	open: false,
 	char: null,
 	query: "",
 	anchorRect: null,
-	activeIndex: 0
+	activeIndex: 0,
+	dismissed: null
 };
+/** A dismissed token stays closed until its query changes, so keyup/click re-detection after Escape can't reopen it. */
+function triggerMenuReducer(state, action) {
+	switch (action.type) {
+		case "report": {
+			const { match, anchorRect } = action;
+			if (match === null) return { ...CLOSED_TRIGGER_MENU };
+			const { dismissed } = state;
+			if (dismissed !== null && dismissed.char === match.char && dismissed.start === match.start && dismissed.query === match.query) return {
+				...CLOSED_TRIGGER_MENU,
+				dismissed
+			};
+			const activeIndex = state.open && state.char === match.char && state.query === match.query ? state.activeIndex : 0;
+			return {
+				open: true,
+				char: match.char,
+				query: match.query,
+				anchorRect,
+				activeIndex,
+				dismissed: null
+			};
+		}
+		case "close": return {
+			...CLOSED_TRIGGER_MENU,
+			dismissed: action.dismissed
+		};
+		case "move": return {
+			...state,
+			activeIndex: action.count === 0 ? 0 : (state.activeIndex + action.delta + action.count) % action.count
+		};
+		case "activate": return {
+			...state,
+			activeIndex: action.index
+		};
+	}
+}
 function matchesQuery(item, query) {
 	if (query === "") return true;
 	const needle = query.toLowerCase();
@@ -18,14 +54,45 @@ function resolveItems(trigger, query) {
 	const filter = trigger.filter ?? matchesQuery;
 	return trigger.items.filter((item) => filter(item, query));
 }
+/** Keys an IME is still composing must never reach the menu or the composer's submit. */
+function isComposingKey(event) {
+	return event.isComposing || event.keyCode === 229;
+}
+/** What a key means to an open menu; an empty list passes Enter/Tab through so newline, submit and Tab-out still work. */
+function triggerMenuKeyIntent(key, open, itemCount) {
+	if (!open) return "pass";
+	if (key === "ArrowDown") return "next";
+	if (key === "ArrowUp") return "previous";
+	if (key === "Escape") return "dismiss";
+	if ((key === "Enter" || key === "Tab") && itemCount > 0) return "commit";
+	return "pass";
+}
 function useTriggerMenu({ triggers, onCommit }) {
-	const [state, setState] = useState(CLOSED);
+	const [state, dispatch] = useReducer(triggerMenuReducer, CLOSED_TRIGGER_MENU);
 	const lastMatch = useRef(null);
+	const listId = useId();
 	const activeTrigger = state.char === null ? null : triggers.find((trigger) => trigger.char === state.char) ?? null;
 	const items = activeTrigger === null ? [] : resolveItems(activeTrigger, state.query);
+	const optionId = (index) => `${listId}-option-${index}`;
+	const hasActiveItem = state.open && state.activeIndex < items.length;
+	function dismiss() {
+		const match = lastMatch.current;
+		lastMatch.current = null;
+		dispatch({
+			type: "close",
+			dismissed: match === null ? null : {
+				char: match.char,
+				start: match.start,
+				query: match.query
+			}
+		});
+	}
 	function close() {
 		lastMatch.current = null;
-		setState(CLOSED);
+		dispatch({
+			type: "close",
+			dismissed: null
+		});
 	}
 	function select(item) {
 		const match = lastMatch.current;
@@ -33,55 +100,35 @@ function useTriggerMenu({ triggers, onCommit }) {
 		close();
 	}
 	function report(match, anchorRect) {
-		lastMatch.current = match;
-		const open = match !== null && triggers.some((trigger) => trigger.char === match.char);
-		setState((current) => {
-			if (!open || match === null) return CLOSED;
-			const activeIndex = current.char === match.char && current.query === match.query ? current.activeIndex : 0;
-			return {
-				open: true,
-				char: match.char,
-				query: match.query,
-				anchorRect,
-				activeIndex
-			};
+		const known = match !== null && triggers.some((trigger) => trigger.char === match.char);
+		lastMatch.current = known ? match : null;
+		dispatch({
+			type: "report",
+			match: known ? match : null,
+			anchorRect
 		});
 	}
 	function handleKeyDown(key) {
-		if (!state.open) return false;
-		if (key === "ArrowDown") {
-			setState((current) => ({
-				...current,
-				activeIndex: items.length === 0 ? 0 : (current.activeIndex + 1) % items.length
-			}));
-			return true;
-		}
-		if (key === "ArrowUp") {
-			setState((current) => ({
-				...current,
-				activeIndex: items.length === 0 ? 0 : (current.activeIndex - 1 + items.length) % items.length
-			}));
-			return true;
-		}
-		if (key === "Enter" || key === "Tab") {
+		const intent = triggerMenuKeyIntent(key, state.open, items.length);
+		if (intent === "next" || intent === "previous") dispatch({
+			type: "move",
+			delta: intent === "next" ? 1 : -1,
+			count: items.length
+		});
+		else if (intent === "commit") {
 			const item = items[state.activeIndex];
 			if (item && !item.disabled) select(item);
-			return true;
-		}
-		if (key === "Escape") {
-			close();
-			return true;
-		}
-		return false;
+		} else if (intent === "dismiss") dismiss();
+		return intent !== "pass";
 	}
 	function setOpen(open) {
-		if (!open) close();
+		if (!open) dismiss();
 	}
-	function setActiveIndex(activeIndex) {
-		setState((current) => ({
-			...current,
-			activeIndex
-		}));
+	function setActiveIndex(index) {
+		dispatch({
+			type: "activate",
+			index
+		});
 	}
 	return {
 		open: state.open,
@@ -90,6 +137,14 @@ function useTriggerMenu({ triggers, onCommit }) {
 		anchorRect: state.anchorRect,
 		activeChar: state.char,
 		query: state.query,
+		listId,
+		optionId,
+		inputAria: {
+			"aria-autocomplete": "list",
+			"aria-haspopup": "listbox",
+			"aria-controls": state.open ? listId : void 0,
+			"aria-activedescendant": hasActiveItem ? optionId(state.activeIndex) : void 0
+		},
 		report,
 		handleKeyDown,
 		setActiveIndex,
@@ -99,4 +154,4 @@ function useTriggerMenu({ triggers, onCommit }) {
 	};
 }
 //#endregion
-export { useTriggerMenu };
+export { CLOSED_TRIGGER_MENU, isComposingKey, triggerMenuKeyIntent, triggerMenuReducer, useTriggerMenu };

package/dist/hooks/use-user-ask.d.ts

@@ -6,6 +6,7 @@ export type UserAskProps = Omit<ComponentProps<"section">, "style"> & {
   children?: ReactNode;
   onComplete?: (answers: UserAskAnswers) => void;
   onDismiss?: () => void;
+  questionStatusLabel?: (current: number, total: number, title: string) => string;
   style?: CSSProperties & UserAskKnobStyle;
 };
 export type UserAskQuestionEntry = {
@@ -36,6 +37,7 @@ export declare function useUserAsk({ onComplete, onDismiss }: Pick<UserAskProps,
   allowsMultiple: (questionId: string) => boolean;
   selectionFor: (questionId: string) => string;
   isSelected: (questionId: string, optionKey: string) => boolean;
+  isTabStop: (questionId: string, optionKey: string) => boolean;
   select: (questionId: string, optionKey: string) => void;
   freeformTextFor: (questionId: string) => string;
   setFreeformText: (questionId: string, text: string) => void;

package/dist/hooks/use-user-ask.js

@@ -8,6 +8,12 @@ function upsert(entries, entry) {
 	next[index] = entry;
 	return next;
 }
+const arrowDeltas = {
+	ArrowDown: 1,
+	ArrowRight: 1,
+	ArrowUp: -1,
+	ArrowLeft: -1
+};
 function useUserAsk({ onComplete, onDismiss }) {
 	const [questions, setQuestions] = useState([]);
 	const [optionsByQuestion, setOptionsByQuestion] = useState({});
@@ -114,21 +120,11 @@ function useUserAsk({ onComplete, onDismiss }) {
 	function dismiss() {
 		onDismiss?.();
 	}
-	function moveSelection(delta) {
-		if (!activeQuestion) return;
-		const options = optionsFor(activeQuestion.id);
-		if (!options.some((option) => !option.disabled)) return;
-		const currentKey = selectionFor(activeQuestion.id);
-		const currentIndex = options.findIndex((option) => option.key === currentKey);
-		let start = currentIndex;
-		if (currentIndex === -1) start = delta > 0 ? -1 : 0;
-		for (let step = 1; step <= options.length; step += 1) {
-			const candidate = options[(start + delta * step + options.length * step) % options.length];
-			if (candidate && !candidate.disabled) {
-				select(activeQuestion.id, candidate.key);
-				return;
-			}
-		}
+	function isTabStop(questionId, optionKey) {
+		if (allowsMultiple(questionId)) return true;
+		const selectedKey = selectionFor(questionId);
+		if (selectedKey !== void 0) return selectedKey === optionKey;
+		return optionsFor(questionId).find((option) => !option.disabled)?.key === optionKey;
 	}
 	function selectDigit(digit) {
 		if (!activeQuestion) return;
@@ -137,39 +133,28 @@ function useUserAsk({ onComplete, onDismiss }) {
 	}
 	function moveActiveOption(event, delta) {
 		if (!activeQuestion) return;
-		if (!allowsMultiple(activeQuestion.id)) {
-			moveSelection(delta);
-			return;
-		}
 		const rows = [...event.currentTarget.querySelector("[data-slot=\"question\"][data-active]")?.querySelectorAll("[data-slot=\"option\"]:not([disabled])") ?? []];
 		if (rows.length === 0) return;
 		const focused = rows.findIndex((candidate) => candidate.contains(document.activeElement));
 		let start = focused;
 		if (focused === -1) start = delta > 0 ? -1 : 0;
 		const row = rows[(start + delta + rows.length) % rows.length];
-		(row?.matches("button, input") ? row : row?.querySelector("input, button"))?.focus();
-	}
-	function handleKeyDown(event) {
-		if (event.defaultPrevented) return;
-		if (event.key === "Escape") {
-			event.preventDefault();
-			dismiss();
-			return;
-		}
-		if (event.key === "Enter") {
+		const target = row?.matches("button, input") ? row : row?.querySelector("input, button");
+		target?.focus();
+		if (!allowsMultiple(activeQuestion.id) && target?.matches("button")) target.click();
+	}
+	function handleEnter(event) {
+		if (event.nativeEvent.isComposing || event.keyCode === 229) return;
+		if (event.target instanceof Element && event.target.closest("button:not([role=\"radio\"]):not([role=\"checkbox\"]), a[href]")) return;
+		event.preventDefault();
+		advance();
+	}
+	function handleOptionKey(event) {
+		if (event.target instanceof Element && event.target.closest("input, textarea, [contenteditable]")) return;
+		const delta = arrowDeltas[event.key];
+		if (delta !== void 0) {
 			event.preventDefault();
-			advance();
-			return;
-		}
-		if (event.target instanceof HTMLElement && event.target.closest("input, textarea, [contenteditable]")) return;
-		if (event.key === "ArrowDown") {
-			event.preventDefault();
-			moveActiveOption(event, 1);
-			return;
-		}
-		if (event.key === "ArrowUp") {
-			event.preventDefault();
-			moveActiveOption(event, -1);
+			moveActiveOption(event, delta);
 			return;
 		}
 		if (/^[1-9]$/.test(event.key)) {
@@ -177,6 +162,14 @@ function useUserAsk({ onComplete, onDismiss }) {
 			selectDigit(Number(event.key));
 		}
 	}
+	function handleKeyDown(event) {
+		if (event.defaultPrevented) return;
+		if (event.key === "Escape") {
+			event.preventDefault();
+			dismiss();
+		} else if (event.key === "Enter") handleEnter(event);
+		else handleOptionKey(event);
+	}
 	return {
 		questions,
 		activeIndex,
@@ -191,6 +184,7 @@ function useUserAsk({ onComplete, onDismiss }) {
 		allowsMultiple,
 		selectionFor,
 		isSelected,
+		isTabStop,
 		select,
 		freeformTextFor,
 		setFreeformText,

package/dist/inline-attachment.d.ts

@@ -5,13 +5,17 @@ export type InlineAttachmentState = "ready" | "pending" | "error";
 type InlineAttachmentStyleProps<Props, Style> = Omit<Props, "style"> & {
   style?: CSSProperties & Style;
 };
+type AttachmentLabel = (name: string) => string;
 export type InlineAttachmentProps = InlineAttachmentStyleProps<ComponentProps<"button">, InlineAttachmentKnobStyle> & {
   name: string;
   state?: InlineAttachmentState;
   /** Width-to-height ratio of the reserved box — generated media knows its ratio before its pixels, so arrival never reflows the turn. */
   aspect?: number;
+  openLabel?: AttachmentLabel;
+  pendingLabel?: AttachmentLabel;
+  errorLabel?: AttachmentLabel;
 };
-export declare function InlineAttachment({ name, state, aspect, disabled, className, children, style, "aria-label": ariaLabel, ...props }: InlineAttachmentProps): import("react").JSX.Element;
+export declare function InlineAttachment({ name, state, aspect, disabled, openLabel, pendingLabel, errorLabel, onClick, className, children, style, "aria-label": ariaLabel, ...props }: InlineAttachmentProps): import("react").JSX.Element;
 export type InlineAttachmentMediaProps = ComponentProps<"div"> & {
   src?: string;
   alt?: string;
@@ -26,7 +30,7 @@ export type InlineAttachmentTitleProps = ComponentProps<"div"> & {
 };
 export declare function InlineAttachmentTitle({ children, className, ...props }: InlineAttachmentTitleProps): import("react").JSX.Element;
 export type InlineAttachmentDescriptionProps = InlineAttachmentStyleProps<ComponentProps<"div">, InlineAttachmentKnobStyle>;
-export declare function InlineAttachmentDescription({ className, ...props }: InlineAttachmentDescriptionProps): import("react").JSX.Element;
+export declare function InlineAttachmentDescription({ className, children, ...props }: InlineAttachmentDescriptionProps): import("react").JSX.Element;
 export type InlineAttachmentActionsProps = ComponentProps<"div"> & {
   style?: CSSProperties & InlineAttachmentKnobStyle;
 };

package/dist/inline-attachment.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "./lib/cn.js";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/inline-attachment.tsx
 const InlineAttachmentContext = createContext(null);
@@ -9,32 +9,47 @@ function useInlineAttachmentContext() {
 	if (!context) throw new Error("InlineAttachment compound components must be rendered inside <InlineAttachment>.");
 	return context;
 }
-function defaultLabel(name, state) {
-	if (state === "pending") return `Generating ${name}`;
-	if (state === "error") return `${name} is unavailable`;
-	return `Open attachment: ${name}`;
-}
-function InlineAttachment({ name, state = "ready", aspect = 1.26, disabled, className, children, style, "aria-label": ariaLabel, ...props }) {
+const defaultOpenLabel = (name) => `Open attachment: ${name}`;
+const defaultPendingLabel = (name) => `Generating ${name}`;
+const defaultErrorLabel = (name) => `${name} couldn't load. Try again.`;
+function InlineAttachment({ name, state = "ready", aspect = 1.26, disabled, openLabel = defaultOpenLabel, pendingLabel = defaultPendingLabel, errorLabel = defaultErrorLabel, onClick, className, children, style, "aria-label": ariaLabel, ...props }) {
 	const attachmentStyle = {
 		aspectRatio: aspect,
 		...style
 	};
+	const descriptionId = useId();
+	const pending = state === "pending";
+	const defaultLabel = {
+		ready: openLabel,
+		pending: pendingLabel,
+		error: errorLabel
+	}[state](name);
 	return /* @__PURE__ */ jsx(InlineAttachmentContext.Provider, {
 		value: {
 			name,
-			state
+			state,
+			descriptionId
 		},
 		children: /* @__PURE__ */ jsx("button", {
 			type: "button",
-			"aria-label": ariaLabel ?? defaultLabel(name, state),
-			"aria-busy": state === "pending" || void 0,
-			disabled: disabled || state === "pending",
+			"aria-label": ariaLabel ?? defaultLabel,
+			"aria-describedby": descriptionId,
+			"aria-busy": pending || void 0,
+			"aria-disabled": pending || void 0,
+			disabled,
+			onClick: (event) => {
+				if (pending) {
+					event.preventDefault();
+					return;
+				}
+				onClick?.(event);
+			},
 			"data-control-ui": "inline-attachment",
 			"data-control-family": "inline-attachment",
 			"data-slot": "root",
 			"data-surface": "panel",
 			"data-state": state,
-			className: cn("group relative w-full max-w-72 cursor-pointer overflow-hidden disabled:cursor-default", className),
+			className: cn("group relative w-full max-w-72 cursor-pointer overflow-hidden disabled:cursor-default aria-disabled:cursor-default", className),
 			style: attachmentStyle,
 			...props,
 			children
@@ -146,22 +161,28 @@ function InlineAttachmentContent({ className, ...props }) {
 }
 function InlineAttachmentTitle({ children, className, ...props }) {
 	const { name } = useInlineAttachmentContext();
+	const label = children ?? name;
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "inline-attachment",
 		"data-control-family": "inline-attachment",
 		"data-slot": "title",
+		title: typeof label === "string" ? label : void 0,
 		className: cn("truncate", className),
 		...props,
-		children: children ?? name
+		children: label
 	});
 }
-function InlineAttachmentDescription({ className, ...props }) {
+function InlineAttachmentDescription({ className, children, ...props }) {
+	const { descriptionId } = useInlineAttachmentContext();
 	return /* @__PURE__ */ jsx("div", {
+		id: descriptionId,
 		"data-control-ui": "inline-attachment",
 		"data-control-family": "inline-attachment",
 		"data-slot": "description",
+		title: typeof children === "string" ? children : void 0,
 		className: cn("truncate", className),
-		...props
+		...props,
+		children
 	});
 }
 function InlineAttachmentActions({ className, ...props }) {

package/dist/inline-citation.d.ts

@@ -13,26 +13,33 @@ export type SourceReference = {
 type InlineCitationStyleProps<Props, Style> = Omit<Props, "style"> & {
   style?: CSSProperties & Style;
 };
+export type CitationLabelTemplates = {
+  emptyLabel?: string;
+  viewSourcesLabel?: (count: number) => string;
+  positionLabel?: (position: number, count: number) => string;
+};
+export declare function citationLabel(sources: readonly SourceReference[], emptyLabel?: string): string;
 type PopoverRootProps = ComponentProps<typeof Popover>;
 export type InlineCitationProps = ComponentProps<"span"> & {
   sources: readonly SourceReference[];
   open?: PopoverRootProps["open"];
   defaultOpen?: PopoverRootProps["defaultOpen"];
   onOpenChange?: PopoverRootProps["onOpenChange"];
+  positionLabel?: CitationLabelTemplates["positionLabel"];
 } & {
   style?: CSSProperties & InlineCitationKnobStyle;
 };
-export declare function InlineCitation({ sources, open, defaultOpen, onOpenChange, className, children, ...props }: InlineCitationProps): import("react").JSX.Element;
-export type InlineCitationTriggerProps = InlineCitationStyleProps<ComponentProps<typeof PopoverTrigger>, InlineCitationKnobStyle>;
-export declare function InlineCitationTrigger({ "aria-label": ariaLabel, className, children, disabled, render, ...props }: InlineCitationTriggerProps): import("react").JSX.Element;
+export declare function InlineCitation({ sources, open, defaultOpen, onOpenChange, positionLabel, className, children, ...props }: InlineCitationProps): import("react").JSX.Element;
+export type InlineCitationTriggerProps = InlineCitationStyleProps<ComponentProps<typeof PopoverTrigger>, InlineCitationKnobStyle> & Pick<CitationLabelTemplates, "emptyLabel" | "viewSourcesLabel">;
+export declare function InlineCitationTrigger({ "aria-label": ariaLabel, emptyLabel, viewSourcesLabel, className, children, disabled, render, ...props }: InlineCitationTriggerProps): import("react").JSX.Element;
 export type InlineCitationFaviconsProps = InlineCitationStyleProps<ComponentProps<"span">, InlineCitationKnobStyle> & {
   limit?: number;
 };
 export declare function InlineCitationFavicons({ limit, className, ...props }: InlineCitationFaviconsProps): import("react").JSX.Element;
-export type InlineCitationLabelProps = ComponentProps<"span"> & {
+export type InlineCitationLabelProps = ComponentProps<"span"> & Pick<CitationLabelTemplates, "emptyLabel"> & {
   style?: CSSProperties & InlineCitationKnobStyle;
 };
-export declare function InlineCitationLabel({ className, children, ...props }: InlineCitationLabelProps): import("react").JSX.Element;
+export declare function InlineCitationLabel({ emptyLabel, className, children, ...props }: InlineCitationLabelProps): import("react").JSX.Element;
 export type InlineCitationContentProps = ComponentProps<typeof PopoverContent>;
 export declare function InlineCitationContent({ className, children, align, padding, ...props }: InlineCitationContentProps): import("react").JSX.Element;
 export type InlineCitationNavigationProps = InlineCitationStyleProps<ComponentProps<"div">, InlineCitationKnobStyle>;