@graview/primitives 0.1.65 → 0.1.67

package/dist/better-panel.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { layer } from "@graview/core";
+import { Fragment, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { VISUALLY_HIDDEN } from "./primitives/measure.js";
+const PHONE = 640;
+const WIDE = 372;
+const DRAWER = 1100;
+const dockOf = () => (typeof innerWidth !== "number" || innerWidth >= DRAWER ? "side" : innerWidth >= PHONE ? "drawer" : "sheet");
+/** The app's bar along the top of the window: the shell's, else a header that spans it. */
+function barOf() {
+    const named = document.querySelector('[data-testid="app-bar"]');
+    if (named)
+        return named;
+    return [...document.querySelectorAll("header")].find((one) => {
+        const box = one.getBoundingClientRect();
+        return box.top <= 1 && box.width >= innerWidth * 0.8 && box.height > 0;
+    }) ?? null;
+}
+/** What holds the page under the bar: the widest box around the page's own region that is not around the bar too. */
+function contentOf(bar) {
+    let at = document.querySelector("[data-graview-page-main], main");
+    while (at?.parentElement && at.parentElement !== document.body && !(bar && at.parentElement.contains(bar)))
+        at = at.parentElement;
+    return at;
+}
+/**
+ * THE PANEL IS PART OF THE PAGE. Beside it, it is docked flush under the
+ * app's bar, at the right, down to the window's foot, and what holds the
+ * page gives up its width — the bar spans the window as always, and
+ * nothing behind the panel shows. Where the window is narrow it is a
+ * drawer over the page's right side, and on a phone a sheet from the
+ * bottom with room left below the page. Followed each frame: a bar that
+ * scrolls away leaves the panel the window's full height.
+ */
+function useDock(panel) {
+    const [dock, setDock] = useState(dockOf);
+    useLayoutEffect(() => {
+        const body = document.body.style;
+        const bottom = body.paddingBottom;
+        let content = null;
+        let right = "";
+        let frame = 0;
+        const give = (to, wide) => {
+            if (content && content !== to)
+                content.style.paddingRight = right;
+            if (to && to !== content)
+                right = to.style.paddingRight;
+            content = to;
+            if (content)
+                content.style.paddingRight = wide ? `${WIDE}px` : right;
+        };
+        const place = () => {
+            const now = dockOf();
+            setDock(now);
+            const bar = barOf();
+            const top = Math.max(0, Math.round(bar?.getBoundingClientRect().bottom ?? 0));
+            if (panel.current && now !== "sheet")
+                panel.current.style.top = `${top}px`;
+            give(contentOf(bar), now === "side");
+            body.paddingBottom = now === "sheet" ? `${Math.round((panel.current?.getBoundingClientRect().height ?? 0) + 16)}px` : bottom;
+            frame = requestAnimationFrame(place);
+        };
+        place();
+        return () => {
+            cancelAnimationFrame(frame);
+            give(null, false);
+            body.paddingBottom = bottom;
+        };
+    }, [panel]);
+    return dock;
+}
+/** Minutes and seconds: "0:42". */
+const elapsed = (ms) => `${Math.floor(ms / 60_000)}:${String(Math.floor((ms % 60_000) / 1000)).padStart(2, "0")}`;
+export function BetterPanel(props) {
+    const panel = useRef(null);
+    const list = useRef(null);
+    const field = useRef(null);
+    const [typed, setTyped] = useState("");
+    const [, tick] = useState(0);
+    const dock = useDock(panel);
+    /* The running time, while it works. */
+    useEffect(() => {
+        if (!props.working)
+            return;
+        const timer = setInterval(() => tick((one) => one + 1), 1000);
+        return () => clearInterval(timer);
+    }, [props.working]);
+    /* The newest line in view, and the keyboard in the words field once it is the person's turn. */
+    useEffect(() => {
+        // Within the conversation only: scrolling the newest line into view must never move the panel, nor hide the first line under its head.
+        if (list.current)
+            list.current.scrollTop = list.current.scrollHeight;
+    }, [props.talk.length, props.steps.length]);
+    useEffect(() => {
+        if (!props.working)
+            field.current?.focus({ preventScroll: true });
+    }, [props.working, props.phase]);
+    const lastAsked = props.talk.map((line) => line.who).lastIndexOf("person");
+    const steps = props.steps.length > 0 ? (_jsx("li", { "data-testid": "better-steps", style: STEPS, children: _jsx("ol", { style: { margin: 0, padding: 0, listStyle: "none", display: "grid", gap: 3 }, children: props.steps.map((step, at) => {
+                const now = props.working && at === props.steps.length - 1;
+                return (_jsxs("li", { "data-testid": "better-step", "data-step-kind": step.kind, style: { display: "flex", gap: 6, alignItems: "baseline", color: now ? "var(--graview-ink)" : "var(--graview-ink-muted)" }, children: [_jsx("span", { "aria-hidden": "true", style: { width: 14, flex: "none", color: step.kind === "check" || step.kind === "stuck" ? "var(--graview-warn)" : "var(--graview-accent)" }, children: now ? "…" : step.kind === "check" || step.kind === "stuck" ? "!" : "✓" }), _jsx("span", { children: step.text })] }, `s${at}`));
+            }) }) })) : null;
+    const empty = props.talk.length === 0;
+    return (_jsxs("aside", { ref: panel, role: "complementary", "aria-label": `Change how “${props.name}” looks`, "data-testid": "better-panel", "data-better-phase": props.phase, "data-better-dock": dock, "data-graview-popover": "", style: dock === "sheet" ? SHEET : dock === "drawer" ? DRAWER_STYLE : SIDE, children: [_jsxs("header", { style: HEAD, children: [_jsxs("p", { style: { margin: 0, fontWeight: 600 }, children: ["Change how \u201C", props.name, "\u201D looks"] }), _jsx("button", { type: "button", "data-testid": "better-close", "aria-label": "Close", onClick: props.close, style: ICON, children: "\u00D7" })] }), _jsx("p", { "data-testid": "better-scope", style: QUIET_LINE, children: props.scope }), props.about ? (_jsxs("p", { "data-testid": "better-about", style: CHIP, children: ["About: ", props.about] })) : null, _jsxs("ol", { ref: list, "data-testid": "better-talk", style: TALK, children: [props.talk.map((line, at) => (_jsxs(Fragment, { children: [_jsx("li", { "data-testid": "better-message", "data-who": line.who, style: line.who === "person" ? MINE : THEIRS, children: line.said }), at === lastAsked ? steps : null] }, `t${at}`))), lastAsked < 0 ? steps : null] }), props.working ? (_jsxs("div", { style: ROW, children: [_jsxs("p", { role: "status", "aria-live": "polite", "data-testid": "better-working", style: { margin: 0, flex: 1, color: "var(--graview-ink-muted)" }, children: ["Graview is working on \u201C", props.name, "\u201D \u00B7 ", _jsx("span", { "data-testid": "better-time", children: elapsed(Date.now() - props.since) })] }), _jsx("button", { type: "button", "data-testid": "better-stop", onClick: props.stop, style: QUIET, children: "Stop" })] })) : null, props.draft && !props.working ? (_jsxs("div", { "data-testid": "better-draft", style: { flexShrink: 0, display: "grid", gap: 6 }, children: [_jsx("p", { "data-testid": "better-changed", style: { margin: 0 }, children: props.draft.said }), _jsxs("div", { style: ROW, children: [_jsx("div", { role: "group", "aria-label": "Compare", style: SWITCH, children: ["Before", "After"].map((side) => {
+                                    const on = side === "Before" ? props.draft.before : !props.draft.before;
+                                    return (_jsx("button", { type: "button", "data-testid": `better-${side.toLowerCase()}`, "aria-pressed": on, onClick: () => props.compare(side === "Before"), style: on ? SWITCH_ON : SWITCH_OFF, children: side }, side));
+                                }) }), _jsxs("span", { style: { marginLeft: "auto", display: "inline-flex", gap: 6 }, children: [_jsx("button", { type: "button", "data-testid": "better-keep", onClick: props.keep, style: PRIMARY, children: "Keep" }), _jsx("button", { type: "button", "data-testid": "better-discard", onClick: props.discard, style: QUIET, children: "Discard" })] })] })] })) : null, props.stuck && !props.working ? (_jsxs("div", { "data-testid": "better-stuck", style: ROW, children: [props.stuck.keepAnyway ? (_jsx("button", { type: "button", "data-testid": "better-keep-anyway", onClick: props.stuck.keepAnyway, style: QUIET, children: "Keep anyway" })) : null, _jsx("button", { type: "button", "data-testid": "better-stuck-stop", onClick: props.stuck.stop, style: QUIET, children: "Stop" })] })) : null, props.children, props.kept && !props.working ? (_jsxs("div", { "data-testid": "better-kept", style: ROW, children: [_jsx("p", { style: { margin: 0, flex: 1 }, children: props.kept.note ? (/^kept\b/i.test(props.kept.note.trim()) ? props.kept.note.trim() : `Kept. ${props.kept.note}`) : "Kept." }), props.kept.undo ? (_jsx("button", { type: "button", "data-testid": "better-undo", onClick: props.kept.undo, style: QUIET, children: "Undo" })) : null] })) : null, empty && !props.working ? (_jsxs("div", { style: ROW, children: [_jsx("button", { type: "button", "data-testid": "better-just", onClick: props.just, style: QUIET, children: "Make it easier to read" }), _jsx("button", { type: "button", "data-testid": "better-point", onClick: props.point, style: QUIET, children: "Point at a part\u2026" })] })) : null, props.pointed && !props.working ? (_jsxs("p", { "data-testid": "better-pointed", style: QUIET_LINE, children: ["You pointed at ", props.pointed, "."] })) : null, _jsxs("form", { onSubmit: (event) => {
+                    event.preventDefault();
+                    if (!typed.trim() || props.working)
+                        return;
+                    props.ask(typed.trim());
+                    setTyped("");
+                }, style: { flexShrink: 0, display: "flex", gap: 6 }, children: [_jsx("label", { htmlFor: "graview-better-panel-words", style: VISUALLY_HIDDEN, children: "Tell Graview what to change" }), _jsx("input", { id: "graview-better-panel-words", ref: field, "data-testid": "better-words", value: typed, disabled: props.working, onChange: (event) => setTyped(event.target.value), placeholder: empty ? "What should change?" : "Tell Graview what to change…", style: FIELD }), _jsx("button", { type: "submit", disabled: props.working || !typed.trim(), "data-testid": "better-send", style: PRIMARY, children: "Send" })] })] }));
+}
+/* The shell's own surface, one line from the page: part of the app, in its light and dark alike. */
+const BASE = {
+    position: "fixed",
+    zIndex: layer("popover"),
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "column",
+    gap: 10,
+    padding: 14,
+    margin: 0,
+    fontSize: "0.875rem",
+    lineHeight: 1.45,
+    color: "var(--graview-ink)",
+    background: "var(--graview-panel)",
+    overflow: "hidden",
+};
+const SIDE = { ...BASE, top: 0, right: 0, bottom: 0, width: WIDE, borderLeft: "1px solid var(--graview-edge)" };
+const DRAWER_STYLE = { ...SIDE, width: `min(${WIDE}px, 86vw)`, boxShadow: "var(--graview-lift-high, -12px 0 32px rgba(0,0,0,0.18))" };
+const SHEET = { ...BASE, left: 0, right: 0, bottom: 0, maxHeight: "55vh", borderTop: "1px solid var(--graview-edge)", borderRadius: "14px 14px 0 0", boxShadow: "var(--graview-lift-high, 0 -12px 32px rgba(0,0,0,0.18))" };
+const CHIP = { flexShrink: 0, margin: 0, justifySelf: "start", alignSelf: "flex-start", padding: "2px 10px", borderRadius: 999, fontSize: "0.8125rem", color: "var(--graview-ink)", background: "var(--graview-ground)", border: "1px solid var(--graview-edge)" };
+const HEAD = { flexShrink: 0, display: "flex", alignItems: "center", gap: 8, justifyContent: "space-between" };
+const QUIET_LINE = { flexShrink: 0, margin: 0, fontSize: "0.8125rem", color: "var(--graview-ink-muted)" };
+const TALK = { margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8, overflowY: "auto", flex: "1 1 0", minHeight: 0 };
+const BUBBLE = { padding: "7px 10px", borderRadius: 10, maxWidth: "88%", whiteSpace: "pre-wrap", flex: "none" };
+const MINE = { ...BUBBLE, alignSelf: "flex-end", background: "color-mix(in srgb, var(--graview-accent) 12%, var(--graview-panel))" };
+const THEIRS = { ...BUBBLE, alignSelf: "flex-start", background: "var(--graview-ground)" };
+const STEPS = { flex: "none", padding: "6px 10px", borderRadius: 10, border: "1px dashed var(--graview-edge)", fontSize: "0.8125rem" };
+const ROW = { flexShrink: 0, display: "flex", flexWrap: "wrap", alignItems: "center", gap: 6 };
+const BUTTON = { minHeight: 32, padding: "0 12px", borderRadius: 8, fontSize: "0.8125rem", cursor: "pointer" };
+const PRIMARY = { ...BUTTON, color: "var(--graview-accent-ink, #fff)", background: "var(--graview-accent)", border: "1px solid var(--graview-accent)" };
+const QUIET = { ...BUTTON, color: "var(--graview-ink)", background: "transparent", border: "1px solid var(--graview-edge)" };
+const ICON = { ...QUIET, minHeight: 28, padding: "0 9px", fontSize: "1rem", lineHeight: 1 };
+const FIELD = { flex: "1 1 auto", minWidth: 0, minHeight: 34, padding: "0 10px", borderRadius: 8, border: "1px solid var(--graview-edge)", background: "var(--graview-panel)", color: "var(--graview-ink)", fontSize: "0.875rem" };
+const SWITCH = { display: "inline-flex", border: "1px solid var(--graview-edge)", borderRadius: 999, padding: 2 };
+const SWITCH_ON = { ...BUTTON, minHeight: 28, borderRadius: 999, border: "none", color: "var(--graview-accent-ink, #fff)", background: "var(--graview-accent)" };
+const SWITCH_OFF = { ...BUTTON, minHeight: 28, borderRadius: 999, border: "none", color: "var(--graview-ink)", background: "transparent" };
+//# sourceMappingURL=better-panel.js.map

package/dist/better-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"better-panel.js","sourceRoot":"","sources":["../src/better-panel.tsx"],"names":[],"mappings":"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"}

