forgebook 0.3.3 → 0.4.0

package/dist/src/shell/valueEditors/SearchSelect.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A list to search: a text field that narrows its options, walked with the arrow keys, as a combobox for screen readers.
+ * For many options, and for the source's named values and the catalogue's tokens, where a name is what a reader knows.
+ *
+ * @remarks
+ * The list opens in the flow rather than over the panel: the panel scrolls, and would cut an overlay at its edge.
+ *
+ * @module
+ */
+import { useId, useMemo, useState } from "react";
+import { EDITOR_STRINGS } from "./editorStrings.js";
+/** The row that takes the value away: a value no option holds, since an option's comes from a name. */
+const CLEAR_ROW = "\0clear";
+/** The most options drawn at once: the rest are a search away. */
+const MOST_SHOWN = 100;
+/** The options a search keeps: every word in the name or in what it holds. */
+const matching = (options, search) => {
+    const words = search.toLowerCase().split(/\s+/).filter(Boolean);
+    return options.filter((option) => {
+        const text = `${option.label} ${option.hint ?? ""}`.toLowerCase();
+        return words.every((word) => text.includes(word));
+    });
+};
+/**
+ * A list to search.
+ *
+ * @param props - the options and the chosen value.
+ */
+export const SearchSelect = ({ label, describedBy, options, value, canClear = true, onChange }) => {
+    const listId = useId();
+    const [search, setSearch] = useState(undefined);
+    const [active, setActive] = useState(0);
+    const isOpen = search !== undefined;
+    const found = useMemo(() => matching(options, search ?? ""), [options, search]);
+    const shown = found.slice(0, MOST_SHOWN);
+    const chosenLabel = options.find((option) => option.value === value)?.label ?? value ?? "";
+    // the first row takes the value away, where it may go: a reader always has a way back
+    const rows = canClear
+        ? [{ value: CLEAR_ROW, label: EDITOR_STRINGS.searchClear }, ...shown]
+        : shown;
+    const close = () => {
+        setSearch(undefined);
+        setActive(0);
+    };
+    const choose = (row) => {
+        if (row !== undefined)
+            onChange(row.value === CLEAR_ROW ? undefined : row.value);
+        close();
+    };
+    const onKeyDown = (event) => {
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            const count = Math.max(1, rows.length);
+            if (!isOpen)
+                setSearch("");
+            else
+                setActive((current) => (current + (event.key === "ArrowDown" ? 1 : count - 1)) % count);
+        }
+        else if (event.key === "Escape" && isOpen) {
+            event.stopPropagation();
+            close();
+        }
+        else if (event.key === "Enter" && isOpen) {
+            event.preventDefault();
+            choose(rows[active]);
+        }
+    };
+    const optionId = (index) => `${listId}-${index}`;
+    return (_jsxs("div", { className: "forgebook-value-search", children: [_jsx("input", { type: "text", role: "combobox", "aria-label": label, "aria-describedby": describedBy, "aria-expanded": isOpen, "aria-controls": listId, "aria-autocomplete": "list", "aria-activedescendant": isOpen && rows[active] !== undefined ? optionId(active) : undefined, autoComplete: "off", value: search ?? chosenLabel, placeholder: EDITOR_STRINGS.searchClear, onFocus: () => setSearch(""), onBlur: close, onKeyDown: onKeyDown, onChange: (event) => {
+                    setSearch(event.target.value);
+                    // what is typed names an option, so the first that matches is what Enter takes
+                    setActive(event.target.value !== "" && canClear ? 1 : 0);
+                } }), isOpen ? (_jsxs("div", { className: "forgebook-value-search__list", id: listId, role: "listbox", "aria-label": EDITOR_STRINGS.searchOptions(label), children: [rows.map((option, index) => (_jsxs("div", { id: optionId(index), role: "option", tabIndex: -1, className: "forgebook-value-search__option", "aria-selected": option.value === CLEAR_ROW ? value === undefined : option.value === value, "data-active": active === index || undefined, 
+                        // chosen on the press: the field's blur that follows would close the list before a click
+                        onMouseDown: (event) => {
+                            event.preventDefault();
+                            choose(option);
+                        }, children: [option.swatch === undefined ? null : (_jsx("span", { className: "forgebook-value-search__swatch", style: { background: option.swatch } })), _jsx("span", { className: "forgebook-value-search__name", children: option.label }), option.hint === undefined ? null : (_jsx("span", { className: "forgebook-value-search__hint", children: option.hint }))] }, option.label))), found.length === 0 ? _jsx("p", { className: "forgebook-value-note", children: EDITOR_STRINGS.searchEmpty }) : null, found.length > MOST_SHOWN ? (_jsx("p", { className: "forgebook-value-note", children: EDITOR_STRINGS.searchMore(found.length - MOST_SHOWN) })) : null] })) : null] }));
+};

