@issuegraph/editor 0.1.0

package/dist/picker/render.d.ts

@@ -0,0 +1,80 @@
+/**
+ * The type picker, the direction statement and the flip control, as markup.
+ *
+ * ## Every readable byte comes from the host or from the document
+ *
+ * This surface renders no word of its own — not in a text node, and not in an
+ * `aria-label`. That is stricter than the rest of this package (the scale
+ * ladder writes its own chip labels), and it is stricter deliberately: what is
+ * being worded here is a RELATIONSHIP, so a phrase written in would be an
+ * English clause in the one place the design says a reader most often gets the
+ * encoding wrong. `render.test.ts` enforces it by asserting that every text node
+ * is either a {@link ./words.ts PickerWords} entry or an issue reference — a
+ * total claim rather than a spot check, so a word added later fails rather than
+ * slipping in.
+ *
+ * ## The default word order is a DEFAULT
+ *
+ * The statement is drawn subject · phrase · object, which is a word order and
+ * therefore a presentation choice this layer is not entitled to impose. It is
+ * offered as the ordinary case and bypassed the same way the re-evaluate
+ * summary's is: {@link ./view.ts PickerView} carries the ordered pair and the
+ * kind and no order beyond that, so a host that needs another arrangement
+ * renders the view model. Nothing here is load-bearing for it.
+ *
+ * ## It publishes commands and wires nothing
+ *
+ * `data-ig-command="retype"` with a `data-ig-kind`, and
+ * `data-ig-command="flip"`. Listener wiring, focus and dispatch belong to the
+ * mount, exactly as the scale ladder and the re-evaluate surface already defer
+ * them — and the proposal each command stands for is on the view model, so a
+ * mount reads it rather than reconstructing it from attributes.
+ *
+ * ## It names itself without claiming a heading level
+ *
+ * The label is a paragraph, and the list carries the same words as its
+ * `aria-label`. A heading would be a claim about the HOST's document outline —
+ * whether this picker is a section of something, and at what depth — which a
+ * package rendered into an unknown page cannot make. A host that wants it in
+ * the outline wraps it in a heading of its own choosing.
+ */
+import { type Theme } from '@issuegraph/viewer';
+import type { EdgeId, GraphDocument } from '@issuegraph/store';
+import { type PickerView } from './view.ts';
+import type { PickerWords } from './words.ts';
+export interface PickerOptions {
+    /**
+     * The words. Required — see {@link PickerWords} for why this package will not
+     * invent them.
+     */
+    readonly words: PickerWords;
+    readonly theme?: Theme | undefined;
+    /** The selector the theme's custom properties are written onto. */
+    readonly themeSelector?: string | undefined;
+}
+export interface PickerResult {
+    readonly view: PickerView;
+    /** The picker, the statement and the flip control, under one root. */
+    readonly markup: string;
+    /**
+     * The theme and this surface's own stylesheet. Install both.
+     *
+     * The VIEWER's stylesheet is deliberately not among them, which is where the
+     * scale ladder and the re-evaluate surface differ — both draw viewer elements
+     * and so must ship the rules for them. This surface draws none, so including
+     * them would ship a sheet whose every selector matches nothing here, and a
+     * host that installs the picker alone would take the whole canvas stylesheet
+     * with it. A host drawing a viewer installs the viewer's own.
+     */
+    readonly styles: string;
+    readonly diagnostics: readonly string[];
+}
+/**
+ * The picker for one existing edge.
+ *
+ * Takes a DOCUMENT and an edge id — never a store and never a source. A host
+ * hands the proposals on {@link PickerResult.view} to `Store.propose`, which is
+ * the only thing in the family that dispatches.
+ */
+export declare function renderPicker(document: GraphDocument, edgeId: EdgeId, options: PickerOptions): PickerResult;
+//# sourceMappingURL=render.d.ts.map

