@redocly/theme 0.48.1 → 0.49.0

package/lib/components/DatePicker/variables.js

@@ -6,7 +6,7 @@ exports.datePicker = (0, styled_components_1.css) `
   --date-picker-nav-color: #000000;
   --date-picker-tile-bg-color: var(--color-blue-2);
   --date-picker-tile-color: var(--text-color-primary);
-  --date-picker-tile-bg-color-hover: var(--color-blue-3)
+  --date-picker-tile-bg-color-hover: var(--color-blue-3);
   --date-picker-tile-color-hover: var(--text-color-primary);
   --date-picker-input-width: var(--spacing-md);
   --date-picker-invalid-input-bg-color: var(--bg-color-raised);

package/lib/core/contexts/CodeWalkthrough/CodeWalkthroughControlsContext.js

@@ -4,12 +4,8 @@ exports.CodeWalkthroughControlsStateContext = void 0;
 const react_1 = require("react");
 exports.CodeWalkthroughControlsStateContext = (0, react_1.createContext)({
     activeFilters: [],
-    getToggleState: () => null,
-    changeToggleState: () => { },
-    getInputState: () => null,
-    changeInputState: () => { },
-    getFilterState: () => null,
-    changeFilterState: () => { },
+    getControlState: () => null,
+    changeControlState: () => { },
     getFileText: () => '',
     areConditionsMet: () => false,
     handleDownloadCode: () => Promise.resolve(),

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-controls.d.ts

@@ -1,6 +1,4 @@
-import type { CodeWalkthroughFile, CodeWalkthroughFilter, InputsMarkdocAttr, TogglesMarkdocAttr, CodeWalkthroughFilterItem, ControlState, ControlTypeValue, ControlType, CodeWalkthroughConditionsObject } from '@redocly/config';
-export type getState<T extends ControlType> = (id: string) => Omit<ControlState<T>, 'type'> | null;
-export type changeState<T extends ControlType> = (id: string, value: ControlTypeValue<T>) => void;
+import type { CodeWalkthroughFile, CodeWalkthroughFilter, InputsMarkdocAttr, TogglesMarkdocAttr, CodeWalkthroughFilterItem, CodeWalkthroughConditionsObject } from '@redocly/config';
 export type ActiveFilter = {
     id: string;
     label?: string;
@@ -8,12 +6,11 @@ export type ActiveFilter = {
 };
 export type WalkthroughControlsState = {
     activeFilters: ActiveFilter[];
-    getToggleState: getState<'toggle'>;
-    changeToggleState: changeState<'toggle'>;
-    getInputState: getState<'input'>;
-    changeInputState: changeState<'input'>;
-    getFilterState: getState<'filter'>;
-    changeFilterState: changeState<'filter'>;
+    getControlState: (id: string) => {
+        value: string | boolean;
+        render: boolean;
+    } | null;
+    changeControlState: (id: string, value: string | boolean) => void;
     areConditionsMet: (conditions: CodeWalkthroughConditionsObject) => boolean;
     handleDownloadCode: (files: CodeWalkthroughFile[]) => Promise<void>;
     getFileText: (file: CodeWalkthroughFile) => string;

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-controls.js

@@ -13,128 +13,94 @@ function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
     const location = (0, react_router_dom_1.useLocation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const searchParams = (0, react_1.useMemo)(() => new URLSearchParams(location.search), [location.search]);
-    const [togglesState, setTogglesState] = (0, react_1.useState)(() => {
+    const [controlsState, setControlsState] = (0, react_1.useState)(() => {
+        var _a, _b, _c, _d;
         const initialState = {};
         for (const [id, toggle] of Object.entries(toggles)) {
             initialState[id] = Object.assign(Object.assign({}, toggle), { render: true, type: 'toggle', value: enableDeepLink ? searchParams.get(id) === 'true' : false });
         }
-        return initialState;
-    });
-    const changeToggleState = (toggleId, checked) => {
-        setTogglesState((prev) => {
-            const toggle = prev[toggleId];
-            if (toggle) {
-                return Object.assign(Object.assign({}, prev), { [toggleId]: Object.assign(Object.assign({}, toggle), { value: checked }) });
-            }
-            else {
-                return prev;
-            }
-        });
-    };
-    const getToggleState = (toggleId) => {
-        const toggleState = togglesState[toggleId];
-        if (toggleState) {
-            return {
-                render: toggleState.render,
-                value: toggleState.value,
-            };
-        }
-        else {
-            return null;
-        }
-    };
-    const [inputsState, setInputsState] = (0, react_1.useState)(() => {
-        var _a;
-        const initialState = {};
         for (const [id, input] of Object.entries(inputs)) {
             initialState[id] = Object.assign(Object.assign({}, input), { render: true, type: 'input', value: enableDeepLink ? ((_a = searchParams.get(id)) !== null && _a !== void 0 ? _a : input.value) : input.value });
         }
-        return initialState;
-    });
-    const changeInputState = (inputId, value) => {
-        setInputsState((prev) => {
-            const input = prev[inputId];
-            if (input) {
-                return Object.assign(Object.assign({}, prev), { [inputId]: Object.assign(Object.assign({}, input), { value }) });
-            }
-            else {
-                return prev;
-            }
-        });
-    };
-    const getInputState = (inputId) => {
-        const inputState = inputsState[inputId];
-        if (inputState) {
-            return {
-                render: inputState.render,
-                value: inputState.value,
-            };
-        }
-        else {
-            return null;
-        }
-    };
-    const [filtersState, setFiltersState] = (0, react_1.useState)(() => {
-        var _a, _b, _c;
-        const initialState = {};
         for (const [id, filter] of Object.entries(filters)) {
-            const defaultValue = ((_b = (_a = filter === null || filter === void 0 ? void 0 : filter.items) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.value) || '';
-            initialState[id] = Object.assign(Object.assign({}, filter), { render: true, type: 'filter', value: enableDeepLink ? ((_c = searchParams.get(id)) !== null && _c !== void 0 ? _c : defaultValue) : defaultValue });
+            const defaultValue = ((_c = (_b = filter === null || filter === void 0 ? void 0 : filter.items) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.value) || '';
+            initialState[id] = Object.assign(Object.assign({}, filter), { render: true, type: 'filter', value: enableDeepLink ? ((_d = searchParams.get(id)) !== null && _d !== void 0 ? _d : defaultValue) : defaultValue });
         }
         return initialState;
     });
-    const changeFilterState = (filterId, value) => {
-        setFiltersState((prev) => {
-            const filter = prev[filterId];
-            if (filter) {
-                return Object.assign(Object.assign({}, prev), { [filterId]: Object.assign(Object.assign({}, filter), { value }) });
-            }
-            else {
+    const changeControlState = (id, value) => {
+        setControlsState((prev) => {
+            const control = prev[id];
+            if (!control) {
+                console.error(`Control with id "${id}" not found.`);
                 return prev;
             }
+            switch (control.type) {
+                case 'input':
+                    if (typeof value !== 'string') {
+                        console.error(`Invalid value type for input "${id}". Input control type requires a string value.`);
+                        return prev;
+                    }
+                    break;
+                case 'toggle':
+                    if (typeof value !== 'boolean') {
+                        console.error(`Invalid value type for toggle "${id}". Toggle control type requires a boolean value.`);
+                        return prev;
+                    }
+                    break;
+                case 'filter':
+                    if (typeof value !== 'string') {
+                        console.error(`Invalid value type for filter "${id}". Filter control type requires a string value.`);
+                        return prev;
+                    }
+                    break;
+                default:
+                    console.error(`Invalid control type "${control === null || control === void 0 ? void 0 : control.type}" for control "${id}". Allowed types are "toggle", "input", or "filter".`);
+                    return prev;
+            }
+            return Object.assign(Object.assign({}, prev), { [id]: Object.assign(Object.assign({}, control), { value }) });
         });
     };
-    const getFilterState = (filterId) => {
-        const filterState = filtersState[filterId];
-        if (filterState) {
+    const getControlState = (id) => {
+        const controlState = controlsState[id];
+        if (controlState) {
             return {
-                render: filterState.render,
-                value: filterState.value,
+                render: controlState.render,
+                value: controlState.value,
             };
         }
         else {
             return null;
         }
     };
-    const state = Object.assign(Object.assign(Object.assign({}, filtersState), togglesState), inputsState);
     const walkthroughContext = (0, react_1.useMemo)(() => {
-        const areConditionsMet = (conditions) => (0, utils_1.matchCodeWalkthroughConditions)(conditions, state);
-        for (const [id, element] of Object.entries(state)) {
-            if (element && !areConditionsMet(element)) {
-                state[id].render = false;
-                state[id].value = defaultControlsValues[element.type];
+        const areConditionsMet = (conditions) => (0, utils_1.matchCodeWalkthroughConditions)(conditions, controlsState);
+        for (const [id, control] of Object.entries(controlsState)) {
+            if (control && !areConditionsMet(control)) {
+                controlsState[id].render = false;
+                controlsState[id].value = defaultControlsValues[control.type];
             }
         }
         const activeFilters = [];
         for (const [id, filter] of Object.entries(filters)) {
-            if (!filtersState[id].render) {
+            if (!controlsState[id].render) {
                 continue;
             }
             // code-walk-todo: need to check if we have a default fallback
             const items = Array.isArray(filter === null || filter === void 0 ? void 0 : filter.items) ? filter.items : [];
             const activeItems = items.filter((item) => areConditionsMet(item));
             if (activeItems.length === 0) {
-                filtersState[id].render = false;
-                filtersState[id].value = defaultControlsValues['filter'];
+                controlsState[id].render = false;
+                controlsState[id].value = defaultControlsValues['filter'];
                 continue;
             }
-            const currentValue = filtersState[id].value;
+            const currentValue = controlsState[id].value;
             if (currentValue) {
                 const isValueInActiveItems = activeItems.findIndex(({ value }) => value === currentValue) !== -1;
-                filtersState[id].value = isValueInActiveItems ? currentValue : activeItems[0].value;
+                controlsState[id].value = isValueInActiveItems ? currentValue : activeItems[0].value;
             }
             else {
-                filtersState[id].value = activeItems[0].value;
+                controlsState[id].value = activeItems[0].value;
             }
             activeFilters.push({
                 id,
@@ -142,8 +108,9 @@ function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
                 items: activeItems,
             });
         }
-        const handleDownloadCode = (files) => (0, utils_1.downloadCodeWalkthrough)(files, state, inputsState);
-        const getFileText = (file) => (0, utils_1.getCodeWalkthroughFileText)(file, state, inputsState);
+        const inputsState = Object.fromEntries(Object.entries(controlsState).filter(([_, controlState]) => controlState.type === 'input'));
+        const handleDownloadCode = (files) => (0, utils_1.downloadCodeWalkthrough)(files, controlsState, inputsState);
+        const getFileText = (file) => (0, utils_1.getCodeWalkthroughFileText)(file, controlsState, inputsState);
         const populateInputsWithValue = (node) => (0, utils_1.replaceInputsWithValue)(node, inputsState);
         return {
             activeFilters,
@@ -152,9 +119,7 @@ function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
             getFileText,
             populateInputsWithValue,
         };
-        // Ignore state in dependency array as it's simply a combination of toggles, filters and inputs.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filters, filtersState, togglesState, inputsState]);
+    }, [filters, controlsState]);
     /**
      * Update the URL search params with the current state of the filters and inputs
      */
@@ -163,7 +128,7 @@ function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
             return;
         }
         const newSearchParams = new URLSearchParams(Array.from(searchParams.entries()));
-        for (const [id, { value }] of Object.entries(state)) {
+        for (const [id, { value }] of Object.entries(controlsState)) {
             if (value) {
                 newSearchParams.set(id, value.toString());
             }
@@ -177,12 +142,8 @@ function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
         navigate({ search: newSearch });
         // Ignore searchParams in dependency array to avoid infinite re-renders
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filters, filtersState, togglesState, inputsState, navigate, location, state]);
-    return Object.assign({ getInputState,
-        changeInputState,
-        getToggleState,
-        changeToggleState,
-        getFilterState,
-        changeFilterState }, walkthroughContext);
+    }, [filters, controlsState, navigate, location]);
+    return Object.assign({ changeControlState,
+        getControlState }, walkthroughContext);
 }
 //# sourceMappingURL=use-code-walkthrough-controls.js.map

package/lib/core/styles/global.js

@@ -1007,6 +1007,24 @@ const error = (0, styled_components_1.css) `
   --detailed-error-message-width: 100%;
   --detailed-error-message-font-size: var(--font-size-base);
   --detailed-error-message-font-family: var(--code-block-controls-font-family);
