@proulr/sdui-components 0.1.82 → 0.1.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.82",
+  "version": "0.1.86",
   "type": "module",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",

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

@@ -177,5 +177,27 @@ describe('compileBdcToWire', () => {
     expect(block).toEqual({ id: '0', type: 'text', props: { text: 'x' } });
     expect(viaIndex(screen({ id: 'i' }, [])).screen_id).toBe('i');
   });
+
+  it('flattens _fragment children instead of dropping them', () => {
+    const wire = compileBdcToWire(
+      screen({ id: 'demo.fragment' }, [
+        {
+          type: 'column',
+          props: {},
+          children: [
+            {
+              type: '_fragment',
+              props: {},
+              children: [
+                { type: 'text', props: { text: 'a' }, children: [] },
+                { type: 'text', props: { text: 'b' }, children: [] },
+              ],
+            },
+          ],
+        },
+      ]),
+    );
+    expect(wire.blocks[0]?.children?.map((c) => c.props?.text)).toEqual(['a', 'b']);
+  });
 });
 

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

@@ -61,6 +61,19 @@ export function compileBdcBlock(element: BdcElement, path = '0'): SduiBlockWire
   return mapBlock(element, path);
 }
 
+function flattenBlockChildren(children: BdcElement[]): BdcElement[] {
+  const out: BdcElement[] = [];
+  for (const child of children) {
+    if (child.type === '_text_node') continue;
+    if (child.type === '_fragment') {
+      out.push(...flattenBlockChildren(child.children));
+      continue;
+    }
+    out.push(child);
+  }
+  return out;
+}
+
 function mapBlock(element: BdcElement, path: string): SduiBlockWire {
   if (element.type === '_text_node') {
     return { id: path, type: 'text', props: { text: String(element.props.value ?? '') } };
@@ -76,9 +89,7 @@ function mapBlock(element: BdcElement, path: string): SduiBlockWire {
     props.text = textFromChildren(element.children);
   }
 
-  const blockChildren = element.children.filter(
-    (child) => child.type !== '_text_node' && child.type !== '_fragment',
-  );
+  const blockChildren = flattenBlockChildren(element.children);
 
   return {
     id: typeof element.props.id === 'string' ? element.props.id : path,
@@ -114,9 +125,9 @@ export function compileBdcToWire(root: BdcElement): SduiScreenWire {
 
   void rest;
 
-  const blocks = root.children
-    .filter((child) => child.type !== '_fragment')
-    .map((child, index) => mapBlock(child, String(index)));
+  const blocks = flattenBlockChildren(root.children).map((child, index) =>
+    mapBlock(child, String(index)),
+  );
 
   const compiledHeader = header ? mapHeaderToWire(header as Record<string, unknown>) : undefined;
   if (compiledHeader && headerSlot) {

package/src/renderer/theme/resolve-style-props.test.ts

@@ -0,0 +1,63 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { resolveTextStyleProps, resolveViewStyleProps } from './resolve-style-props';
+import { m3Colors, m3Shape, spacing } from './proulr-theme';
+
+vi.mock('react-native', () => ({
+  Platform: {
+    OS: 'web',
+    select: (spec: Record<string, unknown>) => spec.default ?? spec.web ?? spec.ios ?? {},
+  },
+}));
+
+describe('resolveViewStyleProps', () => {
+  it('resolves snake_case StyleWire tokens', () => {
+    const style = resolveViewStyleProps({
+      background_color: 'surfaceContainerHigh',
+      padding_horizontal: 'lg',
+      padding_vertical: 'md',
+      margin_top: 'sm',
+      gap: 'md',
+      border_radius: 'cornerExtraLarge',
+      border_width: 1,
+      border_color: 'outlineVariant',
+      align_items: 'center',
+      flex: 1,
+    }) as Record<string, unknown>;
+
+    expect(style.backgroundColor).toBe(m3Colors.surfaceContainerHigh);
+    expect(style.paddingHorizontal).toBe(spacing.lg);
+    expect(style.paddingVertical).toBe(spacing.md);
+    expect(style.marginTop).toBe(spacing.sm);
+    expect(style.gap).toBe(spacing.md);
+    expect(style.borderRadius).toBe(m3Shape.cornerExtraLarge);
+    expect(style.borderWidth).toBe(1);
+    expect(style.borderColor).toBe(m3Colors.outlineVariant);
+    expect(style.alignItems).toBe('center');
+    expect(style.flex).toBe(1);
+  });
+
+  it('accepts camelCase aliases without dropping values', () => {
+    const style = resolveViewStyleProps({
+      backgroundColor: 'primaryContainer',
+      paddingHorizontal: 'sm',
+      alignItems: 'flex-end',
+    } as Record<string, unknown>) as Record<string, unknown>;
+
+    expect(style.backgroundColor).toBe(m3Colors.primaryContainer);
+    expect(style.paddingHorizontal).toBe(spacing.sm);
+    expect(style.alignItems).toBe('flex-end');
+  });
+});
+
+describe('resolveTextStyleProps', () => {
+  it('resolves color and text_align from snake_case wire', () => {
+    const style = resolveTextStyleProps(
+      { color: 'primary', text_align: 'center', typography: 'titleSmall' },
+      'body',
+    ) as Record<string, unknown>;
+
+    expect(style.color).toBe(m3Colors.primary);
+    expect(style.textAlign).toBe('center');
+  });
+});

package/src/renderer/theme/resolve-style-props.ts

@@ -24,18 +24,23 @@ function resolveTypography(token: TypeToken | undefined): TextStyle | undefined
   return m3Type[token];
 }
 
-function snakeToCamel(key: string): string {
-  return key.replace(/_([a-z])/g, (_, c: string) => c.toUpperCase());
+function camelToSnake(key: string): string {
+  return key.replace(/[A-Z]/g, (c) => `_${c.toLowerCase()}`);
 }
 
+/**
+ * Canonical StyleWire is snake_case. Accept camelCase inputs from older wires
+ * without dropping underscore keys (previous normalize converted to camel and
+ * broke every `*_` token read).
+ */
 function normalizeStyleWire(style: StyleWire | Record<string, unknown> | undefined): StyleWire {
   if (!style) return {};
-  const normalized: StyleWire = {};
+  const normalized: Record<string, unknown> = {};
   for (const [key, value] of Object.entries(style)) {
-    const camelKey = snakeToCamel(key) as keyof StyleWire;
-    (normalized as Record<string, unknown>)[camelKey] = value;
+    const snakeKey = key.includes('_') ? key : camelToSnake(key);
+    normalized[snakeKey] = value;
   }
-  return normalized;
+  return normalized as StyleWire;
 }
 
 export function resolveViewStyleProps(