@rtzll/reflow 0.5.0 → 0.7.0

package/dist/carousel.js

@@ -0,0 +1,277 @@
+import { jsx as _jsx, jsxs as _jsxs } from "remix/component/jsx-runtime";
+import { on, ref } from 'remix/component';
+import { prefersReducedMotion } from '@remix-run/ui/animation';
+import { Button } from './basic.js';
+import { CarouselDots } from './compositions.js';
+import { Icon } from './icon.js';
+// A mouse drag starts past this distance, so a click stays a click.
+const dragThreshold = 6;
+// How far a release keeps travelling, in milliseconds of its speed.
+const throwTime = 220;
+function slidesOf(children) {
+    const list = Array.isArray(children) ? children.flat(Infinity) : [children];
+    return list.filter((child) => child != null && child !== false && child !== '');
+}
+/**
+ * Slides in a row on a real scroll container: touch, trackpads, the
+ * keyboard and screen readers scroll it natively, and CSS scroll snap
+ * brings each slide to rest. Mice can drag it, with momentum. Previous and
+ * next buttons and CarouselDots follow the slide in view and move it;
+ * autoplay runs through the dots and pauses while the carousel is pointed
+ * at or focused, or with its pause button. It is a labelled carousel whose
+ * slides read as "3 of 7", and it touches nothing outside its own element.
+ */
+export function Carousel(handle) {
+    let viewport = null;
+    let localIndex = handle.props.defaultIndex ?? 0;
+    let shownIndex = -1;
+    let hovered = false;
+    let focused = false;
+    let userPaused = false;
+    let drag;
+    let suppressClick = false;
+    // While a scroll we started is in flight, its scroll events do not move the index.
+    let steering;
+    let steerTimer;
+    let frame = 0;
+    // How many slides can come to rest; with several in view, the last few
+    // share the end. Zero until measured, which counts every slide.
+    let reachable = 0;
+    handle.signal.addEventListener('abort', () => {
+        clearTimeout(steerTimer);
+        cancelAnimationFrame(frame);
+    }, { once: true });
+    const count = () => slidesOf(handle.props.children).length;
+    const stops = () => Math.min(count(), reachable || count());
+    const current = () => Math.min(Math.max(0, handle.props.index ?? localIndex), Math.max(0, stops() - 1));
+    function slideAt(index) {
+        return viewport?.querySelectorAll(':scope > .rf-carousel-slide')[index];
+    }
+    // Where a slide comes to rest, within the range the viewport can scroll.
+    // Measured from the slide's box against the viewport's, so it holds in
+    // either direction: right to left, scrollLeft runs from 0 down to minus
+    // the scroll width.
+    function restingLeft(slide) {
+        if (!viewport)
+            return 0;
+        const style = getComputedStyle(viewport);
+        const rtl = style.direction === 'rtl';
+        const padding = parseFloat(style.scrollPaddingInlineStart) || 0;
+        const frame = viewport.getBoundingClientRect();
+        const box = slide.getBoundingClientRect();
+        const left = handle.props.align === 'center'
+            ? viewport.scrollLeft + (box.left + box.width / 2) - (frame.left + frame.width / 2)
+            : rtl
+                ? viewport.scrollLeft + (box.right - frame.right) + padding
+                : viewport.scrollLeft + (box.left - frame.left) - padding;
+        const max = viewport.scrollWidth - viewport.clientWidth;
+        return rtl ? Math.min(0, Math.max(-max, left)) : Math.min(max, Math.max(0, left));
+    }
+    function measure() {
+        if (!viewport)
+            return;
+        const slides = Array.from(viewport.querySelectorAll(':scope > .rf-carousel-slide'));
+        // Not laid out in a row, such as without the stylesheet: every slide counts.
+        if (slides.some((slide) => slide.offsetTop !== slides[0].offsetTop)) {
+            if (reachable !== 0) {
+                reachable = 0;
+                void handle.update();
+            }
+            return;
+        }
+        const end = viewport.scrollWidth - viewport.clientWidth;
+        const last = slides.findIndex((slide) => Math.abs(restingLeft(slide)) >= end - 1);
+        const next = last === -1 ? slides.length : last + 1;
+        if (next === reachable)
+            return;
+        reachable = next;
+        void handle.update();
+    }
+    function scrollToSlide(index, smooth = true) {
+        const slide = slideAt(index);
+        if (!viewport || !slide)
+            return;
+        steering = index;
+        clearTimeout(steerTimer);
+        steerTimer = setTimeout(() => (steering = undefined), 900);
+        viewport.scrollTo({
+            left: restingLeft(slide),
+            behavior: smooth && !prefersReducedMotion() ? 'smooth' : 'instant',
+        });
+    }
+    function select(index, scroll = true) {
+        const next = Math.min(Math.max(0, index), Math.max(0, stops() - 1));
+        if (scroll)
+            scrollToSlide(next);
+        if (next === current())
+            return;
+        localIndex = next;
+        handle.props.onIndexChange?.(next);
+        void handle.update();
+    }
+    // The slide whose resting place is nearest a scroll position.
+    function nearest(left) {
+        if (!viewport)
+            return 0;
+        let best = 0;
+        let distance = Infinity;
+        const slides = viewport.querySelectorAll(':scope > .rf-carousel-slide');
+        slides.forEach((slide, index) => {
+            const gap = Math.abs(restingLeft(slide) - left);
+            if (gap < distance) {
+                distance = gap;
+                best = index;
+            }
+        });
+        return best;
+    }
+    function onScroll() {
+        if (frame)
+            return;
+        frame = requestAnimationFrame(() => {
+            frame = 0;
+            if (!viewport || drag?.started)
+                return;
+            if (steering !== undefined)
+                return;
+            const index = nearest(viewport.scrollLeft);
+            if (index !== current())
+                select(index, false);
+        });
+    }
+    function endDrag(event) {
+        if (!drag || drag.pointer !== event.pointerId || !viewport)
+            return;
+        const finished = drag;
+        drag = undefined;
+        if (!finished.started)
+            return;
+        viewport.removeAttribute('data-dragging');
+        suppressClick = true;
+        const recent = finished.samples.filter((sample) => sample.time > performance.now() - 100);
+        const first = recent[0];
+        const last = recent[recent.length - 1];
+        const velocity = first && last && last.time > first.time ? (last.x - first.x) / (last.time - first.time) : 0;
+        // A throw travels on, but at most a view's worth of slides from where the
+        // drag began: one at a time when a slide fills the view.
+        const sample = slideAt(0);
+        const perView = sample
+            ? Math.max(1, Math.round(viewport.clientWidth / Math.max(1, sample.offsetWidth)))
+            : 1;
+        const landed = nearest(viewport.scrollLeft - velocity * throwTime);
+        select(Math.min(finished.from + perView, Math.max(finished.from - perView, landed)));
+    }
+    const viewportMix = ref((node, signal) => {
+        if (!(node instanceof HTMLElement))
+            return;
+        viewport = node;
+        const options = { signal };
+        node.addEventListener('scroll', onScroll, { signal, passive: true });
+        const resize = new ResizeObserver(() => measure());
+        resize.observe(node);
+        signal.addEventListener('abort', () => resize.disconnect(), { once: true });
+        measure();
+        node.addEventListener('scrollend', () => {
+            steering = undefined;
+            clearTimeout(steerTimer);
+            onScroll();
+        }, options);
+        node.addEventListener('pointerdown', (event) => {
+            if (event.pointerType !== 'mouse' || event.button !== 0)
+                return;
+            drag = {
+                pointer: event.pointerId,
+                x: event.clientX,
+                left: node.scrollLeft,
+                from: nearest(node.scrollLeft),
+                started: false,
+                samples: [{ time: performance.now(), x: event.clientX }],
+            };
+        }, options);
+        node.addEventListener('pointermove', (event) => {
+            if (!drag || drag.pointer !== event.pointerId)
+                return;
+            const dx = event.clientX - drag.x;
+            if (!drag.started) {
+                if (Math.abs(dx) < dragThreshold)
+                    return;
+                drag.started = true;
+                node.setAttribute('data-dragging', '');
+                window.getSelection()?.removeAllRanges();
+                try {
+                    node.setPointerCapture(event.pointerId);
+                }
+                catch {
+                    // Synthetic pointers have nothing to capture.
+                }
+            }
+            node.scrollLeft = drag.left - dx;
+            drag.samples.push({ time: performance.now(), x: event.clientX });
+            if (drag.samples.length > 8)
+                drag.samples.shift();
+        }, options);
+        node.addEventListener('pointerup', endDrag, options);
+        node.addEventListener('pointercancel', endDrag, options);
+        // A drag that ends over a link does not follow it.
+        node.addEventListener('click', (event) => {
+            if (!suppressClick)
+                return;
+            suppressClick = false;
+            event.preventDefault();
+            event.stopPropagation();
+        }, { capture: true, signal });
+        node.addEventListener('pointerdown', () => (suppressClick = false), { signal, capture: true });
+        signal.addEventListener('abort', () => {
+            if (viewport === node)
+                viewport = null;
+        }, { once: true });
+    });
+    return () => {
+        const { label, children, slideLabels, size, autoplay, align = 'start' } = handle.props;
+        const slides = slidesOf(children);
+        const total = slides.length;
+        const positions = stops();
+        const index = current();
+        // A controlled index set from outside brings its slide into view.
+        if (shownIndex !== -1 && shownIndex !== index && steering !== index && !drag?.started)
+            handle.queueTask(() => scrollToSlide(index));
+        if (shownIndex === -1 && index > 0)
+            handle.queueTask(() => scrollToSlide(index, false));
+        shownIndex = index;
+        const paused = userPaused || hovered || focused;
+        const rotating = Boolean(autoplay) && !paused;
+        const showDots = handle.props.dots ?? true;
+        const showControls = handle.props.controls ?? true;
+        const names = slideLabels ?? [];
+        return (_jsxs("section", { class: handle.props.class ? `rf-carousel ${handle.props.class}` : 'rf-carousel', "aria-roledescription": "carousel", "aria-label": label, "data-density": size, "data-align": align, mix: [
+                on('pointerenter', (event) => {
+                    if (event.pointerType === 'touch')
+                        return;
+                    hovered = true;
+                    void handle.update();
+                }),
+                on('pointerleave', () => {
+                    hovered = false;
+                    void handle.update();
+                }),
+                on('focusin', () => {
+                    if (focused)
+                        return;
+                    focused = true;
+                    void handle.update();
+                }),
+                on('focusout', (event) => {
+                    const next = event.relatedTarget;
+                    if (next instanceof Node && event.currentTarget.contains(next))
+                        return;
+                    focused = false;
+                    void handle.update();
+                }),
+            ], children: [_jsx("div", { class: "rf-carousel-viewport", tabIndex: 0, "aria-live": rotating ? 'off' : 'polite', mix: viewportMix, children: slides.map((slide, position) => (_jsx("div", { class: "rf-carousel-slide", role: "group", "aria-roledescription": "slide", "aria-label": names[position]
+                            ? `${names[position]}, ${position + 1} of ${total}`
+                            : `${position + 1} of ${total}`, "data-current": position === index || undefined, children: slide }, position))) }), (showControls || showDots || autoplay) && positions > 1 && (_jsxs("div", { class: "rf-carousel-controls", children: [showControls && (_jsx(Button, { variant: "ghost", size: "icon-compact", "aria-label": "Previous slide", disabled: index === 0, mix: on('click', () => select(index - 1)), children: _jsx(Icon, { name: "chevron-left" }) })), showDots && (_jsx(CarouselDots, { count: positions, current: index, label: `Choose a slide in ${label}`, labels: Array.from({ length: positions }, (_, position) => names[position] ? `Show ${names[position]}` : `Show slide ${position + 1}`), autoplay: autoplay ? { duration: autoplay.duration, paused } : undefined, onChange: (next) => select(next) })), showControls && (_jsx(Button, { variant: "ghost", size: "icon-compact", "aria-label": "Next slide", disabled: index === positions - 1, mix: on('click', () => select(index + 1)), children: _jsx(Icon, { name: "chevron-right" }) })), autoplay && (_jsx(Button, { variant: "ghost", size: "icon-compact", class: "rf-carousel-play", "aria-label": userPaused ? 'Play slides' : 'Pause slides', mix: on('click', () => {
+                                userPaused = !userPaused;
+                                void handle.update();
+                            }), children: _jsx(Icon, { name: userPaused ? 'play' : 'pause' }) }))] }))] }));
+    };
+}