package/dist/editable.d.ts

@@ -14,7 +14,7 @@ import { type CSSProperties } from "react";
  * it undoable, and what the invariants judge. Writing the graph here would
  * create the one class of change nobody could take back.
  */
-export declare function EditableValue<S extends AnySchema>({ nodeId, field, value, stored, said, blank, }: {
+export declare function EditableValue<S extends AnySchema>({ nodeId, field, value, stored, said, blank, late, }: {
     readonly nodeId: string;
     readonly field: string;
     /** The value as a person reads it: "Aug 28, 2026", "Tue". */
@@ -35,6 +35,13 @@ export declare function EditableValue<S extends AnySchema>({ nodeId, field, valu
      * `said` names it ("Add Allocation").
      */
     readonly blank?: boolean;
+    /**
+     * A DATE A RULE SAYS IS LATE (Roadmap f-facts-by-type): drawn in the
+     * warning color. Said by the page from its problems — a repair that asks
+     * for this field again — never guessed from the date alone: a talk given
+     * in 2017 is past, not late.
+     */
+    readonly late?: boolean;
 }): import("react").JSX.Element;
 /**
  * A PHONE OR A PLACE, AS WHERE IT LEADS: a `tel:` link that calls it, or a

package/dist/editable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editable.d.ts","sourceRoot":"","sources":["../src/editable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"editable.d.ts","sourceRoot":"","sources":["../src/editable.tsx"],"names":[],"mappings":"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"}

package/dist/editable.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { fieldWords, humanizeField as humanize, TYPE_TEXT } from "@graview/core";
-import { valueWords } from "@graview/core/words";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { defOf, fieldWords, humanizeField as humanize, TYPE_TEXT } from "@graview/core";
+import { failureWords, valueWords } from "@graview/core/words";
 import { amountBox, amountInBox, endAfterStartMoved, pageSections, parseDuration, readableFields, readAmount, startAndEndOf } from "@graview/core/words";
 import { fileFieldsOf } from "@graview/core/blocks";
 import { useEditableFields } from "@graview/react/drawing";
@@ -12,6 +12,7 @@ import { AppLink } from "./app-link-door.js";
 import { LinkedRecordView } from "./linked-record-door.js";
 import { RepeatEditor } from "./repeat-picker-door.js";
 import { prefetchWhenInput, WhenInput } from "./when-input-door.js";
+import { todayOf, whenSaid } from "./when-words.js";
 /**
  * One field's value, changeable where it is shown when something can change
  * it — and visibly read-only when nothing can.
@@ -26,8 +27,8 @@ import { prefetchWhenInput, WhenInput } from "./when-input-door.js";
  * it undoable, and what the invariants judge. Writing the graph here would
  * create the one class of change nobody could take back.
  */
-export function EditableValue({ nodeId, field, value, stored = value, said, blank = false, }) {
-    const { fields, commit } = useEditableFields(nodeId);
+export function EditableValue({ nodeId, field, value, stored = value, said, blank = false, late = false, }) {
+    const { fields, commit: send } = useEditableFields(nodeId);
     const editable = fields.find((candidate) => candidate.field === field);
     // The field as the declaration says it: a tooltip read "changes "plannedAt"".
     const { store, principal } = useGraview();
@@ -35,7 +36,11 @@ export function EditableValue({ nodeId, field, value, stored = value, said, blan
     const definition = store.schema.definitions.find((one) => one.kind === kind);
     const fact = fieldWords(definition, field);
     const words = fact.toLowerCase();
-    const named = said ?? `${fact.charAt(0).toUpperCase()}${fact.slice(1)}: ${value}`;
+    // An empty slot is named by what it does, with the fact where its words do not say it: "Add notes", "Due: pick a day".
+    const emptied = blank && editable ? blankWords(editable, fact) : undefined;
+    const named = emptied !== undefined
+        ? emptied.toLowerCase().includes(words) ? emptied : `${fact.charAt(0).toUpperCase()}${fact.slice(1)}: ${emptied.charAt(0).toLowerCase()}${emptied.slice(1)}`
+        : said ?? `${fact.charAt(0).toUpperCase()}${fact.slice(1)}: ${value}`;
     const [editing, setEditing] = useState(false);
     // An amount is edited as it is said, less its symbol: "10,000" beside "$", never a bare 10000 (money said as money).
     const amount = editable?.shape.type === "number" ? editable.shape.amount : undefined;
@@ -58,6 +63,22 @@ export function EditableValue({ nodeId, field, value, stored = value, said, blan
     const comeBack = useRef(false);
     /* What emptying a field it cannot be without said, beside the value it kept (Roadmap f-clear-date-in-place). */
     const [refused, setRefused] = useState(undefined);
+    /*
+     * A CHANGE THE STORE REFUSES IS SAID BESIDE ITS VALUE (Roadmap
+     * f-facts-by-type): a length past its longest, a rule's own refusal, in
+     * the words a form would say it — never a page error with the value
+     * quietly as it was.
+     */
+    const refusing = (run) => {
+        try {
+            run();
+            setRefused(undefined);
+        }
+        catch (error) {
+            setRefused(failureWords(store.schema, store.allMutations(), error));
+        }
+    };
+    const commit = (writer, next) => refusing(() => send(writer, next));
     const close = (keepTheKeyboard) => {
         comeBack.current = keepTheKeyboard;
         setEditing(false);
@@ -82,15 +103,72 @@ export function EditableValue({ nodeId, field, value, stored = value, said, blan
             opener.current?.focus();
         }
     }, [editing]);
+    /*
+     * EACH VALUE BY ITS TYPE (Roadmap f-facts-by-type). A yes or no is a
+     * switch, a day is said with its weekday and how far it is, a choice of a
+     * few is its options side by side and of many a menu — each still the one
+     * act the framework found, so the change is in the history and can be
+     * taken back. The scene's card and the record's page draw the same.
+     */
+    const record = store.graph.getNode(nodeId);
+    const kept = record?.[field];
+    const declared = definition?.fields?.shape?.[field];
+    const formatted = definition?.display?.format?.[field];
+    const yesNo = typeof kept === "boolean" || ((kept === undefined || kept === null) && baseTypeOf(declared) === "boolean");
+    // A date that repeats says how, and the next one ("Every Tuesday, next Oct 27"): its own words, kept.
+    const repeats = record?.[`${field}Repeat`] !== undefined || Object.hasOwn(definition?.fields?.shape ?? {}, `${field}Repeat`);
+    const when = formatted === undefined && !blank && !repeats && typeof kept === "string" ? whenSaid(kept, todayOf(store)) : undefined;
+    const shown = when ? when.words : value;
+    const lateStyle = late && when?.past ? { color: "var(--graview-warn)" } : {};
+    const worked = definition?.computed !== undefined && Object.hasOwn(definition.computed, field);
+    const refusal = refused ? (_jsx("span", { role: "status", "data-graview-refused": field, style: { marginLeft: 6, fontSize: "0.75rem", color: "var(--graview-ink-muted)" }, children: refused })) : null;
+    if (editable && yesNo) {
+        const on = kept === true;
+        const writers = [editable, ...editable.alternatives];
+        const byValue = writers.find((one) => one.takesValue && one.shape.type === "boolean");
+        // A writer that takes the value is sent the other one; acts that take none, the one that would change it ("Mark it done", or "Put it back").
+        const call = byValue ? byValue.call(!on) : writers.map((one) => one.call(undefined)).find((one) => store.wouldChange(one, principal));
+        if (call) {
+            const words = value || (formatted ? formatted(on) : on ? "Yes" : "No");
+            const act = writers.find((one) => one.mutation === call.name) ?? editable;
+            return (_jsxs("span", { style: { display: "inline-flex", alignItems: "center", flexWrap: "wrap", gap: 6, maxWidth: "100%" }, children: [_jsxs("button", { type: "button", role: "switch", "aria-checked": on, "aria-label": `${fact.charAt(0).toUpperCase()}${fact.slice(1)}`, "data-graview-field": field, "data-graview-editable": act.mutation, "data-graview-switch": "", title: `${act.title} — changes the ${fact.toLowerCase()}, and can be undone`, onClick: () => refusing(() => store.apply(call, { author: principal })), style: SWITCH, children: [_jsx("span", { "aria-hidden": "true", "data-graview-track": "", style: { ...TRACK, background: on ? "var(--graview-accent)" : "color-mix(in oklab, var(--graview-ink) 24%, transparent)" }, children: _jsx("span", { style: { ...KNOB, transform: on ? "translateX(12px)" : "none", background: on ? "var(--graview-accent-ink, #fff)" : "var(--graview-ground)" } }) }), _jsx("span", { "aria-hidden": "true", children: words })] }), refusal] }));
+        }
+    }
     if (!editable) {
-        return (_jsx("span", { "data-graview-field": field, "data-graview-readonly": "", 
+        return (_jsxs("span", { "data-graview-field": field, "data-graview-readonly": "", 
             // Said, not merely implied: a value that ignores a click looks broken.
-            title: `Read-only — nothing this app declares changes the ${words}`, 
+            title: `Read-only — nothing in this app changes the ${words}`, 
             // An address, a VIN, a URL has nowhere to break: it breaks anywhere rather than run into the next column.
-            style: { color: "var(--graview-ink)", cursor: "default", overflowWrap: "anywhere" }, children: value }));
+            style: { color: "var(--graview-ink)", cursor: "default", overflowWrap: "anywhere", ...lateStyle }, children: [shown, worked ? (_jsx("span", { "data-graview-worked-out": "", title: "Worked out from the other facts; it changes when they do", style: { marginLeft: 8, fontSize: "0.75rem", color: "var(--graview-ink-faint)" }, children: "worked out" })) : null] }));
+    }
+    /*
+     * A CHOICE IS ITS OPTIONS (Roadmap f-facts-by-type): a few, side by side,
+     * the one chosen pressed — one press to change; many, a menu that opens
+     * at the first press. Before, the value opened a menu that then had to be
+     * opened again.
+     */
+    if (!editing && editable.takesValue && editable.shape.type === "choice" && editable.open.length === 0) {
+        const options = editable.shape.options;
+        const chosen = typeof kept === "string" ? kept : "";
+        const name = `${fact.charAt(0).toUpperCase()}${fact.slice(1)}`;
+        const few = options.length <= 4 && options.every((option) => valueWords(definition, field, option).length <= 14);
+        const pick = (next) => {
+            if (next === chosen)
+                return;
+            if (next === "") {
+                if (editable.clearable)
+                    commit(editable, null);
+                return;
+            }
+            commit(editable, next);
+        };
+        return (_jsxs("span", { style: { display: "inline-flex", alignItems: "center", flexWrap: "wrap", gap: 6, maxWidth: "100%" }, children: [few ? (_jsx("span", { role: "group", "aria-label": name, "data-graview-field": field, "data-graview-editable": editable.mutation, "data-graview-choices": field, style: SEGMENTS, children: options.map((option) => {
+                        const pressed = option === chosen;
+                        return (_jsx("button", { type: "button", "aria-pressed": pressed, "data-graview-option": option, title: `${editable.title} — changes the ${words}, and can be undone`, onClick: () => pick(option), style: { ...SEGMENT, ...(pressed ? SEGMENT_ON : {}) }, children: valueWords(definition, field, option) }, option));
+                    }) })) : (_jsxs("select", { "aria-label": name, "data-graview-field": field, "data-graview-editable": editable.mutation, title: `${editable.title} — changes the ${words}, and can be undone`, value: chosen, onChange: (event) => pick(event.target.value), style: MENU, children: [chosen === "" || editable.clearable ? _jsx("option", { value: "", children: chosen === "" && !editable.clearable ? "Choose…" : "None" }) : null, options.map((option) => (_jsx("option", { value: option, children: valueWords(definition, field, option) }, option)))] })), refusal] }));
     }
     if (!editing) {
-        const button = (_jsx("button", { ref: opener, type: "button", "data-graview-field": field, "data-graview-editable": editable.mutation, ...(blank ? { "data-graview-blank": "" } : {}), ...(named === value ? {} : { "aria-label": named }), title: `${editable.title} — changes the ${words}, and can be undone`, onClick: () => {
+        const button = (_jsxs("button", { ref: opener, type: "button", "data-graview-field": field, "data-graview-editable": editable.mutation, ...(blank ? { "data-graview-blank": "" } : {}), ...(named === value ? {} : { "aria-label": named }), title: `${editable.title} — changes the ${words}, and can be undone`, onClick: () => {
                 setRefused(undefined);
                 setEditing(true);
             }, style: {
@@ -118,12 +196,13 @@ export function EditableValue({ nodeId, field, value, stored = value, said, blan
                 overflowWrap: "anywhere",
                 paddingBottom: 1,
                 borderBottom: "1px dashed var(--graview-edge-bright)",
-                // An empty slot says "add", dim beside the values that are there.
+                // An empty slot says what pressing it does, dim beside the values that are there.
                 color: blank ? "var(--graview-ink-muted)" : "var(--graview-ink)",
-            }, children: blank ? "add" : value }));
+                ...lateStyle,
+            }, children: [blank ? blankWords(editable, fact) : shown, !blank && !editable.takesValue ? _jsx("span", { "aria-hidden": "true", style: { marginLeft: 4, fontSize: "0.75em", color: "var(--graview-ink-faint)" }, children: "\u25BE" }) : null] }));
         if (!refused)
             return button;
-        return (_jsxs(_Fragment, { children: [button, _jsx("span", { role: "status", "data-graview-refused": field, style: { marginLeft: 6, fontSize: "0.75rem", color: "var(--graview-ink-muted)" }, children: refused })] }));
+        return (_jsxs(_Fragment, { children: [button, refusal] }));
     }
     /** Commit the draft. `left` says the person already moved the keyboard elsewhere. */
     const done = (next, { left = false } = {}) => {
@@ -145,6 +224,19 @@ export function EditableValue({ nodeId, field, value, stored = value, said, blan
                 setRefused(`${fact.charAt(0).toUpperCase()}${fact.slice(1)} can't be empty; it keeps ${value}.`);
             return;
         }
+        /*
+         * A NUMBER PAST ITS RANGE IS SAID SO, IN WORDS, BESIDE IT (Roadmap
+         * f-facts-by-type): the box's own range stopped Enter in silence on one
+         * engine and in a bubble that left on another.
+         */
+        if (editable.shape.type === "number" && typeof next === "number" && Number.isFinite(next)) {
+            const { min, max } = editable.shape;
+            const Fact = `${fact.charAt(0).toUpperCase()}${fact.slice(1)}`;
+            if (max !== undefined && next > max)
+                return void setRefused(`${Fact} is at most ${max}; it keeps ${value}.`);
+            if (min !== undefined && next < min)
+                return void setRefused(`${Fact} is at least ${min}; it keeps ${value}.`);
+        }
         if (editable.shape.type === "date" && typeof next === "string" && withItsEnd(next))
             return;
         commit(editable, next);
@@ -171,7 +263,7 @@ export function EditableValue({ nodeId, field, value, stored = value, said, blan
             return false;
         const starting = editable.call(next);
         const following = ending.call(moved);
-        store.applyAll(starting.name === following.name ? [{ name: starting.name, args: { ...starting.args, ...following.args } }] : [starting, following], { author: principal });
+        refusing(() => store.applyAll(starting.name === following.name ? [{ name: starting.name, args: { ...starting.args, ...following.args } }] : [starting, following], { author: principal }));
         return true;
     };
     /*
@@ -225,7 +317,9 @@ export function EditableValue({ nodeId, field, value, stored = value, said, blan
                     close(false);
             }, children: [_jsx("legend", { style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: humanize(field) }), options.map((option, index) => (_jsxs("label", { style: { display: "inline-flex", alignItems: "center", gap: 4, minHeight: 24, cursor: "pointer" }, children: [_jsx("input", { ref: index === 0 ? input : undefined, type: "checkbox", value: option, checked: chosen.includes(option), onChange: (event) => sendChosen(event.target.checked ? [...chosen, option] : chosen.filter((one) => one !== option)) }), valueWords(definition, field, option)] }, option)))] }));
     }
-    return (_jsxs("form", { style: { display: "inline-flex", flexWrap: "wrap", gap: 4, maxWidth: "100%" }, onSubmit: (event) => {
+    return (_jsxs("form", { 
+        // The range is said in words beside the value when it is passed (`done`), never stopped in silence by the box.
+        noValidate: true, style: { display: "inline-flex", flexWrap: "wrap", gap: 4, maxWidth: "100%" }, onSubmit: (event) => {
             event.preventDefault();
             done(coerce(editable, draft));
         }, children: [editable.shape.type === "choice" ? (_jsxs("select", { ref: input, "aria-label": humanize(field), "data-graview-field": field, value: draft, onChange: (event) => done(event.target.value), onBlur: () => close(false), style: { font: "inherit", fontSize: "inherit" }, children: [draft === "" ? _jsx("option", { value: "", disabled: true, children: "Choose\u2026" }) : null, editable.shape.options.map((option) => (_jsx("option", { value: option, children: valueWords(definition, field, option) }, option)))] })) : editable.shape.type === "date" ? (
@@ -392,7 +486,7 @@ function EditableProse({ nodeId, field, label, value, labelStyle, valueStyle, st
                             close(!left);
                             if (draft !== value)
                                 commit(editable, draft);
-                        } }) })) : (_jsx("div", { "data-graview-field": field, ...(editable ? {} : { "data-graview-readonly": "", title: `Read-only — nothing this app declares changes the ${words}` }), ...(editable ? { onClick: () => setEditing(true) } : {}), style: { cursor: editable ? "text" : "default", minWidth: 0 }, children: drawn })) })] }));
+                        } }) })) : (_jsx("div", { "data-graview-field": field, ...(editable ? {} : { "data-graview-readonly": "", title: `Read-only — nothing in this app changes the ${words}` }), ...(editable ? { onClick: () => setEditing(true) } : {}), style: { cursor: editable ? "text" : "default", minWidth: 0 }, children: drawn })) })] }));
 }
 /* The text area, fetched the first time somebody opens one (FR-57's way: a page's first load carries what it draws). */
 const ProseEditor = lazy(() => import("./prose-editor.js"));
@@ -436,4 +530,34 @@ export function EditableTitle({ nodeId, children, }) {
     // A heading's words, said as they are: the heading says what it is.
     return _jsx(EditableValue, { nodeId: nodeId, field: writable.field, value: children, said: children });
 }
+/** What a declared field holds under optional, default and nullable: "boolean", "string", "enum". */
+function baseTypeOf(schema) {
+    const def = defOf(schema);
+    if (!def)
+        return undefined;
+    return def.type === "optional" || def.type === "nullable" || def.type === "default" ? baseTypeOf(def.innerType) : def.type;
+}
+/**
+ * WHAT AN EMPTY SLOT SAYS PRESSING IT DOES (Roadmap f-facts-by-type): "Pick
+ * a day" beside "Due", "Choose…" beside a choice, "Add notes" beside
+ * "Notes" — not a bare "add" that names nothing.
+ */
+function blankWords(editable, fact) {
+    const shape = editable.shape;
+    if (shape.type === "date")
+        return shape.time ? "Pick a day and time" : "Pick a day";
+    if (shape.type === "choice" || (shape.type === "several" && shape.of.type === "choice"))
+        return "Choose…";
+    return `Add ${fact.toLowerCase()}`;
+}
+/* A yes or no: a switch with its word beside it, at least 24 pixels tall like every target here. */
+const SWITCH = { all: "unset", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 8, minHeight: 24, minWidth: 24, color: "var(--graview-ink)" };
+const TRACK = { position: "relative", display: "inline-block", width: 28, height: 16, borderRadius: 8, flex: "none", transition: "background 120ms" };
+const KNOB = { position: "absolute", top: 2, left: 2, width: 12, height: 12, borderRadius: 6, background: "var(--graview-ground)", transition: "transform 120ms" };
+/* A choice of a few: its options side by side, the chosen one filled — one hairline round them, no box per option. */
+const SEGMENTS = { display: "inline-flex", flexWrap: "wrap", gap: 2, padding: 2, borderRadius: 8, border: "1px solid var(--graview-edge)", maxWidth: "100%" };
+const SEGMENT = { all: "unset", cursor: "pointer", minHeight: 24, minWidth: 24, padding: "0 10px", display: "inline-flex", alignItems: "center", borderRadius: 6, fontSize: "0.875em", color: "var(--graview-ink-muted)" };
+const SEGMENT_ON = { background: "var(--graview-accent)", color: "var(--graview-accent-ink, #fff)" };
+/* A choice of many: the menu itself, as quiet as a value, open at a press. */
+const MENU = { font: "inherit", fontSize: "inherit", color: "var(--graview-ink)", background: "transparent", border: 0, borderBottom: "1px dashed var(--graview-edge-bright)", borderRadius: 0, padding: "0 2px", minHeight: 24, maxWidth: "100%", cursor: "pointer" };
 //# sourceMappingURL=editable.js.map