@tristan2828/ui-foundation 3.11.0 → 3.13.0

package/dist/components/app/edit-in-place-store.js

@@ -0,0 +1,159 @@
+import { refusalReason } from '../../hooks/use-record-update.js';
+const CLOSED = { status: 'closed' };
+const sameAsJson = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+function messageOf(error) {
+    if (error && typeof error === 'object' && 'kind' in error)
+        return refusalReason(error);
+    if (error instanceof Error)
+        return error.message;
+    return 'The save failed. Try again.';
+}
+export class EditInPlaceStore {
+    configs = new Map();
+    states = new Map();
+    saving = new Map();
+    openKey = null;
+    listeners = new Set();
+    subscribe = (listener) => {
+        this.listeners.add(listener);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    };
+    emit() {
+        for (const listener of this.listeners)
+            listener();
+    }
+    set(key, state) {
+        this.states.set(key, state);
+        if (state.status === 'closed' && this.openKey === key)
+            this.openKey = null;
+        this.emit();
+    }
+    /** A field joins the view. `config` is read fresh each time it's needed. */
+    register(key, config) {
+        this.configs.set(key, config);
+        return () => {
+            this.configs.delete(key);
+            this.states.delete(key);
+            if (this.openKey === key)
+                this.openKey = null;
+        };
+    }
+    state(key) {
+        return this.states.get(key) ?? CLOSED;
+    }
+    /** The field that's open, if any. */
+    get open() {
+        return this.openKey;
+    }
+    /** Whether leaving the page now would lose something: a draft that isn't saved. */
+    get dirty() {
+        if (this.openKey === null)
+            return false;
+        const state = this.state(this.openKey);
+        if (state.status === 'closed')
+            return false;
+        if (state.status === 'saving' || state.error !== null)
+            return true;
+        const isEqual = this.configs.get(this.openKey)?.().isEqual ?? sameAsJson;
+        return !isEqual(state.draft, state.initial);
+    }
+    /**
+     * Opens a field. The open one, if another, is saved first: if that
+     * fails it stays open and this one doesn't, and this returns false.
+     */
+    async start(key) {
+        if (this.openKey === key)
+            return true;
+        if (this.openKey !== null) {
+            const closed = await this.commit(this.openKey);
+            if (!closed)
+                return false;
+            // Another field may have opened while that save was in flight.
+            if (this.openKey !== null && this.openKey !== key)
+                return false;
+        }
+        const config = this.configs.get(key)?.();
+        if (!config)
+            return false;
+        this.openKey = key;
+        this.set(key, { status: 'open', draft: config.value, initial: config.value, error: null, problem: null });
+        return true;
+    }
+    /** The control's value changed. Ignored while saving: the field is read-only then. */
+    change(key, draft) {
+        const state = this.state(key);
+        if (state.status !== 'open')
+            return;
+        this.set(key, { ...state, draft });
+    }
+    /** The control can't produce a value to save as it stands (`null` once it can). */
+    report(key, problem) {
+        const state = this.state(key);
+        if (state.status === 'closed' || state.problem === problem)
+            return;
+        this.set(key, { ...state, problem });
+    }
+    /**
+     * Saves the field (leaving it, Enter, a choice picked). Resolves true
+     * once it's closed (saved, or unchanged), false if it stays open (the
+     * schema refused it, or the save failed). `draft`, when given, is the
+     * value to save (a choice saves the moment it's picked).
+     */
+    commit(key, draft) {
+        const inFlight = this.saving.get(key);
+        if (inFlight)
+            return inFlight;
+        let state = this.state(key);
+        if (state.status === 'closed')
+            return Promise.resolve(true);
+        if (draft !== undefined && state.status === 'open') {
+            state = { ...state, draft };
+            this.set(key, state);
+        }
+        const open = state;
+        const config = this.configs.get(key)?.();
+        if (!config)
+            return Promise.resolve(false);
+        if (open.problem) {
+            this.set(key, { ...open, error: open.problem });
+            return Promise.resolve(false);
+        }
+        const isEqual = config.isEqual ?? sameAsJson;
+        if (isEqual(open.draft, open.initial)) {
+            this.set(key, CLOSED);
+            return Promise.resolve(true);
+        }
+        const parsed = config.schema ? config.schema.safeParse(open.draft) : { success: true, data: open.draft };
+        if (!parsed.success) {
+            this.set(key, { ...open, error: parsed.error.issues[0]?.message ?? 'Check this value.' });
+            return Promise.resolve(false);
+        }
+        this.set(key, { ...open, status: 'saving', error: null });
+        const save = config
+            .save(parsed.data)
+            .then(() => {
+            this.set(key, CLOSED);
+            return true;
+        }, (error) => {
+            this.set(key, { ...open, status: 'open', error: messageOf(error) });
+            return false;
+        })
+            .finally(() => this.saving.delete(key));
+        this.saving.set(key, save);
+        return save;
+    }
+    /** Esc: closes and shows the saved value again. Not while a save is in flight. */
+    cancel(key) {
+        const state = this.state(key);
+        if (state.status !== 'open')
+            return;
+        this.set(key, CLOSED);
+    }
+    /** Leaving the page anyway: whatever is open is dropped. */
+    discard() {
+        if (this.openKey !== null)
+            this.cancel(this.openKey);
+    }
+}

