@redocly/theme 0.62.0-custom.0 → 0.62.0-custom.2

package/lib/ext/process-scorecard.d.ts

@@ -1,5 +1,49 @@
-import type { CatalogItem } from '../index.js';
+import type { CatalogItem } from '../core/types';
+import type { ReactNode } from 'react';
+export type ScorecardApiTableRow<TScorecard = unknown> = {
+    api: CatalogItem;
+    scorecard?: TScorecard;
+};
+export type ScorecardApiTableColumnStatus = 'error' | 'warning' | 'success';
+export type ScorecardApiTableColumnDetails<TScorecard = unknown> = {
+    hidden?: boolean;
+    tabLabel?: string;
+    description?: ReactNode | ((row: ScorecardApiTableRow<TScorecard>) => ReactNode);
+    render?: (params: {
+        row: ScorecardApiTableRow<TScorecard>;
+        value: unknown;
+    }) => ReactNode;
+    status?: ScorecardApiTableColumnStatus | ((params: {
+        row: ScorecardApiTableRow<TScorecard>;
+        value: unknown;
+    }) => ScorecardApiTableColumnStatus);
+    statusRule?: 'problem-if-truthy' | 'problem-if-falsy';
+};
+export type ScorecardApiTableColumn<TScorecard = unknown> = {
+    id: string;
+    header: string;
+    placement?: 'beforeLevels' | 'afterLevels';
+    size?: number;
+    minSize?: number;
+    maxSize?: number;
+    sortRule?: 'string' | 'number' | 'date';
+    sortDescFirst?: boolean;
+    getValue?: (row: ScorecardApiTableRow<TScorecard>) => unknown;
+    getSortValue?: (row: ScorecardApiTableRow<TScorecard>) => unknown;
+    render?: (params: {
+        row: ScorecardApiTableRow<TScorecard>;
+        value: unknown;
+    }) => ReactNode;
+    details?: ScorecardApiTableColumnDetails<TScorecard>;
+    sortingFn?: (params: {
+        rowA: ScorecardApiTableRow<TScorecard>;
+        rowB: ScorecardApiTableRow<TScorecard>;
+        valueA: unknown;
+        valueB: unknown;
+    }) => number;
+};
 export declare function useProcessScorecard(): {
     processScorecard: <T = any>(scorecard: T, api: CatalogItem) => T;
     processInfo: <T>(info: T) => T;
+    getApiTableColumns: () => ScorecardApiTableColumn[];
 };

package/lib/ext/process-scorecard.js

@@ -6,6 +6,7 @@ function useProcessScorecard() {
     return {
         processScorecard: (0, react_1.useCallback)((scorecard) => scorecard, []),
         processInfo: (0, react_1.useCallback)((info) => info, []),
+        getApiTableColumns: (0, react_1.useCallback)(() => [], []),
     };
 }
 //# sourceMappingURL=process-scorecard.js.map

