rift-ds 1.5.0 → 1.7.0

package/components/Mention/Mention.js

@@ -0,0 +1,145 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React, { useRef, useLayoutEffect } from "react";
+import "../../fonts/material-symbols.css";
+import "./Mention.css";
+import { mentionOptionId, mentionListboxId, splitMentions } from "./mentions.js";
+import { filterMentionItems, getMentionQuery, insertMention } from "./mentions.js";
+const Mention = React.forwardRef(
+  ({ trigger = "@", className = "", children, ...rest }, ref) => /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...rest,
+      ref,
+      className: ["ds-mention", className].filter(Boolean).join(" "),
+      "data-trigger": trigger,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "ds-mention__trigger", children: trigger }),
+        children
+      ]
+    }
+  )
+);
+Mention.displayName = "Mention";
+const MentionText = React.forwardRef(
+  ({ text, sources, className = "", ...rest }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...rest,
+      ref,
+      className: ["ds-mention-text", className].filter(Boolean).join(" "),
+      children: splitMentions(text, sources).map(
+        (segment, index) => segment.type === "mention" ? (
+          // Segments never reorder: the text is re-split whole on every change
+          /* @__PURE__ */ jsx(Mention, { trigger: segment.trigger, children: segment.item.label }, index)
+        ) : /* @__PURE__ */ jsx(React.Fragment, { children: segment.text }, index)
+      )
+    }
+  )
+);
+MentionText.displayName = "MentionText";
+const renderLabel = (label, query) => {
+  const needle = query.trim().toLowerCase();
+  const at = needle === "" ? -1 : label.toLowerCase().indexOf(needle);
+  if (at < 0) return label;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    label.slice(0, at),
+    /* @__PURE__ */ jsx("span", { className: "ds-mention-menu__match", children: label.slice(at, at + needle.length) }),
+    label.slice(at + needle.length)
+  ] });
+};
+const MentionMenu = React.forwardRef(
+  ({
+    items,
+    activeId,
+    onActiveChange,
+    onSelect,
+    query = "",
+    label = "Suggestions",
+    emptyText,
+    className = "",
+    id,
+    onMouseDown,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-mention-menu";
+    const generatedId = React.useId();
+    const menuId = id ?? generatedId;
+    const listRef = useRef(null);
+    useLayoutEffect(() => {
+      const list = listRef.current;
+      if (!list || activeId === void 0) return;
+      const row = list.querySelector('[aria-selected="true"]');
+      if (!row) return;
+      const top = row.offsetTop;
+      const bottom = top + row.offsetHeight;
+      if (top < list.scrollTop) list.scrollTop = top;
+      else if (bottom > list.scrollTop + list.clientHeight) {
+        list.scrollTop = bottom - list.clientHeight;
+      }
+    }, [activeId, items]);
+    if (items.length === 0 && !emptyText) return null;
+    const handleMouseDown = (event) => {
+      onMouseDown?.(event);
+      event.preventDefault();
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        ref,
+        id: menuId,
+        className: [baseClass, query.trim() !== "" ? `${baseClass}--filtered` : "", className].filter(Boolean).join(" "),
+        onMouseDown: handleMouseDown,
+        children: items.length === 0 ? /* @__PURE__ */ jsx("div", { className: `${baseClass}__empty`, role: "status", children: emptyText }) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: listRef,
+            id: mentionListboxId(menuId),
+            className: `${baseClass}__list`,
+            role: "listbox",
+            "aria-label": label,
+            tabIndex: 0,
+            children: items.map((item) => {
+              const active = item.id === activeId;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  id: mentionOptionId(menuId, item.id),
+                  className: [
+                    `${baseClass}__option`,
+                    active ? `${baseClass}__option--active` : "",
+                    item.disabled ? `${baseClass}__option--disabled` : ""
+                  ].filter(Boolean).join(" "),
+                  role: "option",
+                  "aria-selected": active,
+                  "aria-disabled": item.disabled || void 0,
+                  onMouseMove: item.disabled || active ? void 0 : () => onActiveChange?.(item.id),
+                  onClick: item.disabled ? void 0 : () => onSelect?.(item),
+                  children: [
+                    item.icon !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: typeof item.icon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: item.icon }) : item.icon }),
+                    /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: renderLabel(item.label, query) }),
+                    item.description && /* @__PURE__ */ jsx("span", { className: `${baseClass}__description`, children: item.description })
+                  ]
+                },
+                item.id
+              );
+            })
+          }
+        )
+      }
+    );
+  }
+);
+MentionMenu.displayName = "MentionMenu";
+export {
+  Mention,
+  MentionMenu,
+  MentionText,
+  filterMentionItems,
+  getMentionQuery,
+  insertMention,
+  mentionListboxId,
+  mentionOptionId,
+  splitMentions
+};