+    
+  --compilation-error-description-padding: 0 0 var(--spacing-base);
+  --compilation-error-codeframe-margin: var(--spacing-xs) 0 0 0;
+  --compilation-error-codeframe-padding: var(--spacing-xs);
+  --compilation-error-block-padding: var(--spacing-base);
+  --compilation-error-block-margin: var(--spacing-xl) 0;
+  --compilation-error-title-font-size: var(--font-size-xl);
+  --compilation-error-header-font-size: var(--font-size-lg);
+  --compilation-error-text-font-size: var(--font-size-base);
+  --compilation-error-header-padding: var(--spacing-sm);
+  --compilation-error-container-margin: var(--spacing-xxl) auto;
+  --compilation-error-container-padding: var(--spacing-lg);
+  --compilation-error-page-max-width: 800px;
+  --compilation-error-font-family: var(--font-family-base);  
+  --compilation-error-fix-instruction-margin: var(--spacing-sm) 0 0 0;
+  --compilation-error-highlighted-text-padding: 0 var(--spacing-xxs);
+  --compilation-error-divider-margin: var(--spacing-base) 0;
+  --compilation-error-file-header-margin: 0 0 var(--spacing-xs) 0;
 `;
 const modal = (0, styled_components_1.css) `
   body:has(.scroll-lock) {

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

@@ -5,6 +5,7 @@ export type OperationParameter = {
     description: string | string[];
     place: string;
     path?: string[];
+    deepLink?: string;
 };
 export type SearchDocument = {
     id: string;

package/lib/core/utils/download-code-walkthrough.d.ts

@@ -1,4 +1,6 @@
-import type { CodeWalkthroughFile, InputsState } from '@redocly/config';
+import type { CodeWalkthroughFile } from '@redocly/config';
 export declare function downloadCodeWalkthrough(files: CodeWalkthroughFile[], state: Record<string, {
     value: string | boolean;
-}>, inputsState: InputsState): Promise<void>;
+}>, inputsState: Record<string, {
+    value: string;
+}>): Promise<void>;

