@getrefino/react 0.1.0-rc.5 → 0.1.0-rc.6

package/dist/ArticleBody.d.ts

@@ -0,0 +1,27 @@
+import type { AllHTMLAttributes, JSX, ReactNode } from "react";
+export type ArticleBodyElement = keyof JSX.IntrinsicElements;
+export interface ArticleBodyProps extends Omit<AllHTMLAttributes<HTMLElement>, "id" | "as" | "children" | "contentEditable" | "dangerouslySetInnerHTML"> {
+    /** The body field's id, e.g. `blog.hello-world.body`. */
+    id: string;
+    /** Element to render. Defaults to `div`; use the element the article already had. */
+    as?: ArticleBodyElement | undefined;
+    /** DOM `id` attribute, since `id` is taken by the field id. */
+    htmlId?: string | undefined;
+    /** The article as the site renders it. Untouched in both modes. */
+    children?: ReactNode | undefined;
+}
+/**
+ * Marks the rendered article body as editable.
+ *
+ * In normal mode this is exactly the element the site already had, with the
+ * site's own rendered Markdown or MDX inside it: no wrapper, no attributes,
+ * no editor code path. In edit mode the same element gains an outline and a
+ * button that opens the source editor for the body.
+ *
+ * A body is not a sentence, so it deliberately does not become
+ * contentEditable the way `EditableText` does. Editing raw Markdown or MDX
+ * in place — next to JSX, imports and fenced code the renderer has already
+ * consumed — would be a different document from the one the reader sees.
+ * The panel edits the source; the page keeps rendering the article.
+ */
+export declare function ArticleBody(props: ArticleBodyProps): JSX.Element;

package/dist/ArticleBody.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { splitDocumentFieldId } from "@getrefino/core";
+import { createElement, useCallback, useSyncExternalStore } from "react";
+import { useCopyContext } from "./context.js";
+/**
+ * Marks the rendered article body as editable.
+ *
+ * In normal mode this is exactly the element the site already had, with the
+ * site's own rendered Markdown or MDX inside it: no wrapper, no attributes,
+ * no editor code path. In edit mode the same element gains an outline and a
+ * button that opens the source editor for the body.
+ *
+ * A body is not a sentence, so it deliberately does not become
+ * contentEditable the way `EditableText` does. Editing raw Markdown or MDX
+ * in place — next to JSX, imports and fenced code the renderer has already
+ * consumed — would be a different document from the one the reader sees.
+ * The panel edits the source; the page keeps rendering the article.
+ */
+export function ArticleBody(props) {
+    const { id, as = "div", htmlId, children, ...rest } = props;
+    const context = useCopyContext();
+    const store = context?.store ?? null;
+    const subscribe = store ? store.subscribe : noopSubscribe;
+    const editing = useSyncExternalStore(subscribe, () => store?.getState().editing ?? false, () => false);
+    if (!store || !editing) {
+        return createElement(as, { ...rest, id: htmlId }, children);
+    }
+    return (_jsx(EditableArticleBody, { id: id, as: as, htmlId: htmlId, rest: rest, store: store, children: children }));
+}
+function noopSubscribe() {
+    return () => { };
+}
+function EditableArticleBody({ id, as, htmlId, rest, store, children }) {
+    const documentId = useSyncExternalStore(store.subscribe, () => splitDocumentFieldId(store.getState().documentIds, id)?.documentId ?? null, () => null);
+    const dirty = useSyncExternalStore(store.subscribe, () => store.isDirty(id), () => false);
+    const open = useCallback(() => {
+        if (documentId)
+            store.openPanel({ kind: "body", documentId });
+    }, [documentId, store]);
+    if (!documentId) {
+        return createElement(as, { ...rest, id: htmlId }, children);
+    }
+    return createElement(as, {
+        ...rest,
+        id: htmlId,
+        "data-refino-body": id,
+        "data-refino-state": dirty ? "dirty" : "idle",
+    }, _jsx("button", { type: "button", className: "refino-body__edit", onClick: open, children: dirty ? "Edit article body — unsaved" : "Edit article body" }), children);
+}

package/dist/ArticlePanel.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from "react";
+/**
+ * The two editing surfaces that are not the rendered page: the article's
+ * metadata, and the article's source body. Rendered once by the provider,
+ * over the page, and only while edit mode is on.
+ */
+export declare function ArticlePanel(): JSX.Element | null;

package/dist/ArticlePanel.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BODY_FIELD_ID, META_FIELD_PREFIX, documentFieldId } from "@getrefino/core";
+import { useCallback, useEffect, useRef, useSyncExternalStore } from "react";
+import { useCopyEditorState, useCopyStoreOrThrow } from "./context.js";
+const LABELS = {
+    title: "Title",
+    subtitle: "Subtitle",
+    excerpt: "Excerpt",
+    description: "Description",
+    seoTitle: "SEO title",
+    seoDescription: "SEO description",
+    author: "Author",
+    date: "Date",
+    ctaLabel: "CTA label",
+    ctaText: "CTA text",
+};
+/** Fields that are usually a sentence or two rather than a line. */
+const MULTILINE = new Set(["excerpt", "description", "seoDescription"]);
+function fieldName(field) {
+    return field.id.startsWith(META_FIELD_PREFIX) ? field.id.slice(META_FIELD_PREFIX.length) : field.id;
+}
+function labelFor(field) {
+    const name = fieldName(field);
+    return LABELS[name] ?? name.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (char) => char.toUpperCase());
+}
+/**
+ * The two editing surfaces that are not the rendered page: the article's
+ * metadata, and the article's source body. Rendered once by the provider,
+ * over the page, and only while edit mode is on.
+ */
+export function ArticlePanel() {
+    const { store } = useCopyStoreOrThrow();
+    const state = useCopyEditorState(store);
+    const panel = state.panel;
+    const article = panel ? state.documents[panel.documentId] : undefined;
+    const close = useCallback(() => store.closePanel(), [store]);
+    useEffect(() => {
+        if (!panel || typeof window === "undefined")
+            return;
+        const onKeyDown = (event) => {
+            if (event.key === "Escape") {
+                event.stopPropagation();
+                store.closePanel();
+            }
+        };
+        window.addEventListener("keydown", onKeyDown, true);
+        return () => window.removeEventListener("keydown", onKeyDown, true);
+    }, [panel, store]);
+    if (!panel || !article)
+        return null;
+    const heading = panel.kind === "body" ? "Article body" : "Article metadata";
+    return (_jsxs("div", { className: "refino-panel", role: "dialog", "aria-modal": "false", "aria-label": heading, children: [_jsxs("div", { className: "refino-panel__head", children: [_jsxs("div", { children: [_jsx("strong", { className: "refino-panel__title", children: heading }), article.path && (_jsx("span", { className: "refino-panel__path", title: article.path, children: article.path }))] }), _jsx("button", { type: "button", className: "refino-panel__close", onClick: close, children: "Done" })] }), panel.kind === "body" ? _jsx(BodyEditor, { article: article }) : _jsx(MetadataEditor, { article: article })] }));
+}
+/** One field of the draft, subscribed to on its own so typing re-renders one input. */
+function useField(id) {
+    const { store } = useCopyStoreOrThrow();
+    const value = useSyncExternalStore(store.subscribe, () => store.getValue(id) ?? "", () => store.getValue(id) ?? "");
+    const dirty = useSyncExternalStore(store.subscribe, () => store.isDirty(id), () => false);
+    return { value, dirty };
+}
+function BodyEditor({ article }) {
+    const { store } = useCopyStoreOrThrow();
+    const id = documentFieldId(article.documentId, BODY_FIELD_ID);
+    const { value, dirty } = useField(id);
+    const field = article.fields.find((candidate) => candidate.id === BODY_FIELD_ID);
+    const textarea = useRef(null);
+    useEffect(() => {
+        textarea.current?.focus();
+    }, []);
+    if (field && !field.editable) {
+        return (_jsx("div", { className: "refino-panel__body", children: _jsxs("p", { className: "refino-panel__notice", role: "alert", children: ["Refino cannot edit this article\u2019s body: ", field.reason, ". Nothing has been changed."] }) }));
+    }
+    return (_jsxs("div", { className: "refino-panel__body", children: [_jsxs("p", { className: "refino-panel__hint", children: ["This is the article\u2019s ", article.sourceType === "mdx" ? "MDX" : "Markdown", " source, exactly as it is in", " ", article.path ?? "the repository", ". Components, imports, expressions and code fences are saved back unchanged; edit the prose around them."] }), _jsx("textarea", { ref: textarea, className: "refino-panel__source", spellCheck: false, value: value, "aria-label": "Article source", onChange: (event) => store.setValue(id, event.target.value) }), _jsxs("div", { className: "refino-panel__actions", children: [_jsx("span", { className: "refino-panel__state", children: dirty ? "This body has unsaved changes" : "This body is unchanged" }), _jsx("button", { type: "button", className: "refino-toolbar__button", onClick: () => store.revertValue(id), disabled: !dirty, children: "Revert body" })] })] }));
+}
+function MetadataEditor({ article }) {
+    const { store } = useCopyStoreOrThrow();
+    const fields = article.fields.filter((field) => field.id !== BODY_FIELD_ID);
+    if (fields.length === 0) {
+        return (_jsx("div", { className: "refino-panel__body", children: _jsxs("p", { className: "refino-panel__notice", children: ["Refino found no metadata it recognizes in this article\u2019s frontmatter. Map the fields you want in the ", _jsx("code", { children: "content" }), " block of ", _jsx("code", { children: "refino.config.json" }), "."] }) }));
+    }
+    return (_jsxs("div", { className: "refino-panel__body", children: [_jsx("div", { className: "refino-panel__fields", children: fields.map((field) => (_jsx(MetadataField, { article: article, field: field }, field.id))) }), _jsxs("div", { className: "refino-panel__actions", children: [_jsx("span", { className: "refino-panel__state", children: "Every other frontmatter key in this file is left exactly as it is." }), _jsx("button", { type: "button", className: "refino-toolbar__button", onClick: () => {
+                            for (const field of fields)
+                                store.revertValue(documentFieldId(article.documentId, field.id));
+                        }, children: "Revert metadata" })] })] }));
+}
+function MetadataField({ article, field }) {
+    const { store } = useCopyStoreOrThrow();
+    const id = documentFieldId(article.documentId, field.id);
+    const { value, dirty } = useField(id);
+    const name = fieldName(field);
+    return (_jsxs("label", { className: "refino-panel__field", "data-refino-state": dirty ? "dirty" : "idle", children: [_jsxs("span", { className: "refino-panel__label", children: [labelFor(field), field.key && _jsx("code", { className: "refino-panel__key", children: field.key })] }), MULTILINE.has(name) ? (_jsx("textarea", { className: "refino-panel__input refino-panel__input--multiline", value: value, disabled: !field.editable, onChange: (event) => store.setValue(id, event.target.value) })) : (_jsx("input", { type: "text", className: "refino-panel__input", value: value, disabled: !field.editable, onChange: (event) => store.setValue(id, event.target.value) })), !field.editable && _jsxs("span", { className: "refino-panel__reason", children: ["Read-only: ", field.reason, "."] })] }));
+}

