@pb33f/cowboy-components 0.13.1 → 0.14.0

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;
+    }
+}

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

@@ -0,0 +1,86 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { LitElement, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import yamlViewerCss from './yaml-viewer.css.js';
+let Pb33fYamlViewer = class Pb33fYamlViewer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.spec = '';
+        this.highlighted = {};
+        this.firstLine = 1;
+        this.focusStart = 0;
+        this.focusEnd = 0;
+        this.language = 'yaml';
+        this.cachedSpec = '';
+        this.cachedLines = [];
+    }
+    scrollToLine(line) {
+        const row = this.renderRoot.querySelector(`[data-line="${line}"]`);
+        row?.scrollIntoView({ block: 'center', behavior: 'auto' });
+    }
+    emphasis(line) {
+        if (this.focusStart > 0 && line >= this.focusStart && line <= (this.focusEnd || this.focusStart)) {
+            return 'focus';
+        }
+        return '';
+    }
+    lines() {
+        if (this.spec !== this.cachedSpec) {
+            this.cachedSpec = this.spec;
+            this.cachedLines = this.spec.split('\n');
+        }
+        return this.cachedLines;
+    }
+    renderLine(line, idx) {
+        const lineNumber = this.firstLine + idx;
+        const highlightedContent = this.highlighted?.[lineNumber];
+        const emphasis = this.emphasis(lineNumber);
+        return html `
+            <div class="diff-line equal"
+                 data-emphasis=${emphasis || nothing}
+                 data-line=${lineNumber}
+                 data-original-line=${lineNumber}>
+                <span class="line-gutter"></span>
+                <span class="line-number">${lineNumber}</span>
+                <span class="line-content">${highlightedContent ? unsafeHTML(highlightedContent) : line}</span>
+            </div>
+        `;
+    }
+    render() {
+        return html `
+            <div class="yaml-viewer" data-language=${this.language}>
+                ${repeat(this.lines(), (_, idx) => this.firstLine + idx, (line, idx) => this.renderLine(line, idx))}
+            </div>
+        `;
+    }
+};
+Pb33fYamlViewer.styles = yamlViewerCss;
+__decorate([
+    property()
+], Pb33fYamlViewer.prototype, "spec", void 0);
+__decorate([
+    property({ type: Object })
+], Pb33fYamlViewer.prototype, "highlighted", void 0);
+__decorate([
+    property({ type: Number })
+], Pb33fYamlViewer.prototype, "firstLine", void 0);
+__decorate([
+    property({ type: Number })
+], Pb33fYamlViewer.prototype, "focusStart", void 0);
+__decorate([
+    property({ type: Number })
+], Pb33fYamlViewer.prototype, "focusEnd", void 0);
+__decorate([
+    property()
+], Pb33fYamlViewer.prototype, "language", void 0);
+Pb33fYamlViewer = __decorate([
+    customElement('pb33f-yaml-viewer')
+], Pb33fYamlViewer);
+export { Pb33fYamlViewer };

package/dist/controllers/problem-controller.d.ts

@@ -4,6 +4,7 @@ export declare class ProblemController extends EventTarget {
     private readonly deps;
     constructor(deps: ProblemControllerDeps);
     problemClicked(event: CustomEvent<ProblemClickedEvent>): void;
+    private resolveProblemClickTarget;
     private ensureSpecTabActive;
     private normalizeSourceLocation;
     private navigateToRolodexNode;