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

package/src/styles.css

@@ -714,6 +714,124 @@
   height: 14px;
 }
 
+/* Where the agent put what it showed apart: a quiet line in its reply, its glyph and words, that
+   opens it again; the one open reads in the ink. */
+.sc-chat__placed {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--_space) * 2);
+  align-self: flex-start;
+  margin: calc(var(--_space) * 2) 0 0;
+  padding: 2px 0;
+  border: 0;
+  background: none;
+  color: var(--_muted);
+  font: inherit;
+  font-size: var(--_font-size-sm);
+  text-align: left;
+  white-space: normal;
+  cursor: pointer;
+}
+
+.sc-chat__placed:hover {
+  color: var(--_fg);
+}
+
+.sc-chat__placed:hover > span {
+  text-decoration: underline;
+  text-decoration-color: var(--_line-hover);
+  text-underline-offset: 3px;
+}
+
+.sc-chat__placed:focus-visible {
+  outline: 2px solid var(--_accent);
+  outline-offset: 2px;
+}
+
+.sc-chat__placed--open {
+  color: var(--_fg);
+}
+
+.sc-chat__placed > svg {
+  flex-shrink: 0;
+  width: 15px;
+  height: 15px;
+}
+
+/* A surface apart: its title and close over it, the surface scrolling under them. A panel stands
+   at the chat's right edge, the conversation beside it (under it, where the chat is narrow); a
+   modal over the page, on a dimmed backdrop. */
+.sc-placed {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  color: var(--_fg);
+  background: var(--_surface);
+}
+
+.sc-placed__head {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 10px 10px 16px;
+  border-bottom: 1px solid var(--_hair);
+}
+
+.sc-placed__title {
+  margin: 0;
+  overflow: hidden;
+  font-size: var(--_font-size);
+  font-weight: var(--_font-weight-bold);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sc-placed__title::first-letter {
+  text-transform: uppercase;
+}
+
+.sc-placed__body {
+  flex: 1;
+  min-height: 0;
+  padding: 16px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.sc-placed--panel {
+  position: absolute;
+  inset: 0 0 0 auto;
+  z-index: 2;
+  width: min(440px, 100%);
+  border-left: 1px solid var(--_line);
+}
+
+/* The conversation beside an open panel: what is left of the chat's width (none, where the panel
+   takes it all). */
+.sc-chat--placed {
+  padding-right: min(440px, 100%);
+}
+
+.sc-placed--modal {
+  width: min(600px, calc(100vw - 32px));
+  max-height: min(720px, calc(100dvh - 48px));
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--_line);
+  border-radius: var(--_radius);
+  box-shadow: var(--_shadow-overlay);
+}
+
+.sc-placed--modal[open] {
+  display: flex;
+}
+
+.sc-placed--modal::backdrop {
+  background: rgb(0 0 0 / 0.32);
+}
+
 /* Where who answers the conversation changed: the same quiet line, what changed and why centred
    between the hairlines (a long reason wraps there), and when, quieter still. */
 .sc-chat__handover {
@@ -2283,6 +2401,439 @@ button.sc-tile__main:focus-visible {
   white-space: nowrap;
 }
 
+/* A calendar: its days one under another, each its weekday and number at the left of its events
+   (today's in the accent), an empty day a single quiet line; wide enough, the week stands as
+   seven columns. Each event its hours in figures that line up, its title, a quiet line of detail;
+   one to open or press lights under the pointer. */
+.sc-agenda {
+  min-width: 0;
+  container-type: inline-size;
+  font-variant-numeric: tabular-nums;
+}
+
+.sc-agenda__days {
+  display: flex;
+  flex-direction: column;
+}
+
+.sc-agenda__day {
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr);
+  gap: 12px;
+  padding: 10px 0;
+}
+
+.sc-agenda__day + .sc-agenda__day {
+  border-top: 1px solid var(--_hair);
+}
+
+.sc-agenda--day .sc-agenda__day {
+  grid-template-columns: minmax(0, 1fr);
+  padding: 0;
+}
+
+.sc-agenda__date {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin: 0;
+  font-weight: var(--_font-weight);
+  line-height: 1.2;
+}
+
+.sc-agenda__weekday {
+  color: var(--_subtle);
+  font-size: var(--_font-size-xs);
+  text-transform: capitalize;
+}
+
+.sc-agenda__number {
+  color: var(--_fg);
+  font-size: var(--_font-size-lg);
+  font-weight: var(--_font-weight-medium);
+}
+
+.sc-agenda__day--today .sc-agenda__weekday,
+.sc-agenda__day--today .sc-agenda__number {
+  color: var(--_accent);
+}
+
+.sc-agenda__events {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sc-agenda__event {
+  display: grid;
+  grid-template-columns: calc(var(--_font-size) * 7) minmax(0, 1fr);
+  gap: 12px;
+  align-items: baseline;
+  width: 100%;
+  margin: 0 -8px;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: var(--_inner);
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  text-decoration: none;
+  box-sizing: content-box;
+}
+
+:is(a, button).sc-agenda__event {
+  cursor: pointer;
+  transition: background-color 0.12s;
+}
+
+:is(a, button).sc-agenda__event:hover:not(:disabled) {
+  background: var(--_wash);
+}
+
+:is(a, button).sc-agenda__event:focus-visible {
+  outline: 2px solid var(--_accent);
+  outline-offset: -2px;
+}
+
+button.sc-agenda__event:disabled {
+  cursor: default;
+}
+
+.sc-agenda__time {
+  color: var(--_muted);
+  font-size: var(--_font-size-sm);
+}
+
+.sc-agenda__time > span {
+  white-space: nowrap;
+}
+
+.sc-agenda__what {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.sc-agenda__title {
+  overflow-wrap: anywhere;
+  font-weight: var(--_font-weight-medium);
+}
+
+.sc-agenda__detail,
+.sc-agenda__empty {
+  color: var(--_muted);
+  font-size: var(--_font-size-sm);
+}
+
+.sc-agenda__empty {
+  margin: 0;
+  padding: 2px 0;
+  color: var(--_subtle);
+}
+
+.sc-agenda__day--empty {
+  align-items: center;
+}
+
+@container (min-width: 680px) {
+  .sc-agenda:not(.sc-agenda--day) > .sc-agenda__days {
+    display: grid;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    border: 1px solid var(--_hair);
+    border-radius: var(--_inner);
+  }
+
+  .sc-agenda:not(.sc-agenda--day) .sc-agenda__day {
+    grid-template-columns: minmax(0, 1fr);
+    align-content: start;
+    gap: 8px;
+    min-height: 140px;
+    padding: 10px;
+    border-top: 0;
+  }
+
+  .sc-agenda:not(.sc-agenda--day) .sc-agenda__day + .sc-agenda__day {
+    border-left: 1px solid var(--_hair);
+  }
+
+  .sc-agenda:not(.sc-agenda--day) .sc-agenda__event {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0;
+    margin: 0 -6px;
+    padding: 4px 6px;
+  }
+
+  .sc-agenda:not(.sc-agenda--day) .sc-agenda__time {
+    font-size: var(--_font-size-xs);
+  }
+
+  .sc-agenda:not(.sc-agenda--day) .sc-agenda__empty {
+    display: none;
+  }
+}
+
+/* A timeline: a hairline down the left, a dot on it for each thing (hollow, or filled in its
+   tone), its title with where it stands in a quiet word at its right, when under it, a line
+   about it. */
+.sc-timeline {
+  --_rail: 7px;
+
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sc-timeline__item {
+  --_dot: var(--_line-hover);
+
+  position: relative;
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr);
+  gap: 10px;
+  padding-bottom: 14px;
+}
+
+.sc-timeline__item:last-child {
+  padding-bottom: 0;
+}
+
+.sc-timeline__item::before {
+  content: "";
+  position: absolute;
+  top: 14px;
+  bottom: -2px;
+  left: var(--_rail);
+  width: 1px;
+  background: var(--_line);
+}
+
+.sc-timeline__item:last-child::before {
+  display: none;
+}
+
+.sc-timeline__item--info {
+  --_dot: var(--_accent);
+}
+
+.sc-timeline__item--success {
+  --_dot: var(--_success);
+}
+
+.sc-timeline__item--warning {
+  --_dot: var(--_warning);
+}
+
+.sc-timeline__item--danger {
+  --_dot: var(--_danger);
+}
+
+.sc-timeline__dot {
+  width: 9px;
+  height: 9px;
+  margin: 6px 0 0 3px;
+  border: 2px solid var(--_dot);
+  border-radius: var(--_radius-full);
+  background: var(--_surface);
+}
+
+[class*="sc-timeline__item--"] > .sc-timeline__dot {
+  background: var(--_dot);
+}
+
+.sc-timeline__body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.sc-timeline__head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 0;
+}
+
+.sc-timeline__title {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-weight: var(--_font-weight-medium);
+}
+
+.sc-timeline__status {
+  flex-shrink: 0;
+  color: var(--_muted);
+  font-size: var(--_font-size-sm);
+}
+
+.sc-timeline__when {
+  color: var(--_subtle);
+  font-size: var(--_font-size-xs);
+  font-variant-numeric: tabular-nums;
+}
+
+.sc-timeline__text {
+  margin: 2px 0 0;
+  color: var(--_muted);
+  font-size: var(--_font-size-sm);
+}
+
+/* A board: its columns side by side on a sunken ground, scrolling across inside their own box
+   when they don't fit, each its title and count over its cards; a card lifts a hair off the
+   column, a moving one fades where it was, and the column it would land in lights. */
+.sc-board {
+  display: grid;
+  grid-auto-columns: minmax(200px, 1fr);
+  grid-auto-flow: column;
+  gap: 8px;
+  min-width: 0;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x proximity;
+}
+
+.sc-board__column {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  padding: 10px;
+  border: 1px solid transparent;
+  border-radius: var(--_inner);
+  background: var(--_sunken);
+  scroll-snap-align: start;
+}
+
+.sc-board__column--over {
+  border-color: color-mix(in srgb, var(--_accent) 40%, transparent);
+  background: var(--_picked);
+}
+
+.sc-board__head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  margin: 0;
+  padding: 0 2px;
+  font-size: var(--_font-size-sm);
+  font-weight: var(--_font-weight-medium);
+}
+
+.sc-board__count {
+  color: var(--_subtle);
+  font-weight: var(--_font-weight);
+  font-variant-numeric: tabular-nums;
+}
+
+.sc-board__cards {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sc-board__card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 12px;
+  border: 1px solid var(--_line);
+  border-radius: var(--_inner);
+  background: var(--_surface);
+  box-shadow: var(--_shadow);
+}
+
+.sc-board__card[draggable="true"] {
+  padding-right: 36px;
+  cursor: grab;
+}
+
+.sc-board__card--dragging {
+  opacity: 0.45;
+}
+
+.sc-board__card-title {
+  overflow-wrap: anywhere;
+  font-weight: var(--_font-weight-medium);
+}
+
+.sc-board__card-subtitle {
+  color: var(--_muted);
+  font-size: var(--_font-size-sm);
+}
+
+.sc-board__card-meta {
+  margin-top: 4px;
+  color: var(--_muted);
+  font-size: var(--_font-size-xs);
+  font-variant-numeric: tabular-nums;
+}
+
+.sc-board__empty {
+  margin: 0;
+  padding: 2px;
+  color: var(--_subtle);
+  font-size: var(--_font-size-sm);
+}
+
+.sc-board__move {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 0;
+  border-radius: calc(var(--_inner) - 2px);
+  background: none;
+  color: var(--_subtle);
+  cursor: pointer;
+}
+
+.sc-board__move:hover,
+.sc-board__move[aria-expanded="true"] {
+  background: var(--_wash);
+  color: var(--_fg);
+}
+
+.sc-board__move:focus-visible {
+  outline: 2px solid var(--_accent);
+  outline-offset: 0;
+}
+
+.sc-board__move > svg {
+  width: 15px;
+  height: 15px;
+}
+
+.sc-board__menu {
+  display: flex;
+  flex-direction: column;
+  min-width: 160px;
+  padding: 4px;
+}
+
+.sc-board__menu > p {
+  margin: 0;
+  padding: 4px 8px 6px;
+  color: var(--_subtle);
+  font-size: var(--_font-size-xs);
+}
+
 /* A note: its tone's mark and the words on a wash of it, edged by it. */
 .sc-note {
   --_tone: var(--_accent);
@@ -5211,6 +5762,23 @@ button.sc-attachment__main:focus-visible {
   color: var(--_fg);
 }
 
+/* A host's block this page doesn't draw: its words in a quiet hairline box where it would be. */
+.sc-surface__host {
+  padding: 12px 14px;
+  border: 1px solid var(--_line);
+  border-radius: var(--_inner);
+  background: var(--_surface);
+  color: var(--_muted);
+}
+
+.sc-surface__host > :first-child {
+  margin-top: 0;
+}
+
+.sc-surface__host > :last-child {
+  margin-bottom: 0;
+}
+
 /* An automation that is not there any more: a quiet line in a dashed box where it would be. */
 .sc-automation--gone {
   margin: 0;

package/src/surface/Placed.tsx

@@ -0,0 +1,98 @@
+import { XIcon } from "@phosphor-icons/react";
+import { useEffect, useRef, type KeyboardEvent, type ReactNode } from "react";
+
+import { classes } from "../classes";
+import { Button } from "../kit/Button";
+
+/** The parts of a surface shown apart from the conversation, by the class each carries. */
+export type PlacedPart =
+  | "sc-placed"
+  | "sc-placed--panel"
+  | "sc-placed--modal"
+  | "sc-placed__head"
+  | "sc-placed__title"
+  | "sc-placed__body";
+
+/**
+ * A surface the agent put apart from the conversation, tied to it all the same: in a `panel` that
+ * stands beside the conversation (over it where there is no room), or in a `modal` over the page,
+ * whose backdrop, Escape or cross close it. Its title heads it; closed, the conversation's line
+ * opens it again.
+ */
+export function Placed({
+  where,
+  title,
+  closeLabel,
+  onClose,
+  classNames,
+  children,
+}: {
+  where: "panel" | "modal";
+  title: string;
+  closeLabel: string;
+  onClose: () => void;
+  classNames: Partial<Record<PlacedPart, string>> | undefined;
+  children: ReactNode;
+}) {
+  const dialog = useRef<HTMLDialogElement>(null);
+  useEffect(() => {
+    const opened = dialog.current;
+    if (opened === null) return undefined;
+    // jsdom has no top layer: a dialog there is only shown.
+    if (typeof opened.showModal === "function") opened.showModal();
+    else opened.setAttribute("open", "");
+    return () => {
+      if (typeof opened.close === "function") opened.close();
+    };
+  }, []);
+  const head = (
+    <header className={classes(classNames, "sc-placed__head")}>
+      <h2 className={classes(classNames, "sc-placed__title")}>{title}</h2>
+      <Button
+        tone="ghost"
+        size="sm"
+        icon={XIcon}
+        aria-label={closeLabel}
+        title={closeLabel}
+        onClick={onClose}
+      />
+    </header>
+  );
+  // Escape closes this, not the reply the conversation is writing.
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (event.key !== "Escape") return;
+    event.stopPropagation();
+    if (where === "panel") onClose();
+  };
+  const body = <div className={classes(classNames, "sc-placed__body")}>{children}</div>;
+  if (where === "panel") {
+    return (
+      <aside
+        part="placed panel"
+        aria-label={title}
+        onKeyDown={onKeyDown}
+        className={classes(classNames, "sc-placed", "sc-placed--panel")}
+      >
+        {head}
+        {body}
+      </aside>
+    );
+  }
+  return (
+    <dialog
+      ref={dialog}
+      part="placed modal"
+      aria-label={title}
+      onKeyDown={onKeyDown}
+      onClose={onClose}
+      // A press on the backdrop (the dialog itself, outside its box) closes it.
+      onClick={(event) => {
+        if (event.target === event.currentTarget) onClose();
+      }}
+      className={`sc ${classes(classNames, "sc-placed", "sc-placed--modal")}`}
+    >
+      {head}
+      {body}
+    </dialog>
+  );
+}