package/dist/RefinoArticle.d.ts

@@ -0,0 +1,37 @@
+import type { FieldId } from "@getrefino/core";
+import type { JSX } from "react";
+export interface RefinoArticleProps {
+    /**
+     * The article's id, e.g. `blog.hello-world`. Produced by
+     * `documentIdForPath` in `@getrefino/core/documents` from the source path
+     * the page already knows. A path is never sent to the server.
+     */
+    documentId: string;
+    /**
+     * The field values this page rendered the article with, e.g.
+     * `{ "meta.title": post.title, body: post.body }`. Edit mode shows these
+     * until the canonical version has loaded, and keeps them for fields
+     * Refino can read but not write.
+     */
+    fields: Readonly<Record<FieldId, string>>;
+}
+/**
+ * Declares that this page renders an article, so the editor can load it,
+ * hold a draft of it and save it.
+ *
+ * It renders nothing. Put it in the article page, wherever is convenient —
+ * the provider usually lives in the root layout, which cannot know which
+ * article a route is showing, and this is how the page tells it.
+ *
+ * Registration happens on mount, which is after the server rendered the
+ * page, so give each `EditableText` for an article field the page's own
+ * value as its child:
+ *
+ * ```tsx
+ * <EditableText id={`${documentId}.meta.title`} as="h1">{fields["meta.title"]}</EditableText>
+ * ```
+ *
+ * The server-rendered HTML is then already correct, and the editor replaces
+ * it with the canonical value once it has loaded. Both are the same file.
+ */
+export declare function RefinoArticle({ documentId, fields }: RefinoArticleProps): JSX.Element | null;

package/dist/RefinoArticle.js

@@ -0,0 +1,43 @@
+"use client";
+import { useEffect, useMemo } from "react";
+import { useCopyContext } from "./context.js";
+/**
+ * Declares that this page renders an article, so the editor can load it,
+ * hold a draft of it and save it.
+ *
+ * It renders nothing. Put it in the article page, wherever is convenient —
+ * the provider usually lives in the root layout, which cannot know which
+ * article a route is showing, and this is how the page tells it.
+ *
+ * Registration happens on mount, which is after the server rendered the
+ * page, so give each `EditableText` for an article field the page's own
+ * value as its child:
+ *
+ * ```tsx
+ * <EditableText id={`${documentId}.meta.title`} as="h1">{fields["meta.title"]}</EditableText>
+ * ```
+ *
+ * The server-rendered HTML is then already correct, and the editor replaces
+ * it with the canonical value once it has loaded. Both are the same file.
+ */
+export function RefinoArticle({ documentId, fields }) {
+    const context = useCopyContext();
+    const store = context?.store ?? null;
+    // Registration is by value: a client-side navigation to another article
+    // re-registers, and a re-render with the same values does nothing.
+    const signature = useMemo(() => JSON.stringify([
+        documentId,
+        Object.keys(fields)
+            .sort()
+            .map((key) => [key, fields[key]]),
+    ]), [documentId, fields]);
+    useEffect(() => {
+        if (!store)
+            return;
+        store.addDocument({ documentId, fields });
+        return () => store.removeDocument(documentId);
+        // `signature` stands in for `fields`, which is a fresh object every render.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [store, documentId, signature]);
+    return null;
+}

package/dist/RefinoProvider.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getDirtyIds } from "@getrefino/core";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { CopyContext } from "./context.js";
+import { ArticlePanel } from "./ArticlePanel.js";
 import { createCopyStore } from "./store.js";
 import { EDITOR_STYLES } from "./styles.js";
 import { CopyEditorToolbar } from "./Toolbar.js";
@@ -26,11 +27,27 @@ export function RefinoProvider(props) {
     useEffect(() => {
         store.setBaseContent(content);
     }, [content, store]);
+    /**
+     * Load the canonical copy once per editing session, and again when the
+     * articles on the page change (a client-side navigation to another post).
+     *
+     * Articles register from `<RefinoArticle>`, whose effect runs before this
+     * one on mount, so the first request already names them and the page is
+     * loaded in one round trip rather than two.
+     */
+    const documentKey = useSyncExternalStore(store.subscribe, () => store.getState().documentIds.join(","), () => "");
+    const loadedKey = useRef(null);
     useEffect(() => {
-        if (!editing)
+        if (!editing) {
+            loadedKey.current = null;
             return;
+        }
+        const key = store.getState().documentIds.join(",");
+        if (loadedKey.current === key)
+            return;
+        loadedKey.current = key;
         void store.load();
-    }, [editing, store]);
+    }, [editing, store, documentKey]);
     useEffect(() => {
         if (!editing || typeof window === "undefined")
             return;
@@ -54,5 +71,5 @@ export function RefinoProvider(props) {
         };
     }, [editing, store]);
     const value = useMemo(() => ({ store, onExit, signInHref, updates }), [store, onExit, signInHref, updates]);
-    return (_jsxs(CopyContext.Provider, { value: value, children: [children, editing && (_jsxs(_Fragment, { children: [_jsx("style", { "data-refino-styles": "", children: EDITOR_STYLES }), toolbar && _jsx(CopyEditorToolbar, {})] }))] }));
+    return (_jsxs(CopyContext.Provider, { value: value, children: [children, editing && (_jsxs(_Fragment, { children: [_jsx("style", { "data-refino-styles": "", children: EDITOR_STYLES }), _jsx(ArticlePanel, {}), toolbar && _jsx(CopyEditorToolbar, {})] }))] }));
 }