package/dist/src/shell/valueEditors/TokenEditor.d.ts

@@ -0,0 +1,49 @@
+/**
+ * A prop chosen among the catalogue's design tokens (`control: { type: "token", of: "color" }`, or `@token color` in its
+ * TSDoc): a search over the tokens it asks for, each with its value and, for a colour, its swatch.
+ *
+ * @remarks
+ * The story receives a plain text, so a link holds it and a reader without the tokens still sees it. What it writes is
+ * the token's value unless the control gives a `format` (`var(--{name})`), which keeps a catalogue's themes working.
+ * Without tokens to offer it stays a text field: a prop never loses its control to a missing file.
+ *
+ * @module
+ */
+import { type ReactNode } from "react";
+import type { TokenRequest } from "../../argTypes.ts";
+import { type ShellToken } from "../audiencePage.ts";
+/**
+ * The tokens a request offers: of that type, or with that part in their name.
+ *
+ * @param tokens - the catalogue's tokens.
+ * @param of - the type or the part of a name.
+ */
+export declare const tokensOf: (tokens: readonly ShellToken[], of: string) => readonly ShellToken[];
+/**
+ * What a token gives the story.
+ *
+ * @param token - the token.
+ * @param format - the control's `format`; the token's value by default.
+ */
+export declare const tokenText: (token: ShellToken, format: string | undefined) => string;
+/** The token editor's props. */
+export type TokenEditorProps = {
+    /** The field's name. */
+    readonly label: string;
+    /** The element that describes it. */
+    readonly describedBy: string;
+    /** Which tokens it offers. */
+    readonly tokens: TokenRequest;
+    /** The chosen text. */
+    readonly value: string | undefined;
+    /** Loads the catalogue's tokens; none when it has none. */
+    readonly loadTokens: (() => Promise<unknown>) | undefined;
+    /** Called with the chosen text; none for no value. */
+    readonly onChange: (value: string | undefined) => void;
+};
+/**
+ * The token editor.
+ *
+ * @param props - the field's name, the tokens it offers, and its value.
+ */
+export declare const TokenEditor: ({ label, describedBy, tokens, value, loadTokens, onChange }: TokenEditorProps) => ReactNode;

package/dist/src/shell/valueEditors/TokenEditor.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A prop chosen among the catalogue's design tokens (`control: { type: "token", of: "color" }`, or `@token color` in its
+ * TSDoc): a search over the tokens it asks for, each with its value and, for a colour, its swatch.
+ *
+ * @remarks
+ * The story receives a plain text, so a link holds it and a reader without the tokens still sees it. What it writes is
+ * the token's value unless the control gives a `format` (`var(--{name})`), which keeps a catalogue's themes working.
+ * Without tokens to offer it stays a text field: a prop never loses its control to a missing file.
+ *
+ * @module
+ */
+import { useEffect, useState } from "react";
+import { isShellTokens } from "../audiencePage.js";
+import { EDITOR_STRINGS } from "./editorStrings.js";
+import { SearchSelect } from "./SearchSelect.js";
+/**
+ * The tokens a request offers: of that type, or with that part in their name.
+ *
+ * @param tokens - the catalogue's tokens.
+ * @param of - the type or the part of a name.
+ */
+export const tokensOf = (tokens, of) => tokens.filter((token) => token.deprecated === undefined && (token.type === of || token.name.split(".").includes(of)));
+/**
+ * What a token gives the story.
+ *
+ * @param token - the token.
+ * @param format - the control's `format`; the token's value by default.
+ */
+export const tokenText = (token, format) => (format ?? "{value}")
+    .replaceAll("{name}", token.name.replaceAll(".", "-"))
+    .replaceAll("{value}", token.value);
+/**
+ * The token editor.
+ *
+ * @param props - the field's name, the tokens it offers, and its value.
+ */
+export const TokenEditor = ({ label, describedBy, tokens, value, loadTokens, onChange }) => {
+    const [loaded, setLoaded] = useState(loadTokens === undefined ? { status: "ready", value: [] } : { status: "loading" });
+    useEffect(() => {
+        if (loadTokens === undefined)
+            return;
+        let isCurrent = true;
+        loadTokens().then((answer) => {
+            if (!isCurrent)
+                return;
+            setLoaded(isShellTokens(answer)
+                ? { status: "ready", value: answer.tokens }
+                : { status: "error", message: "The tokens have an unexpected shape" });
+        }, (error) => {
+            if (isCurrent) {
+                setLoaded({ status: "error", message: error instanceof Error ? error.message : String(error) });
+            }
+        });
+        return () => {
+            isCurrent = false;
+        };
+    }, [loadTokens]);
+    if (loaded.status === "loading")
+        return _jsx("p", { className: "forgebook-value-note", children: EDITOR_STRINGS.tokensLoading });
+    const offered = loaded.status === "ready" ? tokensOf(loaded.value, tokens.of) : [];
+    if (offered.length === 0) {
+        return (_jsxs(_Fragment, { children: [_jsx("p", { className: "forgebook-value-note", children: loaded.status === "error"
+                        ? EDITOR_STRINGS.tokensFailed(loaded.message)
+                        : EDITOR_STRINGS.tokensNone(tokens.of) }), _jsx("input", { type: "text", "aria-label": label, "aria-describedby": describedBy, value: value ?? "", onChange: (event) => onChange(event.target.value) })] }));
+    }
+    const options = offered.map((token) => ({
+        value: tokenText(token, tokens.format),
+        label: token.name,
+        hint: token.value,
+        ...(token.type === "color" ? { swatch: token.value } : {})
+    }));
+    return (_jsx(SearchSelect, { label: label, describedBy: describedBy, options: options, value: value, onChange: onChange }));
+};