package/dist/chat-layout.css

@@ -0,0 +1,124 @@
+/* ChatLayout: header, transcript and composer stacked in a column of
+   readable width. The transcript takes the remaining height and scrolls;
+   its messages rest at the bottom while they are few, as in a chat. */
+.rf-chat-layout {
+  --rf-chat-width: 720px;
+  --rf-chat-gutter: 16px;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  box-sizing: border-box;
+  inline-size: 100%;
+  block-size: 100%;
+  min-block-size: 0;
+}
+.rf-chat-layout-header,
+.rf-chat-layout-composer {
+  box-sizing: border-box;
+  inline-size: min(100%, var(--rf-chat-width));
+  margin-inline: auto;
+  padding-inline: var(--rf-chat-gutter);
+}
+.rf-chat-layout-header {
+  grid-row: 1;
+  padding-block: 12px;
+}
+.rf-chat-layout-body {
+  position: relative;
+  grid-row: 2;
+  min-block-size: 0;
+}
+.rf-chat-layout-scroll {
+  block-size: 100%;
+}
+.rf-chat-layout-viewport > .rf-scroll-content {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 100%;
+}
+.rf-chat-transcript {
+  display: grid;
+  align-content: end;
+  gap: 8px;
+  box-sizing: border-box;
+  flex: 1;
+  inline-size: min(100%, var(--rf-chat-width));
+  margin-inline: auto;
+  padding: 16px var(--rf-chat-gutter);
+}
+.rf-chat-layout[data-empty] .rf-chat-transcript {
+  flex: 0;
+  padding-block: 0;
+}
+.rf-chat-layout-empty {
+  display: grid;
+  flex: 1;
+  place-items: center;
+  padding: 24px var(--rf-chat-gutter);
+  color: var(--rf-muted);
+  text-align: center;
+}
+.rf-chat-layout-composer {
+  grid-row: 3;
+  padding-block: 8px 16px;
+}
+
+/* Back to the newest message: a quiet pill resting on the transcript's edge. */
+.rf-chat-jump {
+  position: absolute;
+  inset-block-end: 12px;
+  inset-inline-start: 50%;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  block-size: 28px;
+  padding-inline: 10px 12px;
+  border: 0;
+  border-radius: 9999px;
+  outline: none;
+  background: var(--rf-surface-3, white);
+  box-shadow:
+    0 0 0 1px light-dark(rgb(0 0 0 / 6%), rgb(255 255 255 / 8%)),
+    0 4px 12px light-dark(rgb(0 0 0 / 10%), rgb(0 0 0 / 30%));
+  color: var(--rf-fg);
+  font: var(--rf-text-caption) / 1 var(--rf-font);
+  cursor: pointer;
+  translate: -50% 0;
+  transition:
+    opacity var(--rf-spring-moderate),
+    translate var(--rf-spring-moderate),
+    display var(--rf-spring-moderate) allow-discrete;
+}
+.rf-chat-jump[hidden] {
+  display: none;
+  opacity: 0;
+  translate: -50% 6px;
+}
+@starting-style {
+  .rf-chat-jump:not([hidden]) {
+    opacity: 0;
+    translate: -50% 6px;
+  }
+}
+.rf-chat-jump:focus-visible {
+  box-shadow:
+    0 0 0 2px var(--rf-accent),
+    0 4px 12px light-dark(rgb(0 0 0 / 10%), rgb(0 0 0 / 30%));
+}
+@media (hover: hover) {
+  .rf-chat-jump:hover {
+    background: color-mix(in oklab, var(--rf-surface-3, white), var(--rf-fg) 5%);
+  }
+}
+[data-shape='sharp'] .rf-chat-jump {
+  border-radius: var(--rf-radius);
+}
+.rf-chat-jump > svg {
+  flex: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rf-chat-jump {
+    transition: opacity var(--rf-spring-moderate);
+    translate: -50% 0;
+  }
+}