package/dist/components/app/edit-in-place.d.ts

@@ -0,0 +1,88 @@
+import { type ReactNode } from 'react';
+import type { EditInPlaceStore } from './edit-in-place-store.js';
+/** What an editable value's control is given. Spread what applies onto the form's own control. */
+export type EditControlProps<TDraft> = {
+    /** The control's id. */
+    id: string;
+    /** The draft: exactly what's been typed or picked. */
+    value: TDraft;
+    onChange: (value: TDraft) => void;
+    /**
+     * Save now. A choice calls it with the value picked (`commit(value)`):
+     * a choice saves the moment it's picked.
+     */
+    commit: (value?: TDraft) => void;
+    /** Close without saving: a list closed with nothing picked. */
+    cancel: () => void;
+    /** The save is in flight: show the draft, don't let it change. */
+    disabled: boolean;
+    /** The draft was refused; its reason is under it (`aria-describedby`). */
+    invalid: boolean;
+    /** The field's label: the control's accessible name. */
+    label: string;
+    /** The id of the line under the control (Saving…, or why it can't save). */
+    describedBy: string;
+    /** For a control that can't always produce a value to save (RichTextEditor's `onProblem`). */
+    onProblem: (message: string | null) => void;
+};
+/**
+ * How the value saves, which follows from its control:
+ * - `text`: one line. Enter saves (as does leaving it).
+ * - `long-text`: Ctrl/Cmd+Enter saves; Enter is a new line.
+ * - `choice`: one pick (a select, a switch, a single reference). Saves the
+ *   moment it's picked; its list opens with the field.
+ * - `multi`: several picks (a multi reference). Saves on leaving it, or
+ *   Ctrl/Cmd+Enter; Enter picks.
+ * Leaving the field saves every kind; Esc gives up.
+ */
+export type EditKind = 'text' | 'long-text' | 'choice' | 'multi';
+type SafeParseResult<TValue> = {
+    success: true;
+    data: TValue;
+} | {
+    success: false;
+    error: {
+        issues: readonly {
+            message: string;
+        }[];
+    };
+};
+/** A field marked editable. Make one with `editInPlace({...})`. */
+export type EditInPlace = {
+    kind: EditKind;
+    value: unknown;
+    control: (props: EditControlProps<unknown>) => ReactNode;
+    schema?: {
+        safeParse: (value: unknown) => SafeParseResult<unknown>;
+    };
+    save: (value: unknown) => Promise<unknown>;
+    isEqual?: (a: unknown, b: unknown) => boolean;
+};
+export type EditInPlaceOptions<TDraft, TValue> = {
+    kind: EditKind;
+    /** The saved value as the control holds it: what the form's control would start from. */
+    value: TDraft;
+    /** The form's own control for this field (one control per field, shared with the form). */
+    control: (props: EditControlProps<TDraft>) => ReactNode;
+    /**
+     * The form's schema for this field (`widgetFormSchema.shape.name`): a
+     * value it refuses never leaves the browser, and its message shows
+     * under the field. Its output is what `save` gets.
+     */
+    schema?: {
+        safeParse: (value: unknown) => SafeParseResult<TValue>;
+    };
+    /**
+     * Saves the value: the entity's single-field save (`useRecordUpdate`
+     * with `optimistic: false, toastOnError: false`), `mutateAsync` of the
+     * field's update. Rejects with the AppError; a 422's field error shows
+     * under the field word for word.
+     */
+    save: (value: TValue) => Promise<unknown>;
+    /** Whether a draft is still the saved value. Defaults to comparing as JSON. */
+    isEqual?: (a: TDraft, b: TDraft) => boolean;
+};
+/** Marks a field editable in place, typed end to end: draft → schema → save. */
+export declare function editInPlace<TDraft, TValue = TDraft>(options: EditInPlaceOptions<TDraft, TValue>): EditInPlace;
+export declare const EditInPlaceContext: import("react").Context<EditInPlaceStore | null>;
+export {};

