Add action handler system for widget event handling

[Copilot]

Implements a structured event handling system allowing widgets to dispatch typed actions from template expressions.

Changes

Expression executor (packages/widget/src/Expression.ts)

• Added ActionCallback type: (action: {type: string, payload?: unknown}) => void
• Extended executeExpression to accept optional action callback
• Injected action function into expression sandbox alongside data, Math, etc.

Widget renderer (packages/widget-renderer/src/)

• Created ActionContext with useAction hook for components
• Added onAction?: ActionCallback prop to WidgetRenderer
• Propagated action through expression resolution and component tree

Example usage

• Updated default template and Button definition with action handler examples

Usage

Templates can dispatch actions from event handlers:

<Button onClick={action({type: "driver.contact", payload: data.driver.name})}>
  Contact Driver
</Button>

Application handles actions via callback:

<WidgetRenderer 
  schema={schema}
  components={components}
  data={data}
  onAction={(action) => {
    // action.type: "driver.contact"
    // action.payload: "Jonathan"
  }}
/>

The action function is available in all expression contexts alongside data, enabling declarative event handling without breaking expression evaluation.

Original prompt

Design a common action handle for events on widgets

• Add a events variant includes onClick or other common events
• Add ActionContext and useAction provided by WidgetRenderer witch supporting a onAction prop at sometime
• Passing the action function to the expression executer
• Usage in template onClick={action({type:"biz.test", payload: data.id})}

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.