@pb33f/cowboy-components 0.7.17 → 0.8.0

package/dist/components/model-renderer/document.d.ts

@@ -5,6 +5,7 @@ export declare class RenderedDocumentNodeComponent extends ClickableRef {
     static styles: import("lit").CSSResult[];
     document: OpenAPIDocument;
     clicked(id: string): void;
+    isLightMode(): boolean;
     renderOpenAPISVG(): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/model-renderer/document.js

@@ -25,9 +25,14 @@ let RenderedDocumentNodeComponent = class RenderedDocumentNodeComponent extends
             }
         }));
     }
+    isLightMode() {
+        return document.documentElement.getAttribute('theme') === 'light';
+    }
     renderOpenAPISVG() {
+        const centerFill = this.isLightMode() ? '#000' : '#fff';
+        const filterStyle = this.isLightMode() ? 'filter: grayscale(100%);' : '';
         return html `
-                <div style="width: 70px; margin-right: 20px;">
+                <div style="width: 70px; margin-right: 20px; ${filterStyle}">
                 <svg width="100%" id="openapi-logo" data-name="openapi-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 784.37 784.29">
                     <path d="M207.28,450.97H.31c.04,1.02.07,2.03.12,3.03.08,1.95.22,3.88.34,5.83.05.84.09,1.67.16,2.5.16,2.25.35,4.5.56,6.73.05.51.09,1.02.14,1.5.24,2.5.51,4.99.8,7.47.01.24.04.48.08.72.33,2.67.67,5.35,1.06,8,0,.04,0,.08.01.1,2.39,16.54,5.96,32.88,10.7,48.9.03.07.05.13.07.2.75,2.54,1.53,5.05,2.33,7.54.05.14.1.3.14.44s.09.29.14.44c.73,2.26,1.5,4.51,2.28,6.77.2.56.39,1.14.6,1.71.69,1.95,1.4,3.9,2.13,5.86.34.88.67,1.75.99,2.64.64,1.62,1.26,3.23,1.9,4.84.48,1.22.98,2.43,1.49,3.63.52,1.27,1.05,2.51,1.58,3.78.65,1.54,1.35,3.07,2.03,4.62.41.92.82,1.82,1.23,2.73.84,1.84,1.7,3.69,2.58,5.52.29.59.56,1.18.85,1.75,1.02,2.12,2.05,4.2,3.1,6.28.18.31.33.64.5.95,1.18,2.3,2.38,4.59,3.62,6.86.05.1.12.2.16.31.26.47.55.93.81,1.4l176.76-106.47.65-.39c-6.97-14.7-11.31-30.33-12.93-46.22h0Z" style="fill: #359ed3;"/>
                     <path d="M258.15,545.99l-.5.5-145.79,145.77c.75.69,1.49,1.41,2.26,2.08,1.36,1.24,2.75,2.46,4.12,3.67.72.63,1.41,1.26,2.13,1.88,1.65,1.43,3.32,2.81,4.98,4.21.46.38.89.75,1.35,1.12,2.12,1.74,4.26,3.46,6.42,5.15,2.07,1.63,4.14,3.22,6.26,4.81.09.05.16.1.24.17,8.8,6.57,17.9,12.72,27.27,18.44.31.21.64.39.97.6,1.79,1.06,3.57,2.12,5.37,3.16l3.29,1.88c1.05.6,2.08,1.18,3.12,1.75,1.9,1.03,3.79,2.07,5.7,3.07.26.14.52.29.8.42,5.3,2.77,10.68,5.35,16.12,7.83l5.18-12.57,73.33-178.04.26-.65c-8-4.29-15.68-9.36-22.89-15.27h0Z" style="fill: #62c4ff;"/>
@@ -38,7 +43,7 @@ let RenderedDocumentNodeComponent = class RenderedDocumentNodeComponent extends
                     <path d="M340.37,89.8c-2.34.05-4.68.05-7.01.14-14.6.59-29.18,2.08-43.64,4.51-.31.05-.63.1-.95.16-2.03.35-4.04.72-6.05,1.1-1.14.22-2.29.43-3.44.65-1.19.24-2.37.48-3.56.75-1.96.41-3.92.84-5.87,1.29-.37.07-.72.16-1.07.24-28.98,6.77-56.99,17.21-83.33,31.07-1.71.92-3.39,1.95-5.1,2.88-2.04,1.12-4.08,2.28-6.11,3.44-1.5.88-3.03,1.67-4.54,2.56-.01.01-.04.03-.05.03-.1.07-.21.13-.31.18-.39.25-.8.44-1.19.68v.03s3.63,6,3.63,6l102.97,170.93c2.01-1.2,4.07-2.31,6.12-3.41,2.07-1.11,4.16-2.16,6.26-3.15,14.55-6.95,30.19-11.33,46.23-12.96,2.33-.24,4.65-.43,7-.55,2.33-.12,4.67-.24,7.01-.24V89.65c-2.34,0-4.67.1-7,.14h0Z" style="fill: #f6f;"/>
                     <path d="M694.3,419.9c-.1-1.86-.21-3.7-.34-5.57-.05-.92-.11-1.85-.18-2.77-.14-2.18-.33-4.37-.54-6.55-.04-.56-.09-1.12-.14-1.69-.24-2.45-.5-4.88-.78-7.31-.03-.2-.04-.39-.07-.59l-.04-.27c-.31-2.63-.67-5.26-1.03-7.87l-.04-.25c-2.38-16.5-5.95-32.82-10.67-48.81-.04-.12-.07-.21-.1-.31-.75-2.5-1.52-4.97-2.29-7.44-.12-.33-.22-.65-.33-.98-.73-2.24-1.48-4.46-2.25-6.68l-.63-1.8c-.68-1.92-1.39-3.84-2.09-5.77-.35-.92-.69-1.83-1.06-2.73-.6-1.6-1.22-3.18-1.86-4.75-.5-1.27-1.01-2.51-1.52-3.74-.51-1.24-1.03-2.46-1.54-3.69-.68-1.57-1.37-3.14-2.07-4.69-.39-.88-.78-1.77-1.19-2.65-.85-1.86-1.73-3.73-2.6-5.58-.27-.55-.55-1.12-.82-1.69-1.02-2.12-2.07-4.25-3.14-6.34-.14-.29-.3-.59-.44-.88-1.19-2.31-2.42-4.64-3.65-6.93-.05-.08-.09-.17-.14-.25-6-11.03-12.6-21.74-19.76-32.06l-152.38,152.38c3.46,10.21,5.71,20.74,6.81,31.34h207c-.05-1.03-.08-2.07-.13-3.07h0Z" style="fill: #62c4ff;"/>
                     <path d="M488.24,436.97c0,2.34-.22,4.67-.34,7.01s-.16,4.68-.39,7c-2.67,26.9-13.04,53.15-31.13,75.21-1.46,1.79-3.12,3.46-4.71,5.2-1.57,1.73-3.02,3.52-4.69,5.19l146.01,145.98c1.66-1.66,3.22-3.37,4.84-5.06s3.27-3.35,4.84-5.06c10.8-11.7,20.68-23.94,29.58-36.66.37-.51.69-1.01,1.05-1.5,1.09-1.56,2.13-3.14,3.2-4.71.93-1.41,1.86-2.81,2.76-4.24.46-.68.9-1.39,1.33-2.07,33.49-52.57,51.41-112.17,53.82-172.29.09-2.33.14-4.67.18-7.01.05-2.33.12-4.65.12-7h-206.46Z" style="fill: #f6f;"/>
-                    <path d="M756.04,28.33c-37.77-37.77-99.02-37.77-136.79,0-30.14,30.12-36.17,75.17-18.21,111.33l-210.72,210.7c-36.17-17.94-81.22-11.92-111.36,18.2-37.77,37.77-37.76,99.02,0,136.79,37.79,37.77,99.04,37.76,136.82,0,30.14-30.14,36.15-75.18,18.2-111.35l210.72-210.69c36.18,17.94,81.21,11.92,111.35-18.21,37.77-37.76,37.77-99,0-136.78h0Z" style="fill: #fff;"/>
+                    <path d="M756.04,28.33c-37.77-37.77-99.02-37.77-136.79,0-30.14,30.12-36.17,75.17-18.21,111.33l-210.72,210.7c-36.17-17.94-81.22-11.92-111.36,18.2-37.77,37.77-37.76,99.02,0,136.79,37.79,37.77,99.04,37.76,136.82,0,30.14-30.14,36.15-75.18,18.2-111.35l210.72-210.69c36.18,17.94,81.21,11.92,111.35-18.21,37.77-37.76,37.77-99,0-136.78h0Z" style="fill: ${centerFill};"/>
                 </svg>
                 </div>`;
     }