package/dist/src/shell/valueEditors/UnionEditor.d.ts

@@ -0,0 +1,20 @@
+/**
+ * A mixed union (`"sm" | number`): choose the type, then the value. Choosing a type starts from that type's first value,
+ * so the story at once receives what was chosen, and a value already set says which type it is.
+ *
+ * @module
+ */
+import { type ReactNode } from "react";
+import { type ValueShape } from "../../valueShape.ts";
+import type { DrawField, FieldProps } from "./fieldTypes.ts";
+/**
+ * A union's editor.
+ *
+ * @param props - the field's props, and how to draw a member.
+ */
+export declare const UnionEditor: ({ shape, value, label, describedBy, namedValues, depth, onChange, drawField }: FieldProps & {
+    readonly shape: {
+        readonly of: readonly ValueShape[];
+    };
+    readonly drawField: DrawField;
+}) => ReactNode;

package/dist/src/shell/valueEditors/UnionEditor.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A mixed union (`"sm" | number`): choose the type, then the value. Choosing a type starts from that type's first value,
+ * so the story at once receives what was chosen, and a value already set says which type it is.
+ *
+ * @module
+ */
+import { useState } from "react";
+import { isValueOfShape, startValueOf } from "../../shapeValues.js";
+import { canSetShape } from "../../valueShape.js";
+import { Segmented } from "../Segmented.js";
+import { EDITOR_STRINGS } from "./editorStrings.js";
+import { JsonEditor } from "./JsonEditor.js";
+/** No member chosen: the value is none, or fits none. */
+const NO_MEMBER = -1;
+/** A member's name among the others: its kind, numbered when two share one. */
+const memberLabel = (member, members) => {
+    const label = EDITOR_STRINGS.memberKinds[member.kind];
+    const same = members.filter((each) => EDITOR_STRINGS.memberKinds[each.kind] === label);
+    return same.length === 1 ? label : `${label} ${same.indexOf(member) + 1}`;
+};
+/**
+ * A union's editor.
+ *
+ * @param props - the field's props, and how to draw a member.
+ */
+export const UnionEditor = ({ shape, value, label, describedBy, namedValues, depth, onChange, drawField }) => {
+    const members = shape.of.filter((member) => canSetShape(member, namedValues));
+    const [chosen, setChosen] = useState(NO_MEMBER);
+    const fits = (index) => {
+        const member = members[index];
+        return member !== undefined && value !== undefined && isValueOfShape(member, value, namedValues);
+    };
+    // the member the reader chose while the value still fits it: `"sm"` typed as a text stays a text
+    const shown = fits(chosen) ? chosen : members.findIndex((_, index) => fits(index));
+    const member = members[shown];
+    // what fits no member cannot be drawn by one: its JSON keeps it in sight, and in reach
+    if (value !== undefined && member === undefined) {
+        return (_jsxs(_Fragment, { children: [_jsx("p", { className: "forgebook-value-note", children: EDITOR_STRINGS.misfitNote }), _jsx(JsonEditor, { shape, value, label, describedBy, namedValues, depth, onChange })] }));
+    }
+    return (_jsxs("div", { className: "forgebook-value-union", children: [_jsx(Segmented, { label: EDITOR_STRINGS.memberKind(label), options: members.map((each, index) => ({ value: index, label: memberLabel(each, members) })), value: shown, onValueChange: (index) => {
+                    const next = members[index];
+                    if (next === undefined)
+                        return;
+                    setChosen(index);
+                    const start = startValueOf(next, namedValues);
+                    if (start !== undefined)
+                        onChange(start);
+                } }), member === undefined
+                ? null
+                : drawField({
+                    shape: member,
+                    value,
+                    label,
+                    describedBy,
+                    namedValues,
+                    depth: depth + 1,
+                    // the member typed in stays the member, whatever other one the value comes to fit on the way
+                    onChange: (next) => {
+                        setChosen(shown);
+                        onChange(next);
+                    }
+                })] }));
+};