package/lib/core/utils/get-code-walkthrough-file-text.d.ts

@@ -1,4 +1,6 @@
-import type { CodeWalkthroughFile, InputsState } from '@redocly/config';
+import type { CodeWalkthroughFile } from '@redocly/config';
 export declare function getCodeWalkthroughFileText(file: CodeWalkthroughFile, state: Record<string, {
     value: string | boolean;
-}>, inputsState: InputsState): string;
+}>, inputsState: Record<string, {
+    value: string;
+}>): string;

package/lib/ext/configure.d.ts

@@ -0,0 +1,24 @@
+export type SecurityDetails = {
+    password?: string;
+    username?: string;
+    token?: {
+        token_type?: string;
+        access_token: string;
+    };
+    client_id?: string;
+    client_secret?: string;
+    scopes?: string[];
+};
+export type ConfigureRequestValues = {
+    headers?: Record<string, string>;
+    body?: Record<string, any>;
+    query?: Record<string, string>;
+    path?: Record<string, string>;
+    cookie?: Record<string, string>;
+    security?: SecurityDetails;
+};
+type Configure = {
+    requestValues?: ConfigureRequestValues;
+};
+export declare function configure(): Configure;
+export {};

package/lib/ext/configure.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.configure = configure;
+function configure() {
+    // const exampleRequestValues: ConfigureRequestValues = {
+    //   body: {
+    //     name: 'John Doe',
+    //   },
+    //   security: {
+    //     token: {
+    //       access_token: 'John Doe token',
+    //     },
+    //   },
+    // };
+    // return { requestValues: exampleRequestValues } satisfies Configure;
+    return {};
+}
+//# sourceMappingURL=configure.js.map

package/lib/index.d.ts

@@ -1,5 +1,6 @@
 export * from './core';
 export * from './config';
+export * from './ext/configure';
 export * from './components/Button/Button';
 export * from './components/JsonViewer/JsonViewer';
 export * from './components/Tag/Tag';

package/lib/index.js

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.markdoc = void 0;
 __exportStar(require("./core"), exports);
 __exportStar(require("./config"), exports);
+__exportStar(require("./ext/configure"), exports);
 /* Components */
 __exportStar(require("./components/Button/Button"), exports);
 __exportStar(require("./components/JsonViewer/JsonViewer"), exports);

package/lib/markdoc/components/CodeWalkthrough/CodeContainer.js

