interface WidgetAction {
  type: string;          // Action type (e.g., 'lyzn.sendMessage')
  payload?: object;      // Action-specific parameters
}

<Button
  label="Submit"
  onClickAction={{
    type: "lyzn.sendMessage",
    payload: { message: "Form submitted" }
  }}
/>

<Button
  label="Save"
  onClickAction={{
    type: "lyzn.showToast",
    payload: { message: "Changes saved!", type: "success" }
  }}
/>

<Button
  label="Open Settings"
  onClickAction={{
    type: "lyzn.openLink",
    payload: { url: "myapp://settings" }
  }}
/>

<Button
  label="Visit Website"
  onClickAction={{
    type: "lyzn.openLink",
    payload: { url: "https://example.com", external: true }
  }}
/>

<Button
  label="Clear Form"
  onClickAction={{ type: "lyzn.resetState" }}
/>

<Button
  label="Clear Name"
  onClickAction={{
    type: "lyzn.resetState",
    payload: { fields: ["firstName", "lastName"] }
  }}
/>

<Select
  name="country"
  options={countries}
  action={{
    type: "lyzn.fetch",
    payload: {
      url: "/api/cities",
      method: "GET"
    }
  }}
/>

<Button
  label="Submit"
  onClickAction={{ type: "lyzn.sendMessage" }}
/>

<Select
  name="theme"
  options={themes}
  action={{
    type: "lyzn.showToast",
    payload: { message: "Theme updated!" }
  }}
/>

<Card
  confirm={{
    label: "Submit",
    action: { type: "lyzn.sendMessage" }
  }}
  cancel={{
    label: "Reset",
    action: { type: "lyzn.resetState" }
  }}
>
  <Select name="option" options={options} />
</Card>

// These selections update form state
<Select name="color" options={colors} />
<Select name="size" options={sizes} />

// This button sends all form data
<Button
  label="Confirm"
  onClickAction={{ type: "lyzn.sendMessage" }}
/>

{ "color": "red", "size": "large" }

<Select
  name="country"
  options={countries}
  action={{
    type: "lyzn.showToast",
    payload: { message: "Selected: {{value}}" }
  }}
/>

<Card
  confirm={{
    label: "Generate Post",
    action: { type: "lyzn.sendMessage" }
  }}
>
  <Col gap={3}>
    <Title value="LinkedIn Post Setup" size="sm" />
    <Text value="Configure your post settings" size="sm" color="secondary" />
    <Divider />
    
    <Col gap={2}>
      <Label value="Tone" />
      <Select
        name="post.tone"
        options={[
          { value: "professional", label: "Professional" },
          { value: "casual", label: "Casual" },
          { value: "inspirational", label: "Inspirational" }
        ]}
        defaultValue="professional"
      />
    </Col>
    
    <Col gap={2}>
      <Label value="Length" />
      <RadioGroup
        name="post.length"
        options={[
          { value: "short", label: "Short" },
          { value: "medium", label: "Medium" },
          { value: "long", label: "Long" }
        ]}
        defaultValue="medium"
      />
    </Col>
    
    <Checkbox
      name="post.includeEmoji"
      label="Include emojis"
      defaultValue={true}
    />
  </Col>
</Card>

{
  "post.tone": "professional",
  "post.length": "medium",
  "post.includeEmoji": true
}