package/dist/picker/render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/picker/render.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEH,OAAO,EAEL,KAAK,KAAK,EAKX,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAA4C,KAAK,UAAU,EAAc,MAAM,WAAW,CAAC;AAElG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IACnC,mEAAmE;IACnE,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC7C;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;IAC1B,sEAAsE;IACtE,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB;;;;;;;;;OASG;IACH,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,WAAW,EAAE,SAAS,MAAM,EAAE,CAAC;CACzC;AAiDD;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,QAAQ,EAAE,aAAa,EACvB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,aAAa,GACrB,YAAY,CAiCd"}

package/dist/picker/render.js

@@ -0,0 +1,112 @@
+/**
+ * The type picker, the direction statement and the flip control, as markup.
+ *
+ * ## Every readable byte comes from the host or from the document
+ *
+ * This surface renders no word of its own — not in a text node, and not in an
+ * `aria-label`. That is stricter than the rest of this package (the scale
+ * ladder writes its own chip labels), and it is stricter deliberately: what is
+ * being worded here is a RELATIONSHIP, so a phrase written in would be an
+ * English clause in the one place the design says a reader most often gets the
+ * encoding wrong. `render.test.ts` enforces it by asserting that every text node
+ * is either a {@link ./words.ts PickerWords} entry or an issue reference — a
+ * total claim rather than a spot check, so a word added later fails rather than
+ * slipping in.
+ *
+ * ## The default word order is a DEFAULT
+ *
+ * The statement is drawn subject · phrase · object, which is a word order and
+ * therefore a presentation choice this layer is not entitled to impose. It is
+ * offered as the ordinary case and bypassed the same way the re-evaluate
+ * summary's is: {@link ./view.ts PickerView} carries the ordered pair and the
+ * kind and no order beyond that, so a host that needs another arrangement
+ * renders the view model. Nothing here is load-bearing for it.
+ *
+ * ## It publishes commands and wires nothing
+ *
+ * `data-ig-command="retype"` with a `data-ig-kind`, and
+ * `data-ig-command="flip"`. Listener wiring, focus and dispatch belong to the
+ * mount, exactly as the scale ladder and the re-evaluate surface already defer
+ * them — and the proposal each command stands for is on the view model, so a
+ * mount reads it rather than reconstructing it from attributes.
+ *
+ * ## It names itself without claiming a heading level
+ *
+ * The label is a paragraph, and the list carries the same words as its
+ * `aria-label`. A heading would be a claim about the HOST's document outline —
+ * whether this picker is a section of something, and at what depth — which a
+ * package rendered into an unknown page cannot make. A host that wants it in
+ * the outline wraps it in a heading of its own choosing.
+ */
+import { element, renderMarkup, resolveTheme, themeCss, } from '@issuegraph/viewer';
+import { pickerView } from "./view.js";
+import { pickerStylesheet } from "./styles.js";
+/** One row of the picker. The phrase is the host's; everything else is data. */
+function optionSpec(option, words) {
+    return element('li', {
+        class: 'ig-picker-kind',
+        'data-ig-kind': option.kind,
+        'data-directed': option.directed ? 'true' : 'false',
+        'data-current': option.current ? 'true' : 'false',
+    }, [
+        element('button', {
+            type: 'button',
+            class: 'ig-picker-choice',
+            'data-ig-command': 'retype',
+            'data-ig-kind': option.kind,
+            // A radio group's checked member, spelled for assistive technology.
+            // The current kind is still OFFERED — hiding it would be a second
+            // validity rule out here, and the store already refuses the edit.
+            'aria-pressed': option.current ? 'true' : 'false',
+        }, [
+            element('span', { class: 'ig-picker-phrase' }, [words.kinds[option.kind]]),
+            option.current ? element('span', { class: 'ig-picker-current' }, [words.current]) : null,
+        ]),
+    ]);
+}
+/**
+ * The direction statement.
+ *
+ * The two references are the DOCUMENT's, not this package's words, and each
+ * carries the role it plays so a host can restyle or reorder them without
+ * parsing the sentence back apart.
+ */
+function directionSpec(direction, words) {
+    return element('p', { class: 'ig-picker-direction', 'data-ig-kind': direction.kind }, [
+        element('span', { class: 'ig-picker-ref', 'data-ig-role': 'from' }, [direction.from]),
+        element('span', { class: 'ig-picker-phrase' }, [words.kinds[direction.kind]]),
+        element('span', { class: 'ig-picker-ref', 'data-ig-role': 'to' }, [direction.to]),
+    ]);
+}
+/**
+ * The picker for one existing edge.
+ *
+ * Takes a DOCUMENT and an edge id — never a store and never a source. A host
+ * hands the proposals on {@link PickerResult.view} to `Store.propose`, which is
+ * the only thing in the family that dispatches.
+ */
+export function renderPicker(document, edgeId, options) {
+    const view = pickerView(document, edgeId);
+    const theme = resolveTheme(options.theme);
+    const { words } = options;
+    const root = element('section', { class: 'ig-picker', 'data-ig-edge': view.edgeId }, [
+        element('p', { class: 'ig-picker-heading' }, [words.heading]),
+        view.options.length === 0
+            ? null
+            : element('ul', { class: 'ig-picker-kinds', 'aria-label': words.heading }, view.options.map((option) => optionSpec(option, words))),
+        // Symmetric kinds render NEITHER of the next two. The absence is the
+        // finding: a control to reverse a relationship that carries no direction
+        // would claim the format says something it does not.
+        view.direction === null ? null : directionSpec(view.direction, words),
+        view.flip === null
+            ? null
+            : element('button', { type: 'button', class: 'ig-picker-flip', 'data-ig-command': 'flip' }, [words.flip]),
+    ]);
+    return {
+        view,
+        markup: renderMarkup(root),
+        styles: `${themeCss(theme, options.themeSelector ?? ':root')}\n${pickerStylesheet}`,
+        diagnostics: [...view.diagnostics],
+    };
+}
+//# sourceMappingURL=render.js.map

