@tensor_1/react 2.18.0 → 2.19.0

package/dist/components/EmojiPicker.js

@@ -0,0 +1,277 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { Popover } from "./Popover.js";
+import {
+  DEFAULT_RECENT_KEY,
+  emojiGridMove,
+  loadEmojiData,
+  pushRecentEmoji,
+  readRecentEmoji,
+  searchEmoji
+} from "../emoji-model.js";
+import { useEmojiRenderer } from "./EmojiGlyph.js";
+const DEFAULT_EMOJI_PICKER_LABELS = {
+  dialog: "Choose an emoji",
+  search: "Search emoji",
+  recent: "Recently used",
+  quickPicks: "Frequently used",
+  categories: "Emoji categories",
+  noResults: "No emoji found",
+  loading: "Loading emoji\u2026",
+  loadFailed: "Emoji could not be loaded."
+};
+const EMOJI_GRID_COLUMNS = 8;
+function EmojiPicker({
+  onSelect,
+  trigger,
+  labels: labelOverrides,
+  locale = "en",
+  quickPicks,
+  loadData = loadEmojiData,
+  recentStorageKey = DEFAULT_RECENT_KEY,
+  placement = "bottom-start",
+  onOpenChange,
+  className,
+  emojiImageBaseUrl
+}) {
+  const renderEmoji = useEmojiRenderer(emojiImageBaseUrl);
+  const labels = { ...DEFAULT_EMOJI_PICKER_LABELS, ...labelOverrides };
+  const id = useId();
+  const popoverId = `${id}-picker`;
+  const anchorRef = useRef(null);
+  const searchRef = useRef(null);
+  const gridRef = useRef(null);
+  const pointerWasOpen = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [data, setData] = useState(null);
+  const [failed, setFailed] = useState(false);
+  const [query, setQuery] = useState("");
+  const [recent, setRecent] = useState([]);
+  const [active, setActive] = useState(0);
+  const popoverEl = () => typeof document === "undefined" ? null : document.getElementById(popoverId);
+  const isOpen = (el) => {
+    try {
+      return !!el?.matches(":popover-open");
+    } catch {
+      return false;
+    }
+  };
+  useEffect(() => {
+    const el = popoverEl();
+    if (!el) return;
+    const onToggle = (event) => {
+      const { newState } = event;
+      const nowOpen = newState ? newState === "open" : isOpen(el);
+      setOpen(nowOpen);
+      onOpenChange?.(nowOpen);
+      if (nowOpen) {
+        setRecent(readRecentEmoji(recentStorageKey));
+        setQuery("");
+        setActive(0);
+        requestAnimationFrame(() => searchRef.current?.focus());
+      } else if (el.contains(document.activeElement) || document.activeElement === document.body) {
+        focusTrigger();
+      }
+    };
+    el.addEventListener("toggle", onToggle);
+    return () => el.removeEventListener("toggle", onToggle);
+  }, [popoverId, recentStorageKey, onOpenChange]);
+  useEffect(() => {
+    if (!open || data?.locale === locale) return;
+    let live = true;
+    setFailed(false);
+    loadData(locale).then(
+      (loaded) => {
+        if (live) setData(loaded);
+      },
+      () => {
+        if (live) setFailed(true);
+      }
+    );
+    return () => {
+      live = false;
+    };
+  }, [open, locale, loadData, data?.locale]);
+  const focusTrigger = () => {
+    const el = anchorRef.current?.querySelector("button, [href], [tabindex]");
+    el?.focus();
+  };
+  const hide = () => {
+    const el = popoverEl();
+    if (el && isOpen(el)) el.hidePopover();
+  };
+  const sections = useMemo(() => {
+    if (query.trim()) {
+      return data ? [{ key: "results", title: labels.search, emojis: searchEmoji(data, query).map((e) => e.emoji) }] : [];
+    }
+    const list = [];
+    if (quickPicks?.length) list.push({ key: "quick", title: labels.quickPicks, emojis: [...new Set(quickPicks)] });
+    if (recent.length) list.push({ key: "recent", title: labels.recent, emojis: recent });
+    if (data) {
+      data.groups.forEach((group, index) => {
+        list.push({ key: group.key, title: group.name, emojis: data.emojis.filter((e) => e.group === index).map((e) => e.emoji) });
+      });
+    }
+    return list;
+  }, [query, data, quickPicks, recent, labels.search, labels.quickPicks, labels.recent]);
+  const flat = useMemo(() => sections.flatMap((s) => s.emojis), [sections]);
+  const sectionStart = useMemo(() => {
+    const starts = /* @__PURE__ */ new Map();
+    let at = 0;
+    for (const section of sections) {
+      starts.set(section.key, at);
+      at += section.emojis.length;
+    }
+    return starts;
+  }, [sections]);
+  const activeIndex = Math.min(active, Math.max(flat.length - 1, 0));
+  const choose = (emoji) => {
+    setRecent(pushRecentEmoji(emoji, recentStorageKey));
+    onSelect(emoji);
+    hide();
+  };
+  const focusCell = useCallback((index) => {
+    setActive(index);
+    const find = () => gridRef.current?.querySelector(`[data-emoji-index="${index}"]`);
+    const cell = find();
+    if (cell) cell.focus();
+    else requestAnimationFrame(() => find()?.focus());
+  }, []);
+  const onGridKeyDown = (event) => {
+    const target = event.target;
+    const index = Number(target.dataset.emojiIndex ?? -1);
+    if (index < 0) return;
+    const next = emojiGridMove(index, event.key, flat.length, EMOJI_GRID_COLUMNS);
+    if (event.key === "ArrowUp" && next === null) {
+      event.preventDefault();
+      searchRef.current?.focus();
+      return;
+    }
+    if (next === null) return;
+    event.preventDefault();
+    focusCell(next);
+  };
+  const onSearchKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      hide();
+    } else if (event.key === "ArrowDown" && flat.length) {
+      event.preventDefault();
+      focusCell(0);
+    } else if (event.key === "Enter" && query.trim() && flat[0]) {
+      event.preventDefault();
+      choose(flat[0]);
+    }
+  };
+  const toggleFromTrigger = (event) => {
+    const el = popoverEl();
+    if (!el || event.defaultPrevented) return;
+    const was = pointerWasOpen.current;
+    pointerWasOpen.current = null;
+    if (was === true) return;
+    if (isOpen(el)) el.hidePopover();
+    else el.showPopover();
+  };
+  const triggerProps = isValidElement(trigger) ? trigger.props : {};
+  const triggerEl = isValidElement(trigger) ? cloneElement(trigger, {
+    "aria-haspopup": "dialog",
+    "aria-expanded": open,
+    "aria-controls": popoverId,
+    onPointerDown: (event) => {
+      pointerWasOpen.current = isOpen(popoverEl());
+      triggerProps.onPointerDown?.(event);
+    },
+    onClick: (event) => {
+      triggerProps.onClick?.(event);
+      toggleFromTrigger(event);
+    }
+  }) : trigger;
+  const names = data?.names;
+  let offset = 0;
+  const status = failed ? labels.loadFailed : !data && open ? labels.loading : query.trim() && data && flat.length === 0 ? labels.noResults : "";
+  return /* @__PURE__ */ jsxs("span", { ref: anchorRef, className: cx("uix-emoji-picker__anchor", className), children: [
+    triggerEl,
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        id: popoverId,
+        anchor: anchorRef,
+        placement,
+        className: "uix-emoji-picker-popover",
+        role: "dialog",
+        "aria-label": labels.dialog,
+        children: open ? /* @__PURE__ */ jsxs("div", { className: "uix-emoji-picker uix-emoji-picker--full", lang: locale, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: searchRef,
+              type: "search",
+              className: "uix-input uix-emoji-picker__search",
+              "aria-label": labels.search,
+              placeholder: labels.search,
+              value: query,
+              onChange: (event) => {
+                setQuery(event.target.value);
+                setActive(0);
+              },
+              onKeyDown: onSearchKeyDown,
+              autoComplete: "off",
+              spellCheck: false
+            }
+          ),
+          data && !query.trim() ? /* @__PURE__ */ jsx("div", { className: "uix-emoji-picker__nav", role: "group", "aria-label": labels.categories, children: sections.map((section) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "uix-emoji-picker__nav-btn",
+              "aria-label": section.title,
+              title: section.title,
+              onClick: () => {
+                const start = section.emojis.length ? sectionStart.get(section.key) ?? -1 : -1;
+                gridRef.current?.querySelector(`[data-section="${section.key}"]`)?.scrollIntoView({ block: "start" });
+                if (start >= 0) focusCell(start);
+              },
+              children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: section.emojis[0] ? renderEmoji(section.emojis[0]) : null })
+            },
+            section.key
+          )) }) : null,
+          /* @__PURE__ */ jsx("div", { className: "uix-emoji-picker__grid", ref: gridRef, onKeyDown: onGridKeyDown, children: sections.map((section) => {
+            const start = offset;
+            offset += section.emojis.length;
+            if (!section.emojis.length) return null;
+            const headingId = `${id}-${section.key}`;
+            return /* @__PURE__ */ jsxs("section", { className: "uix-emoji-picker__section", "data-section": section.key, "aria-labelledby": headingId, children: [
+              /* @__PURE__ */ jsx("h3", { id: headingId, className: "uix-emoji-picker__heading", children: section.title }),
+              /* @__PURE__ */ jsx("div", { className: "uix-emoji-picker__cells", role: "group", "aria-labelledby": headingId, children: section.emojis.map((emoji, i) => {
+                const index = start + i;
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "uix-emoji-picker__btn",
+                    "data-emoji-index": index,
+                    tabIndex: index === activeIndex ? 0 : -1,
+                    "aria-label": names?.get(emoji) ?? emoji,
+                    title: names?.get(emoji),
+                    onClick: () => choose(emoji),
+                    onFocus: () => setActive(index),
+                    children: renderEmoji(emoji)
+                  },
+                  `${section.key}-${emoji}`
+                );
+              }) })
+            ] }, section.key);
+          }) }),
+          /* @__PURE__ */ jsx("p", { className: "uix-emoji-picker__status", role: "status", children: status })
+        ] }) : null
+      }
+    )
+  ] });
+}
+export {
+  DEFAULT_EMOJI_PICKER_LABELS,
+  EMOJI_GRID_COLUMNS,
+  EmojiPicker
+};

