@pmcollab/coworkstream-modals

Lightweight Delegate / Confirm / Collaborate modals for @pmcollab/coworkstream.

Install

npm install @pmcollab/coworkstream-modals

Use

import { useState } from 'react'
import { WorkStream } from '@pmcollab/coworkstream'
import { DelegateModal, ConfirmModal } from '@pmcollab/coworkstream-modals'

const agents = [
  { id: 'eng-lead', name: 'Engineering Lead', avatar: '🛠' },
  { id: 'cs-agent', name: 'Customer Insights', avatar: '🎧' },
]

function Inbox() {
  const [delegating, setDelegating] = useState(null)
  const [confirming, setConfirming] = useState(null)

  return (
    <>
      <WorkStream
        items={items}
        onAction={(action, item) => {
          if (action === 'delegate') setDelegating(item)
          else if (action === 'reject') setConfirming({ item, action })
          else api.itemAction(item.id, action)
        }}
      />
      <DelegateModal
        open={!!delegating}
        item={delegating}
        agents={agents}
        onClose={() => setDelegating(null)}
        onDelegate={(agent, item) => api.delegate(item.id, agent.id)}
      />
      <ConfirmModal
        open={!!confirming}
        title="Reject this item?"
        message="This action cannot be undone."
        confirmLabel="Reject"
        variant="danger"
        onClose={() => setConfirming(null)}
        onConfirm={() => api.itemAction(confirming.item.id, 'reject')}
      />
    </>
  )
}

What's included

• <ConfirmModal> — single-action confirm with customizable copy and variant.
• <DelegateModal> — pick from a list of agents; emits (agent, item) on selection.
• <CollaborateModal> — note input; emits { item, note } on submit.

All modals support escape-to-close and place initial focus inside the dialog. They do not ship a focus trap or scroll-lock — wrap with your existing modal infrastructure (or Radix Dialog) for production-grade behaviour.

License

Commercial. See LICENSE in the repository root.