@getrefino/react 0.1.0-rc.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Refino contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,23 @@
+# @getrefino/react
+
+React layer for **Refino** — the site owner edits the website's visible copy in
+place on the rendered page, and the repository stays the source of truth.
+
+Installed for you by `npx @getrefino/cli init`.
+
+```tsx
+<RefinoProvider content={copy} editing={isOwner} endpoint="/api/copy" onExit={...}>
+  <EditableText id="home.hero.title" as="h1" className="hero__title" />
+</RefinoProvider>
+```
+
+In normal mode `EditableText` renders a plain semantic element — exactly
+`<h1 class="hero__title">…</h1>`, with no editor code path. In edit mode the
+same element becomes editable in place and a small toolbar appears (Save,
+Revert, Revert all, Exit). Use `useCopyEditor()` with `toolbar={false}` for
+custom controls.
+
+Editor CSS is scoped to `data-refino-*` attributes and `refino-*` class names,
+so host styles are untouched.
+
+<https://refino.dev>

package/dist/EditableText.d.ts

@@ -0,0 +1,22 @@
+import type { AllHTMLAttributes, JSX, ReactNode } from "react";
+export type EditableTextElement = keyof JSX.IntrinsicElements;
+export interface EditableTextProps extends Omit<AllHTMLAttributes<HTMLElement>, "id" | "children" | "as" | "contentEditable" | "dangerouslySetInnerHTML"> {
+    /** Stable content ID, e.g. `home.hero.title`. Must exist in the copy file. */
+    id: string;
+    /** Element to render. Defaults to `span`. The same element is used in both modes. */
+    as?: EditableTextElement | undefined;
+    /** DOM `id` attribute, since `id` is taken by the content ID. */
+    htmlId?: string | undefined;
+    /**
+     * Fallback rendered when the ID is missing from the copy file. Useful while
+     * migrating literal strings; the copy file is still the source of truth.
+     */
+    children?: ReactNode | undefined;
+}
+/**
+ * Renders a plain-text string from the copy file inside a real semantic
+ * element. In normal mode it is just that element. In edit mode the same
+ * element becomes editable in place, so typography, wrapping and layout are
+ * exactly what visitors see.
+ */
+export declare function EditableText(props: EditableTextProps): JSX.Element;

package/dist/EditableText.js