package/dist/components/Markdown.d.ts

@@ -0,0 +1,36 @@
+import * as react from 'react';
+import { defaultIsSafeUrl } from '../url-policy.js';
+
+/** Default link policy: http(s), mailto and same-app paths (`/`, `#`, `./`, `../`); never `//host`. */
+declare const defaultMarkdownIsSafeUrl: typeof defaultIsSafeUrl;
+interface MarkdownProps {
+    /** Raw markdown source. Empty or whitespace-only input renders nothing. */
+    children: string;
+    className?: string;
+    /** Link policy. Unsafe links render as their text, never as an anchor. */
+    isSafeUrl?: (url: string) => boolean;
+    /**
+     * Image policy. Return the URL to load, or `null` to show the image as a link
+     * (subject to `isSafeUrl`). Without it, no `<img>` is ever rendered.
+     */
+    resolveImageSrc?: (src: string) => string | null;
+    /**
+     * Added to markdown heading levels so content headings sit below the page's own
+     * (`#` → `<h3>` by default, as in TENSOR's original renderer). Capped at `<h6>`.
+     */
+    headingOffset?: number;
+}
+/**
+ * Safe markdown viewer over `.uix-prose`. It never produces an HTML string and never
+ * uses `dangerouslySetInnerHTML`: author text only becomes React text nodes, raw HTML
+ * shows as literal text, and link/image URLs pass the policy props first.
+ *
+ * Supports headings, paragraphs (single newline = line break), bold, italic,
+ * strikethrough, inline and fenced code, links and bare http(s) URLs, blockquotes,
+ * horizontal rules, nested bulleted/numbered lists, read-only task lists, GFM tables
+ * (in a keyboard-scrollable wrapper) and images gated by `resolveImageSrc`.
+ * Server-component safe.
+ */
+declare function Markdown({ children, className, isSafeUrl, resolveImageSrc, headingOffset }: MarkdownProps): react.JSX.Element | null;
+
+export { Markdown, type MarkdownProps, defaultMarkdownIsSafeUrl };

