wings-plugin-ui 0.3.0 → 0.4.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.4.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;

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

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;
     }