@@ -58,14 +63,14 @@ let RenderedDocumentNodeComponent = class RenderedDocumentNodeComponent extends
                 <hr class="hr-nopadding">`;
         }
         if (this.document?.version) {
-            version = html `<span class="list-key">Version:</span> <span class="list-value">${this.document.version}</span>`;
+            version = html `<span class="list-key">VERSION:</span> <span class="list-value">${this.document.version}</span>`;
         }
         if (this.document?.components && this.document.components_idhash) {
             components = html `
                     <div id="components">
                         <h3 class="label" style="padding-top: 0; margin-top: 0">
                             <sl-icon name="${ModelIconComponent.getIconForType(NodeType.COMPONENTS)}" class="icon-vertical"></sl-icon>
-                            <a href="#" @click="${() => this.clicked('$.components')}">Components</a>
+                            <a href="#" @click="${() => this.clicked('$.components')}">COMPONENTS</a>
                             (<span class="count">${this.document.components}</span>)
                         </h3>
                     </div>
@@ -76,7 +81,7 @@ let RenderedDocumentNodeComponent = class RenderedDocumentNodeComponent extends
                     <div id="paths">
                         <h3 class="label" style="padding-top: 0; margin-top: 0">
                             <sl-icon name="${ModelIconComponent.getIconForType(NodeType.PATHS)}" class="icon-vertical"></sl-icon>
