@redocly/theme 0.70.0-next.1 → 0.70.0-next.11

package/src/core/hooks/prompt/use-prompt-text-limit.ts

@@ -0,0 +1,59 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+
+import type { RefObject } from 'react';
+
+export type PromptTextLimit = 'none' | 'oneLine' | 'maxLines';
+
+export type UsePromptTextLimitParams = {
+  prompt: string;
+  singleLine: boolean;
+  isPromptVisible: boolean;
+};
+
+export type PromptTextLimitState = {
+  textRef: RefObject<HTMLDivElement | null>;
+  textLimit: PromptTextLimit;
+  isExpanded: boolean;
+  hasHiddenText: boolean;
+  toggleExpanded: () => void;
+};
+
+/**
+ * Tracks the line limit of the prompt text (one line or the maximum lines) and whether the
+ * reader expanded it. `hasHiddenText` is true only when the limit hides some text.
+ */
+export function usePromptTextLimit({
+  prompt,
+  singleLine,
+  isPromptVisible,
+}: UsePromptTextLimitParams): PromptTextLimitState {
+  const textRef = useRef<HTMLDivElement>(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [hasHiddenText, setHasHiddenText] = useState(false);
+
+  /* The text mounts late with hidePrompt and re-wraps on resize, so the observer is
+     attached each time the text (re)appears. */
+  useLayoutEffect(() => {
+    const text = textRef.current;
+    if (!text || isExpanded) return;
+
+    const measure = () =>
+      setHasHiddenText(
+        text.scrollHeight > text.clientHeight || text.scrollWidth > text.clientWidth,
+      );
+    measure();
+
+    if (typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(text);
+    return () => observer.disconnect();
+  }, [prompt, singleLine, isExpanded, isPromptVisible]);
+
+  return {
+    textRef,
+    textLimit: isExpanded ? 'none' : singleLine ? 'oneLine' : 'maxLines',
+    isExpanded,
+    hasHiddenText,
+    toggleExpanded: () => setIsExpanded((expanded) => !expanded),
+  };
+}

package/src/core/hooks/search/use-persisted-quick-filter.ts

@@ -0,0 +1,125 @@
+import { useEffect, useRef, useState } from 'react';
+
+import type { Dispatch, SetStateAction } from 'react';
+import type { SearchFacet, SearchFilterItem } from '../../types/search';
+
+import { createStore, useStore } from '../use-store';
+
+type StoredQuickFilter = Pick<SearchFilterItem, 'field' | 'values'>;
+
+const quickFilterStore = createStore<StoredQuickFilter | null>({
+  storageKey: 'searchQuickFilter',
+  storageType: 'sessionStorage',
+});
+
+const findQuickFilter = (filter: SearchFilterItem[]) => filter.find((item) => item.isQuickFilter);
+
+const withQuickFilter = (filter: SearchFilterItem[], quickFilter: StoredQuickFilter) => [
+  ...filter.filter((item) => !item.isQuickFilter),
+  ...(quickFilter.values.length ? [{ ...quickFilter, isQuickFilter: true }] : []),
+];
+
+const groupFacetValues = (facets: SearchFacet[], field: string) => {
+  const facet = facets.find((item) => item.field === field);
+  const values = facet?.values ?? [];
+  return {
+    present: facet !== undefined,
+    values: values.map((item) => (typeof item === 'string' ? item : item.value)),
+    counted: values.some((item) => typeof item !== 'string' && item.isCounterVisible),
+  };
+};
+
+const isRestorable = (
+  stored: StoredQuickFilter | null,
+  groupField: string,
+): stored is StoredQuickFilter =>
+  !!stored &&
+  stored.field === groupField &&
+  Array.isArray(stored.values) &&
+  stored.values.length > 0 &&
+  stored.values.every((value) => typeof value === 'string');
+
+type UsePersistedQuickFilterOptions = {
+  filter: SearchFilterItem[];
+  setFilter: Dispatch<SetStateAction<SearchFilterItem[]>>;
+  facets: SearchFacet[];
+  groupField: string;
+  query: string;
+  isSearchLoading: boolean;
+  searchError: string | null;
+  enabled?: boolean;
+};
+
+/**
+ * Remembers the quick filter on `groupField` for the browser tab and restores it on mount unless
+ * one is already selected. Restored values are dropped once known not to exist: absent from the
+ * full value list, or from the `groupField` facet left by the first search that finishes without
+ * error on an empty query (the restored value is that search's filter, so a value without
+ * documents is not counted). Does nothing while `enabled` is false.
+ */
+export function usePersistedQuickFilter({
+  filter,
+  setFilter,
+  facets,
+  groupField,
+  query,
+  isSearchLoading,
+  searchError,
+  enabled = true,
+}: UsePersistedQuickFilterOptions): void {
+  const [stored, setStored] = useStore(quickFilterStore, null);
+  const [initial] = useState(() =>
+    enabled && isRestorable(stored, groupField) && !findQuickFilter(filter) ? stored.values : null,
+  );
+  const phaseRef = useRef<'restoring' | 'validating' | 'done'>(initial ? 'restoring' : 'done');
+  const searchedRef = useRef(false);
+
+  useEffect(() => {
+    if (!initial) return;
+    // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent -- the filter state belongs to the product's `useSearch` and starts empty on every mount
+    setFilter((current) => withQuickFilter(current, { field: groupField, values: initial }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- applies only to the initial state
+  }, []);
+
+  useEffect(() => {
+    if (!enabled) return;
+    const quickFilter = findQuickFilter(filter);
+    // The commit that starts the restore still sees the empty initial filter.
+    if (phaseRef.current === 'restoring') {
+      if (!quickFilter) return;
+      phaseRef.current = 'validating';
+    }
+    if (phaseRef.current === 'validating' && initial) {
+      if (isSearchLoading) searchedRef.current = true;
+      const settled = searchedRef.current && !isSearchLoading && !searchError && !query.trim();
+      const { present, values: known, counted } = groupFacetValues(facets, groupField);
+      if ((known.length && !counted) || (settled && present)) {
+        phaseRef.current = 'done';
+        const values = quickFilter?.values.filter(
+          (value) => known.includes(value) || !initial.includes(value),
+        );
+        if (quickFilter && values && values.length !== quickFilter.values.length) {
+          // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent -- the facets arrive after the restore
+          setFilter((current) => withQuickFilter(current, { field: groupField, values }));
+          return;
+        }
+      }
+    }
+    const next = quickFilter ? { field: quickFilter.field, values: quickFilter.values } : null;
+    if (JSON.stringify(next) !== JSON.stringify(stored)) {
+      setStored(next);
+    }
+  }, [
+    enabled,
+    filter,
+    facets,
+    groupField,
+    query,
+    isSearchLoading,
+    searchError,
+    initial,
+    stored,
+    setFilter,
+    setStored,
+  ]);
+}

package/src/core/hooks/search/use-search-ai-activity.ts

@@ -0,0 +1,31 @@
+import type { SearchAiActivityStatus, SearchAiActivityStep, ToolCall } from '../../types/search';
+
+import { useThemeHooks } from '../use-theme-hooks';
+import { getSearchAiActivityStatus, getSearchAiActivityStep } from '../../utils/search-ai-activity';
+
+type UseSearchAiActivityParams = {
+  toolCalls: ToolCall[];
+  isActive: boolean;
+};
+
+type UseSearchAiActivityReturn = {
+  status: SearchAiActivityStatus;
+  steps: SearchAiActivityStep[];
+};
+
+export function useSearchAiActivity({
+  toolCalls,
+  isActive,
+}: UseSearchAiActivityParams): UseSearchAiActivityReturn {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  const runningToolCall = isActive ? toolCalls.find((toolCall) => !toolCall.result) : undefined;
+
+  return {
+    status: getSearchAiActivityStatus(toolCalls, isActive, runningToolCall, translate),
+    steps: toolCalls.map((toolCall) =>
+      getSearchAiActivityStep(toolCall, isActive && !toolCall.result, translate),
+    ),
+  };
+}

package/src/core/hooks/use-connect-mcp-button.ts

@@ -7,7 +7,12 @@ import { useThemeHooks } from './use-theme-hooks';
 import { useMCPConfig } from './use-mcp-config';
 import { ClipboardService } from '../utils/clipboard-service';
 import { DEFAULT_MCP_OPTIONS } from '../constants/mcp';
-import { generateClaudeCodeCommand, generateCodexCommand } from '../utils/mcp';
+import {
+  generateClaudeCodeCommand,
+  generateCodexCommand,
+  generateMCPDeepLink,
+  isMCPOption,
+} from '../utils/mcp';
 import { getBaseDataAttributes } from '../utils/telemetry/get-base-data-attributes';
 
 export type McpButtonOptions = {
@@ -68,6 +73,7 @@ export function useConnectMCPButton({
       const urlMap: Partial<Record<MCPOption, string>> = {
         cursor: cursorUrl,
         vscode: vscodeUrl,
+        claude: generateMCPDeepLink('claude', connection),
       };
 
       window.open(urlMap[action], '_blank');
@@ -80,7 +86,12 @@ export function useConnectMCPButton({
     [translate],
   );
 
-  const visibleOptions = useMemo(() => options.filter(Boolean), [options]);
+  // Markdoc reports attribute errors but still renders the tag, so `options` can be any value.
+  const visibleOptions = useMemo(
+    () =>
+      Array.isArray(options) ? [...new Set(options.filter(isMCPOption))] : [...DEFAULT_MCP_OPTIONS],
+    [options],
+  );
 
   return {
     copiedOption,

package/src/core/hooks/use-consent-dialog.ts

@@ -0,0 +1,51 @@
+import { useEffect, useRef, useState } from 'react';
+
+import type { RefObject } from 'react';
+import type { ConsentCategory, ConsentCategoryId, UseConsentResult } from '../types/consent';
+
+import { CONSENT_CATEGORIES } from '../constants/consent';
+import { useFocusTrap } from './use-focus-trap';
+
+export type ConsentDraft = Record<Exclude<ConsentCategoryId, 'necessary'>, boolean>;
+
+export type UseConsentDialogResult = {
+  draft: ConsentDraft;
+  setCategory: (id: keyof ConsentDraft, value: boolean) => void;
+  dialogRef: RefObject<HTMLDivElement | null>;
+  close: () => void;
+  save: () => void;
+  categories: readonly ConsentCategory[];
+};
+
+export function useConsentDialog(consent: UseConsentResult): UseConsentDialogResult {
+  const [draft, setDraft] = useState<ConsentDraft>(() => ({
+    analytics: consent.state?.analytics ?? consent.mode === 'opt-out',
+    marketing: (consent.state?.marketing ?? consent.mode === 'opt-out') && !consent.gpc,
+  }));
+  const dialogRef = useRef<HTMLDivElement | null>(null);
+  const close = consent.closeDialog;
+  const closeRef = useRef(close);
+  closeRef.current = close;
+
+  useEffect(() => {
+    const previous = document.activeElement as HTMLElement | null;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') closeRef.current();
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('keydown', onKeyDown);
+      previous?.focus?.();
+    };
+  }, []);
+
+  useFocusTrap(dialogRef);
+
+  const setCategory = (id: keyof ConsentDraft, value: boolean) => {
+    setDraft((current) => ({ ...current, [id]: value }));
+  };
+
+  const save = () => consent.save(draft);
+
+  return { draft, setCategory, dialogRef, close, save, categories: CONSENT_CATEGORIES };
+}

package/src/core/hooks/use-consent-telemetry.ts

@@ -0,0 +1,56 @@
+import { useEffect, useRef } from 'react';
+
+import type { ConsentRuntime } from '../types/consent';
+
+import { useThemeHooks } from './use-theme-hooks';
+import { getBaseDataAttributes } from '../utils/telemetry/get-base-data-attributes';
+
+type RealmOwnedRuntime = ConsentRuntime & {
+  mode: 'opt-in' | 'opt-out';
+  configuredMode: 'auto' | 'opt-in' | 'opt-out';
+  region: { source: 'timezone' | 'config' | 'none'; timeZone: string | null };
+};
+
+function isRealmOwned(runtime: ConsentRuntime): runtime is RealmOwnedRuntime {
+  return runtime.region.source !== 'provider';
+}
+
+function getConsentRuntime(): ConsentRuntime | undefined {
+  if (typeof window === 'undefined') return undefined;
+  return (window as Window & { redocly?: { consent?: ConsentRuntime } }).redocly?.consent;
+}
+
+// Sends one consent.changed event per visitor choice in the modes Realm owns.
+export function useConsentTelemetry(): void {
+  const { useTelemetry } = useThemeHooks();
+  const telemetry = useTelemetry();
+  const telemetryRef = useRef(telemetry);
+  telemetryRef.current = telemetry;
+
+  useEffect(() => {
+    const found = getConsentRuntime();
+    const runtime = found && isRealmOwned(found) ? found : null;
+    if (!runtime) return;
+    return runtime.on('change', (state) => {
+      const choice =
+        state.analytics && state.marketing
+          ? 'accept'
+          : !state.analytics && !state.marketing
+            ? 'reject'
+            : 'partial';
+      const { origin, pathname, search, hash } = window.location;
+      const uri = `${origin}${pathname}${search}${hash}`;
+      telemetryRef.current.sendConsentChangedMessage([
+        {
+          ...getBaseDataAttributes('consent', 'consent'),
+          choice,
+          mode: runtime.mode,
+          configuredMode: runtime.configuredMode,
+          regionSource: runtime.region.source,
+          gpc: runtime.gpc,
+        },
+        getBaseDataAttributes(uri, 'page', uri),
+      ]);
+    });
+  }, []);
+}

package/src/core/hooks/use-dialog-hotkeys.ts

@@ -21,12 +21,18 @@ export function useDialogHotKeys(ref: RefObject<HTMLElement | null>, onClose: ()
   };
 
   const onFocusableElementsHandler = () => {
-    const focusableElements = ref.current?.querySelectorAll(
-      'input, [href], [tabindex]:not([tabindex="-1"])',
+    const focusableElements = Array.from(
+      ref.current?.querySelectorAll<HTMLElement>(
+        'input, textarea, select, button, [href], [tabindex]:not([tabindex="-1"])',
+      ) ?? [],
+    ).filter(
+      (element) =>
+        !element.hasAttribute('disabled') &&
+        (typeof element.checkVisibility !== 'function' || element.checkVisibility()),
     );
-    if (focusableElements && focusableElements.length > 0) {
-      firstFocusableRef.current = focusableElements[0] as HTMLElement;
-      lastFocusableRef.current = focusableElements[focusableElements.length - 1] as HTMLElement;
+    if (focusableElements.length > 0) {
+      firstFocusableRef.current = focusableElements[0];
+      lastFocusableRef.current = focusableElements[focusableElements.length - 1];
     }
   };
 

package/src/core/hooks/use-full-height.ts

@@ -3,9 +3,9 @@ import throttle from 'lodash.throttle';
 
 import type { RefObject } from 'react';
 
-export function useFullHeight(element: RefObject<HTMLElement | null>): void {
+export function useFullHeight(elementRef: RefObject<HTMLElement | null>): void {
   const handler = useCallback(() => {
-    if (!element.current) {
+    if (!elementRef.current) {
       return;
     }
 
@@ -14,19 +14,19 @@ export function useFullHeight(element: RefObject<HTMLElement | null>): void {
       return;
     }
 
-    const elementTop = element.current.getBoundingClientRect().top;
+    const elementTop = elementRef.current.getBoundingClientRect().top;
     const footerOffset = footer.offsetTop - window.scrollY - elementTop;
     if (footerOffset > window.innerHeight) {
-      element.current.style.maxHeight = `${window.innerHeight - elementTop}px`;
+      elementRef.current.style.maxHeight = `${window.innerHeight - elementTop}px`;
     } else {
-      element.current.style.maxHeight = `${footerOffset}px`;
+      elementRef.current.style.maxHeight = `${footerOffset}px`;
     }
-  }, [element]);
+  }, [elementRef]);
 
   const throttledHandler = useMemo(() => throttle(handler, 150), [handler]);
 
   useEffect(() => {
-    if (typeof window === 'undefined' || !element.current) {
+    if (typeof window === 'undefined' || !elementRef.current) {
       return () => {
         // nope
       };
@@ -45,5 +45,5 @@ export function useFullHeight(element: RefObject<HTMLElement | null>): void {
       window.removeEventListener('scroll', throttledHandler);
       window.removeEventListener('resize', throttledHandler);
     };
-  }, [throttledHandler, element, handler]);
+  }, [throttledHandler, elementRef, handler]);
 }

package/src/core/hooks/use-page-actions.ts

@@ -23,6 +23,7 @@ import {
   withoutPathPrefix,
 } from '../utils/urls';
 import { getBaseDataAttributes } from '../utils/telemetry/get-base-data-attributes';
+import { getAiPromptLink } from '../utils/get-ai-prompt-link';
 
 const DEFAULT_ENABLED_ACTIONS = [
   'copy',
@@ -31,6 +32,7 @@ const DEFAULT_ENABLED_ACTIONS = [
   'claude',
   'docs-mcp-cursor',
   'docs-mcp-vscode',
+  'docs-mcp-claude',
 ] as const;
 
 export type PageActionType =
@@ -40,6 +42,7 @@ export type PageActionType =
   | 'claude'
   | 'docs-mcp-cursor'
   | 'docs-mcp-vscode'
+  | 'docs-mcp-claude'
   // Used in OpenAPI docs x-mcp
   | 'mcp-cursor'
   | 'mcp-vscode';
@@ -110,10 +113,12 @@ export function usePageActions(
     const mdPageUrl = isRoot
       ? combineUrls(origin, pathname, 'index.html.md')
       : combineUrls(origin, removeTrailingSlash(pathname) + '.md');
+    const externalAiPrompt = `Read ${mdPageUrl} and answer questions based on the content.`;
 
     const actionHandlers: Record<PageActionType, () => PageAction> = {
       'docs-mcp-cursor': createMCPHandler('cursor', false),
       'docs-mcp-vscode': createMCPHandler('vscode', false),
+      'docs-mcp-claude': createMCPHandler('claude', false),
       'mcp-cursor': createMCPHandler('cursor', true),
       'mcp-vscode': createMCPHandler('vscode', true),
 
@@ -159,7 +164,7 @@ export function usePageActions(
       }),
 
       chatgpt: () => {
-        const link = getExternalAiPromptLink('https://chat.openai.com', mdPageUrl);
+        const link = getAiPromptLink('chatgpt', externalAiPrompt);
         return {
           buttonText: translate('page.actions.chatGptButtonText', 'Open in ChatGPT'),
           title: translate('page.actions.chatGptTitle', 'Open in ChatGPT'),
@@ -179,7 +184,7 @@ export function usePageActions(
       },
 
       claude: () => {
-        const link = getExternalAiPromptLink('https://claude.ai/new', mdPageUrl);
+        const link = getAiPromptLink('claude', externalAiPrompt);
         return {
           buttonText: translate('page.actions.claudeButtonText', 'Open in Claude'),
           title: translate('page.actions.claudeTitle', 'Open in Claude'),
@@ -220,13 +225,6 @@ export function usePageActions(
   return result;
 }
 
-function getExternalAiPromptLink(baseUrl: string, mdPageUrl: string): string {
-  const externalAiPrompt = `Read ${mdPageUrl} and answer questions based on the content.`;
-  const url = new URL(baseUrl);
-  url.searchParams.set('q', externalAiPrompt);
-  return url.toString();
-}
-
 type CreateMCPActionParams = {
   clientType: MCPClientType;
   mcpConfig: McpConnectionParams;
@@ -261,6 +259,19 @@ function createMCPAction({
     };
   }
 
+  if (clientType === 'claude') {
+    return {
+      ...sharedProps,
+      buttonText: translate('page.actions.connectMcp.claude', 'Connect to Claude'),
+      title: translate('page.actions.connectMcp.claude', 'Connect to Claude'),
+      description: translate(
+        'page.actions.connectMcp.claudeDescription',
+        'Add MCP server to your Claude account',
+      ),
+      iconComponent: ClaudeIcon,
+    };
+  }
+
   return {
     ...sharedProps,
     buttonText: translate('page.actions.connectMcp.vscode', 'Connect to VS Code'),
@@ -337,6 +348,7 @@ function shouldHideActionByType(
       return !isPublic;
     case 'docs-mcp-cursor':
     case 'docs-mcp-vscode':
+    case 'docs-mcp-claude':
       return Boolean(mcpUrl) || isMcpDisabled;
     case 'mcp-cursor':
     case 'mcp-vscode':

package/src/core/hooks/use-pointer-border-highlight.ts

@@ -0,0 +1,46 @@
+import { useCallback, useRef } from 'react';
+
+import type { PointerEvent, RefObject } from 'react';
+
+const EDGE_PROXIMITY_DISTANCE = 80;
+
+export type PointerBorderHighlight<T extends HTMLElement> = {
+  ref: RefObject<T | null>;
+  onPointerMove: (event: PointerEvent<T>) => void;
+  onPointerLeave: () => void;
+};
+
+/* Writes `--pointer-x`, `--pointer-y` and `--pointer-edge-proximity` (1 at the border, 0 at
+   `distance` px inside) to the element's inline style, so the highlight moves without re-renders. */
+export function usePointerBorderHighlight<T extends HTMLElement>(
+  distance = EDGE_PROXIMITY_DISTANCE,
+): PointerBorderHighlight<T> {
+  const ref = useRef<T | null>(null);
+
+  const onPointerMove = useCallback(
+    (event: PointerEvent<T>) => {
+      const element = ref.current;
+      if (!element) return;
+
+      const rect = element.getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+      const edgeDistance = Math.min(x, y, rect.width - x, rect.height - y);
+      const proximity = Math.min(1, Math.max(0, 1 - edgeDistance / distance));
+
+      element.style.setProperty('--pointer-x', `${x}px`);
+      element.style.setProperty('--pointer-y', `${y}px`);
+      element.style.setProperty(
+        '--pointer-edge-proximity',
+        String(Math.round(proximity * 100) / 100),
+      );
+    },
+    [distance],
+  );
+
+  const onPointerLeave = useCallback(() => {
+    ref.current?.style.setProperty('--pointer-edge-proximity', '0');
+  }, []);
+
+  return { ref, onPointerMove, onPointerLeave };
+}

package/src/core/hooks/use-scroll-item-into-view.ts

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+
+import type { RefObject } from 'react';
+
+export function useScrollItemIntoView(
+  listRef: RefObject<HTMLElement | null>,
+  activeIndex: number,
+): void {
+  useEffect(() => {
+    const list = listRef.current;
+    const activeItem = activeIndex === -1 ? undefined : list?.children[activeIndex];
+    if (!list || !activeItem) return;
+
+    const listRect = list.getBoundingClientRect();
+    const itemRect = activeItem.getBoundingClientRect();
+    list.scrollLeft += itemRect.left - listRect.left - (listRect.width - itemRect.width) / 2;
+  }, [listRef, activeIndex]);
+}

package/src/core/hooks/use-tab-list.ts

@@ -0,0 +1,63 @@
+import { useCallback, useId, useRef } from 'react';
+
+import type { KeyboardEvent } from 'react';
+
+type UseTabListProps = {
+  count: number;
+  activeIndex: number;
+  onChange: (index: number) => void;
+};
+
+/**
+ * Props for a WAI-ARIA tab list with automatic activation: only the active tab is a tab stop,
+ * and Left/Right/Home/End select and focus another tab.
+ */
+export function useTabList({ count, activeIndex, onChange }: UseTabListProps) {
+  const idPrefix = useId();
+  const focusableIndex = activeIndex >= 0 ? activeIndex : 0;
+  const tabRefs = useRef<(HTMLElement | null)[]>([]);
+
+  const select = useCallback(
+    (index: number) => {
+      onChange(index);
+      tabRefs.current[index]?.focus();
+    },
+    [onChange],
+  );
+
+  const onKeyDown = useCallback(
+    (event: KeyboardEvent, index: number) => {
+      const target = (<Record<string, number>>{
+        ArrowRight: (index + 1) % count,
+        ArrowLeft: (index - 1 + count) % count,
+        Home: 0,
+        End: count - 1,
+      })[event.key];
+      if (target === undefined) return;
+      event.preventDefault();
+      select(target);
+    },
+    [count, select],
+  );
+
+  const getTabProps = (index: number) => ({
+    id: `${idPrefix}-tab-${index}`,
+    role: 'tab',
+    'aria-selected': index === activeIndex,
+    'aria-controls': `${idPrefix}-panel-${index}`,
+    tabIndex: index === focusableIndex ? 0 : -1,
+    ref: (element: HTMLElement | null) => {
+      tabRefs.current[index] = element;
+    },
+    onClick: () => select(index),
+    onKeyDown: (event: KeyboardEvent) => onKeyDown(event, index),
+  });
+
+  const getTabPanelProps = (index: number) => ({
+    id: `${idPrefix}-panel-${index}`,
+    role: 'tabpanel',
+    'aria-labelledby': `${idPrefix}-tab-${index}`,
+  });
+
+  return { tabListProps: { role: 'tablist' }, getTabProps, getTabPanelProps };
+}

package/src/core/hooks/use-telemetry-fallback.ts

@@ -38,6 +38,8 @@ export const useTelemetryFallback = () => ({
   sendCodeSnippetReportedMessage: () => {},
   sendConnectMcpClickedMessage: () => {},
   sendMcpConnectionSnippetCopiedMessage: () => {},
+  sendPromptTagCopiedMessage: () => {},
+  sendPromptTagOpenedMessage: () => {},
   sendMobileMenuClosedMessage: () => {},
   sendMobileMenuOpenedMessage: () => {},
   sendPageViewedMessage: () => {},