@pb33f/cowboy-components 0.13.0 → 0.14.0

package/dist/components/visualizer/nodes/graph-node.js

@@ -120,10 +120,15 @@ let GraphNodeComponent = class GraphNodeComponent extends LitElement {
         return null;
     }
     renderUpArrow() {
-        return html `${this.renderExtensions()}
-        ${this.renderArrayType()}
-        ${this.renderVacuumResults()}
-        ${this.renderPovButton()}`;
+        return this.renderUnderNodeAnnotations();
+    }
+    renderUnderNodeAnnotations(results = this.countResults(), changeCounts = this.changeCounts) {
+        return html `
+            ${this.renderArrayType()}
+            ${this.renderChanges(changeCounts)}
+            ${this.renderVacuumResults(results)}
+            ${this.renderPovButton()}
+            ${this.renderLoadMoreControl()}`;
     }
     renderActiveArrow() {
         if (!this.active)
@@ -133,12 +138,17 @@ let GraphNodeComponent = class GraphNodeComponent extends LitElement {
     countResults() {
         return countViolationsBySeverity(this.node, this.violationMap);
     }
-    renderVacuumResults() {
+    hasVacuumResults(results = this.countResults()) {
+        return results.errors + results.warnings + results.info > 0;
+    }
+    renderVacuumResults(results = this.countResults()) {
         if (this.node?.violationIds && this.node.violationIds.length > 0 && this.violationMap) {
             let errors = html ``;
             let warnings = html ``;
             let info = html ``;
-            let results = this.countResults();
+            if (results.errors + results.warnings + results.info <= 0) {
+                return html ``;
+            }
             if (results.errors > 0) {
                 errors = html `
                     <pb33f-model-icon color="${IconColor.error}" size="${IconSize.small}"
@@ -188,7 +198,7 @@ let GraphNodeComponent = class GraphNodeComponent extends LitElement {
     isSingleLineNode() {
         return this.height <= 30;
     }
-    renderClasses(defaultString = 'rendered-element') {
+    renderClasses(defaultString = 'rendered-element', results = this.countResults(), changeCounts = this.changeCounts) {
         let classes = [defaultString];
         if (this.active)
             classes.push('active');
@@ -198,20 +208,26 @@ let GraphNodeComponent = class GraphNodeComponent extends LitElement {
             classes.push('ref');
         if (this.node.dependency && this.dim)
             classes.push('dependent-node');
-        const cat = this.changeCategory;
+        if (this.hasVacuumResults(results))
+            classes.push('has-vacuum-results');
+        const cat = changeCounts.category;
         if (cat !== ChangeCategory.NONE && cat !== ChangeCategory.MODIFIED) {
             classes.push(`change-${cat}`);
         }
         return classes.join(' ');
     }
     renderNodeWrapper(content) {
+        const results = this.countResults();
+        const changeCounts = this.changeCounts;
         return html `
-            <div class="${this.renderClasses()}"
+            <div class="${this.renderClasses('rendered-element', results, changeCounts)}"
                  style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
-                ${content}
-                ${this.renderChanges()}
-                ${this.renderUpArrow()}
+                <div class="node-content">
+                    ${content}
+                    ${this.renderExtensions()}
+                </div>
             </div>
+            ${this.renderUnderNodeAnnotations(results, changeCounts)}
             ${this.renderActiveArrow()}
         `;
     }
@@ -231,19 +247,24 @@ let GraphNodeComponent = class GraphNodeComponent extends LitElement {
         }
         return blocks;
     }
-    renderChanges() {
+    renderChanges(changeCounts = this.changeCounts) {
         if (!this.node.timeline) {
             return html ``;
         }
-        const { breaking, modifications: mods, additions: adds, removals } = this.changeCounts;
+        const { breaking, modifications: mods, additions: adds, removals } = changeCounts;
         const blocks = this.renderBadges(breaking, mods, adds, removals);
+        if (blocks.length === 0) {
+            return html ``;
+        }
         return html `
-            <div class="row-node change-div">
+            <div class="node-annotation change-div">
                 ${blocks}
             </div>
         `;
     }
     render() {
+        const results = this.countResults();
+        const changeCounts = this.changeCounts;
         let arrayValues = html ``;
         if (this.node.isArray) {
             arrayValues = html `
@@ -258,20 +279,21 @@ let GraphNodeComponent = class GraphNodeComponent extends LitElement {
                 </sl-badge>`;
         }
         return html `
-            <div class="${this.renderClasses("node")}"
+            <div class="${this.renderClasses('node', results, changeCounts)}"
                  style="height: ${this.height}px; width: ${this.width - 2}px" @click="${this.clicked}">
 
-                <div class="row-node header-node">
-                    <pb33f-model-icon color="${IconColor.secondary}" size="${IconSize.small}"
-                                      icon="${this.node.type}"></pb33f-model-icon>
-                    <span class="header-text">${this.label}</span>
-                    ${arrayValues}
-                    ${this.renderDependentControl()}
+                <div class="node-content">
+                    <div class="row-node header-node">
+                        <pb33f-model-icon color="${IconColor.secondary}" size="${IconSize.small}"
+                                          icon="${this.node.type}"></pb33f-model-icon>
+                        <span class="header-text">${this.label}</span>
+                        ${arrayValues}
+                        ${this.renderDependentControl()}
+                    </div>
+                    ${this.renderExtensions()}
                 </div>
-                ${this.renderChanges()}
-                ${this.renderUpArrow()}
-                ${this.renderLoadMoreControl()}
             </div>
+            ${this.renderUnderNodeAnnotations(results, changeCounts)}
             ${this.renderActiveArrow()}
         `;
     }

package/dist/components/visualizer/nodes/schema.d.ts

@@ -5,8 +5,15 @@ import { Node } from "../../../model/graph";
 export declare class SchemaNodeComponent extends GraphNodeComponent {
     static styles: import("lit").CSSResult[];
     schema: Schema;
+    private cachedExampleCoverageSchema?;
+    private cachedExampleCoverage?;
     embedded: boolean;
     constructor(nodeMap: Map<string, Node>);
+    private countExamples;
+    private schemaExampleCount;
+    private schemaDoesNotNeedExamples;
+    private schemasHaveExampleCoverage;
+    private getExampleCoverage;
     renderNode(): TemplateResult[];
     render(): TemplateResult<1>;
 }

package/dist/components/visualizer/nodes/schema.js

@@ -17,6 +17,73 @@ let SchemaNodeComponent = class SchemaNodeComponent extends GraphNodeComponent {
         super(nodeMap);
         this.embedded = false;
     }
+    countExamples(examples) {
+        if (!examples) {
+            return 0;
+        }
+        if (Array.isArray(examples)) {
+            return examples.length;
+        }
+        if (typeof examples === 'object') {
+            return Object.keys(examples).length;
+        }
+        return 1;
+    }
+    schemaExampleCount(schema) {
+        if (!schema) {
+            return 0;
+        }
+        let count = this.countExamples(schema.examples);
+        if (schema.example !== undefined) {
+            count++;
+        }
+        return count;
+    }
+    schemaDoesNotNeedExamples(schema) {
+        const hasEnum = schema.enum && schema.enum.length > 0;
+        const isBoolean = schema.type === 'boolean' ||
+            (Array.isArray(schema.type) && schema.type.length === 1 && schema.type[0] === 'boolean');
+        const hasDefault = schema.default !== undefined;
+        return Boolean(hasEnum || isBoolean || hasDefault);
+    }
+    schemasHaveExampleCoverage(values) {
+        if (values.length === 0) {
+            return false;
+        }
+        return values.every(value => {
+            if (isHasRef(value)) {
+                return false;
+            }
+            const schema = value;
+            return this.schemaDoesNotNeedExamples(schema) || this.schemaExampleCount(schema) > 0;
+        });
+    }
+    getExampleCoverage(schema) {
+        if (!schema) {
+            return {
+                schemaExampleCount: 0,
+                allPropertiesHaveExamples: false,
+                allPolyChildrenHaveExamples: false
+            };
+        }
+        if (this.cachedExampleCoverageSchema === schema && this.cachedExampleCoverage) {
+            return this.cachedExampleCoverage;
+        }
+        const props = schema.properties ? Object.values(schema.properties) : [];
+        const polyChildren = [
+            ...(schema.anyOf || []),
+            ...(schema.oneOf || []),
+            ...(schema.allOf || [])
+        ];
+        const coverage = {
+            schemaExampleCount: this.schemaExampleCount(schema),
+            allPropertiesHaveExamples: this.schemasHaveExampleCoverage(props),
+            allPolyChildrenHaveExamples: this.schemasHaveExampleCoverage(polyChildren)
+        };
+        this.cachedExampleCoverageSchema = schema;
+        this.cachedExampleCoverage = coverage;
+        return coverage;
+    }
     renderNode() {
         let label = 'Schema';
         if (this.label) {
@@ -95,64 +162,16 @@ let SchemaNodeComponent = class SchemaNodeComponent extends GraphNodeComponent {
         if (this.nodeMap && this.node && this.nodeMap.has(this.node.parentId)) {
             parent = this.nodeMap.get(this.node.parentId);
         }
-        let parentExamples = false;
-        let count = 0;
-        if (parent && (parent.instance?.examples || parent.instance?.example)) {
-            parentExamples = true;
-            count++;
-        }
-        // Check if all immediate properties have examples (or don't need them)
-        let allPropertiesHaveExamples = false;
-        if (this.schema?.properties) {
-            const props = Object.values(this.schema.properties);
-            if (props.length > 0) {
-                allPropertiesHaveExamples = props.every(prop => {
-                    if (isHasRef(prop)) {
-                        return false;
-                    }
-                    const schemaProp = prop;
-                    // Properties with enums, booleans, or defaults don't need examples
-                    const hasEnum = schemaProp.enum && schemaProp.enum.length > 0;
-                    const isBoolean = schemaProp.type === 'boolean';
-                    const hasDefault = schemaProp.default !== undefined;
-                    if (hasEnum || isBoolean || hasDefault) {
-                        return true;
-                    }
-                    return schemaProp.example !== undefined || schemaProp.examples !== undefined;
-                });
-            }
+        let parentExampleCount = 0;
+        if (parent && parent.instance) {
+            parentExampleCount = this.schemaExampleCount(parent.instance);
         }
-        // Check if all polymorphic children have examples (or don't need them)
-        let allPolyChildrenHaveExamples = false;
-        const polyChildren = [
-            ...(this.schema?.anyOf || []),
-            ...(this.schema?.oneOf || []),
-            ...(this.schema?.allOf || [])
-        ];
-        if (polyChildren.length > 0) {
-            allPolyChildrenHaveExamples = polyChildren.every(child => {
-                if (isHasRef(child)) {
-                    return false;
-                }
-                const schemaChild = child;
-                // Children with enums, booleans, or defaults don't need examples
-                const hasEnum = schemaChild.enum && schemaChild.enum.length > 0;
-                const isBoolean = schemaChild.type === 'boolean';
-                const hasDefault = schemaChild.default !== undefined;
-                if (hasEnum || isBoolean || hasDefault) {
-                    return true;
-                }
-                return schemaChild.example !== undefined || schemaChild.examples !== undefined;
-            });
-        }
-        const hasExamples = this.schema?.examples || this.schema?.example || parentExamples || allPropertiesHaveExamples || allPolyChildrenHaveExamples;
-        if (!this.hideExamples && hasExamples) {
-            if (this.node?.instance.examples) {
-                count = Object.keys(this.node.instance.examples).length;
-            }
-            if (count <= 0 && this.node?.instance?.example) {
-                count++;
-            }
+        const { schemaExampleCount, allPropertiesHaveExamples, allPolyChildrenHaveExamples } = this.getExampleCoverage(this.schema);
+        const childExamplesCoverSchema = allPropertiesHaveExamples || allPolyChildrenHaveExamples;
+        const hasRenderableExamples = schemaExampleCount > 0 || (parentExampleCount > 0 && !childExamplesCoverSchema);
+        const exampleCoverageSatisfied = hasRenderableExamples || childExamplesCoverSchema;
+        if (!this.hideExamples && hasRenderableExamples) {
+            const count = schemaExampleCount > 0 ? schemaExampleCount : parentExampleCount;
             values.push(html `
                 <div class="row"><span class="chevron">&nbsp;&gt;</span>
                     <pb33f-model-icon style="padding-left: 3px;" color="${IconColor.primary}" size="${IconSize.small}" icon="${NodeType.EXAMPLE}"></pb33f-model-icon>
@@ -160,7 +179,7 @@ let SchemaNodeComponent = class SchemaNodeComponent extends GraphNodeComponent {
                     <sl-badge variant="primary" class="count">${count}</sl-badge>
                 </div>`);
         }
-        else if (!this.hideExamples) {
+        else if (!this.hideExamples && !exampleCoverageSatisfied) {
             values.push(html `
                 <div class="row">
                     <pb33f-model-icon style="padding-left: 3px;" color="${IconColor.warning}" size="${IconSize.small}" icon="${NodeType.NO_EXAMPLE}"></pb33f-model-icon>
@@ -172,12 +191,15 @@ let SchemaNodeComponent = class SchemaNodeComponent extends GraphNodeComponent {
     render() {
         this.schema = this.nodeInstance;
         if (this.embedded) {
+            const results = this.countResults();
+            const changeCounts = this.changeCounts;
             return html `
             <div class="${(this.isRef && this.outputs.length == 1) ? 'ref' : ''}"
                  style="height: ${this.height}px; width: ${this.width}px" @click="${this.clicked}">
                 ${this.renderNode()}
-                ${this.renderUpArrow()}
+                ${this.renderExtensions()}
             </div>
+            ${this.renderUnderNodeAnnotations(results, changeCounts)}
             ${this.renderActiveArrow()}
         `;
         }

package/dist/components/visualizer/shared.css.js

@@ -96,7 +96,7 @@ export default css `
 
     .pov-icon {
         position: absolute;
-        bottom: -8px;
+        bottom: -31px;
         left: 2px;
         font-size: 16px;
         color: var(--primary-color);
@@ -107,6 +107,7 @@ export default css `
     }
 
     .rendered-element {
+        position: relative;
         overflow: hidden;
         border: 1px solid var(--change-border-color, var(--primary-color));
     }
@@ -147,8 +148,14 @@ export default css `
     }
 
     .row-node {
-        padding-top: 2px;
         display: flex;
+        align-items: center;
+        min-height: 25px;
+    }
+
+    .node-content {
+        width: 100%;
+        height: 100%;
     }
 
     .load-more-btn {
@@ -173,7 +180,7 @@ export default css `
     }
 
     .single-line .pov-icon {
-        bottom: -35px;
+        bottom: -31px;
     }
 
     .single-line .vacuum-results {
@@ -185,14 +192,20 @@ export default css `
        font-family: var(--font-stack), monospace;
        text-align: center;
        width: 100%;
+       gap: 4px;
    }
 
     .header-node > pb33f-model-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 30px;
         width: 30px;
     }
     
     .header-text {
-        flex-grow: 3;
+        flex: 1 1 auto;
+        min-width: 0;
         text-align: left;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -232,6 +245,16 @@ export default css `
         margin-top: 2px;
         font-family: var(--font-stack-bold), monospace;
     } 
+    .header-node .array-count,
+    .header-node .dependent-icon,
+    .header-node .count {
+        flex: 0 0 auto;
+        float: none;
+        margin-top: 0;
+    }
+    .header-node .dependent-icon::part(base) {
+        padding: 0 4px 0 0;
+    }
     .count::part(base) {
         font-family: var(--font-stack-bold), monospace;
         color: var(--primary-color);
@@ -279,18 +302,33 @@ export default css `
         background-color: var(--secondary-color-very-lowalpha);
     }
 
-    .active > .vacuum-results  {
-        bottom: 0;
-    }
-
     .slash {
         color: var(--primary-color);
     }
 
+    .node-annotation {
+        position: absolute;
+        bottom: -24px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        white-space: nowrap;
+    }
+
+    .change-div {
+        left: 0;
+    }
+
     .vacuum-results {
         position: absolute;
-        right: 0;
-        bottom: 5px;
+        right: 6px;
+        bottom: -24px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 3px;
+        height: 20px;
+        white-space: nowrap;
     }
     
     .embedded-schema {

package/dist/components/visualizer/viewport-position.d.ts

@@ -0,0 +1,28 @@
+export type LayoutDirection = 'UP' | 'DOWN' | 'LEFT' | 'RIGHT';
+export interface ViewportTargetNode {
+    id?: string;
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+}
+export interface ViewportBox {
+    width: number;
+    height: number;
+}
+export declare function rootExpansionAnchor(direction: LayoutDirection): {
+    x: number;
+    y: number;
+};
+export declare function calculateRootViewportTarget(direction: LayoutDirection, rootNode: ViewportTargetNode, viewBox: ViewportBox): {
+    x: number;
+    y: number;
+};
+export declare function calculateCenteredNodeViewportTarget(node: ViewportTargetNode, viewBox: ViewportBox): {
+    x: number;
+    y: number;
+};
+export declare function calculateNodeViewportTarget(direction: LayoutDirection, node: ViewportTargetNode, viewBox: ViewportBox): {
+    x: number;
+    y: number;
+};

package/dist/components/visualizer/viewport-position.js

@@ -0,0 +1,38 @@
+const EXPANSION_ANCHOR = 0.22;
+const CENTER_ANCHOR = 0.5;
+export function rootExpansionAnchor(direction) {
+    switch (direction) {
+        case 'LEFT':
+            return { x: 1 - EXPANSION_ANCHOR, y: CENTER_ANCHOR };
+        case 'UP':
+            return { x: CENTER_ANCHOR, y: 1 - EXPANSION_ANCHOR };
+        case 'DOWN':
+            return { x: CENTER_ANCHOR, y: EXPANSION_ANCHOR };
+        case 'RIGHT':
+        default:
+            return { x: EXPANSION_ANCHOR, y: CENTER_ANCHOR };
+    }
+}
+export function calculateRootViewportTarget(direction, rootNode, viewBox) {
+    const anchor = rootExpansionAnchor(direction);
+    const nodeCenterX = (rootNode.x || 0) + (rootNode.width || 0) / 2;
+    const nodeCenterY = (rootNode.y || 0) + (rootNode.height || 0) / 2;
+    return {
+        x: nodeCenterX - viewBox.width * anchor.x,
+        y: nodeCenterY - viewBox.height * anchor.y
+    };
+}
+export function calculateCenteredNodeViewportTarget(node, viewBox) {
+    const nodeCenterX = (node.x || 0) + (node.width || 0) / 2;
+    const nodeCenterY = (node.y || 0) + (node.height || 0) / 2;
+    return {
+        x: nodeCenterX - viewBox.width / 2,
+        y: nodeCenterY - viewBox.height / 2
+    };
+}
+export function calculateNodeViewportTarget(direction, node, viewBox) {
+    if (node.id === 'root') {
+        return calculateRootViewportTarget(direction, node, viewBox);
+    }
+    return calculateCenteredNodeViewportTarget(node, viewBox);
+}

package/dist/components/workspaces/workspace-view.js

@@ -4,7 +4,7 @@ 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 { html } from "lit";
+import { html, nothing } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { GitHubWorkspaceView } from "../github/github-workspace-view.js";
 import { ApiKeyViewComponent } from "../api-keys/api-key-view.js";
@@ -22,6 +22,7 @@ import hrCss from "../../css/hr.css.js";
 import tabsCss from "../../css/tabs.css.js";
 import scrollbarCss from "../../css/scrollbar.css.js";
 import { DoctorIcon } from "../model-icon/doctor-icon.js";
+const showApiKeyTab = false;
 let WorkspacesView = class WorkspacesView extends Formable {
     constructor(doc, wsController, walletController, githubController, apiKeyController) {
         super(doc);
@@ -168,7 +169,7 @@ let WorkspacesView = class WorkspacesView extends Formable {
 
                 <sl-tab-group class="tab-group workspace-tabs" placement="start">
                     <sl-tab slot="nav" panel="workspaces" class="tab" active>Workspaces</sl-tab>
-                    <sl-tab slot="nav" panel="api-keys" class="tab">API Keys</sl-tab>
+                    ${showApiKeyTab ? html `<sl-tab slot="nav" panel="api-keys" class="tab">API Keys</sl-tab>` : nothing}
                     <sl-tab slot="nav" panel="credit" class="tab">Credit</sl-tab>
 
                     <sl-tab-panel name="workspaces">
@@ -248,11 +249,13 @@ let WorkspacesView = class WorkspacesView extends Formable {
                         </div>
                     </sl-tab-panel>
 
-                    <sl-tab-panel name="api-keys">
-                        <div class="tab-panel-content scroller">
-                            ${this.apiKeyView}
-                        </div>
-                    </sl-tab-panel>
+                    ${showApiKeyTab ? html `
+                        <sl-tab-panel name="api-keys">
+                            <div class="tab-panel-content scroller">
+                                ${this.apiKeyView}
+                            </div>
+                        </sl-tab-panel>
+                    ` : nothing}
 
                     <sl-tab-panel name="credit">
                         <div class="tab-panel-content scroller">

package/dist/components/yaml-viewer/yaml-viewer.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/components/yaml-viewer/yaml-viewer.css.js

@@ -0,0 +1,45 @@
+import { css } from 'lit';
+import { focusedDiffSharedCss } from '../diff-viewer/line-renderer.js';
+export default [
+    focusedDiffSharedCss,
+    css `
+        :host {
+            display: block;
+            min-height: 0;
+            height: 100%;
+            background: var(--background-color);
+            color: var(--font-color);
+            font-family: var(--font-stack), monospace;
+            overflow: auto;
+        }
+
+        .yaml-viewer {
+            min-width: max-content;
+            padding: var(--global-padding-half) 0;
+        }
+
+        .diff-line {
+            min-height: var(--global-padding-double);
+            height: auto;
+        }
+
+        .line-gutter {
+            color: var(--font-color-sub3);
+        }
+
+        .line-content {
+            overflow: visible;
+            white-space: pre;
+        }
+
+        .diff-line[data-emphasis="focus"] {
+            background: var(--secondary-color-lowalpha);
+        }
+
+        .diff-line[data-emphasis="focus"] .line-number {
+            background: var(--secondary-color-lowalpha);
+            color: var(--secondary-color);
+            font-family: var(--font-stack-bold), monospace;
+        }
+    `
+];

package/dist/components/yaml-viewer/yaml-viewer.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+export declare class Pb33fYamlViewer extends LitElement {
+    static styles: import("lit").CSSResult[];
+    spec: string;
+    highlighted: Record<number, string>;
+    firstLine: number;
+    focusStart: number;
+    focusEnd: number;
+    language: 'yaml' | 'json';
+    private cachedSpec;
+    private cachedLines;
+    scrollToLine(line: number): void;
+    private emphasis;
+    private lines;
+    private renderLine;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pb33f-yaml-viewer': Pb33fYamlViewer;
+    }
+}