package/components/Mention/mentions.d.ts

@@ -0,0 +1,81 @@
+import { default as React } from 'react';
+/** One thing a person can reference: a teammate, a file, a skill. */
+export type MentionItem = {
+    /** Stable identity, unique within its source. */
+    id: string;
+    /** The name shown in the menu and written into the text after the trigger character. */
+    label: string;
+    /** A quieter second phrase on the same row: a role, a path, what a skill does. */
+    description?: string;
+    /** Leading mark: a Material Symbol name, or any node (an Avatar). Decorative. */
+    icon?: string | React.ReactNode;
+    /** Extra words the filter matches on besides the label. */
+    keywords?: string[];
+    /** Listed but not choosable. */
+    disabled?: boolean;
+};
+/** Everything one trigger character opens: `@` for entities, `/` for skills. */
+export type MentionSource = {
+    /** The single character that opens this source. */
+    trigger: string;
+    /** The items it offers. */
+    items: MentionItem[];
+    /** Accessible name for this source's menu ("People", "Skills"). */
+    label?: string;
+};
+/** A trigger being typed: where it starts, and what has been typed after it. */
+export type MentionQuery = {
+    /** The trigger character that opened it. */
+    trigger: string;
+    /** The text typed after the trigger, up to the caret. */
+    query: string;
+    /** Index of the trigger character. */
+    start: number;
+    /** Index of the caret. */
+    end: number;
+};
+/** One run of text from `splitMentions`: plain words, or a recognised mention. */
+export type MentionSegment = {
+    type: 'text';
+    text: string;
+} | {
+    type: 'mention';
+    text: string;
+    trigger: string;
+    item: MentionItem;
+};
+/**
+ * Reads the mention being typed at the caret, if there is one: a trigger
+ * character that opens a word, followed by no whitespace up to the caret.
+ * A trigger in the middle of a word (the slash in a path, the at-sign in an
+ * address) opens nothing.
+ */
+export declare function getMentionQuery(text: string, caret: number, triggers: string[]): MentionQuery | null;
+/**
+ * Narrows and ranks a source's items for a query: labels that start with it
+ * first, then labels where a later word starts with it, then labels that
+ * contain it, then keyword matches. An empty query returns every item in its
+ * given order.
+ */
+export declare function filterMentionItems(items: MentionItem[], query: string): MentionItem[];
+/**
+ * Splits text into plain runs and the mentions it contains. A mention is a
+ * trigger character followed by the exact label of one of that source's
+ * items, standing as its own word. Nothing is stored alongside the text: a
+ * mention is recognised wherever its name is written, and stops being one
+ * the moment the name is edited.
+ */
+export declare function splitMentions(text: string, sources: MentionSource[]): MentionSegment[];
+/**
+ * Writes a chosen item over the query being typed: the trigger, the label,
+ * and one trailing space, so the next word starts clean. Returns the new
+ * text and where the caret belongs in it.
+ */
+export declare function insertMention(text: string, query: Pick<MentionQuery, 'trigger' | 'start' | 'end'>, item: MentionItem): {
+    value: string;
+    caret: number;
+};
+/** The DOM id of one option inside a MentionMenu, for `aria-activedescendant`. */
+export declare const mentionOptionId: (menuId: string, itemId: string) => string;
+/** The DOM id of the listbox inside a MentionMenu, for `aria-controls`. */
+export declare const mentionListboxId: (menuId: string) => string;

package/components/Mention/mentions.js

