@signalcore/ui 1.0.0-beta.2 → 1.0.0-beta.4

package/src/es.ts

@@ -10,6 +10,7 @@ import type { TaskMessages } from "./AgentTasks";
 import type { AutomationMessages, DayRef } from "./automation/messages";
 import type { BrowserMessages } from "./BrowserView";
 import type { KitMessages } from "./kit/messages";
+import type { ThreadMessages } from "./Threads";
 import type { VoiceCallMessages } from "./VoiceCall";
 
 /** The article before a time: "la 1:00", "las 8:00". */
@@ -76,6 +77,8 @@ export const AUTOMATION_MESSAGES_ES: AutomationMessages = {
   on: (often, when) => `${often}, ${when.charAt(0).toLowerCase()}${when.slice(1)}`,
   custom: "Con un horario propio",
   webhook: "Cuando otro sistema la llama",
+  manual: "Cuando alguien la inicia",
+  after: (automation) => (automation ? `Tras «${automation}»` : "Tras otra automatización"),
   platform: "Cuando llega un mensaje",
   event: (app, event) =>
     event
@@ -118,6 +121,8 @@ export const AUTOMATION_MESSAGES_ES: AutomationMessages = {
       platform: "un mensaje",
       agent: "se lo pidieron en el chat",
       test: "prueba",
+      api: "tu app",
+      after: "tras otra",
     })[by],
   statuses: {
     running: "En curso",
@@ -228,6 +233,13 @@ export const KIT_MESSAGES_ES: KitMessages = {
     failed: "No se ha podido conectar",
     preparing: "Preparando la conexión",
   },
+  calendar: { allDay: "Todo el día", empty: "Nada previsto" },
+  board: {
+    move: (card) => `Mover ${card}`,
+    moveTo: "Mover a",
+    moved: (card, column) => `${card} a ${column}`,
+    empty: "Nada aquí",
+  },
 };
 
 export const BROWSER_MESSAGES_ES: BrowserMessages = {
@@ -310,8 +322,14 @@ export const CHAT_MESSAGES_ES: ChatMessages = {
   inputs: {},
   allow: "Aprobar",
   decline: "Rechazar",
+  approvals: (count) => `${count} acciones esperan tu aprobación`,
+  approveAll: "Aprobar todo",
+  approveSome: (count) => `Aprobar ${count}`,
+  declineAll: "Rechazar todo",
   confirming: "Esperando la confirmación del negocio",
   handedOff: "Pasada a una persona",
+  opened: (name, title) => `${name} abrió ${title}`,
+  closePlaced: "Cerrar",
   handover: (holder, by, name) => {
     const automation = by.kind === "automation" ? ` por «${by.title}»` : "";
     switch (holder) {
@@ -417,6 +435,17 @@ export const TASK_MESSAGES_ES: TaskMessages = {
   failed: "No se ha podido cambiar. Inténtalo de nuevo.",
 };
 
+export const THREAD_MESSAGES_ES: ThreadMessages = {
+  open: "Conversaciones",
+  title: "Tus conversaciones",
+  back: "Volver a la conversación",
+  new: "Nueva conversación",
+  untitled: "Conversación nueva",
+  unread: (count) => (count === 1 ? "1 mensaje sin leer" : `${count} mensajes sin leer`),
+  waiting: "Te espera",
+  empty: "Aún no hay nada aquí.",
+};
+
 export const SPACE_MESSAGES_ES: SpaceMessages = {
   modes: { label: "Modo", text: "Texto", voice: "Voz" },
   again: "Volver a llamar",
@@ -428,4 +457,5 @@ export const SPACE_MESSAGES_ES: SpaceMessages = {
   chat: CHAT_MESSAGES_ES,
   voice: VOICE_CALL_MESSAGES_ES,
   tasks: TASK_MESSAGES_ES,
+  threads: THREAD_MESSAGES_ES,
 };

package/src/frames.ts

@@ -52,13 +52,15 @@ export type Frame =
 
 /**
  * Up: the person says something (words, files they uploaded to the conversation, or both), acts
- * on a surface, or stops the reply on its way; takes the browser or gives it back, and acts on it
+ * on a surface (several things at once: a yes or no on each call a reply waits on), or stops
+ * the reply on its way; takes the browser or gives it back, and acts on it
  * while they hold it. And what a tool of the host's answered, run in the page: its output, or
  * why it failed.
  */
 export type UpFrame =
   | { type: "say"; text: string; files?: string[] }
   | ({ type: "action" } & Action)
+  | { type: "actions"; actions: ({ type: "action" } & Action)[] }
   | { type: "stop" }
   | { type: "browser.control"; to: BrowserControl }
   | { type: "browser.close" }

package/src/index.ts

@@ -97,6 +97,14 @@ export type {
 export { taskCard } from "./automation/types";
 export { AgentTasks, TASK_MESSAGES, TASKS_POLL_MS, useTasks } from "./AgentTasks";
 export type { AgentTasksProps, TaskMessages, TaskPart } from "./AgentTasks";
+export { Conversation, THREAD_MESSAGES, THREADS_POLL_MS, Threads, useUnread } from "./Threads";
+export type {
+  ConversationProps,
+  ThreadMessages,
+  ThreadPart,
+  ThreadsProps,
+  Unread,
+} from "./Threads";
 export { AgentCard } from "./AgentCard";
 export type { AgentCardProps, CardField, CardPart } from "./AgentCard";
 export { AgentChat, CHAT_MESSAGES } from "./AgentChat";
@@ -110,6 +118,7 @@ export {
   KIT_MESSAGES_ES,
   SPACE_MESSAGES_ES,
   TASK_MESSAGES_ES,
+  THREAD_MESSAGES_ES,
   VOICE_CALL_MESSAGES_ES,
 } from "./es";
 export { VOICE_CALL_MESSAGES, VoiceCall } from "./VoiceCall";
@@ -135,7 +144,12 @@ export type {
 export type {
   AutomationBlock,
   Block,
+  BoardBlock,
+  BoardCard,
+  BoardColumn,
   ButtonBlock,
+  CalendarBlock,
+  CalendarEvent,
   CardBlock,
   ChartBlock,
   ChartPoint,
@@ -147,15 +161,19 @@ export type {
   FieldValue,
   FormBlock,
   FormField,
+  HostBlock,
   ImageBlock,
   ListBlock,
   NoteBlock,
   Option,
+  Place,
   StackBlock,
   StatBlock,
   Surface as SurfaceData,
   TableBlock,
   TextBlock,
+  TimelineBlock,
+  TimelineItem,
   Tone,
 } from "./blocks";
 export { ApiError, createClient } from "./client";
@@ -170,6 +188,8 @@ export { FILES_PER_MESSAGE, TOOL_ERROR_MAX, toolResultOf } from "./frames";
 export type { Frame, ToolResult, UpFrame } from "./frames";
 export { Button } from "./kit/Button";
 export type { ButtonProps } from "./kit/Button";
+export { Agenda, daysOf, hoursOf } from "./kit/Agenda";
+export { Kanban, placed } from "./kit/Kanban";
 export { Card } from "./kit/Card";
 export { Chips, Choices } from "./kit/Choices";
 export { Combobox } from "./kit/Combobox";
@@ -194,7 +214,7 @@ export { Mark } from "./kit/Mark";
 export type { MarkProps } from "./kit/Mark";
 export { MarkStack } from "./kit/MarkStack";
 export { KIT_MESSAGES } from "./kit/messages";
-export type { KitLocale, KitMessages } from "./kit/messages";
+export type { BoardMessages, CalendarMessages, KitLocale, KitMessages } from "./kit/messages";
 export { Note } from "./kit/Note";
 export { RangeField } from "./kit/RangeField";
 export { RatingField } from "./kit/RatingField";
@@ -204,11 +224,22 @@ export { AudioPlayer } from "./kit/AudioPlayer";
 export type { AudioPlayerProps } from "./kit/AudioPlayer";
 export type { SwitchProps } from "./kit/Switch";
 export { Tag } from "./kit/Tag";
+export { formatWhen, Timeline } from "./kit/Timeline";
 export { Tile, Tiles } from "./kit/Tile";
 export type { TileProps } from "./kit/Tile";
 export { DateTimeField, TimeField } from "./kit/TimeField";
 export type { DateTimeFieldProps, TimeFieldProps } from "./kit/TimeField";
-export type { BlockProps, SurfaceComponents, SurfacePart } from "./surface/scope";
+export type {
+  BlockProps,
+  HostBlockProps,
+  HostBlocks,
+  SurfaceComponents,
+  SurfacePart,
+} from "./surface/scope";
+export { EVERY_PLACE, placeOf } from "./surface/places";
+export type { SurfacePlaces } from "./surface/places";
+export { Placed } from "./surface/Placed";
+export type { PlacedPart } from "./surface/Placed";
 export { Surface } from "./surface/Surface";
 export type { SurfaceProps } from "./surface/Surface";
 export { chosen, filled, labelOf, picked, pressed, problemOf } from "./surface/values";
@@ -235,7 +266,6 @@ export type {
   ChannelWeb,
   ContactGlance,
   ConversationPerson,
-  Conversation,
   ConversationDetail,
   ConversationFile,
   Decides,
@@ -255,6 +285,7 @@ export type {
   StepState,
   StoredFile,
   ToolCall,
+  ViewRendered,
   Weekday,
   WeekHours,
   WidgetConfig,
@@ -263,6 +294,8 @@ export type {
 } from "./types";
 export { WIDGET_FONTS } from "./types";
 export { useAgentFace } from "./useAgentFace";
+export { View, VIEW_POLL_MS, useView } from "./View";
+export type { ViewProps, ViewRead } from "./View";
 export type { FaceRead } from "./useAgentFace";
 export { NO_TOOL, useConversation } from "./useConversation";
 export type { LiveConversation, ToolHandler } from "./useConversation";

package/src/kit/Agenda.tsx

@@ -0,0 +1,161 @@
+import { Fragment, type ReactNode } from "react";
+
+import type { CalendarEvent } from "../blocks";
+import { useKit, useParts } from "./context";
+import { dayOf, formatTime, isoDay, momentParts, TIME } from "./dates";
+
+/** The days a calendar shows from its first: a day's, or a week's. */
+export function daysOf(span: "day" | "week", start: string): string[] {
+  const first = dayOf(start);
+  if (!first) return [];
+  return Array.from({ length: span === "week" ? 7 : 1 }, (_, index) => {
+    const day = new Date(first);
+    day.setDate(first.getDate() + index);
+    return isoDay(day);
+  });
+}
+
+/** An event's hours as the language writes them: "10:00 – 11:00", one end, or none (a day). */
+export function hoursOf(event: CalendarEvent, code: string): string | null {
+  const [day, from] = momentParts(event.start);
+  if (!TIME.test(from)) return null;
+  const [endDay, to] = momentParts(event.end ?? null);
+  const until = endDay === day && TIME.test(to) ? to : null;
+  return until === null
+    ? formatTime(from, code)
+    : `${formatTime(from, code)} – ${formatTime(until, code)}`;
+}
+
+/**
+ * A day's events, or a week's, at their hours: each day under its weekday and number (today in
+ * the accent), its events in order, each with its hours (or "all day"), its title and a quiet
+ * line of detail. In a narrow place the days go one under another, an empty one a single quiet
+ * line; wide enough, the week stands as seven columns. An event with a page opens it apart;
+ * with `onEvent`, pressing one sends it.
+ */
+export function Agenda({
+  span,
+  start,
+  events,
+  onEvent,
+  disabled = false,
+  today = new Date(),
+}: {
+  span: "day" | "week";
+  /** The first day shown, "YYYY-MM-DD". */
+  start: string;
+  events: CalendarEvent[];
+  onEvent?: ((event: CalendarEvent) => void) | undefined;
+  disabled?: boolean | undefined;
+  /** What counts as today; now by default. */
+  today?: Date | undefined;
+}) {
+  const part = useParts();
+  const { code, messages } = useKit();
+  const now = isoDay(today);
+  const days = daysOf(span, start);
+  const weekday = new Intl.DateTimeFormat(code, { weekday: "short" });
+  const whole = new Intl.DateTimeFormat(code, { weekday: "long", day: "numeric", month: "long" });
+  return (
+    <div
+      part="agenda"
+      className={part("sc-agenda", ...(span === "day" ? (["sc-agenda--day"] as const) : []))}
+    >
+      <div className={part("sc-agenda__days")}>
+        {days.map((day) => {
+          const date = dayOf(day) ?? today;
+          const own = events.filter((event) => event.start.slice(0, 10) === day);
+          return (
+            <section
+              key={day}
+              aria-label={whole.format(date)}
+              className={part(
+                "sc-agenda__day",
+                ...(day === now ? (["sc-agenda__day--today"] as const) : []),
+                ...(own.length === 0 ? (["sc-agenda__day--empty"] as const) : []),
+              )}
+            >
+              {span === "week" && (
+                <h4 aria-hidden className={part("sc-agenda__date")}>
+                  <span className={part("sc-agenda__weekday")}>{weekday.format(date)}</span>
+                  <span className={part("sc-agenda__number")}>{date.getDate()}</span>
+                </h4>
+              )}
+              {own.length === 0 ? (
+                <p className={part("sc-agenda__empty")}>{messages.calendar.empty}</p>
+              ) : (
+                <ol className={part("sc-agenda__events")}>
+                  {own.map((event) => (
+                    <li key={event.id}>
+                      <Event event={event} onEvent={onEvent} disabled={disabled}>
+                        <span className={part("sc-agenda__time")}>
+                          {(hoursOf(event, code) ?? messages.calendar.allDay)
+                            .split(" – ")
+                            .map((end, index) =>
+                              // A range breaks before its dash, never inside a time ("5:00 PM").
+                              index === 0 ? (
+                                <span key={index}>{end}</span>
+                              ) : (
+                                <Fragment key={index}>
+                                  {" "}
+                                  <span>– {end}</span>
+                                </Fragment>
+                              ),
+                            )}
+                        </span>
+                        <span className={part("sc-agenda__what")}>
+                          <span className={part("sc-agenda__title")}>{event.title}</span>
+                          {event.detail !== undefined && (
+                            <span className={part("sc-agenda__detail")}>{event.detail}</span>
+                          )}
+                        </span>
+                      </Event>
+                    </li>
+                  ))}
+                </ol>
+              )}
+            </section>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+/** One event: a link to its page, a button that sends it, or just its words. */
+function Event({
+  event,
+  onEvent,
+  disabled,
+  children,
+}: {
+  event: CalendarEvent;
+  onEvent: ((event: CalendarEvent) => void) | undefined;
+  disabled: boolean;
+  children: ReactNode;
+}) {
+  const part = useParts();
+  const className = part("sc-agenda__event");
+  if (event.url !== undefined && /^https:\/\//i.test(event.url)) {
+    return (
+      <a className={className} href={event.url} target="_blank" rel="noreferrer noopener">
+        {children}
+      </a>
+    );
+  }
+  if (onEvent !== undefined) {
+    return (
+      <button
+        type="button"
+        className={className}
+        disabled={disabled}
+        onClick={() => {
+          onEvent(event);
+        }}
+      >
+        {children}
+      </button>
+    );
+  }
+  return <div className={className}>{children}</div>;
+}

package/src/kit/Kanban.tsx

@@ -0,0 +1,182 @@
+import { ArrowsLeftRightIcon } from "@phosphor-icons/react";
+import { useState, type DragEvent } from "react";
+
+import type { BoardCard, BoardColumn } from "../blocks";
+import { useKit, useParts } from "./context";
+import { Popover, usePopover } from "./Popover";
+
+/** What a dragged card carries, so a drop elsewhere on the page takes nothing of it. */
+const CARD = "application/x-signalcore-card";
+
+/** The columns with each card where the person last put it (`moved`, card id to column id). */
+export function placed(
+  columns: readonly BoardColumn[],
+  moved: Readonly<Record<string, string>>,
+): BoardColumn[] {
+  const cards = columns.flatMap((column) =>
+    column.cards.map((card) => ({ card, column: moved[card.id] ?? column.id })),
+  );
+  return columns.map((column) => ({
+    ...column,
+    cards: cards.filter((each) => each.column === column.id).map((each) => each.card),
+  }));
+}
+
+/**
+ * Cards in columns, a column per stage, side by side, scrolling across when they don't fit: each
+ * column's title and how many it holds over its cards (a title, a quieter line, a detail at its
+ * foot). With `onMove`, the person moves a card to another column by dragging it there, or from
+ * its button's list of the other columns (the keyboard's way); the card goes there at once.
+ */
+export function Kanban({
+  columns,
+  onMove,
+  disabled = false,
+}: {
+  columns: BoardColumn[];
+  onMove?: ((card: BoardCard, column: BoardColumn) => void) | undefined;
+  disabled?: boolean | undefined;
+}) {
+  const part = useParts();
+  const { messages } = useKit();
+  const [moved, setMoved] = useState<Record<string, string>>({});
+  const [dragging, setDragging] = useState<string | null>(null);
+  const [over, setOver] = useState<string | null>(null);
+  const movable = onMove !== undefined && !disabled;
+  const shown = placed(columns, moved);
+  const move = (card: BoardCard, to: BoardColumn) => {
+    const from = shown.find((column) => column.cards.some((each) => each.id === card.id));
+    if (!onMove || from?.id === to.id) return;
+    setMoved((before) => ({ ...before, [card.id]: to.id }));
+    onMove(card, to);
+  };
+  const dropOn = (column: BoardColumn) => (event: DragEvent) => {
+    event.preventDefault();
+    setOver(null);
+    setDragging(null);
+    const id = event.dataTransfer.getData(CARD);
+    const card = columns.flatMap((each) => each.cards).find((each) => each.id === id);
+    if (card) move(card, column);
+  };
+  return (
+    <div part="board" className={part("sc-board")}>
+      {shown.map((column) => (
+        <section
+          key={column.id}
+          aria-label={column.title}
+          className={part(
+            "sc-board__column",
+            ...(over === column.id ? (["sc-board__column--over"] as const) : []),
+          )}
+          onDragOver={(event) => {
+            if (!movable || dragging === null) return;
+            event.preventDefault();
+            event.dataTransfer.dropEffect = "move";
+            setOver(column.id);
+          }}
+          onDragLeave={(event) => {
+            const to = event.relatedTarget;
+            if (!(to instanceof Node && event.currentTarget.contains(to))) setOver(null);
+          }}
+          onDrop={movable ? dropOn(column) : undefined}
+        >
+          <h4 className={part("sc-board__head")}>
+            <span className={part("sc-board__title")}>{column.title}</span>
+            <span className={part("sc-board__count")}>{column.cards.length}</span>
+          </h4>
+          {column.cards.length === 0 ? (
+            <p className={part("sc-board__empty")}>{messages.board.empty}</p>
+          ) : (
+            <ul className={part("sc-board__cards")}>
+              {column.cards.map((card) => (
+                <li
+                  key={card.id}
+                  draggable={movable}
+                  onDragStart={(event) => {
+                    event.dataTransfer.setData(CARD, card.id);
+                    event.dataTransfer.effectAllowed = "move";
+                    setDragging(card.id);
+                  }}
+                  onDragEnd={() => {
+                    setDragging(null);
+                    setOver(null);
+                  }}
+                  className={part(
+                    "sc-board__card",
+                    ...(dragging === card.id ? (["sc-board__card--dragging"] as const) : []),
+                  )}
+                >
+                  <span className={part("sc-board__card-title")}>{card.title}</span>
+                  {card.subtitle !== undefined && (
+                    <span className={part("sc-board__card-subtitle")}>{card.subtitle}</span>
+                  )}
+                  {card.meta !== undefined && (
+                    <span className={part("sc-board__card-meta")}>{card.meta}</span>
+                  )}
+                  {movable && (
+                    <Move
+                      card={card}
+                      to={shown.filter((other) => other.id !== column.id)}
+                      onMove={move}
+                    />
+                  )}
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+      ))}
+    </div>
+  );
+}
+
+/** A card's button that opens the other columns, to move it to one of them. */
+function Move({
+  card,
+  to,
+  onMove,
+}: {
+  card: BoardCard;
+  to: BoardColumn[];
+  onMove: (card: BoardCard, column: BoardColumn) => void;
+}) {
+  const part = useParts();
+  const { messages } = useKit();
+  const [open, setOpen] = useState(false);
+  const popover = usePopover(open, setOpen, { width: "own", role: "dialog" });
+  return (
+    <>
+      <button
+        ref={popover.refs.setReference}
+        type="button"
+        aria-label={messages.board.move(card.title)}
+        title={messages.board.move(card.title)}
+        aria-expanded={open}
+        className={part("sc-board__move")}
+        {...popover.getReferenceProps({ onClick: () => setOpen(!open) })}
+      >
+        <ArrowsLeftRightIcon aria-hidden />
+      </button>
+      {open && (
+        <Popover popover={popover} focus label={messages.board.moveTo}>
+          <div className={part("sc-board__menu")}>
+            <p>{messages.board.moveTo}</p>
+            {to.map((column) => (
+              <button
+                key={column.id}
+                type="button"
+                className={part("sc-listbox__item")}
+                onClick={() => {
+                  setOpen(false);
+                  onMove(card, column);
+                }}
+              >
+                {column.title}
+              </button>
+            ))}
+          </div>
+        </Popover>
+      )}
+    </>
+  );
+}

package/src/kit/Timeline.tsx

@@ -0,0 +1,58 @@
+import type { TimelineItem } from "../blocks";
+import { useKit, useParts } from "./context";
+import { dayOf, momentParts, TIME } from "./dates";
+
+/** When a timeline's item was, short: "20 oct, 16:00"; its year when not this one's. */
+export function formatWhen(at: string, code: string, today: Date = new Date()): string {
+  const [date, time] = momentParts(at);
+  const day = dayOf(date);
+  if (!day) return at;
+  const timed = TIME.test(time);
+  if (timed) {
+    const [hours = 0, minutes = 0] = time.split(":").map(Number);
+    day.setHours(hours, minutes);
+  }
+  return new Intl.DateTimeFormat(code, {
+    day: "numeric",
+    month: "short",
+    ...(day.getFullYear() !== today.getFullYear() && { year: "numeric" }),
+    ...(timed && { hour: "numeric", minute: "2-digit" }),
+  }).format(day);
+}
+
+/**
+ * Dated things, one under another along a hairline, the newest first: each a dot on the line (in
+ * its tone, when it has one), its title with where it stands in a quiet word at its right, when
+ * it was under it, and a line about it.
+ */
+export function Timeline({ items }: { items: TimelineItem[] }) {
+  const part = useParts();
+  const { code } = useKit();
+  return (
+    <ol part="timeline" className={part("sc-timeline")}>
+      {items.map((item, index) => (
+        <li
+          key={item.id ?? index}
+          className={part(
+            "sc-timeline__item",
+            ...(item.tone ? ([`sc-timeline__item--${item.tone}`] as const) : []),
+          )}
+        >
+          <span aria-hidden className={part("sc-timeline__dot")} />
+          <div className={part("sc-timeline__body")}>
+            <p className={part("sc-timeline__head")}>
+              <span className={part("sc-timeline__title")}>{item.title}</span>
+              {item.status !== undefined && (
+                <span className={part("sc-timeline__status")}>{item.status}</span>
+              )}
+            </p>
+            <time dateTime={item.at} className={part("sc-timeline__when")}>
+              {formatWhen(item.at, code)}
+            </time>
+            {item.text !== undefined && <p className={part("sc-timeline__text")}>{item.text}</p>}
+          </div>
+        </li>
+      ))}
+    </ol>
+  );
+}

package/src/kit/context.tsx

@@ -186,7 +186,51 @@ export type KitPart =
   | "sc-run__error"
   | "sc-run__live"
   | "sc-run__links"
-  | "sc-run__empty";
+  | "sc-run__empty"
+  | "sc-agenda"
+  | "sc-agenda--day"
+  | "sc-agenda__days"
+  | "sc-agenda__day"
+  | "sc-agenda__day--today"
+  | "sc-agenda__day--empty"
+  | "sc-agenda__date"
+  | "sc-agenda__weekday"
+  | "sc-agenda__number"
+  | "sc-agenda__events"
+  | "sc-agenda__event"
+  | "sc-agenda__time"
+  | "sc-agenda__what"
+  | "sc-agenda__title"
+  | "sc-agenda__detail"
+  | "sc-agenda__empty"
+  | "sc-timeline"
+  | "sc-timeline__item"
+  | "sc-timeline__item--info"
+  | "sc-timeline__item--success"
+  | "sc-timeline__item--warning"
+  | "sc-timeline__item--danger"
+  | "sc-timeline__dot"
+  | "sc-timeline__body"
+  | "sc-timeline__head"
+  | "sc-timeline__title"
+  | "sc-timeline__status"
+  | "sc-timeline__when"
+  | "sc-timeline__text"
+  | "sc-board"
+  | "sc-board__column"
+  | "sc-board__column--over"
+  | "sc-board__head"
+  | "sc-board__title"
+  | "sc-board__count"
+  | "sc-board__cards"
+  | "sc-board__card"
+  | "sc-board__card--dragging"
+  | "sc-board__card-title"
+  | "sc-board__card-subtitle"
+  | "sc-board__card-meta"
+  | "sc-board__move"
+  | "sc-board__menu"
+  | "sc-board__empty";
 
 export type KitClassNames = Partial<Record<KitPart, string>> | undefined;