@maestro-js/agent-skills 1.0.0-alpha.2 → 1.0.0-alpha.21

package/skills/maestro-examples/references/cadence/cadence-web/app/routes/contacts.tsx

@@ -0,0 +1,183 @@
+import { useMemo } from 'react'
+import { data, redirect, useLoaderData } from 'react-router'
+import type { LoaderFunctionArgs } from 'react-router'
+import type { ContactSchemas } from '@cadence/schemas'
+import { getRequestContext } from '~/features/request-context.server'
+import { ContactService } from '~/services.server'
+import { Table } from '~/components/table'
+import { ButtonLink } from '~/components/button-link'
+import { Icon } from '~/components/icon'
+import { EmptyState } from '~/components/empty-state'
+import { PageHeader } from '~/components/page-header'
+import { Chip } from '~/components/chip'
+import { formatDate } from '~/utils/format-date'
+import { getColor, stringToNumber } from '~/utils/colors'
+
+type Contact = ContactSchemas.contactWithLastContactedModel
+
+export async function loader({ context }: LoaderFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.profile) throw redirect('/auth/login')
+
+  const [{ contacts }, { tags }] = await Promise.all([
+    ContactService.ListContacts({}, requestContext.profile),
+    ContactService.ListTags({}, requestContext.profile)
+  ])
+
+  return data({
+    contacts,
+    tags,
+    profile: requestContext.profile
+  })
+}
+
+export default function ContactsPage() {
+  const { contacts, tags, profile } = useLoaderData<typeof loader>()
+  const canCreate = profile.role === 'admin' || profile.role === 'member'
+
+  const newContactButton = canCreate ? (
+    <ButtonLink to="/contacts/new">
+      <Icon name="plus" className="size-4" />
+      New Contact
+    </ButtonLink>
+  ) : undefined
+
+  if (contacts.length === 0) {
+    return (
+      <div className="flex flex-col gap-6">
+        <PageHeader
+          title="Contacts"
+          description="0 contacts total"
+          actions={newContactButton}
+        />
+        <EmptyState
+          icon={<Icon name="users" className="size-12" />}
+          heading="No contacts yet"
+          description="Get started by adding your first contact."
+          action={canCreate ? <ButtonLink to="/contacts/new">New Contact</ButtonLink> : undefined}
+        />
+      </div>
+    )
+  }
+
+  const tagOptions = useMemo(() => tags.map((t) => ({ label: t, value: t })), [tags])
+
+  const table = Table.useClientTable({
+    rows: contacts,
+    getRowId: (row) => row.id.toString(),
+    filters: {
+      tag: (row, value: string) => row.tags.includes(value),
+      lastContacted: (row, value: string) => {
+        const date = row.lastContactedDate
+        if (value === 'never') return date === null
+        if (date === null) return false
+        const daysSince = Math.floor((Date.now() - new Date(date).getTime()) / (1000 * 60 * 60 * 24))
+        switch (value) {
+          case '7d':
+            return daysSince <= 7
+          case '30d':
+            return daysSince <= 30
+          case '>30d':
+            return daysSince > 30
+          case '>90d':
+            return daysSince > 90
+          default:
+            return true
+        }
+      }
+    },
+    sorts: {
+      nameAZ: (a, b) =>
+        `${a.firstName} ${a.lastName ?? ''}`.localeCompare(`${b.firstName} ${b.lastName ?? ''}`),
+      nameZA: (a, b) =>
+        `${b.firstName} ${b.lastName ?? ''}`.localeCompare(`${a.firstName} ${a.lastName ?? ''}`),
+      newest: (a, b) => new Date(b.createdDate).getTime() - new Date(a.createdDate).getTime(),
+      oldest: (a, b) => new Date(a.createdDate).getTime() - new Date(b.createdDate).getTime(),
+      recentlyContacted: (a, b) => {
+        const aDate = a.lastContactedDate ? new Date(a.lastContactedDate).getTime() : 0
+        const bDate = b.lastContactedDate ? new Date(b.lastContactedDate).getTime() : 0
+        return bDate - aDate
+      }
+    },
+    search: { keys: ['firstName', 'lastName', 'email', 'jobTitle'] },
+    defaultPageSize: 25
+  })
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader
+        title="Contacts"
+        description={`${contacts.length} ${contacts.length === 1 ? 'contact' : 'contacts'} total`}
+      />
+
+      <Table
+        table={table}
+        localization={{
+          filters: {
+            tag: {
+              label: 'Tags',
+              options: tagOptions
+            },
+            lastContacted: {
+              label: 'Last Contacted',
+              options: [
+                { value: '7d', label: 'Last 7 days' },
+                { value: '30d', label: 'Last 30 days' },
+                { value: '>30d', label: 'Over 30 days' },
+                { value: '>90d', label: 'Over 90 days' },
+                { value: 'never', label: 'Never contacted' }
+              ]
+            }
+          },
+          sorts: {
+            nameAZ: { label: 'Name A-Z' },
+            nameZA: { label: 'Name Z-A' },
+            newest: { label: 'Newest' },
+            oldest: { label: 'Oldest' },
+            recentlyContacted: { label: 'Recently Contacted' }
+          },
+          searchPlaceholder: 'Search contacts...'
+        }}
+        actions={newContactButton}
+      >
+        {table.getRows().map((row) => (
+          <Table.Row key={row.id} row={row} aria-label={`${row.firstName} ${row.lastName ?? ''}`}>
+            <Table.Cell className="grow">
+              <div className="flex items-center justify-between gap-4">
+                <Table.TitleLink to={`/contacts/${row.id}`}>
+                  {row.firstName}
+                  {row.lastName ? ` ${row.lastName}` : ''}
+                </Table.TitleLink>
+                {row.tags.length > 0 && (
+                  <div className="flex flex-wrap gap-1 shrink-0">
+                    {row.tags.map((tag) => (
+                      <Chip key={tag} size="sm" style={{ backgroundColor: getColor(stringToNumber(tag)), color: 'white' }}>
+                        {tag}
+                      </Chip>
+                    ))}
+                  </div>
+                )}
+              </div>
+              <div className="mt-0.5 flex items-center justify-between gap-4">
+                <Table.Description>{row.email ?? row.jobTitle ?? '--'}</Table.Description>
+                <p className="text-xs tabular-nums text-gray-400 shrink-0">
+                  {row.lastContactedDate ? formatDate(row.lastContactedDate) : 'Never contacted'}
+                </p>
+              </div>
+            </Table.Cell>
+            <Table.Cell className="grow-0 shrink-0 flex items-center">
+              <Table.Actions
+                actions={[
+                  { label: 'Edit', to: `/contacts/${row.id}/edit` },
+                  { label: 'Archive', to: `/contacts/${row.id}/archive` },
+                  { label: 'Delete', to: `/contacts/${row.id}/delete` }
+                ]}
+                compact
+              />
+            </Table.Cell>
+          </Table.Row>
+        ))}
+      </Table>
+    </div>
+  )
+}

