@proulr/sdui-components 0.1.30 → 0.1.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.30",
+  "version": "0.1.33",
   "type": "module",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",
@@ -25,10 +25,13 @@
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
+    "test:integration": "vitest run --config vitest.integration.config.ts",
+    "test:integration:coverage": "vitest run --config vitest.integration.config.ts --coverage",
     "prepublishOnly": "npm run typecheck",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "version:sync": "node ../scripts/proulr-bump-and-sync-deps.mjs"
+    "version:sync": "node ../scripts/proulr-bump-and-sync-deps.mjs",
+    "test:coverage": "vitest run --coverage"
   },
   "publishConfig": {
     "access": "public"
@@ -67,6 +70,7 @@
   "devDependencies": {
     "@types/node": "^22.20.0",
     "@types/react": "~19.2.2",
+    "@vitest/coverage-v8": "^3.2.7",
     "eslint": "^9.0.0",
     "eslint-config-expo": "~56.0.4",
     "expo-blur": "~56.0.3",

package/src/bdc/bdc-compile-pipeline.integration.test.ts

@@ -0,0 +1,115 @@
+import { describe, expect, it } from 'vitest';
+import { decodeSduiScreenWire } from '@proulr/sdui-contract';
+import { compileBdcBlock, compileBdcToWire } from './compile-bdc-to-wire';
+import type { BdcElement } from './jsx-runtime';
+
+function screen(props: Record<string, unknown>, children: BdcElement[]): BdcElement {
+  return { type: 'screen', props, children };
+}
+
+describe('BDC compile → contract decode integration', () => {
+  it('round-trips a full BDC tree including header slots and derived labels', () => {
+    const slot: BdcElement = {
+      type: 'chip_row',
+      props: { id: 'slot' },
+      children: [],
+    };
+
+    const wire = compileBdcToWire(
+      screen(
+        {
+          id: 'demo.home',
+          title: 'Demo',
+          data: { city: 'sp' },
+          header: {
+            title: 'Home',
+            headerSearch: true,
+            brandMode: true,
+            slotBlocks: [{ type: 'ignored' }],
+          },
+          headerSlot: [slot, { type: 'chip', props: {}, children: [] }],
+          actions: {
+            go: { type: 'navigate', path: '/x' },
+          },
+          meta: { bff: 'demo-bff', cache_ttl_ms: 12_000, stale_policy: 'cache_only' },
+        },
+        [
+          {
+            type: 'column',
+            props: { gap: 8, id: 'root' },
+            children: [
+              {
+                type: 'button',
+                props: { actionId: 'go', style: { paddingTop: 8, marginBottom: 4 } },
+                children: [
+                  { type: '_text_node', props: { value: '  Press ' }, children: [] },
+                  { type: 'text', props: { text: 'me' }, children: [] },
+                ],
+              },
+              {
+                type: 'text',
+                props: {},
+                children: [{ type: '_text_node', props: { value: 'Body' }, children: [] }],
+              },
+              {
+                type: '_fragment',
+                props: {},
+                children: [],
+              },
+              {
+                type: 'button',
+                props: { actionId: 'send_message', label: 'Send' },
+                children: [],
+              },
+            ],
+          },
+        ],
+      ),
+    );
+
+    expect(wire.schema_version).toBe(1);
+    expect(wire.screen_id).toBe('demo.home');
+    expect(wire.header).toMatchObject({
+      title: 'Home',
+      header_search: true,
+      brand_mode: true,
+    });
+    expect(wire.header?.slot_blocks).toHaveLength(2);
+    expect(wire.blocks[0]?.props).toMatchObject({ gap: 8 });
+    expect(wire.blocks[0]?.children?.[0]?.props).toMatchObject({
+      action_id: 'go',
+      label: 'Press me',
+      style: { padding_top: 8, margin_bottom: 4 },
+    });
+    expect(wire.blocks[0]?.children?.[1]?.props?.text).toBe('Body');
+    expect(wire.blocks[0]?.children?.[2]?.props).toMatchObject({
+      action_id: 'send_message',
+      label: 'Send',
+    });
+
+    const decoded = decodeSduiScreenWire(wire);
+    expect(decoded.screenId).toBe('demo.home');
+    expect(decoded.blocks).toHaveLength(1);
+    expect(decoded.blocks[0]?.type).toBe('column');
+    expect(decoded.data).toEqual({ city: 'sp' });
+    expect(decoded.meta.bff).toBe('demo-bff');
+  });
+
+  it('rejects non-screen roots and compiles lone text nodes', () => {
+    expect(() =>
+      compileBdcToWire({ type: 'stack', props: {}, children: [] }),
+    ).toThrow(/bdc_root_must_be_screen/);
+
+    const block = compileBdcBlock({
+      type: '_text_node',
+      props: { value: 'x' },
+      children: [],
+    });
+    expect(block).toEqual({ id: '0', type: 'text', props: { text: 'x' } });
+
+    const empty = compileBdcToWire(screen({ id: 'empty' }, []));
+    expect(empty.data).toEqual({});
+    expect(empty.actions).toEqual({});
+    expect(empty.meta).toMatchObject({ cache_ttl_ms: 30_000 });
+  });
+});

package/src/bdc/compile-bdc-to-wire.test.ts

@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest';
-import { compileBdcToWire } from './compile-bdc-to-wire';
+import { compileBdcBlock, compileBdcToWire } from './compile-bdc-to-wire';
 import type { BdcElement } from './jsx-runtime';
+import { compileBdcToWire as viaIndex } from './index';
 
 function screen(props: Record<string, unknown>, children: BdcElement[]): BdcElement {
   return { type: 'screen', props, children };
@@ -45,4 +46,107 @@ describe('compileBdcToWire', () => {
       compileBdcToWire({ type: 'stack', props: {}, children: [] }),
     ).toThrow(/bdc_root_must_be_screen/);
   });
+
+  it('derives button/text labels from children and maps style keys', () => {
+    const wire = compileBdcToWire(
+      screen({ id: 'demo.home' }, [
+        {
+          type: 'button',
+          props: { actionId: 'go', style: { paddingTop: 8, marginBottom: 4 } },
+          children: [
+            { type: '_text_node', props: { value: '  Press ' }, children: [] },
+            { type: 'text', props: { text: 'me' }, children: [] },
+          ],
+        },
+        {
+          type: 'text',
+          props: {},
+          children: [{ type: '_text_node', props: { value: 'Body' }, children: [] }],
+        },
+        {
+          type: '_fragment',
+          props: {},
+          children: [],
+        },
+        {
+          type: 'column',
+          props: { id: 'col-1', children: 'ignored' },
+          children: [
+            { type: '_text_node', props: { value: 'skip' }, children: [] },
+            { type: 'spacer', props: {}, children: [] },
+          ],
+        },
+      ]),
+    );
+    expect(wire.blocks).toHaveLength(3);
+    expect(wire.blocks[0]?.props).toMatchObject({
+      action_id: 'go',
+      label: 'Press me',
+      style: { padding_top: 8, margin_bottom: 4 },
+    });
+    expect(wire.blocks[1]?.props?.text).toBe('Body');
+    expect(wire.blocks[2]?.id).toBe('col-1');
+    expect(wire.blocks[2]?.children).toHaveLength(1);
+    expect(wire.blocks[2]?.children?.[0]?.type).toBe('spacer');
+  });
+
+  it('compiles header slot blocks and defaults meta/actions/data', () => {
+    const slot: BdcElement = {
+      type: 'chip_row',
+      props: { id: 'slot' },
+      children: [],
+    };
+    const wire = compileBdcToWire(
+      screen(
+        {
+          id: 'demo.home',
+          header: {
+            title: 'Home',
+            headerSearch: true,
+            slotBlocks: [{ type: 'ignored' }],
+            headerSlot: 'ignored',
+          },
+          headerSlot: slot,
+        },
+        [],
+      ),
+    );
+    expect(wire.header).toMatchObject({
+      title: 'Home',
+      header_search: true,
+    });
+    expect(wire.header?.slot_blocks?.[0]).toMatchObject({ id: 'slot', type: 'chip_row' });
+    expect(wire.data).toEqual({});
+    expect(wire.actions).toEqual({});
+    expect(wire.meta).toMatchObject({ cache_ttl_ms: 30_000, offline_policy: 'cache_only' });
+  });
+
+  it('accepts headerSlot arrays and maps header camelCase', () => {
+    const wire = compileBdcToWire(
+      screen(
+        {
+          id: 'demo.home',
+          header: { brandMode: true },
+          headerSlot: [
+            { type: 'chip', props: {}, children: [] },
+            { type: 'chip', props: {}, children: [] },
+          ],
+        },
+        [],
+      ),
+    );
+    expect(wire.header).toMatchObject({ brand_mode: true });
+    expect(wire.header?.slot_blocks).toHaveLength(2);
+  });
+
+  it('compileBdcBlock and index re-export work', () => {
+    const block = compileBdcBlock({
+      type: '_text_node',
+      props: { value: 'x' },
+      children: [],
+    });
+    expect(block).toEqual({ id: '0', type: 'text', props: { text: 'x' } });
+    expect(viaIndex(screen({ id: 'i' }, [])).screen_id).toBe('i');
+  });
 });