package/dist/components/app/edit-in-place.js

@@ -0,0 +1,10 @@
+// Editing in place on a record's view: what a field passes to EntityView
+// (or to an EditableValue in its header) to become editable where it's
+// shown. The rules live in edit-in-place-store.ts; the markup in
+// editable-value.tsx. Design language: cell-patterns.md "Editable value".
+import { createContext } from 'react';
+/** Marks a field editable in place, typed end to end: draft → schema → save. */
+export function editInPlace(options) {
+    return options;
+}
+export const EditInPlaceContext = createContext(null);

package/dist/components/app/editable-value.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+import { type EditInPlace } from './edit-in-place.js';
+import type { EditInPlaceStore } from './edit-in-place-store.js';
+export type EditableValueProps = {
+    /** The field's label: the control's accessible name, and the edit button's ("Edit Name"). */
+    label: string;
+    edit: EditInPlace;
+    /** The value as the view shows it. */
+    children: ReactNode;
+    /** `inline` in a heading or beside badges, `block` in a field row (default). */
+    layout?: 'inline' | 'block';
+    className?: string;
+};
+export declare function EditableValue({ label, edit, children, layout, className }: EditableValueProps): import("react").JSX.Element;
+/**
+ * While a field holds something unsaved, leaving asks first: an in-app
+ * link or Back (React Router's blocker, so the app needs a data router),
+ * or closing the tab (`beforeunload`). Rendered by EntityView only while
+ * a field is open, so a view nobody's editing never blocks anything.
+ */
+export declare function LeaveGuard({ store }: {
+    store: EditInPlaceStore;
+}): import("react").JSX.Element;