package/skills/maestro-examples/references/cadence/cadence-web/app/routes/settings.tsx

@@ -0,0 +1,158 @@
+import { data, redirect, useLoaderData, useNavigation } from 'react-router'
+import type { ActionFunctionArgs, LoaderFunctionArgs } from 'react-router'
+import { getRequestContext } from '~/features/request-context.server'
+import { redirectWithToast } from '~/features/redirect-with-toast.server'
+import { AuthService, OrganizationService } from '~/services.server'
+import { OrganizationSchemas } from '@cadence/schemas'
+import { Form } from '~/components/form'
+import { TextField } from '~/components/text-field'
+import { Button } from '~/components/button'
+import { Container } from '~/components/container'
+import { PageHeader } from '~/components/page-header'
+import { useState } from 'react'
+
+export async function loader({ context }: LoaderFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.profile) throw redirect('/auth/login')
+
+  const organization = await OrganizationService.ViewOrganization({}, requestContext.profile)
+
+  return data({
+    organization: {
+      name: organization!.name,
+      slug: organization!.slug
+    },
+    role: requestContext.profile.role
+  })
+}
+
+export async function action({ request, context }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.profile) throw redirect('/auth/login')
+
+  const formData = await request.formData()
+  const intent = formData.get('intent')
+
+  switch (intent) {
+    case 'edit': {
+      const parsed = await Form.serverSafeParse(OrganizationSchemas.editOrganizationForm, formData)
+      if (!parsed.success) {
+        return Form.validationError({ issues: parsed.issues, formData })
+      }
+
+      await OrganizationService.EditOrganization(parsed.data, requestContext.profile)
+
+      return redirectWithToast('/settings', { title: 'Organization updated', variant: 'positive' }, requestContext.session)
+    }
+
+    case 'delete': {
+      await OrganizationService.DeleteOrganization({}, requestContext.profile)
+
+      const { cookie } = await AuthService.Logout({
+        cookieHeader: request.headers.get('Cookie'),
+        session: requestContext.session
+      })
+
+      requestContext.session.flash('_toast', { title: 'Organization deleted', variant: 'positive' })
+
+      return redirect('/auth/login', { headers: cookie ? { 'Set-Cookie': cookie } : {} })
+    }
+
+    default:
+      throw new Response('Unknown intent', { status: 400 })
+  }
+}
+
+export default function Settings() {
+  const { organization, role } = useLoaderData<typeof loader>()
+  const navigation = useNavigation()
+  const isSubmitting = navigation.state === 'submitting'
+  const isAdmin = role === 'admin'
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+
+  return (
+    <div className="mx-auto max-w-2xl">
+      <PageHeader title="Organization Settings" description="Manage your organization details and preferences." />
+
+      <Container className="mt-8 overflow-hidden p-0">
+        <div className="border-b border-neutral-950/5 px-6 py-4">
+          <h2 className="typography-h3">General</h2>
+          <p className="mt-0.5 text-sm text-neutral-500">Basic information about your organization.</p>
+        </div>
+        <div className="px-6 py-5">
+          {isAdmin ? (
+            <Form method="post" className="space-y-5">
+              <input type="hidden" name="intent" value="edit" />
+              <TextField name="name" label="Organization name" defaultValue={organization.name} isRequired />
+              <div>
+                <label className="text-sm font-medium text-neutral-700">Slug</label>
+                <p className="mt-1 text-sm text-neutral-500 tabular-nums">{organization.slug}</p>
+              </div>
+              <div className="flex justify-end border-t border-neutral-950/5 pt-4">
+                <Button type="submit" isPending={isSubmitting}>
+                  Save changes
+                </Button>
+              </div>
+            </Form>
+          ) : (
+            <div className="space-y-5">
+              <div>
+                <label className="text-sm font-medium text-neutral-700">Organization name</label>
+                <p className="mt-1 text-sm text-neutral-900">{organization.name}</p>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-neutral-700">Slug</label>
+                <p className="mt-1 text-sm text-neutral-500 tabular-nums">{organization.slug}</p>
+              </div>
+            </div>
+          )}
+        </div>
+      </Container>
+
+      {isAdmin && (
+        <section className="mt-8 overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-red-600/10">
+          <div className="border-b border-red-600/10 px-6 py-4">
+            <h2 className="text-sm font-semibold text-red-600">Danger zone</h2>
+            <p className="mt-0.5 text-sm text-neutral-500">
+              Irreversible actions that permanently affect your organization.
+            </p>
+          </div>
+          <div className="px-6 py-5">
+            <div className="flex items-start justify-between gap-6">
+              <div>
+                <p className="text-sm font-medium text-neutral-900">Delete this organization</p>
+                <p className="mt-1 text-sm text-neutral-500">
+                  Once deleted, all data will be permanently removed. This action cannot be undone.
+                </p>
+              </div>
+              {!showDeleteConfirm && (
+                <Button color="negative" variant="outlined" onClick={() => setShowDeleteConfirm(true)}>
+                  Delete
+                </Button>
+              )}
+            </div>
+
+            {showDeleteConfirm && (
+              <div className="mt-4 rounded-lg bg-red-50 ring-1 ring-red-600/10 p-4">
+                <p className="text-sm font-medium text-red-800">
+                  Are you sure? This will permanently delete your organization and all associated data.
+                </p>
+                <div className="mt-3 flex gap-3">
+                  <Form method="post">
+                    <input type="hidden" name="intent" value="delete" />
+                    <Button type="submit" color="negative" isPending={isSubmitting}>
+                      Yes, delete organization
+                    </Button>
+                  </Form>
+                  <Button variant="outlined" color="neutral" onClick={() => setShowDeleteConfirm(false)}>
+                    Cancel
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
+        </section>
+      )}
+    </div>
+  )
+}

package/skills/maestro-examples/references/cadence/cadence-web/app/routes/users.tsx

@@ -0,0 +1,263 @@
+import * as React from 'react'
+import { data, redirect, useLoaderData, useFetcher } from 'react-router'
+import type { ActionFunctionArgs, LoaderFunctionArgs } from 'react-router'
+import { getRequestContext } from '~/features/request-context.server'
+import { redirectWithToast } from '~/features/redirect-with-toast.server'
+import { UserService, Log } from '~/services.server'
+import { UserSchemas } from '@cadence/schemas'
+import { Form } from '~/components/form'
+import { HeadlessForm } from '@maestro-js/form'
+import { TextField } from '~/components/text-field'
+import { Select } from '~/components/select'
+import { Button } from '~/components/button'
+import { Table } from '~/components/table'
+import { PageHeader } from '~/components/page-header'
+
+const log = Log.channel('user')
+
+export async function loader({ context }: LoaderFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.profile) {
+    throw redirect('/auth/login')
+  }
+
+  const users = await UserService.ListUsers(requestContext.profile)
+
+  return data({
+    users,
+    profile: requestContext.profile
+  })
+}
+
+export async function action({ request, context }: ActionFunctionArgs) {
+  const requestContext = getRequestContext(context)
+  if (!requestContext.profile) throw redirect('/auth/login')
+
+  const formData = await request.formData()
+  const intent = formData.get('intent')
+
+  switch (intent) {
+    case 'invite': {
+      const parsed = await Form.serverSafeParse(UserSchemas.inviteUserForm, formData)
+      if (!parsed.success) {
+        return Form.validationError({ issues: parsed.issues, formData })
+      }
+
+      try {
+        await UserService.InviteUser(parsed.data, requestContext.profile)
+
+        log.info('User invited via UI', { action: 'user.invite', email: parsed.data.email })
+
+        return redirectWithToast(
+          '/users',
+          { title: 'User invited', description: `Invitation sent to ${parsed.data.email}`, variant: 'positive' },
+          requestContext.session
+        )
+      } catch (error) {
+        if (error instanceof Response) throw error
+
+        if (error instanceof UserService.errors.EmailAlreadyInUseError) {
+          return Form.customValidationError({ message: 'A user with this email already exists', formData })
+        }
+
+        throw error
+      }
+    }
+
+    case 'change-role': {
+      const userId = Number(formData.get('userId'))
+      const parsed = await Form.serverSafeParse(UserSchemas.changeRoleForm, formData)
+      if (!parsed.success) {
+        return Form.validationError({ issues: parsed.issues, formData })
+      }
+
+      try {
+        await UserService.ChangeUserRole({ userId, role: parsed.data.role }, requestContext.profile)
+
+        log.info('User role changed via UI', { action: 'user.changeRole', userId, role: parsed.data.role })
+
+        return redirectWithToast(
+          '/users',
+          { title: 'Role updated', description: `User role changed to ${parsed.data.role}`, variant: 'positive' },
+          requestContext.session
+        )
+      } catch (error) {
+        if (error instanceof Response) throw error
+
+        if (error instanceof UserService.errors.CannotChangeOwnRoleError) {
+          return redirectWithToast('/users', { title: 'Error', description: 'You cannot change your own role', variant: 'negative' }, requestContext.session)
+        }
+
+        if (error instanceof UserService.errors.CannotDemoteLastAdminError) {
+          return redirectWithToast('/users', { title: 'Error', description: 'Cannot demote the last admin', variant: 'negative' }, requestContext.session)
+        }
+
+        if (error instanceof UserService.errors.UserNotFoundError) {
+          return redirectWithToast('/users', { title: 'Error', description: 'User not found', variant: 'negative' }, requestContext.session)
+        }
+
+        throw error
+      }
+    }
+
+    case 'remove': {
+      const userId = Number(formData.get('userId'))
+
+      try {
+        await UserService.RemoveUser({ userId }, requestContext.profile)
+
+        log.info('User removed via UI', { action: 'user.remove', userId })
+
+        return redirectWithToast('/users', { title: 'User removed', variant: 'positive' }, requestContext.session)
+      } catch (error) {
+        if (error instanceof Response) throw error
+
+        if (error instanceof UserService.errors.CannotRemoveSelfError) {
+          return redirectWithToast('/users', { title: 'Error', description: 'You cannot remove yourself', variant: 'negative' }, requestContext.session)
+        }
+
+        if (error instanceof UserService.errors.CannotRemoveLastAdminError) {
+          return redirectWithToast('/users', { title: 'Error', description: 'Cannot remove the last admin', variant: 'negative' }, requestContext.session)
+        }
+
+        if (error instanceof UserService.errors.UserNotFoundError) {
+          return redirectWithToast('/users', { title: 'Error', description: 'User not found', variant: 'negative' }, requestContext.session)
+        }
+
+        throw error
+      }
+    }
+
+    default:
+      throw new Response('Unknown intent', { status: 400 })
+  }
+}
+
+const roleOptions = UserSchemas.roleOptions.map((r) => ({ value: r, label: r.charAt(0).toUpperCase() + r.slice(1) }))
+
+export default function UsersPage() {
+  const { users, profile } = useLoaderData<typeof loader>()
+  const isAdmin = profile.role === 'admin'
+  const inviteFetcher = useFetcher()
+  const isInviting = inviteFetcher.state === 'submitting'
+
+  const table = Table.useClientTable({
+    rows: users,
+    getRowId: (row) => row.id.toString(),
+    filters: {
+      role: (row, value: string) => row.role === value
+    },
+    sorts: {
+      nameAZ: (a, b) => a.name.localeCompare(b.name),
+      nameZA: (a, b) => b.name.localeCompare(a.name),
+      newest: (a, b) => new Date(b.createdDate).getTime() - new Date(a.createdDate).getTime(),
+      oldest: (a, b) => new Date(a.createdDate).getTime() - new Date(b.createdDate).getTime()
+    },
+    search: { keys: ['name', 'email'] },
+    defaultPageSize: 25
+  })
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader title="Users" description="Manage your team members and their roles." />
+
+      {isAdmin && (
+        <div className="rounded-lg border border-neutral-950/10 bg-white p-6 shadow-xs">
+          <h2 className="typography-h2">Invite a new user</h2>
+          <p className="mt-1 text-sm text-neutral-500">Send an invitation to add someone to your team.</p>
+          <HeadlessForm as={inviteFetcher.Form} method="post" className="mt-5 grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-[1fr_1fr_1fr_auto] sm:items-end">
+            <input type="hidden" name="intent" value="invite" />
+            <TextField name="name" label="Name" placeholder="Jane Smith" isRequired />
+            <TextField name="email" label="Email" type="email" placeholder="jane@example.com" isRequired />
+            <Select name="role" label="Role" options={roleOptions} defaultValue="member" isRequired />
+            <Button type="submit" isPending={isInviting} className="sm:mb-6">
+              Send invite
+            </Button>
+          </HeadlessForm>
+        </div>
+      )}
+
+      <Table
+        table={table}
+        localization={{
+          filters: {
+            role: {
+              label: 'Role',
+              options: roleOptions
+            }
+          },
+          sorts: {
+            nameAZ: { label: 'Name A-Z' },
+            nameZA: { label: 'Name Z-A' },
+            newest: { label: 'Newest' },
+            oldest: { label: 'Oldest' }
+          },
+          searchPlaceholder: 'Search users...'
+        }}
+      >
+        {table.getRows().map((row) => (
+          <UserRow key={row.id} user={row} profile={profile} isAdmin={isAdmin} />
+        ))}
+      </Table>
+    </div>
+  )
+}
+
+function UserRow({
+  user,
+  profile,
+  isAdmin
+}: {
+  user: UserSchemas.userModel
+  profile: UserSchemas.profileModel
+  isAdmin: boolean
+}) {
+  const isSelf = user.id === profile.userId
+  const changeRoleFetcher = useFetcher()
+  const removeFetcher = useFetcher()
+  const changeRoleFormRef = React.useRef<HTMLFormElement>(null)
+  const isRemoving = removeFetcher.state === 'submitting'
+
+  return (
+    <Table.Row row={user} aria-label={user.name}>
+      <Table.Cell className="grow">
+        <Table.Title>
+          {user.name}
+          {isSelf && <span className="ml-2 text-neutral-400">(you)</span>}
+        </Table.Title>
+        <Table.Description>{user.email}</Table.Description>
+      </Table.Cell>
+      <Table.Cell className="grow-0 shrink-0 flex items-center">
+        {isAdmin && !isSelf ? (
+          <HeadlessForm as={changeRoleFetcher.Form} ref={changeRoleFormRef} method="post" className="flex items-center gap-2">
+            <input type="hidden" name="intent" value="change-role" />
+            <input type="hidden" name="userId" value={user.id} />
+            <Select
+              name="role"
+              options={roleOptions}
+              defaultValue={user.role}
+              onChange={(value) => {
+                if (value && value !== user.role) {
+                  changeRoleFormRef.current?.requestSubmit()
+                }
+              }}
+            />
+          </HeadlessForm>
+        ) : (
+          <span className="text-sm capitalize text-gray-500">{user.role}</span>
+        )}
+      </Table.Cell>
+      {isAdmin && !isSelf && (
+        <Table.Cell className="grow-0 shrink-0 flex items-center">
+          <HeadlessForm as={removeFetcher.Form} method="post">
+            <input type="hidden" name="intent" value="remove" />
+            <input type="hidden" name="userId" value={user.id} />
+            <Button type="submit" color="negative" isPending={isRemoving} variant="outlined" className="text-xs px-2 py-1">
+              Remove
+            </Button>
+          </HeadlessForm>
+        </Table.Cell>
+      )}
+    </Table.Row>
+  )
+}