package/dist/components/Markdown.js

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+import { parseMarkdown, plainText } from "../markdown-model.js";
+import { defaultIsSafeUrl } from "../url-policy.js";
+const defaultMarkdownIsSafeUrl = defaultIsSafeUrl;
+const isExternal = (href) => /^https?:/i.test(href.trim());
+function renderInlines(nodes, policy) {
+  return nodes.map((node, i) => {
+    switch (node.type) {
+      case "text":
+        return node.value;
+      case "br":
+        return /* @__PURE__ */ jsx("br", {}, i);
+      case "code":
+        return /* @__PURE__ */ jsx("code", { children: node.value }, i);
+      case "strong":
+        return /* @__PURE__ */ jsx("strong", { children: renderInlines(node.children, policy) }, i);
+      case "em":
+        return /* @__PURE__ */ jsx("em", { children: renderInlines(node.children, policy) }, i);
+      case "del":
+        return /* @__PURE__ */ jsx("del", { children: renderInlines(node.children, policy) }, i);
+      case "link": {
+        const children = renderInlines(node.children, policy);
+        if (!node.href.trim() || !policy.isSafeUrl(node.href)) return /* @__PURE__ */ jsx("span", { children }, i);
+        return /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: node.href.trim(),
+            title: node.title,
+            ...isExternal(node.href) ? { target: "_blank", rel: "noopener noreferrer" } : {},
+            children
+          },
+          i
+        );
+      }
+      case "image": {
+        const resolved = policy.resolveImageSrc?.(node.src) ?? null;
+        if (resolved) {
+          return /* @__PURE__ */ jsx("img", { src: resolved, alt: node.alt, title: node.title, loading: "lazy", decoding: "async" }, i);
+        }
+        const label = node.alt || node.src;
+        if (!node.src.trim() || !policy.isSafeUrl(node.src)) return label;
+        return /* @__PURE__ */ jsx("a", { href: node.src.trim(), ...isExternal(node.src) ? { target: "_blank", rel: "noopener noreferrer" } : {}, children: label }, i);
+      }
+    }
+  });
+}
+function renderList(list, policy, key) {
+  const items = list.items.map((item, i) => {
+    const content = renderInlines(item.children, policy);
+    const nested = item.lists.map((sub, n) => renderList(sub, policy, n));
+    if (item.checked === null) {
+      return /* @__PURE__ */ jsxs("li", { children: [
+        content,
+        nested
+      ] }, i);
+    }
+    return /* @__PURE__ */ jsxs("li", { className: "uix-markdown__task", "data-checked": item.checked || void 0, children: [
+      /* @__PURE__ */ jsx("input", { type: "checkbox", defaultChecked: item.checked, disabled: true, "aria-label": plainText(item.children) }),
+      /* @__PURE__ */ jsx("span", { children: content }),
+      nested
+    ] }, i);
+  });
+  const hasTasks = list.items.some((item) => item.checked !== null);
+  const className = hasTasks ? "uix-markdown__tasks" : void 0;
+  return list.ordered ? /* @__PURE__ */ jsx("ol", { className, start: list.start !== 1 ? list.start : void 0, children: items }, key) : /* @__PURE__ */ jsx("ul", { className, children: items }, key);
+}
+function renderBlock(block, policy, headingOffset, key) {
+  switch (block.type) {
+    case "paragraph":
+      return /* @__PURE__ */ jsx("p", { children: renderInlines(block.children, policy) }, key);
+    case "heading": {
+      const Tag = `h${Math.min(Math.max(block.level + headingOffset, 1), 6)}`;
+      return /* @__PURE__ */ jsx(Tag, { children: renderInlines(block.children, policy) }, key);
+    }
+    case "code":
+      return /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { "data-language": block.lang || void 0, children: block.value }) }, key);
+    case "quote":
+      return /* @__PURE__ */ jsx("blockquote", { children: renderInlines(block.children, policy) }, key);
+    case "rule":
+      return /* @__PURE__ */ jsx("hr", {}, key);
+    case "list":
+      return renderList(block, policy, key);
+    case "table":
+      return (
+        // A scrollable region must be reachable from the keyboard.
+        /* @__PURE__ */ jsx("div", { className: "uix-markdown__table", tabIndex: 0, children: /* @__PURE__ */ jsxs("table", { children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: block.head.map((cell, c) => /* @__PURE__ */ jsx("th", { scope: "col", style: block.align[c] ? { textAlign: block.align[c] } : void 0, children: renderInlines(cell, policy) }, c)) }) }),
+          /* @__PURE__ */ jsx("tbody", { children: block.rows.map((row, r) => /* @__PURE__ */ jsx("tr", { children: row.map((cell, c) => /* @__PURE__ */ jsx("td", { style: block.align[c] ? { textAlign: block.align[c] } : void 0, children: renderInlines(cell, policy) }, c)) }, r)) })
+        ] }) }, key)
+      );
+  }
+}
+function Markdown({ children, className, isSafeUrl = defaultMarkdownIsSafeUrl, resolveImageSrc, headingOffset = 2 }) {
+  const source = typeof children === "string" ? children : "";
+  if (source.trim() === "") return null;
+  const policy = { isSafeUrl, resolveImageSrc };
+  const blocks = parseMarkdown(source);
+  return /* @__PURE__ */ jsx("div", { className: cx("uix-prose", "uix-markdown", className), "data-component": "markdown", children: blocks.map((block, i) => renderBlock(block, policy, headingOffset, i)) });
+}
+export {
+  Markdown,
+  defaultMarkdownIsSafeUrl
+};

