feat(ui): add InterfaceSchema, RecordReviewConfig, content elements, and per-element data binding

Phase A: Interface Foundation (v3.2) — Airtable Interface Parity

- Add InterfaceSchema as self-contained, shareable, multi-page application surface
- Add RecordReviewConfigSchema for sequential record review/approval pages
- Add content elements (element:text, element:number, element:image, element:divider) to PageComponentType
- Add ElementDataSourceSchema for per-element data binding on PageComponentSchema
- Add ElementTextPropsSchema, ElementNumberPropsSchema, ElementImagePropsSchema to component.zod.ts
- Update ComponentPropsMap with new element types
- Export new interface module from src/ui/index.ts
- Add comprehensive tests (57 tests across all new schemas)

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

packages/spec/src/ui/component.zod.ts

@@ -128,6 +128,45 @@ export const AIChatWindowProps = z.object({
   aria: AriaPropsSchema.optional().describe('ARIA accessibility attributes'),
 });
 
+/**
+ * ----------------------------------------------------------------------
+ * 3. Content Element Components (Airtable Interface Parity)
+ * ----------------------------------------------------------------------
+ */
+
+export const ElementTextPropsSchema = z.object({
+  content: z.string().describe('Text or Markdown content'),
+  variant: z.enum(['heading', 'subheading', 'body', 'caption'])
+    .optional().default('body').describe('Text style variant'),
+  align: z.enum(['left', 'center', 'right'])
+    .optional().default('left').describe('Text alignment'),
+  /** ARIA accessibility */
+  aria: AriaPropsSchema.optional().describe('ARIA accessibility attributes'),
+});
+
+export const ElementNumberPropsSchema = z.object({
+  object: z.string().describe('Source object'),
+  field: z.string().optional().describe('Field to aggregate'),
+  aggregate: z.enum(['count', 'sum', 'avg', 'min', 'max'])
+    .describe('Aggregation function'),
+  filter: z.any().optional().describe('Filter criteria'),
+  format: z.enum(['number', 'currency', 'percent']).optional().describe('Number display format'),
+  prefix: z.string().optional().describe('Prefix text (e.g. "$")'),
+  suffix: z.string().optional().describe('Suffix text (e.g. "%")'),
+  /** ARIA accessibility */
+  aria: AriaPropsSchema.optional().describe('ARIA accessibility attributes'),
+});
+
+export const ElementImagePropsSchema = z.object({
+  src: z.string().describe('Image URL or attachment field'),
+  alt: z.string().optional().describe('Alt text for accessibility'),
+  fit: z.enum(['cover', 'contain', 'fill'])
+    .optional().default('cover').describe('Image object-fit mode'),
+  height: z.number().optional().describe('Fixed height in pixels'),
+  /** ARIA accessibility */
+  aria: AriaPropsSchema.optional().describe('ARIA accessibility attributes'),
+});
+
 /**
  * ----------------------------------------------------------------------
  * Component Props Map
@@ -164,7 +203,13 @@ export const ComponentPropsMap = {
 
   // AI
   'ai:chat_window': AIChatWindowProps,
-  'ai:suggestion': z.object({ context: z.string().optional() })
+  'ai:suggestion': z.object({ context: z.string().optional() }),
+
+  // Content Elements
+  'element:text': ElementTextPropsSchema,
+  'element:number': ElementNumberPropsSchema,
+  'element:image': ElementImagePropsSchema,
+  'element:divider': EmptyProps,
 } as const;
 
 /**

packages/spec/src/ui/index.ts

@@ -28,3 +28,4 @@ export * from './keyboard.zod';
 export * from './animation.zod';
 export * from './notification.zod';
 export * from './dnd.zod';
+export * from './interface.zod';