package/dist/picker/render.js.map

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

package/dist/picker/styles.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The picker's structural stylesheet.
+ *
+ * Same contract as the ladder's and the overlay's: layout, weight and state,
+ * never a value. Every colour, length and font is a var(--ig-...) the host's
+ * theme resolves, and styles.test.ts scans these bytes for a literal colour, a
+ * fixed length, and a token the theme does not define — so the rule is enforced
+ * rather than remembered.
+ *
+ * IT ADDS SELECTORS RATHER THAN REDEFINING THEM. Nothing here reaches into the
+ * viewer's own classes; this file styles only what the picker introduces.
+ *
+ * ## The statement is laid out as a FLEX ROW, and that is load-bearing
+ *
+ * render.ts draws the statement subject, phrase, object, and calls that word
+ * order a default a host may bypass. A flex row is what makes the bypass cheap:
+ * the CSS order property reorders flex children, so a host whose language puts
+ * the relationship elsewhere restyles rather than re-implements. Laying it out
+ * as inline text would have made the claim in render.ts true only in principle.
+ *
+ * Shipped as a string for the same reason the viewer's is: an entry that
+ * imports CSS cannot be loaded by a bare Node runtime, and a string needs no
+ * bundler.
+ */
+export declare const pickerStylesheet = "\n.ig-picker {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ig-space);\n  font-family: var(--ig-font-ui);\n  font-size: var(--ig-font-size);\n  line-height: var(--ig-line-height);\n  color: var(--ig-text-body);\n}\n\n.ig-picker-heading {\n  margin: 0;\n  font-weight: normal;\n  font-size: var(--ig-font-size-small);\n  color: var(--ig-text-muted);\n}\n\n.ig-picker-kinds {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--ig-space-tight);\n}\n\n.ig-picker-choice {\n  display: flex;\n  align-items: baseline;\n  gap: var(--ig-space-tight);\n  width: 100%;\n  text-align: left;\n  background: var(--ig-surface);\n  color: var(--ig-text-body);\n  border: var(--ig-stroke) solid var(--ig-line);\n  border-radius: var(--ig-radius);\n  padding: var(--ig-space-tight);\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.ig-picker-choice:focus-visible,\n.ig-picker-flip:focus-visible {\n  outline: var(--ig-focus-ring) solid var(--ig-focus);\n  outline-offset: var(--ig-stroke);\n}\n\n/* The kind the edge already carries. Marked on the ROW rather than on the\n   button, so a host restyling the control keeps the distinction. */\n.ig-picker-kind[data-current='true'] .ig-picker-choice {\n  background: var(--ig-surface-2);\n  border-color: var(--ig-accent);\n  color: var(--ig-text);\n}\n\n.ig-picker-current {\n  margin-left: auto;\n  font-size: var(--ig-font-size-small);\n  color: var(--ig-text-muted);\n}\n\n/* Wraps rather than truncates: a qualified reference is long, and a statement\n   whose object is cut off says something other than what the format holds. */\n.ig-picker-direction {\n  margin: 0;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: var(--ig-space-tight);\n  color: var(--ig-text-body);\n}\n\n.ig-picker-ref {\n  font-family: var(--ig-font-mono);\n  color: var(--ig-accent);\n}\n\n.ig-picker-flip {\n  align-self: flex-start;\n  background: var(--ig-surface);\n  color: var(--ig-text-body);\n  border: var(--ig-stroke) solid var(--ig-line);\n  border-radius: var(--ig-radius);\n  padding: var(--ig-space-tight);\n  font-family: inherit;\n  font-size: var(--ig-font-size-small);\n  line-height: inherit;\n}\n";
+//# sourceMappingURL=styles.d.ts.map