package/lib/icons/DirectionRightIcon/DirectionRightIcon.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const DirectionRightIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/lib/icons/DirectionRightIcon/DirectionRightIcon.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DirectionRightIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M9.5 4L8.79295 4.70705L11.0859 7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V14H5V8H11.0859L8.79295 10.2929L9.5 11L13 7.5L9.5 4Z", fill: "#1A1C21" }),
+    react_1.default.createElement("path", { d: "M5 2H4V6H5V2Z", fill: "#1A1C21" })));
+exports.DirectionRightIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/DirectionRightIcon/DirectionRightIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+  vertical-align: middle;
+`;
+//# sourceMappingURL=DirectionRightIcon.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.62.0-custom.0",
+  "version": "0.62.0-custom.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -62,8 +62,8 @@
     "typescript": "5.9.3",
     "vitest": "4.0.10",
     "vitest-when": "0.6.2",
-    "webpack": "5.94.0",
-    "@redocly/realm-asyncapi-sdk": "0.9.0-next.0"
+    "webpack": "5.105.2",
+    "@redocly/realm-asyncapi-sdk": "0.9.0-next.1"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",
@@ -78,10 +78,10 @@
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "4.1.1",
     "nprogress": "0.2.0",
-    "openapi-sampler": "1.6.2",
+    "openapi-sampler": "1.7.0",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.43.0-custom.0"
+    "@redocly/config": "0.43.0-custom.1"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Buttons/EditPageButton.tsx

@@ -5,7 +5,7 @@ import type { JSX } from 'react';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { EditIcon } from '@redocly/theme/icons/EditIcon/EditIcon';
-import { Link } from '@redocly/theme/components/Link/Link';
+import { Button } from '@redocly/theme/components/Button/Button';
 
 export type EditPageButtonProps = {
   to: string;
@@ -17,43 +17,22 @@ export function EditPageButton({ to }: EditPageButtonProps): JSX.Element {
   const telemetry = useTelemetry();
 
   return (
-    <EditPageButtonWrapper
-      data-component-name="Buttons/EditPageButton"
-      target="_blank"
-      to={to}
-      onClick={() => telemetry.sendEditPageLinkClickedMessage()}
-    >
-      <ButtonIcon />
-      <ButtonText data-translation-key="markdown.editPage.text">
+    <EditPageButtonWrapper data-component-name="Buttons/EditPageButton">
+      <Button
+        to={to}
+        external={true}
+        variant="ghost"
+        size="small"
+        icon={<EditIcon />}
+        onClick={() => telemetry.sendEditPageLinkClickedMessage()}
+        data-translation-key="markdown.editPage.text"
+      >
         {translate('markdown.editPage.text', 'Edit')}
-      </ButtonText>
+      </Button>
     </EditPageButtonWrapper>
   );
 }
 
-const EditPageButtonWrapper = styled(Link)`
-  height: fit-content;
+const EditPageButtonWrapper = styled.div`
   margin-left: auto;
-  display: inline-flex;
-  color: var(--text-color-secondary);
-  font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-base);
-  font-family: var(--font-family-base);
-  text-decoration: none;
-
-  &:hover {
-    color: var(--text-color-primary);
-  }
-
-  @media print {
-    display: none;
-  }
-`;
-
-const ButtonIcon = styled(EditIcon)`
-  margin-right: 3px;
-`;
-
-const ButtonText = styled.span`
-  line-height: 14px;
 `;

package/src/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar.tsx

