wings-plugin-ui 0.3.0 → 0.5.0

package/markdown.js

@@ -2,7 +2,10 @@
 // it, and the only URLs it lets through are https links and https or small data:image images.
 //
 // Blocks: headings, paragraphs, lists (flat, with an indent depth, and task items), fenced code, quotes, rules and
-// GFM tables. Inline: code, bold, italics, strikethrough, links, images and bare https URLs.
+// GFM tables. Inline: code, bold, italics, strikethrough, links, images, bare https URLs and emoji shortcodes
+// (`:white_check_mark:`), which stay literal inside code and when the name is unknown.
+
+import { EMOJI } from "./emoji.js";
 
 /** A data: image longer than this, in characters, is shown as its alt text. */
 export const MAX_DATA_IMAGE = 8000;
@@ -142,7 +145,11 @@ export function parseBlocks(src) {
 // Every scan is bounded and stops at a newline, so a long run of brackets or markers costs a bounded step per start
 // rather than a pass over the rest of the text.
 const inlinePattern =
-  /\[!\[([^\[\]\n]{0,200})\]\(([^)\s]{0,2000})\)\]\(([^)\s]{1,2000})\)|!\[([^\[\]\n]{0,200})\]\(([^)\s]{0,2000})\)|\[([^\[\]\n]{1,200})\]\(([^)\s]{1,2000})\)|`([^`\n]{1,2000})`|\*\*([^*\n]{1,2000})\*\*|~~([^~\n]{1,2000})~~|\*([^*\s][^*\n]{0,2000})\*|(https:\/\/[^\s<>"'`)\]]{1,2000})/gi;
+  /\[!\[([^\[\]\n]{0,200})\]\(([^)\s]{0,2000})\)\]\(([^)\s]{1,2000})\)|!\[([^\[\]\n]{0,200})\]\(([^)\s]{0,2000})\)|\[([^\[\]\n]{1,200})\]\(([^)\s]{1,2000})\)|`([^`\n]{1,2000})`|\*\*([^*\n]{1,2000})\*\*|~~([^~\n]{1,2000})~~|\*([^*\s][^*\n]{0,2000})\*|(https:\/\/[^\s<>"'`)\]]{1,2000})|:([a-z0-9_+-]{1,40}):/gi;
+
+/** `text` with its known `:shortcodes:` as emoji, for spans that are plain text, like a bold or a link's text. */
+export const emojify = (text) =>
+  text.includes(":") ? text.replace(/:([a-z0-9_+-]{1,40}):/gi, (all, name) => (Object.hasOwn(EMOJI, name.toLowerCase()) ? EMOJI[name.toLowerCase()] : all)) : text;
 
 const sentenceEnd = ".,;:!?";
 