@@ -0,0 +1,83 @@
+const MAX_QUERY_LENGTH = 48;
+const isSpace = (char) => char === void 0 || /\s/.test(char);
+function getMentionQuery(text, caret, triggers) {
+  for (let index = caret - 1; index >= 0 && caret - index <= MAX_QUERY_LENGTH + 1; index -= 1) {
+    const char = text[index];
+    if (isSpace(char)) return null;
+    if (triggers.includes(char) && isSpace(text[index - 1])) {
+      return { trigger: char, query: text.slice(index + 1, caret), start: index, end: caret };
+    }
+  }
+  return null;
+}
+function filterMentionItems(items, query) {
+  const needle = query.trim().toLowerCase();
+  if (needle === "") return items;
+  const rank = (item) => {
+    const label = item.label.toLowerCase();
+    if (label.startsWith(needle)) return 0;
+    if (label.split(/[\s\-_:./]+/).some((word) => word.startsWith(needle))) return 1;
+    if (label.includes(needle)) return 2;
+    if (item.keywords?.some((keyword) => keyword.toLowerCase().includes(needle))) return 3;
+    return -1;
+  };
+  return items.map((item, index) => ({ item, index, rank: rank(item) })).filter((entry) => entry.rank >= 0).sort((a, b) => a.rank - b.rank || a.index - b.index).map((entry) => entry.item);
+}
+const OPENERS = /* @__PURE__ */ new Set(["(", "[", "{", '"', "“", "‘", "'"]);
+const continuesName = (char) => char !== void 0 && /[\p{L}\p{N}_-]/u.test(char);
+function splitMentions(text, sources) {
+  const candidates = sources.flatMap(
+    (source) => source.items.map((item) => ({
+      trigger: source.trigger,
+      item,
+      token: `${source.trigger}${item.label}`
+    }))
+  ).sort((a, b) => b.token.length - a.token.length);
+  const triggers = new Set(sources.map((source) => source.trigger));
+  const segments = [];
+  let plainFrom = 0;
+  let index = 0;
+  while (index < text.length) {
+    const before = text[index - 1];
+    if (triggers.has(text[index]) && (isSpace(before) || OPENERS.has(before))) {
+      const match = candidates.find(
+        (candidate) => text.startsWith(candidate.token, index) && !continuesName(text[index + candidate.token.length])
+      );
+      if (match) {
+        if (index > plainFrom) segments.push({ type: "text", text: text.slice(plainFrom, index) });
+        segments.push({
+          type: "mention",
+          text: match.token,
+          trigger: match.trigger,
+          item: match.item
+        });
+        index += match.token.length;
+        plainFrom = index;
+        continue;
+      }
+    }
+    index += 1;
+  }
+  if (plainFrom < text.length) segments.push({ type: "text", text: text.slice(plainFrom) });
+  return segments;
+}
+function insertMention(text, query, item) {
+  const before = text.slice(0, query.start);
+  const after = text.slice(query.end);
+  const token = `${query.trigger}${item.label}`;
+  const spacer = after.startsWith(" ") ? "" : " ";
+  return {
+    value: `${before}${token}${spacer}${after}`,
+    caret: before.length + token.length + 1
+  };
+}
+const mentionOptionId = (menuId, itemId) => `${menuId}-option-${itemId}`;
+const mentionListboxId = (menuId) => `${menuId}-listbox`;
+export {
+  filterMentionItems,
+  getMentionQuery,
+  insertMention,
+  mentionListboxId,
+  mentionOptionId,
+  splitMentions
+};

package/components/PixelAvatar/PixelAvatar.css

