@redocly/theme 0.56.0-next.9 → 0.56.0

package/lib/core/hooks/use-active-heading.js

@@ -3,11 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useActiveHeading = useActiveHeading;
 const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
-function useActiveHeading(contentElement, displayedHeaders) {
-    const [heading, setHeading] = (0, react_1.useState)(displayedHeaders.length > 1 ? displayedHeaders[0] : undefined);
+const utils_1 = require("../utils");
+function useActiveHeading(contentElement, displayedHeadings) {
+    const [heading, setHeading] = (0, react_1.useState)(undefined);
     const [headingElements, setHeadingElements] = (0, react_1.useState)([]);
     const headingElementsRef = (0, react_1.useRef)({});
+    const displayedHeadingsRef = (0, react_1.useRef)(displayedHeadings);
+    const lockObserver = (0, react_1.useRef)(false);
     const location = (0, react_router_dom_1.useLocation)();
+    (0, react_1.useEffect)(() => {
+        setHeading(undefined);
+        headingElementsRef.current = {};
+    }, [location.pathname]);
+    (0, react_1.useEffect)(() => {
+        displayedHeadingsRef.current = displayedHeadings;
+    }, [displayedHeadings]);
     const getVisibleHeadings = () => {
         const visibleHeadings = [];
         for (const key in headingElementsRef.current) {
@@ -18,28 +28,98 @@ function useActiveHeading(contentElement, displayedHeaders) {
         }
         return visibleHeadings;
     };
+    const isTopOfPage = () => window.scrollY <= 50;
+    // Returns viewport ratio for intersection observer based on screen height
+    const getViewportRatio = () => {
+        const vh = window.innerHeight;
+        if (vh >= 1400)
+            return 0.4;
+        if (vh >= 1000)
+            return 0.3;
+        return 0.25;
+    };
     const getIndexFromId = (0, react_1.useCallback)((id) => {
         return headingElements.findIndex((item) => item.id === id);
     }, [headingElements]);
     const findHeaders = (allContent) => {
         const allHeaders = allContent.querySelectorAll('.heading-anchor');
-        return Array.from(allHeaders);
+        const headers = Array.from(allHeaders);
+        if (displayedHeadingsRef.current && displayedHeadingsRef.current.length > 0) {
+            const displayedIds = displayedHeadingsRef.current.map((h) => h === null || h === void 0 ? void 0 : h.id).filter(Boolean);
+            return headers.filter((header) => displayedIds.includes(header.id));
+        }
+        return headers;
     };
-    const intersectionCallback = (0, react_1.useCallback)((headings) => {
+    const calculateVirtualPositions = (0, react_1.useCallback)((headers) => {
+        var _a;
+        if (!headers.length)
+            return {};
+        const navbarHeight = ((_a = document.querySelector('nav')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
+        const viewportHeight = window.innerHeight;
+        const triggerOffset = navbarHeight + viewportHeight * 0.25;
+        const lastHeader = headers[headers.length - 1];
+        const lastHeaderTop = lastHeader.offsetTop;
+        const maxScrollableHeight = document.body.scrollHeight - viewportHeight;
+        const requiredUplift = Math.max(0, lastHeaderTop - maxScrollableHeight + triggerOffset);
+        const virtualPositions = {};
+        for (let i = 0; i < headers.length; i++) {
+            const header = headers[i];
+            const headerTop = header.offsetTop;
+            const normalizedPosition = headers.length === 1 ? 0 : i / (headers.length - 1);
+            const adjustmentFactor = (0, utils_1.enhancedSmoothstep)(normalizedPosition, 0.4);
+            const uplift = requiredUplift * adjustmentFactor;
+            const virtualTop = headerTop - uplift;
+            virtualPositions[header.id] = virtualTop;
+        }
+        return virtualPositions;
+    }, []);
+    const getTriggerOffset = (0, react_1.useCallback)(() => {
         var _a;
-        headingElementsRef.current = headings.reduce((map, headingElement) => {
-            map[headingElement.target.id] = headingElement;
+        const navbarHeight = ((_a = document.querySelector('nav')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
+        return navbarHeight + window.innerHeight * getViewportRatio();
+    }, []);
+    const findActiveHeaderByVirtualPosition = (0, react_1.useCallback)((headers, scrollY, triggerOffset) => {
+        const virtualPositions = calculateVirtualPositions(headers);
+        let activeHeader = headers[0];
+        for (const header of headers) {
+            const virtualTop = virtualPositions[header.id] || header.offsetTop;
+            if (virtualTop <= scrollY + triggerOffset) {
+                activeHeader = header;
+            }
+            else {
+                break;
+            }
+        }
+        return activeHeader;
+    }, [calculateVirtualPositions]);
+    const intersectionCallback = (0, react_1.useCallback)((entries) => {
+        var _a, _b, _c;
+        if (lockObserver.current) {
+            return;
+        }
+        headingElementsRef.current = entries.reduce((map, entry) => {
+            map[entry.target.id] = entry;
             return map;
         }, headingElementsRef.current);
-        const totalHeight = window.scrollY + window.innerHeight;
-        // handle bottom of the page
-        if (totalHeight >= document.body.scrollHeight) {
-            const newHeading = ((_a = headingElements[(headingElements === null || headingElements === void 0 ? void 0 : headingElements.length) - 1]) === null || _a === void 0 ? void 0 : _a.id) || undefined;
+        if (isTopOfPage()) {
+            const newHeading = ((_a = headingElements[0]) === null || _a === void 0 ? void 0 : _a.id) || undefined;
             setHeading(newHeading);
             return;
         }
         const visibleHeadings = getVisibleHeadings();
         if (!visibleHeadings.length) {
+            const triggerOffset = getTriggerOffset();
+            if (isTopOfPage()) {
+                setHeading(((_b = headingElements[0]) === null || _b === void 0 ? void 0 : _b.id) || undefined);
+                return;
+            }
+            const totalHeight = window.scrollY + window.innerHeight;
+            if (totalHeight >= document.body.scrollHeight - 10) {
+                setHeading(((_c = headingElements[headingElements.length - 1]) === null || _c === void 0 ? void 0 : _c.id) || undefined);
+                return;
+            }
+            const activeHeader = findActiveHeaderByVirtualPosition(headingElements, window.scrollY, triggerOffset);
+            setHeading(activeHeader.id);
             return;
         }
         if (visibleHeadings.length === 1) {
@@ -49,31 +129,88 @@ function useActiveHeading(contentElement, displayedHeaders) {
         visibleHeadings.sort((a, b) => {
             return getIndexFromId(a.target.id) - getIndexFromId(b.target.id);
         });
+        const firstVisibleHeading = visibleHeadings[0];
+        if (getIndexFromId(firstVisibleHeading.target.id) === 0 && isTopOfPage()) {
+            setHeading(firstVisibleHeading.target.id);
+            return;
+        }
+        const totalHeight = scrollY + window.innerHeight;
+        if (totalHeight >= document.body.scrollHeight - 10) {
+            setHeading(visibleHeadings[visibleHeadings.length - 1].target.id);
+            return;
+        }
         setHeading(visibleHeadings[0].target.id);
-    }, [getIndexFromId, headingElements]);
+    }, [getIndexFromId, headingElements, getTriggerOffset, findActiveHeaderByVirtualPosition]);
+    const handleHeadingClick = (0, react_1.useCallback)((headingId) => {
+        lockObserver.current = true;
+        setHeading(headingId);
+        const headingElement = headingElements.find((el) => el.id === headingId);
+        if (headingElement && headingElement.scrollIntoView) {
+            headingElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+        setTimeout(() => {
+            headingElementsRef.current = {};
+            lockObserver.current = false;
+        }, 300);
+    }, [headingElements]);
     (0, react_1.useEffect)(() => {
+        var _a;
         if (!contentElement) {
             return;
         }
-        setHeadingElements(findHeaders(contentElement));
-    }, [contentElement, location]);
+        const headers = findHeaders(contentElement);
+        setHeadingElements(headers);
+        if (headers.length > 0 && !heading) {
+            if (isTopOfPage()) {
+                setHeading(headers[0].id);
+            }
+            else {
+                const totalHeight = scrollY + window.innerHeight;
+                if (totalHeight >= document.body.scrollHeight - 10) {
+                    setHeading(((_a = headers[headers.length - 1]) === null || _a === void 0 ? void 0 : _a.id) || undefined);
+                }
+                else {
+                    const triggerOffset = getTriggerOffset();
+                    const activeHeader = findActiveHeaderByVirtualPosition(headers, scrollY, triggerOffset);
+                    setHeading(activeHeader.id);
+                }
+            }
+        }
+    }, [
+        contentElement,
+        location,
+        heading,
+        calculateVirtualPositions,
+        getTriggerOffset,
+        findActiveHeaderByVirtualPosition,
+    ]);
     (0, react_1.useEffect)(() => {
         if (!(headingElements === null || headingElements === void 0 ? void 0 : headingElements.length)) {
             return;
         }
         headingElementsRef.current = {};
-        // Bottom rootMargin -30% changes part of the view where IntersectionObserver starts to detect headers
+        const triggerOffset = getTriggerOffset();
         const observer = new IntersectionObserver(intersectionCallback, {
-            rootMargin: '0px 0px -30% 0px',
-            threshold: 1,
+            rootMargin: `-${triggerOffset}px 0px -${window.innerHeight * getViewportRatio()}px 0px`,
+            threshold: [0, 0.1, 0.3, 0.5, 0.7, 1],
         });
-        headingElements === null || headingElements === void 0 ? void 0 : headingElements.forEach((element) => {
-            if (displayedHeaders.includes(element.id)) {
-                observer.observe(element);
-            }
+        headingElements.forEach((element) => {
+            observer.observe(element);
         });
-        return () => observer.disconnect();
-    }, [headingElements, displayedHeaders, intersectionCallback]);
-    return heading;
+        const handleScroll = () => {
+            var _a;
+            if (lockObserver.current)
+                return;
+            if (isTopOfPage()) {
+                setHeading(((_a = headingElements[0]) === null || _a === void 0 ? void 0 : _a.id) || undefined);
+            }
+        };
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        return () => {
+            observer.disconnect();
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, [headingElements, intersectionCallback, getTriggerOffset]);
+    return { heading, handleHeadingClick };
 }
 //# sourceMappingURL=use-active-heading.js.map

package/lib/core/hooks/use-codeblock-tabs-controls.d.ts

@@ -1,6 +1,6 @@
-import type { FileTabs } from '../../components/CodeBlock/CodeBlock';
+import type { CodeBlockTabItems } from '../../components/CodeBlock/CodeBlock';
 type CodeBlockTabsProps = {
-    tabs: FileTabs;
+    tabs: CodeBlockTabItems;
     containerRef: React.RefObject<HTMLDivElement | null>;
     tabRefs: React.RefObject<HTMLButtonElement[]>;
 };

package/lib/core/hooks/use-codeblock-tabs-controls.js

@@ -14,11 +14,11 @@ function useCodeBlockTabsControls({ tabs, containerRef, tabRefs }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [(_a = tabRefs === null || tabRefs === void 0 ? void 0 : tabRefs.current) === null || _a === void 0 ? void 0 : _a.length]);
     const { currentIndex, isFirstTab, isLastTab } = (0, react_1.useMemo)(() => {
-        const currentIndex = tabs.files.findIndex((file) => file.name === tabs.activeTabName);
+        const currentIndex = tabs.items.findIndex((file) => file.name === tabs.value);
         return {
             currentIndex,
             isFirstTab: currentIndex === 0,
-            isLastTab: currentIndex === tabs.files.length - 1,
+            isLastTab: currentIndex === tabs.items.length - 1,
         };
     }, [tabs]);
     (0, react_1.useEffect)(() => {
@@ -37,15 +37,15 @@ function useCodeBlockTabsControls({ tabs, containerRef, tabRefs }) {
     }, [containerRef.current]);
     const handlePrevTab = (0, react_1.useCallback)(() => {
         if (!isFirstTab) {
-            const prevTab = tabs.files[currentIndex - 1].name;
-            tabs.handleTabSwitch(prevTab);
+            const prevTab = tabs.items[currentIndex - 1].name;
+            tabs.onChange(prevTab);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currentIndex]);
     const handleNextTab = (0, react_1.useCallback)(() => {
         if (!isLastTab) {
-            const nextTab = tabs.files[currentIndex + 1].name;
-            tabs.handleTabSwitch(nextTab);
+            const nextTab = tabs.items[currentIndex + 1].name;
+            tabs.onChange(nextTab);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currentIndex]);

package/lib/core/hooks/use-local-state.d.ts

@@ -0,0 +1 @@
+export declare function useLocalState<T>(key: string, initialValue: T): [T, (value: T) => void];

package/lib/core/hooks/use-local-state.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLocalState = useLocalState;
+const react_1 = require("react");
+function getInitialValue(key, initialValue) {
+    if (typeof window === 'undefined') {
+        return initialValue;
+    }
+    try {
+        const savedValue = localStorage.getItem(key);
+        if (savedValue) {
+            return JSON.parse(savedValue);
+        }
+    }
+    catch (error) {
+        console.error(`Error reading from localStorage for key "${key}":`, error);
+    }
+    return initialValue;
+}
+function useLocalState(key, initialValue) {
+    const [value, setValue] = (0, react_1.useState)(() => getInitialValue(key, initialValue));
+    (0, react_1.useEffect)(() => {
+        try {
+            localStorage.setItem(key, JSON.stringify(value));
+        }
+        catch (error) {
+            console.error(`Error writing to localStorage for key "${key}":`, error);
+        }
+    }, [key, value]);
+    return [value, setValue];
+}
+//# sourceMappingURL=use-local-state.js.map

package/lib/core/hooks/use-page-actions.d.ts

@@ -0,0 +1,2 @@
+import type { PageAction } from '../types';
+export declare function usePageActions(pageSlug: string): PageAction[];

package/lib/core/hooks/use-page-actions.js

@@ -0,0 +1,101 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePageActions = usePageActions;
+const react_1 = require("react");
+const CopyIcon_1 = require("../../icons/CopyIcon/CopyIcon");
+const ChatGptIcon_1 = require("../../icons/ChatGptIcon/ChatGptIcon");
+const ClaudeIcon_1 = require("../../icons/ClaudeIcon/ClaudeIcon");
+const MarkdownFullIcon_1 = require("../../icons/MarkdownFullIcon/MarkdownFullIcon");
+const use_theme_hooks_1 = require("./use-theme-hooks");
+const use_theme_config_1 = require("./use-theme-config");
+const clipboard_service_1 = require("../utils/clipboard-service");
+const dom_1 = require("../utils/dom");
+const DEFAULT_ENABLED_ACTIONS = ['copy', 'view', 'chatgpt', 'claude'];
+function usePageActions(pageSlug) {
+    var _a, _b, _c;
+    const { useTranslate, usePageData, usePageProps } = (0, use_theme_hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const { navigation } = (0, use_theme_config_1.useThemeConfig)();
+    // Can't use any actions if no markdown files are generated for LLMs
+    const isLlmsDisabled = ((_c = (_b = (_a = usePageProps()) === null || _a === void 0 ? void 0 : _a.seo) === null || _b === void 0 ? void 0 : _b.llmstxt) === null || _c === void 0 ? void 0 : _c.hide) === true;
+    const { isPublic } = usePageData() || {};
+    const actions = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        if (((_a = navigation === null || navigation === void 0 ? void 0 : navigation.actions) === null || _a === void 0 ? void 0 : _a.hide) || isLlmsDisabled) {
+            return [];
+        }
+        const origin = dom_1.IS_BROWSER ? window.location.origin : globalThis['SSR_HOSTNAME'];
+        const normalizedSlug = pageSlug.startsWith('/') ? pageSlug : '/' + pageSlug;
+        const mdPageUrl = new URL(origin + normalizedSlug + (normalizedSlug === '/' ? 'index.html.md' : '.md')).toString();
+        function getExternalAiPromptLink(baseUrl) {
+            const externalAiPrompt = `Read ${mdPageUrl} and answer questions based on the content.`;
+            const url = new URL(baseUrl);
+            url.searchParams.set('q', externalAiPrompt);
+            return url.toString();
+        }
+        return (((_b = navigation === null || navigation === void 0 ? void 0 : navigation.actions) === null || _b === void 0 ? void 0 : _b.items) || DEFAULT_ENABLED_ACTIONS)
+            .map((action) => {
+            switch (action) {
+                case 'copy':
+                    return {
+                        buttonText: translate('page.actions.copyButtonText', 'Copy'),
+                        title: translate('page.actions.copyTitle', 'Copy for LLM'),
+                        description: translate('page.actions.copyDescription', 'Copy page as Markdown for LLMs'),
+                        iconComponent: CopyIcon_1.CopyIcon,
+                        onClick: () => __awaiter(this, void 0, void 0, function* () {
+                            try {
+                                const result = yield fetch(mdPageUrl);
+                                const text = yield result.text();
+                                clipboard_service_1.ClipboardService.copyCustom(text);
+                            }
+                            catch (error) {
+                                console.error(error);
+                            }
+                        }),
+                    };
+                case 'view':
+                    return {
+                        buttonText: translate('page.actions.viewAsMdButtonText', 'View as Markdown'),
+                        title: translate('page.actions.viewAsMdTitle', 'View as Markdown'),
+                        description: translate('page.actions.viewAsMdDescription', 'Open this page as Markdown'),
+                        iconComponent: MarkdownFullIcon_1.MarkdownFullIcon,
+                        link: mdPageUrl,
+                    };
+                case 'chatgpt':
+                    if (!isPublic) {
+                        return null;
+                    }
+                    return {
+                        buttonText: translate('page.actions.chatGptButtonText', 'Open in ChatGPT'),
+                        title: translate('page.actions.chatGptTitle', 'Open in ChatGPT'),
+                        description: translate('page.actions.chatGptDescription', 'Get insights from ChatGPT'),
+                        iconComponent: ChatGptIcon_1.ChatGptIcon,
+                        link: getExternalAiPromptLink('https://chat.openai.com'),
+                    };
+                case 'claude':
+                    if (!isPublic) {
+                        return null;
+                    }
+                    return {
+                        buttonText: translate('page.actions.claudeButtonText', 'Open in Claude'),
+                        title: translate('page.actions.claudeTitle', 'Open in Claude'),
+                        description: translate('page.actions.claudeDescription', 'Get insights from Claude'),
+                        iconComponent: ClaudeIcon_1.ClaudeIcon,
+                        link: getExternalAiPromptLink('https://claude.ai/new'),
+                    };
+            }
+        })
+            .filter((action) => action !== null);
+    }, [navigation, translate, pageSlug, isPublic, isLlmsDisabled]);
+    return actions;
+}
+//# sourceMappingURL=use-page-actions.js.map

package/lib/core/hooks/use-theme-hooks.js

@@ -16,6 +16,8 @@ const fallbacks = {
     useBreadcrumbs: () => [],
     useCodeHighlight: () => ({ highlight: (rawContent) => rawContent }),
     useUserMenu: () => ({}),
+    usePageData: () => null,
+    usePageProps: () => ({}),
 };
 const useThemeHooks = () => {
     const context = (0, react_1.useContext)(ThemeDataContext_1.ThemeDataContext);

package/lib/core/styles/dark.js

@@ -13,6 +13,7 @@ const variables_dark_8 = require("../../components/StatusCode/variables.dark");
 const variables_dark_9 = require("../../components/Switch/variables.dark");
 const variables_dark_10 = require("../../markdoc/components/Cards/variables.dark");
 const variables_dark_11 = require("../../components/Catalog/variables.dark");
+const variables_dark_12 = require("../../components/PageActions/variables.dark");
 const replayDarkMode = (0, styled_components_1.css) `
   /**
     * @tokens Replay Colors
@@ -316,6 +317,7 @@ exports.darkMode = (0, styled_components_1.css) `
   ${variables_dark_9.switcherDarkMode}
   ${variables_dark_10.cardsDarkMode}
   ${variables_dark_11.catalogDarkMode}
+  ${variables_dark_12.pageActionsDarkMode}
 
   /**
     * @tokens Dark Theme Scrollbar Config

package/lib/core/styles/global.js

@@ -40,6 +40,7 @@ const variables_35 = require("../../components/Switch/variables");
 const variables_36 = require("../../markdoc/components/Cards/variables");
 const variables_37 = require("../../markdoc/components/CodeWalkthrough/variables");
 const variables_38 = require("../../components/SkipContent/variables");
+const variables_39 = require("../../components/PageActions/variables");
 const dark_1 = require("./dark");
 const themeColors = (0, styled_components_1.css) `
   /* === Palette === */
@@ -1245,6 +1246,7 @@ exports.styles = (0, styled_components_1.css) `
     ${variables_34.datePicker}
     ${replay}
     ${variables_38.skipContent}
+    ${variables_39.pageActions}
 
     background-color: var(--bg-color);
     color: var(--text-color-primary);

package/lib/core/types/hooks.d.ts

@@ -1,4 +1,4 @@
-import type { CatalogEntityConfig, PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
+import type { CatalogEntityConfig, PageData, PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
 import type { ShikiTransformer } from '@shikijs/types';
 import type { Callback, TFunction as TFunc } from 'i18next';
 import type { To, Location, NavigateFunction } from 'react-router-dom';
@@ -121,6 +121,7 @@ export type ThemeHooks = {
         send<TEventType extends EventType>(event: SendEventParams<TEventType>): void;
     };
     useUserTeams: () => string[];
+    usePageData: () => PageData | null;
     usePageProps: <T extends Record<string, unknown>>() => PageProps & T;
     useCodeHighlight: () => {
         highlight: (code: string, language?: string | undefined, highlightOptions?: {

package/lib/core/types/index.d.ts

@@ -16,3 +16,4 @@ export * from './open-api-server';
 export * from './marker';
 export * from './code-walkthrough';
 export * from './telemetry';
+export * from './page-actions';

package/lib/core/types/index.js

@@ -32,4 +32,5 @@ __exportStar(require("./open-api-server"), exports);
 __exportStar(require("./marker"), exports);
 __exportStar(require("./code-walkthrough"), exports);
 __exportStar(require("./telemetry"), exports);
+__exportStar(require("./page-actions"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/types/l10n.d.ts

@@ -1,5 +1,5 @@
 import type { TOptions } from 'i18next';
-export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label';
+export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'page.actions.copyButtonText' | 'page.actions.copyTitle' | 'page.actions.copyDescription' | 'page.actions.viewAsMdTitle' | 'page.actions.viewAsMdButtonText' | 'page.actions.viewAsMdDescription' | 'page.actions.chatGptTitle' | 'page.actions.chatGptButtonText' | 'page.actions.chatGptDescription' | 'page.actions.claudeTitle' | 'page.actions.claudeButtonText' | 'page.actions.claudeDescription' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label';
 export type Locale = {
     code: string;
     name: string;

package/lib/core/types/page-actions.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentType } from 'react';
+type BaseAction = {
+    title: string;
+    description: string;
+    iconComponent: ComponentType;
+    buttonText: string;
+};
+type LinkPageAction = BaseAction & {
+    link: string;
+};
+type ClickPageAction = BaseAction & {
+    onClick: () => Promise<void> | void;
+};
+export type PageAction = LinkPageAction | ClickPageAction;
+export {};

package/lib/core/types/page-actions.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=page-actions.js.map

package/lib/core/types/sidebar.d.ts

@@ -7,6 +7,7 @@ export type SidebarNavItem = {
     sublabel?: string;
     subLabelTranslationKey?: string;
     icon?: string;
+    srcSet?: string;
     link?: string;
     type?: string;
     httpVerb?: string;

package/lib/core/utils/enhanced-smoothstep.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Enhanced smoothstep function for smooth interpolation with configurable threshold.
+ * Used in active heading detection to create virtual positions for better scroll behavior.
+ */
+export declare function enhancedSmoothstep(input: number, threshold?: number): number;

package/lib/core/utils/enhanced-smoothstep.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.enhancedSmoothstep = enhancedSmoothstep;
+/**
+ * Enhanced smoothstep function for smooth interpolation with configurable threshold.
+ * Used in active heading detection to create virtual positions for better scroll behavior.
+ */
+function enhancedSmoothstep(input, threshold = 0.4) {
+    if (input <= threshold) {
+        return 0;
+    }
+    const normalizedValue = Math.min(Math.max((input - threshold) / (1 - threshold), 0), 1);
+    return (3 * normalizedValue * normalizedValue - 2 * normalizedValue * normalizedValue * normalizedValue);
+}
+//# sourceMappingURL=enhanced-smoothstep.js.map

package/lib/core/utils/get-file-icon.d.ts

@@ -1,2 +1,3 @@
-import type { IconProps } from '../../icons/types';
-export declare function getFileIconByExt(ext: string): import("react").FunctionComponent<IconProps>;
+import * as React from 'react';
+export declare function getFileIconByExt(ext: string): React.JSX.Element;
+export declare function getFileIconByLanguage(language: string): React.JSX.Element;