package/dist/picker/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/picker/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,eAAO,MAAM,gBAAgB,ktEA0F5B,CAAC"}

package/dist/picker/styles.js

@@ -0,0 +1,116 @@
+/**
+ * The picker's structural stylesheet.
+ *
+ * Same contract as the ladder's and the overlay's: layout, weight and state,
+ * never a value. Every colour, length and font is a var(--ig-...) the host's
+ * theme resolves, and styles.test.ts scans these bytes for a literal colour, a
+ * fixed length, and a token the theme does not define — so the rule is enforced
+ * rather than remembered.
+ *
+ * IT ADDS SELECTORS RATHER THAN REDEFINING THEM. Nothing here reaches into the
+ * viewer's own classes; this file styles only what the picker introduces.
+ *
+ * ## The statement is laid out as a FLEX ROW, and that is load-bearing
+ *
+ * render.ts draws the statement subject, phrase, object, and calls that word
+ * order a default a host may bypass. A flex row is what makes the bypass cheap:
+ * the CSS order property reorders flex children, so a host whose language puts
+ * the relationship elsewhere restyles rather than re-implements. Laying it out
+ * as inline text would have made the claim in render.ts true only in principle.
+ *
+ * Shipped as a string for the same reason the viewer's is: an entry that
+ * imports CSS cannot be loaded by a bare Node runtime, and a string needs no
+ * bundler.
+ */
+export const pickerStylesheet = `
+.ig-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ig-space);
+  font-family: var(--ig-font-ui);
+  font-size: var(--ig-font-size);
+  line-height: var(--ig-line-height);
+  color: var(--ig-text-body);
+}
+
+.ig-picker-heading {
+  margin: 0;
+  font-weight: normal;
+  font-size: var(--ig-font-size-small);
+  color: var(--ig-text-muted);
+}
+
+.ig-picker-kinds {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ig-space-tight);
+}
+
+.ig-picker-choice {
+  display: flex;
+  align-items: baseline;
+  gap: var(--ig-space-tight);
+  width: 100%;
+  text-align: left;
+  background: var(--ig-surface);
+  color: var(--ig-text-body);
+  border: var(--ig-stroke) solid var(--ig-line);
+  border-radius: var(--ig-radius);
+  padding: var(--ig-space-tight);
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.ig-picker-choice:focus-visible,
+.ig-picker-flip:focus-visible {
+  outline: var(--ig-focus-ring) solid var(--ig-focus);
+  outline-offset: var(--ig-stroke);
+}
+
+/* The kind the edge already carries. Marked on the ROW rather than on the
+   button, so a host restyling the control keeps the distinction. */
+.ig-picker-kind[data-current='true'] .ig-picker-choice {
+  background: var(--ig-surface-2);
+  border-color: var(--ig-accent);
+  color: var(--ig-text);
+}
+
+.ig-picker-current {
+  margin-left: auto;
+  font-size: var(--ig-font-size-small);
+  color: var(--ig-text-muted);
+}
+
+/* Wraps rather than truncates: a qualified reference is long, and a statement
+   whose object is cut off says something other than what the format holds. */
+.ig-picker-direction {
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--ig-space-tight);
+  color: var(--ig-text-body);
+}
+
+.ig-picker-ref {
+  font-family: var(--ig-font-mono);
+  color: var(--ig-accent);
+}
+
+.ig-picker-flip {
+  align-self: flex-start;
+  background: var(--ig-surface);
+  color: var(--ig-text-body);
+  border: var(--ig-stroke) solid var(--ig-line);
+  border-radius: var(--ig-radius);
+  padding: var(--ig-space-tight);
+  font-family: inherit;
+  font-size: var(--ig-font-size-small);
+  line-height: inherit;
+}
+`;
+//# sourceMappingURL=styles.js.map

