@rtzll/reflow 0.4.0 → 0.6.0

package/dist/citation.css

@@ -0,0 +1,119 @@
+/* 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;
+  border-radius: 6px;
+  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;
+  inline-size: min(300px, calc(100vw - 32px));
+  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;

package/dist/citation.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "remix/component/jsx-runtime";
+import { HoverCard } from './hover-card.js';
+import { Icon } from './icon.js';
+function siteOf(source) {
+    if (source.site)
+        return source.site;
+    try {
+        return new URL(source.href).host.replace(/^www\./, '');
+    }
+    catch {
+        return source.href;
+    }
+}
+/**
+ * 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 function Citation(handle) {
+    return () => {
+        const { variant = 'number', index = 1, target, size } = handle.props;
+        const list = Array.isArray(handle.props.sources)
+            ? handle.props.sources
+            : [handle.props.sources];
+        const first = list[0];
+        if (!first)
+            return null;
+        const last = index + list.length - 1;
+        const described = list.map((source) => `${source.title} (${siteOf(source)})`).join('; ');
+        const label = variant === 'site'
+            ? `${list.length > 1 ? 'Sources' : 'Source'}: ${described}`
+            : list.length > 1
+                ? `Sources ${index} to ${last}: ${described}`
+                : `Source ${index}: ${described}`;
+        const text = variant === 'site'
+            ? `${siteOf(first)}${list.length > 1 ? ` +${list.length - 1}` : ''}`
+            : list.length > 1
+                ? `${index}–${last}`
+                : String(index);
+        const rel = target === '_blank' ? 'noopener noreferrer' : undefined;
+        return (_jsx(HoverCard, { placement: handle.props.placement ?? 'top', openDelay: handle.props.openDelay ?? 300, size: size, renderTrigger: (trigger) => (_jsx("a", { class: "rf-citation", href: first.href, target: target, rel: rel, "data-variant": variant, "data-size": size, "aria-label": label, ...trigger, children: text })), children: _jsx("span", { class: "rf-citation-sources", role: "list", "data-density": size, children: list.map((source, offset) => (_jsxs("span", { class: "rf-citation-source", role: "listitem", children: [_jsxs("span", { class: "rf-citation-meta", children: [_jsx("span", { class: "rf-citation-icon", "aria-hidden": "true", children: source.icon ?? _jsx(Icon, { name: "globe", size: 12 }) }), _jsx("span", { class: "rf-citation-site", children: siteOf(source) }), variant === 'number' && (_jsx("span", { class: "rf-citation-number", children: String(index + offset) }))] }), _jsx("a", { class: "rf-citation-title", href: source.href, target: target, rel: rel, children: source.title }), source.description != null && (_jsx("span", { class: "rf-citation-description", children: source.description }))] }, offset))) }) }));
+    };
+}

package/dist/code-block.css

@@ -0,0 +1,292 @@
+/* CodeBlock: code in a quiet frame, with a header for its file or language
+   and a copy button. Highlighted code from Reflow's own theme takes every
+   colour from the --rf-code-token-* variables below, so it follows the light
+   and dark themes and the accent; other Shiki themes bring their colours
+   inline. Lines carry Shiki's marks: highlighted, diff add and remove,
+   focused, error and warning, and highlighted words. */
+.rf-code-block {
+  --rf-code-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --rf-code-size: 13px;
+  --rf-code-leading: 20px;
+  --rf-code-pad: 16px;
+  --rf-code-foreground: var(--rf-fg);
+  --rf-code-background: transparent;
+  --rf-code-token-keyword: color-mix(in oklab, var(--rf-accent) 78%, var(--rf-fg));
+  --rf-code-token-string: var(--rf-success);
+  --rf-code-token-string-expression: var(--rf-success);
+  --rf-code-token-function: var(--rf-info);
+  --rf-code-token-constant: var(--rf-warning);
+  --rf-code-token-parameter: light-dark(#c2410c, #fdba74);
+  --rf-code-token-comment: var(--rf-muted);
+  --rf-code-token-punctuation: color-mix(in oklab, var(--rf-fg) 62%, transparent);
+  --rf-code-token-link: var(--rf-info);
+  --rf-code-token-inserted: var(--rf-success);
+  --rf-code-token-deleted: var(--rf-danger);
+  --rf-code-token-changed: var(--rf-warning);
+  --rf-code-added: light-dark(#22c55e, var(--rf-success));
+  --rf-code-removed: light-dark(#ef4444, var(--rf-danger));
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-inline-size: 0;
+  margin: 0;
+  overflow: hidden;
+  border-radius: var(--rf-panel-radius);
+  background: var(--rf-surface-2);
+  box-shadow: inset 0 0 0 1px var(--rf-border);
+  color: var(--rf-fg);
+  font: var(--rf-text-body) / var(--rf-leading-body) var(--rf-font);
+}
+.rf-code-block[data-density='compact'],
+[data-density='compact'] .rf-code-block:not([data-density]) {
+  --rf-code-size: 12px;
+  --rf-code-leading: 18px;
+  --rf-code-pad: 12px;
+}
+
+.rf-code-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-block-size: 40px;
+  box-sizing: border-box;
+  padding: 4px 6px 4px var(--rf-code-pad);
+  border-block-end: 1px solid var(--rf-border);
+  color: var(--rf-muted);
+  font-size: var(--rf-text-caption);
+  line-height: var(--rf-leading-caption, 16px);
+}
+/* With only the copy button, the header floats over the code's corner. */
+.rf-code-header:not(:has(.rf-code-filename, .rf-code-language)) {
+  position: absolute;
+  z-index: 1;
+  inset: 6px 6px auto auto;
+  min-block-size: 0;
+  padding: 0;
+  border: 0;
+}
+.rf-code-filename {
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--rf-fg);
+  font-family: var(--rf-code-font);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rf-code-language {
+  font-family: var(--rf-code-font);
+  letter-spacing: 0.02em;
+}
+.rf-code-copy {
+  display: grid;
+  flex: none;
+  place-items: center;
+  inline-size: 28px;
+  block-size: 28px;
+  margin-inline-start: auto;
+  padding: 0;
+  border: 0;
+  border-radius: var(--rf-radius);
+  outline: none;
+  background: transparent;
+  color: var(--rf-muted);
+  cursor: pointer;
+  transition:
+    color var(--rf-fast),
+    background-color var(--rf-fast);
+}
+.rf-code-copy .rf-copy-action {
+  padding: 0;
+  color: inherit;
+}
+.rf-code-copy:focus-visible {
+  box-shadow: 0 0 0 1px var(--rf-accent);
+}
+@media (hover: hover) {
+  .rf-code-copy:hover {
+    background: var(--rf-hover);
+    color: var(--rf-fg);
+  }
+  .rf-code-copy:hover .rf-copy-action svg {
+    stroke-width: 2;
+  }
+}
+.rf-code-block[data-state='copied'] .rf-code-copy {
+  color: var(--rf-fg);
+}
+
+.rf-code-scroll {
+  min-inline-size: 0;
+}
+.rf-code-viewport:focus-visible {
+  outline: 2px solid var(--rf-accent);
+  outline-offset: -2px;
+}
+.rf-code {
+  margin: 0;
+  padding: 12px 0;
+  background: var(--rf-code-background);
+  color: var(--rf-code-foreground);
+  font: var(--rf-code-size) / var(--rf-code-leading) var(--rf-code-font);
+  font-variant-ligatures: none;
+  tab-size: 2;
+}
+.rf-code > code {
+  display: block;
+  inline-size: max-content;
+  min-inline-size: 100%;
+  counter-reset: rf-code-line var(--rf-code-start, 0);
+  font: inherit;
+}
+.rf-code-line {
+  display: inline-flex;
+  box-sizing: border-box;
+  min-inline-size: 100%;
+  padding-inline: var(--rf-code-pad);
+  transition:
+    opacity var(--rf-spring-moderate),
+    filter var(--rf-spring-moderate);
+}
+.rf-code-text {
+  flex: 1;
+  white-space: pre;
+}
+/* Wrapped, everything takes the available width instead of the longest
+   line's, so long lines break inside it. */
+.rf-code-block[data-wrap] .rf-scroll-root .rf-scroll-content {
+  width: 100%;
+}
+.rf-code-block[data-wrap] .rf-code {
+  flex: 1;
+  min-inline-size: 0;
+}
+.rf-code-block[data-wrap] .rf-code > code {
+  inline-size: auto;
+}
+.rf-code-block[data-wrap] .rf-code-line {
+  inline-size: 100%;
+}
+.rf-code-block[data-wrap] .rf-code-text {
+  min-inline-size: 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* Line numbers and diff marks sit in a gutter that selection skips. */
+.rf-code-block[data-line-numbers] .rf-code-line::before {
+  content: counter(rf-code-line);
+  counter-increment: rf-code-line;
+  flex: none;
+  min-inline-size: calc(var(--rf-code-digits, 2) * 1ch);
+  margin-inline-end: 16px;
+  color: var(--rf-muted);
+  opacity: 0.7;
+  text-align: end;
+  user-select: none;
+}
+.rf-code-mark {
+  flex: none;
+  inline-size: 2ch;
+  color: var(--rf-muted);
+  user-select: none;
+}
+
+.rf-code-line.highlighted {
+  background: color-mix(in oklab, var(--rf-accent) 12%, transparent);
+  box-shadow: inset 2px 0 var(--rf-accent);
+}
+.rf-code-line.highlighted.error {
+  background: color-mix(in oklab, var(--rf-code-removed) 14%, transparent);
+  box-shadow: inset 2px 0 var(--rf-code-removed);
+}
+.rf-code-line.highlighted.warning {
+  background: color-mix(in oklab, light-dark(#f59e0b, var(--rf-warning)) 16%, transparent);
+  box-shadow: inset 2px 0 light-dark(#f59e0b, var(--rf-warning));
+}
+.rf-code-line.diff.add {
+  background: color-mix(in oklab, var(--rf-code-added) 13%, transparent);
+}
+.rf-code-line.diff.add .rf-code-mark {
+  color: var(--rf-code-added);
+}
+.rf-code-line.diff.remove {
+  background: color-mix(in oklab, var(--rf-code-removed) 12%, transparent);
+}
+.rf-code-line.diff.remove .rf-code-mark {
+  color: var(--rf-code-removed);
+}
+.rf-code-line.diff.remove .rf-code-text {
+  opacity: 0.75;
+}
+.rf-code .highlighted-word {
+  border-radius: 4px;
+  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);
+}
+/* Focused lines keep the eye; the rest blur until the reader points at or
+   focuses the block. */
+.rf-code-block[data-has-focused] .rf-code-line:not(.focused) {
+  opacity: 0.5;
+  filter: blur(0.06em);
+}
+.rf-code-block[data-has-focused]:is(:hover, :focus-within) .rf-code-line:not(.focused) {
+  opacity: 1;
+  filter: none;
+}
+
+/* A theme with a light and a dark side follows the page between them. */
+.rf-code-block[data-themed] .rf-code[style*='--shiki-light'] {
+  background: light-dark(var(--shiki-light-bg), var(--shiki-dark-bg));
+  color: light-dark(var(--shiki-light), var(--shiki-dark));
+}
+.rf-code-block[data-themed] .rf-code[style*='--shiki-light'] span[style] {
+  color: light-dark(var(--shiki-light), var(--shiki-dark));
+}
+
+/* Folded, the code shows its first lines and fades into the Show all button. */
+.rf-code-block[data-collapsed='true'] .rf-code-viewport {
+  max-block-size: calc(var(--rf-code-max-lines) * var(--rf-code-leading) + 12px);
+  overflow-y: hidden;
+  mask-image: linear-gradient(to bottom, black 55%, transparent);
+}
+.rf-code-toggle {
+  display: block;
+  inline-size: 100%;
+  padding: 8px;
+  border: 0;
+  border-block-start: 1px solid var(--rf-border);
+  outline: none;
+  background: transparent;
+  color: var(--rf-muted);
+  font: inherit;
+  font-size: var(--rf-text-caption);
+  cursor: pointer;
+  transition:
+    color var(--rf-fast),
+    background-color var(--rf-fast);
+}
+.rf-code-toggle:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--rf-accent);
+}
+@media (hover: hover) {
+  .rf-code-toggle:hover {
+    background: var(--rf-hover);
+    color: var(--rf-fg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rf-code-line {
+    transition: none;
+  }
+}
+@media (forced-colors: active) {
+  .rf-code-block {
+    border: 1px solid CanvasText;
+  }
+  .rf-code-line:is(.highlighted, .diff) {
+    outline: 1px solid Highlight;
+    outline-offset: -1px;
+  }
+}

package/dist/code-block.d.ts

@@ -0,0 +1,59 @@
+import { type Handle } from 'remix/component';
+/** One run of text in a highlighted line, with the inline style and classes the highlighter gave it. */
+export interface CodeToken {
+    content: string;
+    style?: string;
+    class?: string;
+}
+/** A highlighted line: its tokens, and marks such as `highlighted`, `diff add`, `diff remove` or `focused`. */
+export interface CodeLine {
+    class?: string;
+    tokens: CodeToken[];
+}
+/**
+ * Code ready to render, as `highlight()` from `@rtzll/reflow/highlight`
+ * returns it. It is plain data, so a route handler can highlight on the
+ * server and hand it to a client entry.
+ */
+export interface HighlightedCode {
+    lang: string;
+    /** The code as shown, with any notation removed. Copy copies this. */
+    code: string;
+    lines: CodeLine[];
+    /** Marks for the whole block: `has-diff`, `has-highlighted`, `has-focused`. */
+    flags: string[];
+    /** The theme's inline style for the block, such as the colours of a light and dark pair. */
+    style?: string;
+}
+export interface CodeBlockProps {
+    /** Plain code, or code from `highlight()`. */
+    code: string | HighlightedCode;
+    /** Shown in the header when there is no filename. Defaults to the highlighted language. */
+    language?: string;
+    filename?: string;
+    /** Names the code region. Defaults to the filename, or the language followed by "code". */
+    label?: string;
+    /** Numbers the lines. Default false. */
+    lineNumbers?: boolean;
+    /** The first line's number. Default 1. */
+    startLine?: number;
+    /** Wraps long lines instead of scrolling them. Default false. */
+    wrap?: boolean;
+    /** Folds longer code to this many lines behind a Show all button. */
+    maxLines?: number;
+    /** Shows the copy button. Default true. */
+    copyable?: boolean;
+    /** Called after the code is copied. */
+    onCopy?: () => void;
+    size?: 'default' | 'compact';
+    class?: string;
+}
+/**
+ * Code in a frame with its filename or language, a copy button, and optional
+ * line numbers, wrapping and folding. It renders plain code as it is, and
+ * code from `highlight()` in `@rtzll/reflow/highlight` with its colours and
+ * line marks: highlighted lines, added and removed lines, focused lines and
+ * highlighted words. It has no dependencies of its own; highlighting runs
+ * wherever you call `highlight()`, ideally on the server.
+ */
+export declare function CodeBlock(handle: Handle<CodeBlockProps>): () => import("remix/component").RemixElement;

package/dist/code-block.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs } from "remix/component/jsx-runtime";
+import { on } from 'remix/component';
+import { Icon } from './icon.js';
+import { ScrollArea } from './scroll-area.js';
+// Highlighters hand over inline styles as text, such as "color:var(--x)".
+function styleObject(style) {
+    if (!style)
+        return undefined;
+    const result = {};
+    for (const declaration of style.split(';')) {
+        const colon = declaration.indexOf(':');
+        if (colon < 1)
+            continue;
+        result[declaration.slice(0, colon).trim()] = declaration.slice(colon + 1).trim();
+    }
+    return result;
+}
+function plain(code) {
+    return {
+        lang: 'text',
+        code,
+        flags: [],
+        lines: code.split('\n').map((line) => ({ tokens: [{ content: line }] })),
+    };
+}
+/**
+ * Code in a frame with its filename or language, a copy button, and optional
+ * line numbers, wrapping and folding. It renders plain code as it is, and
+ * code from `highlight()` in `@rtzll/reflow/highlight` with its colours and
+ * line marks: highlighted lines, added and removed lines, focused lines and
+ * highlighted words. It has no dependencies of its own; highlighting runs
+ * wherever you call `highlight()`, ideally on the server.
+ */
+export function CodeBlock(handle) {
+    let expanded = false;
+    let state = 'idle';
+    // The glyph lags the state by one exit, as InputCopy's does.
+    let glyph = 'idle';
+    let glyphKey = 0;
+    let phase;
+    let request = 0;
+    let reset;
+    let swapTimer;
+    handle.signal.addEventListener('abort', () => {
+        clearTimeout(reset);
+        clearTimeout(swapTimer);
+    }, { once: true });
+    function swap() {
+        clearTimeout(swapTimer);
+        if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            glyph = state;
+            glyphKey++;
+            phase = undefined;
+            void handle.update();
+            return;
+        }
+        phase = 'exit';
+        void handle.update();
+        swapTimer = setTimeout(() => {
+            glyph = state;
+            glyphKey++;
+            phase = 'enter';
+            void handle.update();
+        }, 115);
+    }
+    async function copy(text) {
+        const operation = ++request;
+        clearTimeout(reset);
+        let copied = false;
+        try {
+            await navigator.clipboard.writeText(text);
+            copied = true;
+        }
+        catch {
+            // The code stays selectable when clipboard access is unavailable.
+        }
+        if (handle.signal.aborted || operation !== request)
+            return;
+        state = copied ? 'copied' : 'error';
+        swap();
+        reset = setTimeout(() => {
+            state = 'idle';
+            swap();
+        }, 2000);
+        if (copied)
+            handle.props.onCopy?.();
+    }
+    return () => {
+        const props = handle.props;
+        const source = typeof props.code === 'string' ? plain(props.code) : props.code;
+        const language = props.language ?? (source.lang === 'text' ? undefined : source.lang);
+        const label = props.label ?? props.filename ?? (language ? `${language} code` : 'Code');
+        const copyable = props.copyable ?? true;
+        const folds = props.maxLines !== undefined && source.lines.length > props.maxLines;
+        const collapsed = folds && !expanded;
+        const hasDiff = source.flags.includes('has-diff');
+        const style = {};
+        if (props.startLine !== undefined)
+            style['--rf-code-start'] = String(props.startLine - 1);
+        if (props.lineNumbers)
+            style['--rf-code-digits'] = String(String((props.startLine ?? 1) + source.lines.length - 1).length);
+        if (folds)
+            style['--rf-code-max-lines'] = String(props.maxLines);
+        const feedback = state === 'copied' ? 'Copied' : state === 'error' ? 'Copy failed' : '';
+        return (_jsxs("figure", { class: props.class ? `rf-code-block ${props.class}` : 'rf-code-block', "data-slot": "code-block", "data-state": state, "data-density": props.size, "data-line-numbers": props.lineNumbers || undefined, "data-wrap": props.wrap || undefined, "data-collapsed": folds ? String(collapsed) : undefined, "data-has-diff": hasDiff || undefined, "data-has-highlighted": source.flags.includes('has-highlighted') || undefined, "data-has-focused": source.flags.includes('has-focused') || undefined, "data-themed": source.style ? '' : undefined, style: style, children: [(props.filename || language || copyable) && (_jsxs("figcaption", { class: "rf-code-header", children: [props.filename ? (_jsx("span", { class: "rf-code-filename", children: props.filename })) : (language && _jsx("span", { class: "rf-code-language", children: language })), copyable && (_jsx("button", { type: "button", class: "rf-code-copy", "aria-label": feedback || 'Copy code', mix: on('click', () => void copy(source.code)), children: _jsx("span", { class: "rf-copy-action", "aria-hidden": "true", children: _jsx("span", { class: "rf-copy-glyph", "data-glyph": glyph, "data-phase": phase, children: glyph === 'idle' ? (_jsx(Icon, { name: "copy", size: 14 })) : (_jsx("svg", { viewBox: "2 4 20 16", width: "14", height: "14", fill: "none", "data-result": true, children: _jsx("path", { d: glyph === 'copied' ? 'M6 12L10 16L18 8' : 'M9 9L15 15M15 9L9 15', pathLength: "1" }) })) }, glyphKey) }) })), _jsx("span", { class: "rf-basic-sr-only", "aria-live": "polite", children: feedback })] })), _jsx(ScrollArea, { label: label, orientation: "horizontal", tabIndex: 0, className: "rf-code-scroll", viewportClassName: "rf-code-viewport", fade: false, children: _jsx("pre", { class: "rf-code", style: styleObject(source.style), children: _jsx("code", { children: source.lines.flatMap((line, index) => {
+                                const node = (_jsxs("span", { class: line.class ? `rf-code-line ${line.class}` : 'rf-code-line', children: [hasDiff && (_jsx("span", { class: "rf-code-mark", "aria-hidden": "true", children: /\badd\b/.test(line.class ?? '')
+                                                ? '+'
+                                                : /\bremove\b/.test(line.class ?? '')
+                                                    ? '-'
+                                                    : ' ' })), _jsx("span", { class: "rf-code-text", children: line.tokens.map((token, tokenIndex) => token.style || token.class ? (_jsx("span", { style: styleObject(token.style), class: token.class, children: token.content }, tokenIndex)) : (token.content)) })] }, index));
+                                return index < source.lines.length - 1 ? [node, '\n'] : [node];
+                            }) }) }) }), folds && (_jsx("button", { type: "button", class: "rf-code-toggle", "aria-expanded": !collapsed, mix: on('click', () => {
+                        expanded = !expanded;
+                        void handle.update();
+                    }), children: collapsed ? `Show all ${source.lines.length} lines` : 'Show less' }))] }));
+    };
+}

package/dist/colors.d.ts

@@ -0,0 +1,21 @@
+/** The colours Badge and Avatar share. Internal: not exported from the package. */
+export declare const badgeColors: {
+    readonly accent: 'var(--rf-accent)';
+    readonly gray: '#a3a3a3';
+    readonly red: '#ef4444';
+    readonly orange: '#f97316';
+    readonly amber: '#f59e0b';
+    readonly yellow: '#eab308';
+    readonly lime: '#84cc16';
+    readonly green: '#22c55e';
+    readonly emerald: '#10b981';
+    readonly teal: '#14b8a6';
+    readonly cyan: '#06b6d4';
+    readonly blue: '#3b82f6';
+    readonly indigo: '#6366f1';
+    readonly violet: '#8b5cf6';
+    readonly purple: '#a855f7';
+    readonly fuchsia: '#d946ef';
+    readonly pink: '#ec4899';
+    readonly rose: '#f43f5e';
+};