feat(schema): enhance chart and widget schemas with new properties and definitions

Author: hotlong

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

@@ -18,17 +18,20 @@ export const ChartTypeSchema = z.enum([
   'column',
   'grouped-bar',
   'stacked-bar',
+  'bi-polar-bar',
 
   // Trend
   'line',
   'area',
   'stacked-area',
   'step-line',
+  'spline',
 
   // Distribution
   'pie',
   'donut',
   'funnel',
+  'pyramid',
 
   // Relationship
   'scatter',
@@ -38,22 +41,28 @@ export const ChartTypeSchema = z.enum([
   'treemap',
   'sunburst',
   'sankey',
+  'word-cloud',
 
   // Performance
   'gauge',
+  'solid-gauge',
   'metric',
   'kpi',
+  'bullet',
 
   // Geo
   'choropleth',
   'bubble-map',
+  'gl-map',
 
   // Advanced
   'heatmap',
   'radar',
   'waterfall',
   'box-plot',
   'violin',
+  'candlestick',
+  'stock',
 
   // Tabular
   'table',
@@ -62,17 +71,116 @@ export const ChartTypeSchema = z.enum([
 
 export type ChartType = z.infer<typeof ChartTypeSchema>;
 
+/**
+ * Chart Axis Schema
+ * Definition for X and Y axes
+ */
+export const ChartAxisSchema = z.object({
+  /** Data field to map to this axis */
+  field: z.string().describe('Data field key'),
+  
+  /** Axis title */
+  title: z.string().optional().describe('Axis display title'),
+
+  /** Value formatting (d3-format or similar) */
+  format: z.string().optional().describe('Value format string (e.g., "$0,0.00")'),
+  
+  /** Axis scale settings */
+  min: z.number().optional().describe('Minimum value'),
+  max: z.number().optional().describe('Maximum value'),
+  stepSize: z.number().optional().describe('Step size for ticks'),
+  
+  /** Appearance */
+  showGridLines: z.boolean().default(true),
+  position: z.enum(['left', 'right', 'top', 'bottom']).optional().describe('Axis position'),
+  
+  /** Logarithmic scale */
+  logarithmic: z.boolean().default(false),
+});
+
+/**
+ * Chart Series Schema
+ * Defines a single data series in the chart
+ */
+export const ChartSeriesSchema = z.object({
+  /** Field name for values */
+  name: z.string().describe('Field name or series identifier'),
+  
+  /** Display label */
+  label: z.string().optional().describe('Series display label'),
+  
+  /** Series type override (combo charts) */
+  type: ChartTypeSchema.optional().describe('Override chart type for this series'),
+  
+  /** Specific color */
+  color: z.string().optional().describe('Series color (hex/rgb/token)'),
+  
+  /** Stacking group */
+  stack: z.string().optional().describe('Stack identifier to group series'),
+  
+  /** Axis binding */
+  yAxis: z.enum(['left', 'right']).default('left').describe('Bind to specific Y-Axis'),
+});
+
+/**
+ * Chart Annotation Schema
+ * Static lines or regions to highlight data
+ */
+export const ChartAnnotationSchema = z.object({
+  type: z.enum(['line', 'region']).default('line'),
+  axis: z.enum(['x', 'y']).default('y'),
+  value: z.union([z.number(), z.string()]).describe('Start value'),
+  endValue: z.union([z.number(), z.string()]).optional().describe('End value for regions'),
+  color: z.string().optional(),
+  label: z.string().optional(),
+  style: z.enum(['solid', 'dashed', 'dotted']).default('dashed'),
+});
+
+/**
+ * Chart Interaction Schema
+ */
+export const ChartInteractionSchema = z.object({
+  tooltips: z.boolean().default(true),
+  zoom: z.boolean().default(false),
+  brush: z.boolean().default(false),
+  clickAction: z.string().optional().describe('Action ID to trigger on click'),
+});
+
 /**
  * Chart Configuration Base
  * Common configuration for all chart types
  */
 export const ChartConfigSchema = z.object({
+  /** Chart Type */
   type: ChartTypeSchema,
+  
+  /** Titles */
   title: z.string().optional().describe('Chart title'),
-  description: z.string().optional().describe('Chart description'),
-  showLegend: z.boolean().optional().default(true).describe('Display legend'),
-  showDataLabels: z.boolean().optional().default(false).describe('Display data labels on chart'),
-  colors: z.array(z.string()).optional().describe('Custom color palette'),
+  subtitle: z.string().optional().describe('Chart subtitle'),
+  description: z.string().optional().describe('Accessibility description'),
+  
+  /** Axes Mapping */
+  xAxis: ChartAxisSchema.optional().describe('X-Axis configuration'),
+  yAxis: z.array(ChartAxisSchema).optional().describe('Y-Axis configuration (support dual axis)'),
+  
+  /** Series Configuration */
+  series: z.array(ChartSeriesSchema).optional().describe('Defined series configuration'),
+  
+  /** Appearance */
+  colors: z.array(z.string()).optional().describe('Color palette'),
+  height: z.number().optional().describe('Fixed height in pixels'),
+  
+  /** Components */
+  showLegend: z.boolean().default(true).describe('Display legend'),
+  showDataLabels: z.boolean().default(false).describe('Display data labels'),
+  
+  /** Annotations & Reference Lines */
+  annotations: z.array(ChartAnnotationSchema).optional(),
+  
+  /** Interactions */
+  interaction: ChartInteractionSchema.optional(),
 });
 
 export type ChartConfig = z.infer<typeof ChartConfigSchema>;
+export type ChartAxis = z.infer<typeof ChartAxisSchema>;
+export type ChartSeries = z.infer<typeof ChartSeriesSchema>;

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

@@ -33,7 +33,10 @@ export const PageCardProps = z.object({
   title: z.string().optional(),
   bordered: z.boolean().default(true),
   actions: z.array(z.string()).optional(),
-  children: z.array(z.any()).describe('Card content')
+  /** Slot for nested content in the Card body */
+  body: z.array(z.any()).optional().describe('Card content components (slot)'),
+  /** Slot for footer content */
+  footer: z.array(z.any()).optional().describe('Card footer components (slot)'),
 });
 
 /**

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

@@ -43,10 +43,32 @@ export const PageComponentSchema = z.object({
   label: z.string().optional(),
   properties: z.record(z.string(), z.any()).describe('Component props passed to the widget. See component.zod.ts for schemas.'),
 
+  /** 
+   * Event Handlers 
+   * Map event names to Action expressions.
+   * "onClick": "set_variable('userId', $event.id)"
+   * "onRowSelect": "navigate_to('page_detail', { id: $event.id })"
+   */
+  events: z.record(z.string(), z.string()).optional().describe('Event handlers map'),
+
+  /** Appearance */
+  style: z.record(z.string(), z.string()).optional().describe('Inline styles or utility classes'),
+  className: z.string().optional().describe('CSS class names'),
+
   /** Visibility Rule */
   visibility: z.string().optional().describe('Visibility filter/formula')
 });
 
+/**
+ * Page Variable Schema
+ * Defines local state for the page.
+ */
+export const PageVariableSchema = z.object({
+  name: z.string().describe('Variable name'),
+  type: z.enum(['string', 'number', 'boolean', 'object', 'array']).default('string'),
+  defaultValue: z.any().optional(),
+});
+
 /**
  * Page Schema
  * Defines a composition of components for a specific context (Record, Home, App).
@@ -74,6 +96,9 @@ export const PageSchema = z.object({
   /** Page Type */
   type: z.enum(['record', 'home', 'app', 'utility']).default('record'),
 
+  /** Page State Definitions */
+  variables: z.array(PageVariableSchema).optional().describe('Local page state variables'),
+
   /** Context */
   object: z.string().optional().describe('Bound object (for Record pages)'),
 

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

@@ -236,6 +236,32 @@ export type WidgetProperty = z.infer<typeof WidgetPropertySchema>;
  * }
  * ```
  */
+/**
+ * Widget Source Schema
+ * Defines how the widget code is loaded.
+ */
+export const WidgetSourceSchema = z.discriminatedUnion('type', [
+  // NPM Registry (standard)
+  z.object({
+    type: z.literal('npm'),
+    packageName: z.string().describe('NPM package name'),
+    version: z.string().default('latest'),
+    exportName: z.string().optional().describe('Named export (default: default)'),
+  }),
+  // Module Federation (Remote)
+  z.object({
+    type: z.literal('remote'),
+    url: z.string().url().describe('Remote entry URL (.js)'),
+    moduleName: z.string().describe('Exposed module name'),
+    scope: z.string().describe('Remote scope name'),
+  }),
+  // Inline Code (Simple scripts)
+  z.object({
+    type: z.literal('inline'),
+    code: z.string().describe('JavaScript code body'),
+  }),
+]);
+
 export const WidgetManifestSchema = z.object({
   /**
    * Widget identifier (snake_case)
@@ -300,12 +326,9 @@ export const WidgetManifestSchema = z.object({
 
   /**
    * Widget implementation
-   * URL to component or inline code
+   * Defines how to load the widget code
    */
-  implementation: z.object({
-    type: z.enum(['url', 'inline', 'module']).describe('Implementation type'),
-    source: z.string().describe('Source URL, inline code, or module path'),
-  }).optional().describe('Widget implementation'),
+  implementation: WidgetSourceSchema.optional().describe('Widget implementation source'),
 
   /**
    * Widget dependencies