package/dist/picker/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/picker/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0F/B,CAAC"}

package/dist/picker/view.d.ts

@@ -0,0 +1,135 @@
+/**
+ * The type picker, as a view model: which kinds an edge can be retyped to,
+ * which way round it currently reads, and the single proposal each act emits.
+ *
+ * ## One user act, one `Proposal`
+ *
+ * `@issuegraph/store` closed the operation set at four — `create`, `delete`,
+ * `retype`, `flip` — and `mutation.ts` says why in as many words: `retype` and
+ * `flip` "are their own operations rather than a delete followed by a create,
+ * because the design requires a retype to be one operation, one round trip and
+ * one undo entry". This module is the surface that emits them, so its whole job
+ * is to hand out ONE proposal per affordance. Composing two here would undo the
+ * property the store went out of its way to model.
+ *
+ * ## Directedness is READ, never listed
+ *
+ * §17b: a directed type renders as a sentence with an explicit flip control,
+ * "because 'which way round' is the most common encoding mistake"; a symmetric
+ * type shows no flip. Which kinds are which is a fact about the FORMAT, and
+ * `@issuegraph/core` already owns it — `isSymmetricEdgeField` over
+ * `EDGE_FIELDS`. So this module imports it rather than restating the split.
+ *
+ * That is why `@issuegraph/core` is a dependency of this package and not only
+ * of its two siblings. Core is the layer both the viewer and the store already
+ * sit on, and the seam rule in `eslint.config.mjs` refuses a sibling's SUBPATH,
+ * never its bare specifier — reaching for the shared foundation is not reaching
+ * past a surface. The rejected alternative was a local
+ * `const DIRECTED = ['blocked-by', …]`, which is the drifting second
+ * implementation the package family removes everywhere else it appears: a sixth
+ * field added to the format would leave it silently wrong, and nothing would
+ * fail.
+ *
+ * ## It offers the kind the edge already has, on purpose
+ *
+ * A picker that hid the current kind would be a SECOND validity rule living out
+ * here, and the store already refuses that edit — `structuralRefusal` answers
+ * `unchanged-kind` and the record never reaches a `DataSource`. So the option
+ * is offered and marked {@link KindOption.current}, which is what a radio group
+ * needs anyway: the current value is the checked one. Validity stays in one
+ * place, and this module stays presentation.
+ *
+ * ## Retyping ACROSS the split keeps the pair, and that is a decision
+ *
+ * A `serialize-with` edge retyped to `blocked-by` becomes directed, and the
+ * direction it lands with is the carrier pair the format already recorded —
+ * `StoredEdge` keeps that pair even for a symmetric kind, precisely so an
+ * editor knows which issue carries the field. Nothing here infers a direction;
+ * it carries the one that was already written down.
+ *
+ * The rejected shape was a per-option PREVIEW: every option carrying the
+ * statement it would produce, so the direction is chosen at the same moment as
+ * the kind. It was rejected because it doubles what the picker says in order to
+ * pre-empt a case the surface already answers — the retype lands, the picker
+ * re-derives from the new document, and the direction is then STATED with a
+ * flip beside it, one act from correct. §17b's rule is that direction is stated
+ * rather than inferred, and it is stated. Revisit this if the flip turns out to
+ * be reached often enough to be the real cost.
+ *
+ * ## It writes no words and holds no state
+ *
+ * {@link DirectionStatement} is the ordered pair and the kind. The sentence is
+ * the host's, for the same reason `change.ts` ships counts rather than prose and
+ * `overlay/grammar.ts` ships an `InvalidCode` rather than a message: a default
+ * sentence here would be a language choice a consumer could not theme away.
+ */
+import { type EdgeId, type EdgeKind, type GraphDocument, type IssueRef, type Proposal } from '@issuegraph/store';
+/**
+ * Which way round a relationship reads, as data.
+ *
+ * `from` and `to` are the edge's own pair, which for a directed kind IS the
+ * reading order — `StoredEdge` keeps "A blocked-by B" as `from: A`, `to: B`.
+ * The kind travels with them because a pair alone cannot be worded.
+ *
+ * There is deliberately no `text`. A host renders "#530 is blocked by #602" in
+ * its own language and its own word order; see {@link ./words.ts PickerWords}.
+ */
+export interface DirectionStatement {
+    readonly kind: EdgeKind;
+    readonly from: IssueRef;
+    readonly to: IssueRef;
+}
+/** One entry in the type picker. */
+export interface KindOption {
+    readonly kind: EdgeKind;
+    /**
+     * Whether this kind carries a direction, read from the format rather than
+     * decided here. A host uses it to word the option; the picker uses the
+     * TARGET's directedness to decide whether a flip control exists at all.
+     */
+    readonly directed: boolean;
+    /**
+     * The kind the edge already carries. Presentation only — the store owns
+     * whether choosing it is a valid edit, and it refuses it as `unchanged-kind`.
+     */
+    readonly current: boolean;
+    /** The one proposal choosing this option emits. Never two. */
+    readonly proposal: Proposal;
+}
+/**
+ * The control that reverses a directed relationship.
+ *
+ * `null` on a symmetric kind — not "present but disabled". A symmetric edge has
+ * no direction to reverse, so a control for it is a claim the format does not
+ * make, and the store would refuse the edit as `symmetric-edge` anyway.
+ */
+export interface FlipControl {
+    /** What the relationship would read as afterwards. The reverse pair. */
+    readonly reversed: DirectionStatement;
+    /** Exactly one proposal. `flip` is an operation, not a delete plus a create. */
+    readonly proposal: Proposal;
+}
+export interface PickerView {
+    /** The edge this picker was opened on, whether or not it was found. */
+    readonly edgeId: EdgeId;
+    /** Every kind in the format's order. Empty only when the edge is gone. */
+    readonly options: readonly KindOption[];
+    /** `null` for a symmetric kind: there is no direction to state. */
+    readonly direction: DirectionStatement | null;
+    /** `null` exactly when {@link direction} is. The two travel together. */
+    readonly flip: FlipControl | null;
+    readonly diagnostics: readonly string[];
+}
+/**
+ * The picker for one existing edge.
+ *
+ * Pure and synchronous, and it takes a document rather than a store — which is
+ * what makes "emits proposals, never touches a `DataSource`" structural. There
+ * is no port in scope here to touch. A host hands the proposals it gets back to
+ * `Store.propose`, which is the only thing that dispatches.
+ *
+ * The create path is not here. It lands with the change that assembles the
+ * workspace, alongside the other affordances `index.ts` defers.
+ */
+export declare function pickerView(document: GraphDocument, edgeId: EdgeId): PickerView;
+//# sourceMappingURL=view.d.ts.map

