@rtzll/reflow 0.5.0 → 0.7.0

package/dist/drawer.css

@@ -1,10 +1,13 @@
-/* Drawer: a modal panel attached to one edge of the viewport. It slides in
-   on the moderate spring, which has no bounce, so the panel never lifts off
-   its edge, and leaves on Dialog's exit tween. While dragged it follows
-   --rf-drawer-drag, the distance toward its edge, and the backdrop fades
-   with --rf-drawer-progress. A strip of panel color past the edge covers
-   the gap when a drag pulls it the other way. */
+/* Drawer: a modal panel attached to one edge of the viewport. The panel
+   and the backdrop share one motion, in and out and back from a drag: a
+   long ease that starts fast and settles gently, with no overshoot, so the
+   panel never lifts off its edge and the backdrop darkens as it arrives.
+   While dragged the panel follows --rf-drawer-drag, the distance toward its
+   edge, and the backdrop lightens with --rf-drawer-progress. A strip of
+   panel color past the edge covers the gap when a drag pulls it the other
+   way. */
 .rf-drawer {
+  --rf-drawer-motion: 500ms cubic-bezier(0.32, 0.72, 0, 1);
   --rf-drawer-bg: var(--rf-surface-5);
   --rf-drawer-drag: 0px;
   --rf-drawer-closed: 0 100%;
@@ -32,24 +35,12 @@
   font: var(--rf-text-body) / var(--rf-leading-body) var(--rf-font);
   translate: var(--rf-drawer-closed);
   transition:
-    translate var(--rf-exit-slow),
-    overlay 160ms allow-discrete,
-    display 160ms allow-discrete;
+    translate var(--rf-drawer-motion),
+    overlay var(--rf-drawer-motion) allow-discrete,
+    display var(--rf-drawer-motion) allow-discrete;
 }
 .rf-drawer[open] {
   translate: 0 var(--rf-drawer-drag);
-  transition:
-    translate var(--rf-spring-moderate),
-    overlay 160ms allow-discrete,
-    display 160ms allow-discrete;
-}
-@starting-style {
-  .rf-drawer[open] {
-    translate: var(--rf-drawer-closed);
-  }
-  .rf-drawer[open]::backdrop {
-    opacity: 0;
-  }
 }
 
 /* Top and bottom drawers keep their content in a readable column. */
@@ -100,23 +91,32 @@
   background: rgb(0 0 0 / 40%);
   opacity: 0;
   transition:
-    opacity var(--rf-exit-slow),
-    overlay 160ms allow-discrete,
-    display 160ms allow-discrete;
+    opacity 500ms cubic-bezier(0.32, 0.72, 0, 1),
+    overlay 500ms cubic-bezier(0.32, 0.72, 0, 1) allow-discrete,
+    display 500ms cubic-bezier(0.32, 0.72, 0, 1) allow-discrete;
 }
 [data-theme='dark'] .rf-drawer::backdrop {
   background: rgb(0 0 0 / 70%);
 }
 .rf-drawer[open]::backdrop {
-  opacity: calc(1 - var(--rf-drawer-progress, 0));
-  transition:
-    opacity var(--rf-spring-moderate),
-    overlay 160ms allow-discrete,
-    display 160ms allow-discrete;
+  opacity: 1;
 }
 .rf-drawer[data-dragging]::backdrop {
+  opacity: calc(1 - var(--rf-drawer-progress, 0));
   transition: none;
 }