@@ -0,0 +1,138 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement, useCallback, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react";
+import { useCopyContext } from "./context.js";
+import { isDevelopment } from "./env.js";
+import { INSTRUCTIONS_ID, escapeHtml, insertTextAtCaret, placeCaretAtEndIfNeeded, readText, supportsPlaintextOnly, toPlainText, } from "./dom.js";
+const warned = new Set();
+function warnMissing(id) {
+    if (warned.has(id) || typeof console === "undefined")
+        return;
+    warned.add(id);
+    console.warn(`[refino] No copy found for id "${id}". Add it to your copy file.`);
+}
+/**
+ * Renders a plain-text string from the copy file inside a real semantic
+ * element. In normal mode it is just that element. In edit mode the same
+ * element becomes editable in place, so typography, wrapping and layout are
+ * exactly what visitors see.
+ */
+export function EditableText(props) {
+    const { id, as = "span", htmlId, children, ...rest } = props;
+    const context = useCopyContext();
+    const store = context?.store ?? null;
+    const subscribe = store ? store.subscribe : noopSubscribe;
+    const value = useSyncExternalStore(subscribe, () => store?.getValue(id), () => store?.getValue(id));
+    const editing = useSyncExternalStore(subscribe, () => store?.getState().editing ?? false, () => store?.getState().editing ?? false);
+    if (value === undefined && isDevelopment) {
+        warnMissing(id);
+    }
+    if (!store || !editing || value === undefined) {
+        return createElement(as, { ...rest, id: htmlId }, value ?? children ?? id);
+    }
+    return (_jsx(EditableField, { id: id, as: as, htmlId: htmlId, rest: rest, value: value, store: store }));
+}
+function noopSubscribe() {
+    return () => { };
+}
+function EditableField({ id, as, htmlId, rest, value, store }) {
+    const ref = useRef(null);
+    const startValueRef = useRef(value);
+    const [plaintextOnly] = useState(supportsPlaintextOnly);
+    const dirty = useSyncExternalStore(store.subscribe, () => store.isDirty(id), () => store.isDirty(id));
+    const active = useSyncExternalStore(store.subscribe, () => store.getState().activeId === id, () => false);
+    // While the field is active the browser owns the DOM text. Rendering the
+    // value captured at focus time keeps React from touching the text node
+    // under the caret; after blur, React writes the final draft value back.
+    const displayValue = active ? startValueRef.current : value;
+    // React 19 diffs dangerouslySetInnerHTML by object identity, not by its
+    // __html string: a fresh object on every render would rewrite innerHTML on
+    // every keystroke and throw the caret to the start. Keep one object per value.
+    const html = useMemo(() => ({ __html: escapeHtml(displayValue) }), [displayValue]);
+    // If the draft value changes while the field is active for a reason other
+    // than typing (Revert, Reload latest), push it into the DOM by hand.
+    useLayoutEffect(() => {
+        const element = ref.current;
+        if (!active || !element || readText(element) === value)
+            return;
+        element.textContent = value;
+        startValueRef.current = value;
+        placeCaretAtEndIfNeeded(element);
+    }, [active, value]);
+    const onFocus = useCallback((event) => {
+        rest.onFocus?.(event);
+        startValueRef.current = store.getValue(id) ?? "";
+        store.setActive(id);
+        const element = event.currentTarget;
+        if (typeof requestAnimationFrame === "function") {
+            requestAnimationFrame(() => {
+                if (element.ownerDocument.activeElement === element)
+                    placeCaretAtEndIfNeeded(element);
+            });
+        }
+    }, [id, rest, store]);
+    const onBlur = useCallback((event) => {
+        rest.onBlur?.(event);
+        store.setValue(id, readText(event.currentTarget));
+        store.setActive(null);
+    }, [id, rest, store]);
+    const onInput = useCallback((event) => {
+        rest.onInput?.(event);
+        store.setValue(id, readText(event.currentTarget));
+    }, [id, rest, store]);
+    const onKeyDown = useCallback((event) => {
+        rest.onKeyDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        const element = event.currentTarget;
+        if (event.key === "Enter") {
+            event.preventDefault();
+            element.blur();
+        }
+        else if (event.key === "Escape") {
+            event.preventDefault();
+            element.textContent = startValueRef.current;
+            store.setValue(id, startValueRef.current);
+            element.blur();
+        }
+    }, [id, rest, store]);
+    const onPaste = useCallback((event) => {
+        rest.onPaste?.(event);
+        if (event.defaultPrevented)
+            return;
+        event.preventDefault();
+        const text = toPlainText(event.clipboardData.getData("text/plain"));
+        if (text)
+            insertTextAtCaret(event.currentTarget, text);
+    }, [rest]);
+    const preventDefault = useCallback((event) => {
+        event.preventDefault();
+    }, []);
+    const onClick = useCallback((event) => {
+        rest.onClick?.(event);
+        // Links and buttons must not navigate or submit while editing words.
+        event.preventDefault();
+    }, [rest]);
+    const describedBy = [rest["aria-describedby"], INSTRUCTIONS_ID].filter(Boolean).join(" ");
+    return createElement(as, {
+        ...rest,
+        ref,
+        id: htmlId,
+        contentEditable: plaintextOnly ? "plaintext-only" : true,
+        suppressContentEditableWarning: true,
+        tabIndex: rest.tabIndex ?? 0,
+        draggable: false,
+        "aria-describedby": describedBy,
+        "data-refino-id": id,
+        "data-refino-state": active ? "active" : dirty ? "dirty" : "idle",
+        dangerouslySetInnerHTML: html,
+        onFocus,
+        onBlur,
+        onInput,
+        onKeyDown,
+        onPaste,
+        onClick,
+        onDragStart: preventDefault,
+        onDrop: preventDefault,
+    });
+}

package/dist/RefinoProvider.d.ts

