@redocly/marketing-pages 0.1.20 → 0.1.21

package/dist/pages/editor/components/EditorPanel/EditorContent.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type * as Monaco from 'monaco-editor/esm/vs/editor/editor.api';
+interface EditorContentProps {
+    value: string;
+    onChange: (value: string | undefined) => void;
+    onValidationUpdate?: (errors: Monaco.editor.IMarkerData[], value: string | undefined) => void;
+    hideWarnings: boolean;
+    isFullPreview?: boolean;
+    gotoPosition?: {
+        line: number;
+        column: number;
+    } | null;
+}
+declare const EditorContent: React.FC<EditorContentProps>;
+export default EditorContent;

package/dist/pages/editor/components/EditorPanel/EditorContent.js

@@ -0,0 +1 @@
+import*as n from"react";import p from"@monaco-editor/react";import{useMonacoEditor as O}from"../../hooks/useMonacoEditor";import{DEFAULT_EDITOR_OPTIONS as v,EDITOR_LANGUAGE as R,EDITOR_THEMES as T}from"../../constants/editorConfig";import{useEditorCommunication as b}from"../../hooks/useEditorCommunication";const M=({value:o,onChange:l,onValidationUpdate:m,hideWarnings:f,isFullPreview:s,gotoPosition:r})=>{const u=n.useRef(()=>{}),{activeColorMode:a,handleEditorDidMount:E,handleEditorBeforeMount:d,editorRef:e}=O({onValidationUpdate:m,hideWarnings:f,onClick:t=>{u.current(t.lineNumber)}}),{scrollPreviewToOperation:i}=b({value:o,isFullPreview:s||!1,editorRef:e});return n.useEffect(()=>{u.current=i},[i]),n.useEffect(()=>{r&&e.current&&(e.current.revealPositionInCenter({lineNumber:r.line,column:r.column}),e.current.setPosition({lineNumber:r.line,column:r.column}))},[r,e]),n.useEffect(()=>{if(!e.current)return;const t=new ResizeObserver(()=>{e.current&&e.current.layout()}),c=e.current.getDomNode();return c&&t.observe(c),()=>{t.disconnect()}},[e]),n.createElement(p,{language:R,theme:T[a],value:o,options:v,onChange:l,beforeMount:d,onMount:E})};var h=M;export{h as default};

package/dist/pages/editor/components/EditorPanel.d.ts

