@pb33f/cowboy-components 0.7.17 → 0.8.0

package/dist/components/details-drawer/handlers/example-handler.js

@@ -0,0 +1,146 @@
+// Copyright 2023-2025 Princess Beef Heavy Industries, LLC / Dave Shanley
+// https://pb33f.io
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import Prism from 'prismjs';
+import 'prismjs/components/prism-yaml';
+import 'prismjs/components/prism-json';
+import '@shoelace-style/shoelace/dist/components/copy-button/copy-button.js';
+import '@shoelace-style/shoelace/dist/components/tab-group/tab-group.js';
+import '@shoelace-style/shoelace/dist/components/tab/tab.js';
+import '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js';
+import '../../model-renderer/description.js';
+import { DrawerContentType } from '../../../model/drawer-content.js';
+import { ModelService } from '../../../services/model-service.js';
+import { isExample } from '../../../model/example.js';
+import { LRUCache } from '../../../utils/lru-cache.js';
+export class ExampleHandler {
+    constructor() {
+        this.supportedTypes = [DrawerContentType.RENDERED_EXAMPLE];
+        this.yamlCache = new LRUCache(50);
+    }
+    canHandle(event) {
+        return event.type === DrawerContentType.RENDERED_EXAMPLE;
+    }
+    async render(event) {
+        const exampleEvent = event;
+        if (!exampleEvent.json) {
+            return html `
+                <div class="no-example">
+                    <sl-icon name="code-slash"></sl-icon>
+                    <p>No example available</p>
+                </div>
+            `;
+        }
+        // Parse and process the example
+        let jsonStr = exampleEvent.json;
+        let yamlStr = exampleEvent.yaml || '';
+        let description = html ``;
+        let summary = html ``;
+        try {
+            const parsed = JSON.parse(jsonStr);
+            if (isExample(parsed)) {
+                const exp = parsed;
+                if (exp.description) {
+                    description = html `
+                        <div class="example-data">
+                            <pb33f-rendered-description-node>
+                                <h4>Description</h4>
+                                ${exp.description}
+                            </pb33f-rendered-description-node>
+                        </div>
+                    `;
+                }
+                if (exp.summary) {
+                    summary = html `
+                        <div class="example-data">
+                            <pb33f-rendered-description-node>
+                                <h4>Summary</h4>
+                                ${exp.summary}
+                            </pb33f-rendered-description-node>
+                        </div>
+                    `;
+                }
+                // Extract the actual value for display
+                jsonStr = JSON.stringify(exp.value || exp, null, 2);
+            }
+            // Convert to YAML if not provided
+            if (!yamlStr) {
+                const cacheKey = jsonStr;
+                if (this.yamlCache.has(cacheKey)) {
+                    yamlStr = this.yamlCache.get(cacheKey);
+                }
+                else {
+                    try {
+                        yamlStr = await ModelService.convertJSONToYAML(jsonStr);
+                        this.yamlCache.set(cacheKey, yamlStr);
+                    }
+                    catch (e) {
+                        console.warn('Unable to convert JSON to YAML:', e);
+                        yamlStr = '# Unable to convert to YAML';
+                    }
+                }
+            }
+        }
+        catch (e) {
+            console.error('Error parsing example JSON:', e);
+            return html `
+                <div class="error-parsing">
+                    <sl-icon name="exclamation-triangle"></sl-icon>
+                    <p>Error parsing example data</p>
+                </div>
+            `;
+        }
+        return html `
+            <div class="example-container">
+                ${summary}
+                ${description}
+
+                <sl-tab-group class="tab-group" @sl-tab-show="${this.handleTabShow}">
+                    <sl-tab slot="nav" panel="json" class="tab" active>
+                        JSON
+                    </sl-tab>
+                    <sl-tab slot="nav" panel="yaml" class="tab">
+                        YAML
+                    </sl-tab>
+
+                    <sl-tab-panel name="json" class="tab-panel" active>
+                        <div class="code-container">
+                            <sl-copy-button
+                                value="${jsonStr}"
+                                class="copy-button"
+                                copy-label="Copy example to clipboard"
+                            ></sl-copy-button>
+                            <pre class="chroma">${unsafeHTML(Prism.highlight(jsonStr, Prism.languages['json'], 'json'))}</pre>
+                        </div>
+                    </sl-tab-panel>
+
+                    <sl-tab-panel name="yaml" class="tab-panel">
+                        <div class="code-container">
+                            <sl-copy-button
+                                value="${yamlStr}"
+                                class="copy-button"
+                                copy-label="Copy example to clipboard"
+                            ></sl-copy-button>
+                            <pre class="chroma yaml">${unsafeHTML(Prism.highlight(yamlStr, Prism.languages['yaml'], 'yaml'))}</pre>
+                        </div>
+                    </sl-tab-panel>
+                </sl-tab-group>
+            </div>
+        `;
+    }
+    getTitle(event) {
+        const exampleEvent = event;
+        if (exampleEvent.title) {
+            return `Example: ${exampleEvent.title}`;
+        }
+        return 'Example';
+    }
+    handleTabShow(_e) {
+        // Tab switch handler if needed
+    }
+    cleanup() {
+        // Clear cache on cleanup
+        this.yamlCache.clear();
+    }
+}