+

package/src/bdc/components/bdc-components.test.ts

@@ -0,0 +1,142 @@
+import { describe, expect, it } from 'vitest';
+import {
+  Chip,
+  ChipRow,
+  DiscoverGrid,
+  DiscoverMap,
+  DiscoverProfileCard,
+} from './discover';
+import { TextField } from './forms';
+import {
+  ChatInboxCapabilities,
+  EmptyState,
+  FlashInboxCapabilities,
+  FloatingCreateMenu,
+  InboxPersonRow,
+  InboxSearchField,
+  ProfileVisitsCapabilities,
+  SegmentedTabs,
+} from './inbox';
+import {
+  AlbumDetail,
+  AlbumGrid,
+  ChatGroupAddMembers,
+  ChatGroupCreate,
+  ChatGroupInfo,
+  ChatGroupInvite,
+  ChatThread,
+  DiscoverBrowseLocation,
+  NewPostComposer,
+  NewStoryComposer,
+  PostComments,
+  ProfileOnboarding,
+  ProfileReport,
+  ProfileSelf,
+  ProfileSetup,
+  ProfileView,
+  SettingsHome,
+  SettingsPage,
+  SocialPostFeed,
+  SocialProfile,
+  ThoughtFeed,
+} from './native-blocks';
+import { ProfileCompletionBanner, StoryRail } from './social';
+import {
+  Button,
+  Card,
+  Column,
+  InfoBanner,
+  ListItem,
+  NativeAd,
+  Row,
+  Screen,
+  Scroll,
+  SectionHeader,
+  Spacer,
+  Text,
+  ToggleRow,
+  screenProps,
+} from './ui';
+
+describe('bdc ui components', () => {
+  it('builds layout and leaf blocks', () => {
+    expect(Screen({ id: 'demo', children: [] })).toMatchObject({ type: 'screen' });
+    expect(Column({ gap: 8, children: [] }).type).toBe('column');
+    expect(Row({}).type).toBe('row');
+    expect(Scroll({}).type).toBe('scroll');
+    expect(Spacer({ height: 12 }).type).toBe('spacer');
+    expect(Text({ text: 'hi' }).type).toBe('text');
+    expect(Button({ actionId: 'go', label: 'Go' }).type).toBe('button');
+    expect(InfoBanner({ message: 'msg' }).type).toBe('info_banner');
+    expect(NativeAd({ placement: 'home' }).type).toBe('native_ad');
+    expect(Card({}).type).toBe('card');
+    expect(SectionHeader({ title: 'T' }).type).toBe('section_header');
+    expect(ListItem({ title: 'Item' }).type).toBe('list_item');
+    expect(ToggleRow({ label: 'On' }).type).toBe('toggle_row');
+    expect(screenProps({ id: 'x' })).toEqual({ id: 'x' });
+  });
+});
+
+describe('bdc discover/forms/social/inbox/native', () => {
+  it('builds discover and form blocks', () => {
+    expect(Chip({ label: 'All' }).type).toBe('chip');
+    expect(ChipRow({}).type).toBe('chip_row');
+    expect(DiscoverGrid({ itemsRef: 'items' }).type).toBe('discover_grid');
+    expect(DiscoverProfileCard({ profileRef: 'p' }).type).toBe('discover_profile_card');
+    expect(DiscoverMap({}).type).toBe('discover_map');
+    expect(TextField({ placeholder: 'x' }).type).toBe('text_field');
+    expect(StoryRail({ surface: 'discover' }).type).toBe('story_rail');
+    expect(ProfileCompletionBanner({}).type).toBe('profile_completion_banner');
+  });
+
+  it('builds inbox blocks and normalizes floating menu actions', () => {
+    expect(SegmentedTabs({}).type).toBe('segmented_tabs');
+    expect(EmptyState({ title: 'Empty' }).type).toBe('empty_state');
+    expect(InboxPersonRow({ variant: 'chat', rowRef: 'r' }).type).toBe('inbox_person_row');
+    expect(InboxSearchField({ placeholder: 'q' }).type).toBe('inbox_search_field');
+    expect(ChatInboxCapabilities({}).type).toBe('chat_inbox_capabilities');
+    expect(FlashInboxCapabilities({}).type).toBe('flash_inbox_capabilities');
+    expect(ProfileVisitsCapabilities({}).type).toBe('profile_visits_capabilities');
+    const menu = FloatingCreateMenu({
+      id: 'fab',
+      closedLabel: '+',
+      actions: [{ id: 'a1', label: 'Post', actionId: 'create_post', tone: 'primary', icon: 'plus' }],
+    });
+    expect(menu.type).toBe('floating_create_menu');
+    expect(menu.props.actions).toEqual([
+      { id: 'a1', label: 'Post', tone: 'primary', icon: 'plus', action_id: 'create_post' },
+    ]);
+    expect(FloatingCreateMenu({ actions: [] }).props).not.toHaveProperty('id');
+  });
+
+  it('builds all native hybrid blocks', () => {
+    const natives = [
+      ChatThread,
+      SocialPostFeed,
+      ThoughtFeed,
+      ProfileView,
+      ProfileSelf,
+      ProfileSetup,
+      ProfileOnboarding,
+      ProfileReport,
+      AlbumGrid,
+      AlbumDetail,
+      NewPostComposer,
+      NewStoryComposer,
+      PostComments,
+      SocialProfile,
+      SettingsHome,
+      SettingsPage,
+      ChatGroupCreate,
+      ChatGroupInfo,
+      ChatGroupAddMembers,
+      ChatGroupInvite,
+      DiscoverBrowseLocation,
+    ];
+    for (const Comp of natives) {
+      const el = Comp({ id: 'n1' });
+      expect(el.children).toEqual([]);
+      expect(typeof el.type).toBe('string');
+    }
+  });
+});