package/dist/picker/view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../src/picker/view.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AAGH,OAAO,EACL,KAAK,MAAM,EACX,KAAK,QAAQ,EACb,KAAK,aAAa,EAClB,KAAK,QAAQ,EACb,KAAK,QAAQ,EAEd,MAAM,mBAAmB,CAAC;AAE3B;;;;;;;;;GASG;AACH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IACxB,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IACxB,QAAQ,CAAC,EAAE,EAAE,QAAQ,CAAC;CACvB;AAED,oCAAoC;AACpC,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,8DAA8D;IAC9D,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC;CAC7B;AAED;;;;;;GAMG;AACH,MAAM,WAAW,WAAW;IAC1B,wEAAwE;IACxE,QAAQ,CAAC,QAAQ,EAAE,kBAAkB,CAAC;IACtC,gFAAgF;IAChF,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC;CAC7B;AAED,MAAM,WAAW,UAAU;IACzB,uEAAuE;IACvE,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,0EAA0E;IAC1E,QAAQ,CAAC,OAAO,EAAE,SAAS,UAAU,EAAE,CAAC;IACxC,mEAAmE;IACnE,QAAQ,CAAC,SAAS,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAC9C,yEAAyE;IACzE,QAAQ,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,QAAQ,CAAC,WAAW,EAAE,SAAS,MAAM,EAAE,CAAC;CACzC;AAkBD;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,GAAG,UAAU,CAwB9E"}