package/dist/components/app/editable-value.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A value on a record's view that turns into its form control where it's
+// shown, and saves when you leave it (cell-patterns.md "Editable value").
+// EntityView wraps every field, section and title marked `edit`; a header
+// badge uses <EditableValue> itself. The rules are edit-in-place-store.ts.
+//
+// - Start: click the value (a link inside it still navigates), or tab to
+//   its edit button and press Enter. Hover and focus show it's editable.
+// - Save: leave it (click or tab elsewhere), Enter on one line,
+//   Ctrl/Cmd+Enter anywhere, or pick a choice. Esc puts the saved value
+//   back. Unchanged closes with no request.
+// - Saving: the control stays, read-only, with "Saving…" under it, until
+//   the server agrees. Failed: it stays, with the draft and the reason.
+import { PencilIcon } from 'lucide-react';
+import { useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useSyncExternalStore } from 'react';
+import { useBlocker } from 'react-router';
+import { cn } from 'cn';
+import { Button } from '../ui/button.js';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '../ui/dialog.js';
+import { FieldError } from '../ui/field.js';
+import { Spinner } from '../ui/spinner.js';
+import { EditInPlaceContext } from './edit-in-place.js';
+// What a click on the shown value must leave alone: links navigate,
+// buttons do their own thing.
+const INTERACTIVE = 'a[href], button, input, select, textarea, [role="button"], [role="link"]';
+// Where the caret goes once the control shows: the first match, in this
+// order (a picker's text box before its chips' remove buttons).
+const FOCUS_ORDER = [
+    'input:not([type="hidden"]), textarea, [contenteditable="true"]',
+    '[role="combobox"], [role="switch"], button, [tabindex]:not([tabindex="-1"])',
+];
+// Focus moving here doesn't save the field: a link that leaves the page
+// (the leave prompt decides what happens to the draft) or the prompt itself.
+const LEAVING = 'a[href]:not([target="_blank"]), [data-leave-guard]';
+// The field's own control, given what it needs.
+function Control({ render, ...props }) {
+    return render(props);
+}
+function useStore() {
+    const store = useContext(EditInPlaceContext);
+    if (!store)
+        throw new Error('<EditableValue> works inside an <EntityView>, which runs editing in place.');
+    return store;
+}
+export function EditableValue({ label, edit, children, layout = 'block', className }) {
+    const store = useStore();
+    const key = useId();
+    const controlId = `${key}-control`;
+    const describedBy = `${key}-status`;
+    // The latest config, read by the store whenever it needs it.
+    const config = useRef(edit);
+    useLayoutEffect(() => {
+        config.current = edit;
+    });
+    useEffect(() => store.register(key, () => config.current), [store, key]);
+    const state = useSyncExternalStore(store.subscribe, () => store.state(key), () => store.state(key));
+    const editButton = useRef(null);
+    const container = useRef(null);
+    // Set by a keyboard save or Esc: the caret goes back to the edit button.
+    const refocus = useRef(false);
+    const blurTimer = useRef(undefined);
+    const isOpen = state.status !== 'closed';
+    const wasOpen = useRef(false);
+    useEffect(() => {
+        if (isOpen && !wasOpen.current) {
+            for (const selector of FOCUS_ORDER) {
+                const target = container.current?.querySelector(selector);
+                if (target) {
+                    target.focus();
+                    break;
+                }
+            }
+        }
+        // Closed: the caret goes back to the value's edit button after a
+        // keyboard save or Esc, or whenever closing left it nowhere (a pick
+        // from a list), so the keyboard never loses its place.
+        if (!isOpen && wasOpen.current && (refocus.current || document.activeElement === document.body)) {
+            refocus.current = false;
+            editButton.current?.focus();
+        }
+        wasOpen.current = isOpen;
+    }, [isOpen]);
+    useEffect(() => () => window.clearTimeout(blurTimer.current), []);
+    // Whether an Esc is closing a list inside the control. Read on the way
+    // down (window, capture): a picker closes its list from a document
+    // listener, before React sees the key, and by then it reads as closed.
+    const escapeClosesList = useRef(false);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const onKeyDown = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            escapeClosesList.current = Boolean(event.target?.closest?.('[aria-expanded="true"]'));
+        };
+        window.addEventListener('keydown', onKeyDown, true);
+        return () => window.removeEventListener('keydown', onKeyDown, true);
+    }, [isOpen]);
+    const start = useCallback(() => void store.start(key), [store, key]);
+    const commit = useCallback((value) => {
+        window.clearTimeout(blurTimer.current);
+        void store.commit(key, value);
+    }, [store, key]);
+    const cancel = useCallback(() => store.cancel(key), [store, key]);
+    const onShownClick = (event) => {
+        if (event.target.closest(INTERACTIVE))
+            return;
+        start();
+    };
+    const onKeyDown = (event) => {
+        if (state.status !== 'open')
+            return;
+        if (event.key === 'Escape') {
+            // A list open inside the control closes first; Esc again gives up.
+            if (event.defaultPrevented || escapeClosesList.current)
+                return;
+            event.preventDefault();
+            refocus.current = true;
+            cancel();
+        }
+        else if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+            event.preventDefault();
+            refocus.current = true;
+            commit();
+        }
+        else if (event.key === 'Enter' && edit.kind === 'text' && !event.shiftKey && !event.altKey) {
+            event.preventDefault();
+            refocus.current = true;
+            commit();
+        }
+    };
+    // Leaving the field saves it. Focus moving into the control's own list
+    // (a portal) still counts as inside: React sends its focus events here.
+    const onBlur = (event) => {
+        window.clearTimeout(blurTimer.current);
+        if (event.relatedTarget?.closest(LEAVING))
+            return;
+        blurTimer.current = window.setTimeout(() => {
+            if (store.state(key).status === 'open')
+                void store.commit(key);
+        }, 0);
+    };
+    const onFocus = () => window.clearTimeout(blurTimer.current);
+    if (state.status === 'closed') {
+        return (_jsxs("span", { "data-slot": "editable-value", onClick: onShownClick, className: cn('group/editable relative -mx-1.5 cursor-text items-start gap-1 rounded-md px-1.5 transition-colors hover:bg-muted has-[[data-edit]:focus-visible]:bg-muted', layout === 'block' ? 'flex w-full' : 'inline-flex max-w-full align-top', className), children: [_jsx("span", { className: "min-w-0 flex-1", children: children }), _jsx(Button, { ref: editButton, "data-edit": "", type: "button", variant: "ghost", size: "icon-xs", "aria-label": `Edit ${label}`, onClick: start, className: "shrink-0 text-muted-foreground opacity-0 group-hover/editable:opacity-100 focus-visible:opacity-100 pointer-coarse:opacity-100", children: _jsx(PencilIcon, {}) })] }));
+    }
+    const saving = state.status === 'saving';
+    return (_jsxs("span", { ref: container, "data-slot": "editable-value", "data-state": saving ? 'saving' : state.error ? 'failed' : 'editing', onKeyDown: onKeyDown, onBlur: onBlur, onFocus: onFocus, className: cn('flex min-w-0 flex-col gap-1.5', layout === 'block' ? 'w-full' : 'w-fit max-w-full', className), children: [_jsx(Control, { render: edit.control, id: controlId, value: state.draft, onChange: (value) => store.change(key, value), commit: commit, cancel: cancel, disabled: saving, invalid: !saving && state.error !== null, label: label, describedBy: describedBy, onProblem: (problem) => store.report(key, problem) }), _jsx("span", { id: describedBy, className: "type-body", children: saving ? (_jsxs("span", { role: "status", className: "inline-flex items-center gap-1.5 type-caption text-muted-foreground", children: [_jsx(Spinner, { "aria-hidden": "true", className: "size-3.5" }), "Saving\u2026"] })) : (state.error && _jsx(FieldError, { className: "type-caption", children: state.error })) })] }));
+}
+/**
+ * While a field holds something unsaved, leaving asks first: an in-app
+ * link or Back (React Router's blocker, so the app needs a data router),
+ * or closing the tab (`beforeunload`). Rendered by EntityView only while
+ * a field is open, so a view nobody's editing never blocks anything.
+ */
+export function LeaveGuard({ store }) {
+    const dirty = useSyncExternalStore(store.subscribe, () => store.dirty, () => store.dirty);
+    const blocker = useBlocker(({ currentLocation, nextLocation }) => store.dirty && currentLocation.pathname !== nextLocation.pathname);
+    useEffect(() => {
+        if (!dirty)
+            return;
+        const onBeforeUnload = (event) => {
+            event.preventDefault();
+        };
+        window.addEventListener('beforeunload', onBeforeUnload);
+        return () => window.removeEventListener('beforeunload', onBeforeUnload);
+    }, [dirty]);
+    return (_jsx(Dialog, { open: blocker.state === 'blocked', onOpenChange: (open) => {
+            if (!open && blocker.state === 'blocked')
+                blocker.reset();
+        }, children: _jsxs(DialogContent, { showCloseButton: false, "data-leave-guard": "", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Discard your changes?" }), _jsx(DialogDescription, { children: "A field you're editing hasn't been saved. Leaving now loses what you typed." })] }), _jsxs(DialogFooter, { children: [_jsx(DialogClose, { render: _jsx(Button, { variant: "outline" }), children: "Keep editing" }), _jsx(Button, { variant: "destructive", onClick: () => {
+                                store.discard();
+                                if (blocker.state === 'blocked')
+                                    blocker.proceed();
+                            }, children: "Discard" })] })] }) }));
+}