package/src/bdc/jsx-runtime.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest';
+import { Fragment, jsx, jsxs, styleWire, type BdcElement } from './jsx-runtime';
+
+describe('jsx-runtime', () => {
+  it('creates an element from a string type', () => {
+    const el = jsx('text', { text: 'hi' });
+    expect(el).toEqual({ type: 'text', props: { text: 'hi' }, children: [] });
+  });
+
+  it('flattens null, boolean, nested arrays, and text nodes', () => {
+    const el = jsxs('column', null, null, false, true, 'hello', 42, [
+      jsx('text', { text: 'nested' }),
+      [null, jsx('spacer', {})],
+    ]);
+    expect(el.children).toEqual([
+      { type: '_text_node', props: { value: 'hello' }, children: [] },
+      { type: '_text_node', props: { value: '42' }, children: [] },
+      { type: 'text', props: { text: 'nested' }, children: [] },
+      { type: 'spacer', props: {}, children: [] },
+    ]);
+  });
+
+  it('merges children from props and rest args', () => {
+    const child: BdcElement = { type: 'text', props: { text: 'a' }, children: [] };
+    const el = jsx('row', { gap: 8, children: child }, jsx('text', { text: 'b' }));
+    expect(el.props).toEqual({ gap: 8 });
+    expect(el.children).toHaveLength(2);
+    expect(el.children[0].props).toEqual({ text: 'a' });
+    expect(el.children[1].props).toEqual({ text: 'b' });
+  });
+
+  it('invokes function components', () => {
+    const Comp = (props: Record<string, unknown>) => ({
+      type: 'button',
+      props: { label: props.label, children: props.children },
+      children: (props.children as BdcElement[]) ?? [],
+    });
+    const el = jsx(Comp, { label: 'Go' }, jsx('text', { text: 'inner' }));
+    expect(el.type).toBe('button');
+    expect(el.props.label).toBe('Go');
+    expect(el.children[0].type).toBe('text');
+  });
+
+  it('exports Fragment and styleWire helpers', () => {
+    expect(Fragment).toBe('_fragment');
+    expect(styleWire({ padding: 'md' })).toEqual({ style: { padding: 'md' } });
+  });
+
+  it('ignores non-element objects without type', () => {
+    const el = jsx('column', null, { foo: 1 });
+    expect(el.children).toEqual([]);
+  });
+});