-                            <a href="#" @click="${() => this.clicked('$.paths')}">Paths</a>
+                            <a href="#" @click="${() => this.clicked('$.paths')}">PATHS</a>
                             (<span class="count">${this.document.paths}</span>)
                         </h3>
                     </div>
@@ -87,7 +92,7 @@ let RenderedDocumentNodeComponent = class RenderedDocumentNodeComponent extends
                     <div id="tags">
                         <h3 class="label" style="padding-top: 0; margin-top: 0">
                             <sl-icon name="${ModelIconComponent.getIconForType(NodeType.TAGS)}" class="icon-vertical"></sl-icon>
-                            <a href="#" @click="${() => this.clicked('$tags')}">Tags</a>
+                            <a href="#" @click="${() => this.clicked('$tags')}">TAGS</a>
                             (<span class="count">${this.document.tags}</span>)
                         </h3>
                     </div>
@@ -98,7 +103,7 @@ let RenderedDocumentNodeComponent = class RenderedDocumentNodeComponent extends
                     <div id="security">
                         <h3 class="label" style="padding-top: 0; margin-top: 0">
                             <sl-icon name="${ModelIconComponent.getIconForType(NodeType.SECURITY)}" class="icon-vertical"></sl-icon>
-                            <a href="#" @click="${() => this.clicked('$.security')}">Global Security</a>
+                            <a href="#" @click="${() => this.clicked('$.security')}">GLOBAL SECURITY</a>
                             (<span class="count">${this.document.security}</span>)
                         </h3>
                     </div>
@@ -109,7 +114,7 @@ let RenderedDocumentNodeComponent = class RenderedDocumentNodeComponent extends
                     <div id="security">
                         <h3 class="label" style="padding-top: 0; margin-top: 0">
                             <sl-icon name="${ModelIconComponent.getIconForType(NodeType.SERVERS)}" class="icon-vertical"></sl-icon>
-                            <a href="#" @click="${() => this.clicked('$.servers')}">Global Servers</a>
+                            <a href="#" @click="${() => this.clicked('$.servers')}">GLOBAL SERVERS</a>
                             (<span class="count">${this.document.servers}</span>)
                         </h3>
                     </div>
@@ -119,7 +124,7 @@ let RenderedDocumentNodeComponent = class RenderedDocumentNodeComponent extends
             <div style="display: flex;">
                 ${this.renderOpenAPISVG()}
                    <div>
-                       <strong>OpenAPI Specification</strong> <br/>
+                       <strong>OPENAPI SPECIFICATION</strong> <br/>
                        <br/>
                        ${version}
                        

package/dist/components/model-renderer/encoding.d.ts

@@ -2,10 +2,12 @@ import './description.js';
 import './media-type.js';
 import './header.js';
 import { ClickableRef } from "./clickable-ref.js";