package/dist/components/app/entity-view.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import type { AppError } from '../../api/contracts.js';
+import { type EditInPlace } from './edit-in-place.js';
 export type EntityViewField = {
     label: string;
     /**
@@ -10,6 +11,8 @@ export type EntityViewField = {
     value: ReactNode;
     /** What an empty value reads as: the plan's "not set" label. Defaults to "Not set". */
     emptyLabel?: string;
+    /** Editable in place: `editInPlace({...})`. Unmarked, the value is read-only. */
+    edit?: EditInPlace;
 };
 /**
  * A titled card on the view: either label/value rows (`fields`), or one
@@ -26,11 +29,21 @@ export type EntityViewSection = {
     title: string;
     content: ReactNode;
     emptyLabel?: string;
+    /** The block is editable in place (long text), named by the section's title. */
+    edit?: EditInPlace;
 };
 export type EntityViewProps = {
     /** The record's name or title, the page's <h1>. */
     title?: string;
-    /** A few status-like values beside the title, as `<Badge>`s. */
+    /** The title is editable in place; `label` is the field's ("Name"). */
+    titleEdit?: EditInPlace & {
+        label: string;
+    };
+    /**
+     * A few status-like values beside the title, as `<Badge>`s, or as the
+     * control that changes one when the plan makes it a quick action (a
+     * status `Select`, a yes/no `Switch`).
+     */
     badges?: ReactNode;
     /** The header's actions: an Edit button, a Delete with its confirm dialog. */
     actions?: ReactNode;
@@ -45,4 +58,4 @@ export type EntityViewProps = {
         label: string;
     };
 };
