@rtzll/reflow 0.6.0 → 0.7.0

package/dist/avatar.css

@@ -22,6 +22,9 @@
 .rf-avatar[data-shape='square'] {
   border-radius: max(4px, calc(var(--rf-avatar-size) * 0.25));
 }
+[data-shape='sharp'] .rf-avatar[data-shape='square'] {
+  border-radius: var(--rf-radius);
+}
 .rf-avatar > * {
   grid-area: 1 / 1;
 }

package/dist/carousel.css

@@ -0,0 +1,67 @@
+/* Carousel: slides in a row on a native scroll container that snaps each
+   one into place. Set --rf-carousel-slide for the slides' width (100% shows
+   one at a time) and --rf-carousel-gap for the space between them. While a
+   mouse drags it, snapping waits until the slide it lands on is chosen. */
+.rf-carousel {
+  --rf-carousel-slide: 100%;
+  --rf-carousel-gap: 12px;
+  display: grid;
+  gap: 12px;
+  min-inline-size: 0;
+}
+.rf-carousel-viewport {
+  position: relative;
+  display: grid;
+  grid-auto-columns: var(--rf-carousel-slide);
+  grid-auto-flow: column;
+  gap: var(--rf-carousel-gap);
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  border-radius: var(--rf-panel-radius);
+  outline: none;
+}
+.rf-carousel-viewport::-webkit-scrollbar {
+  display: none;
+}
+.rf-carousel-viewport:focus-visible {
+  outline: 2px solid var(--rf-accent);
+  outline-offset: 2px;
+}
+@media (hover: hover) and (pointer: fine) {
+  .rf-carousel-viewport {
+    cursor: grab;
+  }
+}
+.rf-carousel-viewport[data-dragging] {
+  cursor: grabbing;
+  scroll-snap-type: none;
+  user-select: none;
+}
+.rf-carousel-slide {
+  min-inline-size: 0;
+  scroll-snap-align: start;
+  scroll-snap-stop: normal;
+}
+.rf-carousel[data-align='center'] .rf-carousel-slide {
+  scroll-snap-align: center;
+}
+/* Dragging moves the slides, not their images. */
+.rf-carousel-slide img {
+  -webkit-user-drag: none;
+}
+
+.rf-carousel-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+.rf-carousel-controls .rf-carousel-dots {
+  margin-inline: 4px;
+}
+.rf-carousel-play {
+  margin-inline-start: 4px;
+}

package/dist/carousel.d.ts