package/dist/components/details-drawer/handlers/howto-handler.d.ts

@@ -0,0 +1,11 @@
+import { TemplateResult } from 'lit';
+import { DrawerContentHandler, DrawerContentType, DrawerEvent } from '../../../model/drawer-content.js';
+/**
+ * Handler for how-to-fix content
+ */
+export declare class HowToFixHandler implements DrawerContentHandler {
+    readonly supportedTypes: DrawerContentType[];
+    canHandle(event: DrawerEvent): boolean;
+    render(event: DrawerEvent): TemplateResult;
+    getTitle(event: DrawerEvent): string;
+}

package/dist/components/details-drawer/handlers/howto-handler.js

@@ -0,0 +1,36 @@
+// Copyright 2023-2025 Princess Beef Heavy Industries, LLC / Dave Shanley
+// https://pb33f.io
+import { html } from 'lit';
+import { DrawerContentType } from '../../../model/drawer-content.js';
+/**
+ * Handler for how-to-fix content
+ */
+export class HowToFixHandler {
+    constructor() {
+        this.supportedTypes = [DrawerContentType.HOW_TO_FIX];
+    }
+    canHandle(event) {
+        return event.type === DrawerContentType.HOW_TO_FIX;
+    }
+    render(event) {
+        const howToEvent = event;
+        if (!howToEvent.body) {
+            return html `
+                <div class="no-howto">
+                    <sl-icon name="question-circle"></sl-icon>
+                    <p>No fix instructions available for this rule</p>
+                </div>
+            `;
+        }
+        return html `
+            <div class="howto-content">
+                <h3>How to fix this problem</h3>
+                ${howToEvent.body}
+            </div>
+        `;
+    }
+    getTitle(event) {
+        const howToEvent = event;
+        return howToEvent.ruleId ? `Rule: ${howToEvent.ruleId}` : 'How to Fix';
+    }
+}

package/dist/components/details-drawer/handlers/markdown-handler.d.ts

@@ -0,0 +1,12 @@
+import { TemplateResult } from 'lit';
+import { DrawerContentHandler, DrawerContentType, DrawerEvent } from '../../../model/drawer-content.js';
+/**
+ * Handler for markdown content
+ */
+export declare class MarkdownHandler implements DrawerContentHandler {
+    readonly supportedTypes: DrawerContentType[];
+    constructor();
+    canHandle(event: DrawerEvent): boolean;
+    render(event: DrawerEvent): Promise<TemplateResult>;
+    getTitle(event: DrawerEvent): string;
+}

package/dist/components/details-drawer/handlers/markdown-handler.js

@@ -0,0 +1,54 @@
+// Copyright 2023-2025 Princess Beef Heavy Industries, LLC / Dave Shanley
+// https://pb33f.io
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { marked } from 'marked';
+import { DrawerContentType } from '../../../model/drawer-content.js';
+/**
+ * Handler for markdown content
+ */
+export class MarkdownHandler {
+    constructor() {
+        this.supportedTypes = [DrawerContentType.MARKDOWN];
+        // Configure marked options if needed
+        marked.setOptions({
+            gfm: true,
+            breaks: true
+        });
+    }
+    canHandle(event) {
+        return event.type === DrawerContentType.MARKDOWN;
+    }
+    async render(event) {
+        const markdownEvent = event;
+        if (!markdownEvent.body) {
+            return html `
+                <div class="no-markdown">
+                    <sl-icon name="file-text"></sl-icon>
+                    <p>No content available</p>
+                </div>
+            `;
+        }
+        try {
+            const renderedHtml = await marked.parse(markdownEvent.body);
+            return html `
+                <div class="markdown-content">
+                    ${unsafeHTML(renderedHtml)}
+                </div>
+            `;
+        }
+        catch (e) {
+            console.error('Error rendering markdown:', e);
+            return html `
+                <div class="error-rendering">
+                    <sl-icon name="exclamation-triangle"></sl-icon>
+                    <p>Error rendering markdown content</p>
+                </div>
+            `;
+        }
+    }
+    getTitle(event) {
+        const markdownEvent = event;
+        return markdownEvent.title || 'Information';
+    }
+}