package/dist/chat-layout.d.ts

@@ -0,0 +1,24 @@
+import { type Handle, type RemixNode } from 'remix/component';
+export interface ChatLayoutProps {
+    /** The messages, usually ChatMessage elements, oldest first. */
+    children?: RemixNode;
+    /** Docked below the transcript, usually an InputMessage. */
+    composer?: RemixNode;
+    /** Above the transcript, such as a title or the people in the chat. */
+    header?: RemixNode;
+    /** Shown in place of the transcript until the first message. */
+    empty?: RemixNode;
+    /** Names the transcript. Default "Conversation". */
+    label?: string;
+    class?: string;
+}
+/**
+ * The conversation screen: a transcript that fills the space, with the
+ * composer docked below it. The transcript opens at the newest message and
+ * stays there as messages arrive or a reply streams in, as long as the
+ * reader is there too; once they scroll back, it leaves them where they
+ * are and offers a button back to the newest message. Sending a message
+ * of their own, a ChatMessage with the user role, brings them back. The transcript is a
+ * labelled log in a ScrollArea, and the column keeps a readable width.
+ */
+export declare function ChatLayout(handle: Handle<ChatLayoutProps>): () => import("remix/component").RemixElement;

package/dist/chat-layout.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "remix/component/jsx-runtime";
+import { on, ref } from 'remix/component';
+import { prefersReducedMotion } from '@remix-run/ui/animation';
+import { Icon } from './icon.js';
+import { ScrollArea } from './scroll-area.js';
+// Within this many pixels of the end, the transcript counts as at the newest message.
+const pinSlack = 24;
+function isEmpty(node) {
+    if (node == null || node === false || node === '')
+        return true;
+    return Array.isArray(node) && node.every(isEmpty);
+}
+/**
+ * The conversation screen: a transcript that fills the space, with the
+ * composer docked below it. The transcript opens at the newest message and
+ * stays there as messages arrive or a reply streams in, as long as the
+ * reader is there too; once they scroll back, it leaves them where they
+ * are and offers a button back to the newest message. Sending a message
+ * of their own, a ChatMessage with the user role, brings them back. The transcript is a
+ * labelled log in a ScrollArea, and the column keeps a readable width.
+ */
+export function ChatLayout(handle) {
+    let viewport = null;
+    let pinned = true;
+    let unseen = false;
+    // While a jump scrolls smoothly, its own scroll events must not unpin it.
+    let jumping = false;
+    function setState(nextPinned, nextUnseen) {
+        if (nextPinned === pinned && nextUnseen === unseen)
+            return;
+        pinned = nextPinned;
+        unseen = nextUnseen;
+        void handle.update();
+    }
+    // The end, from layout alone. Messages gliding to new places are moved by
+    // transforms, which grow scrollHeight while they play; measured that way,
+    // the transcript would scroll past the end and snap back as glides finish.
+    function endTop() {
+        if (!viewport)
+            return 0;
+        const content = viewport.firstElementChild;
+        return Math.max(0, (content?.offsetHeight ?? viewport.scrollHeight) - viewport.clientHeight);
+    }
+    function atEnd() {
+        if (!viewport)
+            return true;
+        return endTop() - viewport.scrollTop <= pinSlack;
+    }
+    function scrollToEnd(smooth = false) {
+        viewport?.scrollTo({
+            top: endTop(),
+            behavior: smooth && !prefersReducedMotion() ? 'smooth' : 'instant',
+        });
+    }
+    const logMix = ref((node, signal) => {
+        if (!(node instanceof HTMLElement))
+            return;
+        viewport = node.closest('.rf-scroll-viewport');
+        if (!viewport)
+            return;
+        const scroller = viewport;
+        scrollToEnd();
+        let lastHeight = node.offsetHeight;
+        const observer = new ResizeObserver(() => {
+            const grew = node.offsetHeight > lastHeight;
+            lastHeight = node.offsetHeight;
+            if (pinned)
+                scrollToEnd();
+            else if (grew)
+                setState(false, true);
+        });
+        observer.observe(node);
+        observer.observe(scroller);
+        // The reader's own message always brings them to the newest one.
+        const added = new MutationObserver((records) => {
+            const sent = records.some((record) => Array.from(record.addedNodes).some((child) => child instanceof Element && child.matches('[data-role="user"]')));
+            if (!sent)
+                return;
+            setState(true, false);
+            scrollToEnd();
+        });
+        added.observe(node, { childList: true });
+        scroller.addEventListener('scroll', () => {
+            if (jumping) {
+                if (atEnd())
+                    jumping = false;
+                return;
+            }
+            const end = atEnd();
+            setState(end, end ? false : unseen);
+        }, { signal, passive: true });
+        signal.addEventListener('abort', () => {
+            observer.disconnect();
+            added.disconnect();
+            if (viewport === scroller)
+                viewport = null;
+        }, { once: true });
+    });
+    return () => {
+        const { children, composer, header, empty, label = 'Conversation' } = handle.props;
+        const blank = isEmpty(children);
+        return (_jsxs("div", { class: handle.props.class ? `rf-chat-layout ${handle.props.class}` : 'rf-chat-layout', "data-empty": blank || undefined, children: [header != null && _jsx("div", { class: "rf-chat-layout-header", children: header }), _jsxs("div", { class: "rf-chat-layout-body", children: [_jsxs(ScrollArea, { label: label, className: "rf-chat-layout-scroll", viewportClassName: "rf-chat-layout-viewport", children: [_jsx("div", { class: "rf-chat-transcript", role: "log", "aria-label": label, mix: logMix, children: children }), blank && empty != null && _jsx("div", { class: "rf-chat-layout-empty", children: empty })] }), _jsxs("button", { type: "button", class: "rf-chat-jump", hidden: pinned, mix: on('click', () => {
+                                jumping = true;
+                                setState(true, false);
+                                scrollToEnd(true);
+                            }), children: [_jsx(Icon, { name: "chevron-down", size: 14 }), unseen ? 'New messages' : 'Jump to latest'] })] }), composer != null && _jsx("div", { class: "rf-chat-layout-composer", children: composer })] }));
+    };
+}