+/* Where the panel and backdrop start from as the drawer opens. Starting
+   styles cascade with the rest, so these follow the open rules above and
+   match the per-side ones in specificity, or those would win and the
+   drawer would appear without its slide. */
+@starting-style {
+  .rf-drawer[data-side][open] {
+    translate: var(--rf-drawer-closed);
+  }
+  .rf-drawer[data-side][open]::backdrop {
+    opacity: 0;
+  }
+}
 
 .rf-drawer-handle {
   inline-size: 40px;
@@ -193,19 +193,15 @@
     translate: none;
     opacity: 0;
     transition:
-      opacity var(--rf-exit-slow),
-      overlay 160ms allow-discrete,
-      display 160ms allow-discrete;
+      opacity var(--rf-drawer-motion),
+      overlay var(--rf-drawer-motion) allow-discrete,
+      display var(--rf-drawer-motion) allow-discrete;
   }
   .rf-drawer[open] {
     opacity: 1;
-    transition:
-      opacity var(--rf-spring-moderate),
-      overlay 160ms allow-discrete,
-      display 160ms allow-discrete;
   }
   @starting-style {
-    .rf-drawer[open] {
+    .rf-drawer[data-side][open] {
       translate: none;
       opacity: 0;
     }

package/dist/highlight.d.ts

@@ -0,0 +1,36 @@
+/**
+ * `@rtzll/reflow/highlight`: Shiki behind one function, for CodeBlock.
+ *
+ * This entry is optional. It needs the `shiki` and `@shikijs/transformers`
+ * peer dependencies, and nothing else in Reflow imports it, so an app that
+ * never imports it never installs or loads Shiki.
+ */
+import { type BundledTheme, type ShikiTransformer, type ThemeRegistrationAny } from 'shiki';
+import type { HighlightedCode } from './code-block.tsx';
+export type { CodeLine, CodeToken, HighlightedCode } from './code-block.tsx';
+type Theme = BundledTheme | ThemeRegistrationAny;
+export interface HighlightOptions {
+    /** Any language Shiki bundles, or one of its aliases. Unknown languages render as plain text. Default text. */
+    lang?: string;
+    /** A Shiki theme, by name or definition. Defaults to Reflow's, which colours tokens with `--rf-code-token-*` variables. */
+    theme?: Theme;
+    /** A light and a dark theme; the block follows the page's color scheme between them. */
+    themes?: {
+        light: Theme;
+        dark: Theme;
+    };
+    /**
+     * Reads `// [!code highlight]`, `[!code ++]`, `[!code --]`, `[!code focus]`,
+     * `[!code error]`, `[!code warning]` and `[!code word:name]` comments into
+     * line and word marks, and removes them from the code. Default true.
+     */
+    notation?: boolean;
+    /** More Shiki transformers, run after the notation ones. */
+    transformers?: ShikiTransformer[];
+}
+/**
+ * Highlights code for CodeBlock. Call it where the code is known: in a route
+ * handler, so the page arrives highlighted and the browser loads nothing, or
+ * in the browser for code that arrives later, such as a streamed reply.
+ */
+export declare function highlight(code: string, options?: HighlightOptions): Promise<HighlightedCode>;

package/dist/highlight.js

@@ -0,0 +1,134 @@
+/**
+ * `@rtzll/reflow/highlight`: Shiki behind one function, for CodeBlock.
+ *
+ * This entry is optional. It needs the `shiki` and `@shikijs/transformers`
+ * peer dependencies, and nothing else in Reflow imports it, so an app that
+ * never imports it never installs or loads Shiki.
+ */
+import { bundledLanguages, bundledLanguagesAlias, createCssVariablesTheme, createHighlighter, createJavaScriptRegexEngine, } from 'shiki';
+import { transformerNotationDiff, transformerNotationErrorLevel, transformerNotationFocus, transformerNotationHighlight, transformerNotationWordHighlight, } from '@shikijs/transformers';
+// Reflow's theme: every colour is a CSS variable, set in code-block.css for
+// the light and dark themes, so highlighted code follows the page.
+const reflowTheme = createCssVariablesTheme({
+    name: 'reflow',
+    variablePrefix: '--rf-code-',
+    fontStyle: true,
+});
+let shared;
+// One highlighter for the process or page, with the JavaScript regex engine,
+// which needs no WebAssembly. Languages and themes load as they are first used.
+function highlighter() {
+    shared ??= createHighlighter({
+        themes: [reflowTheme],
+        langs: [],
+        engine: createJavaScriptRegexEngine({ forgiving: true }),
+    });
+    return shared;
+}
+function bundled(lang) {
+    return lang in bundledLanguages || lang in bundledLanguagesAlias;
+}
+function themeName(theme) {
+    return typeof theme === 'string' ? theme : (theme.name ?? 'custom');
+}
+function classes(node) {
+    const value = node.properties?.class ?? node.properties?.className;
+    return Array.isArray(value) ? value.join(' ') : typeof value === 'string' ? value : '';
+}
+// Flattens a line into runs of text, each with the innermost style and
+// every class around it, such as a token inside a highlighted word.
+function tokens(node, style = '', classList = []) {
+    if (node.type === 'text') {
+        if (!node.value)
+            return [];
+        const token = { content: node.value };
+        if (style)
+            token.style = style;
+        if (classList.length)
+            token.class = classList.join(' ');
+        return [token];
+    }
+    const own = typeof node.properties?.style === 'string' ? node.properties.style : '';
+    const name = classes(node);
+    const nested = name ? [...classList, name] : classList;
+    return (node.children ?? []).flatMap((child) => tokens(child, own || style, nested));
+}
+function trimEnd(list) {
+    while (list.length) {
+        const last = list[list.length - 1];
+        last.content = last.content.replace(/[ \t]+$/, '');
+        if (last.content)
+            return;
+        list.pop();
+    }
+}
+/**
+ * Highlights code for CodeBlock. Call it where the code is known: in a route
+ * handler, so the page arrives highlighted and the browser loads nothing, or
+ * in the browser for code that arrives later, such as a streamed reply.
+ */
+export async function highlight(code, options = {}) {
+    const instance = await highlighter();
+    const requested = options.lang ?? 'text';
+    const lang = bundled(requested) ? requested : 'text';
+    if (lang !== 'text' && !instance.getLoadedLanguages().includes(lang))
+        await instance.loadLanguage(lang);
+    const themes = options.themes ? [options.themes.light, options.themes.dark] : [options.theme];
+    for (const theme of themes)
+        if (theme && !instance.getLoadedThemes().includes(themeName(theme)))
+            await instance.loadTheme(theme);
+    const transformers = [
+        ...(options.notation === false
+            ? []
+            : [
+                transformerNotationHighlight(),
+                transformerNotationDiff(),
+                transformerNotationFocus(),
+                transformerNotationErrorLevel(),
+                transformerNotationWordHighlight(),
+            ]),
+        ...(options.transformers ?? []),
+    ];
+    const root = instance.codeToHast(code, options.themes
+        ? {
+            lang,
+            themes: {
+                light: themeName(options.themes.light),
+                dark: themeName(options.themes.dark),
+            },
+            defaultColor: false,
+            transformers,
+        }
+        : { lang, theme: options.theme ? themeName(options.theme) : 'reflow', transformers });
+    const pre = root.children?.find((node) => node.tagName === 'pre');
+    const body = pre?.children?.find((node) => node.tagName === 'code');
+    const lines = (body?.children ?? [])
+        .filter((node) => node.type === 'element')
+        .map((node) => {
+        const mark = classes(node)
+            .split(/\s+/)
+            .filter((name) => name && name !== 'line')
+            .join(' ');
+        const line = { tokens: tokens({ ...node, properties: {} }) };
+        // Removing a notation comment leaves the space before it.
+        if (options.notation !== false)
+            trimEnd(line.tokens);
+        if (mark)
+            line.class = mark;
+        return line;
+    });
+    const flags = classes(pre ?? { type: 'element' })
+        .split(/\s+/)
+        .filter((name) => name.startsWith('has-'));
+    const style = typeof pre?.properties?.style === 'string' ? pre.properties.style : undefined;
+    const result = {
+        lang: requested === 'text' || lang === 'text' ? 'text' : requested,
+        code: lines.map((line) => line.tokens.map((token) => token.content).join('')).join('\n'),
+        lines,
+        flags,
+    };
+    // Reflow's own theme takes its colours from CSS; others bring theirs inline.
+    if (style && (options.theme || options.themes))
+        result.style = style;
+    return result;
+}

package/dist/hover-card.d.ts

@@ -27,6 +27,11 @@ 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
+ * list would end the paragraph when the browser parses server-rendered HTML.
  */
 export declare function HoverCard(handle: Handle<HoverCardProps>): () => import("remix/component").RemixElement;

package/dist/hover-card.js

@@ -7,7 +7,12 @@ 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
+ * list would end the paragraph when the browser parses server-rendered HTML.
  */
 export function HoverCard(handle) {
     let trigger = null;
@@ -84,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);
@@ -114,6 +131,6 @@ export function HoverCard(handle) {
     });
     return () => {
         handle.queueTask(sync);
-        return (_jsxs(_Fragment, { children: [handle.props.renderTrigger({ mix: triggerMix }), _jsx("div", { class: "rf-menu-surface rf-popover-surface rf-hover-card", popover: "manual", "data-density": handle.props.size, mix: cardMix, children: handle.props.children })] }));
+        return (_jsxs(_Fragment, { children: [handle.props.renderTrigger({ mix: triggerMix }), _jsx("span", { class: "rf-menu-surface rf-popover-surface rf-hover-card", popover: "manual", "data-density": handle.props.size, mix: cardMix, children: handle.props.children })] }));
     };
 }