@@ -0,0 +1,36 @@
+import type { CopyContent } from "@getrefino/core";
+import type { JSX, ReactNode } from "react";
+import type { CopyRequestHeaders } from "./store.js";
+export interface RefinoProviderProps {
+    /** The canonical copy, usually `import copy from "./content/copy.json"`. */
+    content: CopyContent;
+    /**
+     * Turn on edit mode. The host decides this server-side from its own
+     * authentication; this prop is a rendering switch, not a security boundary.
+     */
+    editing?: boolean | undefined;
+    /** Authenticated endpoint that wraps `createContentApi`. GET loads, POST saves. */
+    endpoint?: string | undefined;
+    /**
+     * Extra request headers for the endpoint, or a function returning them.
+     * Hosted mode passes the Refino editor token as `authorization`.
+     */
+    headers?: CopyRequestHeaders | undefined;
+    /**
+     * Where the toolbar sends the owner when the endpoint answers 401
+     * (session ended). Defaults to `/edit`, the login page in both modes.
+     */
+    signInHref?: string | undefined;
+    /** Called when the user presses Exit (after confirming unsaved changes). */
+    onExit?: (() => void | Promise<void>) | undefined;
+    /** Render the built-in toolbar in edit mode. Set false to use `useCopyEditor` with custom UI. */
+    toolbar?: boolean | undefined;
+    children?: ReactNode | undefined;
+}
+/**
+ * Provides copy to every `EditableText` below it. In normal mode this is a
+ * static lookup with no editor code paths. In edit mode it loads the latest
+ * canonical copy from `endpoint`, tracks a client-side draft, and renders
+ * the toolbar and editor styles.
+ */
+export declare function RefinoProvider(props: RefinoProviderProps): JSX.Element;

package/dist/RefinoProvider.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { getDirtyIds } from "@getrefino/core";
+import { useEffect, useMemo, useState } from "react";
+import { CopyContext } from "./context.js";
+import { createCopyStore } from "./store.js";
+import { EDITOR_STYLES } from "./styles.js";
+import { CopyEditorToolbar } from "./Toolbar.js";
+/**
+ * Provides copy to every `EditableText` below it. In normal mode this is a
+ * static lookup with no editor code paths. In edit mode it loads the latest
+ * canonical copy from `endpoint`, tracks a client-side draft, and renders
+ * the toolbar and editor styles.
+ */
+export function RefinoProvider(props) {
+    const { content, editing = false, endpoint = "/api/copy", headers, signInHref = "/edit", onExit, toolbar = true, children } = props;
+    const [store] = useState(() => createCopyStore({ content, editing, endpoint, headers }));
+    useEffect(() => {
+        store.setEditing(editing);
+    }, [editing, store]);
+    useEffect(() => {
+        store.setBaseContent(content);
+    }, [content, store]);
+    useEffect(() => {
+        if (!editing)
+            return;
+        void store.load();
+    }, [editing, store]);
+    useEffect(() => {
+        if (!editing || typeof window === "undefined")
+            return;
+        const onBeforeUnload = (event) => {
+            if (getDirtyIds(store.getState().draft).length === 0)
+                return;
+            event.preventDefault();
+            event.returnValue = "";
+        };
+        const onKeyDown = (event) => {
+            if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s") {
+                event.preventDefault();
+                void store.save();
+            }
+        };
+        window.addEventListener("beforeunload", onBeforeUnload);
+        window.addEventListener("keydown", onKeyDown);
+        return () => {
+            window.removeEventListener("beforeunload", onBeforeUnload);
+            window.removeEventListener("keydown", onKeyDown);
+        };
+    }, [editing, store]);
+    const value = useMemo(() => ({ store, onExit, signInHref }), [store, onExit, signInHref]);
+    return (_jsxs(CopyContext.Provider, { value: value, children: [children, editing && (_jsxs(_Fragment, { children: [_jsx("style", { "data-refino-styles": "", children: EDITOR_STYLES }), toolbar && _jsx(CopyEditorToolbar, {})] }))] }));
+}

package/dist/Toolbar.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from "react";
+/**
+ * The only global editor chrome: a small fixed pill with Save, Revert, Exit
+ * and status. Rendered automatically by `RefinoProvider` in edit mode.
+ * Hosts that want their own controls can pass `toolbar={false}` and build
+ * on `useCopyEditor()`.
+ */
+export declare function CopyEditorToolbar(): JSX.Element;

