forgebook 0.3.3 → 0.4.1

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

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { UNSET_ARG } from "../../messages.js";
+import { resolvedShape } from "../../shapeValues.js";
+import { canSetShape } from "../../valueShape.js";
+import { LazyView, lazyModule } from "../lazyModule.js";
+import { EDITOR_STRINGS } from "./editorStrings.js";
+import { FileEditor } from "./FileEditor.js";
+import { SearchSelect } from "./SearchSelect.js";
+import { TokenEditor } from "./TokenEditor.js";
+import { ValueField } from "./ValueField.js";
+import "./valueEditors.css";
+/** The host of the custom controls, which a catalogue with none never loads. */
+const CUSTOM_CONTROL = lazyModule(() => import("../CustomControl.js").then((module) => module.CustomControl));
+/** No custom control registered. */
+const NO_ARG_CONTROLS = {};
+/** A custom control's field: its host loads with the first, so an editor of any other kind pays nothing for it. */
+const CustomField = ({ prop, name, value, argControls, onValueChange }) => (_jsx(LazyView, { module: CUSTOM_CONTROL, props: { prop, name, value, loaders: argControls ?? NO_ARG_CONTROLS, onValueChange }, loading: null, failed: (message) => (_jsx("p", { className: "forgebook-prop__description forgebook-prop__problem", role: "alert", children: message })) }));
+/** A prop's fields, or why it has none: a required part only named values can fill, and the source names none. */
+const ShapedField = (props) => canSetShape(props.shape, props.namedValues) ? (_jsx(ValueField, { ...props })) : (_jsx("p", { className: "forgebook-value-note", children: EDITOR_STRINGS.cannotSet }));
+/**
+ * One prop's editor.
+ *
+ * @param props - the prop, its value, and what it may draw from.
+ */
+export const PropEditor = ({ prop, value, descriptionId, namedValues, loadTokens, argControls, onValueChange }) => {
+    const label = prop.label ?? prop.name;
+    const change = (next) => onValueChange(prop.name, next ?? UNSET_ARG);
+    if (prop.customControl !== undefined) {
+        return (_jsx(CustomField, { prop: prop, name: prop.customControl, value: value, argControls: argControls, onValueChange: onValueChange }));
+    }
+    if (prop.control === "file") {
+        return (_jsx(FileEditor, { label: label, describedBy: descriptionId, accept: prop.accept, value: value, onChange: change }));
+    }
+    if (prop.control === "token" && prop.tokens !== undefined) {
+        return (_jsx(TokenEditor, { label: label, describedBy: descriptionId, tokens: prop.tokens, value: typeof value === "string" ? value : undefined, loadTokens: loadTokens, onChange: change }));
+    }
+    if (Object.hasOwn(namedValues, prop.type) && prop.control === undefined && prop.kind === "other") {
+        return (_jsx(ValueField, { shape: {
+                kind: "named",
+                type: prop.type,
+                ...(prop.canTakeText === true ? { canTakeText: true } : {})
+            }, value: value, label: label, describedBy: descriptionId, namedValues: namedValues, depth: 0, onChange: change }));
+    }
+    if (prop.shape !== undefined) {
+        return (_jsx(ShapedField, { shape: resolvedShape(prop.shape), value: value, label: label, describedBy: descriptionId, namedValues: namedValues, depth: 0, onChange: change }));
+    }
+    // many options, searched
+    const choices = prop.choices ?? [];
+    return (_jsx(SearchSelect, { label: label, describedBy: descriptionId, options: choices.map((choice) => ({
+            value: String(choice),
+            label: prop.labels?.[String(choice)] ?? String(choice)
+        })), value: typeof value === "string" || typeof value === "number" ? String(value) : undefined, onChange: (text) => change(choices.find((choice) => String(choice) === text)) }));
+};

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