package/dist/index.d.ts

@@ -15,6 +15,11 @@ export * from './popover.tsx';
 export * from './hover-card.tsx';
 export * from './toaster.tsx';
 export * from './drawer.tsx';
+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

@@ -15,6 +15,11 @@ export * from './popover.js';
 export * from './hover-card.js';
 export * from './toaster.js';
 export * from './drawer.js';
+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

@@ -14,4 +14,9 @@
 @import './popover.css';
 @import './toaster.css';
 @import './drawer.css';
+@import './code-block.css';
+@import './citation.css';
+@import './avatar.css';
+@import './chat-layout.css';
+@import './carousel.css';
 @import './systems.css';

package/dist/toaster.js

@@ -70,12 +70,13 @@ export const toast = Object.assign((title, options) => upsert(title, 'default',
     info: (title, options) => upsert(title, 'info', options),
     warning: (title, options) => upsert(title, 'warning', options),
     error: (title, options) => upsert(title, 'error', options),
-    loading: (title, options) => upsert(title, 'loading', { duration: Infinity, ...options }),
+    // A loading toast stays without a duration of its own: the close timer
+    // skips loading toasts, so it starts once the toast settles.
+    loading: (title, options) => upsert(title, 'loading', options),
     promise(promise, messages, options = {}) {
         const id = upsert(messages.loading, 'loading', {
             description: messages.description,
             ...options,
-            duration: Infinity,
         });
         const settle = (status, title) => {
             // A toast closed while it waited stays closed.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rtzll/reflow",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "type": "module",
   "files": [
     "dist",
@@ -13,13 +13,29 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./highlight": {
+      "types": "./dist/highlight.d.ts",
+      "default": "./dist/highlight.js"
+    },
     "./styles.css": "./dist/styles.css"
   },
   "peerDependencies": {
-    "remix": "3.2.0"
+    "@shikijs/transformers": "^4.5.0",
+    "remix": "3.2.0",
+    "shiki": "^4.5.0"
+  },
+  "peerDependenciesMeta": {
+    "@shikijs/transformers": {
+      "optional": true
+    },
+    "shiki": {
+      "optional": true
+    }
   },
   "devDependencies": {
-    "remix": "3.2.0"
+    "@shikijs/transformers": "4.5.0",
+    "remix": "3.2.0",
+    "shiki": "4.5.0"
   },
   "dependencies": {
     "@remix-run/ui": "0.13.1"