package/dist/components/ReactionBar.d.ts

@@ -0,0 +1,57 @@
+import * as react from 'react';
+import { EmojiLocale, EmojiDataLoader } from '../emoji-model.js';
+import { EmojiPickerLabels } from './EmojiPicker.js';
+import '../overlay-position.js';
+
+interface ReactionSummary {
+    /** Unicode emoji. */
+    emoji: string;
+    count: number;
+    /** Whether the current user is among the reactors (chip shows pressed). */
+    reactedByMe: boolean;
+    /** Display names of the reactors, in the order to show them. */
+    names: ReadonlyArray<string>;
+}
+interface ReactionBarLabels {
+    /** Accessible name of the reaction group. */
+    group: string;
+    /** Add-reaction button. */
+    addReaction: string;
+    /** Chip name and tooltip. Placeholders: `{names}`, `{emoji}`, `{count}`. */
+    reactedWith: string;
+    /** Used when no names are known. Placeholders: `{count}`, `{emoji}`. */
+    reactedCount: string;
+    /** Appended to a truncated name list. Placeholder: `{count}`. */
+    others: string;
+}
+declare const DEFAULT_REACTION_BAR_LABELS: ReactionBarLabels;
+declare const DEFAULT_QUICK_REACTIONS: ReadonlyArray<string>;
+interface ReactionBarProps {
+    reactions: ReadonlyArray<ReactionSummary>;
+    /** Called with the emoji of a clicked chip, or of an emoji picked that the user has not reacted with yet. */
+    onToggle: (emoji: string) => void;
+    /** Chips and the add button stay visible but cannot be used. */
+    disabled?: boolean;
+    /** Emoji offered first in the add-reaction picker. */
+    quickPicks?: ReadonlyArray<string>;
+    labels?: Partial<ReactionBarLabels>;
+    /** Labels of the add-reaction picker. */
+    pickerLabels?: Partial<EmojiPickerLabels>;
+    /** Language of emoji names in the picker. Default `'en'`. */
+    locale?: EmojiLocale;
+    loadData?: EmojiDataLoader;
+    /** Same-origin folder of fallback emoji PNGs, as on EmojiPicker. Unset = native emoji only. */
+    emojiImageBaseUrl?: string;
+    /** Names listed before "and N more". Default 10. */
+    maxNames?: number;
+    className?: string;
+}
+/**
+ * Emoji reactions over `.uix-reactions`: one toggle chip per emoji (`aria-pressed`
+ * when the viewer reacted), reactor names in the tooltip and the chip's accessible
+ * name, and an add-reaction picker with quick picks. Informational only — the bar
+ * carries no approval semantics.
+ */
+declare function ReactionBar({ reactions, onToggle, disabled, quickPicks, labels: labelOverrides, pickerLabels, locale, loadData, maxNames, className, emojiImageBaseUrl, }: ReactionBarProps): react.JSX.Element;
+
+export { DEFAULT_QUICK_REACTIONS, DEFAULT_REACTION_BAR_LABELS, ReactionBar, type ReactionBarLabels, type ReactionBarProps, type ReactionSummary };

