@candor-ui/react 1.9.0 → 2.0.0

package/dist/chat/composer.js

@@ -70,8 +70,13 @@ function useChipMotion(items, keyOf) {
                 return next;
             });
         }
-        if (gone.length)
-            setLeaving((list) => [...list.filter((item) => !now.has(keyOf(item))), ...gone]);
+        // A chip added again while its ghost is still leaving takes the ghost's place: the ghost goes at once.
+        if (gone.length || added.length) {
+            setLeaving((list) => {
+                const kept = list.filter((item) => !now.has(keyOf(item)));
+                return kept.length === list.length && gone.length === 0 ? list : [...kept, ...gone];
+            });
+        }
     }, [items, keyOf]);
     React.useEffect(() => {
         if (leaving.length === 0)

package/dist/chat/permission-prompt.js

@@ -108,7 +108,7 @@ function PromptBody({ request, mode, suggestions, editable, onAllow, onDeny, bus
         if (request.defaultToNo)
             denyRef.current?.focus();
     }, [request.id, request.defaultToNo]);
-    // A press on inert space outside the prompt, while it waits, nudges it rather than dismissing anything.
+    // A press on inert space outside every prompt, while it waits, nudges it rather than dismissing anything.
     const section = React.useRef(null);
     const [nudged, setNudged] = React.useState(false);
     React.useEffect(() => {
@@ -118,6 +118,9 @@ function PromptBody({ request, mode, suggestions, editable, onAllow, onDeny, bus
             const target = e.target;
             if (!target || section.current?.contains(target))
                 return;
+            // A press anywhere inside another prompt is that prompt's business, not an outside press for this one.
+            if (target.closest('[data-slot="permission-prompt"]'))
+                return;
             if (target.closest(INTERACTIVE))
                 return;
             setNudged(true);

package/dist/chat/thread.d.ts

@@ -19,7 +19,7 @@ export declare const threadStrings: {
  * reader instead of following.
  *
  * While the reader is scrolled up, "Jump to latest" pulses once each time a
- * new message arrives, then stays still; the jump itself scrolls smoothly
+ * new message arrives (a child of the thread, or any element marked `data-slot="message"` inside it), then stays still; the jump itself scrolls smoothly
  * unless the OS asks for reduced motion or data-motion is "none".
  */
 declare function Thread({ children, empty, footer, className, contentClassName, virtualize, anchor, scrollerRef, onDrop, fade, }: {

package/dist/chat/thread.js

@@ -25,7 +25,7 @@ export const threadStrings = {
  * reader instead of following.
  *
  * While the reader is scrolled up, "Jump to latest" pulses once each time a
- * new message arrives, then stays still; the jump itself scrolls smoothly
+ * new message arrives (a child of the thread, or any element marked `data-slot="message"` inside it), then stays still; the jump itself scrolls smoothly
  * unless the OS asks for reduced motion or data-motion is "none".
  */
 function Thread({ children, empty, footer, className, contentClassName, virtualize = false, anchor, scrollerRef, onDrop, fade = true, }) {
@@ -45,16 +45,66 @@ function Thread({ children, empty, footer, className, contentClassName, virtuali
         const still = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches || el.closest('[data-motion="none"]') !== null;
         el.scrollTo({ top: el.scrollHeight, behavior: still ? "auto" : behavior });
     }, []);
-    // New messages that arrive while the reader is scrolled up: the Jump to latest control pulses once for each.
+    // A new message while the reader is scrolled up: the Jump to latest control pulses once for each arrival, even when
+    // the messages sit inside a wrapper component or a fragment. A second arrival while it still pulses restarts it.
+    const [arrived, setArrived] = React.useState(false);
+    const arrivedRef = React.useRef(false);
+    const frame = React.useRef(0);
+    React.useEffect(() => {
+        arrivedRef.current = arrived;
+    }, [arrived]);
+    React.useEffect(() => () => cancelAnimationFrame(frame.current), []);
+    const arrive = React.useCallback(() => {
+        if (pinnedRef.current)
+            return;
+        if (!arrivedRef.current) {
+            arrivedRef.current = true;
+            setArrived(true);
+            return;
+        }
+        // Already pulsing: switch it off and on again next frame, so the ring plays again.
+        arrivedRef.current = false;
+        setArrived(false);
+        cancelAnimationFrame(frame.current);
+        frame.current = requestAnimationFrame(() => {
+            arrivedRef.current = true;
+            setArrived(true);
+        });
+    }, []);
+    // Virtualized, every child is one message and the rows come and go as the reader scrolls, so the children are counted.
     const count = React.Children.count(children);
     const lastCount = React.useRef(count);
-    const [arrived, setArrived] = React.useState(false);
     React.useEffect(() => {
         const grew = count > lastCount.current;
         lastCount.current = count;
-        if (grew && !pinnedRef.current)
-            setArrived(true);
-    }, [count]);
+        if (grew && virtualize)
+            arrive();
+    }, [count, virtualize, arrive]);
+    // Otherwise the list itself is watched. A message is an element marked data-slot="message" anywhere inside the log, or a
+    // direct child of it that holds none. It is an arrival only when there are more messages than before and an added one
+    // comes after every message that was already there: unfolding earlier turns inserts in the middle, and swapping a
+    // reply for another version (a keyed remount) doesn't change the count. Text streaming into a message adds neither.
+    React.useEffect(() => {
+        const el = content.current;
+        if (virtualize || !el || typeof MutationObserver === "undefined")
+            return;
+        const messages = () => Array.from(el.querySelectorAll("*")).filter((node) => node.matches('[data-slot="message"]') || (node.parentElement === el && node.querySelector('[data-slot="message"]') === null));
+        const seen = { messages: messages() };
+        const observer = new MutationObserver(() => {
+            const before = seen.messages;
+            const known = (seen.messages = messages());
+            if (known.length <= before.length)
+                return;
+            const had = new Set(before);
+            const survivors = before.filter((node) => node.isConnected);
+            const added = known.filter((node) => !had.has(node));
+            const atTheEnd = added.some((node) => survivors.every((old) => old.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING));
+            if (atTheEnd)
+                arrive();
+        });
+        observer.observe(el, { childList: true, subtree: true });
+        return () => observer.disconnect();
+    }, [virtualize, arrive]);
     React.useEffect(() => {
         if (!arrived)
             return;

package/dist/styles.css

@@ -241,9 +241,12 @@
  * Font: Inter when the font-inter item is installed (styles/candor-font-inter.css),
  * else the system's sans-serif. Point --cd-font at your own font to use it instead.
  *
- * Density: data-density="compact" on <html> (or any container) tightens type for
- * dense apps: 14px conversation text and 13px body and label text, with a narrower
- * thread and sidebar.
+ * Density: data-density="compact" | "spacious" on <html> (or any container); no
+ * attribute is the default. Compact tightens type for dense apps: 14px conversation
+ * text and 13px body and label text, with a narrower thread and sidebar. Spacious is
+ * the other way, for reading-first apps: 16px conversation
+ * text and 15px body and label text, with a wider thread and sidebar. Both set the
+ * same four tokens, so one overrides the other when nested.
  *
  * Motion: data-motion="none" | "subtle" | "expressive" on <html> (or any container).
  * Subtle is the default: a change that happened is shown settling (a collapse,
@@ -334,6 +337,13 @@
   --cd-thread-width: 44rem;
   --cd-sidebar-width: 14rem;
 }
+/* The spacious preset: the same four tokens as compact, set the other way. Prose is pinned here too, at 16px. */
+[data-density="spacious"] {
+  --cd-text-prose: 1rem;
+  --cd-text-md: 0.9375rem;
+  --cd-thread-width: 52rem;
+  --cd-sidebar-width: 18rem;
+}
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
     --cd-shadow: oklch(0 0 0 / 0.35);
@@ -565,6 +575,7 @@
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
     animation-duration: 0.001ms !important;
+    animation-delay: 0s !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.001ms !important;
     scroll-behavior: auto !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@candor-ui/react",
-  "version": "1.9.0",
+  "version": "2.0.0",
   "description": "Candor UI's free tier as an npm package: React components for agents that do real work, on shadcn/ui and Tailwind 4.",
   "license": "MIT",
   "author": "Methodic LLC",