package/skills/maestro-examples/references/cadence/cadence-web/app/routes.ts

@@ -0,0 +1,4 @@
+import { type RouteConfig } from '@react-router/dev/routes'
+import { ReactRouterFileRoutes } from '@maestro-js/react-router-file-routes'
+
+export default ReactRouterFileRoutes.getRoutes('routes') satisfies RouteConfig

package/skills/maestro-examples/references/cadence/cadence-web/app/services.server.ts

@@ -0,0 +1 @@
+export * from '@cadence/services'

package/skills/maestro-examples/references/cadence/cadence-web/app/utils/colors.ts

@@ -0,0 +1,47 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add colors --directory app
+
+export const COLORS = [
+  '#f43f5e',
+  '#3b82f6',
+  '#22c55e',
+  '#EAB308',
+  '#8b5cf6',
+  '#191970',
+  '#f97316',
+  '#6b7280',
+  '#ec4899',
+  '#06b6d4',
+  '#84cc16',
+  '#64748b',
+  '#ffff00',
+  '#6366f1',
+  '#ff6347',
+  '#737373',
+  '#14b8a6',
+  '#f59e0b',
+  '#0ea5e9',
+  '#ef4444',
+  '#78716c',
+  '#00ffff',
+  '#d946ef',
+  '#10b981',
+  '#b22222',
+  '#40e0d0',
+  '#71717a',
+  '#a855f7',
+  '#7fff00'
+] as const
+
+export function stringToNumber(str: string) {
+  let h = 0x811c9dc5 // FNV offset basis
+  for (const b of new TextEncoder().encode(str)) {
+    h ^= b
+    h = Math.imul(h, 0x01000193) // 16777619
+  }
+  return h >>> 0 // unsigned 32-bit
+}
+
+export function getColor(seed: number) {
+  return COLORS[seed % COLORS.length]
+}

package/skills/maestro-examples/references/cadence/cadence-web/app/utils/compose-event-handlers.ts

@@ -0,0 +1,13 @@
+export function composeEventHandlers<E>(
+  originalEventHandler?: (event: E) => void,
+  ourEventHandler?: (event: E) => void,
+  { checkForDefaultPrevented = true } = {}
+) {
+  return function handleEvent(event: E) {
+    originalEventHandler?.(event)
+
+    if (checkForDefaultPrevented === false || !(event as unknown as Event)?.defaultPrevented) {
+      return ourEventHandler?.(event)
+    }
+  }
+}