@@ -172,7 +179,10 @@ export function parseInline(src) {
     else if (m[9] !== undefined) out.push({ kind: "strong", text: m[9] });
     else if (m[10] !== undefined) out.push({ kind: "del", text: m[10] });
     else if (m[11] !== undefined) out.push({ kind: "em", text: m[11] });
-    else {
+    else if (m[13] !== undefined) {
+      const emoji = Object.hasOwn(EMOJI, m[13].toLowerCase()) ? EMOJI[m[13].toLowerCase()] : null;
+      out.push({ kind: "text", text: emoji ?? m[0] });
+    } else {
       // A bare URL, without the punctuation that ends a sentence.
       let end = m[12].length;
       while (end > 0 && sentenceEnd.includes(m[12][end - 1])) end--;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wings-plugin-ui",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "React components and the stylesheet for Wings plugin pages, on Base UI like the Wings app's shadcn/ui components.",
   "license": "MIT",
   "type": "module",
@@ -15,6 +15,7 @@
   "files": [
     "ui.js",
     "markdown.js",
+    "emoji.js",
     "ui.d.ts",
     "plugin-ui.css",
     "README.md",

package/plugin-ui.css

@@ -744,6 +744,32 @@ textarea::placeholder {
 }
 
 /* Status: a dot, a spinner and a badge. */
+.w-avatar {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: hsl(var(--w-hue) 45% 32%);
+  color: hsl(var(--w-hue) 70% 90%);
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.02em;
+  user-select: none;
+}
+.w-avatar[data-size="small"] {
+  width: 18px;
+  height: 18px;
+  font-size: 8px;
+}
+.w-avatar[data-size="large"] {
+  width: 32px;
+  height: 32px;
+  font-size: 12px;
+}
 .w-dot {
   flex: none;
   width: 6px;
@@ -1661,4 +1687,194 @@ span.w-md {
 .w-md-table [data-align="right"] {
   text-align: right;
 }
+
+/* Activity: a summary row, skeletons and a timeline, shared by pages like a pull request and a work item. */
+.w-summary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+.w-summary-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  height: 26px;
+  padding: 0 10px;
+  border: 1px solid var(--wings-hairline-strong);
+  border-radius: 999px;
+  background: var(--wings-surface);
+  color: var(--wings-fg);
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+button.w-summary-chip {
+  cursor: pointer;
+  transition: background-color 150ms;
+}
+button.w-summary-chip:hover {
+  background: var(--wings-hover);
+}
+button.w-summary-chip:focus-visible {
+  outline: 2px solid var(--wings-ring);
+  outline-offset: 2px;
+}
+.w-summary-chip[data-tone="info"] {
+  --w-tone: var(--wings-info);
+}
+.w-summary-chip[data-tone="success"] {
+  --w-tone: var(--wings-success);
+}
+.w-summary-chip[data-tone="warn"] {
+  --w-tone: var(--wings-warning);
+}
+.w-summary-chip[data-tone="danger"] {
+  --w-tone: var(--wings-danger);
+}
+.w-summary-chip[data-tone] {
+  border-color: color-mix(in srgb, var(--w-tone) 40%, transparent);
+  color: var(--w-tone);
+}
+
+.w-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.w-skeletons {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.w-skeleton {
+  display: block;
+  width: var(--w-width, 100%);
+  height: var(--w-height, 14px);
+  border-radius: var(--wings-radius);
+  background: linear-gradient(90deg, var(--wings-surface), var(--wings-hover), var(--wings-surface)) 0 0 / 200% 100%;
+  animation: w-shimmer 1.4s ease-in-out infinite;
+}
+@keyframes w-shimmer {
+  to {
+    background-position: -200% 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .w-skeleton {
+    animation: none;
+  }
+}
+
+.w-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.w-timeline-item {
+  min-width: 0;
+  content-visibility: auto;
+  contain-intrinsic-size: auto 96px;
+}
+.w-timeline-card {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+  padding: 12px 14px;
+  border: 1px solid var(--wings-hairline);
+  border-radius: var(--wings-radius);
+  background: var(--wings-surface);
+}
+.w-timeline-item[data-quiet] > .w-timeline-card {
+  background: transparent;
+  font-size: 12px;
+}
+.w-timeline-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+  min-width: 0;
+}
+.w-timeline-author {
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+.w-timeline-tag {
+  padding: 0 6px;
+  border: 1px solid var(--wings-hairline-strong);
+  border-radius: 999px;
+  color: var(--wings-muted);
+  font-size: 11px;
+  line-height: 16px;
+}
+.w-timeline-time {
+  color: var(--wings-muted);
+  font-size: 12px;
+}
+.w-timeline-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+}
+.w-timeline-note {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 14px;
+  color: var(--wings-muted);
+  font-size: 12px;
+}
+.w-timeline-note-text {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.w-timeline-note-text strong {
+  color: var(--wings-fg);
+  font-weight: 600;
+}
+.w-clamp {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  min-width: 0;
+}
+.w-clamp-box {
+  width: 100%;
+  min-width: 0;
+}
+.w-clamp-box[data-clamped] {
+  max-height: 11em;
+  overflow: hidden;
+}
+.w-clamp-box[data-cut] {
+  mask-image: linear-gradient(to bottom, #000 70%, transparent);
+}
+.w-clamp-toggle {
+  padding: 2px 6px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--wings-info);
+  font-size: 12px;
+  cursor: pointer;
+}
+.w-clamp-toggle:hover {
+  background: var(--wings-hover);
+}
+.w-clamp-toggle:focus-visible {
+  outline: 2px solid var(--wings-ring);
+  outline-offset: 2px;
+}
 }

package/ui.d.ts

@@ -174,6 +174,11 @@ export function Dot(
     label?: string;
   },
 ): ReactElement;
+/**
+ * A round avatar with the initials of `name` (up to two letters) on a colour that depends only on the name, so a person
+ * looks the same everywhere. Decoration next to the name unless given a `label`, which names it for assistive tech.
+ */
+export function Avatar(props: Props<"span"> & { name: string; size?: "small" | "large"; label?: string }): ReactElement;
 /** A spinner, 16px like the app's, in the colour of the text around it. With a `label` it's announced; otherwise it's decoration. */
 export function Spinner(props: Props<"span"> & { size?: "large"; label?: string }): ReactElement;
 /** shadcn/ui's Badge variants. */
@@ -339,7 +344,8 @@ export function Disclosure(
 
 /**
  * Markdown as React elements: headings, paragraphs, lists (with read-only task checkboxes), fenced code, quotes,
- * rules, GFM tables, bold, italics, strikethrough, inline code, links, bare https URLs and images. No HTML is ever
+ * rules, GFM tables, bold, italics, strikethrough, inline code, links, bare https URLs, images and emoji shortcodes like
+ * `:white_check_mark:` (unknown names and anything in code stay as typed). No HTML is ever
  * parsed. Links open through `wings.openUrl` and only when they are https, so the manifest needs
  * `permissions.openUrl: ["https://"]` for them to work. Images load only from https or `data:image/` (png, jpeg, gif,
  * webp) URLs of up to 8,000 characters; anything else shows its alt text. A remote https image shows as a "Load image from <host>" button and loads only when clicked, since text an agent wrote could otherwise leak data in the URL; a data: image shows at once. `inline` renders only the inline parts, in
@@ -348,3 +354,28 @@ export function Disclosure(
 export function Markdown(props: Omit<Props<"div">, "children"> & { source: string; inline?: boolean }): ReactElement;
 /** The longest `data:image/` URL, in characters, that `Markdown` shows. */
 export const MAX_DATA_IMAGE: number;
+
+// ---------- activity: times, a summary row, skeletons and a timeline ----------
+
+/** "just now", "5 min ago", "3 h ago", "2 d ago", then the date; "" when `iso` isn't a date. `now` is for tests. */
+export function ago(iso: string, now?: number): string;
+/** A moment as a `time` element: how long ago (after `prefix`), the exact date and time as its title. Renders nothing when `iso` isn't a date. */
+export function Time(props: Omit<Props<"time">, "dateTime" | "children"> & { iso: string; prefix?: ReactNode; now?: number }): ReactElement | null;
+/** A row of `SummaryChip`s under a page's header. */
+export function Summary(props: Props<"div">): ReactElement;
+/** One fact in a `Summary`: a button when it has `onClick`, text otherwise. `tone` colours it. */
+export function SummaryChip(props: Omit<Props<"span">, "onClick"> & { tone?: "info" | "success" | "warn" | "danger"; onClick?: Props<"button">["onClick"]; type?: "button" | "submit" }): ReactElement;
+/** A block that stands in for loading content, `width` and `height` in px or any CSS length. Decoration: wrap a group in `Skeletons`. */
+export function Skeleton(props: Props<"span"> & { width?: number | string; height?: number | string }): ReactElement;
+/** A group of `Skeleton`s announced once as `label`, with `aria-busy`. */
+export function Skeletons(props: Omit<Props<"div">, "role" | "aria-label"> & { label: string }): ReactElement;
+/** An ordered list of `TimelineCard`s and `TimelineNote`s, named `label`. */
+export function Timeline(props: Props<"ol"> & { label: string }): ReactElement;
+/**
+ * An entry of a `Timeline`: the `Avatar`, name and time of `author` and `at` (ISO), an optional `tag` and `actions`
+ * at the right of that line, and `children` as the body. `quiet` for what a bot or the system wrote; `clamp` cuts a long
+ * body until "Show more".
+ */
+export function TimelineCard(props: Omit<Props<"li">, "children"> & { author: string; at?: string; tag?: ReactNode; actions?: ReactNode; quiet?: boolean; clamp?: boolean; children?: ReactNode }): ReactElement;
+/** A quiet one-line entry of a `Timeline`: a small avatar, the author in bold, `children`, then the time. */
+export function TimelineNote(props: Omit<Props<"li">, "children"> & { author: string; at?: string; children?: ReactNode }): ReactElement;

package/ui.js

@@ -17,7 +17,7 @@ import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
 import { createContext, createElement as h, useContext, useEffect, useId, memo, useLayoutEffect, useRef, useState } from "react";
 import { createRoot } from "react-dom/client";
 
-import { MAX_DATA_IMAGE, parseBlocks, parseInline } from "./markdown.js";
+import { MAX_DATA_IMAGE, emojify, parseBlocks, parseInline } from "./markdown.js";
 
 export { MAX_DATA_IMAGE };
 
@@ -365,6 +365,38 @@ export function Dot({ tone, color, label, className, style, ...rest }) {
   });
 }
 
+/** Up to two initials of a name or login: "Ada Lovelace" is AL, "ada-bot[bot]" is AB, "ada" is A. */
+const initialsOf = (name) => {
+  const words = name.replace(/\[bot\]$/i, "").split(/[^\p{L}\p{N}]+/u).filter(Boolean);
+  return (words.length > 1 ? words[0][0] + words[1][0] : (words[0] ?? "?").slice(0, 1)).toUpperCase();
+};
+
+/** A hue from 0 to 359 that depends only on the name, so a person has the same colour everywhere. */
+const hueOf = (name) => {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) hash = (hash * 31 + name.charCodeAt(i)) >>> 0;
+  return hash % 360;
+};
+
+/**
+ * A round avatar with the initials of a `name` on a colour taken from it. Decoration next to the name by default;
+ * with a `label` it's announced.
+ */
+export function Avatar({ name, size, label, className, style, ...rest }) {
+  return h(
+    "span",
+    {
+      ...rest,
+      className: cx("w-avatar", className),
+      // The hue comes from the name, as data: plugin-ui.css paints the avatar with it.
+      style: { ...style, "--w-hue": hueOf(name) },
+      "data-size": size,
+      ...(label ? { role: "img", "aria-label": label } : { "aria-hidden": true }),
+    },
+    initialsOf(name),
+  );
+}
+
 /** A spinner. With a `label` it's announced. */
 export function Spinner({ size, label, className, ...rest }) {
   return h("span", { ...rest, className: cx("w-spinner", className), "data-size": size, ...(label ? { role: "img", "aria-label": label } : { "aria-hidden": true }) });
@@ -795,15 +827,15 @@ function MdInline({ text }) {
       case "code":
         return h("code", { key: i, className: "w-md-code" }, part.text);
       case "strong":
-        return h("strong", { key: i }, part.text);
+        return h("strong", { key: i }, emojify(part.text));
       case "em":
-        return h("em", { key: i }, part.text);
+        return h("em", { key: i }, emojify(part.text));
       case "del":
-        return h("del", { key: i }, part.text);
+        return h("del", { key: i }, emojify(part.text));
       case "image":
         return h(MdImage, { key: i, src: part.src, alt: part.alt });
       case "link":
-        return h("a", { key: i, className: "w-md-link", href: part.href, onClick: (e) => openLink(e, part.href) }, part.text);
+        return h("a", { key: i, className: "w-md-link", href: part.href, onClick: (e) => openLink(e, part.href) }, emojify(part.text));
       default:
         return part.text;
     }
@@ -871,3 +903,128 @@ export const Markdown = memo(function Markdown({ source, inline, className, ...r
     }),
   );
 });
+
+// ---------- activity: times, a summary row, skeletons and a timeline ----------
+
+/** "just now", "5 min ago", "3 h ago", "2 d ago", then the date. "" for something that isn't a date. */
+export function ago(iso, now = Date.now()) {
+  const t = Date.parse(iso);
+  if (Number.isNaN(t)) return "";
+  const minutes = Math.max(0, Math.round((now - t) / 60_000));
+  if (minutes < 1) return "just now";
+  if (minutes < 60) return `${minutes} min ago`;
+  if (minutes < 1440) return `${Math.round(minutes / 60)} h ago`;
+  if (minutes < 43_200) return `${Math.round(minutes / 1440)} d ago`;
+  return new Date(t).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
+}
+
+/** A moment as a `time` element: how long ago, with the exact date and time on hover. Nothing when `iso` isn't a date. */
+export function Time({ iso, prefix, now, className, ...rest }) {
+  const text = ago(iso, now);
+  if (!text) return null;
+  return h("time", { title: new Date(iso).toLocaleString(), ...rest, className, dateTime: iso }, prefix, text);
+}
+
+/** A row of `SummaryChip`s under a page's header: the facts about the thing at a glance. */
+export function Summary({ className, ...rest }) {
+  return h("div", { ...rest, className: cx("w-summary", className) });
+}
+
+/** One fact in a `Summary`. With `onClick` it's a button (it takes you to where the fact comes from); without, plain text. */
+export function SummaryChip({ tone, className, onClick, type = "button", ...rest }) {
+  const props = { ...rest, className: cx("w-summary-chip", className), "data-tone": tone };
+  return onClick ? h("button", { ...props, type, onClick }) : h("span", props);
+}
+
+/** A grey block that stands in for content that is still loading, sized by `width` and `height` (CSS lengths or px). It shimmers unless the user asked for less motion. */
+export function Skeleton({ width, height, className, style, ...rest }) {
+  const size = (v) => (typeof v === "number" ? `${v}px` : v);
+  return h("span", {
+    ...rest,
+    className: cx("w-skeleton", className),
+    style: { ...style, ...(width === undefined ? null : { "--w-width": size(width) }), ...(height === undefined ? null : { "--w-height": size(height) }) },
+    "aria-hidden": true,
+  });
+}
+
+/** Skeletons that stand in for a section, announced once as `label` and `aria-busy`. */
+export function Skeletons({ label, children, className, ...rest }) {
+  // The label is text inside the region, which a live region announces; an aria-label alone isn't.
+  return h("div", { ...rest, className: cx("w-skeletons", className), role: "status", "aria-busy": true }, h("span", { className: "w-visually-hidden" }, label), children);
+}
+
+/** A conversation or an activity feed: an ordered list of `TimelineCard`s and `TimelineNote`s. */
+export function Timeline({ label, className, ...rest }) {
+  return h("ol", { ...rest, className: cx("w-timeline", className), "aria-label": label });
+}
+
+const FOCUSABLE = "a[href], button, input, select, textarea, summary, [tabindex]";
+
+/** Cuts `children` after a few lines until the reader asks for the rest; focusable things below the cut are inert meanwhile. The button only shows when something was cut. */
+function Clamped({ children }) {
+  const box = useRef(null);
+  const [more, setMore] = useState(false);
+  const [cut, setCut] = useState(false);
+  useLayoutEffect(() => {
+    const el = box.current;
+    if (!el) return;
+    if (more) {
+      for (const f of el.querySelectorAll(FOCUSABLE)) f.inert = false;
+      return;
+    }
+    const measure = () => {
+      setCut(el.scrollHeight > el.clientHeight + 1);
+      // What the cut hides can't be reached by keyboard or screen reader until "Show more".
+      const bottom = el.getBoundingClientRect().bottom;
+      for (const f of el.querySelectorAll(FOCUSABLE)) f.inert = f.getBoundingClientRect().top >= bottom - 1;
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const watch = new ResizeObserver(measure);
+    watch.observe(el);
+    return () => watch.disconnect();
+  }, [more]);
+  return h(
+    "div",
+    { className: "w-clamp" },
+    h("div", { ref: box, className: "w-clamp-box", "data-clamped": more ? undefined : "", "data-cut": cut && !more ? "" : undefined }, children),
+    cut || more ? h("button", { type: "button", className: "w-clamp-toggle", "aria-expanded": more, onClick: () => setMore(!more) }, more ? "Show less" : "Show more") : null,
+  );
+}
+
+/**
+ * One entry of a `Timeline`, a card: the author's `Avatar`, name and when, a `tag` (like "Author") and `actions` on the
+ * right, and `children` as the body. `quiet` draws it without a fill, for what a bot or the system wrote. `clamp` cuts
+ * a long body until "Show more" is pressed.
+ */
+export function TimelineCard({ author, at, tag, actions, quiet, clamp, children, className, ...rest }) {
+  return h(
+    "li",
+    { ...rest, className: cx("w-timeline-item", className), "data-quiet": quiet ? "" : undefined },
+    h(
+      "article",
+      { className: "w-timeline-card", "aria-label": `By ${author}` },
+      h(
+        "div",
+        { className: "w-timeline-head" },
+        h(Avatar, { name: author }),
+        h("strong", { className: "w-timeline-author" }, author),
+        tag ? h("span", { className: "w-timeline-tag" }, tag) : null,
+        h(Time, { iso: at, className: "w-timeline-time" }),
+        actions ? h("span", { className: "w-timeline-actions" }, actions) : null,
+      ),
+      clamp ? h(Clamped, null, children) : children,
+    ),
+  );
+}
+
+/** A quiet one-line entry of a `Timeline`, like "Ada moved it to Active": a small avatar, then `children`, then when. */
+export function TimelineNote({ author, at, children, className, ...rest }) {
+  return h(
+    "li",
+    { ...rest, className: cx("w-timeline-item w-timeline-note", className) },
+    h(Avatar, { name: author, size: "small" }),
+    h("span", { className: "w-timeline-note-text" }, h("strong", null, author), " ", children),
+    h(Time, { iso: at, className: "w-timeline-time" }),
+  );
+}