@alfakit/react 0.0.0-stage → 0.1.1

package/dist/components/helpdesk/inbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inbox.js","names":[],"sources":["../../../src/components/helpdesk/inbox.tsx"],"sourcesContent":["import type {\n  HelpdeskBadge,\n  HelpdeskInboxSchema,\n  HelpdeskMessage,\n  HelpdeskSla,\n  HelpdeskTicket,\n  HelpdeskTicketSummary,\n  LocaleFormatter,\n} from '@alfakit/core'\nimport { HelpdeskInboxController, helpdeskFileSize, presenceInitials } from '@alfakit/core'\nimport {\n  ArrowLeftIcon,\n  ExternalLinkIcon,\n  LockIcon,\n  PaperclipIcon,\n  SearchIcon,\n  SendIcon,\n} from 'lucide-react'\nimport { useEffect, useId, useRef, useState, type KeyboardEvent, type RefObject } from 'react'\nimport { useActionRunner, useFormatter, useT } from '../../context'\nimport { useStore } from '../../hooks/use-store'\nimport { badgeColorClasses, colorClass } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport { ActionList } from '../actions/action-list'\nimport { RecordPresence } from '../realtime/record-presence'\nimport { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'\nimport { Badge } from '../ui/badge'\nimport { Button } from '../ui/button'\nimport { Card } from '../ui/card'\nimport { Input } from '../ui/input'\nimport { Skeleton } from '../ui/skeleton'\nimport { Spinner } from '../ui/spinner'\nimport { Textarea } from '../ui/textarea'\n\ntype Translate = ReturnType<typeof useT>\n\n/**\n * The helpdesk agent inbox (schema component `helpdesk:inbox`, alfasix/alfakit-helpdesk):\n * views, the ticket list and the conversation side by side, a quick composer, keyboard\n * shortcuts (`j` / `k`, `r`, `n`, `/`) and live updates.\n */\nexport function HelpdeskInbox({ component }: { component: HelpdeskInboxSchema }) {\n  return <InboxView key={component.actionComponent} schema={component} />\n}\n\nfunction InboxView({ schema }: { schema: HelpdeskInboxSchema }) {\n  const runner = useActionRunner()\n  const page = usePageActionContext()\n  const t = useT()\n  const formatter = useFormatter()\n  const [controller] = useState(\n    () => new HelpdeskInboxController(schema, { runner, token: page.token, t }),\n  )\n  const state = useStore(controller.store)\n  const searchRef = useRef<HTMLInputElement>(null)\n  const composerRef = useRef<HTMLTextAreaElement>(null)\n  const listRef = useRef<HTMLUListElement>(null)\n  const first = useRef(true)\n\n  useEffect(() => {\n    controller.setEnvironment({ runner, token: page.token, t })\n  })\n\n  useEffect(() => {\n    if (first.current) {\n      first.current = false\n\n      return\n    }\n\n    controller.setSchema(schema)\n  }, [controller, schema])\n\n  useEffect(() => controller.start(), [controller])\n\n  useEffect(\n    () =>\n      controller.registerShortcuts({\n        focusComposer: () => requestAnimationFrame(() => composerRef.current?.focus()),\n        focusSearch: () => searchRef.current?.focus(),\n        focusTicket: (key) =>\n          requestAnimationFrame(() =>\n            listRef.current\n              ?.querySelector<HTMLElement>(`[data-ticket=\"${CSS.escape(key)}\"]`)\n              ?.focus(),\n          ),\n      }),\n    [controller],\n  )\n\n  const ticket = state.ticket\n\n  return (\n    <Card\n      data-slot=\"helpdesk-inbox\"\n      className=\"grid h-[calc(100svh-12rem)] min-h-[34rem] grid-cols-1 gap-0 overflow-hidden py-0 md:grid-cols-[18rem_1fr] xl:grid-cols-[13rem_20rem_1fr]\"\n    >\n      <nav\n        data-slot=\"helpdesk-views\"\n        aria-label={t('helpdesk.views', {}, 'Views')}\n        className={cn(\n          'flex gap-1 overflow-x-auto border-b p-2 md:col-span-2 xl:col-span-1 xl:flex-col xl:overflow-visible xl:border-e xl:border-b-0',\n          state.selected !== null && 'max-md:hidden',\n        )}\n      >\n        {state.list.views.map((view) => (\n          <button\n            key={view.key}\n            type=\"button\"\n            aria-current={view.key === state.view ? 'page' : undefined}\n            onClick={() => controller.setView(view.key)}\n            className=\"hover:bg-muted aria-[current=page]:bg-muted aria-[current=page]:text-foreground text-muted-foreground flex shrink-0 items-center gap-2 rounded-md px-2.5 py-1.5 text-start text-sm font-medium\"\n          >\n            <Icon name={view.icon} className=\"size-4 shrink-0\" />\n            <span className=\"flex-1 truncate\">{view.label}</span>\n            {view.count !== undefined && view.count > 0 && (\n              <span\n                className={cn(\n                  'rounded-full px-1.5 text-xs tabular-nums',\n                  view.color ? colorClass(badgeColorClasses, view.color) : 'bg-muted-foreground/10',\n                )}\n              >\n                {formatter.number(view.count)}\n              </span>\n            )}\n          </button>\n        ))}\n      </nav>\n\n      <section\n        data-slot=\"helpdesk-list\"\n        aria-label={t('helpdesk.tickets', {}, 'Tickets')}\n        className={cn('flex min-h-0 flex-col border-e', state.selected !== null && 'max-md:hidden')}\n      >\n        <div className=\"relative border-b p-2\">\n          <SearchIcon\n            aria-hidden=\"true\"\n            className=\"text-muted-foreground pointer-events-none absolute start-4 top-1/2 size-4 -translate-y-1/2\"\n          />\n          <Input\n            ref={searchRef}\n            type=\"search\"\n            value={state.search}\n            onChange={(event) => controller.setSearch(event.target.value)}\n            placeholder={t(\n              'helpdesk.search_placeholder',\n              {},\n              'Search by subject, requester or #number…',\n            )}\n            aria-label={t('helpdesk.search', {}, 'Search tickets')}\n            className=\"ps-8\"\n          />\n        </div>\n        <div className=\"min-h-0 flex-1 overflow-y-auto\" aria-busy={state.loadingList || undefined}>\n          {state.list.tickets.length === 0 ? (\n            <div className=\"text-muted-foreground flex flex-col items-center gap-1 p-8 text-center text-sm\">\n              {state.loadingList ? (\n                <Spinner />\n              ) : (\n                <>\n                  <p className=\"text-foreground font-medium\">\n                    {t('helpdesk.empty', {}, 'No tickets here')}\n                  </p>\n                  <p>\n                    {t(\n                      'helpdesk.empty_description',\n                      {},\n                      'Nothing needs your attention in this view.',\n                    )}\n                  </p>\n                </>\n              )}\n            </div>\n          ) : (\n            <ul ref={listRef} className=\"divide-y\">\n              {state.list.tickets.map((item) => (\n                <TicketRow\n                  key={item.key}\n                  ticket={item}\n                  selected={item.key === state.selected}\n                  formatter={formatter}\n                  t={t}\n                  onSelect={() => void controller.select(item.key)}\n                />\n              ))}\n            </ul>\n          )}\n          {state.list.hasMore && (\n            <div className=\"p-2\">\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"w-full\"\n                disabled={state.loadingList}\n                onClick={() => void controller.loadMore()}\n              >\n                {state.loadingList && <Spinner />}\n                {t('helpdesk.load_more', {}, 'Load more')}\n              </Button>\n            </div>\n          )}\n        </div>\n      </section>\n\n      <section\n        data-slot=\"helpdesk-ticket\"\n        aria-label={\n          ticket\n            ? `${ticket.reference} ${ticket.subject}`\n            : t('helpdesk.conversation', {}, 'Conversation')\n        }\n        className={cn('flex min-h-0 min-w-0 flex-col', state.selected === null && 'max-md:hidden')}\n      >\n        {state.selected === null ? (\n          <div className=\"text-muted-foreground m-auto flex max-w-xs flex-col items-center gap-1 p-8 text-center text-sm\">\n            <p className=\"text-foreground font-medium\">\n              {t('helpdesk.select', {}, 'Select a ticket')}\n            </p>\n            <p>\n              {t(\n                'helpdesk.select_description',\n                {},\n                'Pick a ticket on the list to read and answer it.',\n              )}\n            </p>\n          </div>\n        ) : ticket === null ? (\n          <div className=\"flex flex-col gap-3 p-4\" aria-busy=\"true\">\n            <span className=\"sr-only\">{t('helpdesk.loading', {}, 'Loading…')}</span>\n            {state.ticketError ? (\n              <p role=\"alert\" className=\"text-destructive text-sm\">\n                {t('helpdesk.load_failed', {}, 'The ticket could not be loaded.')}\n              </p>\n            ) : (\n              <>\n                <Skeleton className=\"h-6 w-2/3\" />\n                <Skeleton className=\"h-24\" />\n                <Skeleton className=\"h-24\" />\n              </>\n            )}\n          </div>\n        ) : (\n          <TicketPane\n            ticket={ticket}\n            controller={controller}\n            token={page.token}\n            actionComponent={schema.actionComponent}\n            requesterTyping={state.requesterTyping}\n            composerRef={composerRef}\n            formatter={formatter}\n            t={t}\n          />\n        )}\n      </section>\n      <div aria-live=\"polite\" className=\"sr-only\">\n        {state.announcement}\n      </div>\n    </Card>\n  )\n}\n\nfunction SlaBadge({\n  sla,\n  formatter,\n  t,\n}: {\n  sla: HelpdeskSla\n  formatter: LocaleFormatter\n  t: Translate\n}) {\n  if (sla.state === 'none') return null\n\n  return (\n    <Badge\n      variant=\"outline\"\n      className={colorClass(badgeColorClasses, sla.color, 'gray')}\n      title={sla.dueAt ? formatter.dateTime(sla.dueAt) : undefined}\n    >\n      {sla.label}\n      {sla.dueAt &&\n        (sla.state === 'due_soon' || sla.state === 'breached' || sla.state === 'on_track') && (\n          <span className=\"font-normal opacity-80\">\n            · {t('helpdesk.due', { time: formatter.relative(sla.dueAt) }, 'Due :time')}\n          </span>\n        )}\n    </Badge>\n  )\n}\n\nfunction StatusBadge({ badge }: { badge: HelpdeskBadge }) {\n  return (\n    <Badge variant=\"outline\" className={colorClass(badgeColorClasses, badge.color, 'gray')}>\n      {badge.label}\n    </Badge>\n  )\n}\n\nfunction TicketRow({\n  ticket,\n  selected,\n  formatter,\n  t,\n  onSelect,\n}: {\n  ticket: HelpdeskTicketSummary\n  selected: boolean\n  formatter: LocaleFormatter\n  t: Translate\n  onSelect: () => void\n}) {\n  return (\n    <li>\n      <button\n        type=\"button\"\n        data-ticket={ticket.key}\n        aria-current={selected ? 'true' : undefined}\n        onClick={onSelect}\n        className=\"hover:bg-muted/60 aria-[current=true]:bg-muted focus-visible:ring-ring/50 flex w-full flex-col gap-1 px-3 py-2.5 text-start outline-none focus-visible:ring-[3px]\"\n      >\n        <span className=\"flex items-center gap-2\">\n          {ticket.awaitingReply && (\n            <span className=\"bg-primary size-2 shrink-0 rounded-full\" aria-hidden=\"true\" />\n          )}\n          {ticket.awaitingReply && (\n            <span className=\"sr-only\">\n              {t('helpdesk.awaiting_reply', {}, 'Awaiting your reply')}\n            </span>\n          )}\n          <span className=\"text-muted-foreground text-xs tabular-nums\">{ticket.reference}</span>\n          <span className=\"truncate text-sm font-medium\">{ticket.subject}</span>\n          {ticket.lastActivityAt && (\n            <time\n              dateTime={ticket.lastActivityAt}\n              className=\"text-muted-foreground ms-auto shrink-0 text-xs\"\n            >\n              {formatter.relative(ticket.lastActivityAt)}\n            </time>\n          )}\n        </span>\n        <span className=\"text-muted-foreground flex items-center gap-1 text-xs\">\n          <Icon name={ticket.channelIcon} className=\"size-3 shrink-0\" />\n          <span className=\"truncate\">{ticket.requester}</span>\n          {ticket.assignee && <span className=\"truncate\">· {ticket.assignee}</span>}\n        </span>\n        {ticket.excerpt && (\n          <span\n            className={cn(\n              'text-muted-foreground line-clamp-2 text-xs',\n              ticket.excerptInternal && 'italic',\n            )}\n          >\n            {ticket.excerptInternal && (\n              <LockIcon\n                aria-label={t('helpdesk.internal', {}, 'Internal note')}\n                className=\"me-1 inline size-3\"\n              />\n            )}\n            {ticket.excerpt}\n          </span>\n        )}\n        <span className=\"flex flex-wrap gap-1\">\n          <StatusBadge badge={ticket.status} />\n          {ticket.priority.value !== 'normal' && <StatusBadge badge={ticket.priority} />}\n          <SlaBadge sla={ticket.sla} formatter={formatter} t={t} />\n        </span>\n      </button>\n    </li>\n  )\n}\n\nfunction TicketPane({\n  ticket,\n  controller,\n  token,\n  actionComponent,\n  requesterTyping,\n  composerRef,\n  formatter,\n  t,\n}: {\n  ticket: HelpdeskTicket\n  controller: HelpdeskInboxController\n  token: string\n  actionComponent: string\n  requesterTyping: boolean\n  composerRef: RefObject<HTMLTextAreaElement | null>\n  formatter: LocaleFormatter\n  t: Translate\n}) {\n  const state = useStore(controller.store)\n  const composer = state.composer\n  const messagesRef = useRef<HTMLOListElement>(null)\n  const composerId = useId()\n  const hintId = useId()\n\n  useEffect(() => {\n    const element = messagesRef.current\n\n    if (element) element.scrollTop = element.scrollHeight\n  }, [ticket.key, ticket.messages.length])\n\n  const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n    if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) {\n      event.preventDefault()\n      void controller.send()\n    }\n\n    if (event.key === 'Escape') {\n      event.currentTarget.blur()\n    }\n  }\n\n  return (\n    <>\n      <header className=\"flex flex-col gap-2 border-b p-3\">\n        <div className=\"flex items-start gap-2\">\n          <Button\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            className=\"md:hidden\"\n            aria-label={t('helpdesk.back', {}, 'Back to the list')}\n            onClick={() => void controller.select(null)}\n          >\n            <ArrowLeftIcon className=\"rtl:rotate-180\" />\n          </Button>\n          <div className=\"min-w-0 flex-1\">\n            <h2 className=\"truncate text-base font-semibold\">\n              <span className=\"text-muted-foreground me-1.5 font-normal tabular-nums\">\n                {ticket.reference}\n              </span>\n              {ticket.subject}\n            </h2>\n            <p className=\"text-muted-foreground truncate text-xs\">\n              {ticket.requester.name}\n              {ticket.requester.email && ` · ${ticket.requester.email}`}\n            </p>\n          </div>\n          {ticket.presence && <RecordPresence presence={ticket.presence} />}\n          {ticket.url && (\n            <Button asChild variant=\"ghost\" size=\"icon-sm\">\n              <a\n                href={ticket.url}\n                aria-label={t('helpdesk.open_page', {}, 'Open the ticket page')}\n                title={t('helpdesk.open_page', {}, 'Open the ticket page')}\n              >\n                <ExternalLinkIcon className=\"rtl:-scale-x-100\" />\n              </a>\n            </Button>\n          )}\n        </div>\n        <dl className=\"text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1 text-xs\">\n          <div className=\"flex items-center gap-1\">\n            <dt className=\"sr-only\">{t('helpdesk.status', {}, 'Status')}</dt>\n            <dd>\n              <StatusBadge badge={ticket.status} />\n            </dd>\n          </div>\n          <div className=\"flex items-center gap-1\">\n            <dt className=\"sr-only\">{t('helpdesk.priority', {}, 'Priority')}</dt>\n            <dd>\n              <StatusBadge badge={ticket.priority} />\n            </dd>\n          </div>\n          <div className=\"flex items-center gap-1\">\n            <dt>{t('helpdesk.assignee', {}, 'Assignee')}:</dt>\n            <dd className=\"text-foreground\">\n              {ticket.assignee?.name ?? t('helpdesk.unassigned', {}, 'Unassigned')}\n            </dd>\n          </div>\n          {ticket.group && (\n            <div className=\"flex items-center gap-1\">\n              <dt>{t('helpdesk.group', {}, 'Group')}:</dt>\n              <dd className=\"text-foreground\">{ticket.group.name}</dd>\n            </div>\n          )}\n          {ticket.sla.firstResponse && (\n            <div className=\"flex items-center gap-1\">\n              <dt>{t('helpdesk.first_response', {}, 'First response')}:</dt>\n              <dd>\n                <SlaBadge sla={ticket.sla.firstResponse} formatter={formatter} t={t} />\n              </dd>\n            </div>\n          )}\n          {ticket.sla.resolution && (\n            <div className=\"flex items-center gap-1\">\n              <dt>{t('helpdesk.resolution', {}, 'Resolution')}:</dt>\n              <dd>\n                <SlaBadge sla={ticket.sla.resolution} formatter={formatter} t={t} />\n              </dd>\n            </div>\n          )}\n          {ticket.satisfaction?.rating !== undefined && (\n            <div className=\"flex items-center gap-1\">\n              <dt>{t('helpdesk.satisfaction', {}, 'Satisfaction')}:</dt>\n              <dd className=\"text-foreground\">\n                {t('helpdesk.rating', { rating: ticket.satisfaction.rating }, ':rating / 5')}\n              </dd>\n            </div>\n          )}\n          {ticket.tags && ticket.tags.length > 0 && (\n            <div className=\"flex items-center gap-1\">\n              <dt className=\"sr-only\">{t('helpdesk.tags', {}, 'Tags')}</dt>\n              <dd className=\"flex flex-wrap gap-1\">\n                {ticket.tags.map((tag) => (\n                  <Badge key={tag} variant=\"secondary\">\n                    {tag}\n                  </Badge>\n                ))}\n              </dd>\n            </div>\n          )}\n        </dl>\n        {ticket.actions.length > 0 && (\n          <div role=\"group\" aria-label={t('helpdesk.actions', {}, 'Ticket actions')}>\n            <ActionList\n              actions={ticket.actions}\n              context={{ token, component: actionComponent, record: ticket.key }}\n              size=\"xs\"\n            />\n          </div>\n        )}\n      </header>\n\n      <ol\n        ref={messagesRef}\n        aria-label={t('helpdesk.conversation', {}, 'Conversation')}\n        className=\"flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-3\"\n      >\n        {ticket.messages.map((message) => (\n          <Message key={message.key} message={message} formatter={formatter} t={t} />\n        ))}\n      </ol>\n\n      {ticket.merged && (\n        <p className=\"text-muted-foreground border-t p-3 text-sm\">\n          {t('helpdesk.merged', {}, 'This ticket was merged into another one.')}\n        </p>\n      )}\n\n      {ticket.canReply && (\n        <form\n          data-slot=\"helpdesk-composer\"\n          data-mode={composer.mode}\n          className=\"data-[mode=note]:bg-warning/5 flex flex-col gap-2 border-t p-3\"\n          onSubmit={(event) => {\n            event.preventDefault()\n            void controller.send()\n          }}\n        >\n          <div className=\"flex items-center justify-between gap-2\">\n            <div\n              role=\"radiogroup\"\n              aria-label={t('helpdesk.mode', {}, 'Message type')}\n              className=\"bg-muted inline-flex rounded-md p-0.5\"\n            >\n              {(['reply', 'note'] as const).map((mode) => (\n                <button\n                  key={mode}\n                  type=\"button\"\n                  role=\"radio\"\n                  aria-checked={composer.mode === mode}\n                  onClick={() => controller.setMode(mode)}\n                  className=\"aria-checked:bg-background aria-checked:text-foreground text-muted-foreground rounded px-2.5 py-1 text-xs font-medium aria-checked:shadow-xs\"\n                >\n                  {mode === 'reply'\n                    ? t('helpdesk.mode_reply', {}, 'Reply')\n                    : t('helpdesk.mode_note', {}, 'Internal note')}\n                </button>\n              ))}\n            </div>\n            {requesterTyping && (\n              <p className=\"text-muted-foreground animate-pulse text-xs\" role=\"status\">\n                {t(\n                  'helpdesk.requester_typing',\n                  { name: ticket.requester.name },\n                  ':name is typing…',\n                )}\n              </p>\n            )}\n          </div>\n          <label htmlFor={composerId} className=\"sr-only\">\n            {composer.mode === 'note'\n              ? t('helpdesk.mode_note', {}, 'Internal note')\n              : t('helpdesk.mode_reply', {}, 'Reply')}\n          </label>\n          <Textarea\n            ref={composerRef}\n            id={composerId}\n            rows={3}\n            value={composer.text}\n            onChange={(event) => controller.setText(event.target.value)}\n            onKeyDown={onKeyDown}\n            aria-describedby={hintId}\n            aria-invalid={composer.error ? true : undefined}\n            placeholder={\n              composer.mode === 'note'\n                ? t('helpdesk.note_placeholder', {}, 'Add a note only agents can see…')\n                : t(\n                    'helpdesk.reply_placeholder',\n                    { name: ticket.requester.name },\n                    'Reply to :name…',\n                  )\n            }\n            className=\"max-h-48 min-h-20 resize-y\"\n          />\n          {composer.error && (\n            <p role=\"alert\" className=\"text-destructive text-xs\">\n              {composer.error}\n            </p>\n          )}\n          <div className=\"flex items-center justify-between gap-2\">\n            <p id={hintId} className=\"text-muted-foreground text-xs max-sm:hidden\">\n              {t('helpdesk.send_hint', {}, 'Enter to send, Shift+Enter for a new line')}\n            </p>\n            <Button\n              type=\"submit\"\n              size=\"sm\"\n              className=\"ms-auto\"\n              variant={composer.mode === 'note' ? 'secondary' : 'default'}\n              disabled={composer.sending || composer.text.trim() === ''}\n            >\n              {composer.sending ? <Spinner /> : <SendIcon className=\"rtl:-scale-x-100\" />}\n              {composer.sending\n                ? t('helpdesk.sending', {}, 'Sending…')\n                : composer.mode === 'note'\n                  ? t('helpdesk.add_note', {}, 'Add note')\n                  : t('helpdesk.send', {}, 'Send')}\n            </Button>\n          </div>\n        </form>\n      )}\n    </>\n  )\n}\n\nfunction Message({\n  message,\n  formatter,\n  t,\n}: {\n  message: HelpdeskMessage\n  formatter: LocaleFormatter\n  t: Translate\n}) {\n  if (message.kind === 'event') {\n    return (\n      <li\n        data-slot=\"helpdesk-message\"\n        data-kind=\"event\"\n        className=\"text-muted-foreground flex items-center gap-2 self-center text-xs\"\n      >\n        <span className=\"sr-only\">{t('helpdesk.activity', {}, 'Activity')}:</span>\n        <span dangerouslySetInnerHTML={{ __html: message.html }} className=\"[&_p]:inline\" />\n        {message.createdAt && (\n          <time dateTime={message.createdAt}>· {formatter.relative(message.createdAt)}</time>\n        )}\n      </li>\n    )\n  }\n\n  const note = message.kind === 'note'\n\n  return (\n    <li\n      data-slot=\"helpdesk-message\"\n      data-kind={message.kind}\n      data-from={message.fromRequester ? 'requester' : 'agent'}\n      className={cn(\n        'flex max-w-[48rem] gap-2.5',\n        !message.fromRequester && 'flex-row-reverse self-end text-start',\n      )}\n    >\n      <Avatar className=\"size-8 shrink-0\">\n        {message.author.avatar && <AvatarImage src={message.author.avatar} alt=\"\" />}\n        <AvatarFallback aria-hidden=\"true\">{presenceInitials(message.author.name)}</AvatarFallback>\n      </Avatar>\n      <article\n        className={cn(\n          'min-w-0 rounded-lg border px-3 py-2',\n          note\n            ? 'border-warning/40 bg-warning/10'\n            : message.fromRequester\n              ? 'bg-muted/50'\n              : 'bg-primary/5 border-primary/20',\n        )}\n      >\n        <header className=\"mb-1 flex flex-wrap items-center gap-x-2 text-xs\">\n          <span className=\"font-medium\">{message.author.name}</span>\n          {note && (\n            <span className=\"text-warning inline-flex items-center gap-1 font-medium\">\n              <LockIcon className=\"size-3\" aria-hidden=\"true\" />\n              {t('helpdesk.internal', {}, 'Internal note')}\n            </span>\n          )}\n          {message.createdAt && (\n            <time\n              dateTime={message.createdAt}\n              title={formatter.dateTime(message.createdAt)}\n              className=\"text-muted-foreground\"\n            >\n              {formatter.relative(message.createdAt)}\n            </time>\n          )}\n        </header>\n        <div\n          className=\"prose prose-sm dark:prose-invert max-w-none break-words\"\n          dangerouslySetInnerHTML={{ __html: message.html }}\n        />\n        {message.attachments && message.attachments.length > 0 && (\n          <ul\n            aria-label={t('helpdesk.attachments', {}, 'Attachments')}\n            className=\"mt-2 flex flex-wrap gap-1.5\"\n          >\n            {message.attachments.map((file, index) => {\n              const size = helpdeskFileSize(file.size, (value) => formatter.number(value))\n\n              return (\n                <li key={index}>\n                  {file.url ? (\n                    <a\n                      href={file.url}\n                      target=\"_blank\"\n                      rel=\"noopener\"\n                      className=\"hover:bg-muted inline-flex items-center gap-1 rounded border px-2 py-1 text-xs\"\n                    >\n                      <PaperclipIcon className=\"size-3\" aria-hidden=\"true\" />\n                      {file.name}\n                      {size && <span className=\"text-muted-foreground\">({size})</span>}\n                    </a>\n                  ) : (\n                    <span className=\"inline-flex items-center gap-1 rounded border px-2 py-1 text-xs\">\n                      {file.name}\n                    </span>\n                  )}\n                </li>\n              )\n            })}\n          </ul>\n        )}\n      </article>\n    </li>\n  )\n}\n"],"mappings":"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"}

package/dist/components/helpdesk/index.d.ts

@@ -0,0 +1,3 @@
+import { HelpdeskChat, HelpdeskChatProps } from "./chat-widget.js";
+import { HelpdeskInbox } from "./inbox-lazy.js";
+export { HelpdeskChat, type HelpdeskChatProps, HelpdeskInbox };

package/dist/components/kanban/index.d.ts

@@ -0,0 +1,2 @@
+import { Kanban } from "./kanban-lazy.js";
+export { Kanban };

package/dist/components/kanban/index.js

@@ -0,0 +1,2 @@
+import { Kanban } from "./kanban-lazy.js";
+export { Kanban };

package/dist/components/kanban/kanban-lazy.d.ts

@@ -0,0 +1,10 @@
+import { LazyComponent } from "../../lib/lazy.js";
+import { KanbanSchema, KanbanWidgetSchema } from "@alfakit/core";
+//#region src/components/kanban/kanban-lazy.d.ts
+/** The Kanban board; its code loads the first time a board is shown. */
+export declare const Kanban: LazyComponent<{
+  component?: KanbanSchema;
+  widget?: KanbanWidgetSchema;
+}>;
+//#endregion
+//# sourceMappingURL=kanban-lazy.d.ts.map

package/dist/components/kanban/kanban-lazy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kanban-lazy.d.ts","names":["_$______lib_lazy0.LazyComponent"],"sources":["../../../src/components/kanban/kanban-lazy.tsx"],"mappings":";;;;qBA8Ba,QAA4DA;EAAvB,YAAA;EAAuB,SAAA"}

package/dist/components/kanban/kanban-lazy.js

@@ -0,0 +1,31 @@
+import { lazyComponent } from "../../lib/lazy.js";
+import { Card, CardContent } from "../ui/card.js";
+import { Skeleton } from "../ui/skeleton.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/kanban/kanban-lazy.tsx
+function KanbanSkeleton({ component, widget }) {
+	const count = Math.min(5, Math.max(1, (component ?? widget?.kanban)?.columns.length ?? 3));
+	return /* @__PURE__ */ jsx(Card, {
+		className: "gap-4 py-4",
+		"aria-busy": "true",
+		"data-slot": "kanban",
+		children: /* @__PURE__ */ jsx(CardContent, {
+			className: "flex gap-3 overflow-hidden px-4",
+			"aria-hidden": "true",
+			children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsxs("div", {
+				className: "flex w-64 shrink-0 flex-col gap-2",
+				children: [
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-10" }),
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-24" }),
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-24" })
+				]
+			}, index))
+		})
+	});
+}
+/** The Kanban board; its code loads the first time a board is shown. */
+const Kanban = lazyComponent(() => import("./kanban.js").then((module) => module.Kanban), (props) => /* @__PURE__ */ jsx(KanbanSkeleton, { ...props }));
+//#endregion
+export { Kanban };
+
+//# sourceMappingURL=kanban-lazy.js.map