package/dist/Toolbar.js

@@ -15,7 +15,10 @@ function plural(count, word) {
  */
 export function CopyEditorToolbar() {
     const editor = useCopyEditor();
-    const { state, dirtyIds } = editor;
+    const { state, dirtyIds, articles } = editor;
+    // V1 edits the article the page is showing. A page with several is
+    // supported by the model; the toolbar simply offers the first.
+    const article = articles[0];
     const dirtyCount = dirtyIds.length;
     const activeDirty = state.activeId !== null && dirtyIds.includes(state.activeId);
     const busy = state.status === "saving" || state.status === "loading";
@@ -53,5 +56,7 @@ export function CopyEditorToolbar() {
             statusText = dirtyCount > 0 ? `${plural(dirtyCount, "unsaved change")}` : "No changes";
             dotClass = dirtyCount > 0 ? "dirty" : "";
     }
-    return (_jsxs("div", { className: "refino-toolbar", role: "region", "aria-label": "Copy editor", children: [_jsx("p", { id: INSTRUCTIONS_ID, className: "refino-sr-only", children: "Editable text. Type to change it. Press Enter to finish or Escape to cancel this edit." }), _jsx(UpdatePanel, { control: update, saving: state.status === "saving", buttonRef: updateButtonRef }), state.status === "conflict" && (_jsxs("div", { className: "refino-toolbar__notice refino-toolbar__notice--conflict", role: "alert", children: [_jsx("p", { children: "The copy file changed in the repository while you were editing (an AI agent or developer probably pushed). Your edits were not saved and nothing was overwritten." }), _jsxs("p", { children: ["Reload the latest copy and your ", plural(dirtyCount, "unsaved edit"), " will be reapplied on top of it for you to review and save again."] })] })), state.status === "error" && state.error && (_jsxs("div", { className: "refino-toolbar__notice refino-toolbar__notice--error", role: "alert", children: [_jsx("p", { children: state.error.message }), _jsxs("p", { children: [_jsx("code", { children: state.error.code }), state.error.code === "UNAUTHORIZED" && (_jsxs(_Fragment, { children: [" ", _jsx("a", { className: "refino-toolbar__link", href: editor.signInHref, children: "Sign in again" })] }))] })] })), state.rebase && (_jsxs("div", { className: "refino-toolbar__notice", role: "status", children: [state.rebase.overlapping.length > 0 && (_jsxs("p", { children: ["Both you and the repository changed:", " ", state.rebase.overlapping.map((id, index) => (_jsxs("span", { children: [index > 0 ? ", " : "", _jsx("code", { children: id })] }, id))), ". Your wording is shown; review before saving."] })), state.rebase.dropped.length > 0 && (_jsxs("p", { children: ["Dropped edits for fields that no longer exist:", " ", state.rebase.dropped.map((id, index) => (_jsxs("span", { children: [index > 0 ? ", " : "", _jsx("code", { children: id })] }, id))), "."] }))] })), _jsxs("div", { className: "refino-toolbar__bar", role: "toolbar", "aria-label": "Copy editor controls", children: [_jsxs("span", { className: "refino-toolbar__status", "aria-live": "polite", children: [_jsx("span", { className: `refino-toolbar__dot${dotClass ? ` refino-toolbar__dot--${dotClass}` : ""}` }), statusText, state.status === "saved" && state.lastSave?.commitUrl && (_jsxs(_Fragment, { children: [" ", _jsx("a", { className: "refino-toolbar__link", href: state.lastSave.commitUrl, target: "_blank", rel: "noreferrer", children: "view commit" })] }))] }), state.activeId && (_jsx("span", { className: "refino-toolbar__key", title: state.activeId, children: state.activeId })), state.status === "conflict" ? (_jsx("button", { type: "button", className: "refino-toolbar__button refino-toolbar__button--primary", onClick: () => void editor.reloadLatest(), children: "Reload latest" })) : (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "refino-toolbar__button", onMouseDown: (event) => event.preventDefault(), onClick: onRevertSelected, disabled: !activeDirty || busy, title: "Revert the selected text to its saved value", children: "Revert" }), _jsx("button", { type: "button", className: "refino-toolbar__button", onClick: editor.revertAll, disabled: dirtyCount === 0 || busy, title: "Discard all unsaved changes", children: "Revert all" }), _jsx("button", { type: "button", className: "refino-toolbar__button refino-toolbar__button--primary", onClick: () => void editor.save(), disabled: dirtyCount === 0 || busy || !state.loaded, title: "Save all changes (Ctrl/Cmd+S)", children: state.status === "saving" ? "Saving…" : "Save" })] })), _jsx(UpdateButton, { control: update, buttonRef: updateButtonRef }), _jsx("button", { type: "button", className: "refino-toolbar__button", onClick: () => void editor.exit(), disabled: busy, children: "Exit" })] })] }));
+    return (_jsxs("div", { className: "refino-toolbar", role: "region", "aria-label": "Copy editor", children: [_jsx("p", { id: INSTRUCTIONS_ID, className: "refino-sr-only", children: "Editable text. Type to change it. Press Enter to finish or Escape to cancel this edit." }), _jsx(UpdatePanel, { control: update, saving: state.status === "saving", buttonRef: updateButtonRef }), state.status === "conflict" && (_jsxs("div", { className: "refino-toolbar__notice refino-toolbar__notice--conflict", role: "alert", children: [_jsx("p", { children: "The copy file changed in the repository while you were editing (an AI agent or developer probably pushed). Your edits were not saved and nothing was overwritten." }), _jsxs("p", { children: ["Reload the latest copy and your ", plural(dirtyCount, "unsaved edit"), " will be reapplied on top of it for you to review and save again."] })] })), state.status === "error" && state.error && (_jsxs("div", { className: "refino-toolbar__notice refino-toolbar__notice--error", role: "alert", children: [_jsx("p", { children: state.error.message }), _jsxs("p", { children: [_jsx("code", { children: state.error.code }), state.error.code === "UNAUTHORIZED" && (_jsxs(_Fragment, { children: [" ", _jsx("a", { className: "refino-toolbar__link", href: editor.signInHref, children: "Sign in again" })] }))] })] })), state.rebase && (_jsxs("div", { className: "refino-toolbar__notice", role: "status", children: [state.rebase.overlapping.length > 0 && (_jsxs("p", { children: ["Both you and the repository changed:", " ", state.rebase.overlapping.map((id, index) => (_jsxs("span", { children: [index > 0 ? ", " : "", _jsx("code", { children: id })] }, id))), ". Your wording is shown; review before saving."] })), state.rebase.dropped.length > 0 && (_jsxs("p", { children: ["Dropped edits for fields that no longer exist:", " ", state.rebase.dropped.map((id, index) => (_jsxs("span", { children: [index > 0 ? ", " : "", _jsx("code", { children: id })] }, id))), "."] }))] })), _jsxs("div", { className: "refino-toolbar__bar", role: "toolbar", "aria-label": "Copy editor controls", children: [_jsxs("span", { className: "refino-toolbar__status", "aria-live": "polite", children: [_jsx("span", { className: `refino-toolbar__dot${dotClass ? ` refino-toolbar__dot--${dotClass}` : ""}` }), statusText, state.status === "saved" && state.lastSave?.commitUrl && (_jsxs(_Fragment, { children: [" ", _jsx("a", { className: "refino-toolbar__link", href: state.lastSave.commitUrl, target: "_blank", rel: "noreferrer", children: "view commit" })] }))] }), article && state.status !== "conflict" && (_jsx("button", { type: "button", className: "refino-toolbar__button", onClick: () => state.panel?.kind === "metadata"
+                            ? editor.closePanel()
+                            : editor.openPanel({ kind: "metadata", documentId: article.documentId }), "aria-pressed": state.panel?.kind === "metadata", title: "Edit this article's title, excerpt, SEO fields and dates", children: "Article metadata" })), state.activeId && (_jsx("span", { className: "refino-toolbar__key", title: state.activeId, children: state.activeId })), state.status === "conflict" ? (_jsx("button", { type: "button", className: "refino-toolbar__button refino-toolbar__button--primary", onClick: () => void editor.reloadLatest(), children: "Reload latest" })) : (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "refino-toolbar__button", onMouseDown: (event) => event.preventDefault(), onClick: onRevertSelected, disabled: !activeDirty || busy, title: "Revert the selected text to its saved value", children: "Revert" }), _jsx("button", { type: "button", className: "refino-toolbar__button", onClick: editor.revertAll, disabled: dirtyCount === 0 || busy, title: "Discard all unsaved changes", children: "Revert all" }), _jsx("button", { type: "button", className: "refino-toolbar__button refino-toolbar__button--primary", onClick: () => void editor.save(), disabled: dirtyCount === 0 || busy || !state.loaded, title: "Save all changes (Ctrl/Cmd+S)", children: state.status === "saving" ? "Saving…" : "Save" })] })), _jsx(UpdateButton, { control: update, buttonRef: updateButtonRef }), _jsx("button", { type: "button", className: "refino-toolbar__button", onClick: () => void editor.exit(), disabled: busy, children: "Exit" })] })] }));
 }