package/dist/components/ReactionBar.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+import { formatLabel } from "../emoji-model.js";
+import { EditorIcon } from "./EditorIcons.js";
+import { useEmojiRenderer } from "./EmojiGlyph.js";
+import { EmojiPicker } from "./EmojiPicker.js";
+import { Tooltip } from "./Tooltip.js";
+const DEFAULT_REACTION_BAR_LABELS = {
+  group: "Reactions",
+  addReaction: "Add reaction",
+  reactedWith: "{names} reacted with {emoji}",
+  reactedCount: "{count} reacted with {emoji}",
+  others: "and {count} more"
+};
+const DEFAULT_QUICK_REACTIONS = ["\u{1F44D}", "\u2705", "\u{1F440}", "\u{1F389}", "\u2764\uFE0F"];
+function ReactionBar({
+  reactions,
+  onToggle,
+  disabled = false,
+  quickPicks = DEFAULT_QUICK_REACTIONS,
+  labels: labelOverrides,
+  pickerLabels,
+  locale,
+  loadData,
+  maxNames = 10,
+  className,
+  emojiImageBaseUrl
+}) {
+  const renderEmoji = useEmojiRenderer(emojiImageBaseUrl);
+  const labels = { ...DEFAULT_REACTION_BAR_LABELS, ...labelOverrides };
+  const describe = (reaction) => {
+    if (reaction.names.length === 0) {
+      return formatLabel(labels.reactedCount, { count: reaction.count, emoji: reaction.emoji });
+    }
+    const shown = reaction.names.slice(0, maxNames).join(", ");
+    const hidden = Math.max(reaction.count, reaction.names.length) - Math.min(reaction.names.length, maxNames);
+    const names = hidden > 0 ? `${shown} ${formatLabel(labels.others, { count: hidden })}` : shown;
+    return formatLabel(labels.reactedWith, { names, emoji: reaction.emoji, count: reaction.count });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-reactions", className), role: "group", "aria-label": labels.group, children: [
+    reactions.filter((r) => r.count > 0).map((reaction) => {
+      const text = describe(reaction);
+      return /* @__PURE__ */ jsx(Tooltip, { label: text, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "uix-reaction",
+          "aria-pressed": reaction.reactedByMe,
+          "aria-label": text,
+          "data-mine": reaction.reactedByMe || void 0,
+          disabled,
+          onClick: () => onToggle(reaction.emoji),
+          children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: renderEmoji(reaction.emoji) }),
+            /* @__PURE__ */ jsx("span", { className: "uix-reaction__count", "aria-hidden": "true", children: reaction.count })
+          ]
+        }
+      ) }, reaction.emoji);
+    }),
+    /* @__PURE__ */ jsx(
+      EmojiPicker,
+      {
+        quickPicks,
+        labels: pickerLabels,
+        locale,
+        loadData,
+        emojiImageBaseUrl,
+        onSelect: (emoji) => {
+          if (!reactions.some((r) => r.emoji === emoji && r.reactedByMe)) onToggle(emoji);
+        },
+        trigger: /* @__PURE__ */ jsx("button", { type: "button", className: "uix-reaction-add", "aria-label": labels.addReaction, title: labels.addReaction, disabled, children: /* @__PURE__ */ jsx(EditorIcon, { name: "addReaction" }) })
+      }
+    )
+  ] });
+}
+export {
+  DEFAULT_QUICK_REACTIONS,
+  DEFAULT_REACTION_BAR_LABELS,
+  ReactionBar
+};