package/dist/citation.css

@@ -0,0 +1,121 @@
+/* Citation: a small chip inline with the text it supports, on the gray
+   Badge's fill, sized to sit within the line without moving it. Its preview
+   is a HoverCard listing each source. */
+.rf-citation {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-inline-size: 18px;
+  block-size: 18px;
+  margin-inline: 2px;
+  padding-inline: 5px;
+  /* Three quarters of the item radius: 6px rounded, a pill at pill, square at sharp. */
+  border-radius: calc(var(--rf-item-radius) * 0.75);
+  outline: none;
+  background: var(--rf-neutral-fill);
+  color: var(--rf-muted);
+  font: 500 11px / 1 var(--rf-font);
+  font-variant-numeric: tabular-nums;
+  text-decoration: none;
+  vertical-align: 0.1em;
+  white-space: nowrap;
+  transition:
+    color var(--rf-fast),
+    background-color var(--rf-fast);
+}
+.rf-citation[data-variant='site'] {
+  padding-inline: 7px;
+}
+.rf-citation[data-size='compact'] {
+  min-inline-size: 16px;
+  block-size: 16px;
+  padding-inline: 4px;
+  font-size: 10px;
+}
+@media (hover: hover) {
+  .rf-citation:hover {
+    background: color-mix(in oklab, var(--rf-neutral-fill), var(--rf-fg) 10%);
+    color: var(--rf-fg);
+  }
+}
+.rf-citation:focus-visible {
+  box-shadow: 0 0 0 2px var(--rf-accent);
+  color: var(--rf-fg);
+}
+
+.rf-citation-sources {
+  display: grid;
+  gap: 12px;
+  /* The preview's widest content box: 320px less its 12px padding. */
+  inline-size: min(296px, calc(100vw - 40px));
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.rf-citation-sources[data-density='compact'] {
+  gap: 10px;
+}
+.rf-citation-source {
+  display: grid;
+  gap: 2px;
+  min-inline-size: 0;
+}
+.rf-citation-source + .rf-citation-source {
+  padding-block-start: 12px;
+  border-block-start: 1px solid var(--rf-border);
+}
+.rf-citation-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--rf-muted);
+  font: var(--rf-text-caption) / var(--rf-leading-caption) var(--rf-font);
+}
+.rf-citation-icon {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  inline-size: 14px;
+  block-size: 14px;
+  overflow: hidden;
+  border-radius: 3px;
+}
+.rf-citation-icon > :is(img, svg) {
+  inline-size: 100%;
+  block-size: 100%;
+}
+.rf-citation-site {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rf-citation-number {
+  margin-inline-start: auto;
+  font-variant-numeric: tabular-nums;
+}
+.rf-citation-title {
+  color: var(--rf-fg);
+  font-variation-settings: var(--rf-weight-strong);
+  text-decoration: none;
+}
+.rf-citation-title:hover,
+.rf-citation-title:focus-visible {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.rf-citation-description {
+  display: -webkit-box;
+  margin: 0;
+  overflow: hidden;
+  color: var(--rf-muted);
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+@media (forced-colors: active) {
+  .rf-citation {
+    border: 1px solid LinkText;
+  }
+}

package/dist/citation.d.ts

@@ -0,0 +1,35 @@
+import type { Handle, RemixNode } from 'remix/component';
+import type { PopoverPlacement } from './popover.tsx';
+export interface CitationSource {
+    title: string;
+    href: string;
+    /** The site's name. Defaults to the link's host, without www. */
+    site?: string;
+    /** A short excerpt shown in the preview. */
+    description?: RemixNode;
+    /** The site's icon, such as a favicon. Defaults to a globe. */
+    icon?: RemixNode;
+}
+export interface CitationProps {
+    /** The source, or several sources cited together. */
+    sources: CitationSource | readonly CitationSource[];
+    /** The first source's number. Several sources take the numbers that follow. Default 1. */
+    index?: number;
+    /** `number` shows the source numbers; `site` shows the first site's name and how many more. Default number. */
+    variant?: 'number' | 'site';
+    /** Where links open, such as `_blank`, which also sets a safe `rel`. */
+    target?: string;
+    /** Which side of the chip the preview opens on. Default top. */
+    placement?: PopoverPlacement;
+    /** Milliseconds the pointer rests on the chip before the preview opens. Default 300. */
+    openDelay?: number;
+    size?: 'default' | 'compact';
+}
+/**
+ * An inline citation in generated text: a small chip with the source's
+ * number, or its site, that links to the source and previews it on hover or
+ * focus, as a HoverCard. One chip can cite several sources; its preview
+ * lists each with its site, title and an excerpt. Its accessible name says
+ * what it cites, not only its number.
+ */
+export declare function Citation(handle: Handle<CitationProps>): () => import("remix/component").RemixElement | null;