package/dist/index.d.ts

@@ -5,9 +5,13 @@ export type { EditableTextElement, EditableTextProps } from "./EditableText.js";
 export { CopyEditorToolbar } from "./Toolbar.js";
 export { useCopyEditor } from "./useCopyEditor.js";
 export type { CopyEditor } from "./useCopyEditor.js";
+export { ArticleBody } from "./ArticleBody.js";
+export type { ArticleBodyElement, ArticleBodyProps } from "./ArticleBody.js";
+export { RefinoArticle } from "./RefinoArticle.js";
+export type { RefinoArticleProps } from "./RefinoArticle.js";
 export { createCopyStore } from "./store.js";
-export type { CopyEditorState, CopyRequestHeaders, CopyStore, CopyStoreOptions, EditorError, EditorStatus, LastSave, RebaseInfo, } from "./store.js";
-export type { EditorEvent, EditorEventName, EditorEventProperties, EditorEventSink } from "./telemetry.js";
+export type { ArticleDocument, ArticleState, CopyEditorState, EditorPanel, CopyRequestHeaders, CopyStore, CopyStoreOptions, EditorError, EditorStatus, LastSave, RebaseInfo, } from "./store.js";
+export type { EditorEvent, EditorEventName, EditorEventProperties, EditorEventSink, EditorSurface, } from "./telemetry.js";
 export { readUpdateResult, readUpdateStatus } from "./updates.js";
 export type { IntegrationUpdateResult, IntegrationUpdateSource, IntegrationUpdateStatus, UpdateUrgency } from "./updates.js";
 export { EDITOR_STYLES } from "./styles.js";

package/dist/index.js

@@ -2,6 +2,8 @@ export { RefinoProvider } from "./RefinoProvider.js";
 export { EditableText } from "./EditableText.js";
 export { CopyEditorToolbar } from "./Toolbar.js";
 export { useCopyEditor } from "./useCopyEditor.js";
+export { ArticleBody } from "./ArticleBody.js";
+export { RefinoArticle } from "./RefinoArticle.js";
 export { createCopyStore } from "./store.js";
 export { readUpdateResult, readUpdateStatus } from "./updates.js";
 export { EDITOR_STYLES } from "./styles.js";

package/dist/store.d.ts