package/dist/components/RelationshipGraph.js

@@ -47,6 +47,24 @@ const DEFAULT_RELATIONSHIP_GRAPH_LABELS = {
 };
 const EMPTY_IDS = /* @__PURE__ */ new Set();
 const EMPTY_LEGEND = [];
+const RADIAL_SCALE_X = 6;
+const RADIAL_SCALE_Y = 4;
+const RADIAL_NODE_HALF_W = 55;
+const RADIAL_NODE_HALF_H = 18;
+const RADIAL_MARGIN = 12;
+function radialViewBox(nodes) {
+  if (nodes.length === 0) return "0 0 600 400";
+  const xs = nodes.map((node) => node.x * RADIAL_SCALE_X);
+  const ys = nodes.map((node) => node.y * RADIAL_SCALE_Y);
+  const minX = Math.min(...xs) - RADIAL_NODE_HALF_W - RADIAL_MARGIN;
+  const maxX = Math.max(...xs) + RADIAL_NODE_HALF_W + RADIAL_MARGIN;
+  const minY = Math.min(...ys) - RADIAL_NODE_HALF_H - RADIAL_MARGIN;
+  const maxY = Math.max(...ys) + RADIAL_NODE_HALF_H + RADIAL_MARGIN;
+  const round = (value) => Number(value.toFixed(2));
+  const width = Math.max(round(maxX - minX), 600);
+  const height = Math.max(round(maxY - minY), 400);
+  return `${round(minX)} ${round(minY)} ${width} ${height}`;
+}
 function RelationshipGraph(props) {
   const labels = useMemo(() => ({ ...DEFAULT_RELATIONSHIP_GRAPH_LABELS, ...props.labels }), [props.labels]);
   const stateClass = cx("uix-relationship-graph uix-relationship-graph--state", props.className);
@@ -123,16 +141,16 @@ function RadialRelationshipGraph({
       /* @__PURE__ */ jsx("span", { "aria-live": "polite", children: labels.zoomLevel(Math.round(zoom * 100)) })
     ] }),
     bounded.omittedNodeCount > 0 && /* @__PURE__ */ jsx("p", { className: "uix-relationship-graph__bounded", role: "status", children: labels.bounded(bounded.nodes.length, bounded.omittedNodeCount) }),