package/dist/Toolbar.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { INSTRUCTIONS_ID } from "./dom.js";
+import { useCopyEditor } from "./useCopyEditor.js";
+function plural(count, word) {
+    return `${count} ${word}${count === 1 ? "" : "s"}`;
+}
+/**
+ * The only global editor chrome: a small fixed pill with Save, Revert, Exit
+ * and status. Rendered automatically by `RefinoProvider` in edit mode.
+ * Hosts that want their own controls can pass `toolbar={false}` and build
+ * on `useCopyEditor()`.
+ */
+export function CopyEditorToolbar() {
+    const editor = useCopyEditor();
+    const { state, dirtyIds } = editor;
+    const dirtyCount = dirtyIds.length;
+    const activeDirty = state.activeId !== null && dirtyIds.includes(state.activeId);
+    const busy = state.status === "saving" || state.status === "loading";
+    const onRevertSelected = useCallback(() => {
+        if (state.activeId)
+            editor.revertValue(state.activeId);
+    }, [editor, state.activeId]);
+    let statusText;
+    let dotClass;
+    switch (state.status) {
+        case "loading":
+            statusText = "Loading latest copy…";
+            dotClass = "saving";
+            break;
+        case "saving":
+            statusText = "Saving…";
+            dotClass = "saving";
+            break;
+        case "saved":
+            statusText =
+                state.lastSave?.status === "unchanged" ? "Nothing to save" : "Saved";
+            dotClass = "saved";
+            break;
+        case "conflict":
+            statusText = "Repository changed";
+            dotClass = "conflict";
+            break;
+        case "error":
+            statusText = "Save failed";
+            dotClass = "error";
+            break;
+        default:
+            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." }), 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("button", { type: "button", className: "refino-toolbar__button", onClick: () => void editor.exit(), disabled: busy, children: "Exit" })] })] }));
+}

package/dist/context.d.ts

@@ -0,0 +1,12 @@
+import type { CopyEditorState, CopyStore } from "./store.js";
+export interface CopyContextValue {
+    readonly store: CopyStore;
+    readonly onExit: (() => void | Promise<void>) | undefined;
+    /** Where to send the owner when the session has ended. */
+    readonly signInHref: string;
+}
+export declare const CopyContext: import("react").Context<CopyContextValue | null>;
+export declare function useCopyContext(): CopyContextValue | null;
+export declare function useCopyStoreOrThrow(): CopyContextValue;
+/** Subscribe to the whole editor state (toolbar-level components). */
+export declare function useCopyEditorState(store: CopyStore): CopyEditorState;

package/dist/context.js

@@ -0,0 +1,17 @@
+"use client";
+import { createContext, useContext, useSyncExternalStore } from "react";
+export const CopyContext = createContext(null);
+export function useCopyContext() {
+    return useContext(CopyContext);
+}
+export function useCopyStoreOrThrow() {
+    const value = useContext(CopyContext);
+    if (!value) {
+        throw new Error("Wrap your app in <RefinoProvider> before using the copy editor.");
+    }
+    return value;
+}
+/** Subscribe to the whole editor state (toolbar-level components). */
+export function useCopyEditorState(store) {
+    return useSyncExternalStore(store.subscribe, store.getState, store.getState);
+}

package/dist/dom.d.ts

@@ -0,0 +1,13 @@
+/** Small DOM helpers for the contentEditable field. Browser-only. */
+export declare const INSTRUCTIONS_ID = "refino-instructions";
+/** Read the plain text the user typed. Browsers insert non-breaking spaces for trailing spaces. */
+export declare function readText(element: HTMLElement): string;
+export declare function escapeHtml(value: string): string;
+/** Plain text only: collapse pasted line breaks and runs of whitespace. */
+export declare function toPlainText(value: string): string;
+/** Put the caret at the end unless the user already clicked somewhere inside. */
+export declare function placeCaretAtEndIfNeeded(element: HTMLElement): void;
+/** Insert text at the caret, replacing any selection. Fires an input event. */
+export declare function insertTextAtCaret(element: HTMLElement, text: string): void;
+/** `contenteditable="plaintext-only"` keeps rich formatting out; fall back to `true` where unsupported. */
+export declare function supportsPlaintextOnly(): boolean;

package/dist/dom.js

@@ -0,0 +1,72 @@
+/** Small DOM helpers for the contentEditable field. Browser-only. */
+export const INSTRUCTIONS_ID = "refino-instructions";
+/** Read the plain text the user typed. Browsers insert non-breaking spaces for trailing spaces. */
+export function readText(element) {
+    return (element.textContent ?? "").replace(/\u00a0/g, " ");
+}
+export function escapeHtml(value) {
+    return value
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
+/** Plain text only: collapse pasted line breaks and runs of whitespace. */
+export function toPlainText(value) {
+    return value.replace(/\s+/g, " ");
+}
+function selectionIsInside(element) {
+    const selection = element.ownerDocument.getSelection();
+    if (!selection || selection.rangeCount === 0)
+        return false;
+    return element.contains(selection.anchorNode);
+}
+/** Put the caret at the end unless the user already clicked somewhere inside. */
+export function placeCaretAtEndIfNeeded(element) {
+    if (selectionIsInside(element))
+        return;
+    const doc = element.ownerDocument;
+    const selection = doc.getSelection();
+    if (!selection)
+        return;
+    const range = doc.createRange();
+    range.selectNodeContents(element);
+    range.collapse(false);
+    selection.removeAllRanges();
+    selection.addRange(range);
+}
+/** Insert text at the caret, replacing any selection. Fires an input event. */
+export function insertTextAtCaret(element, text) {
+    const doc = element.ownerDocument;
+    if (typeof doc.execCommand === "function" && doc.execCommand("insertText", false, text)) {
+        return;
+    }
+    const selection = doc.getSelection();
+    if (!selection || selection.rangeCount === 0 || !selectionIsInside(element)) {
+        element.textContent = readText(element) + text;
+    }
+    else {
+        const range = selection.getRangeAt(0);
+        range.deleteContents();
+        const node = doc.createTextNode(text);
+        range.insertNode(node);
+        range.setStartAfter(node);
+        range.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }
+    element.dispatchEvent(new Event("input", { bubbles: true }));
+}
+let plaintextOnlySupport = null;
+/** `contenteditable="plaintext-only"` keeps rich formatting out; fall back to `true` where unsupported. */
+export function supportsPlaintextOnly() {
+    if (plaintextOnlySupport !== null)
+        return plaintextOnlySupport;
+    if (typeof document === "undefined")
+        return true;
+    const probe = document.createElement("div");
+    probe.contentEditable = "plaintext-only";
+    plaintextOnlySupport = probe.contentEditable === "plaintext-only";
+    return plaintextOnlySupport;
+}

package/dist/env.d.ts

@@ -0,0 +1 @@
+export declare const isDevelopment: boolean;

package/dist/env.js

@@ -0,0 +1 @@
+export const isDevelopment = typeof process !== "undefined" && process?.env?.NODE_ENV !== "production";

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { RefinoProvider } from "./RefinoProvider.js";
+export type { RefinoProviderProps } from "./RefinoProvider.js";
+export { EditableText } from "./EditableText.js";
+export type { EditableTextElement, EditableTextProps } from "./EditableText.js";
+export { CopyEditorToolbar } from "./Toolbar.js";
+export { useCopyEditor } from "./useCopyEditor.js";
+export type { CopyEditor } from "./useCopyEditor.js";
+export { createCopyStore } from "./store.js";
+export type { CopyEditorState, CopyRequestHeaders, CopyStore, CopyStoreOptions, EditorError, EditorStatus, LastSave, RebaseInfo, } from "./store.js";
+export { EDITOR_STYLES } from "./styles.js";

package/dist/index.js

@@ -0,0 +1,6 @@
+export { RefinoProvider } from "./RefinoProvider.js";
+export { EditableText } from "./EditableText.js";
+export { CopyEditorToolbar } from "./Toolbar.js";
+export { useCopyEditor } from "./useCopyEditor.js";
+export { createCopyStore } from "./store.js";
+export { EDITOR_STYLES } from "./styles.js";

package/dist/store.d.ts

@@ -0,0 +1,66 @@
+import type { ContentId, ContentSnapshot, CopyContent, DraftState } from "@getrefino/core";
+export type EditorStatus = "idle" | "loading" | "saving" | "saved" | "error" | "conflict";
+export interface EditorError {
+    readonly code: string;
+    readonly message: string;
+}
+export interface LastSave {
+    readonly at: number;
+    readonly status: "saved" | "unchanged";
+    readonly commitUrl?: string;
+}
+export interface RebaseInfo {
+    readonly overlapping: readonly ContentId[];
+    readonly dropped: readonly ContentId[];
+}
+/**
+ * Everything the editor UI needs. Plain data, replaced immutably on every
+ * change so React's `useSyncExternalStore` can subscribe to slices of it.
+ */
+export interface CopyEditorState {
+    readonly editing: boolean;
+    readonly draft: DraftState;
+    /** Revision the draft is based on; null until the canonical copy has loaded. */
+    readonly revision: string | null;
+    readonly loaded: boolean;
+    readonly status: EditorStatus;
+    readonly error: EditorError | null;
+    /** Latest upstream snapshot when a save was refused because the file moved. */
+    readonly conflict: ContentSnapshot | null;
+    readonly activeId: ContentId | null;
+    readonly lastSave: LastSave | null;
+    readonly rebase: RebaseInfo | null;
+}
+export type CopyRequestHeaders = Readonly<Record<string, string>> | (() => Readonly<Record<string, string>>);
+export interface CopyStoreOptions {
+    readonly content: CopyContent;
+    readonly editing: boolean;
+    /** Authenticated endpoint: GET loads the snapshot, POST saves changes. */
+    readonly endpoint: string;
+    /**
+     * Extra request headers, or a function returning them (read on every
+     * request). Hosted sites pass `{ authorization: "Bearer …" }` for a
+     * cross-origin Refino endpoint. Cookies are never sent cross-origin.
+     */
+    readonly headers?: CopyRequestHeaders | undefined;
+    readonly fetch?: typeof fetch;
+}
+export interface CopyStore {
+    getState(): CopyEditorState;
+    subscribe(listener: () => void): () => void;
+    getValue(id: ContentId): string | undefined;
+    isDirty(id: ContentId): boolean;
+    setValue(id: ContentId, value: string): void;
+    revertValue(id: ContentId): void;
+    revertAll(): void;
+    setActive(id: ContentId | null): void;
+    /** Replace base content in normal mode (host re-rendered with new props). */
+    setBaseContent(content: CopyContent): void;
+    setEditing(editing: boolean): void;
+    load(): Promise<void>;
+    save(): Promise<void>;
+    /** After a conflict: move the draft onto the latest upstream copy. */
+    reloadLatest(): Promise<void>;
+    dismissError(): void;
+}
+export declare function createCopyStore(options: CopyStoreOptions): CopyStore;

package/dist/store.js

@@ -0,0 +1,192 @@
+import { createDraft, getDirtyIds, getDraftValue, hasCopy, isDraftValueDirty, rebaseDraft, revertAllDraft, revertDraftValue, setDraftValue, } from "@getrefino/core";
+export function createCopyStore(options) {
+    const doFetch = options.fetch ?? ((...args) => globalThis.fetch(...args));
+    const listeners = new Set();
+    let state = {
+        editing: options.editing,
+        draft: createDraft(options.content),
+        revision: null,
+        loaded: false,
+        status: "idle",
+        error: null,
+        conflict: null,
+        activeId: null,
+        lastSave: null,
+        rebase: null,
+    };
+    function update(patch) {
+        state = { ...state, ...patch };
+        for (const listener of listeners)
+            listener();
+    }
+    function extraHeaders() {
+        const headers = options.headers;
+        return typeof headers === "function" ? headers() : (headers ?? {});
+    }
+    async function request(init) {
+        let response;
+        try {
+            response = await doFetch(options.endpoint, {
+                credentials: "same-origin",
+                ...init,
+                headers: { accept: "application/json", ...extraHeaders(), ...(init?.headers ?? {}) },
+            });
+        }
+        catch (error) {
+            return {
+                ok: false,
+                error: { code: "NETWORK", message: `Could not reach ${options.endpoint}: ${String(error)}` },
+            };
+        }
+        let body;
+        try {
+            body = await response.json();
+        }
+        catch {
+            body = null;
+        }
+        if (body && typeof body === "object" && "ok" in body) {
+            return body;
+        }
+        const code = response.status === 401 || response.status === 403 ? "UNAUTHORIZED" : "HTTP_ERROR";
+        return {
+            ok: false,
+            error: {
+                code,
+                message: code === "UNAUTHORIZED" ? "Your editing session has ended. Sign in again to keep editing." : `Copy endpoint responded with HTTP ${response.status}.`,
+            },
+        };
+    }
+    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 });
+        }
+    }
+    return {
+        getState: () => state,
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+        getValue: (id) => getDraftValue(state.draft, id),
+        isDirty: (id) => isDraftValueDirty(state.draft, id),
+        setValue(id, value) {
+            if (!hasCopy(state.draft.base, id))
+                return;
+            const draft = setDraftValue(state.draft, id, value);
+            if (draft === state.draft)
+                return;
+            update({
+                draft,
+                status: state.status === "saved" || state.status === "error" ? "idle" : state.status,
+                error: state.status === "error" ? null : state.error,
+            });
+        },
+        revertValue(id) {
+            const draft = revertDraftValue(state.draft, id);
+            if (draft !== state.draft)
+                update({ draft });
+        },
+        revertAll() {
+            update({ draft: revertAllDraft(state.draft), rebase: null });
+        },
+        setActive(id) {
+            if (state.activeId !== id)
+                update({ activeId: id });
+        },
+        setBaseContent(content) {
+            if (state.editing)
+                return;
+            update({ draft: createDraft(content) });
+        },
+        setEditing(editing) {
+            if (state.editing !== editing)
+                update({ editing });
+        },
+        async load() {
+            update({ status: "loading", error: null });
+            const body = await request({ method: "GET" });
+            if (body.ok && "snapshot" in body) {
+                applySnapshot(body.snapshot, getDirtyIds(state.draft).length > 0);
+                update({ status: "idle" });
+            }
+            else if (!body.ok) {
+                update({ status: "error", error: body.error });
+            }
+        },
+        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;
+            if (Object.keys(changes).length === 0) {
+                update({ status: "saved", lastSave: { at: Date.now(), status: "unchanged" }, error: null });
+                return;
+            }
+            update({ status: "saving", error: null, conflict: null });
+            const body = await request({
+                method: "POST",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify({ baseRevision: state.revision, changes }),
+            });
+            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 };
+                update({ status: "saved", lastSave });
+                return;
+            }
+            if (!body.ok && body.error.code === "CONFLICT") {
+                update({ status: "conflict", conflict: body.error.current ?? null, error: body.error });
+                return;
+            }
+            if (!body.ok) {
+                update({ status: "error", error: body.error });
+                return;
+            }
+            update({ status: "error", error: { code: "UNEXPECTED", message: "Unexpected response from copy endpoint." } });
+        },
+        async reloadLatest() {
+            const known = state.conflict;
+            if (known) {
+                applySnapshot(known, true);
+                update({ status: "idle", conflict: null, error: null });
+                return;
+            }
+            update({ status: "loading", error: null });
+            const body = await request({ method: "GET" });
+            if (body.ok && "snapshot" in body) {
+                applySnapshot(body.snapshot, true);
+                update({ status: "idle", conflict: null });
+            }
+            else if (!body.ok) {
+                update({ status: "error", error: body.error });
+            }
+        },
+        dismissError() {
+            if (state.status === "error")
+                update({ status: "idle", error: null });
+        },
+    };
+}

