Demo of A2UI v0.9 lit renderer

.geminiignore

@@ -0,0 +1,4 @@
+# Ignore large lock files that aren't useful for context
+**/pnpm-lock.yaml
+**/package-lock.json
+**/uv.lock

renderers/lit/package.json

@@ -16,6 +16,10 @@
     "./ui": {
       "types": "./dist/src/0.8/ui/ui.d.ts",
       "default": "./dist/src/0.8/ui/ui.js"
+    },
+    "./v0_9": {
+      "types": "./dist/src/v0_9/index.d.ts",
+      "default": "./dist/src/v0_9/index.js"
     }
   },
   "type": "module",
@@ -36,7 +40,7 @@
       "service": true
     },
     "test": {
-      "command": "node --test --enable-source-maps --test-reporter spec dist/src/0.8/*.test.js",
+      "command": "node --test --enable-source-maps --test-reporter spec dist/src/0.8 dist/src/v0_9",
       "dependencies": [
         "build"
       ]

renderers/lit/src/v0_9/index.ts

@@ -0,0 +1,4 @@
+
+export * from './renderer/lit-component-context.js';
+export * from './standard_catalog/index.js';
+export * from './ui/surface.js';

renderers/lit/src/v0_9/renderer/lit-component-context.ts

@@ -0,0 +1,9 @@
+
+import { TemplateResult } from 'lit';
+import { ComponentContext as CoreComponentContext } from '@a2ui/web_core/v0_9';
+
+// Lit currently doesn't add much on top of the generic context in v0.9 design,
+// as the reactivity is handled by the `updateCallback` passed from the Surface.
+// However, we might want to specialize 'renderChild' if needed, or just alias it.
+
+export type LitComponentContext = CoreComponentContext<TemplateResult>;

renderers/lit/src/v0_9/standard_catalog/components/audio-player.test.ts

@@ -0,0 +1,12 @@
+import { describe, it } from 'node:test';
+import { litAudioPlayer } from './audio-player.js';
+import { createLitTestContext, assertTemplateContains } from '../../test/test-utils.js';
+
+describe('Lit AudioPlayer', () => {
+    it('renders audio element', () => {
+        const context = createLitTestContext({ url: 'audio.mp3' });
+        const result = litAudioPlayer.render(context);
+        assertTemplateContains(result, '<audio');
+        assertTemplateContains(result, 'src="audio.mp3"');
+    });
+});

renderers/lit/src/v0_9/standard_catalog/components/audio-player.ts

@@ -0,0 +1,28 @@
+import { html, TemplateResult } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { AudioPlayerComponent } from '@a2ui/web_core/v0_9';
+import { getAccessibilityAttributes } from '../../ui/utils.js';
+
+export const litAudioPlayer = new AudioPlayerComponent<TemplateResult>(
+    ({ url, description, weight }, context) => {
+        const classes = context.surfaceContext.theme.components.AudioPlayer;
+        const a11y = getAccessibilityAttributes(context);
+        const styles: Record<string, string> = {};
+        if (weight !== undefined) {
+            styles['flex-grow'] = String(weight);
+        }
+
+        return html`
+        <audio 
+            src="${url}" 
+            controls 
+            class=${classMap(classes)}
+            style=${styleMap(styles)}
+            title=${description || a11y['aria-label'] || null}
+            aria-label=${a11y['aria-label'] || null}
+            aria-description=${a11y['aria-description'] || description || null}
+        ></audio>
+    `;
+    }
+);

renderers/lit/src/v0_9/standard_catalog/components/button.test.ts

@@ -0,0 +1,18 @@
+import { describe, it } from 'node:test';
+import { litButton } from './button.js';
+import { createLitTestContext, assertTemplateContains } from '../../test/test-utils.js';
+
+describe('Lit Button', () => {
+    it('renders button element', () => {
+        const context = createLitTestContext({ label: 'Click Me' });
+        const result = litButton.render(context);
+        assertTemplateContains(result, '<button');
+        assertTemplateContains(result, 'Click Me');
+    });
+
+    it('renders child content overrides label', () => {
+        const context = createLitTestContext({ label: 'Label', child: 'Custom Content' });
+        const result = litButton.render(context);
+        assertTemplateContains(result, 'Custom Content');
+    });
+});

renderers/lit/src/v0_9/standard_catalog/components/button.ts

@@ -0,0 +1,24 @@
+import { resolve } from 'path';
+import { html, TemplateResult } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { ButtonComponent } from '@a2ui/web_core/v0_9';
+import { getStyleMap, getAccessibilityAttributes } from '../../ui/utils.js';
+
+export const litButton = new ButtonComponent<TemplateResult>(
+  ({ label, disabled, onAction, child, weight }, context) => {
+    const classes = context.surfaceContext.theme.components.Button;
+    const styles = getStyleMap(context, 'Button');
+    const a11y = getAccessibilityAttributes(context);
+
+    if (weight !== undefined) {
+      styles['flex-grow'] = String(weight);
+    }
+
+    return html`
+    <button class=${classMap(classes)} style=${styleMap(styles)} ?disabled=${disabled} @click=${onAction} aria-label=${a11y['aria-label'] || label} aria-description=${a11y['aria-description'] || null}>
+      ${child ? child : label}
+    </button>
+  `;
+  }
+);

renderers/lit/src/v0_9/standard_catalog/components/card.test.ts

@@ -0,0 +1,11 @@
+import { describe, it } from 'node:test';
+import { litCard } from './card.js';
+import { createLitTestContext, assertTemplateContains } from '../../test/test-utils.js';
+
+describe('Lit Card', () => {
+    it('renders card container', () => {
+        const context = createLitTestContext({ child: null });
+        const result = litCard.render(context);
+        assertTemplateContains(result, 'class="a2ui-card"');
+    });
+});

renderers/lit/src/v0_9/standard_catalog/components/card.ts

@@ -0,0 +1,23 @@
+import { html, TemplateResult } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { CardComponent } from '@a2ui/web_core/v0_9';
+import { getStyleMap, getAccessibilityAttributes } from '../../ui/utils.js';
+
+export const litCard = new CardComponent<TemplateResult>(
+  ({ child, weight }, context) => {
+    const classes = context.surfaceContext.theme.components.Card;
+    const styles = getStyleMap(context, 'Card');
+    const a11y = getAccessibilityAttributes(context);
+
+    if (weight !== undefined) {
+      styles['flex-grow'] = String(weight);
+    }
+
+    return html`
+    <div class=${classMap(classes)} style=${styleMap(styles)} aria-label=${a11y['aria-label'] || null} aria-description=${a11y['aria-description'] || null}>
+      ${child}
+    </div>
+  `;
+  }
+);

renderers/lit/src/v0_9/standard_catalog/components/check-box.test.ts

@@ -0,0 +1,16 @@
+import { describe, it } from 'node:test';
+import { litCheckBox } from './check-box.js';
+import { createLitTestContext, assertTemplateContains } from '../../test/test-utils.js';
+
+describe('Lit CheckBox', () => {
+  it('renders label and checked state', () => {
+    const context = createLitTestContext({ label: 'Accept Terms', value: true });
+    const result = litCheckBox.render(context);
+    assertTemplateContains(result, 'Accept Terms');
+    // Lit boolean attributes often show as ?checked or checked depending on binding.
+    // In string template: .checked="${value}" -> bound via property
+    // We can't easily verify the PROPERTY value in static analysis of TemplateResult strings mostly.
+    // But we can verify the structure exists.
+    assertTemplateContains(result, 'type="checkbox"');
+  });
+});

renderers/lit/src/v0_9/standard_catalog/components/check-box.ts

@@ -0,0 +1,31 @@
+import { html, TemplateResult } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { CheckBoxComponent } from '@a2ui/web_core/v0_9';
+import { getAccessibilityAttributes } from '../../ui/utils.js';
+
+export const litCheckBox = new CheckBoxComponent<TemplateResult>(
+    ({ label, value, onChange, weight }, context) => {
+        const classes = context.surfaceContext.theme.components.CheckBox;
+        const a11y = getAccessibilityAttributes(context);
+        const styles: Record<string, string> = {};
+        if (weight !== undefined) {
+            styles['flex-grow'] = String(weight);
+        }
+
+        return html`
+        <div class=${classMap(classes)} style=${styleMap(styles)}>
+            <label>
+                <input 
+                    type="checkbox" 
+                    .checked="${value}" 
+                    @change="${(e: Event) => onChange((e.target as HTMLInputElement).checked)}"
+                    aria-label=${a11y['aria-label'] || label}
+                    aria-description=${a11y['aria-description'] || null}
+                />
+                ${label}
+            </label>
+        </div>
+    `;
+    }
+);

renderers/lit/src/v0_9/standard_catalog/components/choice-picker.test.ts

@@ -0,0 +1,17 @@
+import { describe, it } from 'node:test';
+import { litChoicePicker } from './choice-picker.js';
+import { createLitTestContext, assertTemplateContains } from '../../test/test-utils.js';
+
+describe('Lit ChoicePicker', () => {
+  it('renders options', () => {
+    const context = createLitTestContext({
+      label: 'Choose',
+      value: ['a'],
+      options: [{ label: 'Option A', value: 'a' }, { label: 'Option B', value: 'b' }]
+    });
+    const result = litChoicePicker.render(context);
+    assertTemplateContains(result, 'Choose');
+    assertTemplateContains(result, 'Option A');
+    assertTemplateContains(result, 'Option B');
+  });
+});

renderers/lit/src/v0_9/standard_catalog/components/choice-picker.ts

@@ -0,0 +1,49 @@
+import { html, TemplateResult } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { ChoicePickerComponent } from '@a2ui/web_core/v0_9';
+import { getAccessibilityAttributes } from '../../ui/utils.js';
+
+export const litChoicePicker = new ChoicePickerComponent<TemplateResult>(
+    ({ label, options, value, variant, onChange, weight }, context) => {
+        const classes = context.surfaceContext.theme.components.ChoicePicker;
+        const a11y = getAccessibilityAttributes(context);
+        const styles: Record<string, string> = {};
+        if (weight !== undefined) {
+            styles['flex-grow'] = String(weight);
+        }
+
+        // Simple select implementation for now
+        const isMultiple = variant === 'multipleSelection';
+        const handleChange = (e: Event) => {
+            const select = e.target as HTMLSelectElement;
+            if (isMultiple) {
+                const values = Array.from(select.selectedOptions).map(opt => opt.value);
+                onChange(values);
+            } else {
+                onChange([select.value]);
+            }
+        };
+
+        return html`
+            <div class=${classMap(classes)} style=${styleMap(styles)}>
+                <label>${label}</label>
+                <select 
+                    ?multiple="${isMultiple}" 
+                    @change="${handleChange}"
+                    aria-label=${a11y['aria-label'] || label}
+                    aria-description=${a11y['aria-description'] || null}
+                >
+                    ${options.map(opt => html`
+                        <option 
+                            value="${opt.value}" 
+                            ?selected="${value.includes(opt.value)}"
+                        >
+                            ${opt.label}
+                        </option>
+                    `)}
+                </select>
+            </div>
+        `;
+    }
+);

renderers/lit/src/v0_9/standard_catalog/components/column.test.ts

@@ -0,0 +1,13 @@
+
+import { describe, it } from 'node:test';
+import { litColumn } from './column.js';
+import { createLitTestContext, assertTemplateContains } from '../../test/test-utils.js';
+
+describe('Lit Column', () => {
+    it('renders column', () => {
+        const context = createLitTestContext({ children: [], direction: 'column' });
+        const result = litColumn.render(context);
+        assertTemplateContains(result, 'display: flex');
+        assertTemplateContains(result, 'flex-direction: column');
+    });
+});

renderers/lit/src/v0_9/standard_catalog/components/column.ts

@@ -0,0 +1,40 @@
+
+import { html, TemplateResult } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { ColumnComponent } from '@a2ui/web_core/v0_9';
+import { getAccessibilityAttributes } from '../../ui/utils.js';
+
+export const litColumn = new ColumnComponent<TemplateResult>(
+  ({ children, justify, align, weight }, context) => {
+    const classes = context.surfaceContext.theme.components.Column;
+    const a11y = getAccessibilityAttributes(context);
+
+    // Map justify/align
+    const alignClasses: Record<string, boolean> = {};
+    if (justify) {
+      // For Column, justify is vertical (main axis)
+      const map: Record<string, string> = { 'start': 'layout-sp-s', 'center': 'layout-sp-c', 'end': 'layout-sp-e', 'between': 'layout-sp-bt', 'evenly': 'layout-sp-ev' };
+      if (map[justify]) alignClasses[map[justify]] = true;
+    }
+    if (align) {
+      // For Column, align is horizontal (cross axis)
+      const map: Record<string, string> = { 'start': 'layout-al-fs', 'center': 'layout-al-c', 'end': 'layout-al-fe', 'stretch': 'layout-al-st' };
+      if (map[align]) alignClasses[map[align]] = true;
+    }
+
+    const styles: Record<string, string> = {
+      display: 'flex',
+      'flex-direction': 'column',
+    };
+    if (weight !== undefined) {
+        styles['flex-grow'] = String(weight);
+    }
+
+    return html`
+    <div class=${classMap({ ...classes, ...alignClasses })} style=${styleMap(styles)} aria-label=${a11y['aria-label'] || null} aria-description=${a11y['aria-description'] || null}>
+      ${children}
+    </div>
+  `;
+  }
+);

renderers/lit/src/v0_9/standard_catalog/components/date-time-input.test.ts

@@ -0,0 +1,18 @@
+import { describe, it } from 'node:test';
+import { litDateTimeInput } from './date-time-input.js';
+import { createLitTestContext, assertTemplateContains } from '../../test/test-utils.js';
+
+describe('Lit DateTimeInput', () => {
+    it('renders date input', () => {
+        const context = createLitTestContext({ label: 'Birthday', value: '2000-01-01', enableDate: true });
+        const result = litDateTimeInput.render(context);
+        assertTemplateContains(result, 'Birthday');
+        assertTemplateContains(result, 'type="date"');
+    });
+
+    it('renders time input', () => {
+        const context = createLitTestContext({ label: 'Alarm', value: '12:00', enableTime: true, enableDate: false });
+        const result = litDateTimeInput.render(context);
+        assertTemplateContains(result, 'type="time"');
+    });
+});