package/dist/picker/view.js

@@ -0,0 +1,117 @@
+/**
+ * The type picker, as a view model: which kinds an edge can be retyped to,
+ * which way round it currently reads, and the single proposal each act emits.
+ *
+ * ## One user act, one `Proposal`
+ *
+ * `@issuegraph/store` closed the operation set at four — `create`, `delete`,
+ * `retype`, `flip` — and `mutation.ts` says why in as many words: `retype` and
+ * `flip` "are their own operations rather than a delete followed by a create,
+ * because the design requires a retype to be one operation, one round trip and
+ * one undo entry". This module is the surface that emits them, so its whole job
+ * is to hand out ONE proposal per affordance. Composing two here would undo the
+ * property the store went out of its way to model.
+ *
+ * ## Directedness is READ, never listed
+ *
+ * §17b: a directed type renders as a sentence with an explicit flip control,
+ * "because 'which way round' is the most common encoding mistake"; a symmetric
+ * type shows no flip. Which kinds are which is a fact about the FORMAT, and
+ * `@issuegraph/core` already owns it — `isSymmetricEdgeField` over
+ * `EDGE_FIELDS`. So this module imports it rather than restating the split.
+ *
+ * That is why `@issuegraph/core` is a dependency of this package and not only
+ * of its two siblings. Core is the layer both the viewer and the store already
+ * sit on, and the seam rule in `eslint.config.mjs` refuses a sibling's SUBPATH,
+ * never its bare specifier — reaching for the shared foundation is not reaching
+ * past a surface. The rejected alternative was a local
+ * `const DIRECTED = ['blocked-by', …]`, which is the drifting second
+ * implementation the package family removes everywhere else it appears: a sixth
+ * field added to the format would leave it silently wrong, and nothing would
+ * fail.
+ *
+ * ## It offers the kind the edge already has, on purpose
+ *
+ * A picker that hid the current kind would be a SECOND validity rule living out
+ * here, and the store already refuses that edit — `structuralRefusal` answers
+ * `unchanged-kind` and the record never reaches a `DataSource`. So the option
+ * is offered and marked {@link KindOption.current}, which is what a radio group
+ * needs anyway: the current value is the checked one. Validity stays in one
+ * place, and this module stays presentation.
+ *
+ * ## Retyping ACROSS the split keeps the pair, and that is a decision
+ *
+ * A `serialize-with` edge retyped to `blocked-by` becomes directed, and the
+ * direction it lands with is the carrier pair the format already recorded —
+ * `StoredEdge` keeps that pair even for a symmetric kind, precisely so an
+ * editor knows which issue carries the field. Nothing here infers a direction;
+ * it carries the one that was already written down.
+ *
+ * The rejected shape was a per-option PREVIEW: every option carrying the
+ * statement it would produce, so the direction is chosen at the same moment as
+ * the kind. It was rejected because it doubles what the picker says in order to
+ * pre-empt a case the surface already answers — the retype lands, the picker
+ * re-derives from the new document, and the direction is then STATED with a
+ * flip beside it, one act from correct. §17b's rule is that direction is stated
+ * rather than inferred, and it is stated. Revisit this if the flip turns out to
+ * be reached often enough to be the real cost.
+ *
+ * ## It writes no words and holds no state
+ *
+ * {@link DirectionStatement} is the ordered pair and the kind. The sentence is
+ * the host's, for the same reason `change.ts` ships counts rather than prose and
+ * `overlay/grammar.ts` ships an `InvalidCode` rather than a message: a default
+ * sentence here would be a language choice a consumer could not theme away.
+ */
+import { EDGE_FIELDS, isSymmetricEdgeField } from '@issuegraph/core';
+import { findEdge, } from '@issuegraph/store';
+/** An empty picker, for a target that is not in the document. */
+function nothingToPick(edgeId) {
+    return {
+        edgeId,
+        options: [],
+        direction: null,
+        flip: null,
+        // REPORTED RATHER THAN DRAWN AS AN EMPTY PICKER. A picker with no options
+        // and no reason looks like a kind vocabulary that came back empty, and the
+        // false conclusion is "this edge can be nothing" rather than "this edge is
+        // no longer here". The state is reachable in ordinary use: a sibling write
+        // can land a delete of the edge while its picker is open.
+        diagnostics: [`${edgeId} is no longer an edge in this document; there is nothing to retype`],
+    };
+}
+/**
+ * The picker for one existing edge.
+ *
+ * Pure and synchronous, and it takes a document rather than a store — which is
+ * what makes "emits proposals, never touches a `DataSource`" structural. There
+ * is no port in scope here to touch. A host hands the proposals it gets back to
+ * `Store.propose`, which is the only thing that dispatches.
+ *
+ * The create path is not here. It lands with the change that assembles the
+ * workspace, alongside the other affordances `index.ts` defers.
+ */
+export function pickerView(document, edgeId) {
+    const edge = findEdge(document, edgeId);
+    if (edge === undefined)
+        return nothingToPick(edgeId);
+    const options = EDGE_FIELDS.map((kind) => {
+        const proposal = { op: 'retype', edgeId: edge.id, nextKind: kind };
+        return { kind, directed: !isSymmetricEdgeField(kind), current: kind === edge.kind, proposal };
+    });
+    if (isSymmetricEdgeField(edge.kind)) {
+        return { edgeId, options, direction: null, flip: null, diagnostics: [] };
+    }
+    const proposal = { op: 'flip', edgeId: edge.id };
+    return {
+        edgeId,
+        options,
+        direction: { kind: edge.kind, from: edge.from, to: edge.to },
+        flip: {
+            reversed: { kind: edge.kind, from: edge.to, to: edge.from },
+            proposal,
+        },
+        diagnostics: [],
+    };
+}
+//# sourceMappingURL=view.js.map