-export declare function EntityView({ title, badges, actions, sections, isLoading, error, onRetry, back, }: EntityViewProps): import("react").JSX.Element;
+export declare function EntityView({ title, titleEdit, badges, actions, sections, isLoading, error, onRetry, back, }: EntityViewProps): import("react").JSX.Element;

package/dist/components/app/entity-view.js

@@ -12,10 +12,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // is that an empty value reads as the plan's "not set" label, never a
 // blank.
 //
-// A value can be any markup, a control included, and `actions` takes any
-// buttons: that's the room left for quick actions on this page (a toggle,
-// a status change, ticking a checklist item) without the form.
-import { useId } from 'react';
+// A value can be any markup, a control included, and so can `badges`:
+// that's where quick actions go (cell pattern 17), a value the plan marks
+// as changed straight from this page and saved on its own through
+// `useRecordUpdate`: a status picked in the header, a yes/no switch,
+// checklist items ticked in place.
+//
+// Editing in place (cell pattern 18): a field, a `content` section or the
+// title marked `edit` turns into its form control where it's shown, and
+// saves when you leave it. This component runs it (one field open at a
+// time, the leave-page prompt); EditableValue is each value's side, and a
+// header badge uses it directly. A field not marked renders exactly as
+// before. Edit, in `actions`, stays for everything else.
+import { useId, useState, useSyncExternalStore } from 'react';
 import { Link } from 'react-router';
 import { ArrowLeftIcon, SearchXIcon } from 'lucide-react';
 import { ErrorState } from './error-state.js';
@@ -23,6 +32,9 @@ import { Button } from '../ui/button.js';
 import { Card, CardContent, CardHeader } from '../ui/card.js';
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from '../ui/empty.js';
 import { Skeleton } from '../ui/skeleton.js';