@@ -0,0 +1,79 @@
+/* ============================================
+   PIXEL AVATAR COMPONENT
+   A generated character mark, drawn from a name
+   ============================================ */
+
+/* Base — the character rides the icon scale, so it seats wherever an icon
+   does. A host that already sets --icon-size on its icon seat is matched by
+   the size classes below, which set the same variable. */
+
+.ds-pixel-avatar {
+  display: inline-flex;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  color: var(--ds-pixel-avatar-ink);
+}
+
+.ds-pixel-avatar__sprite {
+  display: block;
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+/* Sizes */
+
+.ds-pixel-avatar--sm {
+  --icon-size: var(--icon-size-500);
+}
+
+.ds-pixel-avatar--md {
+  --icon-size: var(--icon-size-600);
+}
+
+.ds-pixel-avatar--lg {
+  --icon-size: var(--icon-size-800);
+}
+
+.ds-pixel-avatar--xl {
+  --icon-size: var(--icon-size-1200);
+}
+
+/* Inks — one rule per pixel ink token. The tokens carry a light and a dark
+   value each, so the character holds its contrast in both themes. */
+
+.ds-pixel-avatar--ink-1 {
+  --ds-pixel-avatar-ink: var(--color-pixel-ink-1);
+}
+
+.ds-pixel-avatar--ink-2 {
+  --ds-pixel-avatar-ink: var(--color-pixel-ink-2);
+}
+
+.ds-pixel-avatar--ink-3 {
+  --ds-pixel-avatar-ink: var(--color-pixel-ink-3);
+}
+
+.ds-pixel-avatar--ink-4 {
+  --ds-pixel-avatar-ink: var(--color-pixel-ink-4);
+}
+
+.ds-pixel-avatar--ink-5 {
+  --ds-pixel-avatar-ink: var(--color-pixel-ink-5);
+}
+
+.ds-pixel-avatar--ink-6 {
+  --ds-pixel-avatar-ink: var(--color-pixel-ink-6);
+}
+
+/* Variants — the tile is the same sprite on a wash of its own ink. The
+   padding comes from the size, not a percentage, which would resolve against
+   the host's width rather than the tile's. */
+
+.ds-pixel-avatar--tile {
+  padding: calc(var(--icon-size) / 16);
+  border-radius: var(--radius-200);
+  background-color: color-mix(in srgb, var(--ds-pixel-avatar-ink) 16%, transparent);
+}

package/components/PixelAvatar/PixelAvatar.d.ts

@@ -0,0 +1,47 @@
+import { default as React } from 'react';
+import { PixelInk } from './pixelInks';
+export { distinctPixelInks, pixelAvatarInk } from './pixelInks';
+export type { PixelInk } from './pixelInks';
+/** Props owned by PixelAvatar itself — everything else falls through to the root span. */
+type PixelAvatarOwnProps = {
+    /**
+     * The seed. The same name always draws the same character in the same
+     * ink, so a project, workspace or thread has its mark the moment it has a
+     * name, with nothing designed or stored for it.
+     */
+    name: string;
+    /** Rendered size, on the icon scale (`--icon-size-500/600/800/1200` — 20, 24, 32 and 48px), so the character seats wherever an icon does. */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Overrides the ink the name picks (1 to 6, the `--color-pixel-ink-*`
+     * tokens). A name's own ink is one of six, so two neighbours can land on
+     * the same one; a host drawing a list passes each row's entry from
+     * `distinctPixelInks` here to keep them apart. The character's shape still
+     * comes from the name.
+     */
+    ink?: PixelInk;
+    /** `plain` draws the character alone; `tile` seats it on a rounded wash of its own ink, for a larger standalone mark. */
+    variant?: 'plain' | 'tile';
+    /**
+     * Accessible name. Omit it when the mark sits beside the name it was
+     * drawn from, which is the usual case: the character is then decorative
+     * and hidden from assistive technology. Given, the root becomes an image
+     * with this label.
+     */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface PixelAvatarProps extends PixelAvatarOwnProps, Omit<React.ComponentPropsWithoutRef<'span'>, keyof PixelAvatarOwnProps> {
+}
+/**
+ * PixelAvatar — a generated character mark. The name is the seed: a small
+ * pixel creature and one of six inks are drawn from it, deterministically,
+ * so the same name is always the same character and nothing has to be
+ * designed, uploaded or stored. For the things that have a name before they
+ * have a logo — projects, workspaces, repositories, agents.
+ *
+ * Pure: no hooks, no random source and no browser API, so the server and the
+ * client draw the same sprite and it renders from a Server Component.
+ */
+export declare const PixelAvatar: React.ForwardRefExoticComponent<PixelAvatarProps & React.RefAttributes<HTMLSpanElement>>;

package/components/PixelAvatar/PixelAvatar.js

@@ -0,0 +1,90 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { hashName, pixelAvatarInk } from "./pixelInks.js";
+import { distinctPixelInks } from "./pixelInks.js";
+import "./PixelAvatar.css";
+const GRID = 8;
+const MARGIN = 1;
+const ROW_CHANCES = [
+  [0, 0.3, 0.25, 0.15],
+  // antennae
+  [0.1, 0.75, 1, 1],
+  // crown
+  [0.55, 1, 1, 1],
+  // head
+  [0.75, 1, 1, 1],
+  // eyes (one cell is carved out below)
+  [0.7, 1, 1, 1],
+  // cheeks
+  [0.35, 0.85, 0.9, 0.7],
+  // jaw
+  [0.45, 0.5, 0.45, 0.35],
+  // legs
+  [0.35, 0.3, 0.25, 0.1]
+  // feet
+];
+const EYE_ROW = 3;
+function seeded(seed) {
+  let state = seed;
+  return () => {
+    state = state + 1831565813 | 0;
+    let t = Math.imul(state ^ state >>> 15, 1 | state);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function spriteCells(name) {
+  const next = seeded(hashName(name));
+  const eyeColumn = next() < 0.6 ? 2 : 1;
+  const cells = [];
+  ROW_CHANCES.forEach((chances, row) => {
+    chances.forEach((chance, column) => {
+      if (next() >= chance) return;
+      if (row === EYE_ROW && column === eyeColumn) return;
+      cells.push([column, row], [GRID - 1 - column, row]);
+    });
+  });
+  return cells;
+}
+const PixelAvatar = React.forwardRef(
+  ({ name, size = "md", variant = "plain", ink: inkOverride, label, className = "", ...rest }, ref) => {
+    const baseClass = "ds-pixel-avatar";
+    const ink = inkOverride ?? pixelAvatarInk(name);
+    const classes = [
+      baseClass,
+      `${baseClass}--${size}`,
+      `${baseClass}--${variant}`,
+      `${baseClass}--ink-${ink}`,
+      className
+    ].filter(Boolean).join(" ");
+    const viewBox = `${-MARGIN} ${-MARGIN} ${GRID + MARGIN * 2} ${GRID + MARGIN * 2}`;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        role: label ? "img" : void 0,
+        "aria-label": label,
+        "aria-hidden": label ? void 0 : true,
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: `${baseClass}__sprite`,
+            viewBox,
+            shapeRendering: "crispEdges",
+            focusable: "false",
+            "aria-hidden": "true",
+            children: spriteCells(name).map(([column, row]) => /* @__PURE__ */ jsx("rect", { x: column, y: row, width: 1, height: 1 }, `${column}-${row}`))
+          }
+        )
+      }
+    );
+  }
+);
+PixelAvatar.displayName = "PixelAvatar";
+export {
+  PixelAvatar,
+  distinctPixelInks,
+  pixelAvatarInk
+};