package/dist/src/shell/valueEditors/ValueField.d.ts

@@ -0,0 +1,15 @@
+/**
+ * One value's field, by what it looks like: a text, a number, a toggle, a choice, a named value, or the editor of a list,
+ * an object, a union or JSON. A value that does not fit its shape, or is too much to draw, falls back to JSON with a note,
+ * so what the panel sends always fits and nothing a story holds is hidden.
+ *
+ * @module
+ */
+import { type ReactNode } from "react";
+import type { FieldProps } from "./fieldTypes.ts";
+/**
+ * One value's field.
+ *
+ * @param props - the field's props.
+ */
+export declare const ValueField: (props: FieldProps) => ReactNode;

package/dist/src/shell/valueEditors/ValueField.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * One value's field, by what it looks like: a text, a number, a toggle, a choice, a named value, or the editor of a list,
+ * an object, a union or JSON. A value that does not fit its shape, or is too much to draw, falls back to JSON with a note,
+ * so what the panel sends always fits and nothing a story holds is hidden.
+ *
+ * @module
+ */
+import { useState } from "react";
+import { isArgList, isArgObject, isDateArg, isNamedArg } from "../../messages.js";
+import { isValueOfShape } from "../../shapeValues.js";
+import { MOST_PLAIN_OPTIONS } from "../PropFields.js";
+import { STRINGS } from "../strings.js";
+import { EDITOR_STRINGS } from "./editorStrings.js";
+import { JsonEditor } from "./JsonEditor.js";
+import { ListEditor } from "./ListEditor.js";
+import { ObjectEditor, TupleEditor } from "./ObjectEditor.js";
+import { RecordEditor } from "./RecordEditor.js";
+import { SearchSelect } from "./SearchSelect.js";
+import { UnionEditor } from "./UnionEditor.js";
+/** The most parts of a value drawn as fields: past it, a page of inputs is slower to use than its JSON. */
+const MOST_DRAWN_PARTS = 150;
+/** How many parts a value has. */
+const partsOf = (value) => {
+    if (isArgList(value))
+        return value.reduce((sum, item) => sum + partsOf(item), 1);
+    if (isArgObject(value))
+        return Object.values(value).reduce((sum, item) => sum + partsOf(item), 1);
+    return 1;
+};
+/** Whether a shape is drawn as more than one field, so a person may want its JSON instead. */
+const isStructured = (shape) => shape.kind === "object" || shape.kind === "list" || shape.kind === "record" || shape.kind === "tuple";
+/**
+ * A number's field: what is typed stays as typed, and only a number reaches the value. A required number has no empty
+ * value, so what was left empty comes back when the field is left.
+ *
+ * @param props - the field's props.
+ */
+const NumberLeaf = ({ value, label, describedBy, onChange }) => {
+    const shown = typeof value === "number" ? String(value) : "";
+    const [draft, setDraft] = useState(undefined);
+    return (_jsx("input", { type: "number", "aria-label": label, "aria-describedby": describedBy, value: draft ?? shown, onChange: (event) => {
+            const text = event.target.value;
+            setDraft(text);
+            if (text !== "" && Number.isFinite(Number(text)))
+                onChange(Number(text));
+        }, onBlur: () => setDraft(undefined) }));
+};
+/** A choice's field: a native list for a few options, a search among many. */
+const ChoiceLeaf = ({ shape, value, label, describedBy, isRequired = false, onChange }) => {
+    const shown = typeof value === "string" || typeof value === "number" ? String(value) : undefined;
+    const chooseText = (text) => onChange(shape.values.find((each) => String(each) === text));
+    if (shape.values.length > MOST_PLAIN_OPTIONS) {
+        return (_jsx(SearchSelect, { label: label, describedBy: describedBy, options: shape.values.map((each) => ({ value: String(each), label: String(each) })), value: shown, canClear: !isRequired, onChange: chooseText }));
+    }
+    return (_jsxs("select", { "aria-label": label, "aria-describedby": describedBy, value: shown ?? "", onChange: (event) => chooseText(event.target.value), children: [isRequired ? null : _jsx("option", { value: "", children: STRINGS.unset }), shape.values.map((each) => (_jsx("option", { value: String(each), children: String(each) }, String(each))))] }));
+};
+/** A named value's field: a search among the names the source offers for its type. */
+const NamedLeaf = ({ shape, value, label, describedBy, namedValues, depth, isRequired = false, onChange }) => {
+    const names = Object.hasOwn(namedValues, shape.type) ? Object.keys(namedValues[shape.type] ?? {}) : [];
+    if (shape.canTakeText === true) {
+        // a slot takes a named value or a text: the same choice as any union
+        const members = names.length === 0 ? [{ kind: "text" }] : [{ kind: "named", type: shape.type }, { kind: "text" }];
+        return ValueField({
+            shape: members.length === 1 ? { kind: "text" } : { kind: "union", of: members },
+            value,
+            label,
+            describedBy,
+            namedValues,
+            depth,
+            isRequired,
+            onChange
+        });
+    }
+    return (_jsx(SearchSelect, { label: label, describedBy: describedBy, options: names.map((name) => ({ value: name, label: name })), value: value !== undefined && isNamedArg(value) ? value.named : undefined, canClear: !isRequired, onChange: (name) => onChange(name === undefined ? undefined : { of: shape.type, named: name }) }));
+};
+/** A text's field: one line, or several once the text holds a line break, which a one-line field would drop. */
+const TextLeaf = ({ value, label, describedBy, onChange }) => {
+    const text = typeof value === "string" ? value : "";
+    return text.includes("\n") ? (_jsx("textarea", { "aria-label": label, "aria-describedby": describedBy, rows: 3, value: text, onChange: (event) => onChange(event.target.value) })) : (_jsx("input", { type: "text", "aria-label": label, "aria-describedby": describedBy, value: text, onChange: (event) => onChange(event.target.value) }));
+};
+/** A moment's field, in the browser's time zone; what is left empty has no value. */
+const DateLeaf = ({ value, label, describedBy, onChange }) => {
+    const time = value !== undefined && isDateArg(value) ? Date.parse(value.forgebookDate) : undefined;
+    const shown = time === undefined
+        ? ""
+        : new Date(time - new Date(time).getTimezoneOffset() * 60_000).toISOString().slice(0, 16);
+    return (_jsx("input", { type: "datetime-local", "aria-label": label, "aria-describedby": describedBy, value: shown, onChange: (event) => {
+            const read = new Date(event.target.value);
+            onChange(Number.isNaN(read.getTime()) ? undefined : { forgebookDate: read.toISOString() });
+        } }));
+};
+/** A value's fields, or its JSON when a reader asks for it. */
+const StructuredField = (props) => {
+    const { shape, value, label, namedValues, depth } = props;
+    const [isJson, setIsJson] = useState(false);
+    const isMisfit = value !== undefined && !isValueOfShape(shape, value, namedValues);
+    const isTooLarge = value !== undefined && partsOf(value) > MOST_DRAWN_PARTS;
+    const drawn = () => {
+        switch (shape.kind) {
+            case "list":
+                return _jsx(ListEditor, { ...props, shape: shape, drawField: ValueField });
+            case "tuple":
+                return _jsx(TupleEditor, { ...props, shape: shape, drawField: ValueField });
+            case "object":
+                return _jsx(ObjectEditor, { ...props, shape: shape, drawField: ValueField });
+            case "record":
+                return _jsx(RecordEditor, { ...props, shape: shape, drawField: ValueField });
+            default:
+                return _jsx(JsonEditor, { ...props });
+        }
+    };
+    if (isMisfit || isTooLarge) {
+        return (_jsxs(_Fragment, { children: [_jsx("p", { className: "forgebook-value-note", children: isMisfit ? EDITOR_STRINGS.misfitNote : EDITOR_STRINGS.tooLargeNote }), _jsx(JsonEditor, { ...props })] }));
+    }
+    if (depth > 0)
+        return drawn();
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "forgebook-value-switch", children: _jsx("button", { type: "button", className: "forgebook-text-button", "aria-pressed": isJson, "aria-label": EDITOR_STRINGS.editAsJsonHint(label), onClick: () => setIsJson(!isJson), children: EDITOR_STRINGS.editAsJson }) }), isJson ? _jsx(JsonEditor, { ...props }) : drawn()] }));
+};
+/**
+ * One value's field.
+ *
+ * @param props - the field's props.
+ */
+export const ValueField = (props) => {
+    const { shape } = props;
+    if (isStructured(shape))
+        return _jsx(StructuredField, { ...props });
+    switch (shape.kind) {
+        case "text":
+            return _jsx(TextLeaf, { ...props });
+        case "number":
+            return _jsx(NumberLeaf, { ...props });
+        case "date":
+            return _jsx(DateLeaf, { ...props });
+        case "boolean":
+            return (_jsx("input", { type: "checkbox", "aria-label": props.label, "aria-describedby": props.describedBy, checked: shape.only ?? props.value === true, disabled: shape.only !== undefined, onChange: (event) => props.onChange(event.target.checked) }));
+        case "choice":
+            return _jsx(ChoiceLeaf, { ...props, shape: shape });
+        case "named":
+            return _jsx(NamedLeaf, { ...props, shape: shape });
+        case "union":
+            return _jsx(UnionEditor, { ...props, shape: shape, drawField: ValueField });
+        default:
+            return _jsx(JsonEditor, { ...props });
+    }
+};