@@ -36,9 +36,30 @@ function CodeContainer({ highlightedCode, toolbar, }) {
         // useEffect executed before DOM is updated due to re-render called before "painting" phase.
         setTimeout(() => {
             if (compRef.current) {
-                const element = compRef.current.querySelector('span.line.highlighted');
-                if (element) {
-                    element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+                const highlightedLines = Array.from(compRef.current.querySelectorAll('span.line.highlighted'));
+                const { bottom: panelBottom, top: panelTop } = compRef.current.getBoundingClientRect();
+                const linesBelow = [];
+                const linesAbove = [];
+                for (const highlightedLine of highlightedLines) {
+                    const { bottom: lineBottom, top: lineTop } = highlightedLine.getBoundingClientRect();
+                    const below = lineBottom > panelBottom;
+                    const above = lineTop < panelTop;
+                    if (below) {
+                        linesBelow.push(highlightedLine);
+                    }
+                    else if (above) {
+                        linesAbove.push(highlightedLine);
+                    }
+                }
+                if ((linesBelow.length && linesAbove.length) || linesAbove.length) {
+                    linesAbove[0].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+                }
+                else if (linesBelow.length) {
+                    linesBelow[linesBelow.length - 1].scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'nearest',
+                        inline: 'start',
+                    });
                 }
             }
         }, 200);

package/lib/markdoc/components/CodeWalkthrough/CodeFilters.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 import type { CodeWalkthroughFilter } from '@redocly/config';
+export type GetFilterState = (groupId: string) => {
+    value: string;
+    render: boolean;
+} | null;
 export type CodeFilterProps = {
     filters: CodeWalkthroughFilter[];
-    getFilterState: (groupId: string) => {
-        value: string;
-        render: boolean;
-    } | null;
+    getFilterState: GetFilterState;
     handleFilterSelect: (groupId: string, id: string) => void;
     filtersElementRef?: React.RefObject<HTMLDivElement>;
 };

package/lib/markdoc/components/CodeWalkthrough/CodeStep.js