package/dist/components/kanban/kanban-lazy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kanban-lazy.js","names":[],"sources":["../../../src/components/kanban/kanban-lazy.tsx"],"sourcesContent":["import type { KanbanSchema, KanbanWidgetSchema } from '@alfakit/core'\nimport { lazyComponent } from '../../lib/lazy'\nimport { Card, CardContent } from '../ui/card'\nimport { Skeleton } from '../ui/skeleton'\n\nfunction KanbanSkeleton({\n  component,\n  widget,\n}: {\n  component?: KanbanSchema\n  widget?: KanbanWidgetSchema\n}) {\n  const count = Math.min(5, Math.max(1, (component ?? widget?.kanban)?.columns.length ?? 3))\n\n  return (\n    <Card className=\"gap-4 py-4\" aria-busy=\"true\" data-slot=\"kanban\">\n      <CardContent className=\"flex gap-3 overflow-hidden px-4\" aria-hidden=\"true\">\n        {Array.from({ length: count }, (_, index) => (\n          <div key={index} className=\"flex w-64 shrink-0 flex-col gap-2\">\n            <Skeleton className=\"h-10\" />\n            <Skeleton className=\"h-24\" />\n            <Skeleton className=\"h-24\" />\n          </div>\n        ))}\n      </CardContent>\n    </Card>\n  )\n}\n\n/** The Kanban board; its code loads the first time a board is shown. */\nexport const Kanban = lazyComponent<{ component?: KanbanSchema; widget?: KanbanWidgetSchema }>(\n  () => import('./kanban').then((module) => module.Kanban),\n  (props) => <KanbanSkeleton {...props} />,\n)\n"],"mappings":";;;;;AAKA,SAAS,eAAe,EACtB,WACA,UAIC;CACD,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,aAAa,QAAQ,OAAA,EAAS,QAAQ,UAAU,CAAC,CAAC;CAEzF,OACE,oBAAC,MAAD;EAAM,WAAU;EAAa,aAAU;EAAO,aAAU;EACtD,UAAA,oBAAC,aAAD;GAAa,WAAU;GAAkC,eAAY;GAClE,UAAA,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,UACjC,qBAAC,OAAD;IAAiB,WAAU;IAA3B,UAAA;KACE,oBAAC,UAAD,EAAU,WAAU,OAAQ,CAAA;KAC5B,oBAAC,UAAD,EAAU,WAAU,OAAQ,CAAA;KAC5B,oBAAC,UAAD,EAAU,WAAU,OAAQ,CAAA;IACzB;GAJK,GAAA,KAIL,CACN;EACU,CAAA;CACT,CAAA;AAEV;;AAGA,MAAa,SAAS,oBACd,OAAO,cAAW,CAAC,MAAM,WAAW,OAAO,MAAM,IACtD,UAAU,oBAAC,gBAAD,EAAgB,GAAI,MAAQ,CAAA,CACzC"}