package/dist/src/shell/valueEditors/editorStrings.d.ts

@@ -0,0 +1,56 @@
+/** The editors' texts, as shown: Forgebook's, with the catalogue's replacements. */
+export declare const EDITOR_STRINGS: {
+    addItem: (label: string) => string;
+    addField: (label: string) => string;
+    itemName: (label: string, position: number) => string;
+    moveUp: (label: string) => string;
+    moveDown: (label: string) => string;
+    removeItem: (label: string) => string;
+    itemMoved: (label: string, position: number, count: number) => string;
+    itemRemoved: (label: string, count: number) => string;
+    emptyList: string;
+    cannotSet: string;
+    clearField: (label: string) => string;
+    fieldName: (label: string) => string;
+    fieldValue: (label: string, name: string) => string;
+    nameTaken: string;
+    nameRefused: string;
+    nameEmpty: string;
+    newField: string;
+    memberKind: (label: string) => string;
+    memberKinds: {
+        text: string;
+        number: string;
+        date: string;
+        boolean: string;
+        choice: string;
+        list: string;
+        tuple: string;
+        object: string;
+        record: string;
+        union: string;
+        named: string;
+        json: string;
+        like: string;
+    };
+    editAsJson: string;
+    editAsJsonHint: (label: string) => string;
+    jsonInvalid: (reason: string) => string;
+    jsonRefused: string;
+    jsonMisfit: string;
+    misfitNote: string;
+    tooLargeNote: string;
+    searchEmpty: string;
+    searchMore: (count: number) => string;
+    searchClear: string;
+    searchOptions: (label: string) => string;
+    tokensLoading: string;
+    tokensFailed: (message: string) => string;
+    tokensNone: (asked: string) => string;
+    fileChoose: (label: string) => string;
+    fileRemove: (name: string) => string;
+    fileLine: (type: string, size: string) => string;
+    fileTooLarge: (name: string, most: string) => string;
+    fileRefused: (name: string) => string;
+    fileFailed: (name: string) => string;
+};