@@ -128,10 +128,10 @@ export function CatalogEntityHistorySidebar({
 
 const SidebarOverlay = styled.div`
   position: fixed;
-  top: var(--navbar-height);
+  top: calc(var(--navbar-height) + var(--banner-height, 0));
   left: 0;
   width: var(--sidebar-width);
-  height: calc(100vh - var(--navbar-height));
+  height: calc(100vh - var(--navbar-height) - var(--banner-height, 0));
   background-color: var(--catalog-history-sidebar-bg-color);
   border-right: 1px solid var(--catalog-history-sidebar-border-color);
   display: flex;

package/src/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityVersionItem.tsx

@@ -53,9 +53,6 @@ export function CatalogEntityVersionItem({
 
   const singleRevisionLink = buildRevisionUrl(basePath, group.singleRevisionDate, group.version);
 
-  const isClickable = hasRevisions || Boolean(singleRevisionLink);
-  const isSingleRevisionActive = Boolean(singleRevisionLink && group.isCurrent);
-
   const versionTitle = isNotSpecifiedVersion
     ? `${translate('catalog.history.version.label', 'Version')}: ${translate('catalog.history.version.notSpecified', 'not specified')}`
     : `${translate('catalog.history.version.label', 'Version')}: ${group.version}`;
@@ -64,9 +61,7 @@ export function CatalogEntityVersionItem({
     <VersionButton
       type="button"
       onClick={() => hasRevisions && onToggle(group.version)}
-      $isClickable={isClickable}
       $isCurrent={group.isCurrent}
-      $isActive={isSingleRevisionActive}
     >
       <VersionIcon $isCurrent={group.isCurrent}>
         {group.isCurrent ? (
@@ -155,34 +150,23 @@ export function CatalogEntityVersionItem({
 }
 
 const VersionButton = styled.button<{
-  $isClickable?: boolean;
   $isCurrent?: boolean;
-  $isActive?: boolean;
 }>`
   all: unset;
   display: flex;
   align-items: center;
   width: calc(100% - var(--catalog-history-sidebar-version-icon-margin-right));
   padding: var(--catalog-history-sidebar-version-header-padding);
-  cursor: ${({ $isClickable }) => ($isClickable ? 'pointer' : 'default')};
+  cursor: pointer;
   border-radius: var(--catalog-history-sidebar-version-header-border-radius);
   transition: 0.2s ease;
   text-decoration: none;
   color: inherit;
-  background-color: ${({ $isActive }) =>
-    $isActive ? 'var(--catalog-history-sidebar-revision-item-bg-color-active)' : 'transparent'};
+  background-color: 'transparent';
 
-  ${({ $isClickable, $isActive }) =>
-    $isClickable &&
-    `
-    &:hover {
-      background-color: ${
-        $isActive
-          ? 'var(--catalog-history-sidebar-revision-item-bg-color-active)'
-          : 'var(--catalog-history-sidebar-version-header-bg-color-hover)'
-      };
-    }
-  `}
+  &:hover {
+    background-color: var(--catalog-history-sidebar-version-header-bg-color-hover);
+  }
 
   ${({ $isCurrent }) =>
     !$isCurrent &&

package/src/components/Dropdown/Dropdown.tsx

@@ -142,5 +142,5 @@ const ChildrenWrapper = styled.div<{ placement?: string; alignment?: string; isO
   right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
   display: ${({ isOpen }) => (isOpen ? 'block' : 'none')};
 
-  z-index: var(--z-index-raised);
+  z-index: var(--dropdown-menu-z-index);
 `;

package/src/components/Dropdown/variables.ts

@@ -8,6 +8,7 @@ export const dropdown = css`
   --dropdown-menu-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --dropdown-menu-line-height: var(--line-height-base); // @presenter LineHeight
   --dropdown-menu-text-color: var(--text-color-secondary); // @presenter Color
+  --dropdown-menu-z-index: var(--z-index-raised); // @presenter ZIndex
 
   --dropdown-menu-padding-top: var(--spacing-xxs);
   --dropdown-menu-min-width: 100px;

package/src/components/Feedback/Comment.tsx

@@ -6,6 +6,7 @@ import type { JSX } from 'react';
 import { useOutsideClick, useThemeHooks } from '@redocly/theme/core/hooks';
 import { RadioCheckButtonIcon } from '@redocly/theme/icons/RadioCheckButtonIcon/RadioCheckButtonIcon';
 import { Button } from '@redocly/theme/components/Button/Button';
+import { MAX_CONTEXT_LENGTH } from '@redocly/theme/core/constants';
 
 export type CommentProps = {
   onSubmit: (value: { comment: string }) => void;
@@ -32,18 +33,21 @@ export function Comment({
   const { label, submitText } = settings || {};
   const [text, setText] = React.useState('');
   const [submitValue, setSubmitValue] = React.useState('');
+  const [isMaxLengthReached, setIsMaxLengthReached] = React.useState(false);
   const modalRef = useRef<HTMLDivElement>(null);
 
   useOutsideClick(modalRef, onCancel);
 
   const send = () => {
-    if (!text) return;
-    setSubmitValue(text);
-    onSubmit({ comment: text });
+    const trimmedText = text.trim();
+    if (!trimmedText) return;
+    setSubmitValue(trimmedText);
+    onSubmit({ comment: trimmedText });
   };
   const handleTextAreaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const commentValue = e.target.value;
     setText(commentValue);
+    setIsMaxLengthReached(commentValue.length >= MAX_CONTEXT_LENGTH);
 
     if (!standAlone) {
       onSubmit({ comment: commentValue });
@@ -81,7 +85,15 @@ export function Comment({
         {label ||
           translate('feedback.settings.comment.label', 'Please share your feedback with us.')}
       </Label>
-      <TextArea rows={3} onChange={handleTextAreaChange} />
+      <TextArea rows={3} maxLength={MAX_CONTEXT_LENGTH} onChange={handleTextAreaChange} />
+      {isMaxLengthReached && (
+        <MaxLengthMessage data-translation-key="feedback.settings.comment.maxLength">
+          {translate('feedback.settings.comment.maxLength', {
+            maxLength: MAX_CONTEXT_LENGTH,
+            defaultValue: `Maximum content length of ${MAX_CONTEXT_LENGTH} characters reached`,
+          })}
+        </MaxLengthMessage>
+      )}
       {standAlone && (
         <ButtonsContainer>
           {onCancel && (
@@ -175,3 +187,9 @@ const ButtonsContainer = styled.div`
   margin-top: var(--spacing-xs);
   gap: var(--spacing-xs);
 `;
+
+const MaxLengthMessage = styled.div`
+  font-size: var(--font-size-sm);
+  color: var(--text-color-secondary);
+  margin-top: var(--spacing-xxs);
+`;

package/src/components/Feedback/Mood.tsx

@@ -14,6 +14,7 @@ import { Button } from '@redocly/theme/components/Button/Button';
 import { FaceDissatisfiedIcon } from '@redocly/theme/icons/FaceDissatisfiedIcon/FaceDissatisfiedIcon';
 import { FaceSatisfiedIcon } from '@redocly/theme/icons/FaceSatisfiedIcon/FaceSatisfiedIcon';
 import { FaceNeutralIcon } from '@redocly/theme/icons/FaceNeutralIcon/FaceNeutralIcon';
+import { MAX_EMAIL_LENGTH } from '@redocly/theme/core/constants';
 
 export enum MOOD_STATES {
   SATISFIED = 'satisfied',
@@ -135,11 +136,13 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
   const displayFeedbackEmail = !!score && !optionalEmailSettings?.hide && !userData.isAuthenticated;
 
   const onSubmitMoodForm = () => {
+    const trimmedComment = comment?.trim() || undefined;
+    const trimmedEmail = email?.trim() || undefined;
     onSubmit({
       score: remapScore(score),
-      comment,
+      comment: trimmedComment,
       reasons,
-      email,
+      email: trimmedEmail,
     });
     setIsSubmitted(true);
   };
@@ -255,6 +258,7 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
                 translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com')
               }
               type="email"
+              maxLength={MAX_EMAIL_LENGTH}
               required={!!email}
               onKeyDown={(e) => {
                 if (e.key === 'Enter') {

package/src/components/Feedback/Rating.tsx

@@ -12,6 +12,7 @@ import { RadioCheckButtonIcon } from '@redocly/theme/icons/RadioCheckButtonIcon/
 import { Comment } from '@redocly/theme/components/Feedback/Comment';
 import { Stars } from '@redocly/theme/components/Feedback/Stars';
 import { Button } from '@redocly/theme/components/Button/Button';
+import { MAX_EMAIL_LENGTH } from '@redocly/theme/core/constants';
 
 export const FEEDBACK_MAX_RATING = 5;
 
@@ -64,12 +65,14 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
   };
 
   const onSubmitRatingForm = () => {
+    const trimmedComment = comment?.trim() || undefined;
+    const trimmedEmail = email?.trim() || undefined;
     onSubmit({
       score,
-      comment,
+      comment: trimmedComment,
       reasons,
       max: FEEDBACK_MAX_RATING,
-      email,
+      email: trimmedEmail,
     });
     setIsSubmitted(true);
   };
@@ -168,6 +171,7 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
                 translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com')
               }
               type="email"
+              maxLength={MAX_EMAIL_LENGTH}
               required={!!email}
               onKeyDown={(e) => {
                 if (e.key === 'Enter') {

package/src/components/Feedback/Scale.tsx

@@ -12,6 +12,7 @@ import { RadioCheckButtonIcon } from '@redocly/theme/icons/RadioCheckButtonIcon/
 import { Comment } from '@redocly/theme/components/Feedback/Comment';
 import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
 import { Button } from '@redocly/theme/components/Button/Button';
+import { MAX_EMAIL_LENGTH } from '@redocly/theme/core/constants';
 
 export const MAX_SCALE = 10;
 
@@ -96,12 +97,14 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
   };
 
   const onSubmitScaleForm = () => {
+    const trimmedComment = comment?.trim() || undefined;
+    const trimmedEmail = email?.trim() || undefined;
     onSubmit({
       score,
-      comment,
+      comment: trimmedComment,
       reasons,
       max: MAX_SCALE,
-      email,
+      email: trimmedEmail,
     });
     setIsSubmitted(true);
   };
@@ -193,6 +196,7 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
                 translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com')
               }
               type="email"
+              maxLength={MAX_EMAIL_LENGTH}
               required={!!email}
               onKeyDown={(e) => {
                 if (e.key === 'Enter') {

package/src/components/Feedback/Sentiment.tsx

@@ -13,6 +13,7 @@ import { Comment } from '@redocly/theme/components/Feedback/Comment';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { ThumbDownIcon } from '@redocly/theme/icons/ThumbDownIcon/ThumbDownIcon';
 import { ThumbUpIcon } from '@redocly/theme/icons/ThumbUpIcon/ThumbUpIcon';
+import { MAX_EMAIL_LENGTH } from '@redocly/theme/core/constants';
 
 export type SentimentProps = {
   onSubmit: (value: {
@@ -117,11 +118,13 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
   };
 
   const onSubmitSentimentForm = () => {
+    const trimmedComment = comment?.trim() || undefined;
+    const trimmedEmail = email?.trim() || undefined;
     onSubmit({
       score,
-      comment,
+      comment: trimmedComment,
       reasons,
-      email,
+      email: trimmedEmail,
     });
     setIsSubmitted(true);
   };
@@ -227,6 +230,7 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
                 translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com')
               }
               type="email"
+              maxLength={MAX_EMAIL_LENGTH}
               required={!!email}
               onKeyDown={(e) => {
                 if (e.key === 'Enter') {

package/src/components/Menu/variables.ts

@@ -130,12 +130,12 @@ export const mobileMenu = css`
     * @tokens Mobile Menu
     * */
   /* Fallback for older browsers. dvh accounts for dynamic UI elements like mobile address bars */
-  --menu-mobile-height: calc(100vh - var(--navbar-height));
-  --menu-mobile-height: calc(100dvh - var(--navbar-height));
+  --menu-mobile-height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  --menu-mobile-height: calc(100dvh - var(--navbar-height) - var(--banner-height));
   --menu-mobile-width: 100%;
   --menu-mobile-z-index: var(--z-index-raised);
   --menu-mobile-left: 0;
-  --menu-mobile-top: var(--navbar-height);
+  --menu-mobile-top: calc(var(--navbar-height) + var(--banner-height));
   --menu-mobile-transition: 0.5s;
   --menu-mobile-bg: var(--bg-color); // @presenter Color
   --menu-mobile-margin: var(--menu-mobile-items-margin-top) var(--menu-mobile-margin-horizontal) 0 var(--menu-mobile-margin-horizontal);

package/src/components/PageActions/PageActions.tsx

@@ -119,7 +119,7 @@ const LinkMenuItem = styled(Link)`
 `;
 
 const StyledDropdown = styled(Dropdown)`
-  z-index: calc(var(--z-index-raised) - 1);
+  --dropdown-menu-z-index: calc(var(--z-index-raised) - 1);
 `;
 
 const StyledDropdownMenu = styled(DropdownMenu)`

package/src/components/Search/SearchAiMessage.tsx

@@ -123,11 +123,13 @@ function SearchAiMessageComponent({
 
                   const toolCallCompletedText =
                     TOOL_CALL_DISPLAY_TEXT[segment.toolCall.name]?.completedText ??
-                    `${translate('search.ai.toolResult.found', 'Found')} ${segment.toolCall.result?.documentCount ?? 0} ${translate('search.ai.toolResult.found.documents', 'documents')}`;
+                    // `${translate('search.ai.toolResult.found', 'Found')} ${segment.toolCall.result?.documentCount ?? 0} ${translate('search.ai.toolResult.found.documents', 'documents')}`;
+                    `Executed "${segment.toolCall.name}" tool`;
 
                   const toolCallInProgressText =
                     TOOL_CALL_DISPLAY_TEXT[segment.toolCall.name]?.inProgressText ??
-                    translate('search.ai.toolCall.searching', 'Searching...');
+                    // translate('search.ai.toolCall.searching', 'Searching...');
+                    `Executing "${segment.toolCall.name}" tool...`;
 
                   const toolCallDisplayText = toolCallCompleted
                     ? toolCallCompletedText

package/src/core/constants/feedback.ts

@@ -0,0 +1,2 @@
+export const MAX_EMAIL_LENGTH = 254;
+export const MAX_CONTEXT_LENGTH = 5000;

package/src/core/constants/index.ts

@@ -6,3 +6,4 @@ export * from './catalog';
 export * from './breadcrumb';
 export * from './request-methods';
 export * from './mcp';
+export * from './feedback';

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

@@ -16,6 +16,12 @@ import { useMCPConfig } from './use-mcp-config';
 import { ClipboardService } from '../utils/clipboard-service';
 import { IS_BROWSER } from '../utils/dom';
 import { generateMCPDeepLink } from '../utils/mcp';
+import {
+  addTrailingSlash,
+  combineUrls,
+  removeTrailingSlash,
+  withoutPathPrefix,
+} from '../utils/urls';
 
 function createPageActionResource(pageSlug: string, pageUrl: string) {
   return {
@@ -110,11 +116,12 @@ export function usePageActions(
     const origin = IS_BROWSER
       ? window.location.origin
       : ((globalThis as { SSR_HOSTNAME?: string })['SSR_HOSTNAME'] ?? '');
-    const normalizedSlug = pageSlug.startsWith('/') ? pageSlug : '/' + pageSlug;
-    const pageUrl = `${origin}${normalizedSlug}`;
-    const mdPageUrl = new URL(
-      origin + normalizedSlug + (normalizedSlug === '/' ? 'index.html.md' : '.md'),
-    ).toString();
+    const pathname = addTrailingSlash(pageSlug);
+    const pageUrl = combineUrls(origin, pathname);
+    const isRoot = withoutPathPrefix(pathname) === '/';
+    const mdPageUrl = isRoot
+      ? combineUrls(origin, pathname, 'index.html.md')
+      : combineUrls(origin, removeTrailingSlash(pathname) + '.md');
 
     const actionHandlers: Record<PageActionType, () => PageAction | null> = {
       'docs-mcp-cursor': createMCPHandler('cursor', false),
@@ -160,7 +167,6 @@ export function usePageActions(
               action_type: 'view',
             },
           ]);
-          window.location.href = mdPageUrl;
         },
       }),
 

package/src/core/openapi/index.ts

@@ -39,3 +39,4 @@ export { isUndefined, isString, isNotNull, isObject } from '../utils/type-guards
 export { ThemeDataContext, type ThemeDataTransferObject } from '../contexts/ThemeDataContext';
 export { SearchSessionProvider, SearchSessionContext } from '../contexts/SearchContext';
 export { useUniqueSvgIds } from '../hooks/use-unique-svg-ids';
+export { trimText } from '../utils/text-trimmer';

package/src/core/styles/dark.ts

@@ -46,6 +46,17 @@ const replayDarkMode = css`
   // @tokens End
 `;
 
+const badgesDarkMode = css`
+  /**
+    * @tokens Audience Badge
+    */
+
+  --badge-audience-text-color: var(--text-color-secondary); // @presenter Color
+  --badge-audience-bg-color: var(--color-warm-grey-4); // @presenter Color
+
+  // @tokens End
+`
+
 
 export const darkMode = css`
   /* === Dark Theme Colors  === */
@@ -334,6 +345,7 @@ export const darkMode = css`
   ${bannerDarkMode}
   ${admonitionDarkMode}
   ${svgViewerDarkMode}
+  ${badgesDarkMode}
 
   /**
     * @tokens Dark Theme Scrollbar Config

package/src/core/styles/global.ts

@@ -823,6 +823,13 @@ const badges = css`
   --badge-deprecated-bg-color: var(--color-warning-base); // @presenter Color
   --badge-deprecated-border-radius: var(--border-radius); // @presenter BorderRadius
 
+  /**
+    * @tokens Audience Badge
+    */
+
+  --badge-audience-text-color: var(--text-color-secondary); // @presenter Color
+  --badge-audience-bg-color: var(--color-warm-grey-2); // @presenter Color
+
   // @tokens End
 `;
 

package/src/core/types/l10n.ts

@@ -203,6 +203,7 @@ export type TranslationKey =
   | 'feedback.settings.comment.label'
   | 'feedback.settings.comment.send'
   | 'feedback.settings.comment.cancel'
+  | 'feedback.settings.comment.maxLength'
   | 'feedback.settings.comment.satisfiedLabel'
   | 'feedback.settings.comment.neutralLabel'
   | 'feedback.settings.comment.dissatisfiedLabel'