package/src/catalog/catalog.test.ts

@@ -0,0 +1,91 @@
+import { describe, expect, it } from 'vitest';
+import { APP_ICON_NAMES, isAppIconName } from './app-icon-names';
+import { isKnownBlockType, SDUI_BLOCK_TYPES } from './block-types';
+import {
+  allCatalogEmojis,
+  CHAT_EMOJI_CATEGORIES,
+  DEFAULT_QUICK_REACTIONS,
+  getEmojiCategory,
+  QUICK_REACTION_SLOTS,
+} from './chat-emoji-catalog';
+import {
+  FLASH_FILTER_ALL_ACTION_ID,
+  FLASH_REACTION_IDS,
+  FLASH_REACTIONS,
+  flashFilterActionId,
+  getFlashReaction,
+  isFlashReactionId,
+  parseFlashInboxFilter,
+} from './flash-reaction-catalog';
+import {
+  COLOR_TOKENS,
+  SHAPE_TOKENS,
+  SPACING_TOKENS,
+  TYPE_TOKENS,
+} from './style-tokens';
+import {
+  allCatalogEmojis as viaIndexAll,
+  isAppIconName as viaIndexIsIcon,
+  isKnownBlockType as viaIndexIsBlock,
+} from './index';
+
+describe('block-types', () => {
+  it('lists known block types', () => {
+    expect(SDUI_BLOCK_TYPES).toContain('text');
+    expect(isKnownBlockType('button')).toBe(true);
+    expect(isKnownBlockType('unknown_block')).toBe(false);
+  });
+});
+
+describe('app-icon-names', () => {
+  it('validates icon tokens', () => {
+    expect(APP_ICON_NAMES.length).toBeGreaterThan(10);
+    expect(isAppIconName('search')).toBe(true);
+    expect(isAppIconName('not-an-icon')).toBe(false);
+  });
+});
+
+describe('style-tokens', () => {
+  it('exports token catalogs', () => {
+    expect(COLOR_TOKENS).toContain('primary');
+    expect(SPACING_TOKENS).toContain('md');
+    expect(SHAPE_TOKENS).toContain('cornerFull');
+    expect(TYPE_TOKENS).toContain('body');
+  });
+});
+
+describe('chat-emoji-catalog', () => {
+  it('resolves categories and flattens unique emojis', () => {
+    expect(DEFAULT_QUICK_REACTIONS).toHaveLength(QUICK_REACTION_SLOTS);
+    expect(getEmojiCategory('smileys').id).toBe('smileys');
+    expect(getEmojiCategory('spicy').id).toBe('spicy');
+    const all = allCatalogEmojis();
+    expect(all.length).toBeGreaterThan(50);
+    expect(new Set(all).size).toBe(all.length);
+    expect(CHAT_EMOJI_CATEGORIES.length).toBe(8);
+  });
+});
+
+describe('flash-reaction-catalog', () => {
+  it('looks up reactions and parses filters', () => {
+    expect(FLASH_REACTIONS).toHaveLength(FLASH_REACTION_IDS.length);
+    expect(getFlashReaction('fire').id).toBe('fire');
+    expect(getFlashReaction(null).id).toBe('flash');
+    expect(getFlashReaction('nope').id).toBe('flash');
+    expect(flashFilterActionId('heart')).toBe('flash_filter_heart');
+    expect(FLASH_FILTER_ALL_ACTION_ID).toBe('flash_filter_all');
+    expect(parseFlashInboxFilter('wave')).toBe('wave');
+    expect(parseFlashInboxFilter(undefined)).toBe('all');
+    expect(parseFlashInboxFilter('nope')).toBe('all');
+    expect(isFlashReactionId('chat')).toBe(true);
+    expect(isFlashReactionId('x')).toBe(false);
+  });
+});
+
+describe('catalog index re-exports', () => {
+  it('re-exports helpers', () => {
+    expect(viaIndexIsBlock('text')).toBe(true);
+    expect(viaIndexIsIcon('search')).toBe(true);
+    expect(viaIndexAll().length).toBeGreaterThan(0);
+  });
+});