+import { PropertyValues } from "lit";
 import { Encoding } from "../../model/encoding.js";
 export declare class RenderedEncodingNodeComponent extends ClickableRef {
     static styles: import("lit").CSSResult[];
     encoding: Encoding;
     constructor();
+    willUpdate(changedProps: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/model-renderer/encoding.js

@@ -19,12 +19,17 @@ let RenderedEncodingNodeComponent = class RenderedEncodingNodeComponent extends
     constructor() {
         super();
     }
+    willUpdate(changedProps) {
+        if (changedProps.has('encoding')) {
+            this.resetExpandedSections();
+        }
+    }
     render() {
         if (isHasRef(this.encoding)) {
             const hasRef = this.encoding;
             return html `
                 <div class="link">
-                    Reference:
+                    REFERENCE:
                     <sl-icon name="arrow-right" class="reflink reflink-icon"></sl-icon>
                     <span class="inline-ref reflink" @click=${() => {
                 this.clickedRef(hasRef.$ref);
@@ -40,24 +45,27 @@ let RenderedEncodingNodeComponent = class RenderedEncodingNodeComponent extends
             explode = html `
                 <div class="boolean-value">
                     <sl-icon name="fullscreen"></sl-icon>
-                    Uses <strong>exploded encoding</strong></div>`;
+                    USES <strong>EXPLODED ENCODING</strong></div>`;
         }
         if (this.encoding.allowReserved) {
             allowReserved = html `
                 <div class="boolean-value">
                     <sl-icon name="regex"></sl-icon>
-                    Allows <strong>reserved characters</strong></div>`;
+                    ALLOWS <strong>RESERVED CHARACTERS</strong></div>`;
         }
         if (this.encoding.style) {
             style = html `
                 <div class="boolean-value">
                     <sl-icon name="border-style"></sl-icon>
-                    Style: <strong>${this.encoding.style}</strong></div>`;
+                    STYLE: <strong>${this.encoding.style}</strong></div>`;
         }
         if (this.encoding.headers) {
             headers = html `
-                <h4>${this.renderSection('Headers', 'headers')}</h4>
-                <div class="closed" id="headers" style="padding-left: 30px">
+                <h4 @click="${() => this.toggleExpanded('headers')}" style="cursor: pointer" aria-expanded="${this.isExpanded('headers') ? 'true' : 'false'}">
+                    <sl-icon name="chevron-${this.isExpanded('headers') ? 'down' : 'right'}"></sl-icon> HEADERS
+                </h4>
+                ${this.isExpanded('headers') ? html `
+                <div id="headers" style="padding-left: 30px">
                 ${Object.keys(this.encoding.headers).map((headerName) => {
                 if (headerName != '' && this.encoding.headers && this.encoding.headers[headerName]) {
                     return html `
@@ -68,7 +76,8 @@ let RenderedEncodingNodeComponent = class RenderedEncodingNodeComponent extends
                                 </div>`;
                 }
             })}
-                </div>`;
+                </div>
+                ` : ''}`;
         }
         return html `
             ${contentType}

package/dist/components/model-renderer/example.css.js

@@ -16,7 +16,8 @@ export default css `
         margin-left: 0;
         min-width: 100px;
         width: 100%;
-        max-width: none;
+        max-width: 320px;
+
     }
 
     sl-button::part(base):hover{
@@ -42,6 +43,9 @@ export default css `
     sl-button.generate::part(base) {
         border-color: var(--warn-color);
         color: var(--warn-color);
+        max-width: 324px;
+        height: 30px;
+        padding-top: 1px;
     }
     sl-button.generate::part(base):hover {
         border-color: var(--warn-color);

package/dist/components/model-renderer/example.d.ts

@@ -3,6 +3,7 @@ import { ClickableRef } from "./clickable-ref.js";
 import { ExampleContainer, Example, ExampleMap } from "../../model/example.js";
 import 'prismjs/components/prism-json.js';
 import { HasRef, Schema } from "../../model/schema.js";
+import '../premium-gate/premium-gate.js';
 export declare class RenderedSchemaNodeComponent extends ClickableRef {
     static styles: import("lit").CSSResult[];
     exampleContainer: ExampleContainer;
@@ -14,9 +15,11 @@ export declare class RenderedSchemaNodeComponent extends ClickableRef {
     isHasRef(obj: any): obj is HasRef;
     isExampleMap(obj: any): obj is ExampleMap;
     renderMockRequest(): void;
+    private dispatchExampleDrawer;
+    private dispatchErrorToast;
+    private handleExampleReference;
     renderExample(): import("lit-html").TemplateResult<1> | undefined;
     showFromExamples(index: any): void;
-    private renderExampleOnPlatform;
     renderExampleSelect(isArray: boolean, isMap: boolean): import("lit-html").TemplateResult<1>;
     renderExamples(): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1> | undefined;

package/dist/components/model-renderer/example.js

@@ -16,8 +16,8 @@ import sharedCss from "../../css/shared.css.js";
 import syntaxCss from "../../css/syntax.css.js";
 import filterCss from "../../css/filter.css.js";
 import exampleCss from "./example.css.js";
-import { ProblemDrawerEventType } from "../problem-list/details-drawer.js";
-import { AddToast, GenerateMockFromSchema, OpenProblemDrawer } from "../../events/doctor.js";
+import { DrawerContentType } from "../../model/drawer-content.js";
+import { AddToast, GenerateMockFromSchema, OpenDrawer } from "../../events/doctor.js";
 import { isHasRef } from "../../model/schema.js";
 import { ModelService } from "../../services/model-service.js";
 import { ToastType } from "../../model/toast.js";
@@ -25,6 +25,7 @@ import { marked } from "marked";
 import chromaSynxtaxCss from "../../css/chroma-synxtax.css.js";
 import formattingCss from "../../css/formatting.css.js";
 import { extractExtensions } from "../../model/media-type.js";
+import '../premium-gate/premium-gate.js';
 Prism.manual = true;
 let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends ClickableRef {
     constructor() {
@@ -59,6 +60,43 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends Clic
             composed: true,
         }));
     }
+    dispatchExampleDrawer(example, title) {
+        this.dispatchEvent(new CustomEvent(OpenDrawer, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                type: DrawerContentType.RENDERED_EXAMPLE,
+                title: title,
+                json: JSON.stringify(example, null, 2)
+            }
+        }));
+    }
+    dispatchErrorToast(title, body) {
+        this.dispatchEvent(new CustomEvent(AddToast, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                toast: {
+                    title,
+                    id: crypto.randomUUID(),
+                    type: ToastType.ERROR,
+                    time: new Date().toISOString(),
+                    body
+                },
+            }
+        }));
+    }
+    async handleExampleReference(example, index) {
+        try {
+            const brokerId = this.getBrokerId();
+            const response = await ModelService.generateExample(JSON.stringify(example), brokerId);
+            const title = isNaN(index) ? index : (index + 1).toString();
+            this.dispatchExampleDrawer(response, title);
+        }
+        catch (e) {
+            this.dispatchErrorToast('Cannot generate example', e.detail ?? e.message ?? e);
+        }
+    }
     renderExample() {
         const filter = html `
             <div class="filter">
@@ -76,7 +114,6 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends Clic
                 `;
             default:
                 if (!this.exampleContainer) {
-                    //@ts-ignore
                     if (!this.noGenerate || (this.schema && (this.schema.type === 'object' ||
                         this.schema.properties !== undefined ||
                         this.schema.allOf !== undefined ||
@@ -84,7 +121,13 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends Clic
                         this.schema.oneOf !== undefined ||
                         (Array.isArray(this.schema.type) && this.schema.type?.includes('object'))))) {
                         return html `
-                            <sl-button class="generate" @click="${this.renderMockRequest}">Generate Example</sl-button>`;
+                            <pb33f-premium-gate dialogTitle="Show us your credentials, partner" 
+                                                featureName="Example Generation"
+                                                featureExplanation="Howdy! In order to be able to generate a mock, or an example - 
+                                                we're gonna need you to tell us who you are first.">
+                                <sl-button class="generate" @click="${this.renderMockRequest}">Generate Example</sl-button>
+                            </pb33f-premium-gate>
+                        `;
                     }
                 }
                 else {
@@ -93,114 +136,35 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends Clic
         }
     }
     showFromExamples(index) {
-        if (!this.examplesContainer && this.exampleContainer) {
-            if (isHasRef(this.exampleContainer)) {
-                this.renderExampleOnPlatform(this.exampleContainer, "Reference");
-                return;
-            }
+        let example = null;
+        let title = 'Example';
+        if (this.examplesContainer?.[index]) {
+            example = this.examplesContainer[index];
+            title = isNaN(index) ? index : (index + 1).toString();
         }
-        if (this.examplesContainer && this.examplesContainer[index]) {
-            // cannot be rendered, needs to be rendered by model service.
-            if (isHasRef(this.examplesContainer[index])) {
-                this.renderExampleOnPlatform(this.examplesContainer[index], index);
-                return;
-            }
-            this.dispatchEvent(new CustomEvent(OpenProblemDrawer, {
-                bubbles: true,
-                composed: true,
-                detail: {
-                    type: ProblemDrawerEventType.RENDERED_EXAMPLE,
-                    customTitle: `${isNaN(index) ? index : index + 1}`,
-                    render: JSON.stringify(this.examplesContainer[index], null, 2)
-                }
-            }));
-            return;
+        else if (this.exampleContainer?.[index]) {
+            example = this.exampleContainer[index];
+            title = isNaN(index) ? index : (index + 1).toString();
         }
-        // check the example container, spec might be messed up.
-        if (this.exampleContainer && this.exampleContainer[index]) {
-            // cannot be rendered, needs to be rendered by model service.
-            if (isHasRef(this.exampleContainer[index])) {
-                this.renderExampleOnPlatform(this.exampleContainer[index], index);
-                return;
-            }
-            this.dispatchEvent(new CustomEvent(OpenProblemDrawer, {
-                bubbles: true,
-                composed: true,
-                detail: {
-                    type: ProblemDrawerEventType.RENDERED_EXAMPLE,
-                    customTitle: `${isNaN(index) ? index : index + 1}`,
-                    render: JSON.stringify(this.exampleContainer[index], null, 2)
-                }
-            }));
+        else if (this.exampleContainer && !this.examplesContainer) {
+            example = this.exampleContainer;
+        }
+        if (!example) {
+            this.dispatchErrorToast('Cannot generate example', "There seems to be an example, but I can't figure out how to render it, which means it's not a valid example.");
             return;
         }
-        // check the example container, spec might be messed up.
-        if (this.exampleContainer) {
-            // cannot be rendered, needs to be rendered by model service.
-            if (isHasRef(this.exampleContainer)) {
-                this.renderExampleOnPlatform(this.exampleContainer, index);
-                return;
-            }
-            this.dispatchEvent(new CustomEvent(OpenProblemDrawer, {
-                bubbles: true,
-                composed: true,
-                detail: {
-                    type: ProblemDrawerEventType.RENDERED_EXAMPLE,
-                    customTitle: `Example`,
-                    render: JSON.stringify(this.exampleContainer, null, 2)
-                }
-            }));
+        if (isHasRef(example)) {
+            this.handleExampleReference(example, index);
             return;
         }
-        this.dispatchEvent(new CustomEvent(AddToast, {
-            bubbles: true,
-            composed: true,
-            detail: {
-                toast: {
-                    title: 'Cannot generate example',
-                    id: crypto.randomUUID(),
-                    type: ToastType.ERROR,
-                    time: new Date().toISOString(),
-                    body: "There seems to be an example, but I can't figure out how to render it, which means it's not a valid example."
-                },
-            }
-        }));
-    }
-    renderExampleOnPlatform(example, index) {
-        ModelService.generateExample(JSON.stringify(example)).then((response) => {
-            this.dispatchEvent(new CustomEvent(OpenProblemDrawer, {
-                bubbles: true,
-                composed: true,
-                detail: {
-                    type: ProblemDrawerEventType.RENDERED_EXAMPLE,
-                    customTitle: `${isNaN(index) ? index : index + 1}`,
-                    render: JSON.stringify(response, null, 2)
-                }
-            }));
-        }).catch((e) => {
-            this.dispatchEvent(new CustomEvent(AddToast, {
-                bubbles: true,
-                composed: true,
-                detail: {
-                    toast: {
-                        title: 'Cannot generate example',
-                        id: crypto.randomUUID(),
-                        type: ToastType.ERROR,
-                        time: new Date().toISOString(),
-                        body: e.detail ? e.detail : e.message ? e.message : e
-                    },
-                }
-            }));
-            console.error("cannot generate example:", e);
-        });
+        this.dispatchExampleDrawer(example, title);
     }
     renderExampleSelect(isArray, isMap) {
         if (!isArray && !isMap) {
             return html `
-                <sl-button @click="${() => this.showFromExamples(0)}">View Example</sl-button>`;
+                <sl-button @click="${() => this.showFromExamples(0)}">VIEW EXAMPLE</sl-button>`;
         }
         if (!isArray && isMap) {
-            // create a map of examples using the object keys of this.examplesContainer
             const keys = Object.keys(this.examplesContainer);
             return html `
                 <div class="dropdown">
@@ -214,7 +178,7 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends Clic
                             ${keys.map((key) => {
                 return html `
                                     <sl-menu-item value="${key}">
-                                        Example ${key}
+                                        EXAMPLE ${key}
                                     </sl-menu-item>`;
             })}
                         </sl-menu>
@@ -243,7 +207,6 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends Clic
     renderExamples() {
         let isArray = false;
         let isMap = false;
-        // check if the object is an array
         if (Array.isArray(this.examplesContainer) && this.examplesContainer.length > 1) {
             isArray = true;
         }
@@ -263,7 +226,7 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends Clic
             case 'object':
                 return html `${filter}`;
             default:
-                return html `<span>Unknown Type: ${typeof this.examplesContainer}</span>`;
+                return html `<span>UNKNOWN TYPE: ${typeof this.examplesContainer}</span>`;
         }
     }
     render() {
@@ -287,29 +250,29 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends Clic
             if (this.exampleContainer.description) {
                 description = html `
                     <pb33f-rendered-description-node>
-                        <h4>Description</h4>
+                        <h4>DESCRIPTION</h4>
                         ${unsafeHTML(marked.parse(this.exampleContainer.description.toString()).toString())}
                     </pb33f-rendered-description-node>`;
             }
             if (this.exampleContainer.summary) {
                 summary = html `
                     <pb33f-rendered-description-node>
-                        <h4>Summary</h4>
+                        <h4>SUMMARY</h4>
                         ${unsafeHTML(marked.parse(this.exampleContainer.summary.toString()).toString())}
                     </pb33f-rendered-description-node>`;
             }
             if (this.exampleContainer.externalValue) {
                 externalValue = html `
                     <pb33f-rendered-description-node>
-                        <h4>External Value</h4>
+                        <h4>EXTERNAL VALUE</h4>
                         ${this.exampleContainer.externalValue.toString()}
                     </pb33f-rendered-description-node>`;
             }
             if (this.exampleContainer.value) {
                 value = html `
-                    <h4>Example Value</h4>
+                    <h4>EXAMPLE VALUE</h4>
                     <pre class="chroma json">
-                        ${unsafeHTML(Prism.highlight(JSON.stringify(this.exampleContainer.value?.toString(), null, 2), Prism.languages.json, 'json'))}</pre>
+                        ${unsafeHTML(Prism.highlight(JSON.stringify(this.exampleContainer.value, null, 2), Prism.languages.json, 'json'))}</pre>
                 `;
             }
             return html `
@@ -323,16 +286,7 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends Clic
                 </div>
             `;
         }
-        if (this.examplesContainer && !this.exampleContainer) {
-            return this.renderExamples();
-        }
-        if (this.examplesContainer && this.exampleContainer) {
-            if (Array.isArray(this.examplesContainer)) {
-                const cloned = structuredClone(this.examplesContainer);
-                // @ts-ignore
-                cloned.push(this.exampleContainer);
-                this.examplesContainer = cloned;
-            }
+        if (this.examplesContainer) {
             return this.renderExamples();
         }
         return this.renderExample();

package/dist/components/model-renderer/extensions.d.ts

@@ -1,8 +1,10 @@
+import { PropertyValues } from "lit";
 import { ClickableRef } from "./clickable-ref.js";
 export declare class RenderedExtensionsNodeComponent extends ClickableRef {
     static styles: import("lit").CSSResult[];
     extensions: Map<string, any>;
     prefix: string;
     constructor();
+    willUpdate(changedProps: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/model-renderer/extensions.js

@@ -14,10 +14,19 @@ let RenderedExtensionsNodeComponent = class RenderedExtensionsNodeComponent exte
         super();
         this.prefix = "";
     }
+    willUpdate(changedProps) {
+        if (changedProps.has('extensions')) {
+            this.resetExpandedSections();
+        }
+    }
     render() {
         return html `
-            <h4 class="margin-top">${this.prefix != "" ? this.prefix + ' ' : ''}${this.renderSection('Extensions', 'extensions')}</h4>
-            <pb33f-kv-view id="extensions" class="closed" .data="${this.extensions}" keyLabel="Extension" style="font-size: 0.8rem"></pb33f-kv-view>
+            <h4 class="margin-top" @click="${() => this.toggleExpanded('extensions')}" style="cursor: pointer" aria-expanded="${this.isExpanded('extensions') ? 'true' : 'false'}">
+                <sl-icon name="chevron-${this.isExpanded('extensions') ? 'down' : 'right'}"></sl-icon> ${this.prefix != "" ? this.prefix + ' ' : ''}EXTENSIONS
+            </h4>
+            ${this.isExpanded('extensions') ? html `
+            <pb33f-kv-view id="extensions" .data="${this.extensions}" keyLabel="Extension" style="font-size: 0.8rem"></pb33f-kv-view>
+            ` : ''}
         `;
     }
 };

package/dist/components/model-renderer/external-docs.d.ts

@@ -1,7 +1,9 @@
 import { ClickableRef } from "./clickable-ref.js";
+import { PropertyValues } from "lit";
 export declare class RenderedExternalDocsNodeComponent extends ClickableRef {
     static styles: import("lit").CSSResult[];
     externalDocs: ExternalDocumentation;
     constructor();
+    willUpdate(changedProps: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/model-renderer/external-docs.js

@@ -21,6 +21,11 @@ let RenderedExternalDocsNodeComponent = class RenderedExternalDocsNodeComponent
     constructor() {
         super();
     }
+    willUpdate(changedProps) {
+        if (changedProps.has('externalDocs')) {
+            this.resetExpandedSections();
+        }
+    }
     render() {
         let ext = html ``;
         let references = html ``;
@@ -33,7 +38,7 @@ let RenderedExternalDocsNodeComponent = class RenderedExternalDocsNodeComponent
         if (this.externalDocs?.$ref) {
             references = html `
                 <div class="link margin-top">
-                    Reference:
+                    REFERENCE:
                     <sl-icon name="arrow-right" class="reflink reflink-icon"></sl-icon>
                     <span class="reflink" 
                           @click=${() => {
@@ -44,7 +49,7 @@ let RenderedExternalDocsNodeComponent = class RenderedExternalDocsNodeComponent
         if (this.externalDocs?.description) {
             description = html `
                 <pb33f-rendered-description-node>
-                    <h4 class="hr-nopadding">${this.renderSection('Description', 'description')}</h4>
+                    <h4 class="hr-nopadding">${this.renderSection('DESCRIPTION', 'description')}</h4>
                     <span class="closed" id="description">${unsafeHTML(marked.parse(this.externalDocs.description.toString()).toString())}</span>
                 </pb33f-rendered-description-node>`;
         }
@@ -55,14 +60,18 @@ let RenderedExternalDocsNodeComponent = class RenderedExternalDocsNodeComponent
             `;
         }
         return html `
-            <h4>${this.renderSection('External Documentation', 'external-docs')}</h4>
-            <div id="external-docs" class="closed" style="margin-left: 20px; border-left: 1px dotted var(--secondary-color); padding-left: 20px">
+            <h4 @click="${() => this.toggleExpanded('external-docs')}" style="cursor: pointer" aria-expanded="${this.isExpanded('external-docs') ? 'true' : 'false'}">
+                <sl-icon name="chevron-${this.isExpanded('external-docs') ? 'down' : 'right'}"></sl-icon> EXTERNAL DOCUMENTATION
+            </h4>
+            ${this.isExpanded('external-docs') ? html `
+            <div id="external-docs" style="margin-left: 20px; border-left: 1px dotted var(--secondary-color); padding-left: 20px">
                 ${references}
                 ${description}
                 ${url}
                 ${ext}
                 ${super.renderChanges()}
             </div>
+            ` : ''}
         `;
     }
 };

package/dist/components/model-renderer/has-changes.js

@@ -27,15 +27,15 @@ export class HasChanges extends LitElement {
         let icon = html ``;
         switch (change.change) {
             case 1:
-                icon = html `<span class="change-type modified">(modified)</span>`;
+                icon = html `<span class="change-type modified">(MODIFIED)</span>`;
                 break;
             case 2:
             case 3:
-                icon = html `<span class="change-type added">(added)</span>`;
+                icon = html `<span class="change-type added">(ADDED)</span>`;
                 break;
             case 4:
             case 5:
-                icon = html `<span class="change-type removed">(removed)</span>`;
+                icon = html `<span class="change-type removed">(REMOVED)</span>`;
                 break;
         }
         return html `${icon}`;

package/dist/components/model-renderer/header.d.ts

@@ -1,6 +1,7 @@
 import './media-type.js';
 import './extensions.js';
 import { HasExamples } from "./clickable-ref.js";
+import { PropertyValues } from "lit";
 import { Header } from "../../model/header.js";
 import './description.js';
 export declare class RenderedHeaderNodeComponent extends HasExamples {
@@ -8,5 +9,6 @@ export declare class RenderedHeaderNodeComponent extends HasExamples {
     header: Header;
     name: string;
     constructor();
+    willUpdate(changedProps: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
 }