package/dist/styles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Editor-only CSS. Every selector is scoped to `data-refino-*`
+ * attributes or `refino-` class names so host styles are untouched.
+ * `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";

package/dist/styles.js

@@ -0,0 +1,160 @@
+/**
+ * Editor-only CSS. Every selector is scoped to `data-refino-*`
+ * attributes or `refino-` class names so host styles are untouched.
+ * `outline` and `box-shadow` never affect layout, so text reflows exactly
+ * as it does for visitors.
+ */
+export const EDITOR_STYLES = `
+[data-refino-id] {
+  cursor: text;
+  outline: 1px dashed transparent;
+  outline-offset: 3px;
+  border-radius: 2px;
+  transition: outline-color 120ms ease, box-shadow 120ms ease;
+}
+[data-refino-id]:hover {
+  outline-color: rgba(37, 99, 235, 0.6);
+}
+[data-refino-id][data-refino-state="dirty"] {
+  outline-color: rgba(217, 119, 6, 0.75);
+}
+[data-refino-id][data-refino-state="active"],
+[data-refino-id]:focus,
+[data-refino-id]:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 3px;
+  box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.14);
+}
+[data-refino-id]:empty::before {
+  content: "\\00a0";
+}
+.refino-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.refino-toolbar {
+  all: initial;
+  position: fixed;
+  left: 50%;
+  bottom: 16px;
+  transform: translateX(-50%);
+  z-index: 2147483000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  max-width: calc(100vw - 24px);
+  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  font-size: 13px;
+  line-height: 1.3;
+  color: #f9fafb;
+  box-sizing: border-box;
+}
+.refino-toolbar *, .refino-toolbar *::before, .refino-toolbar *::after {
+  box-sizing: border-box;
+  font: inherit;
+  color: inherit;
+}
+.refino-toolbar__bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 10px;
+  background: #111827;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 999px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
+}
+.refino-toolbar__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 8px;
+  min-width: 0;
+  white-space: nowrap;
+  color: #d1d5db;
+}
+.refino-toolbar__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #6b7280;
+  flex: none;
+}
+.refino-toolbar__dot--dirty { background: #f59e0b; }
+.refino-toolbar__dot--saving { background: #60a5fa; }
+.refino-toolbar__dot--saved { background: #34d399; }
+.refino-toolbar__dot--error, .refino-toolbar__dot--conflict { background: #f87171; }
+.refino-toolbar__key {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  color: #9ca3af;
+  padding: 0 8px;
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.refino-toolbar__button {
+  appearance: none;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  padding: 6px 12px;
+  background: transparent;
+  color: #e5e7eb;
+  font-weight: 500;
+}
+.refino-toolbar__button:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.08);
+}
+.refino-toolbar__button:focus-visible {
+  outline: 2px solid #93c5fd;
+  outline-offset: 1px;
+}
+.refino-toolbar__button:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+.refino-toolbar__button--primary {
+  background: #2563eb;
+  color: #ffffff;
+}
+.refino-toolbar__button--primary:hover:not(:disabled) {
+  background: #1d4ed8;
+}
+.refino-toolbar__notice {
+  padding: 10px 14px;
+  border-radius: 12px;
+  background: #1f2937;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
+  max-width: 560px;
+  color: #f3f4f6;
+}
+.refino-toolbar__notice--error { border-color: rgba(248, 113, 113, 0.6); }
+.refino-toolbar__notice--conflict { border-color: rgba(251, 191, 36, 0.6); }
+.refino-toolbar__notice p { margin: 0 0 6px; }
+.refino-toolbar__notice p:last-child { margin: 0; }
+.refino-toolbar__notice code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+}
+.refino-toolbar__link {
+  color: #93c5fd;
+  text-decoration: underline;
+}
+@media (max-width: 520px) {
+  .refino-toolbar { bottom: 8px; }
+  .refino-toolbar__key { display: none; }
+}
+`;

package/dist/useCopyEditor.d.ts

@@ -0,0 +1,21 @@
+import type { ContentId } from "@getrefino/core";
+import type { CopyEditorState } from "./store.js";
+export interface CopyEditor {
+    readonly state: CopyEditorState;
+    readonly dirtyIds: readonly ContentId[];
+    readonly isDirty: boolean;
+    /** Login page to offer when the endpoint reports the session ended. */
+    readonly signInHref: string;
+    save(): Promise<void>;
+    revertValue(id: ContentId): void;
+    revertAll(): void;
+    reloadLatest(): Promise<void>;
+    dismissError(): void;
+    /** Confirms when there are unsaved changes, then calls the provider's `onExit`. */
+    exit(): Promise<void>;
+}
+/**
+ * Access editor state and actions. Use this to build custom controls when
+ * the default toolbar does not fit the host site.
+ */
+export declare function useCopyEditor(): CopyEditor;

package/dist/useCopyEditor.js

@@ -0,0 +1,34 @@
+"use client";
+import { getDirtyIds } from "@getrefino/core";
+import { useCallback, useMemo } from "react";
+import { useCopyEditorState, useCopyStoreOrThrow } from "./context.js";
+/**
+ * Access editor state and actions. Use this to build custom controls when
+ * the default toolbar does not fit the host site.
+ */
+export function useCopyEditor() {
+    const { store, onExit, signInHref } = useCopyStoreOrThrow();
+    const state = useCopyEditorState(store);
+    const dirtyIds = useMemo(() => getDirtyIds(state.draft), [state.draft]);
+    const exit = useCallback(async () => {
+        const count = getDirtyIds(store.getState().draft).length;
+        if (count > 0 && typeof window !== "undefined") {
+            const ok = window.confirm(`You have ${count} unsaved change${count === 1 ? "" : "s"}. Exit without saving?`);
+            if (!ok)
+                return;
+        }
+        await onExit?.();
+    }, [onExit, store]);
+    return useMemo(() => ({
+        state,
+        dirtyIds,
+        isDirty: dirtyIds.length > 0,
+        signInHref,
+        save: store.save,
+        revertValue: store.revertValue,
+        revertAll: store.revertAll,
+        reloadLatest: store.reloadLatest,
+        dismissError: store.dismissError,
+        exit,
+    }), [state, dirtyIds, store, exit, signInHref]);
+}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@getrefino/react",
+  "version": "0.1.0-rc.1",
+  "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",
+    "react",
+    "copy",
+    "content",
+    "inline-editing",
+    "cms-alternative"
+  ],
+  "license": "MIT",
+  "homepage": "https://refino.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/forant/inline-copy.git",
+    "directory": "packages/react"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": false
+  },
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist/**/*.js",
+    "dist/**/*.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@getrefino/core": "0.1.0-rc.1"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "7.0.1",
+    "@testing-library/react": "16.3.3",
+    "@testing-library/user-event": "14.6.7",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@vitejs/plugin-react": "6.1.1",
+    "jsdom": "30.0.1",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "typescript": "6.0.3",
+    "vitest": "5.0.0"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json",
+    "dev": "tsc -p tsconfig.build.json --watch --preserveWatchOutput",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run",
+    "clean": "rm -rf dist"
+  }
+}