@@ -0,0 +1,20 @@
+/**
+ * Any names, each holding a value of one shape (`Record<string, number>`): each entry's name and value, added and
+ * removed. A name that cannot be kept stays in its field with the reason beside it, and the value is untouched.
+ *
+ * @module
+ */
+import { type ReactNode } from "react";
+import type { ValueShape } from "../../valueShape.ts";
+import type { DrawField, FieldProps } from "./fieldTypes.ts";
+/**
+ * A record's editor.
+ *
+ * @param props - the field's props, and how to draw a value.
+ */
+export declare const RecordEditor: ({ shape, value, label, namedValues, depth, onChange, drawField }: FieldProps & {
+    readonly shape: {
+        readonly of: ValueShape;
+    };
+    readonly drawField: DrawField;
+}) => ReactNode;

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

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Any names, each holding a value of one shape (`Record<string, number>`): each entry's name and value, added and
+ * removed. A name that cannot be kept stays in its field with the reason beside it, and the value is untouched.
+ *
+ * @module
+ */
+import { useId, useState } from "react";
+import { isArgObject } from "../../messages.js";
+import { isUnsafeFreeName, startValueOf } from "../../shapeValues.js";
+import { Icon } from "../icons.js";
+import { EDITOR_STRINGS } from "./editorStrings.js";
+/** Names no object holds: a component that merges it would write on every object of the page. */
+const PROTOTYPE_NAMES = ["__proto__", "constructor", "prototype"];
+/** Why a name cannot be kept, or none when it can. */
+const nameProblem = (name, others) => {
+    if (name === "")
+        return EDITOR_STRINGS.nameEmpty;
+    if (others.includes(name))
+        return EDITOR_STRINGS.nameTaken;
+    return PROTOTYPE_NAMES.includes(name) || isUnsafeFreeName(name) ? EDITOR_STRINGS.nameRefused : undefined;
+};
+/** An entry's name: what is typed stays here until it can be kept. */
+const EntryName = ({ name, others, label, onRename }) => {
+    const problemId = useId();
+    const [draft, setDraft] = useState(name);
+    // the row may come to hold another entry (one above it removed, a reset): what was typed was for the last
+    const [shownName, setShownName] = useState(name);
+    if (shownName !== name) {
+        setShownName(name);
+        setDraft(name);
+    }
+    const problem = nameProblem(draft, others);
+    return (_jsxs("div", { className: "forgebook-value-record__name", children: [_jsx("input", { type: "text", "aria-label": EDITOR_STRINGS.fieldName(label), "aria-invalid": problem !== undefined, "aria-describedby": problem === undefined ? undefined : problemId, value: draft, onChange: (event) => {
+                    const next = event.target.value;
+                    setDraft(next);
+                    if (nameProblem(next, others) === undefined)
+                        onRename(next);
+                }, onBlur: () => {
+                    if (problem !== undefined)
+                        setDraft(name);
+                } }), problem === undefined ? null : (_jsx("p", { id: problemId, className: "forgebook-value-note", "data-tone": "problem", role: "alert", children: problem }))] }));
+};
+/**
+ * A record's editor.
+ *
+ * @param props - the field's props, and how to draw a value.
+ */
+export const RecordEditor = ({ shape, value, label, namedValues, depth, onChange, drawField }) => {
+    const current = value !== undefined && isArgObject(value) ? value : {};
+    const entries = Object.entries(current);
+    const names = entries.map(([name]) => name);
+    const start = startValueOf(shape.of, namedValues);
+    const newName = () => {
+        const base = EDITOR_STRINGS.newField;
+        let count = names.length + 1;
+        while (names.includes(`${base}${count}`))
+            count += 1;
+        return `${base}${count}`;
+    };
+    // renamed in place, so the entries keep their order and the field keeps its focus
+    const rename = (from, to) => onChange(Object.fromEntries(entries.map(([name, each]) => [name === from ? to : name, each])));
+    const change = (name, next) => {
+        if (next !== undefined)
+            onChange({ ...current, [name]: next });
+    };
+    return (_jsxs("div", { className: "forgebook-value-list", children: [entries.length === 0 ? _jsx("p", { className: "forgebook-value-note", children: EDITOR_STRINGS.emptyList }) : null, entries.map(([name, each], index) => {
+                const entryLabel = EDITOR_STRINGS.itemName(label, index + 1);
+                return (_jsxs("div", { className: "forgebook-value-list__item", children: [_jsxs("div", { className: "forgebook-value-record__entry", children: [_jsx(EntryName, { name: name, others: names.filter((other) => other !== name), label: entryLabel, onRename: (to) => rename(name, to) }), _jsx("div", { className: "forgebook-value-list__field", children: drawField({
+                                        shape: shape.of,
+                                        value: each,
+                                        label: EDITOR_STRINGS.fieldValue(entryLabel, name),
+                                        namedValues,
+                                        depth: depth + 1,
+                                        onChange: (next) => change(name, next)
+                                    }) })] }), _jsx("div", { className: "forgebook-value-list__buttons", children: _jsx("button", { type: "button", className: "forgebook-prop__action", "aria-label": EDITOR_STRINGS.removeItem(entryLabel), title: EDITOR_STRINGS.removeItem(entryLabel), onClick: () => {
+                                    const { [name]: _removed, ...rest } = current;
+                                    onChange(rest);
+                                }, children: _jsx(Icon, { name: "close", size: 12 }) }) })] }, index));
+            }), _jsxs("button", { type: "button", className: "forgebook-text-button forgebook-value-add", disabled: start === undefined, onClick: () => {
+                    if (start !== undefined)
+                        onChange({ ...current, [newName()]: start });
+                }, children: [_jsx(Icon, { name: "plus", size: 12 }), EDITOR_STRINGS.addItem(label)] })] }));
+};

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

@@ -0,0 +1,42 @@
+/**
+ * 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 { type ReactNode } from "react";
+/** One option of the list. */
+export type SearchOption = {
+    /** What choosing it gives. */
+    readonly value: string;
+    /** What it is called. */
+    readonly label: string;
+    /** What it holds, beside its name; none by default. */
+    readonly hint?: string;
+    /** A colour to show beside its name; none by default. */
+    readonly swatch?: string;
+};
+/** The list's props. */
+export type SearchSelectProps = {
+    /** The field's name. */
+    readonly label: string;
+    /** The element that describes it. */
+    readonly describedBy?: string | undefined;
+    /** The options. */
+    readonly options: readonly SearchOption[];
+    /** The chosen value; none when nothing is. */
+    readonly value: string | undefined;
+    /** Whether the list offers "no value"; `true` by default. */
+    readonly canClear?: boolean;
+    /** Called with the chosen value; none for "no value". */
+    readonly onChange: (value: string | undefined) => void;
+};
+/**
+ * A list to search.
+ *
+ * @param props - the options and the chosen value.
+ */
+export declare const SearchSelect: ({ label, describedBy, options, value, canClear, onChange }: SearchSelectProps) => ReactNode;

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;