package/dist/picker/view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../../src/picker/view.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AAEH,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACrE,OAAO,EAML,QAAQ,GACT,MAAM,mBAAmB,CAAC;AA8D3B,iEAAiE;AACjE,SAAS,aAAa,CAAC,MAAc;IACnC,OAAO;QACL,MAAM;QACN,OAAO,EAAE,EAAE;QACX,SAAS,EAAE,IAAI;QACf,IAAI,EAAE,IAAI;QACV,0EAA0E;QAC1E,2EAA2E;QAC3E,2EAA2E;QAC3E,2EAA2E;QAC3E,0DAA0D;QAC1D,WAAW,EAAE,CAAC,GAAG,MAAM,oEAAoE,CAAC;KAC7F,CAAC;AACJ,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,UAAU,CAAC,QAAuB,EAAE,MAAc;IAChE,MAAM,IAAI,GAAG,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IACxC,IAAI,IAAI,KAAK,SAAS;QAAE,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC;IAErD,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAc,EAAE;QACnD,MAAM,QAAQ,GAAa,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;QAC7E,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC;IAChG,CAAC,CAAC,CAAC;IAEH,IAAI,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;QACpC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC;IAC3E,CAAC;IAED,MAAM,QAAQ,GAAa,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC;IAC3D,OAAO;QACL,MAAM;QACN,OAAO;QACP,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE;QAC5D,IAAI,EAAE;YACJ,QAAQ,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE;YAC3D,QAAQ;SACT;QACD,WAAW,EAAE,EAAE;KAChB,CAAC;AACJ,CAAC"}