package/components/PixelAvatar/pixelInks.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The ink side of PixelAvatar, kept apart from the component so a host that
+ * lays out a list can compute its inks without rendering anything. The
+ * component re-exports everything here; this module has no subpath of its
+ * own.
+ */
+/** One of the six pixel inks, by token number. */
+export type PixelInk = 1 | 2 | 3 | 4 | 5 | 6;
+/** FNV-1a, 32-bit: a small stable hash of a name. */
+export declare function hashName(name: string): number;
+/** The ink a name picks for itself: stable, and one of six. */
+export declare function pixelAvatarInk(name: string): PixelInk;
+/**
+ * Inks for a list of names shown together, in order, so neighbours are told
+ * apart by colour as well as by shape. Each name keeps the ink it picks for
+ * itself when that ink is still among the least used in the list so far and
+ * sits clear of the row before it; otherwise it takes the next ink round the
+ * set that does. "Clear" means at least two steps away on the hue ring the
+ * inks are numbered round (red, orange, yellow, green, blue, purple), so a
+ * row never follows its own colour or the hue beside it: a muted theme
+ * draws neighbouring hues close together, and two warm tans in a row read
+ * as the same mark. The first six names therefore all differ, and a longer
+ * list repeats as evenly as it can. Deterministic
+ * for a given list, so server and client agree; a name's ink can change when
+ * the list around it does, which is the price of the guarantee.
+ */
+export declare function distinctPixelInks(names: readonly string[]): PixelInk[];

package/components/PixelAvatar/pixelInks.js

@@ -0,0 +1,45 @@
+const INKS = 6;
+function hashName(name) {
+  let hash = 2166136261;
+  for (let i = 0; i < name.length; i += 1) {
+    hash ^= name.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+function pixelAvatarInk(name) {
+  return hashName(`${name}:colour`) % INKS + 1;
+}
+function distinctPixelInks(names) {
+  const used = new Array(INKS).fill(0);
+  const inks = [];
+  names.forEach((name) => {
+    const own = pixelAvatarInk(name) - 1;
+    const fewest = Math.min(...used);
+    const previous = inks.length > 0 ? inks[inks.length - 1] - 1 : -1;
+    let clear = -1;
+    let different = -1;
+    let any = -1;
+    for (let step = 0; step < INKS; step += 1) {
+      const candidate = (own + step) % INKS;
+      if (used[candidate] !== fewest) continue;
+      if (any === -1) any = candidate;
+      if (candidate === previous) continue;
+      if (different === -1) different = candidate;
+      const apart = Math.abs(candidate - previous);
+      if (previous === -1 || Math.min(apart, INKS - apart) >= 2) {
+        clear = candidate;
+        break;
+      }
+    }
+    const chosen = clear !== -1 ? clear : different !== -1 ? different : any;
+    used[chosen] += 1;
+    inks.push(chosen + 1);
+  });
+  return inks;
+}
+export {
+  distinctPixelInks,
+  hashName,
+  pixelAvatarInk
+};