Dialog Plugin (euixjs/dialog)

<uid_spec>
  <data_model>
    <state id="isConfirmOpen" type="boolean">false</state>
  </data_model>

  <flex direction="column" gap="12">
    <button class="btn">
      <on_click action="SET_STATE">
        <path>data.isConfirmOpen</path>
        <value>true</value>
      </on_click>
      Open Confirmation Modal
    </button>

    <!-- Modal Dialog Definition -->
    <dialog bind="data.isConfirmOpen" title="Confirm Delete">
      <p class="text-sm text-slate-600 mb-4">
        Are you sure you want to delete this project? This action cannot be reversed.
      </p>

      <flex direction="row" justify="end" gap="8">
        <button class="btn-cancel">
          <on_click action="SET_STATE">
            <path>data.isConfirmOpen</path>
            <value>false</value>
          </on_click>
          Cancel
        </button>

        <button class="btn-danger">
          <on_click action="SET_STATE">
            <path>data.isConfirmOpen</path>
            <value>false</value>
          </on_click>
          Confirm Delete
        </button>
      </flex>
    </dialog>
  </flex>
</uid_spec>