package/dist/src/shell/valueEditors/editorStrings.js

@@ -0,0 +1,66 @@
+/**
+ * The texts of the panel's editors that load on use (`PropEditor.tsx`): nested fields, a searchable list, the tokens, the
+ * files. They load with the editors, so a catalogue of plain props carries none of them.
+ *
+ * @remarks
+ * Each keeps the plain name it would have in `STRINGS`, so a catalogue replaces it the same way (`lateStrings`).
+ *
+ * @module
+ */
+import { lateStrings } from "../strings.js";
+/** The editors' texts, as shown: Forgebook's, with the catalogue's replacements. */
+export const EDITOR_STRINGS = lateStrings({
+    addItem: (label) => `Add to ${label}`,
+    addField: (label) => `Add ${label}`,
+    itemName: (label, position) => `${label} ${position}`,
+    moveUp: (label) => `Move ${label} up`,
+    moveDown: (label) => `Move ${label} down`,
+    removeItem: (label) => `Remove ${label}`,
+    itemMoved: (label, position, count) => `${label}: now ${position} of ${count}`,
+    itemRemoved: (label, count) => `${label} removed, ${count} left`,
+    emptyList: "No items",
+    cannotSet: "It needs what only the source's named values can give, and they name none",
+    clearField: (label) => `${label}: no value`,
+    fieldName: (label) => `${label}: name`,
+    fieldValue: (label, name) => `${label} ${name}`,
+    nameTaken: "Another field has this name",
+    nameRefused: "This name cannot be set from the panel or a link",
+    nameEmpty: "A field needs a name",
+    newField: "key",
+    memberKind: (label) => `${label}: type`,
+    memberKinds: {
+        text: "Text",
+        number: "Number",
+        date: "Date",
+        boolean: "On or off",
+        choice: "Choice",
+        list: "List",
+        tuple: "List",
+        object: "Object",
+        record: "Object",
+        union: "Choice",
+        named: "Named",
+        json: "JSON",
+        like: "Object"
+    },
+    editAsJson: "JSON",
+    editAsJsonHint: (label) => `Edit ${label} as JSON`,
+    jsonInvalid: (reason) => `Not valid JSON: ${reason}`,
+    jsonRefused: "It holds a name a value cannot hold (__proto__, constructor, prototype), or nests too deep",
+    jsonMisfit: "Valid JSON, but not what this prop takes, or it holds what a link may not give",
+    misfitNote: "The story's value does not match this prop's type: it is shown as JSON",
+    tooLargeNote: "Too much to show as fields: it is shown as JSON",
+    searchEmpty: "Nothing matches",
+    searchMore: (count) => `And ${count} more: type to narrow them down`,
+    searchClear: "No value",
+    searchOptions: (label) => `${label}: options`,
+    tokensLoading: "Loading the tokens…",
+    tokensFailed: (message) => `The tokens could not be read: ${message}`,
+    tokensNone: (asked) => `This catalogue has no ${asked} tokens: type a value`,
+    fileChoose: (label) => `${label}: choose files`,
+    fileRemove: (name) => `Remove ${name}`,
+    fileLine: (type, size) => `${type}, ${size}`,
+    fileTooLarge: (name, most) => `${name} is too large for a link, which holds the file: at most ${most}`,
+    fileRefused: (name) => `${name} is of a type a link cannot hold: it could run as a page`,
+    fileFailed: (name) => `${name} could not be read`
+});

