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

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__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

@@ -149,6 +149,36 @@ export const EDITOR_STYLES = `
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 12px;
 }
+.refino-toolbar__button--update {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border-color: rgba(147, 197, 253, 0.45);
+  color: #dbeafe;
+}
+.refino-toolbar__dot--update { background: #60a5fa; }
+.refino-update {
+  width: min(360px, calc(100vw - 24px));
+}
+.refino-update__title {
+  font-weight: 600;
+  font-size: 14px;
+}
+.refino-update__summary {
+  margin: 0 0 8px;
+  padding-left: 18px;
+}
+.refino-update__summary li { margin: 0 0 2px; }
+.refino-toolbar__notice p.refino-update__note {
+  color: #9ca3af;
+  font-size: 12px;
+}
+.refino-update__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+  margin-top: 10px;
+}
 .refino-toolbar__link {
   color: #93c5fd;
   text-decoration: underline;
@@ -157,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;