package/dist/components/editor/editor-breadcrumb.css.js

@@ -5,7 +5,7 @@ export default css `
         position: absolute;
         background-color: var(--background-color-withopacity);
         width: 100%;    
-        bottom: 10px;
+        bottom: 6px;
         font-size: 0.8rem;
         z-index: 9;
     }

package/dist/components/editor/editor.css.js

@@ -25,12 +25,20 @@ export default css `
             text-shadow: 0 0 20px var(--terminal-text);
         }
 
+        html[theme="light"] .ref:hover {
+            text-shadow: none;
+        }
+
         .ref-poly:hover {
             color: var(--warn-color);
             font-family: var(--font-stack-bold), sans-serif;
             text-shadow: 0 0 20px var(--warn-color);
         }
 
+        html[theme="light"] .ref-poly:hover {
+            text-shadow: none;
+        }
+
         .ref:active, .ref-poly:active {
             color: var(--error-color);
             text-decoration-color: var(--error-color) !important;
@@ -59,4 +67,38 @@ export default css `
             top: 0;
             left: 0;
         }
+    
+        .chips {
+            font-size: 25px;
+        }
+        
+        .mode-switcher {
+            display: flex; align-items: center;
+            padding: 5px 10px;
+            background: var(--background-color);
+            font-family: var(--font-stack), sans-serif;
+        }
+
+        sl-switch::part(label) {
+            font-family: var(--font-stack), sans-serif;
+        }
+
+        .placeholder-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--font-color-sub2);
+            font-family: var(--font-stack), sans-serif;
+            font-size: 0.9rem;
+            pointer-events: auto;
+            cursor: text;
+            background: transparent;
+            z-index: 10;
+        }
+
 `;

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

@@ -6,17 +6,27 @@ export declare class SpecEditor extends LitElement {
     private container;
     private monacoYaml;
     private currentVersion;
-    editor?: monaco.editor.IStandaloneCodeEditor;
+    editor?: monaco.editor.IStandaloneCodeEditor | monaco.editor.IStandaloneDiffEditor;
+    diffEditor?: monaco.editor.IStandaloneDiffEditor;
     model?: monaco.editor.ITextModel;
+    originalModel?: monaco.editor.ITextModel;
+    modifiedModel?: monaco.editor.ITextModel;
     readOnly?: boolean;
+    diffMode?: boolean;
+    diffValue?: string;
+    renderSideBySide: boolean;
     theme?: string;
     language?: string;
     code?: string;
     minimapVisible: boolean;
     currentPath: string;
     id: string;
+    placeholder: string;
     showBreadcrumb: boolean;
+    private showPlaceholder;
     private isActive;
+    private isLightTheme;
+    private pendingValue;
     private linkDecorations;
     private decorationIdToLinkTarget;
     breadcumb: SpecEditorBreadcrumb;
@@ -26,26 +36,42 @@ export declare class SpecEditor extends LitElement {
     static styles: import("lit").CSSResult[];
     constructor(id?: string);
     protected createRenderRoot(): HTMLElement | DocumentFragment;
+    disconnectedCallback(): void;
     revive(): void;
     dead(): void;
+    private handleThemeChange;
     setCurrentPath(path: string): void;
     render(): import("lit-html").TemplateResult<1>;
-    private getFile;
+    private focusEditor;
+    private updatePlaceholderVisibility;
+    private handleDiffModeToggle;
     private getCode;
     private getTheme;
     switchLanguage(language: string): void;
     private isDark;
     setValue(value: string, firstBoot?: boolean): void;
+    setDiffValue(value: string): void;
     getValue(): string;
+    setPosition(position: {
+        lineNumber: number;
+        column: number;
+    }): void;
+    revealLineInCenter(lineNumber: number): void;
+    revealLineInCenterOriginal(lineNumber: number): void;
+    setPositionOriginal(position: {
+        lineNumber: number;
+        column: number;
+    }): void;
+    setReadOnly(readOnly: boolean): void;
     updated(changed: any): void;
     clearDecorations(): void;
     clearAllMarkers(): void;
+    disposeModel(): void;
     setMarkers(markers: monaco.editor.IMarkerData[]): void;
     toggleMinimap(): void;
     onDocChange(): void;
     firstUpdated(): void;
     open(uri: monaco.Uri): Promise<boolean>;
     applyLinkDecorations(): void;
-    linkRun: boolean;
     provideLinks(_model: monaco.editor.ITextModel, _token: monaco.CancellationToken): monaco.languages.ProviderResult<monaco.languages.ILinksList>;
 }