package/dist/src/shell/valueEditors/fieldTypes.d.ts

@@ -0,0 +1,31 @@
+/**
+ * What the panel's nested fields are given: the same for every kind of value, so a field of a list can be an object, a
+ * union, or anything else a type says.
+ *
+ * @module
+ */
+import type { ReactNode } from "react";
+import type { ArgValue } from "../../messages.ts";
+import type { NamedValues } from "../../namedValues.ts";
+import type { ValueShape } from "../../valueShape.ts";
+/** One value's field. */
+export type FieldProps = {
+    /** What the value looks like. */
+    readonly shape: ValueShape;
+    /** The value; none when it has none. */
+    readonly value: ArgValue | undefined;
+    /** The name a screen reader reads: the prop's, and the path down to this part. */
+    readonly label: string;
+    /** The element that describes it, at the top of a prop. */
+    readonly describedBy?: string | undefined;
+    /** The source's named values. */
+    readonly namedValues: NamedValues;
+    /** How deep it is: the prop itself is 0. */
+    readonly depth: number;
+    /** Whether it must hold a value, so nothing offers to take it away; `false` by default. */
+    readonly isRequired?: boolean;
+    /** Called with a changed value; none takes it away. */
+    readonly onChange: (value: ArgValue | undefined) => void;
+};
+/** Draws a field, handed down so that the nested editors need not import what imports them. */
+export type DrawField = (props: FieldProps) => ReactNode;