@@ -41,7 +41,7 @@ function CodeStep({ id, heading, stepKey, when, unless, children, }) {
         if (lockObserver) {
             lockObserver.current = true;
             if (compRef.current) {
-                compRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                compRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
             }
             setActiveStep(id);
             setTimeout(() => {

package/lib/markdoc/components/CodeWalkthrough/CodeToggle.js

@@ -35,16 +35,16 @@ const CodeStep_1 = require("../../../markdoc/components/CodeWalkthrough/CodeStep
 const Switch_1 = require("../../../components/Switch/Switch");
 function CodeToggle(props) {
     const { id, label, description, children } = props;
-    const { getToggleState, changeToggleState } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);
-    const toggleState = getToggleState(id);
-    if (!(toggleState && toggleState.render)) {
+    const { getControlState, changeControlState } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);
+    const toggleState = getControlState(id);
+    if (!(toggleState && toggleState.render && typeof toggleState.value === 'boolean')) {
         return null;
     }
     const checked = toggleState.value;
     return (react_1.default.createElement(exports.ToggleWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodeToggle" },
         react_1.default.createElement(ToggleContentWrapper, null,
             react_1.default.createElement(exports.ToggleSubtitle, null,
-                react_1.default.createElement(Switch_1.Switch, { value: checked, onChange: (newValue) => changeToggleState(id, newValue) }),
+                react_1.default.createElement(Switch_1.Switch, { value: checked, onChange: (newValue) => changeControlState(id, newValue) }),
                 react_1.default.createElement("div", null, label)),
             description ? (react_1.default.createElement("div", null, description.map((paragraph, idx) => (react_1.default.createElement(react_1.default.Fragment, { key: idx }, paragraph))))) : null),
         checked ? children : null));

package/lib/markdoc/components/CodeWalkthrough/CodeWalkthrough.js

@@ -51,13 +51,13 @@ function CodeWalkthrough(_a) {
     // This is a workaround to prevent the observer from being recreated
     const [initialSteps] = (0, react_1.useState)([...steps]);
     const { controlsState, stepsState, files, downloadAssociatedFiles } = (0, hooks_1.useCodeWalkthrough)(initialSteps, attributes);
-    const { activeFilters, getFilterState, changeFilterState } = controlsState;
+    const { activeFilters, getControlState, changeControlState } = controlsState;
     const { filtersElementRef } = stepsState;
     return (react_1.default.createElement(contexts_1.CodeWalkthroughStepsContext.Provider, { value: stepsState },
         react_1.default.createElement(contexts_1.CodeWalkthroughControlsStateContext.Provider, { value: controlsState },
             react_1.default.createElement(CodeWalkthroughWrapper, { className: "code-walkthrough", "data-component-name": "Markdoc/CodeWalkthrough/CodeWalkthrough" },
                 react_1.default.createElement(DocsPanel, null,
-                    react_1.default.createElement(CodeFilters_1.CodeFilters, { filters: activeFilters, getFilterState: getFilterState, handleFilterSelect: changeFilterState, filtersElementRef: filtersElementRef }),
+                    react_1.default.createElement(CodeFilters_1.CodeFilters, { filters: activeFilters, getFilterState: getControlState, handleFilterSelect: changeControlState, filtersElementRef: filtersElementRef }),
                     react_1.default.createElement(ContentWrapper, null, children)),
                 react_1.default.createElement(CodePanel_1.CodePanel, { files: files, downloadAssociatedFiles: downloadAssociatedFiles, preview: preview })))));
 }

package/lib/markdoc/components/CodeWalkthrough/Input.js

@@ -34,12 +34,12 @@ const contexts_1 = require("../../../core/contexts");
 const DEBOUNCE_TIME = 500;
 function Input(props) {
     const { id, label, placeholder } = props;
-    const { getInputState, changeInputState } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);
-    const inputState = getInputState(id);
+    const { getControlState, changeControlState } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);
+    const inputState = getControlState(id);
     const [value, setValue] = (0, react_1.useState)((inputState === null || inputState === void 0 ? void 0 : inputState.value) || '');
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const debouncedSave = (0, react_1.useCallback)((0, lodash_debounce_1.default)((id, value) => {
-        changeInputState(id, value);
+        changeControlState(id, value);
     }, DEBOUNCE_TIME), []);
     if (!(inputState === null || inputState === void 0 ? void 0 : inputState.render)) {
         return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.48.1",
+  "version": "0.49.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -19,6 +19,7 @@
     "./src/": "./src/",
     "./core/*": "./lib/core/*/index.js",
     "./core/templates/*": "./lib/core/templates/*.js",
+    "./ext/*": "./lib/ext/*.js",
     "./components/*": "./lib/components/*.js",
     "./layouts/*": "./lib/layouts/*.js",
     "./icons/*": "./lib/icons/*.js",
@@ -86,7 +87,7 @@
     "timeago.js": "4.0.2",
     "i18next": "22.4.15",
     "nprogress": "0.2.0",
-    "@redocly/config": "0.20.1"
+    "@redocly/config": "0.20.2"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/DatePicker/variables.ts

@@ -4,7 +4,7 @@ export const datePicker = css`
   --date-picker-nav-color: #000000;
   --date-picker-tile-bg-color: var(--color-blue-2);
   --date-picker-tile-color: var(--text-color-primary);
-  --date-picker-tile-bg-color-hover: var(--color-blue-3)
+  --date-picker-tile-bg-color-hover: var(--color-blue-3);
   --date-picker-tile-color-hover: var(--text-color-primary);
   --date-picker-input-width: var(--spacing-md);
   --date-picker-invalid-input-bg-color: var(--bg-color-raised);

package/src/core/contexts/CodeWalkthrough/CodeWalkthroughControlsContext.tsx

@@ -5,14 +5,8 @@ import type { WalkthroughControlsState } from '@redocly/theme/core/hooks';
 export const CodeWalkthroughControlsStateContext = createContext<WalkthroughControlsState>({
   activeFilters: [],
 
-  getToggleState: () => null,
-  changeToggleState: () => {},
-
-  getInputState: () => null,
-  changeInputState: () => {},
-
-  getFilterState: () => null,
-  changeFilterState: () => {},
+  getControlState: () => null,
+  changeControlState: () => {},
 
   getFileText: () => '',
   areConditionsMet: () => false,

package/src/core/hooks/code-walkthrough/use-code-walkthrough-controls.ts

@@ -7,14 +7,9 @@ import type {
   InputsMarkdocAttr,
   TogglesMarkdocAttr,
   CodeWalkthroughControls,
-  TogglesState,
-  InputsState,
-  FiltersState,
   CodeWalkthroughFilterItem,
-  ControlState,
-  ControlTypeValue,
-  ControlType,
   CodeWalkthroughConditionsObject,
+  CodeWalkthroughControlsState,
 } from '@redocly/config';
 
 import {
@@ -24,8 +19,6 @@ import {
   replaceInputsWithValue,
 } from '@redocly/theme/core/utils';
 
-export type getState<T extends ControlType> = (id: string) => Omit<ControlState<T>, 'type'> | null;
-export type changeState<T extends ControlType> = (id: string, value: ControlTypeValue<T>) => void;
 export type ActiveFilter = {
   id: string;
   label?: string;
@@ -34,15 +27,8 @@ export type ActiveFilter = {
 
 export type WalkthroughControlsState = {
   activeFilters: ActiveFilter[];
-  /* Toggle State Controls */
-  getToggleState: getState<'toggle'>;
-  changeToggleState: changeState<'toggle'>;
-  /* Input State Controls */
-  getInputState: getState<'input'>;
-  changeInputState: changeState<'input'>;
-  /* Filter State Controls */
-  getFilterState: getState<'filter'>;
-  changeFilterState: changeState<'filter'>;
+  getControlState: (id: string) => { value: string | boolean; render: boolean } | null;
+  changeControlState: (id: string, value: string | boolean) => void;
   /* Utility */
   areConditionsMet: (conditions: CodeWalkthroughConditionsObject) => boolean;
   handleDownloadCode: (files: CodeWalkthroughFile[]) => Promise<void>;
@@ -66,8 +52,9 @@ export function useCodeWalkthroughControls(
   const navigate = useNavigate();
   const searchParams = useMemo(() => new URLSearchParams(location.search), [location.search]);
 
-  const [togglesState, setTogglesState] = useState(() => {
-    const initialState: TogglesState = {};
+  const [controlsState, setControlsState] = useState(() => {
+    const initialState: CodeWalkthroughControlsState = {};
+
     for (const [id, toggle] of Object.entries(toggles)) {
       initialState[id] = {
         ...toggle,
@@ -76,41 +63,6 @@ export function useCodeWalkthroughControls(
         value: enableDeepLink ? searchParams.get(id) === 'true' : false,
       };
     }
-    return initialState;
-  });
-
-  const changeToggleState = (toggleId: string, checked: boolean) => {
-    setTogglesState((prev) => {
-      const toggle = prev[toggleId];
-      if (toggle) {
-        return {
-          ...prev,
-          [toggleId]: {
-            ...toggle,
-            value: checked,
-          },
-        };
-      } else {
-        return prev;
-      }
-    });
-  };
-
-  const getToggleState = (toggleId: string) => {
-    const toggleState = togglesState[toggleId];
-
-    if (toggleState) {
-      return {
-        render: toggleState.render,
-        value: toggleState.value,
-      };
-    } else {
-      return null;
-    }
-  };
-
-  const [inputsState, setInputsState] = useState(() => {
-    const initialState: InputsState = {};
 
     for (const [id, input] of Object.entries(inputs)) {
       initialState[id] = {
@@ -120,41 +72,6 @@ export function useCodeWalkthroughControls(
         value: enableDeepLink ? (searchParams.get(id) ?? input.value) : input.value,
       };
     }
-    return initialState;
-  });
-
-  const changeInputState = (inputId: string, value: string) => {
-    setInputsState((prev) => {
-      const input = prev[inputId];
-      if (input) {
-        return {
-          ...prev,
-          [inputId]: {
-            ...input,
-            value,
-          },
-        };
-      } else {
-        return prev;
-      }
-    });
-  };
-
-  const getInputState = (inputId: string) => {
-    const inputState = inputsState[inputId];
-
-    if (inputState) {
-      return {
-        render: inputState.render,
-        value: inputState.value,
-      };
-    } else {
-      return null;
-    }
-  };
-
-  const [filtersState, setFiltersState] = useState(() => {
-    const initialState: FiltersState = {};
 
     for (const [id, filter] of Object.entries(filters)) {
       const defaultValue = filter?.items?.[0]?.value || '';
@@ -169,56 +86,86 @@ export function useCodeWalkthroughControls(
     return initialState;
   });
 
-  const changeFilterState = (filterId: string, value: string) => {
-    setFiltersState((prev) => {
-      const filter = prev[filterId];
-      if (filter) {
-        return {
-          ...prev,
-          [filterId]: {
-            ...filter,
-            value,
-          },
-        };
-      } else {
+  const changeControlState = (id: string, value: string | boolean) => {
+    setControlsState((prev) => {
+      const control = prev[id];
+      if (!control) {
+        console.error(`Control with id "${id}" not found.`);
         return prev;
       }
+
+      switch (control.type) {
+        case 'input':
+          if (typeof value !== 'string') {
+            console.error(
+              `Invalid value type for input "${id}". Input control type requires a string value.`,
+            );
+            return prev;
+          }
+          break;
+
+        case 'toggle':
+          if (typeof value !== 'boolean') {
+            console.error(
+              `Invalid value type for toggle "${id}". Toggle control type requires a boolean value.`,
+            );
+            return prev;
+          }
+          break;
+
+        case 'filter':
+          if (typeof value !== 'string') {
+            console.error(
+              `Invalid value type for filter "${id}". Filter control type requires a string value.`,
+            );
+            return prev;
+          }
+          break;
+
+        default:
+          console.error(
+            `Invalid control type "${(control as { type: string })?.type}" for control "${id}". Allowed types are "toggle", "input", or "filter".`,
+          );
+          return prev;
+      }
+
+      return {
+        ...prev,
+        [id]: {
+          ...control,
+          value,
+        },
+      } as CodeWalkthroughControlsState;
     });
   };
 
-  const getFilterState = (filterId: string) => {
-    const filterState = filtersState[filterId];
+  const getControlState = (id: string) => {
+    const controlState = controlsState[id];
 
-    if (filterState) {
+    if (controlState) {
       return {
-        render: filterState.render,
-        value: filterState.value,
+        render: controlState.render,
+        value: controlState.value,
       };
     } else {
       return null;
     }
   };
 
-  const state = {
-    ...filtersState,
-    ...togglesState,
-    ...inputsState,
-  };
-
   const walkthroughContext = useMemo(() => {
     const areConditionsMet = (conditions: CodeWalkthroughConditionsObject) =>
-      matchCodeWalkthroughConditions(conditions, state);
+      matchCodeWalkthroughConditions(conditions, controlsState);
 
-    for (const [id, element] of Object.entries(state)) {
-      if (element && !areConditionsMet(element)) {
-        state[id].render = false;
-        state[id].value = defaultControlsValues[element.type];
+    for (const [id, control] of Object.entries(controlsState)) {
+      if (control && !areConditionsMet(control)) {
+        controlsState[id].render = false;
+        controlsState[id].value = defaultControlsValues[control.type];
       }
     }
 
     const activeFilters = [];
     for (const [id, filter] of Object.entries(filters)) {
-      if (!filtersState[id].render) {
+      if (!controlsState[id].render) {
         continue;
       }
 
@@ -228,18 +175,18 @@ export function useCodeWalkthroughControls(
       const activeItems = items.filter((item) => areConditionsMet(item));
 
       if (activeItems.length === 0) {
-        filtersState[id].render = false;
-        filtersState[id].value = defaultControlsValues['filter'];
+        controlsState[id].render = false;
+        controlsState[id].value = defaultControlsValues['filter'];
         continue;
       }
 
-      const currentValue = filtersState[id].value;
+      const currentValue = controlsState[id].value;
       if (currentValue) {
         const isValueInActiveItems =
           activeItems.findIndex(({ value }) => value === currentValue) !== -1;
-        filtersState[id].value = isValueInActiveItems ? currentValue : activeItems[0].value;
+        controlsState[id].value = isValueInActiveItems ? currentValue : activeItems[0].value;
       } else {
-        filtersState[id].value = activeItems[0].value;
+        controlsState[id].value = activeItems[0].value;
       }
 
       activeFilters.push({
@@ -249,11 +196,15 @@ export function useCodeWalkthroughControls(
       });
     }
 
+    const inputsState = Object.fromEntries(
+      Object.entries(controlsState).filter(([_, controlState]) => controlState.type === 'input'),
+    ) as Record<string, { value: string }>;
+
     const handleDownloadCode = (files: CodeWalkthroughFile[]) =>
-      downloadCodeWalkthrough(files, state, inputsState);
+      downloadCodeWalkthrough(files, controlsState, inputsState);
 
     const getFileText = (file: CodeWalkthroughFile) =>
-      getCodeWalkthroughFileText(file, state, inputsState);
+      getCodeWalkthroughFileText(file, controlsState, inputsState);
 
     const populateInputsWithValue = (node: string) => replaceInputsWithValue(node, inputsState);
 
@@ -264,9 +215,7 @@ export function useCodeWalkthroughControls(
       getFileText,
       populateInputsWithValue,
     };
-    // Ignore state in dependency array as it's simply a combination of toggles, filters and inputs.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filters, filtersState, togglesState, inputsState]);
+  }, [filters, controlsState]);
 
   /**
    * Update the URL search params with the current state of the filters and inputs
@@ -278,7 +227,7 @@ export function useCodeWalkthroughControls(
 
     const newSearchParams = new URLSearchParams(Array.from(searchParams.entries()));
 
-    for (const [id, { value }] of Object.entries(state)) {
+    for (const [id, { value }] of Object.entries(controlsState)) {
       if (value) {
         newSearchParams.set(id, value.toString());
       } else {
@@ -291,18 +240,11 @@ export function useCodeWalkthroughControls(
     navigate({ search: newSearch });
     // Ignore searchParams in dependency array to avoid infinite re-renders
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filters, filtersState, togglesState, inputsState, navigate, location, state]);
+  }, [filters, controlsState, navigate, location]);
 
   return {
-    getInputState,
-    changeInputState,
-
-    getToggleState,
-    changeToggleState,
-
-    getFilterState,
-    changeFilterState,
-
+    changeControlState,
+    getControlState,
     ...walkthroughContext,
   };
 }

package/src/core/styles/global.ts

@@ -1019,6 +1019,24 @@ const error = css`
   --detailed-error-message-width: 100%;
   --detailed-error-message-font-size: var(--font-size-base);
   --detailed-error-message-font-family: var(--code-block-controls-font-family);
+    
+  --compilation-error-description-padding: 0 0 var(--spacing-base);
+  --compilation-error-codeframe-margin: var(--spacing-xs) 0 0 0;
+  --compilation-error-codeframe-padding: var(--spacing-xs);
+  --compilation-error-block-padding: var(--spacing-base);
+  --compilation-error-block-margin: var(--spacing-xl) 0;
+  --compilation-error-title-font-size: var(--font-size-xl);
+  --compilation-error-header-font-size: var(--font-size-lg);
+  --compilation-error-text-font-size: var(--font-size-base);
+  --compilation-error-header-padding: var(--spacing-sm);
+  --compilation-error-container-margin: var(--spacing-xxl) auto;
+  --compilation-error-container-padding: var(--spacing-lg);
+  --compilation-error-page-max-width: 800px;
+  --compilation-error-font-family: var(--font-family-base);  
+  --compilation-error-fix-instruction-margin: var(--spacing-sm) 0 0 0;
+  --compilation-error-highlighted-text-padding: 0 var(--spacing-xxs);
+  --compilation-error-divider-margin: var(--spacing-base) 0;
+  --compilation-error-file-header-margin: 0 0 var(--spacing-xs) 0;
 `;
 
 const modal = css`

package/src/core/types/search.ts

@@ -6,6 +6,7 @@ export type OperationParameter = {
   description: string | string[];
   place: string;
   path?: string[];
+  deepLink?: string;
 };
 
 export type SearchDocument = {

package/src/core/utils/download-code-walkthrough.ts

@@ -1,7 +1,7 @@
 import { saveAs } from 'file-saver';
 import JSZip from 'jszip';
 
-import type { CodeWalkthroughFile, InputsState } from '@redocly/config';
+import type { CodeWalkthroughFile } from '@redocly/config';
 
 import {
   findClosestCommonDirectory,
@@ -15,7 +15,7 @@ JSZip.support.nodebuffer = false;
 export async function downloadCodeWalkthrough(
   files: CodeWalkthroughFile[],
   state: Record<string, { value: string | boolean }>,
-  inputsState: InputsState,
+  inputsState: Record<string, { value: string }>,
 ) {
   const zip = new JSZip();
 

package/src/core/utils/get-code-walkthrough-file-text.ts

@@ -1,11 +1,11 @@
-import type { CodeWalkthroughFile, CodeWalkthroughNode, InputsState } from '@redocly/config';
+import type { CodeWalkthroughFile, CodeWalkthroughNode } from '@redocly/config';
 
 import { matchCodeWalkthroughConditions, replaceInputsWithValue } from '@redocly/theme/core/utils';
 
 export function getCodeWalkthroughFileText(
   file: CodeWalkthroughFile,
   state: Record<string, { value: string | boolean }>,
-  inputsState: InputsState,
+  inputsState: Record<string, { value: string }>,
 ) {
   const contentChunks: string[] =
     file?.content.flatMap((node) => getChunkText(node, state, inputsState)) ?? [];
@@ -16,7 +16,7 @@ export function getCodeWalkthroughFileText(
 function getChunkText(
   node: CodeWalkthroughNode,
   state: Record<string, { value: string | boolean }>,
-  inputsState: InputsState,
+  inputsState: Record<string, { value: string }>,
 ): string[] {
   if (typeof node === 'string') {
     const replacedNode = replaceInputsWithValue(node, inputsState);

package/src/ext/configure.ts

@@ -0,0 +1,39 @@
+export type SecurityDetails = {
+  password?: string;
+  username?: string;
+  token?: {
+    token_type?: string;
+    access_token: string;
+  };
+  client_id?: string;
+  client_secret?: string;
+  scopes?: string[];
+};
+
+export type ConfigureRequestValues = {
+  headers?: Record<string, string>;
+  body?: Record<string, any>;
+  query?: Record<string, string>;
+  path?: Record<string, string>;
+  cookie?: Record<string, string>;
+  security?: SecurityDetails;
+};
+
+type Configure = {
+  requestValues?: ConfigureRequestValues;
+};
+
+export function configure(): Configure {
+  // const exampleRequestValues: ConfigureRequestValues = {
+  //   body: {
+  //     name: 'John Doe',
+  //   },
+  //   security: {
+  //     token: {
+  //       access_token: 'John Doe token',
+  //     },
+  //   },
+  // };
+  // return { requestValues: exampleRequestValues } satisfies Configure;
+  return {} satisfies Configure;
+}

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from '@redocly/theme/core';
 export * from '@redocly/theme/config';
+export * from '@redocly/theme/ext/configure';
 
 /* Components */
 export * from '@redocly/theme/components/Button/Button';

package/src/markdoc/components/CodeWalkthrough/CodeContainer.tsx

@@ -21,9 +21,33 @@ export function CodeContainer({
     // useEffect executed before DOM is updated due to re-render called before "painting" phase.
     setTimeout(() => {
       if (compRef.current) {
-        const element = compRef.current.querySelector('span.line.highlighted');
-        if (element) {
-          element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+        const highlightedLines = Array.from(
+          compRef.current.querySelectorAll('span.line.highlighted'),
+        );
+        const { bottom: panelBottom, top: panelTop } = compRef.current.getBoundingClientRect();
+
+        const linesBelow: Element[] = [];
+        const linesAbove: Element[] = [];
+        for (const highlightedLine of highlightedLines) {
+          const { bottom: lineBottom, top: lineTop } = highlightedLine.getBoundingClientRect();
+          const below = lineBottom > panelBottom;
+          const above = lineTop < panelTop;
+
+          if (below) {
+            linesBelow.push(highlightedLine);
+          } else if (above) {
+            linesAbove.push(highlightedLine);
+          }
+        }
+
+        if ((linesBelow.length && linesAbove.length) || linesAbove.length) {
+          linesAbove[0].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+        } else if (linesBelow.length) {
+          linesBelow[linesBelow.length - 1].scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+            inline: 'start',
+          });
         }
       }
     }, 200);

package/src/markdoc/components/CodeWalkthrough/CodeFilters.tsx

@@ -5,9 +5,10 @@ import type { CodeWalkthroughFilter } from '@redocly/config';
 
 import { Tag, ContentWrapper as TagContentWrapper } from '@redocly/theme/components/Tag/Tag';
 
+export type GetFilterState = (groupId: string) => { value: string; render: boolean } | null;
 export type CodeFilterProps = {
   filters: CodeWalkthroughFilter[];
-  getFilterState: (groupId: string) => { value: string; render: boolean } | null;
+  getFilterState: GetFilterState;
   handleFilterSelect: (groupId: string, id: string) => void;
   filtersElementRef?: React.RefObject<HTMLDivElement>;
 };

package/src/markdoc/components/CodeWalkthrough/CodeStep.tsx

@@ -35,7 +35,7 @@ export function CodeStep({
       lockObserver.current = true;
 
       if (compRef.current) {
-        compRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        compRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
       }
 
       setActiveStep(id);

package/src/markdoc/components/CodeWalkthrough/CodeToggle.tsx

@@ -13,11 +13,11 @@ export type CodeToggleProps = React.PropsWithChildren<{
 
 export function CodeToggle(props: CodeToggleProps) {
   const { id, label, description, children } = props;
-  const { getToggleState, changeToggleState } = useContext(CodeWalkthroughControlsStateContext);
+  const { getControlState, changeControlState } = useContext(CodeWalkthroughControlsStateContext);
 
-  const toggleState = getToggleState(id);
+  const toggleState = getControlState(id);
 
-  if (!(toggleState && toggleState.render)) {
+  if (!(toggleState && toggleState.render && typeof toggleState.value === 'boolean')) {
     return null;
   }
   const checked = toggleState.value;
@@ -26,7 +26,7 @@ export function CodeToggle(props: CodeToggleProps) {
     <ToggleWrapper data-component-name="Markdoc/CodeWalkthrough/CodeToggle">
       <ToggleContentWrapper>
         <ToggleSubtitle>
-          <Switch value={checked} onChange={(newValue) => changeToggleState(id, newValue)} />
+          <Switch value={checked} onChange={(newValue) => changeControlState(id, newValue)} />
           <div>{label}</div>
         </ToggleSubtitle>
         {description ? (

package/src/markdoc/components/CodeWalkthrough/CodeWalkthrough.tsx

@@ -9,7 +9,10 @@ import {
 } from '@redocly/theme/core/contexts';
 import { CodePanel } from '@redocly/theme/markdoc/components/CodeWalkthrough/CodePanel';
 import { useCodeWalkthrough } from '@redocly/theme/core/hooks';
-import { CodeFilters } from '@redocly/theme/markdoc/components/CodeWalkthrough/CodeFilters';
+import {
+  CodeFilters,
+  GetFilterState,
+} from '@redocly/theme/markdoc/components/CodeWalkthrough/CodeFilters';
 import { StepWrapper } from '@redocly/theme/markdoc/components/CodeWalkthrough/CodeStep';
 
 export type CodeWalkthroughProps = PropsWithChildren<CodeWalkthroughAttr>;
@@ -22,7 +25,7 @@ export function CodeWalkthrough({ children, steps, preview, ...attributes }: Cod
     initialSteps,
     attributes,
   );
-  const { activeFilters, getFilterState, changeFilterState } = controlsState;
+  const { activeFilters, getControlState, changeControlState } = controlsState;
   const { filtersElementRef } = stepsState;
 
   return (
@@ -35,8 +38,8 @@ export function CodeWalkthrough({ children, steps, preview, ...attributes }: Cod
           <DocsPanel>
             <CodeFilters
               filters={activeFilters}
-              getFilterState={getFilterState}
-              handleFilterSelect={changeFilterState}
+              getFilterState={getControlState as GetFilterState}
+              handleFilterSelect={changeControlState}
               filtersElementRef={filtersElementRef}
             />
             <ContentWrapper>{children}</ContentWrapper>

package/src/markdoc/components/CodeWalkthrough/Input.tsx

@@ -15,16 +15,16 @@ const DEBOUNCE_TIME = 500;
 
 export function Input(props: InputProps) {
   const { id, label, placeholder } = props;
-  const { getInputState, changeInputState } = useContext(CodeWalkthroughControlsStateContext);
+  const { getControlState, changeControlState } = useContext(CodeWalkthroughControlsStateContext);
 
-  const inputState = getInputState(id);
+  const inputState = getControlState(id);
 
   const [value, setValue] = useState(inputState?.value || '');
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const debouncedSave = useCallback(
     debounce((id: string, value: string) => {
-      changeInputState(id, value);
+      changeControlState(id, value);
     }, DEBOUNCE_TIME),
     [],
   );
@@ -45,7 +45,7 @@ export function Input(props: InputProps) {
       {label && <Label>{label}</Label>}
       <StyledInput
         id={id}
-        value={value}
+        value={value as string}
         onChange={handleChange}
         aria-label={label}
         placeholder={placeholder}