@rtzll/reflow 0.5.0 → 0.6.0

package/dist/compositions.js

@@ -90,6 +90,8 @@ export function ChatMessage(handle) {
     return () => {
         const { role, label, attachments, children, size, time, actions, animate = true } = handle.props;
         followMove();
+        if (role === 'system')
+            return (_jsx("article", { class: "rf-chat-message", "data-role": "system", "data-size": size, "data-animate": animate ? '' : undefined, "aria-label": label ?? 'System', mix: track, children: _jsxs("p", { class: "rf-chat-system", children: [handle.props.icon != null && (_jsx("span", { class: "rf-chat-system-icon", "aria-hidden": "true", children: handle.props.icon })), _jsx("span", { class: "rf-chat-system-text", children: children }), time && _jsx("span", { class: "rf-chat-time", children: time }), actions != null && _jsx("span", { class: "rf-chat-actions", children: actions })] }) }));
         return (_jsxs("article", { class: "rf-chat-message", "data-role": role, "data-size": size, "data-animate": animate ? '' : undefined, "aria-label": label ?? (role === 'user' ? 'You' : 'Assistant'), mix: track, children: [attachments?.length ? (_jsx("ul", { class: "rf-chat-attachments", "aria-label": "Attachments", children: attachments.map((attachment, index) => (_jsxs("li", { class: "rf-chat-thumb", title: attachment.detail ? `${attachment.name} (${attachment.detail})` : undefined, children: [attachment.previewUrl ? (_jsx("img", { src: attachment.previewUrl, alt: attachment.name })) : (_jsx("span", { class: "rf-chat-thumb-glyph", role: "img", "aria-label": attachment.name, children: _jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", children: [_jsx("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }), _jsx("path", { d: "M14 3v5h5" })] }) })), attachment.url && _jsx("a", { href: attachment.url, "aria-label": attachment.name })] }, index))) })) : null, children != null && children !== '' && (_jsx("div", { class: "rf-chat-body", style: handle.props.transitionId
                         ? { viewTransitionName: messageTransitionName(handle.props.transitionId) }
                         : undefined, children: children })), ((role === 'user' && time) || actions) && (_jsxs("div", { class: "rf-chat-meta", children: [role === 'user' && time && _jsx("span", { class: "rf-chat-time", children: time }), actions != null && _jsx("span", { class: "rf-chat-actions", children: actions })] }))] }));

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

@@ -28,5 +28,9 @@ export interface HoverCardProps {
  * 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.
+ *
+ * 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

@@ -8,6 +8,10 @@ import { anchor } from '@remix-run/ui/anchor';
  * 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.
+ *
+ * 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;
@@ -114,6 +118,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,10 @@ 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 './systems.ts';
 export * from './queued-stack.tsx';
 export * from './scroll-area.tsx';

package/dist/index.js

@@ -15,6 +15,10 @@ 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 './systems.js';
 export * from './queued-stack.js';
 export * from './scroll-area.js';

package/dist/styles.css

@@ -14,4 +14,8 @@
 @import './popover.css';
 @import './toaster.css';
 @import './drawer.css';
+@import './code-block.css';
+@import './citation.css';
+@import './avatar.css';
+@import './chat-layout.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.6.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"