@@ -5,6 +5,7 @@ interface EditorPanelProps {
     onChange: (value: string | undefined) => void;
     onValidationUpdate?: (errors: Monaco.editor.IMarkerData[], value: string | undefined) => void;
     hideWarnings: boolean;
+    isFullPreview?: boolean;
     gotoPosition?: {
         line: number;
         column: number;

package/dist/pages/editor/components/EditorPanel.js

@@ -1 +1 @@
-import*as t from"react";import f from"@monaco-editor/react";import{useMonacoEditor as s}from"../hooks/useMonacoEditor";import{DEFAULT_EDITOR_OPTIONS as d,EDITOR_LANGUAGE as p,EDITOR_THEMES as C}from"../constants/editorConfig";const I=({value:r,onChange:l,onValidationUpdate:o,hideWarnings:u,gotoPosition:e})=>{const[c,i]=t.useState(!1);t.useEffect(()=>i(!0),[]);const{activeColorMode:a,handleEditorDidMount:m,editorRef:n}=s({onValidationUpdate:o,hideWarnings:u,onClick:E=>{console.log("Editor clicked at position:",E)}});return t.useEffect(()=>{e&&n.current&&(n.current.revealPositionInCenter({lineNumber:e.line,column:e.column}),n.current.setPosition({lineNumber:e.line,column:e.column}),n.current.focus())},[e,n]),c?t.createElement(f,{language:p,theme:C[a],value:r,options:d,onChange:l,onMount:m}):null};var O=I;export{O as default};
+import*as e from"react";import f from"./EditorPanel/EditorContent";const u=({value:t,onChange:o,onValidationUpdate:n,hideWarnings:r,isFullPreview:i,gotoPosition:a})=>{const[l,s]=e.useState(!1);return e.useEffect(()=>s(!0),[]),l?e.createElement(f,{value:t,onChange:o,onValidationUpdate:n,hideWarnings:r,isFullPreview:i,gotoPosition:a}):e.createElement("div",{style:{height:"100%",minHeight:"400px",backgroundColor:"var(--background-color, #fff)"}})};var d=u;export{d as default};

package/dist/pages/editor/components/Layout/EditorLayout.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type * as Monaco from 'monaco-editor/esm/vs/editor/editor.api';
+interface EditorLayoutProps {
+    value: string;
+    onChange: (value: string | undefined) => void;
+    onValidationUpdate: (errors: Monaco.editor.IMarkerData[], value: string | undefined) => void;
+    hideWarnings: boolean;
+    onHideWarningsChange: (hide: boolean) => void;
+    isFullPreview: boolean;
+    gotoPosition: {
+        line: number;
+        column: number;
+    } | null;
+    parsedErrors: Monaco.editor.IMarkerData[];
+    onProblemClick: (line: number, column: number) => void;
+    onFileLoad: (content: string, fileName: string) => void;
+    onDownloadYaml: () => void;
+    onDownloadJson: () => void;
+    onToggleFullPreview: () => void;
+}
+declare const EditorLayout: React.FC<EditorLayoutProps>;
+export default EditorLayout;

package/dist/pages/editor/components/Layout/EditorLayout.js

@@ -0,0 +1,15 @@
+import e from"react";import a from"styled-components";import{Panel as n,PanelGroup as z,PanelResizeHandle as h}from"react-resizable-panels";import y from"../EditorPanel";import{ProblemsPanel as k}from"../ProblemsPanel";import S from"../Toolbar";const w=({value:i,onChange:s,onValidationUpdate:d,hideWarnings:r,onHideWarningsChange:c,isFullPreview:m,gotoPosition:p,parsedErrors:u,onProblemClick:f,onFileLoad:P,onDownloadYaml:b,onDownloadJson:E,onToggleFullPreview:g})=>{const[l,t]=e.useState(!0),o=e.useRef(null),C=(v,x)=>{f(v,x),l&&o.current?.expand()};return e.createElement(R,{defaultSize:50,minSize:20},e.createElement(S,{onFileLoad:P,onDownloadYamlClick:b,onDownloadJsonClick:E,hideWarnings:r,onHideWarningsChange:c,onToggleFullPreview:g}),e.createElement(F,null,e.createElement(z,{direction:"vertical"},e.createElement(n,{defaultSize:95},e.createElement(y,{value:i,onChange:s,onValidationUpdate:d,hideWarnings:r,isFullPreview:m,gotoPosition:p})),e.createElement(h,{className:"resize-handle-horizontal",style:{display:l?"none":"block"}}),e.createElement(n,{ref:o,collapsible:!0,collapsedSize:5,defaultSize:5,minSize:20,onCollapse:t.bind(null,!0),onExpand:t.bind(null,!1)},e.createElement(k,{problems:u,onProblemClick:C,isCollapsed:l,onToggle:()=>{l?o.current?.expand():o.current?.collapse()}})))))};var J=w;const R=a(n)`
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+
+  .monaco-editor {
+    --vscode-editor-background: var(--layer-color);
+    --vscode-editorGutter-background: var(--layer-color);
+  }
+`,F=a.div`
+  flex: 1;
+  min-height: 0;
+  display: flex;
+`;export{J as default};

package/dist/pages/editor/components/Layout/FullPreviewLayout.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface FullPreviewLayoutProps {
+    definition: any | null;
+    rawValue: string;
+    hasRenderedOnce: boolean;
+    hasStructErrors: boolean;
+    onTemplateClick: () => void;
+    onFileLoad: (content: string, fileName: string) => void;
+    onExitFullPreview: () => void;
+    isClient: boolean;
+}
+declare const FullPreviewLayout: React.FC<FullPreviewLayoutProps>;
+export default FullPreviewLayout;

package/dist/pages/editor/components/Layout/FullPreviewLayout.js

@@ -0,0 +1,5 @@
+import e from"react";import m from"styled-components";import u from"../PreviewPanel";const d=({definition:r,rawValue:t,hasRenderedOnce:l,hasStructErrors:i,onTemplateClick:a,onFileLoad:n,onExitFullPreview:o,isClient:c})=>e.createElement(v,null,c&&e.createElement(u,{definition:r,rawValue:t,hasRenderedOnce:l,hasStructErrors:i,onTemplateClick:a,onFileLoad:n,onExitFullPreview:o}));var p=d;const v=m.div`
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - var(--navbar-height));
+`;export{p as default};

package/dist/pages/editor/components/Layout/MainLayout.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type * as Monaco from 'monaco-editor/esm/vs/editor/editor.api';
+interface MainLayoutProps {
+    value: string;
+    onChange: (value: string | undefined) => void;
+    onValidationUpdate: (errors: Monaco.editor.IMarkerData[], value: string | undefined) => void;
+    hideWarnings: boolean;
+    onHideWarningsChange: (hide: boolean) => void;
+    isFullPreview: boolean;
+    gotoPosition: {
+        line: number;
+        column: number;
+    } | null;
+    parsedErrors: Monaco.editor.IMarkerData[];
+    onProblemClick: (line: number, column: number) => void;
+    onFileLoad: (content: string, fileName: string) => void;
+    onDownloadYaml: () => void;
+    onDownloadJson: () => void;
+    onToggleFullPreview: () => void;
+    definition: any | null;
+    rawValue: string;
+    hasRenderedOnce: boolean;
+    hasStructErrors: boolean;
+    onTemplateClick: () => void;
+    isClient: boolean;
+}
+declare const MainLayout: React.FC<MainLayoutProps>;
+export default MainLayout;

package/dist/pages/editor/components/Layout/MainLayout.js

@@ -0,0 +1,39 @@
+import o from"react";import e from"styled-components";import{PanelGroup as P,PanelResizeHandle as k}from"react-resizable-panels";import x from"./EditorLayout";import z from"./PreviewLayout";const E=({value:a,onChange:n,onValidationUpdate:i,hideWarnings:l,onHideWarningsChange:t,isFullPreview:c,gotoPosition:s,parsedErrors:d,onProblemClick:m,onFileLoad:r,onDownloadYaml:u,onDownloadJson:h,onToggleFullPreview:g,definition:p,rawValue:v,hasRenderedOnce:y,hasStructErrors:b,onTemplateClick:f,isClient:w})=>o.createElement(C,null,o.createElement(L,{direction:"horizontal"},o.createElement(x,{value:a,onChange:n,onValidationUpdate:i,hideWarnings:l,onHideWarningsChange:t,isFullPreview:c,gotoPosition:s,parsedErrors:d,onProblemClick:m,onFileLoad:r,onDownloadYaml:u,onDownloadJson:h,onToggleFullPreview:g}),o.createElement(k,{className:"resize-handle"}),o.createElement(z,{definition:p,rawValue:v,hasRenderedOnce:y,hasStructErrors:b,onTemplateClick:f,onFileLoad:r,isClient:w})));var V=E;const C=e.div`
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - var(--navbar-height));
+
+  background-color: var(--bg-color);
+  color: var(--text-color-primary);
+
+  [data-component-name='Layout/PageLayout']:has(&) + div + footer {
+    display: none;
+  }
+`,L=e(P)`
+  display: flex;
+  flex-grow: 1;
+  height: 100%;
+  overflow: visible;
+
+  .resize-handle {
+    width: 8px;
+    background-color: var(--border-color-primary);
+    cursor: col-resize;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: var(--color-primary-variant);
+    }
+  }
+
+  .resize-handle-horizontal {
+    height: 8px;
+    background-color: var(--border-color-primary);
+    cursor: row-resize;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: var(--color-primary-variant);
+    }
+  }
+`;export{V as default};

package/dist/pages/editor/components/Layout/PreviewLayout.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface PreviewLayoutProps {
+    definition: any | null;
+    rawValue: string;
+    hasRenderedOnce: boolean;
+    hasStructErrors: boolean;
+    onTemplateClick: () => void;
+    onFileLoad: (content: string, fileName: string) => void;
+    isClient: boolean;
+}
+declare const PreviewLayout: React.FC<PreviewLayoutProps>;
+export default PreviewLayout;

package/dist/pages/editor/components/Layout/PreviewLayout.js

@@ -0,0 +1,7 @@
+import e from"react";import p from"styled-components";import{Panel as d}from"react-resizable-panels";import m from"../PreviewPanel";const c=({definition:r,rawValue:o,hasRenderedOnce:t,hasStructErrors:i,onTemplateClick:a,onFileLoad:l,isClient:n})=>e.createElement(s,{defaultSize:50,minSize:20,collapsible:!0,collapsedSize:0},n&&e.createElement(m,{definition:r,rawValue:o,hasRenderedOnce:t,hasStructErrors:i,onTemplateClick:a,onFileLoad:l}));var P=c;const s=p(d)`
+  flex: 3;
+  position: relative;
+  border-left: 1px solid var(--border-color-primary);
+  --sidebar-width: 0px;
+  --panel-gap-horizontal: var(--spacing-md);
+`;export{P as default};

package/dist/pages/editor/components/Page.js

@@ -1,59 +1 @@
-import r from"styled-components";import e from"react";import{Panel as t,PanelGroup as f,PanelResizeHandle as h}from"react-resizable-panels";import{useEditorState as L}from"../hooks/useEditorState";import{useOpenApiValidation as O}from"../hooks/useOpenApiValidation";import{useFileOperations as W}from"../hooks/useFileOperations";import H from"./EditorPanel";import{ProblemsPanel as N}from"./ProblemsPanel";import T from"./Toolbar";import G from"./PreviewPanel";function J(){const[v,g]=e.useState(!1);e.useEffect(()=>g(!0),[]);const{value:a,setValue:d,validatedValue:b,setValidatedValue:E,validationErrors:q,setValidationErrors:c,fileName:B,setFileName:P,parsedErrors:z,hasStructErrors:m,hideWarnings:p,setHideWarnings:x}=L(),{definition:y,hasRenderedOnce:C,setHasRenderedOnce:k}=O({validatedValue:b,hasStructErrors:m}),[w,S]=e.useState(null),[l,u]=e.useState(!0),n=e.useRef(null),o=W({setValue:d,setFileName:P,setHasRenderedOnce:k,setValidationErrors:c}),V=(i,s)=>{c(i),E(s)},R=(i,s)=>{S({line:i,column:s}),l&&n.current?.expand()},D=()=>o.handleDownloadYaml(a),F=()=>o.handleDownloadJson(a);return e.createElement(Y,null,e.createElement(U,{direction:"horizontal"},e.createElement(A,{defaultSize:50,minSize:20},e.createElement(T,{onFileLoad:o.handleFileLoad,onDownloadYamlClick:D,onDownloadJsonClick:F,hideWarnings:p,onHideWarningsChange:x}),e.createElement(I,null,e.createElement(f,{direction:"vertical"},e.createElement(t,{defaultSize:95},e.createElement(H,{value:a,onChange:d,onValidationUpdate:V,hideWarnings:p,gotoPosition:w})),e.createElement(h,{className:"resize-handle-horizontal",style:{display:l?"none":"block"}}),e.createElement(t,{ref:n,collapsible:!0,collapsedSize:5,defaultSize:5,minSize:20,onCollapse:u.bind(null,!0),onExpand:u.bind(null,!1)},e.createElement(N,{problems:z,onProblemClick:R,isCollapsed:l,onToggle:()=>{l?n.current?.expand():n.current?.collapse()}}))))),e.createElement(h,{className:"resize-handle"}),e.createElement(j,{defaultSize:50,minSize:20,collapsible:!0,collapsedSize:0},v&&e.createElement(G,{definition:y,rawValue:a,hasRenderedOnce:C,hasStructErrors:m,onTemplateClick:o.handleTemplateClick,onFileLoad:o.handleFileLoad}))))}const Y=r.div`
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - var(--navbar-height));
-
-  background-color: var(--bg-color);
-  color: var(--text-color-primary);
-
-  [data-component-name='Layout/PageLayout']:has(&) + div + footer {
-    display: none;
-  }
-`,U=r(f)`
-  display: flex;
-  flex-grow: 1;
-  height: 100%;
-  overflow: visible;
-
-  .resize-handle {
-    width: 8px;
-    background-color: var(--border-color-primary);
-    cursor: col-resize;
-    transition: background-color 0.2s ease;
-
-    &:hover {
-      background-color: var(--color-primary-variant);
-    }
-  }
-
-  .resize-handle-horizontal {
-    height: 8px;
-    background-color: var(--border-color-primary);
-    cursor: row-resize;
-    transition: background-color 0.2s ease;
-
-    &:hover {
-      background-color: var(--color-primary-variant);
-    }
-  }
-`,A=r(t)`
-  flex: 2;
-  display: flex;
-  flex-direction: column;
-  overflow: visible;
-
-  .monaco-editor {
-    --vscode-editor-background: var(--layer-color);
-    --vscode-editorGutter-background: var(--layer-color);
-  }
-`,I=r.div`
-  flex: 1;
-  min-height: 0;
-  display: flex;
-`,j=r(t)`
-  flex: 3;
-  position: relative;
-  border-left: 1px solid var(--border-color-primary);
-  --sidebar-width: 0px;
-  --panel-gap-horizontal: var(--spacing-md);
-`;export{J as default};
+import o from"react";import{useEditorState as D}from"../hooks/useEditorState";import{useOpenApiValidation as L}from"../hooks/useOpenApiValidation";import{useFileOperations as R}from"../hooks/useFileOperations";import T from"./Layout/MainLayout";import W from"./Layout/FullPreviewLayout";function H(){const[i,h]=o.useState(!1),[r,s]=o.useState(!1);o.useEffect(()=>h(!0),[]);const{value:n,setValue:d,validatedValue:p,setValidatedValue:f,setValidationErrors:u,setFileName:w,parsedErrors:C,hasStructErrors:a,hideWarnings:F,setHideWarnings:P}=D(),{definition:c,hasRenderedOnce:m,setHasRenderedOnce:g}=L({validatedValue:p,hasStructErrors:a}),[E,V]=o.useState(null),e=R({setValue:d,setFileName:w,setHasRenderedOnce:g,setValidationErrors:u}),v=(t,l)=>{u(t),f(l)},O=(t,l)=>{V({line:t,column:l})},S=()=>e.handleDownloadYaml(n),k=()=>e.handleDownloadJson(n);return r?o.createElement(W,{definition:c,rawValue:n,hasRenderedOnce:m,hasStructErrors:a,onTemplateClick:e.handleTemplateClick,onFileLoad:e.handleFileLoad,onExitFullPreview:()=>s(!1),isClient:i}):o.createElement(T,{value:n,onChange:d,onValidationUpdate:v,hideWarnings:F,onHideWarningsChange:P,isFullPreview:r,gotoPosition:E,parsedErrors:C,onProblemClick:O,onFileLoad:e.handleFileLoad,onDownloadYaml:S,onDownloadJson:k,onToggleFullPreview:()=>s(!0),definition:c,rawValue:n,hasRenderedOnce:m,hasStructErrors:a,onTemplateClick:e.handleTemplateClick,isClient:i})}export{H as default};

package/dist/pages/editor/components/PreviewPanel/ErrorOverlay.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ErrorOverlayProps {
+    hasStructErrors: boolean;
+}
+declare const ErrorOverlay: React.FC<ErrorOverlayProps>;
+export default ErrorOverlay;

package/dist/pages/editor/components/PreviewPanel/ErrorOverlay.js

@@ -0,0 +1,13 @@
+import r from"react";import t from"styled-components";const o=({hasStructErrors:e})=>e?r.createElement(l,null,"Preview is showing the last valid version. The current content has structural errors. Please check editor messages."):null;var s=o;const l=t.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(255, 235, 238, 0.95);
+  color: #5c2121;
+  padding: 8px 16px;
+  border-bottom: 1px solid #f5c6cb;
+  text-align: center;
+  font-size: 0.9em;
+  z-index: 10;
+`;export{s as default};

package/dist/pages/editor/components/PreviewPanel/IframeContainer.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface IframeContainerProps {
+    definition: any | null;
+    onIframeReady: (iframeWindow: Window) => void;
+    onMessage: (event: MessageEvent) => void;
+}
+declare const IframeContainer: React.FC<IframeContainerProps>;
+export default IframeContainer;

package/dist/pages/editor/components/PreviewPanel/IframeContainer.js

@@ -0,0 +1,8 @@
+import o,{useRef as c,useEffect as s}from"react";import u from"styled-components";const f=({definition:t,onIframeReady:a,onMessage:p})=>{const l=c(null),r=c(null),[i,w]=o.useState(0);return s(()=>{const n=e=>{e.data?.type!=="scroll-to-operation"||!r.current||r.current.postMessage(e.data,"*")};return window.addEventListener("message",n),()=>window.removeEventListener("message",n)},[]),s(()=>{const n=e=>{r.current=e,e.updateDefinition(t),a(e)};window.onReady=n},[t,a]),s(()=>{r.current&&t&&r.current.updateDefinition(t)},[t]),o.createElement(m,null,o.createElement(d,{key:i,ref:l,title:"API Documentation Preview",src:"/preview",onLoad:()=>{}}))};var v=f;const m=u.div`
+  height: 100%;
+  overflow: hidden;
+`,d=u.iframe`
+  width: 100%;
+  height: 100%;
+  border: none;
+`;export{v as default};

package/dist/pages/editor/components/PreviewPanel/PreviewContent.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface PreviewContentProps {
+    definition: any | null;
+    rawValue: string;
+    hasStructErrors: boolean;
+    onTemplateClick: () => void;
+    onFileLoad: (content: string, fileName: string) => void;
+    onExitFullPreview?: () => void;
+    onIframeReady: (iframeWindow: Window) => void;
+}
+declare const PreviewContent: React.FC<PreviewContentProps>;
+export default PreviewContent;

package/dist/pages/editor/components/PreviewPanel/PreviewContent.js

@@ -0,0 +1,16 @@
+import e from"react";import n from"styled-components";import{Button as s}from"@redocly/theme/components/Button/Button";import{MinimizeIcon as f}from"@redocly/theme/icons/MinimizeIcon/MinimizeIcon";import l from"./ErrorOverlay";import E from"./IframeContainer";import d from"../EmptyState";const u=({definition:r,rawValue:t,hasStructErrors:o,onTemplateClick:m,onFileLoad:c,onExitFullPreview:i,onIframeReady:p})=>!t||typeof t!="string"||t.trim()===""?e.createElement(d,{onTemplateClick:m,onUploadClick:c}):r?e.createElement(a,null,e.createElement(l,{hasStructErrors:o}),i&&e.createElement(g,{variant:"secondary",onClick:i,"aria-label":"Exit full preview",icon:e.createElement(f,null)}),e.createElement(E,{definition:r,onIframeReady:p,onMessage:()=>{}})):e.createElement(a,null,e.createElement(l,{hasStructErrors:o}),e.createElement(y,null,"Loading..."));var M=u;const a=n.div`
+  position: relative;
+  height: 100%;
+`,g=n(s)`
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  z-index: 30;
+`,y=n.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 14px;
+  color: #666;
+`;export{M as default};

package/dist/pages/editor/components/PreviewPanel.d.ts

@@ -6,6 +6,7 @@ interface PreviewPanelProps {
     hasStructErrors: boolean;
     onTemplateClick: () => void;
     onFileLoad: (content: string, fileName: string) => void;
+    onExitFullPreview?: () => void;
 }
 declare const PreviewPanel: React.FC<PreviewPanelProps>;
 export default PreviewPanel;

package/dist/pages/editor/components/PreviewPanel.js

@@ -1,20 +1 @@
-import*as e from"react";import u from"styled-components";import{useEffect as a,useRef as i}from"react";import E from"./EmptyState";const R=u.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  background-color: rgba(255, 235, 238, 0.95);
-  color: #5c2121;
-  padding: 8px 16px;
-  border-bottom: 1px solid #f5c6cb;
-  text-align: center;
-  font-size: 0.9em;
-  z-index: 10;
-`,b=u.iframe`
-  width: 100%;
-  height: 100%;
-  border: none;
-`,I=({definition:o,rawValue:c,hasStructErrors:p,onTemplateClick:g,onFileLoad:y})=>{const d=i(null),r=o||d.current,h=i(null),n=i(null),[f,v]=e.useState(!1),[w,P]=e.useState(0),l=i(!1);a(()=>{const s=t=>{t.data?.type!=="scroll-sync"||t.data?.source==="preview"||!n.current||l.current||(l.current=!0,n.current.postMessage(t.data,"*"),setTimeout(()=>{l.current=!1},50))};return window.addEventListener("message",s),()=>window.removeEventListener("message",s)},[]),a(()=>{const s=t=>{n.current=t,t.updateDefinition(r),v(!0)};window.onReady=s},[r]),a(()=>{o&&(d.current=o)},[o]),a(()=>{n.current&&f&&n.current.updateDefinition(r)},[r,f]);const m=p&&e.createElement(R,null,"Preview is showing the last valid version. The current content has structural errors. Please check editor messages.")||null;return!c||typeof c!="string"||c.trim()===""?e.createElement(E,{onTemplateClick:g,onUploadClick:y}):r?e.createElement(e.Fragment,null,m,e.createElement(x,null,e.createElement(b,{key:w,ref:h,title:"API Documentation Preview",src:"/preview",onLoad:()=>{}}))):m||"Loading..."};var L=I;const x=u.div`
-  height: 100%;
-  overflow: hidden;
-`;export{L as default};
+import*as r from"react";import{useRef as f}from"react";import m from"./PreviewPanel/PreviewContent";const s=({definition:e,rawValue:o,hasStructErrors:n,onTemplateClick:a,onFileLoad:l,onExitFullPreview:c})=>{const t=f(null),i=e||t.current;r.useEffect(()=>{e&&(t.current=e)},[e]);const u=r.useCallback(d=>{},[]);return r.createElement(m,{definition:i,rawValue:o,hasStructErrors:n,onTemplateClick:a,onFileLoad:l,onExitFullPreview:c,onIframeReady:u})};var R=s;export{R as default};

package/dist/pages/editor/components/Toolbar.d.ts

@@ -5,6 +5,7 @@ interface ToolbarProps {
     onDownloadJsonClick: () => void;
     hideWarnings: boolean;
     onHideWarningsChange: (hide: boolean) => void;
+    onToggleFullPreview?: () => void;
 }
-export default function Toolbar({ hideWarnings, onHideWarningsChange, onDownloadYamlClick, onDownloadJsonClick, onFileLoad }: ToolbarProps): React.JSX.Element;
+export default function Toolbar({ hideWarnings, onHideWarningsChange, onDownloadYamlClick, onDownloadJsonClick, onFileLoad, onToggleFullPreview }: ToolbarProps): React.JSX.Element;
 export {};

package/dist/pages/editor/components/Toolbar.js

@@ -1,4 +1,4 @@
-import e,{useRef as v,useState as E}from"react";import o from"styled-components";import{Button as i}from"@redocly/theme/components/Button/Button";import{DownloadIcon as p}from"@redocly/theme/icons/DownloadIcon/DownloadIcon";import{ChevronDownIcon as k}from"@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon";function C({hideWarnings:m,onHideWarningsChange:f,onDownloadYamlClick:c,onDownloadJsonClick:u,onFileLoad:g}){const d=v(null),[x,t]=E(!1),b=()=>{d.current?.click()},h=()=>t(n=>!n),w=n=>{const r=n.target.files?.[0];if(!r)return;const l=new FileReader;l.onload=a=>{const y=a.target?.result;g(y,r.name)},l.onerror=a=>{console.error("Failed to read file!",a)},l.readAsText(r),n.target.value=""};return e.createElement(D,null,e.createElement(I,null,e.createElement("input",{type:"checkbox",checked:m,onChange:n=>f(n.target.checked),id:"hide-warnings"}),"Hide warnings"),e.createElement(F,null,e.createElement(i,{variant:"text",icon:e.createElement(p,{style:{transform:"rotate(180deg)"}}),onClick:b,"aria-label":"Upload spec"}),e.createElement(A,{type:"file",ref:d,onChange:w,accept:".yaml,.yml,.json"}),e.createElement(R,null,e.createElement(i,{onClick:c,iconPosition:"left",icon:e.createElement(p,null)},"Download"),e.createElement(i,{icon:e.createElement(k,null),onClick:h,"aria-label":"Download options"}),x&&e.createElement(z,null,e.createElement(s,{onClick:()=>{c(),t(!1)}},"Download YAML"),e.createElement(s,{onClick:()=>{u(),t(!1)}},"Download JSON")))))}const D=o.div`
+import e,{useRef as y,useState as k}from"react";import o from"styled-components";import{Button as n}from"@redocly/theme/components/Button/Button";import{DownloadIcon as s}from"@redocly/theme/icons/DownloadIcon/DownloadIcon";import{ChevronDownIcon as C}from"@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon";import{MaximizeIcon as D}from"@redocly/theme/icons/MaximizeIcon/MaximizeIcon";function I({hideWarnings:f,onHideWarningsChange:u,onDownloadYamlClick:c,onDownloadJsonClick:x,onFileLoad:g,onToggleFullPreview:p}){const d=y(null),[b,r]=k(!1),v=()=>{d.current?.click()},E=()=>r(t=>!t),h=t=>{const l=t.target.files?.[0];if(!l)return;const a=new FileReader;a.onload=i=>{const w=i.target?.result;g(w,l.name)},a.onerror=i=>{console.error("Failed to read file!",i)},a.readAsText(l),t.target.value=""};return e.createElement(z,null,e.createElement(M,null,e.createElement("input",{type:"checkbox",checked:f,onChange:t=>u(t.target.checked),id:"hide-warnings"}),"Hide warnings"),e.createElement(R,null,p&&e.createElement(n,{variant:"text",onClick:p,"aria-label":"Enter full preview",icon:e.createElement(D,null)}),e.createElement(n,{variant:"text",icon:e.createElement(s,{style:{transform:"rotate(180deg)"}}),onClick:v,"aria-label":"Upload spec"}),e.createElement(F,{type:"file",ref:d,onChange:h,accept:".yaml,.yml,.json"}),e.createElement(A,null,e.createElement(n,{variant:"text",onClick:c,iconPosition:"left",icon:e.createElement(s,null)},"Download"),e.createElement(n,{icon:e.createElement(C,null),onClick:E,"aria-label":"Download options"}),b&&e.createElement(B,null,e.createElement(m,{onClick:()=>{c(),r(!1)}},"Download YAML"),e.createElement(m,{onClick:()=>{x(),r(!1)}},"Download JSON")))))}const z=o.div`
   padding: 6px 12px;
   border-bottom: 1px solid var(--border-color-primary);
   display: flex;
@@ -6,25 +6,25 @@ import e,{useRef as v,useState as E}from"react";import o from"styled-components"
   background-color: var(--bg-color);
   color: var(--text-color-primary);
   gap: 16px;
-`,I=o.label`
+`,M=o.label`
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 0.875rem;
   cursor: pointer;
-`,F=o.div`
+`,R=o.div`
   display: flex;
   align-items: center;
   gap: 8px;
   margin-left: auto; /* Push to far right */
-`,R=o.div`
+`,A=o.div`
   position: relative;
   display: inline-flex;
   align-items: center;
   display: flex;
   flex-direction: row;
   gap: calc(var(--spacing-xxs) / 2);
-`,z=o.ul`
+`,B=o.ul`
   position: absolute;
   right: 0;
   top: 100%;
@@ -38,13 +38,13 @@ import e,{useRef as v,useState as E}from"react";import o from"styled-components"
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   min-width: 140px;
   z-index: 20;
-`,s=o.li`
+`,m=o.li`
   padding: 6px 12px;
   font-size: 0.875rem;
   cursor: pointer;
   &:hover {
     background-color: var(--bg-color-active, #f5f5f5);
   }
-`,A=o.input`
+`,F=o.input`
   display: none;
-`;export{C as default};
+`;export{I as default};

package/dist/pages/editor/constants/editorConfig.js

@@ -1 +1 @@
-const t={padding:{top:12,bottom:12},fontSize:14,tabSize:2,detectIndentation:!0,minimap:{enabled:!1},renderLineHighlight:"all",placeholder:"Drag your file here or start typing...",stickyScroll:{enabled:!0}},e="yaml",r={light:"light",dark:"vs-dark"};export{t as DEFAULT_EDITOR_OPTIONS,e as EDITOR_LANGUAGE,r as EDITOR_THEMES};
+const e={padding:{top:12,bottom:12},fontSize:14,tabSize:2,detectIndentation:!0,minimap:{enabled:!1},renderLineHighlight:"all",placeholder:"Drag your file here or start typing...",stickyScroll:{enabled:!0},fixedOverflowWidgets:!0},t="yaml",r={light:"light",dark:"vs-dark"};export{e as DEFAULT_EDITOR_OPTIONS,t as EDITOR_LANGUAGE,r as EDITOR_THEMES};

package/dist/pages/editor/hooks/useEditorCommunication.d.ts

@@ -0,0 +1,11 @@
+import type * as Monaco from 'monaco-editor/esm/vs/editor/editor.api';
+interface UseEditorCommunicationProps {
+    value: string;
+    isFullPreview: boolean;
+    editorRef: React.RefObject<Monaco.editor.IStandaloneCodeEditor | null>;
+}
+export declare const useEditorCommunication: ({ value, isFullPreview, editorRef }: UseEditorCommunicationProps) => {
+    scrollPreviewToOperation: (lineNumber: number) => void;
+    scrollToOperationInEditor: (incoming: string) => void;
+};
+export {};

package/dist/pages/editor/hooks/useEditorCommunication.js

@@ -0,0 +1,2 @@
+import{useEffect as h,useRef as m}from"react";import{findOperationAtLine as w,findOperationLineInEditor as g,sendScrollToPreview as E,isPositionInOperationBlock as L}from"../utils/operationScrolling";const T=({value:o,isFullPreview:c,editorRef:r})=>{const u=m(0),d=m(0);h(()=>{const e=t=>{if(t.data?.type!=="scroll-to-operation"||t.data?.source!=="preview"||!r.current||c)return;const a=Date.now();if(a-u.current<1e3)return;d.current=a;const l=t.data.operationPath;p(l)};return window.addEventListener("message",e),()=>window.removeEventListener("message",e)},[c,r]);const P=e=>{if(!o||c)return;const t=w(o,e);t&&(u.current=Date.now(),E(t.pointer))},p=e=>{if(!r.current||!o)return;const t=g(o,e);if(!t)return;const l=r.current.getPosition()?.lineNumber||1,i=o.split(`
+`);let s=-1,f=i.length;for(let n=0;n<i.length;n++)if(i[n].includes(e.replace("#/paths/","").replace(/~1/g,"/"))){s=n;break}if(s!==-1){for(let n=s+1;n<i.length;n++)if(/^\s*\/[^:]+:\s*$/.test(i[n])){f=n;break}if(L(l,s,f))return}r.current.revealPositionInCenter({lineNumber:t,column:1}),r.current.setPosition({lineNumber:t,column:1})};return{scrollPreviewToOperation:P,scrollToOperationInEditor:p}};export{T as useEditorCommunication};

package/dist/pages/editor/hooks/useFileOperations.js

@@ -1 +1 @@
-import{dump as p,load as e}from"js-yaml";import{downloadFile as d}from"../utils/download";import{defaultOpenapiTemplate as m}from"../templates/defaultOpenapiTemplate";function L(s){const{setValue:a,setFileName:i,setHasRenderedOnce:r,setValidationErrors:l}=s;return{handleFileLoad:(n,o)=>{a(n),console.log(`Loaded file: ${o}`),i(o),r(!1),l([])},handleTemplateClick:()=>{a(m),console.log("Loaded default template."),r(!1),l([])},handleDownloadYaml:n=>{let o=n;try{if(n.trim().startsWith("{")){const t=JSON.parse(n);o=p(t)}else e(n),o=n}catch(t){try{e(n),o=n}catch(c){alert("Content is not valid JSON or YAML. Cannot convert to YAML for download."),console.error("Error preparing YAML for download:",t,c);return}}d(o,"openapi.yaml","application/x-yaml")},handleDownloadJson:n=>{try{const o=e(n);if(typeof o!="object"||o===null)throw new Error("Parsed content is not an object.");const t=JSON.stringify(o,null,2);d(t,"openapi.json","application/json")}catch(o){alert("Content is not valid YAML/JSON. Cannot convert to JSON for download."),console.error("Error preparing JSON for download:",o)}}}}export{L as useFileOperations};
+import{dump as c,load as e}from"js-yaml";import{downloadFile as s}from"../utils/download";import{defaultOpenapiTemplate as p}from"../templates/defaultOpenapiTemplate";function C(i){const{setValue:a,setFileName:d,setHasRenderedOnce:l,setValidationErrors:r}=i;return{handleFileLoad:(o,n)=>{a(o),d(n),l(!1),r([])},handleTemplateClick:()=>{a(p),l(!1),r([])},handleDownloadYaml:o=>{let n=o;try{if(o.trim().startsWith("{")){const t=JSON.parse(o);n=c(t)}else e(o),n=o}catch{try{e(o),n=o}catch{alert("Content is not valid JSON or YAML. Cannot convert to YAML for download.");return}}s(n,"openapi.yaml","application/x-yaml")},handleDownloadJson:o=>{try{const n=e(o);if(typeof n!="object"||n===null)throw new Error("Parsed content is not an object.");const t=JSON.stringify(n,null,2);s(t,"openapi.json","application/json")}catch{alert("Content is not valid YAML/JSON. Cannot convert to JSON for download.")}}}}export{C as useFileOperations};

package/dist/pages/editor/hooks/useIframeCommunication.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface UseIframeCommunicationProps {
+    definition: any | null;
+    onIframeReady?: (iframeWindow: Window) => void;
+}
+export declare const useIframeCommunication: ({ definition, onIframeReady }: UseIframeCommunicationProps) => {
+    iframeWindowRef: React.MutableRefObject<Window | null>;
+    isIframeReady: boolean;
+};
+export {};

package/dist/pages/editor/hooks/useIframeCommunication.js

@@ -0,0 +1 @@
+import{useRef as n,useEffect as a,useState as o}from"react";const p=({definition:e,onIframeReady:s})=>{const t=n(null),[r,c]=o(!1);return a(()=>{const f=u=>{t.current=u,u.updateDefinition(e),c(!0),s?.(u)};window.onReady=f},[e,s]),a(()=>{t.current&&r&&e&&t.current.updateDefinition(e)},[e,r]),{iframeWindowRef:t,isIframeReady:r}};export{p as useIframeCommunication};

package/dist/pages/editor/hooks/useMonacoEditor.d.ts

@@ -8,5 +8,6 @@ export declare function useMonacoEditor({ onValidationUpdate, onClick, hideWarni
     editorRef: import("react").MutableRefObject<editor.IStandaloneCodeEditor | null>;
     monacoRef: import("react").MutableRefObject<null>;
     activeColorMode: string;
-    handleEditorDidMount: (editor: editor.IStandaloneCodeEditor, monaco: any) => () => void;
+    handleEditorDidMount: (editor: editor.IStandaloneCodeEditor, monaco: any) => (() => void);
+    handleEditorBeforeMount: (monaco: any) => void;
 };

package/dist/pages/editor/hooks/useMonacoEditor.js

@@ -1 +1,2 @@
-import{useEffect as M,useRef as r}from"react";import{LanguageServerService as d}from"../services/languageServerService";import{useColorMode as v}from"./useColorMode";import{useThemeHooks as D}from"@redocly/theme/core/hooks";function w({onValidationUpdate:n,onClick:i,hideWarnings:e}){const u=r(null),c=r(null),o=r(null),{useGlobalData:s}=D(),R=s(),a=v(),f=(t,l)=>{u.current=t,c.current=l,o.current||(o.current=new d),o.current.initialize(t,l);const m=o.current.setupAutoValidation(n,e);return t.onMouseDown(({target:p})=>{i?.(p.position)}),()=>{m()}};return M(()=>{o.current?.setupAutoValidation(n,e)},[e]),{editorRef:u,monacoRef:c,activeColorMode:a,handleEditorDidMount:f}}export{w as useMonacoEditor};
+import{useEffect as C,useRef as c}from"react";import{LanguageServerService as L}from"../services/languageServerService";import{useColorMode as b}from"./useColorMode";import{useThemeHooks as E}from"@redocly/theme/core/hooks";function x({onValidationUpdate:l,onClick:f,hideWarnings:r}){const i=c(null),o=c(null),t=c(null),{useGlobalData:m}=E(),T=m(),p=b(),M=(e,g)=>{i.current=e,o.current=g,t.current||(t.current=new L),t.current.initialize(e,g);const h=t.current.setupAutoValidation(l,r);e.onMouseDown(({target:u})=>{f?.(u.position)});const s=e.getModel();if(s){const u=s.onDidChangeContent(d=>{d.changes.some(n=>n.text.includes(`
+`))&&setTimeout(()=>{const n=e.getPosition();try{const a=e.getModel();if(a&&o.current){const D=a.getLanguageId();o.current.editor.setModelLanguage(a,"plaintext"),setTimeout(()=>{o.current.editor.setModelLanguage(a,D),n&&e.setPosition(n)},10)}}catch{e.render(),e.layout(),n&&e.setPosition(n)}},0)});e._contentChangeDisposable=u}return setTimeout(()=>{if(e.layout(),s){const u=s.getValue();s.setValue(u),e.render()}},100),setTimeout(()=>{e.layout(),e.render()},500),()=>{h(),e._contentChangeDisposable&&e._contentChangeDisposable.dispose()}};return C(()=>{t.current?.setupAutoValidation(l,r)},[r]),{editorRef:i,monacoRef:o,activeColorMode:p,handleEditorDidMount:M,handleEditorBeforeMount:e=>{}}}export{x as useMonacoEditor};

package/dist/pages/editor/types/index.d.ts

@@ -0,0 +1,66 @@
+import type * as Monaco from 'monaco-editor/esm/vs/editor/editor.api';
+export interface EditorPosition {
+    line: number;
+    column: number;
+}
+export interface EditorValidationUpdate {
+    errors: Monaco.editor.IMarkerData[];
+    value: string | undefined;
+}
+export interface PreviewDefinition {
+    [key: string]: any;
+}
+export interface PreviewPanelProps {
+    definition: PreviewDefinition | null;
+    rawValue: string;
+    hasRenderedOnce: boolean;
+    hasStructErrors: boolean;
+    onTemplateClick: () => void;
+    onFileLoad: (content: string, fileName: string) => void;
+    onExitFullPreview?: () => void;
+}
+export interface FileOperations {
+    handleTemplateClick: () => void;
+    handleFileLoad: (content: string, fileName: string) => void;
+    handleDownloadYaml: (value: string) => void;
+    handleDownloadJson: (value: string) => void;
+}
+export interface LayoutProps {
+    isClient: boolean;
+}
+export interface EditorLayoutProps extends LayoutProps {
+    value: string;
+    onChange: (value: string | undefined) => void;
+    onValidationUpdate: (errors: Monaco.editor.IMarkerData[], value: string | undefined) => void;
+    hideWarnings: boolean;
+    onHideWarningsChange: (hide: boolean) => void;
+    isFullPreview: boolean;
+    gotoPosition: EditorPosition | null;
+    parsedErrors: Monaco.editor.IMarkerData[];
+    onProblemClick: (line: number, column: number) => void;
+    onFileLoad: (content: string, fileName: string) => void;
+    onDownloadYaml: () => void;
+    onDownloadJson: () => void;
+    onToggleFullPreview: () => void;
+}
+export interface PreviewLayoutProps extends LayoutProps {
+    definition: PreviewDefinition | null;
+    rawValue: string;
+    hasRenderedOnce: boolean;
+    hasStructErrors: boolean;
+    onTemplateClick: () => void;
+    onFileLoad: (content: string, fileName: string) => void;
+}
+export interface FullPreviewLayoutProps extends PreviewLayoutProps {
+    onExitFullPreview: () => void;
+}
+export interface ScrollToOperationMessage {
+    type: 'scroll-to-operation';
+    operationPath: string;
+    source: 'editor' | 'preview';
+}
+export interface OperationPath {
+    path: string;
+    verb: string;
+    pointer: string;
+}

package/dist/pages/editor/utils/operationScrolling.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Utility functions for handling operation scrolling between editor and preview
+ */
+export interface OperationPosition {
+    lineNumber: number;
+    column: number;
+}
+export interface OperationPath {
+    path: string;
+    verb: string;
+    pointer: string;
+}
+/**
+ * Finds the operation path and verb at a given line number in the OpenAPI spec
+ */
+export declare const findOperationAtLine: (value: string, lineNumber: number) => OperationPath | null;
+/**
+ * Finds the line number for a given operation path in the editor
+ */
+export declare const findOperationLineInEditor: (value: string, operationPath: string) => number | null;
+/**
+ * Sends a scroll-to-operation message to the preview
+ */
+export declare const sendScrollToPreview: (operationPointer: string) => void;
+/**
+ * Checks if the current editor position is within an operation block
+ */
+export declare const isPositionInOperationBlock: (currentLine: number, pathLineIndex: number, nextPathIndex: number) => boolean;

package/dist/pages/editor/utils/operationScrolling.js

@@ -0,0 +1,3 @@
+const b=(i,o)=>{const t=i.split(`
+`),s=o-1,l=t[s];let r=-1,a="";for(let n=s;n>=0;n--){const p=t[n];if(/^\s*\/[^:]+:\s*$/.test(p)){r=n,a=p.trim().replace(/:\s*$/,"");break}if(/^\s*components:\s*$/.test(p)||/^\s*schemas:\s*$/.test(p))break}if(r===-1)return null;let c=t.length;for(let n=r+1;n<t.length;n++){if(/^\s*\/[^:]+:\s*$/.test(t[n])){c=n;break}if(/^\s*components:\s*$/.test(t[n])||/^\s*schemas:\s*$/.test(t[n])){c=n;break}}if(!(s>r&&s<c))return null;let d=-1,e="";for(let n=s;n>r;n--){const u=t[n].match(/^\s*(get|post|put|delete|patch):\s*$/i);if(u){e=(u[1]||"").toLowerCase(),d=n;break}}if(d===-1)return null;const f=`#/paths/${a.replace(/\//g,"~1")}/${e}`;return{path:a,verb:e,pointer:f}},g=(i,o)=>{const t=i.split(`
+`);let s="",l="";if(o.startsWith("#/")){const e=o.slice(2).split("/");l=(e[2]||"").toLowerCase(),s=(e[1]||"").replaceAll("~1","/")}else o.startsWith("/")?s=o:s=`/${o}`;let r=-1;for(let e=0;e<t.length;e++)if(t[e].trim()===`${s}:`){r=e;break}if(r===-1){for(let e=0;e<t.length;e++)if(t[e].includes(s)){r=e;break}}if(r===-1)return null;let a=t.length;for(let e=r+1;e<t.length;e++)if(/^\s*\/[^:]+:\s*$/.test(t[e])){a=e;break}let c=-1;for(let e=r+1;e<a;e++){const h=t[e].match(/^\s*(get|post|put|delete|patch):\s*$/i);if(h){const f=(h[1]||"").toLowerCase();if(!l||l===f){c=e,l=f;break}}}return(c!==-1?c:r)+1},$=i=>{window.postMessage({type:"scroll-to-operation",operationPath:i,source:"editor"},"*")},x=(i,o,t)=>{const s=o+1,l=t;return i>s&&i<=l};export{b as findOperationAtLine,g as findOperationLineInEditor,x as isPositionInOperationBlock,$ as sendScrollToPreview};

package/dist/pages/editor-preview/components/DocsRenderer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface DocsRendererProps {
+    RedoclyOpenAPIDocs: any;
+    definition: any;
+}
+declare const DocsRenderer: React.FC<DocsRendererProps>;
+export default DocsRenderer;

package/dist/pages/editor-preview/components/DocsRenderer.js

@@ -0,0 +1,4 @@
+import e from"react";import i from"styled-components";const m=({RedoclyOpenAPIDocs:o,definition:t})=>{const r=e.useMemo(()=>({options:{routingBasePath:"/preview",disableRouter:!0,hideSidebar:!0},definition:t}),[t]);return e.createElement(n,null,e.createElement(o,{router:"memory",withCommonStyles:!0,store:r}))};var a=m;const n=i.div`
+  height: 100vh;
+  overflow: auto;
+`;export{a as default};

package/dist/pages/editor-preview/components/EmptyState.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const EmptyState: React.FC;
+export default EmptyState;

package/dist/pages/editor-preview/components/EmptyState.js

@@ -0,0 +1 @@
+import e from"react";const t=()=>e.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh",fontFamily:"system-ui, -apple-system, sans-serif",color:"#666"}},"No API definition available");var a=t;export{a as default};

package/dist/pages/editor-preview/components/PreviewContent.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface PreviewContentProps {
+    RedoclyOpenAPIDocs: any;
+    safeSlugify: (value: string) => string;
+}
+declare const PreviewContent: React.FC<PreviewContentProps>;
+export default PreviewContent;

package/dist/pages/editor-preview/components/PreviewContent.js

@@ -0,0 +1 @@
+import t from"react";import{useThemeManager as i}from"../hooks/useThemeManager";import{useDefinitionManager as m}from"../hooks/useDefinitionManager";import{useCommunicationManager as a}from"../hooks/useCommunicationManager";import f from"./DocsRenderer";import c from"./EmptyState";const p=({RedoclyOpenAPIDocs:o,safeSlugify:r})=>{i();const{definition:e,lastGoodDefinition:n}=m();return a({definition:e,lastGoodDefinition:n,safeSlugify:r}),e?t.createElement(f,{RedoclyOpenAPIDocs:o,definition:e}):t.createElement(c,null)};var E=p;export{E as default};

package/dist/pages/editor-preview/editor-preview.page.d.ts

@@ -1,6 +1,7 @@
-import * as React from 'react';
+import React from 'react';
 interface PageProps {
     RedoclyOpenAPIDocs: any;
+    safeSlugify: (value: string) => string;
 }
-export default function Page({ RedoclyOpenAPIDocs }: PageProps): React.JSX.Element;
+export default function Page({ RedoclyOpenAPIDocs, safeSlugify }: PageProps): React.JSX.Element;
 export {};

package/dist/pages/editor-preview/editor-preview.page.js

@@ -1 +1 @@
-import*as n from"react";function h({RedoclyOpenAPIDocs:i}){const[o,e]=n.useState(null),l=n.useRef(null),c=n.useRef(!1),w=n.useRef(null);return n.useEffect(()=>{window.updateDefinition=r=>{if(r&&typeof r=="object"&&typeof r.openapi=="string"){const t=v(r);l.current=t,e(t)}else l.current?w.current!==l.current&&e(l.current):e(null);w.current=r},window.parent.onReady(window)},[]),n.useEffect(()=>{const r=()=>{if(c.current)return;const t=document.querySelector("article");if(!t)return;const a=window.innerHeight,f=t.scrollHeight,d=window.scrollY,s=f-a;if(s<=0)return;const p=Math.round(d/s*100);window.parent.postMessage({type:"scroll-sync",position:{absolute:d,relative:p},source:"preview"},"*")},u=t=>{if(t.data?.type!=="scroll-sync"||t.data?.source==="preview"||c.current)return;const a=document.querySelector("article");if(!a)return;const f=window.innerHeight,s=a.scrollHeight-f;if(s<=0)return;c.current=!0;const p=Math.round(t.data.position.relative/100*s);window.scrollTo({top:p,behavior:"smooth"}),setTimeout(()=>{c.current=!1},50)};return window.addEventListener("scroll",r),window.addEventListener("message",u),()=>{window.removeEventListener("scroll",r),window.removeEventListener("message",u)}},[]),o?n.createElement(i,{store:{options:{routingBasePath:"/preview",disableRouter:!0,hideSidebar:!0,scrollYOffset:0},definition:o}}):n.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh",fontFamily:"system-ui, -apple-system, sans-serif",color:"#666"}},"No API definition available")}function v(i){try{const o={...i};return Array.isArray(o.servers)&&(o.servers=o.servers.filter(e=>e&&typeof e=="object").filter(e=>typeof e.url=="string"&&e.url.trim().length>0)),o}catch{return i}}export{h as default};
+import o from"react";import r from"./components/PreviewContent";function n({RedoclyOpenAPIDocs:e,safeSlugify:t}){return o.createElement(r,{RedoclyOpenAPIDocs:e,safeSlugify:t})}export{n as default};

package/dist/pages/editor-preview/hooks/useCommunicationManager.d.ts

@@ -0,0 +1,10 @@
+interface UseCommunicationManagerProps {
+    definition: any;
+    lastGoodDefinition: any;
+    safeSlugify: (value: string) => string;
+}
+export declare const useCommunicationManager: ({ definition, lastGoodDefinition, safeSlugify }: UseCommunicationManagerProps) => {
+    scrollToPointer: (pointer: string) => void;
+    scrollToOperationInEditor: (operationPath: string) => void;
+};
+export {};

package/dist/pages/editor-preview/hooks/useCommunicationManager.js

@@ -0,0 +1 @@
+import{useEffect as P}from"react";import{extractOperationFromButton as b}from"../utils/html";const k=({definition:w,lastGoodDefinition:f,safeSlugify:c})=>{const l=t=>{const o=w||f;if(!o?.paths){console.warn("[EditorPreview] No definition or paths available");return}let n="",e="";if(t.startsWith("#/")){const a=t.slice(2).split("/");e=a[2]||"",n=(a[1]||"").replaceAll("~1","/")}else{const a=t.split("/"),p=a[1]||"";e=a[2]||"",n=p.replace(/^paths/,"").replaceAll("~1","/")}if(!n||!e){console.warn("[EditorPreview] Invalid pointer format:",t);return}const r=o.paths[n]?.[e];if(!r){console.warn("[EditorPreview] No operation found for",{path:n,verb:e,pointer:t});return}const h=r.tags?.[0],v=h?c(h)+"/":"";let s="";if(r?.operationId?s="/preview/"+v+c(r.operationId):s="/preview/"+v+"paths/"+c(n)+"/"+e.toLowerCase(),s&&s!==window.location.pathname){window.history.replaceState({},"",s);const a=e.toLowerCase(),p=n,E=()=>{const g=document.querySelectorAll('button[data-component-name="Button/Button"]');for(const i of g){const u=b(i);if(u&&u.path===p&&u.method.toLowerCase()===a)return i.click(),!0}return!1};let d=E();d||[0,100,300,800].forEach(i=>{setTimeout(()=>{d||(d=E())},i)})}else s||console.warn("[EditorPreview] could not compute url for pointer:",t)},m=t=>{window.parent.postMessage({type:"scroll-to-operation",operationPath:t,source:"preview"},"*")};return P(()=>{window.scrollToPointer=l;const t=o=>{o.data?.type==="scroll-to-operation"&&o.data?.source==="editor"&&l(o.data.operationPath)};return window.addEventListener("message",t),window.parent.onReady(window),()=>{window.removeEventListener("message",t),delete window.scrollToPointer}},[w,f]),P(()=>{const t=o=>{const e=o.target.closest("button");if(e){const r=b(e);r&&m(r.path)}};return document.addEventListener("click",t),()=>{document.removeEventListener("click",t)}},[]),{scrollToPointer:l,scrollToOperationInEditor:m}};export{k as useCommunicationManager};

package/dist/pages/editor-preview/hooks/useDefinitionManager.d.ts

@@ -0,0 +1,4 @@
+export declare const useDefinitionManager: () => {
+    definition: any;
+    lastGoodDefinition: any;
+};

package/dist/pages/editor-preview/hooks/useDefinitionManager.js

@@ -0,0 +1 @@
+import{useState as c,useRef as s,useEffect as a}from"react";const d=()=>{const[u,o]=c(null),r=s(null),i=s(null),f=e=>{try{const n={...e};return Array.isArray(n.servers)&&(n.servers=n.servers.filter(t=>t&&typeof t=="object").filter(t=>typeof t.url=="string"&&t.url.trim().length>0)),n}catch{return e}},l=e=>{if(e&&typeof e=="object"&&typeof e.openapi=="string"){const t=f(e);r.current=t,o(t)}else r.current?i.current!==r.current&&o(r.current):o(null);i.current=e};return a(()=>(window.updateDefinition=l,()=>{delete window.updateDefinition}),[]),{definition:u,lastGoodDefinition:r.current}};export{d as useDefinitionManager};

package/dist/pages/editor-preview/hooks/useThemeManager.d.ts

@@ -0,0 +1,3 @@
+export declare const useThemeManager: () => {
+    preservedTheme: string | null;
+};

package/dist/pages/editor-preview/hooks/useThemeManager.js

@@ -0,0 +1 @@
+import{useEffect as a,useRef as i,useCallback as l}from"react";const d="manual",w=()=>{const e=i(null),n=l(r=>r.split(" ").filter(Boolean).find(t=>t==="light"||t==="dark")||"light",[]),u=l(()=>{try{return n(window.parent.document.documentElement.className)}catch{return"light"}},[n]);return a(()=>{const r=window.useColorSwitcher,c=(()=>{const t=n(document.documentElement.className);return t!=="light"?t:u()})();e.current=c,document.documentElement.className=c,window.useColorSwitcher=()=>({isSwitcherHidden:!0,initActiveColorMode:()=>{e.current&&(document.documentElement.className=e.current)},activeColorMode:e.current||"light"});const o=new MutationObserver(()=>{const t=document.documentElement.className,m=t.includes(d),s=n(t);if(m){e.current=s,document.documentElement.className=s;return}e.current&&s!==e.current&&(document.documentElement.className=e.current)});return o.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]}),()=>{o.disconnect(),r&&(window.useColorSwitcher=r)}},[u,n]),{preservedTheme:e.current}};export{w as useThemeManager};

package/dist/pages/editor-preview/utils/html.d.ts

@@ -0,0 +1,4 @@
+export declare const extractOperationFromButton: (buttonElement: HTMLButtonElement) => {
+    path: string;
+    method: string;
+} | null;

package/dist/pages/editor-preview/utils/html.js

@@ -0,0 +1 @@
+const d=e=>{try{const n=e.textContent||"",a=n.match(/\b(get|post|put|delete|patch|head|options)\b/i),t=a?a[1].toLowerCase():"",r=n.match(/\/([a-zA-Z0-9\-_\/\{\}]+)/),o=r?r[0]:"",c=e.getAttribute("data-component-name"),h=e.getAttribute("data-operation"),u=e.querySelector('[data-component-name*="Tag"]')!==null,p=/\/[a-zA-Z0-9\-_\/\{\}]+/.test(n),s=/\b(get|post|put|delete|patch|head|options)\b/i.test(n);return t&&o?{path:o,method:t}:u&&p&&(t||s)?{path:o||"unknown",method:t||"unknown"}:h?{path:h,method:t||"unknown"}:c&&c.includes("Button")&&(t||o)?{path:o||"unknown",method:t||"unknown"}:s&&p?{path:o||"unknown",method:t||"unknown"}:null}catch(n){return console.error("Error extracting operation from button:",n),null}};export{d as extractOperationFromButton};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/marketing-pages",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "keywords": [],
   "author": "",
   "license": "UNLICENSED",