@@ -1,4 +1,4 @@
-import type { ContentId, ContentSnapshot, CopyContent, DraftState } from "@getrefino/core";
+import type { ContentId, ContentSnapshot, ContentSourceType, CopyContent, DocumentFieldInfo, DocumentId, DraftState, FieldId } from "@getrefino/core";
 import type { EditorEventSink } from "./telemetry.js";
 export type EditorStatus = "idle" | "loading" | "saving" | "saved" | "error" | "conflict";
 export interface EditorError {
@@ -14,6 +14,32 @@ export interface RebaseInfo {
     readonly overlapping: readonly ContentId[];
     readonly dropped: readonly ContentId[];
 }
+/**
+ * An article rendered on this page, with the field values it rendered with.
+ * The page already read the file; passing those values means normal mode
+ * needs no editor code path and edit mode has something to show before the
+ * canonical version has loaded.
+ */
+export interface ArticleDocument {
+    readonly documentId: DocumentId;
+    /** e.g. `{ "meta.title": "…", "meta.excerpt": "…", body: "…" }`. */
+    readonly fields: Readonly<Record<FieldId, string>>;
+}
+/** What the editor knows about one article. */
+export interface ArticleState {
+    readonly documentId: DocumentId;
+    /** Null until the canonical article has loaded; a save is refused without it. */
+    readonly revision: string | null;
+    readonly path: string | null;
+    readonly sourceType: ContentSourceType | null;
+    /** Empty until loaded. Includes fields Refino can read but not write. */
+    readonly fields: readonly DocumentFieldInfo[];
+}
+/** Which editing surface is open on top of the page. */
+export interface EditorPanel {
+    readonly kind: "body" | "metadata";
+    readonly documentId: DocumentId;
+}
 /**
  * Everything the editor UI needs. Plain data, replaced immutably on every
  * change so React's `useSyncExternalStore` can subscribe to slices of it.
@@ -21,7 +47,7 @@ export interface RebaseInfo {
 export interface CopyEditorState {
     readonly editing: boolean;
     readonly draft: DraftState;
-    /** Revision the draft is based on; null until the canonical copy has loaded. */
+    /** Revision the copy file draft is based on; null until the canonical copy has loaded. */
     readonly revision: string | null;
     readonly loaded: boolean;
     readonly status: EditorStatus;
@@ -31,6 +57,10 @@ export interface CopyEditorState {
     readonly activeId: ContentId | null;
     readonly lastSave: LastSave | null;
     readonly rebase: RebaseInfo | null;
+    /** Articles on this page, in the order the host declared them. */
+    readonly documentIds: readonly DocumentId[];
+    readonly documents: Readonly<Record<DocumentId, ArticleState>>;
+    readonly panel: EditorPanel | null;
 }
 export type CopyRequestHeaders = Readonly<Record<string, string>> | (() => Readonly<Record<string, string>>);
 export interface CopyStoreOptions {
@@ -63,7 +93,16 @@ export interface CopyStore {
     setActive(id: ContentId | null): void;
     /** Replace base content in normal mode (host re-rendered with new props). */
     setBaseContent(content: CopyContent): void;
+    /**
+     * Declare an article rendered on this page. Idempotent, so a component may
+     * call it on every mount; `<RefinoArticle>` does exactly that.
+     */
+    addDocument(document: ArticleDocument): void;
+    /** Withdraw an article: the page navigated away from it. */
+    removeDocument(documentId: DocumentId): void;
     setEditing(editing: boolean): void;
+    openPanel(panel: EditorPanel): void;
+    closePanel(): void;
     load(): Promise<void>;
     save(): Promise<void>;
     /** After a conflict: move the draft onto the latest upstream copy. */

package/dist/store.js

@@ -1,4 +1,20 @@
-import { createDraft, getDirtyIds, getDraftValue, hasCopy, isDraftValueDirty, rebaseDraft, revertAllDraft, revertDraftValue, setDraftValue, } from "@getrefino/core";
+import { BODY_FIELD_ID, createDraft, documentFieldId, getDirtyIds, getDraftValue, hasCopy, isDraftValueDirty, rebaseDraft, revertAllDraft, revertDraftValue, setDraftValue, splitDocumentFieldId, } from "@getrefino/core";
+/** The flat ids one article's rendered values are held under. */
+function initialFieldValues(document) {
+    const values = {};
+    for (const [fieldId, value] of Object.entries(document.fields)) {
+        values[documentFieldId(document.documentId, fieldId)] = value;
+    }
+    return values;
+}
+function sameFields(a, b) {
+    const aKeys = Object.keys(a.fields);
+    const bKeys = Object.keys(b.fields);
+    return aKeys.length === bKeys.length && aKeys.every((key) => a.fields[key] === b.fields[key]);
+}
+function emptyArticleState(documentId) {
+    return { documentId, revision: null, path: null, sourceType: null, fields: [] };
+}
 export function createCopyStore(options) {
     const doFetch = options.fetch ?? ((...args) => globalThis.fetch(...args));
     const listeners = new Set();
@@ -18,6 +34,12 @@ export function createCopyStore(options) {
      * back must.
      */
     let openedReported = false;
+    /** The last canonical copy, and the last canonical articles, kept apart so
+     * either can be refreshed without discarding the other. */
+    let copyContent = options.content;
+    /** What the page rendered each article with, by article. */
+    const declared = new Map();
+    let initialFields = {};
     function report(event) {
         const sink = options.onEvent;
         if (!sink)
@@ -43,20 +65,74 @@ export function createCopyStore(options) {
         activeId: null,
         lastSave: null,
         rebase: null,
+        documentIds: [],
+        documents: {},
+        panel: null,
     };
     function update(patch) {
         state = { ...state, ...patch };
         for (const listener of listeners)
             listener();
     }
+    /**
+     * The draft's base: the canonical copy, then every article field. A field
+     * Refino can read but not write keeps whatever the page rendered with, so
+     * edit mode never shows a placeholder where the article shows a value.
+     */
+    function mergedBase(documents) {
+        const base = { ...copyContent, ...initialFields };
+        for (const article of Object.values(documents)) {
+            for (const field of article.fields) {
+                const id = documentFieldId(article.documentId, field.id);
+                if (field.editable || !(id in initialFields))
+                    base[id] = field.value;
+            }
+        }
+        return base;
+    }
+    function rebuildDraft(documents, keepChanges) {
+        const base = mergedBase(documents);
+        if (!keepChanges) {
+            update({ documents, draft: createDraft(base), rebase: null });
+            return;
+        }
+        const result = rebaseDraft(state.draft, base);
+        update({
+            documents,
+            draft: result.draft,
+            rebase: result.overlapping.length > 0 || result.dropped.length > 0
+                ? { overlapping: result.overlapping, dropped: result.dropped }
+                : null,
+        });
+    }
+    function articleStatesFrom(snapshots) {
+        const documents = { ...state.documents };
+        for (const snapshot of snapshots) {
+            documents[snapshot.documentId] = {
+                documentId: snapshot.documentId,
+                revision: snapshot.revision,
+                path: snapshot.path,
+                sourceType: snapshot.sourceType,
+                fields: snapshot.fields,
+            };
+        }
+        return documents;
+    }
     function extraHeaders() {
         const headers = options.headers;
         return typeof headers === "function" ? headers() : (headers ?? {});
     }
-    async function request(init) {
+    /** The load URL: the endpoint, plus the articles this page is showing. */
+    function loadUrl() {
+        if (state.documentIds.length === 0)
+            return options.endpoint;
+        const separator = options.endpoint.includes("?") ? "&" : "?";
+        return `${options.endpoint}${separator}documents=${encodeURIComponent(state.documentIds.join(","))}`;
+    }
+    async function request(url, init) {
         let response;
         try {
-            response = await doFetch(options.endpoint, {
+            response = await doFetch(url, {
                 credentials: "same-origin",
                 ...init,
                 headers: { accept: "application/json", ...extraHeaders(), ...(init?.headers ?? {}) },
@@ -87,21 +163,17 @@ export function createCopyStore(options) {
             },
         };
     }
-    function applySnapshot(snapshot, keepChanges) {
-        if (keepChanges) {
-            const result = rebaseDraft(state.draft, snapshot.content);
-            update({
-                draft: result.draft,
-                revision: snapshot.revision,
-                loaded: true,
-                rebase: result.overlapping.length > 0 || result.dropped.length > 0
-                    ? { overlapping: result.overlapping, dropped: result.dropped }
-                    : null,
-            });
-        }
-        else {
-            update({ draft: createDraft(snapshot.content), revision: snapshot.revision, loaded: true, rebase: null });
-        }
+    function applySnapshot(snapshot, documents, keepChanges) {
+        copyContent = snapshot.content;
+        update({ revision: snapshot.revision, loaded: true });
+        rebuildDraft(documents ? articleStatesFrom(documents) : state.documents, keepChanges);
+    }
+    /** Which surface an id is edited on. A low-cardinality enum, never the id. */
+    function surfaceOf(id) {
+        const split = splitDocumentFieldId(state.documentIds, id);
+        if (!split)
+            return "inline_copy";
+        return split.fieldId === BODY_FIELD_ID ? "article_body" : "article_metadata";
     }
     return {
         getState: () => state,
@@ -122,13 +194,14 @@ export function createCopyStore(options) {
             // The transition from a clean draft to a dirty one, not every
             // keystroke: typing a word produces one event, not twenty.
             const started = dirtyCount(state.draft) === 0 && dirtyCount(draft) > 0;
+            const surface = surfaceOf(id);
             update({
                 draft,
                 status: state.status === "saved" || state.status === "error" ? "idle" : state.status,
                 error: state.status === "error" ? null : state.error,
             });
             if (started)
-                report({ name: "edit_started", properties: {} });
+                report({ name: "edit_started", properties: { edit_surface: surface } });
         },
         revertValue(id) {
             const draft = revertDraftValue(state.draft, id);
@@ -150,7 +223,38 @@ export function createCopyStore(options) {
         setBaseContent(content) {
             if (state.editing)
                 return;
-            update({ draft: createDraft(content) });
+            copyContent = content;
+            update({ draft: createDraft(mergedBase(state.documents)) });
+        },
+        addDocument(document) {
+            const existing = declared.get(document.documentId);
+            if (existing && sameFields(existing, document))
+                return;
+            declared.set(document.documentId, document);
+            initialFields = { ...initialFields, ...initialFieldValues(document) };
+            const documents = { ...state.documents };
+            documents[document.documentId] ??= emptyArticleState(document.documentId);
+            const documentIds = state.documentIds.includes(document.documentId)
+                ? state.documentIds
+                : [...state.documentIds, document.documentId];
+            update({ documentIds });
+            // Unsaved work on another article on the same page is kept.
+            rebuildDraft(documents, true);
+        },
+        removeDocument(documentId) {
+            if (!declared.has(documentId))
+                return;
+            declared.delete(documentId);
+            initialFields = {};
+            for (const document of declared.values())
+                Object.assign(initialFields, initialFieldValues(document));
+            const documents = { ...state.documents };
+            delete documents[documentId];
+            update({
+                documentIds: state.documentIds.filter((id) => id !== documentId),
+                panel: state.panel?.documentId === documentId ? null : state.panel,
+            });
+            rebuildDraft(documents, true);
         },
         setEditing(editing) {
             if (state.editing === editing)
@@ -159,13 +263,22 @@ export function createCopyStore(options) {
             // reports its own opening, whether or not the provider ever unmounted.
             if (!editing)
                 openedReported = false;
-            update({ editing });
+            update({ editing, panel: editing ? state.panel : null });
+        },
+        openPanel(panel) {
+            if (!state.documentIds.includes(panel.documentId))
+                return;
+            update({ panel });
+        },
+        closePanel() {
+            if (state.panel)
+                update({ panel: null });
         },
         async load() {
             update({ status: "loading", error: null });
-            const body = await request({ method: "GET" });
+            const body = await request(loadUrl(), { method: "GET" });
             if (body.ok && "snapshot" in body) {
-                applySnapshot(body.snapshot, getDirtyIds(state.draft).length > 0);
+                applySnapshot(body.snapshot, body.documents, getDirtyIds(state.draft).length > 0);
                 update({ status: "idle" });
                 // The editor is open once the canonical copy is actually in hand.
                 if (state.editing && !openedReported) {
@@ -180,35 +293,68 @@ export function createCopyStore(options) {
         async save() {
             if (state.status === "saving")
                 return;
-            if (state.revision === null) {
-                update({
-                    status: "error",
-                    error: { code: "NOT_LOADED", message: "The latest copy has not loaded yet. Try again." },
-                });
-                return;
-            }
             const changes = state.draft.changes;
             const changedCount = Object.keys(changes).length;
             if (changedCount === 0) {
                 update({ status: "saved", lastSave: { at: Date.now(), status: "unchanged" }, error: null });
                 return;
             }
+            // Split the one draft into the copy file and each article. Ids carry
+            // their own document, so this needs no bookkeeping while typing.
+            const copyChanges = {};
+            const byDocument = new Map();
+            for (const [id, value] of Object.entries(changes)) {
+                const split = splitDocumentFieldId(state.documentIds, id);
+                if (!split) {
+                    copyChanges[id] = value;
+                    continue;
+                }
+                const fields = byDocument.get(split.documentId) ?? {};
+                fields[split.fieldId] = value;
+                byDocument.set(split.documentId, fields);
+            }
+            const copyCount = Object.keys(copyChanges).length;
+            if (copyCount > 0 && state.revision === null) {
+                update({ status: "error", error: { code: "NOT_LOADED", message: "The latest copy has not loaded yet. Try again." } });
+                return;
+            }
+            const documents = [];
+            for (const [documentId, fields] of byDocument) {
+                const revision = state.documents[documentId]?.revision;
+                if (!revision) {
+                    update({ status: "error", error: { code: "NOT_LOADED", message: "The latest article has not loaded yet. Try again." } });
+                    return;
+                }
+                documents.push({ documentId, baseRevision: revision, changes: fields });
+            }
             update({ status: "saving", error: null, conflict: null });
-            const body = await request({
+            const body = await request(options.endpoint, {
                 method: "POST",
                 headers: { "content-type": "application/json" },
-                body: JSON.stringify({ baseRevision: state.revision, changes }),
+                body: JSON.stringify({
+                    ...(copyCount > 0 ? { baseRevision: state.revision, changes: copyChanges } : {}),
+                    ...(documents.length > 0 ? { documents } : {}),
+                }),
             });
             if (body.ok && "result" in body) {
                 const { result } = body;
-                applySnapshot(result.snapshot, false);
-                const lastSave = result.status === "saved" && result.commit?.url
-                    ? { at: Date.now(), status: result.status, commitUrl: result.commit.url }
-                    : { at: Date.now(), status: result.status };
+                const documentResults = result.documents ?? [];
+                if (result.status === "documents") {
+                    rebuildDraft(articleStatesFrom(documentResults.map((entry) => entry.snapshot)), false);
+                }
+                else {
+                    applySnapshot(result.snapshot, documentResults.map((entry) => entry.snapshot), false);
+                }
+                const wrote = (result.status === "saved") || documentResults.some((entry) => entry.status === "saved");
+                const commitUrl = (result.status === "saved" ? result.commit?.url : undefined) ??
+                    documentResults.find((entry) => entry.commit?.url)?.commit?.url;
+                const lastSave = commitUrl
+                    ? { at: Date.now(), status: wrote ? "saved" : "unchanged", commitUrl }
+                    : { at: Date.now(), status: wrote ? "saved" : "unchanged" };
                 update({ status: "saved", lastSave });
                 // Only a save that produced a commit. An unchanged re-save wrote
                 // nothing, so it is not an edit.
-                if (result.status === "saved") {
+                if (wrote) {
                     report({ name: "edit_saved", properties: { changed_count: changedCount } });
                 }
                 return;
@@ -225,16 +371,18 @@ export function createCopyStore(options) {
         },
         async reloadLatest() {
             const known = state.conflict;
-            if (known) {
-                applySnapshot(known, true);
+            // A copy conflict comes back with the latest copy attached; an article
+            // conflict does not, so that case reloads everything.
+            if (known && state.documentIds.length === 0) {
+                applySnapshot(known, undefined, true);
                 update({ status: "idle", conflict: null, error: null });
                 return;
             }
             update({ status: "loading", error: null });
-            const body = await request({ method: "GET" });
+            const body = await request(loadUrl(), { method: "GET" });
             if (body.ok && "snapshot" in body) {
-                applySnapshot(body.snapshot, true);
-                update({ status: "idle", conflict: null });
+                applySnapshot(body.snapshot, body.documents, true);
+                update({ status: "idle", conflict: null, error: null });
             }
             else if (!body.ok) {
                 update({ status: "error", error: body.error });

package/dist/styles.d.ts

@@ -4,4 +4,4 @@
  * `outline` and `box-shadow` never affect layout, so text reflows exactly
  * as it does for visitors.
  */
-export declare const EDITOR_STYLES = "\n[data-refino-id] {\n  cursor: text;\n  outline: 1px dashed transparent;\n  outline-offset: 3px;\n  border-radius: 2px;\n  transition: outline-color 120ms ease, box-shadow 120ms ease;\n}\n[data-refino-id]:hover {\n  outline-color: rgba(37, 99, 235, 0.6);\n}\n[data-refino-id][data-refino-state=\"dirty\"] {\n  outline-color: rgba(217, 119, 6, 0.75);\n}\n[data-refino-id][data-refino-state=\"active\"],\n[data-refino-id]:focus,\n[data-refino-id]:focus-visible {\n  outline: 2px solid #2563eb;\n  outline-offset: 3px;\n  box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.14);\n}\n[data-refino-id]:empty::before {\n  content: \"\\00a0\";\n}\n.refino-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n.refino-toolbar {\n  all: initial;\n  position: fixed;\n  left: 50%;\n  bottom: 16px;\n  transform: translateX(-50%);\n  z-index: 2147483000;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  max-width: calc(100vw - 24px);\n  font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  font-size: 13px;\n  line-height: 1.3;\n  color: #f9fafb;\n  box-sizing: border-box;\n}\n.refino-toolbar *, .refino-toolbar *::before, .refino-toolbar *::after {\n  box-sizing: border-box;\n  font: inherit;\n  color: inherit;\n}\n.refino-toolbar__bar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 8px 10px;\n  background: #111827;\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 999px;\n  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);\n}\n.refino-toolbar__status {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 8px;\n  min-width: 0;\n  white-space: nowrap;\n  color: #d1d5db;\n}\n.refino-toolbar__dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: #6b7280;\n  flex: none;\n}\n.refino-toolbar__dot--dirty { background: #f59e0b; }\n.refino-toolbar__dot--saving { background: #60a5fa; }\n.refino-toolbar__dot--saved { background: #34d399; }\n.refino-toolbar__dot--error, .refino-toolbar__dot--conflict { background: #f87171; }\n.refino-toolbar__key {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 12px;\n  color: #9ca3af;\n  padding: 0 8px;\n  max-width: 220px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.refino-toolbar__button {\n  appearance: none;\n  cursor: pointer;\n  border: 1px solid transparent;\n  border-radius: 999px;\n  padding: 6px 12px;\n  background: transparent;\n  color: #e5e7eb;\n  font-weight: 500;\n}\n.refino-toolbar__button:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 0.08);\n}\n.refino-toolbar__button:focus-visible {\n  outline: 2px solid #93c5fd;\n  outline-offset: 1px;\n}\n.refino-toolbar__button:disabled {\n  opacity: 0.45;\n  cursor: default;\n}\n.refino-toolbar__button--primary {\n  background: #2563eb;\n  color: #ffffff;\n}\n.refino-toolbar__button--primary:hover:not(:disabled) {\n  background: #1d4ed8;\n}\n.refino-toolbar__notice {\n  padding: 10px 14px;\n  border-radius: 12px;\n  background: #1f2937;\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);\n  max-width: 560px;\n  color: #f3f4f6;\n}\n.refino-toolbar__notice--error { border-color: rgba(248, 113, 113, 0.6); }\n.refino-toolbar__notice--conflict { border-color: rgba(251, 191, 36, 0.6); }\n.refino-toolbar__notice p { margin: 0 0 6px; }\n.refino-toolbar__notice p:last-child { margin: 0; }\n.refino-toolbar__notice code {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 12px;\n}\n.refino-toolbar__button--update {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  border-color: rgba(147, 197, 253, 0.45);\n  color: #dbeafe;\n}\n.refino-toolbar__dot--update { background: #60a5fa; }\n.refino-update {\n  width: min(360px, calc(100vw - 24px));\n}\n.refino-update__title {\n  font-weight: 600;\n  font-size: 14px;\n}\n.refino-update__summary {\n  margin: 0 0 8px;\n  padding-left: 18px;\n}\n.refino-update__summary li { margin: 0 0 2px; }\n.refino-toolbar__notice p.refino-update__note {\n  color: #9ca3af;\n  font-size: 12px;\n}\n.refino-update__actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 6px;\n  margin-top: 10px;\n}\n.refino-toolbar__link {\n  color: #93c5fd;\n  text-decoration: underline;\n}\n@media (max-width: 520px) {\n  .refino-toolbar { bottom: 8px; }\n  .refino-toolbar__key { display: none; }\n}\n";
+export declare const EDITOR_STYLES = "\n[data-refino-id] {\n  cursor: text;\n  outline: 1px dashed transparent;\n  outline-offset: 3px;\n  border-radius: 2px;\n  transition: outline-color 120ms ease, box-shadow 120ms ease;\n}\n[data-refino-id]:hover {\n  outline-color: rgba(37, 99, 235, 0.6);\n}\n[data-refino-id][data-refino-state=\"dirty\"] {\n  outline-color: rgba(217, 119, 6, 0.75);\n}\n[data-refino-id][data-refino-state=\"active\"],\n[data-refino-id]:focus,\n[data-refino-id]:focus-visible {\n  outline: 2px solid #2563eb;\n  outline-offset: 3px;\n  box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.14);\n}\n[data-refino-id]:empty::before {\n  content: \"\\00a0\";\n}\n.refino-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n.refino-toolbar {\n  all: initial;\n  position: fixed;\n  left: 50%;\n  bottom: 16px;\n  transform: translateX(-50%);\n  z-index: 2147483000;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  max-width: calc(100vw - 24px);\n  font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  font-size: 13px;\n  line-height: 1.3;\n  color: #f9fafb;\n  box-sizing: border-box;\n}\n.refino-toolbar *, .refino-toolbar *::before, .refino-toolbar *::after {\n  box-sizing: border-box;\n  font: inherit;\n  color: inherit;\n}\n.refino-toolbar__bar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 8px 10px;\n  background: #111827;\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 999px;\n  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);\n}\n.refino-toolbar__status {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 8px;\n  min-width: 0;\n  white-space: nowrap;\n  color: #d1d5db;\n}\n.refino-toolbar__dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: #6b7280;\n  flex: none;\n}\n.refino-toolbar__dot--dirty { background: #f59e0b; }\n.refino-toolbar__dot--saving { background: #60a5fa; }\n.refino-toolbar__dot--saved { background: #34d399; }\n.refino-toolbar__dot--error, .refino-toolbar__dot--conflict { background: #f87171; }\n.refino-toolbar__key {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 12px;\n  color: #9ca3af;\n  padding: 0 8px;\n  max-width: 220px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.refino-toolbar__button {\n  appearance: none;\n  cursor: pointer;\n  border: 1px solid transparent;\n  border-radius: 999px;\n  padding: 6px 12px;\n  background: transparent;\n  color: #e5e7eb;\n  font-weight: 500;\n}\n.refino-toolbar__button:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 0.08);\n}\n.refino-toolbar__button:focus-visible {\n  outline: 2px solid #93c5fd;\n  outline-offset: 1px;\n}\n.refino-toolbar__button:disabled {\n  opacity: 0.45;\n  cursor: default;\n}\n.refino-toolbar__button--primary {\n  background: #2563eb;\n  color: #ffffff;\n}\n.refino-toolbar__button--primary:hover:not(:disabled) {\n  background: #1d4ed8;\n}\n.refino-toolbar__notice {\n  padding: 10px 14px;\n  border-radius: 12px;\n  background: #1f2937;\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);\n  max-width: 560px;\n  color: #f3f4f6;\n}\n.refino-toolbar__notice--error { border-color: rgba(248, 113, 113, 0.6); }\n.refino-toolbar__notice--conflict { border-color: rgba(251, 191, 36, 0.6); }\n.refino-toolbar__notice p { margin: 0 0 6px; }\n.refino-toolbar__notice p:last-child { margin: 0; }\n.refino-toolbar__notice code {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 12px;\n}\n.refino-toolbar__button--update {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  border-color: rgba(147, 197, 253, 0.45);\n  color: #dbeafe;\n}\n.refino-toolbar__dot--update { background: #60a5fa; }\n.refino-update {\n  width: min(360px, calc(100vw - 24px));\n}\n.refino-update__title {\n  font-weight: 600;\n  font-size: 14px;\n}\n.refino-update__summary {\n  margin: 0 0 8px;\n  padding-left: 18px;\n}\n.refino-update__summary li { margin: 0 0 2px; }\n.refino-toolbar__notice p.refino-update__note {\n  color: #9ca3af;\n  font-size: 12px;\n}\n.refino-update__actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 6px;\n  margin-top: 10px;\n}\n.refino-toolbar__link {\n  color: #93c5fd;\n  text-decoration: underline;\n}\n@media (max-width: 520px) {\n  .refino-toolbar { bottom: 8px; }\n  .refino-toolbar__key { display: none; }\n}\n\n[data-refino-body] {\n  position: relative;\n  outline: 1px dashed rgba(37, 99, 235, 0.45);\n  outline-offset: 8px;\n  border-radius: 2px;\n}\n[data-refino-body][data-refino-state=\"dirty\"] {\n  outline-color: rgba(217, 119, 6, 0.8);\n}\n.refino-body__edit {\n  all: initial;\n  position: absolute;\n  top: -14px;\n  right: 0;\n  z-index: 2147482000;\n  cursor: pointer;\n  font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1;\n  color: #ffffff;\n  background: #2563eb;\n  border-radius: 999px;\n  padding: 6px 12px;\n  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);\n}\n.refino-body__edit:hover { background: #1d4ed8; }\n.refino-body__edit:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }\n[data-refino-body][data-refino-state=\"dirty\"] .refino-body__edit { background: #b45309; }\n.refino-panel {\n  all: initial;\n  position: fixed;\n  right: 16px;\n  bottom: 76px;\n  z-index: 2147483100;\n  display: flex;\n  flex-direction: column;\n  width: min(760px, calc(100vw - 32px));\n  max-height: min(70vh, 720px);\n  font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  font-size: 13px;\n  line-height: 1.45;\n  color: #f3f4f6;\n  background: #111827;\n  border: 1px solid rgba(255, 255, 255, 0.14);\n  border-radius: 14px;\n  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);\n  box-sizing: border-box;\n  overflow: hidden;\n}\n.refino-panel *, .refino-panel *::before, .refino-panel *::after {\n  box-sizing: border-box;\n  font: inherit;\n  color: inherit;\n}\n.refino-panel__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 12px 14px;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n.refino-panel__title { font-weight: 600; }\n.refino-panel__path {\n  display: block;\n  margin-top: 2px;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 11px;\n  color: #9ca3af;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 60ch;\n}\n.refino-panel__close {\n  appearance: none;\n  cursor: pointer;\n  border: 1px solid transparent;\n  border-radius: 999px;\n  padding: 6px 14px;\n  background: #2563eb;\n  color: #ffffff;\n  font-weight: 500;\n  flex: none;\n}\n.refino-panel__close:hover { background: #1d4ed8; }\n.refino-panel__close:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }\n.refino-panel__body {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 12px 14px 14px;\n  overflow: auto;\n  min-height: 0;\n}\n.refino-panel__hint, .refino-panel__notice { margin: 0; color: #d1d5db; }\n.refino-panel__notice { color: #fcd34d; }\n.refino-panel__source {\n  appearance: none;\n  width: 100%;\n  min-height: 320px;\n  resize: vertical;\n  padding: 12px;\n  background: #0b1220;\n  color: #e5e7eb;\n  border: 1px solid rgba(255, 255, 255, 0.14);\n  border-radius: 10px;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 12.5px;\n  line-height: 1.6;\n  tab-size: 2;\n  white-space: pre;\n  overflow-wrap: normal;\n}\n.refino-panel__source:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }\n.refino-panel__fields {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n  gap: 10px 14px;\n}\n.refino-panel__field { display: flex; flex-direction: column; gap: 4px; }\n.refino-panel__label {\n  display: flex;\n  align-items: baseline;\n  gap: 6px;\n  color: #d1d5db;\n  font-size: 12px;\n}\n.refino-panel__key {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 11px;\n  color: #6b7280;\n}\n.refino-panel__field[data-refino-state=\"dirty\"] .refino-panel__label { color: #fbbf24; }\n.refino-panel__input {\n  appearance: none;\n  width: 100%;\n  padding: 8px 10px;\n  background: #0b1220;\n  color: #e5e7eb;\n  border: 1px solid rgba(255, 255, 255, 0.14);\n  border-radius: 8px;\n}\n.refino-panel__input--multiline { min-height: 72px; resize: vertical; line-height: 1.5; }\n.refino-panel__input:disabled { opacity: 0.55; cursor: not-allowed; }\n.refino-panel__input:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }\n.refino-panel__field[data-refino-state=\"dirty\"] .refino-panel__input { border-color: rgba(251, 191, 36, 0.7); }\n.refino-panel__reason { color: #9ca3af; font-size: 11px; }\n.refino-panel__actions {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n.refino-panel__state { color: #9ca3af; font-size: 12px; }\n@media (max-width: 520px) {\n  .refino-panel { right: 8px; left: 8px; width: auto; bottom: 64px; max-height: 76vh; }\n}\n";

package/dist/styles.js

@@ -187,4 +187,165 @@ export const EDITOR_STYLES = `
   .refino-toolbar { bottom: 8px; }
   .refino-toolbar__key { display: none; }
 }
+
+[data-refino-body] {
+  position: relative;
+  outline: 1px dashed rgba(37, 99, 235, 0.45);
+  outline-offset: 8px;
+  border-radius: 2px;
+}
+[data-refino-body][data-refino-state="dirty"] {
+  outline-color: rgba(217, 119, 6, 0.8);
+}
+.refino-body__edit {
+  all: initial;
+  position: absolute;
+  top: -14px;
+  right: 0;
+  z-index: 2147482000;
+  cursor: pointer;
+  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  color: #ffffff;
+  background: #2563eb;
+  border-radius: 999px;
+  padding: 6px 12px;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
+}
+.refino-body__edit:hover { background: #1d4ed8; }
+.refino-body__edit:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
+[data-refino-body][data-refino-state="dirty"] .refino-body__edit { background: #b45309; }
+.refino-panel {
+  all: initial;
+  position: fixed;
+  right: 16px;
+  bottom: 76px;
+  z-index: 2147483100;
+  display: flex;
+  flex-direction: column;
+  width: min(760px, calc(100vw - 32px));
+  max-height: min(70vh, 720px);
+  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  font-size: 13px;
+  line-height: 1.45;
+  color: #f3f4f6;
+  background: #111827;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 14px;
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.refino-panel *, .refino-panel *::before, .refino-panel *::after {
+  box-sizing: border-box;
+  font: inherit;
+  color: inherit;
+}
+.refino-panel__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+.refino-panel__title { font-weight: 600; }
+.refino-panel__path {
+  display: block;
+  margin-top: 2px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  color: #9ca3af;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 60ch;
+}
+.refino-panel__close {
+  appearance: none;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  padding: 6px 14px;
+  background: #2563eb;
+  color: #ffffff;
+  font-weight: 500;
+  flex: none;
+}
+.refino-panel__close:hover { background: #1d4ed8; }
+.refino-panel__close:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }
+.refino-panel__body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px 14px 14px;
+  overflow: auto;
+  min-height: 0;
+}
+.refino-panel__hint, .refino-panel__notice { margin: 0; color: #d1d5db; }
+.refino-panel__notice { color: #fcd34d; }
+.refino-panel__source {
+  appearance: none;
+  width: 100%;
+  min-height: 320px;
+  resize: vertical;
+  padding: 12px;
+  background: #0b1220;
+  color: #e5e7eb;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 10px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12.5px;
+  line-height: 1.6;
+  tab-size: 2;
+  white-space: pre;
+  overflow-wrap: normal;
+}
+.refino-panel__source:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }
+.refino-panel__fields {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 10px 14px;
+}
+.refino-panel__field { display: flex; flex-direction: column; gap: 4px; }
+.refino-panel__label {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  color: #d1d5db;
+  font-size: 12px;
+}
+.refino-panel__key {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  color: #6b7280;
+}
+.refino-panel__field[data-refino-state="dirty"] .refino-panel__label { color: #fbbf24; }
+.refino-panel__input {
+  appearance: none;
+  width: 100%;
+  padding: 8px 10px;
+  background: #0b1220;
+  color: #e5e7eb;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 8px;
+}
+.refino-panel__input--multiline { min-height: 72px; resize: vertical; line-height: 1.5; }
+.refino-panel__input:disabled { opacity: 0.55; cursor: not-allowed; }
+.refino-panel__input:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }
+.refino-panel__field[data-refino-state="dirty"] .refino-panel__input { border-color: rgba(251, 191, 36, 0.7); }
+.refino-panel__reason { color: #9ca3af; font-size: 11px; }
+.refino-panel__actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.refino-panel__state { color: #9ca3af; font-size: 12px; }
+@media (max-width: 520px) {
+  .refino-panel { right: 8px; left: 8px; width: auto; bottom: 64px; max-height: 76vh; }
+}
 `;

package/dist/telemetry.d.ts

@@ -21,9 +21,18 @@ export type EditorEventName =
  | "edit_saved"
 /** A draft change was thrown away. */
  | "edit_reverted";
+/**
+ * Which editing surface an edit happened on. Three values, forever: it
+ * answers "is anyone using article editing", and nothing finer. It is not a
+ * page, not a file and not an id.
+ */
+export type EditorSurface = "inline_copy" | "article_metadata" | "article_body";
 export interface EditorEventProperties {
     editor_opened: Record<string, never>;
-    edit_started: Record<string, never>;
+    /** Which surface the owner started typing on. An enum of three, never the id. */
+    edit_started: {
+        readonly edit_surface: EditorSurface;
+    };
     /** How many ids were in the save. A count, never the ids. */
     edit_saved: {
         readonly changed_count: number;

package/dist/useCopyEditor.d.ts

@@ -1,5 +1,5 @@
 import type { ContentId } from "@getrefino/core";
-import type { CopyEditorState } from "./store.js";
+import type { ArticleState, CopyEditorState, EditorPanel } from "./store.js";
 import type { IntegrationUpdateSource } from "./updates.js";
 export interface CopyEditor {
     readonly state: CopyEditorState;
@@ -9,6 +9,10 @@ export interface CopyEditor {
     readonly signInHref: string;
     /** The provider's update source, if the host offers integration updates. */
     readonly updates: IntegrationUpdateSource | undefined;
+    /** Articles on this page, in the order the host declared them. Empty on a page without one. */
+    readonly articles: readonly ArticleState[];
+    openPanel(panel: EditorPanel): void;
+    closePanel(): void;
     save(): Promise<void>;
     revertValue(id: ContentId): void;
     revertAll(): void;

package/dist/useCopyEditor.js

@@ -10,6 +10,7 @@ export function useCopyEditor() {
     const { store, onExit, signInHref, updates } = useCopyStoreOrThrow();
     const state = useCopyEditorState(store);
     const dirtyIds = useMemo(() => getDirtyIds(state.draft), [state.draft]);
+    const articles = useMemo(() => state.documentIds.map((id) => state.documents[id]).filter((article) => article !== undefined), [state.documentIds, state.documents]);
     const exit = useCallback(async () => {
         const count = getDirtyIds(store.getState().draft).length;
         if (count > 0 && typeof window !== "undefined") {
@@ -25,11 +26,14 @@ export function useCopyEditor() {
         isDirty: dirtyIds.length > 0,
         signInHref,
         updates,
+        articles,
+        openPanel: store.openPanel,
+        closePanel: store.closePanel,
         save: store.save,
         revertValue: store.revertValue,
         revertAll: store.revertAll,
         reloadLatest: store.reloadLatest,
         dismissError: store.dismissError,
         exit,
-    }), [state, dirtyIds, store, exit, signInHref, updates]);
+    }), [state, dirtyIds, store, exit, signInHref, updates, articles]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getrefino/react",
-  "version": "0.1.0-rc.5",
+  "version": "0.1.0-rc.6",
   "description": "React components for Refino: edit a website's existing copy in place on the rendered page and commit it to the repository. Click text. Edit text. Save.",
   "keywords": [
     "refino",
@@ -37,7 +37,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@getrefino/core": "0.1.0-rc.5"
+    "@getrefino/core": "0.1.0-rc.6"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",