@pb33f/cowboy-components 0.3.4 → 0.4.0

package/dist/components/editor/editor.js

@@ -4,14 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 // -- Monaco Editor Imports --
 import * as monaco from "monaco-editor";
 // @ts-ignore
-import styles from "monaco-editor/min/vs/editor/editor.main.css?inline";
-// @ts-ignore
 import editorWorker from "monaco-editor/esm/vs/editor/editor.worker.js?worker";
 // @ts-ignore
 import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker.js?worker";
@@ -19,7 +17,9 @@ import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker.js?worker
 import cssWorker from "monaco-editor/esm/vs/language/css/css.worker.js?worker";
 // @ts-ignore
 import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker.js?worker";
-import { EditorClicked, EditorUpdated } from "../../events/doctor.js";
+import { DocumentReferenceClicked, EditorClicked, EditorUpdated } from "../../events/doctor.js";
+import { SpecEditorBreadcrumb } from "./editor-breadcrumb.js";
+import editorCss from "./editor.css.js";
 // @ts-ignore
 self.MonacoEnvironment = {
     getWorker(_, label) {
@@ -35,18 +35,202 @@ self.MonacoEnvironment = {
         return new editorWorker();
     },
 };
+const editorGreen = '#00FF00FF';
+const editorGreenDim = '#008a00';
+const editorRed = '#ff3c74';
+const editorBrown = '#004f0d';
+const editorBlue = '#62C4FFFF';
+const editorPink = '#E400FB';
+const Alive = 'pb33f';
+const Dead = 'dead';
+function generatePb33fTheme() {
+    return {
+        base: 'vs-dark',
+        renderSideBySide: false,
+        inherit: true,
+        rules: [
+            {
+                "foreground": "E400FB",
+                "token": "string"
+            },
+            {
+                "foreground": "fddb00",
+                "token": "number"
+            },
+            {
+                "foreground": "62C4FF",
+                "token": "type"
+            },
+            {
+                "foreground": "fddb00",
+                "token": "keyword"
+            },
+            { token: 'constant', foreground: 'ff0000' },
+            {
+                "foreground": "787878",
+                "token": "comment",
+                "fontStyle": "italic"
+            },
+            {
+                "foreground": "787878",
+                "token": "delimiter.curly",
+            },
+            {
+                "foreground": "787878",
+                "token": "delimiter.parenthesis",
+            },
+            {
+                "foreground": "787878",
+                "token": "delimiter.square",
+            },
+        ],
+        colors: {
+            'editor.foreground': editorBlue,
+            'editor.background': '#0d1117',
+            'editorCursor.foreground': editorBlue,
+            'editor.lineHighlightBackground': '#E400FB30',
+            'editorLineNumber.foreground': '#6368747F',
+            'editorLineNumber.activeForeground': editorPink,
+            'editor.inactiveSelectionBackground': '#FF3C742D',
+            'diffEditor.removedTextBackground': '#FF3C741A',
+            'diffEditor.insertedTextBackground': '#62C4FF1A',
+            'editorLink.activeForeground': editorRed,
+            'editorHoverWidget.background': '#0d1117',
+            'editorHoverWidget.border': editorPink,
+            'peekView.border': editorRed,
+            'editorStickyScroll.border': '#F83AFF72', // Red bottom border
+            'editorBracketMatch.border': editorGreen, // Green border for matching brackets
+            'editorBracketMatch.background': '#004400',
+            'editorBracketHighlight.foreground1': editorGreen, // Red for the first pair
+            'editorBracketHighlight.foreground2': editorGreen, // Green for the second pair
+            'editorBracketHighlight.foreground3': editorGreen, // Green for the second pair
+            'editorBracketHighlight.foreground4': editorGreen, // Green for the second pair
+        }
+    };
+}
+function generateDeadTheme() {
+    return {
+        base: 'vs-dark',
+        renderSideBySide: false,
+        inherit: true,
+        rules: [
+            {
+                "foreground": "9A6D9A", // Muted purple for strings
+                "token": "string"
+            },
+            {
+                "foreground": "D3A300", // Muted gold for numbers
+                "token": "number"
+            },
+            {
+                "foreground": "75A9C6", // Muted blue for types
+                "token": "type"
+            },
+            {
+                "foreground": "D3A300", // Muted gold for keywords
+                "token": "keyword"
+            },
+            {
+                "token": "constant",
+                "foreground": "A66161" // Muted red for constants
+            },
+            {
+                "foreground": "8A8A8A", // Gray with slight vibrance for comments
+                "token": "comment",
+                "fontStyle": "italic"
+            },
+            {
+                "foreground": "8A8A8A", // Gray for curly braces
+                "token": "delimiter.curly",
+            },
+            {
+                "foreground": "8A8A8A", // Gray for parentheses
+                "token": "delimiter.parenthesis",
+            },
+            {
+                "foreground": "8A8A8A", // Gray for square brackets
+                "token": "delimiter.square",
+            },
+        ],
+        colors: {
+            'editor.foreground': '#909090', // Slightly muted text
+            'editor.background': '#0d1117', // Keeps the dark background
+            'editorCursor.foreground': '#A8A8A8', // Subtle but noticeable cursor
+            'editor.lineHighlightBackground': '#2A2A2A', // Subtle line highlight
+            'editorLineNumber.foreground': '#5A5A5A', // Dimmed but distinguishable line numbers
+            'editorLineNumber.activeForeground': '#858585', // Slightly brighter active line number
+            'editor.inactiveSelectionBackground': '#464646', // Subtle selection background
+            'diffEditor.removedTextBackground': '#9A2B2B1A', // Muted red for removed text
+            'diffEditor.insertedTextBackground': '#2B9A6B1A', // Muted green for inserted text
+            'editorLink.activeForeground': '#7D7D7D', // Subtle color for active links
+            'editorHoverWidget.background': '#191919', // Slightly lighter hover widget background
+            'editorHoverWidget.border': '#6F6F6F', // Subtle border for hover widget
+            'peekView.border': '#5F5F5F', // Subtle border for peek view
+            'editorStickyScroll.border': '#707070', // Slightly noticeable border
+            'editorBracketMatch.border': '#4D4D4D', // Slightly brighter gray for matching brackets
+            'editorBracketMatch.background': '#292929', // Slightly brighter background for matching brackets
+            'editorBracketHighlight.foreground1': '#857B85', // Muted tones for brackets
+            'editorBracketHighlight.foreground2': '#768A76',
+            'editorBracketHighlight.foreground3': '#798A79',
+            'editorBracketHighlight.foreground4': '#858A85',
+        }
+    };
+}
+let monacoConfigured = false;
+function setupMonaco() {
+    if (!monacoConfigured) {
+        const options = generatePb33fTheme();
+        const deadOptions = generateDeadTheme();
+        // @ts-ignore
+        monaco.editor.defineTheme(Dead, deadOptions);
+        // @ts-ignore
+        monaco.editor.defineTheme(Alive, options);
+        monaco.editor.setTheme(Alive);
+        monacoConfigured = true;
+    }
+}
 let SpecEditor = class SpecEditor extends LitElement {
     constructor(id = "spec") {
         super();
         this.container = createRef();
+        this.decorationIdToLinkTarget = new Map();
         this.id = id;
+        this.links = [];
+        this.decorationIdToLinkTarget = new Map();
+        this.minimapVisible = true;
+        this.breadcumb = new SpecEditorBreadcrumb();
+        this.breadcumb.currentPath = this.currentPath;
+        this.showBreadcrumb = false;
+        this.isActive = true;
+    }
+    createRenderRoot() {
+        return this;
+    }
+    revive() {
+        if (!this.isActive) {
+            this.isActive = true;
+            monaco.editor.setTheme(Alive);
+            this.breadcumb.isInvalid = false;
+        }
+    }
+    dead() {
+        if (this.isActive) {
+            this.isActive = false;
+            this.links = [];
+            this.applyLinkDecorations();
+            monaco.editor.setTheme(Dead);
+        }
+    }
+    setCurrentPath(path) {
+        this.currentPath = path;
+        this.breadcumb.currentPath = path;
     }
     render() {
         return html `
-            <style>
-                ${styles}
-            </style>
-            <main ${ref(this.container)}></main>
+            <div style="width: 100%; height: calc(100vh - ${this.showBreadcrumb ? '155px' : '129px'});"
+                 ${ref(this.container)}>
+            </div>
+            ${this.showBreadcrumb ? this.breadcumb : null}
         `;
     }
     getFile() {
@@ -69,90 +253,148 @@ let SpecEditor = class SpecEditor extends LitElement {
             return "vs-dark";
         return "vs-light";
     }
+    switchLanguage(language) {
+        if (this.editor) {
+            const model = this.editor.getModel(); // Get the current model
+            if (model) {
+                monaco.editor.setModelLanguage(model, language);
+            }
+        }
+    }
     isDark() {
         return (window.matchMedia &&
             window.matchMedia("(prefers-color-scheme: dark)").matches);
     }
-    setValue(value, firstboot = false) {
-        if (firstboot) {
-            this.firstboot = firstboot;
+    setValue(value, firstBoot = false) {
+        if (firstBoot) {
+            this.firstboot = firstBoot;
         }
-        this.editor.setValue(value);
+        this.editor?.setValue(value);
     }
     getValue() {
-        return this.editor.getValue();
+        return this.editor?.getValue();
+    }
+    clearDecorations() {
+        this.linkDecorations.clear();
+        this.editor?.deltaDecorations([], []);
+    }
+    clearAllMarkers() {
+        monaco.editor.removeAllMarkers("owner-" + this.id);
     }
     setMarkers(markers) {
-        monaco.editor.removeAllMarkers("owner");
-        monaco.editor.setModelMarkers(this.model, "owner", markers);
+        monaco.editor.removeAllMarkers("owner-" + this.id);
+        monaco.editor.setModelMarkers(this.model, "owner-" + this.id, markers);
     }
-    firstUpdated() {
-        const options = {
-            base: 'vs-dark',
-            //renderSideBySide: false,
-            inherit: true,
-            rules: [
-                {
-                    "foreground": "E400FB",
-                    "token": "string"
-                },
-                {
-                    "foreground": "E400FB",
-                    "token": "number"
-                },
-                {
-                    "foreground": "62C4FFFF",
-                    "token": "type"
-                },
-                {
-                    "foreground": "787878",
-                    "token": "comment",
-                    "fontStyle": "italic"
-                },
-                {
-                    "foreground": "787878",
-                    "token": "delimiter.curly",
-                },
-                {
-                    "foreground": "787878",
-                    "token": "delimiter.square",
-                },
-            ],
-            colors: {
-                'editor.fontFamily': 'arial',
-                'editor.foreground': '#ffffff',
-                'editor.background': '#0d1117',
-                'editorCursor.foreground': '#62C4FFFF',
-                'editor.lineHighlightBackground': '#E400FB30',
-                'editorLineNumber.foreground': '#6368747F',
-                'editorLineNumber.activeForeground': '#E400FB',
-                'editor.inactiveSelectionBackground': '#FF3C742D',
-                'diffEditor.removedTextBackground': '#FF3C741A',
-                'diffEditor.insertedTextBackground': '#62C4FF1A',
-                'editorBracketMatch.border': '#787878'
+    toggleMinimap() {
+        this.minimapVisible = !this.minimapVisible;
+        this.editor?.updateOptions({
+            minimap: {
+                enabled: this.minimapVisible
             }
-        };
-        // @ts-ignore
-        monaco.editor.defineTheme("pb33f", options);
-        monaco.editor.setTheme('pb33f');
+        });
+    }
+    firstUpdated() {
+        setupMonaco();
         const uri = monaco.Uri.parse("inmemory://doc-" + this.id);
         const value = this.getCode();
         this.model = monaco.editor.createModel(value, "yaml", uri);
         this.editor = monaco.editor.create(this.container.value, {
             model: this.model,
-            language: 'yaml',
+            language: 'json',
             theme: 'pb33f',
+            glyphMargin: true,
             readOnly: this.readOnly,
             automaticLayout: true,
             fontFamily: 'BerkeleyMono-Regular',
             fontSize: 14,
             minimap: {
-                enabled: false
+                enabled: this.minimapVisible
             },
             hover: {
-                enabled: true
-            }
+                enabled: true,
+                delay: 100,
+                above: false,
+                sticky: true,
+            },
+        });
+        monaco.languages.registerLinkProvider('yaml', { provideLinks: this.provideLinks.bind(this) });
+        monaco.editor.registerLinkOpener({ open: this.open.bind(this) });
+        // monaco.languages.registerCodeActionProvider("yaml", {
+        //     provideCodeActions: (
+        //         model /**ITextModel*/,
+        //         range /**Range*/,
+        //         context /**CodeActionContext*/,
+        //         token /**CancellationToken*/
+        //     ) => {
+        //
+        //         const actions = context.markers.map(error => {
+        //             return {
+        //                 title: `Example quick fix`,
+        //                 diagnostics: [error],
+        //                 kind: "quickfix",
+        //                 edit: {
+        //                     edits: [
+        //                         {
+        //                             resource: model.uri,
+        //                             edits: [
+        //                                 {
+        //                                     range: error,
+        //                                     text: "This text replaces the text with the error"
+        //                                 }
+        //                             ]
+        //                         }
+        //                     ]
+        //                 },
+        //                 isPreferred: true
+        //             };
+        //         });
+        //         return {
+        //             actions: actions,
+        //             dispose: () => {}
+        //         }
+        //     }
+        // });
+        monaco.languages.registerHoverProvider('yaml', {
+            provideHover: (_model, position) => {
+                const link = this.links.find((link) => {
+                    const range = new monaco.Range(link.line, link.startColumn, link.line, link.endColumn);
+                    return range.containsPosition(position);
+                });
+                let linkMeta = new Array();
+                if (link) {
+                    const name = link.fullDefinition.split('/').pop();
+                    linkMeta = [
+                        { value: `#### **&rightarrow; ${name}**` },
+                        { value: `XPath: _${link.definition}_` },
+                    ];
+                    if (link.isPolymorphic) {
+                        linkMeta.push({ value: '`Polymorphic Pointer`' });
+                    }
+                    if (link.jsonPath) {
+                        linkMeta.push({ value: `JSON Pointer: __${link.jsonPath}__` });
+                    }
+                    const uri = link.fullDefinition.split("#/");
+                    if (uri.length == 2) {
+                        if (uri[0] !== '/')
+                            linkMeta.push({ value: `File: **${uri[0]}**` });
+                    }
+                    else {
+                        linkMeta.push({ value: `Location: **${link.fullDefinition}**` });
+                    }
+                    if (link.targetLine && link.targetColumn) {
+                        linkMeta.push({ value: `Target: Line [**${link.targetLine}]**, Column **[${link.targetColumn}]**` });
+                    }
+                }
+                if (link) {
+                    return {
+                        range: new monaco.Range(link.line, link.startColumn, link.line, link.endColumn),
+                        contents: linkMeta,
+                    };
+                }
+                return null;
+            },
         });
+        this.linkDecorations = this.editor.createDecorationsCollection();
         this.model.onDidChangeContent(() => {
             if (!this.firstboot) {
                 this.dispatchEvent(new CustomEvent(EditorUpdated, {
@@ -178,21 +420,100 @@ let SpecEditor = class SpecEditor extends LitElement {
                 }
             }));
         });
+        // handle link clicks
+        //this.editor.onMouseUp((e) => {
+        // const position = e.target.position;
+        // if (position && this.editor) {
+        //     const model = this.editor.getModel();
+        //     if (model) {
+        //         const range = new monaco.Range(
+        //             position.lineNumber,
+        //             position.column,
+        //             position.lineNumber,
+        //             position.column
+        //         );
+        //         const decorations = model.getDecorationsInRange(range);
+        //         if (decorations) {
+        //             for (const decoration of decorations) {
+        //                 const linkTarget = this.decorationIdToLinkTarget.get(decoration.id);
+        //                 if (linkTarget) {
+        //                     this.dispatchEvent(new CustomEvent<DocumentReference>(DocumentReferenceClicked, {
+        //                         bubbles: true,
+        //                         composed: true,
+        //                         detail: {
+        //                             jsonPath: linkTarget
+        //                         }
+        //                     }))
+        //                     break; // Stop after handling the first matching link
+        //                 }
+        //             }
+        //         }
+        //     }
+        // }
+        //})
         window
             .matchMedia("(prefers-color-scheme: dark)")
             .addEventListener("change", () => {
             monaco.editor.setTheme(this.getTheme());
         });
     }
-};
-SpecEditor.styles = css `
-        main {
-            width: 100%;
-            height: 100%;
-            position: relative;
-            word-spacing: normal;
+    open(uri) {
+        if (uri.scheme == 'doctor') {
+            this.dispatchEvent(new CustomEvent(DocumentReferenceClicked, {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    jsonPath: uri.authority
+                }
+            }));
         }
-    `;
+        return Promise.resolve(true);
+    }
+    applyLinkDecorations() {
+        if (this.editor) {
+            this.linkDecorations.clear();
+            const newDecorations = this.links.map((link) => {
+                let inlineClassName = 'ref';
+                let glyphClassName = 'ref-margin';
+                let hoverMessage = { value: "Reference (_JSON Pointer_) to: **" + link.fullDefinition + "**" };
+                let minimap = editorGreenDim;
+                if (link.isPolymorphic) {
+                    inlineClassName = 'ref-poly';
+                    glyphClassName = 'ref-poly-margin';
+                    hoverMessage = { value: "Polymorphic Reference (_JSON Pointer_) to: **" + link.fullDefinition + "**" };
+                    minimap = editorBrown;
+                }
+                return {
+                    range: new monaco.Range(link.line, link.startColumn, link.line, link.endColumn),
+                    options: {
+                        inlineClassName: inlineClassName,
+                        glyphMarginClassName: glyphClassName,
+                        glyphMarginHoverMessage: hoverMessage,
+                        minimap: { color: minimap, position: monaco.editor.MinimapPosition.Inline }
+                    },
+                };
+            });
+            const decorationIds = this.linkDecorations.set(newDecorations);
+            this.decorationIdToLinkTarget.clear();
+            decorationIds.forEach((decorationId, index) => {
+                const target = this.links[index].jsonPath + '||' + this.links[index].targetLine + ':' + this.links[index].targetColumn + "||" + this.links[index].fullDefinition + "||" + this.links[index].rolodexIdHash;
+                this.decorationIdToLinkTarget.set(decorationId, target);
+            });
+        }
+    }
+    provideLinks(_model, _token) {
+        const links = this.links.map((link) => {
+            const range = new monaco.Range(link.line, link.startColumn, link.line, link.endColumn);
+            const linkString = link.jsonPath + '||' + link.targetLine + ':' + link.targetColumn + "||" + link.fullDefinition + "||" + link.rolodexIdHash;
+            return {
+                range: range,
+                url: monaco.Uri.parse(`doctor://${encodeURIComponent(linkString)}`),
+            };
+        });
+        return { links };
+    }
+};
+SpecEditor.styles = [editorCss];
 __decorate([
     property({ type: Boolean, attribute: "readonly" })
 ], SpecEditor.prototype, "readOnly", void 0);
@@ -205,6 +526,21 @@ __decorate([
 __decorate([
     property()
 ], SpecEditor.prototype, "code", void 0);
+__decorate([
+    state()
+], SpecEditor.prototype, "links", void 0);
+__decorate([
+    property()
+], SpecEditor.prototype, "minimapVisible", void 0);
+__decorate([
+    property()
+], SpecEditor.prototype, "currentPath", void 0);
+__decorate([
+    property()
+], SpecEditor.prototype, "id", void 0);
+__decorate([
+    state()
+], SpecEditor.prototype, "showBreadcrumb", void 0);
 SpecEditor = __decorate([
     customElement("pb33f-editor")
 ], SpecEditor);

package/dist/components/manage-ruleset/manage-ruleset.css.js

@@ -17,6 +17,11 @@ export default css `
         text-align: right;
         padding-top: 2px; 
     }
+
+    .pulse {
+        color: var(--warn-color);
+        animation: pulse-animation 1.5s infinite;
+    }
     
     sl-icon {
         font-size: 1.2rem;

package/dist/components/manage-ruleset/manage-ruleset.js

@@ -309,8 +309,10 @@ let ManageRuleset = class ManageRuleset extends LitElement {
             });
         }
         else {
-            this.switchRuleset(button.value);
-            this.requestUpdate();
+            if (this.currentRuleset !== button.value) {
+                this.switchRuleset(button.value);
+                this.requestUpdate();
+            }
         }
     }
     cancelCustomOverride() {
@@ -593,14 +595,14 @@ let ManageRuleset = class ManageRuleset extends LitElement {
             <div class="ruleset">
                 <div class="ruleset-header">
                     <sl-radio-group label="Select a ruleset" name="ruleset" value="default">
-                        <sl-radio-button value=${defaultRuleset} @sl-focus="${this.changeActiveRuleset}">Default
+                        <sl-radio-button value=${defaultRuleset} @click="${this.changeActiveRuleset}">Default
                         </sl-radio-button>
-                        <sl-radio-button value=${owaspRuleset} @sl-focus="${this.changeActiveRuleset}">OWASP
+                        <sl-radio-button value=${owaspRuleset} @click="${this.changeActiveRuleset}">OWASP
                         </sl-radio-button>
-                        <sl-radio-button value=${allRuleset} @sl-focus="${this.changeActiveRuleset}">All
+                        <sl-radio-button value=${allRuleset} @click="${this.changeActiveRuleset}">All
                         </sl-radio-button>
                         <sl-radio-button value=${customRuleset} disabled id="custom-ruleset"
-                                         @sl-focus="${this.changeActiveRuleset}">Custom
+                                         @click="${this.changeActiveRuleset}">Custom
                         </sl-radio-button>
                     </sl-radio-group>
                     <div class="ruleset-controls">

package/dist/components/model-icon/model-icon.d.ts

@@ -30,5 +30,12 @@ export declare class ModelIconComponent extends LitElement {
     constructor();
     getNodeTypeFromIcon(icon: string): NodeType;
     static getIconForType(nodeType: NodeType): string;
+    openapiIcon(): string;
+    goIcon(): string;
+    typescriptIcon(): string;
+    csIcon(): string;
+    cIcon(): string;
+    cppIcon(): string;
+    zigLogo(): string;
     render(): import("lit-html").TemplateResult<1>;
 }