+import { EditInPlaceContext } from './edit-in-place.js';
+import { EditInPlaceStore } from './edit-in-place-store.js';
+import { EditableValue, LeaveGuard } from './editable-value.js';
 const DEFAULT_EMPTY_LABEL = 'Not set';
 function isEmptyValue(value) {
     return (value === null ||
@@ -40,16 +52,20 @@ function orEmptyLabel(value, emptyLabel) {
 // Label beside value from `sm` up; below it (a phone) the label sits
 // above its value, so nothing is squeezed into a narrow second column.
 function FieldRow({ field }) {
-    return (_jsxs("div", { className: "flex flex-col gap-1 py-3 first:pt-0 last:pb-0 sm:grid sm:grid-cols-[minmax(8rem,12rem)_1fr] sm:gap-6", children: [_jsx("dt", { className: "type-label text-muted-foreground", children: field.label }), _jsx("dd", { className: "min-w-0 type-body break-words text-foreground", children: orEmptyLabel(field.value, field.emptyLabel) })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1 py-3 first:pt-0 last:pb-0 sm:grid sm:grid-cols-[minmax(8rem,12rem)_1fr] sm:gap-6", children: [_jsx("dt", { className: "type-label text-muted-foreground", children: field.label }), _jsx("dd", { className: "min-w-0 type-body break-words text-foreground", children: field.edit ? (_jsx(EditableValue, { label: field.label, edit: field.edit, children: orEmptyLabel(field.value, field.emptyLabel) })) : (orEmptyLabel(field.value, field.emptyLabel)) })] }));
 }
 function ViewSection({ section }) {
     const headingId = useId();
-    return (_jsx("section", { "aria-labelledby": headingId, children: _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx("h2", { id: headingId, className: "type-section-title text-foreground", children: section.title }) }), _jsx(CardContent, { children: 'fields' in section ? (_jsx("dl", { className: "flex flex-col divide-y divide-border", children: section.fields.map((field) => (_jsx(FieldRow, { field: field }, field.label))) })) : (_jsx("div", { className: "min-w-0 type-body break-words text-foreground", children: orEmptyLabel(section.content, section.emptyLabel) })) })] }) }));
+    return (_jsx("section", { "aria-labelledby": headingId, children: _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx("h2", { id: headingId, className: "type-section-title text-foreground", children: section.title }) }), _jsx(CardContent, { children: 'fields' in section ? (_jsx("dl", { className: "flex flex-col divide-y divide-border", children: section.fields.map((field) => (_jsx(FieldRow, { field: field }, field.label))) })) : (_jsx("div", { className: "min-w-0 type-body break-words text-foreground", children: section.edit ? (_jsx(EditableValue, { label: section.title, edit: section.edit, children: orEmptyLabel(section.content, section.emptyLabel) })) : (orEmptyLabel(section.content, section.emptyLabel)) })) })] }) }));
 }
 function EntityViewSkeleton() {
     return (_jsxs("div", { className: "flex max-w-4xl flex-col gap-6", "data-state": "loading", children: [_jsx(Skeleton, { className: "h-5 w-24" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Skeleton, { className: "h-7 w-64 max-w-full" }), _jsx(Skeleton, { className: "h-5 w-40" })] }), Array.from({ length: 2 }, (_, section) => (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(Skeleton, { className: "h-5 w-32" }) }), _jsx(CardContent, { className: "flex flex-col gap-4", children: Array.from({ length: 4 }, (_, row) => (_jsxs("div", { className: "flex flex-col gap-1 sm:flex-row sm:gap-6", children: [_jsx(Skeleton, { className: "h-5 w-32" }), _jsx(Skeleton, { className: "h-5 flex-1" })] }, row))) })] }, section)))] }));
 }
-export function EntityView({ title, badges, actions, sections, isLoading, error, onRetry, back, }) {
+export function EntityView({ title, titleEdit, badges, actions, sections, isLoading, error, onRetry, back, }) {
+    // Editing in place: one store per view, and the leave-page prompt only
+    // while a field is open.
+    const [store] = useState(() => new EditInPlaceStore());
+    const openField = useSyncExternalStore(store.subscribe, () => store.open, () => store.open);
     if (error?.kind === 'notfound') {
         // A record that doesn't exist and one that belongs to another user are
         // the same plain 404, so this never says which. Retrying can't help.
@@ -59,5 +75,5 @@ export function EntityView({ title, badges, actions, sections, isLoading, error,
         return _jsx(ErrorState, { error: error, onRetry: onRetry });
     if (isLoading)
         return _jsx(EntityViewSkeleton, {});
-    return (_jsxs("div", { className: "flex max-w-4xl flex-col gap-6", "data-state": "success", children: [_jsx(BackLink, { back: back }), _jsxs("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [_jsx("h1", { className: "type-page-title break-words text-foreground", children: title }), badges && _jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: badges })] }), actions && _jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions })] }), sections.map((section) => (_jsx(ViewSection, { section: section }, section.title)))] }));
+    return (_jsx(EditInPlaceContext.Provider, { value: store, children: _jsxs("div", { className: "flex max-w-4xl flex-col gap-6", "data-state": "success", children: [openField !== null && _jsx(LeaveGuard, { store: store }), _jsx(BackLink, { back: back }), _jsxs("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [_jsx("h1", { className: "type-page-title break-words text-foreground", children: titleEdit ? (_jsx(EditableValue, { label: titleEdit.label, edit: titleEdit, layout: "inline", className: "w-full", children: title })) : (title) }), badges && _jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: badges })] }), actions && _jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions })] }), sections.map((section) => (_jsx(ViewSection, { section: section }, section.title)))] }) }));
 }

package/dist/components/app/milkdown-editor.d.ts

@@ -0,0 +1,2 @@
+import type { RichTextEditorProps } from './rich-text-editor.js';
+export default function MilkdownEditor({ id, defaultValue, onChange, onProblem, readOnly, autoFocus, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, }: RichTextEditorProps): import("react").JSX.Element;