package/src/renderer/lib/discover-profile-formatters.test.ts

@@ -2,7 +2,9 @@ import { afterEach, describe, expect, it, vi } from 'vitest';
 import {
   formatDistanceLabel,
   getPresenceStatus,
+  isDiscoverGridItem,
   profileAgeFromBirthDate,
+  readDiscoverGridItems,
 } from './discover-profile-formatters';
 
 describe('profileAgeFromBirthDate', () => {
@@ -38,8 +40,40 @@ describe('getPresenceStatus', () => {
     vi.useFakeTimers();
     vi.setSystemTime(new Date('2026-01-01T12:00:00Z'));
     expect(getPresenceStatus(null)).toBe('offline');
+    expect(getPresenceStatus('not-a-date')).toBe('offline');
     expect(getPresenceStatus('2026-01-01T11:58:00Z')).toBe('online');
     expect(getPresenceStatus('2026-01-01T06:00:00Z')).toBe('recent');
     expect(getPresenceStatus('2025-12-01T12:00:00Z')).toBe('offline');
   });
 });
+
+describe('discover grid helpers', () => {
+  it('type-guards and reads nested grid items', () => {
+    expect(isDiscoverGridItem(null)).toBe(false);
+    expect(isDiscoverGridItem({ kind: 'profile' })).toBe(true);
+    expect(isDiscoverGridItem({ kind: 'ad' })).toBe(true);
+    expect(isDiscoverGridItem({ kind: 'other' })).toBe(false);
+
+    const data = {
+      discover: {
+        items: [
+          { kind: 'profile', id: 'p1', person: { id: 'p1' } },
+          { kind: 'ad', id: 'a1' },
+          { kind: 'nope' },
+          null,
+        ],
+      },
+    };
+    expect(readDiscoverGridItems(data, 'discover.items')).toHaveLength(2);
+    expect(readDiscoverGridItems(data, 'discover.missing')).toEqual([]);
+    expect(readDiscoverGridItems({}, 'a.b')).toEqual([]);
+
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2026-06-15T00:00:00Z'));
+    expect(profileAgeFromBirthDate('2000-07-01')).toBe(25);
+    expect(profileAgeFromBirthDate('2000-06-15')).toBe(26);
+    expect(profileAgeFromBirthDate('2099-01-01')).toBeNull();
+    vi.useRealTimers();
+  });
+});
+

package/src/renderer/ui/AppButton.tsx

@@ -9,6 +9,7 @@ export function AppButton({
   disabled,
   loading,
   compact,
+  testID,
 }: {
   label: string;
   onPress: () => void;
@@ -16,6 +17,7 @@ export function AppButton({
   disabled?: boolean;
   loading?: boolean;
   compact?: boolean;
+  testID?: string;
 }) {
   const isPrimary = variant === 'primary';
   const isSecondary = variant === 'secondary';
@@ -30,6 +32,8 @@ export function AppButton({
 
   return (
     <Pressable
+      testID={testID}
+      accessibilityRole="button"
       onPress={onPress}
       disabled={disabled || loading}
       style={({ pressed }) => [