-    /* @__PURE__ */ jsx("div", { className: "uix-relationship-graph__visual", children: /* @__PURE__ */ jsx("svg", { ref: svgRef, viewBox: "0 0 600 400", role: "group", "aria-label": labels.graphSummary(bounded.nodes.length, bounded.edges.length), children: /* @__PURE__ */ jsxs("g", { transform: `translate(${pan.x} ${pan.y}) scale(${zoom})`, children: [
+    /* @__PURE__ */ jsx("div", { className: "uix-relationship-graph__visual", children: /* @__PURE__ */ jsx("svg", { ref: svgRef, viewBox: radialViewBox(positioned), role: "group", "aria-label": labels.graphSummary(bounded.nodes.length, bounded.edges.length), children: /* @__PURE__ */ jsxs("g", { transform: `translate(${pan.x} ${pan.y}) scale(${zoom})`, children: [
       bounded.edges.map((edge) => {
         const source = positionedById.get(edge.source);
         const target = positionedById.get(edge.target);
-        return /* @__PURE__ */ jsx("line", { x1: source.x * 6, y1: source.y * 4, x2: target.x * 6, y2: target.y * 4, className: "uix-relationship-graph__edge", "data-highlighted": highlightedEdgeIds.has(edge.id) || void 0, "data-conflicted": conflictedEdgeIds.has(edge.id) || void 0, children: /* @__PURE__ */ jsx("title", { children: edge.label ?? edge.type ?? labels.relationship }) }, edge.id);
+        return /* @__PURE__ */ jsx("line", { x1: source.x * RADIAL_SCALE_X, y1: source.y * RADIAL_SCALE_Y, x2: target.x * RADIAL_SCALE_X, y2: target.y * RADIAL_SCALE_Y, className: "uix-relationship-graph__edge", "data-highlighted": highlightedEdgeIds.has(edge.id) || void 0, "data-conflicted": conflictedEdgeIds.has(edge.id) || void 0, children: /* @__PURE__ */ jsx("title", { children: edge.label ?? edge.type ?? labels.relationship }) }, edge.id);
       }),
       positioned.map((node) => /* @__PURE__ */ jsxs(
         "g",
         {
-          transform: `translate(${node.x * 6} ${node.y * 4})`,
+          transform: `translate(${node.x * RADIAL_SCALE_X} ${node.y * RADIAL_SCALE_Y})`,
           role: "button",
           "aria-label": `${node.label}${node.type ? `, ${node.type}` : ""}${conflictedNodeIds.has(node.id) ? `, ${labels.conflict}` : ""}`,
           tabIndex: focusedId === node.id ? 0 : -1,
@@ -145,7 +163,8 @@ function RadialRelationshipGraph({
           onKeyDown: (event) => onNodeKeyDown(event, node.id),
           onClick: () => select(node.id),
           children: [
-            /* @__PURE__ */ jsx("rect", { x: "-55", y: "-18", width: "110", height: "36", rx: "8" }),
+            /* @__PURE__ */ jsx("title", { children: node.label }),
+            /* @__PURE__ */ jsx("rect", { x: -RADIAL_NODE_HALF_W, y: -RADIAL_NODE_HALF_H, width: RADIAL_NODE_HALF_W * 2, height: RADIAL_NODE_HALF_H * 2, rx: "8" }),
             /* @__PURE__ */ jsx("text", { textAnchor: "middle", dominantBaseline: "middle", children: node.label.length > 16 ? `${node.label.slice(0, 15)}\u2026` : node.label })
           ]
         },