@ghchinoy/litflow 0.2.8 → 0.4.0

package/src/lit-node.ts

@@ -33,8 +33,15 @@ export class LitNode extends (SignalWatcher as <T extends Constructor<LitElement
 
   render() {
     return html`
-      <div class="label" style="font-size: var(--md-sys-typescale-body-medium-size); color: var(--md-sys-color-on-surface); pointer-events: none; font-family: var(--md-sys-typescale-body-medium-font);">${this.label}</div>
-      <slot></slot>
+      <div class="content-wrapper" style="padding: 12px; display: flex; flex-direction: column; gap: 4px; pointer-events: none;">
+        <div class="headline" style="font-size: var(--md-sys-typescale-title-small-size); font-weight: var(--md-sys-typescale-title-small-weight); color: var(--md-sys-color-on-surface); font-family: var(--md-sys-typescale-title-small-font);">
+          <slot name="headline">${this.label}</slot>
+        </div>
+        <div class="supporting-text" style="font-size: var(--md-sys-typescale-body-medium-size); color: var(--md-sys-color-on-surface-variant); font-family: var(--md-sys-typescale-body-medium-font);">
+          <slot name="supporting-text"></slot>
+        </div>
+        <slot></slot>
+      </div>
       ${this.type === 'input' || this.type === 'default'
         ? html`<lit-handle type="source" data-handlepos="bottom" data-nodeid="${this.nodeId}"></lit-handle>`
         : ''}

package/src/lit-schema-node.test.ts

@@ -0,0 +1,65 @@
+import { expect, test, describe } from 'vitest';
+import { html, fixture } from '@open-wc/testing';
+import './lit-schema-node';
+import { LitSchemaNode } from './lit-schema-node';
+
+describe('LitSchemaNode', () => {
+  test('is defined', () => {
+    const el = document.createElement('lit-schema-node');
+    expect(el).toBeInstanceOf(LitSchemaNode);
+  });
+
+  test('renders header label from data', async () => {
+    const el = await fixture<LitSchemaNode>(html`
+      <lit-schema-node .data="${{ label: 'Gemini 3 Flash' }}"></lit-schema-node>
+    `);
+    const header = el.querySelector('.header');
+    expect(header?.textContent).toContain('Gemini 3 Flash');
+  });
+
+  test('renders input handles based on schema', async () => {
+    const schema = {
+      type: 'object',
+      properties: {
+        prompt: { title: 'User Prompt', type: 'string' },
+        temperature: { title: 'Temperature', type: 'number' }
+      }
+    };
+    
+    const el = await fixture<LitSchemaNode>(html`
+      <lit-schema-node .data="${{ inputSchema: schema }}"></lit-schema-node>
+    `);
+    
+    const inputs = el.querySelectorAll('.port.input');
+    expect(inputs.length).toBe(2);
+    
+    const labels = Array.from(el.querySelectorAll('.port.input label')).map(l => l.textContent);
+    expect(labels).toContain('User Prompt');
+    expect(labels).toContain('Temperature');
+    
+    const handles = el.querySelectorAll('lit-handle[type="target"]');
+    expect(handles.length).toBe(2);
+  });
+
+  test('renders output handles based on schema', async () => {
+    const schema = {
+      type: 'object',
+      properties: {
+        text: { title: 'Result Text', type: 'string' }
+      }
+    };
+    
+    const el = await fixture<LitSchemaNode>(html`
+      <lit-schema-node .data="${{ outputSchema: schema }}"></lit-schema-node>
+    `);
+    
+    const outputs = el.querySelectorAll('.port.output');
+    expect(outputs.length).toBe(1);
+    
+    const labels = Array.from(el.querySelectorAll('.port.output label')).map(l => l.textContent);
+    expect(labels).toContain('Result Text');
+    
+    const handles = el.querySelectorAll('lit-handle[type="source"]');
+    expect(handles.length).toBe(1);
+  });
+});

package/src/lit-schema-node.ts

@@ -0,0 +1,194 @@
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
+import type { Schema } from '@breadboard-ai/types';
+import './lit-handle';
+import './lit-chiclet';
+
+@customElement('lit-schema-node')
+export class LitSchemaNode extends LitElement {
+  @property({ type: String })
+  label = 'Node';
+
+  @property({ type: Object })
+  inputSchema: Schema = { properties: {} };
+
+  @property({ type: Object })
+  outputSchema: Schema = { properties: {} };
+
+  @property({ type: Object })
+  data: any = {};
+
+  @property({ type: String })
+  status: 'idle' | 'working' | 'success' | 'error' = 'idle';
+
+  createRenderRoot() {
+    return this;
+  }
+
+  render() {
+    // Fallback to reading from 'data' if top-level properties are empty
+    const inputSchema = this.inputSchema?.properties && Object.keys(this.inputSchema.properties).length > 0 
+      ? this.inputSchema 
+      : (this.data?.inputSchema || { properties: {} });
+
+    const outputSchema = this.outputSchema?.properties && Object.keys(this.outputSchema.properties).length > 0 
+      ? this.outputSchema 
+      : (this.data?.outputSchema || { properties: {} });
+
+    const inputs = Object.entries(inputSchema.properties || {});
+    const outputs = Object.entries(outputSchema.properties || {});
+
+    return html`
+      <style>
+        :host {
+          --md-sys-color-surface-container: #f3edf7;
+          --md-sys-color-on-surface: #1b1b1f;
+          --md-sys-color-outline: #74777f;
+          --md-sys-color-surface-container-high: #ece6f0;
+          --md-sys-color-outline-variant: #c4c6d0;
+          --md-sys-color-on-surface-variant: #44474f;
+          --md-sys-color-primary: #005ac1;
+          --md-sys-color-error: #ba1a1a;
+          --md-sys-shape-corner-medium: 12px;
+          --md-sys-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+          display: block;
+        }
+
+        .node-container {
+          display: flex;
+          flex-direction: column;
+          min-width: 200px;
+          background: var(--md-sys-color-surface-container);
+          color: var(--md-sys-color-on-surface);
+          border: 1px solid var(--md-sys-color-outline);
+          border-radius: var(--md-sys-shape-corner-medium);
+          box-shadow: var(--md-sys-elevation-1);
+          box-sizing: border-box;
+          position: relative;
+          transition: border-color 0.2s, box-shadow 0.2s;
+        }
+
+        .node-container.working {
+          border-color: var(--md-sys-color-primary);
+          box-shadow: 0 0 8px rgba(0, 90, 193, 0.4);
+        }
+
+        .node-container.error {
+          border-color: var(--md-sys-color-error);
+        }
+
+        /* Selected state style injection from parent would be needed, or we check attribute manually */
+        :host([selected]) .node-container {
+          border: 2px solid var(--md-sys-color-primary);
+          margin: -1px;
+        }
+
+        .header {
+          background: var(--md-sys-color-surface-container-high);
+          padding: 12px 16px;
+          font-weight: 500;
+          border-bottom: 1px solid var(--md-sys-color-outline-variant);
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          border-radius: var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium) 0 0;
+          margin: 0;
+        }
+
+        .content {
+          padding: 16px;
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+        }
+
+        .port {
+          position: relative;
+          display: flex;
+          align-items: center;
+          min-height: 24px;
+          width: 100%;
+        }
+
+        .port.input {
+          justify-content: flex-start;
+        }
+
+        .port.output {
+          justify-content: flex-end;
+        }
+
+        /* Handle Positioning */
+        lit-handle {
+          position: absolute;
+          z-index: 10;
+        }
+        
+        .port.input lit-handle {
+          left: -22px !important;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+
+        .port.output lit-handle {
+          left: auto !important;
+          right: -22px !important;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+
+        label {
+          font-size: 12px;
+          color: var(--md-sys-color-on-surface-variant);
+          pointer-events: none;
+        }
+      </style>
+      <div class="node-container ${this.status}">
+        <div class="header">
+          <span class="icon">🧩</span>
+          <span>${this.data?.label || this.label}</span>
+        </div>
+        <div class="content">
+          ${inputs.length > 0 ? html`
+            <div class="inputs">
+              ${map(inputs, ([name, schema]: [string, any]) => html`
+                <div class="port input">
+                  <lit-handle type="target" position="left" data-handleid="${name}" id="${name}"></lit-handle>
+                  ${this.data?.[name] 
+                    ? html`<lit-chiclet 
+                        type="input" 
+                        .label="${schema.title || name}" 
+                        .value="${this.data[name]}"
+                        icon="${schema.behavior?.includes('llm-content') ? '✨' : '📄'}"
+                      ></lit-chiclet>`
+                    : html`<label>${schema.title || name}</label>`
+                  }
+                </div>
+              `)}
+            </div>
+          ` : ''}
+
+          ${outputs.length > 0 ? html`
+            <div class="outputs">
+              ${map(outputs, ([name, schema]: [string, any]) => html`
+                <div class="port output">
+                  ${this.data?.[name]
+                    ? html`<lit-chiclet 
+                        type="generative" 
+                        .label="${schema.title || name}" 
+                        .value="${this.data[name]}"
+                        icon="🪄"
+                      ></lit-chiclet>`
+                    : html`<label>${schema.title || name}</label>`
+                  }
+                  <lit-handle type="source" position="right" data-handleid="${name}" id="${name}"></lit-handle>
+                </div>
+              `)}
+            </div>
+          ` : ''}
+        </div>
+      </div>
+    `;
+  }
+}