@@ -0,0 +1,36 @@
+import { type Handle, type RemixNode } from 'remix/component';
+export interface CarouselProps {
+    /** Names the carousel, such as "Featured projects". */
+    label: string;
+    /** The slides, one per child. */
+    children?: RemixNode;
+    /** Names each slide, for its announcement and its dot. */
+    slideLabels?: readonly string[];
+    /** The current slide, when controlled by the parent. */
+    index?: number;
+    defaultIndex?: number;
+    /** Called when a button, a dot, a drag, a scroll or autoplay changes the slide. */
+    onIndexChange?: (index: number) => void;
+    /** Shows CarouselDots under the slides. Default true. */
+    dots?: boolean;
+    /** Shows previous and next buttons. Default true. */
+    controls?: boolean;
+    /** Moves on after this many milliseconds, timed and shown by the dots, with a button to pause. */
+    autoplay?: {
+        duration: number;
+    };
+    /** Where a slide comes to rest. Default start. */
+    align?: 'start' | 'center';
+    size?: 'default' | 'compact';
+    class?: string;
+}
+/**
+ * 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 declare function Carousel(handle: Handle<CarouselProps>): () => import("remix/component").RemixElement;

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

@@ -109,6 +109,9 @@
     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;
 }

package/dist/citation.css

@@ -10,7 +10,8 @@
   block-size: 18px;
   margin-inline: 2px;
   padding-inline: 5px;
-  border-radius: 6px;
+  /* 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);
@@ -46,7 +47,8 @@
 .rf-citation-sources {
   display: grid;
   gap: 12px;
-  inline-size: min(300px, calc(100vw - 32px));
+  /* 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;

package/dist/code-block.css

@@ -220,7 +220,7 @@
   opacity: 0.75;
 }
 .rf-code .highlighted-word {
-  border-radius: 4px;
+  border-radius: calc(var(--rf-radius) / 2);
   background: color-mix(in oklab, var(--rf-accent) 16%, transparent);
   box-shadow: 0 0 0 1px color-mix(in oklab, var(--rf-accent) 30%, transparent);
 }

package/dist/compositions.js

@@ -183,10 +183,16 @@ export function InputMessage(handle) {
         changeFiles([...files, ...additions.slice(0, Math.max(0, remaining))]);
     }
     function changeQueue(next) {
+        // When the last queued message leaves with focus inside the queue, the
+        // message box takes focus, so the keyboard does not fall back to the page.
+        const active = document.activeElement;
+        const composer = next.length === 0 ? active?.closest('.rf-queue-wrap')?.closest('form') : null;
         if (handle.props.queue === undefined)
             queued = next;
         handle.props.onQueueChange?.(next);
         handle.update();
+        if (composer)
+            handle.queueTask(() => composer.querySelector('textarea')?.focus({ preventScroll: true }));
     }
     async function sendQueued(id) {
         if (sending || handle.props.disabled)

package/dist/hover-card.d.ts

@@ -27,7 +27,8 @@ export interface HoverCardProps {
  * supplementary: the trigger still works on its own, a tap on a touch screen
  * follows it, and the card never takes focus or locks scrolling. The pointer
  * can cross into the card and use its links; it closes once the pointer has
- * left both, or on Escape. It shares Popover's surface and motion.
+ * left both, on Escape, or when the page scrolls. It shares Popover's
+ * surface and motion.
  *
  * The card is a span, so a trigger can sit inside a paragraph. Keep its
  * content to phrasing elements there, such as span and a, since a div or a

package/dist/hover-card.js

@@ -7,7 +7,8 @@ import { anchor } from '@remix-run/ui/anchor';
  * supplementary: the trigger still works on its own, a tap on a touch screen
  * follows it, and the card never takes focus or locks scrolling. The pointer
  * can cross into the card and use its links; it closes once the pointer has
- * left both, or on Escape. It shares Popover's surface and motion.
+ * left both, on Escape, or when the page scrolls. It shares Popover's
+ * surface and motion.
  *
  * The card is a span, so a trigger can sit inside a paragraph. Keep its
  * content to phrasing elements there, such as span and a, since a div or a
@@ -88,6 +89,18 @@ export function HoverCard(handle) {
                 return;
             setOpen(false);
         }, options);
+        // The card is placed by script, so while the trigger scrolls it trails a
+        // frame behind. A preview belongs to where the pointer rests, so when the
+        // page, or anything holding the trigger, scrolls, it closes at once. Other
+        // scrollers, such as a carousel elsewhere, leave it be.
+        element.ownerDocument.addEventListener('scroll', (event) => {
+            if (!isOpen())
+                return;
+            const source = event.target;
+            const movesTrigger = source === element.ownerDocument || (source instanceof Node && source.contains(element));
+            if (movesTrigger)
+                setOpen(false);
+        }, { capture: true, passive: true, signal });
         signal.addEventListener('abort', () => {
             clearTimeout(openTimer);
             clearTimeout(closeTimer);

package/dist/index.d.ts

@@ -19,6 +19,7 @@ export * from './code-block.tsx';
 export * from './citation.tsx';
 export * from './avatar.tsx';
 export * from './chat-layout.tsx';
+export * from './carousel.tsx';
 export * from './systems.ts';
 export * from './queued-stack.tsx';
 export * from './scroll-area.tsx';

package/dist/index.js

@@ -19,6 +19,7 @@ export * from './code-block.js';
 export * from './citation.js';
 export * from './avatar.js';
 export * from './chat-layout.js';
+export * from './carousel.js';
 export * from './systems.js';
 export * from './queued-stack.js';
 export * from './scroll-area.js';

package/dist/queued-stack.js

@@ -12,6 +12,41 @@ export function QueuedStack(handle) {
             list = node;
     });
     const sending = new Set();
+    // The action that had focus when its message moved or left, to hand focus
+    // on to once the queue has re-rendered.
+    let refocus;
+    function remember(action, id, index) {
+        if (list?.contains(document.activeElement))
+            refocus = { action, id, index };
+    }
+    function restoreFocus() {
+        const target = refocus;
+        if (!target || !list)
+            return;
+        const rows = Array.from(list.children);
+        const row = rows.find((item) => item.dataset.queueId === target.id);
+        let button;
+        if (target.action === 'up' || target.action === 'down') {
+            // The moved message keeps focus, on the other arrow if this one ran out.
+            if (!row)
+                return;
+            if (rows.indexOf(row) === target.index)
+                return;
+            button = row.querySelector(`[data-queue-action="${target.action}"]`);
+            if (button?.disabled)
+                button = row.querySelector(`[data-queue-action="${target.action === 'up' ? 'down' : 'up'}"]`);
+        }
+        else {
+            // The message that takes the sent or removed one's place, or the one before it.
+            if (row)
+                return;
+            const next = rows[Math.min(target.index, rows.length - 1)];
+            button = next?.querySelector(`[data-queue-action="${target.action}"]`);
+        }
+        refocus = undefined;
+        // It takes the place of the button that had focus, so nothing needs scrolling.
+        button?.focus({ preventScroll: true });
+    }
     async function send(id) {
         if (sending.has(id))
             return;
@@ -51,6 +86,8 @@ export function QueuedStack(handle) {
         const { messages, onRemove, onEdit, label = 'Queued messages' } = handle.props;
         if (!messages.length)
             expanded = false;
+        if (refocus)
+            handle.queueTask(restoreFocus);
         return (_jsxs("div", { class: "rf-queue-wrap", hidden: !messages.length, "data-expanded": expanded || undefined, children: [messages.length > 1 && (_jsx("button", { type: "button", class: "rf-queue-toggle", "aria-expanded": expanded, "aria-controls": handle.id, mix: on('click', () => {
                         expanded = !expanded;
                         handle.update();
@@ -133,6 +170,18 @@ export function QueuedStack(handle) {
                                 expanded = true;
                                 handle.update();
                             }),
-                        ], children: [_jsx("span", { class: "rf-queue-content", children: message.content }), _jsxs("div", { class: "rf-queue-actions", children: [_jsx(Button, { size: "icon-compact", variant: "ghost", disabled: index === 0, "aria-label": `Move message ${index + 1} up`, mix: on('click', () => move(message.id, index - 1)), children: "\u2191" }), _jsx(Button, { size: "icon-compact", variant: "ghost", disabled: index === messages.length - 1, "aria-label": `Move message ${index + 1} down`, mix: on('click', () => move(message.id, index + 1)), children: "\u2193" }), onRemove && (_jsx(Button, { size: "icon-compact", variant: "ghost", "aria-label": `Remove message ${index + 1}`, mix: on('click', () => onRemove(message.id)), children: "\u00D7" })), _jsx(Button, { size: "compact", variant: "secondary", mix: on('click', () => send(message.id)), children: "Send" })] })] }, message.id))) })] }));
+                        ], children: [_jsx("span", { class: "rf-queue-content", children: message.content }), _jsxs("div", { class: "rf-queue-actions", children: [_jsx(Button, { size: "icon-compact", variant: "ghost", disabled: index === 0, "aria-label": `Move message ${index + 1} up`, "data-queue-action": "up", mix: on('click', () => {
+                                            remember('up', message.id, index);
+                                            move(message.id, index - 1);
+                                        }), children: "\u2191" }), _jsx(Button, { size: "icon-compact", variant: "ghost", disabled: index === messages.length - 1, "aria-label": `Move message ${index + 1} down`, "data-queue-action": "down", mix: on('click', () => {
+                                            remember('down', message.id, index);
+                                            move(message.id, index + 1);
+                                        }), children: "\u2193" }), onRemove && (_jsx(Button, { size: "icon-compact", variant: "ghost", "aria-label": `Remove message ${index + 1}`, "data-queue-action": "remove", mix: on('click', () => {
+                                            remember('remove', message.id, index);
+                                            onRemove(message.id);
+                                        }), children: "\u00D7" })), _jsx(Button, { size: "compact", variant: "secondary", "data-queue-action": "send", mix: on('click', () => {
+                                            remember('send', message.id, index);
+                                            void send(message.id);
+                                        }), children: "Send" })] })] }, message.id))) })] }));
     };
 }

package/dist/styles.css

@@ -18,4 +18,5 @@
 @import './citation.css';
 @import './avatar.css';
 @import './chat-layout.css';
+@import './carousel.css';
 @import './systems.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rtzll/reflow",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "files": [
     "dist",