@antelopejs/dms 0.5.6 → 0.6.0

package/frontend-vue/layers/dms-ui/app/build/composables/unsaved-changes/registry.ts

@@ -0,0 +1,216 @@
+/**
+ * Every form holding unsaved changes, wherever it is (a page, a drawer, a
+ * modal, a settings panel), and the one confirmation asked before leaving
+ * them: closing their container, navigating away, switching the tab they sit
+ * in, going back in the browser or reloading the page.
+ *
+ * Plain TypeScript (no Vue context): `useUnsavedChanges` registers the forms
+ * and hands over the dialog to show.
+ */
+
+/** Asks the user whether to throw the changes away; `true` to leave. */
+export type DiscardPrompt = () => Promise<boolean>;
+
+export interface UnsavedChangesSource {
+  /** Whether the form currently holds unsaved changes. */
+  isDirty: () => boolean;
+  /** The drawer or modal it sits in: closing that container leaves it. */
+  containerId?: string;
+  /** Its root element: switching away from a tab panel leaves what it holds. */
+  element?: () => Element | null | undefined;
+}
+
+export interface UnsavedChangesEntry extends UnsavedChangesSource {
+  /** The dialog this form asks with (every form asks the same one). */
+  prompt: DiscardPrompt;
+  /**
+   * The user chose to discard its changes: it no longer holds anyone back
+   * (a closing drawer after a confirmed navigation asks nothing more) until
+   * it is clean again.
+   */
+  released: boolean;
+}
+
+/** Which forms a leave concerns; every form when left empty. */
+export interface LeaveScope {
+  /** The forms of one drawer or modal. */
+  containerId?: string;
+  /** The forms inside an element (a tab panel about to be hidden). */
+  within?: Element | null;
+  /** One form only. */
+  entry?: UnsavedChangesEntry;
+}
+
+const entries = new Set<UnsavedChangesEntry>();
+let pendingPrompt: Promise<boolean> | null = null;
+
+function inScope(entry: UnsavedChangesEntry, scope: LeaveScope): boolean {
+  if (scope.entry && scope.entry !== entry) return false;
+  if (
+    scope.containerId !== undefined &&
+    entry.containerId !== scope.containerId
+  )
+    return false;
+  if (scope.within !== undefined) {
+    const element = entry.element?.();
+    return !!element && !!scope.within?.contains(element);
+  }
+  return true;
+}
+
+/** Adds a form; returns the entry and the function removing it. */
+export function registerUnsavedChanges(
+  source: UnsavedChangesSource,
+  prompt: DiscardPrompt,
+): { entry: UnsavedChangesEntry; unregister: () => void } {
+  const entry: UnsavedChangesEntry = { ...source, prompt, released: false };
+  entries.add(entry);
+  return { entry, unregister: () => entries.delete(entry) };
+}
+
+/** The forms of a scope still holding changes nobody chose to discard. */
+export function pendingUnsavedChanges(
+  scope: LeaveScope = {},
+): UnsavedChangesEntry[] {
+  return [...entries].filter(
+    (entry) => !entry.released && entry.isDirty() && inScope(entry, scope),
+  );
+}
+
+/** Whether leaving the scope would lose changes. */
+export function hasUnsavedChanges(scope: LeaveScope = {}): boolean {
+  return pendingUnsavedChanges(scope).length > 0;
+}
+
+/**
+ * Asks once before leaving the forms of a scope: resolves `true` straight
+ * away when none holds changes, else with the user's answer. A leave asked
+ * while the dialog is already open (Escape on a drawer closing during a
+ * navigation) waits for that same answer instead of opening a second one;
+ * discarding releases the forms so nothing asks again on the way out.
+ */
+export async function confirmLeave(scope: LeaveScope = {}): Promise<boolean> {
+  const dirty = pendingUnsavedChanges(scope);
+  if (dirty.length === 0) return true;
+  pendingPrompt ??= dirty[0]!.prompt().finally(() => {
+    pendingPrompt = null;
+  });
+  const shouldLeave = await pendingPrompt;
+  if (shouldLeave) {
+    for (const entry of pendingUnsavedChanges(scope)) entry.released = true;
+  }
+  return shouldLeave;
+}
+
+/** Forgets every form (tests). */
+export function resetUnsavedChanges(): void {
+  entries.clear();
+  pendingPrompt = null;
+}
+
+/** What the browser guards need from the app. */
+export interface BrowserLeaveGuardsOptions {
+  /** The path the page shows. */
+  path: () => string;
+  /** Runs a page visit again once the user chose to leave. */
+  revisit: (href: string) => unknown;
+}
+
+/** The part of a router visit the guard reads (Inertia's `inertia:before`). */
+interface PendingVisit {
+  url?: URL;
+  method?: string;
+  prefetch?: boolean;
+}
+
+/** The part of a Navigation API `navigate` event the guard reads. */
+interface TraverseEvent extends Event {
+  navigationType?: string;
+  cancelable: boolean;
+  destination?: { url: string; key: string; sameDocument: boolean };
+}
+
+interface NavigationLike extends EventTarget {
+  traverseTo: (key: string) => unknown;
+}
+
+let browserGuardsInstalled = false;
+let currentPath: () => string = () => window.location.pathname;
+let revisit: (href: string) => unknown = (href) => {
+  window.location.href = href;
+};
+// The user chose to leave: the history step run again goes through.
+let isTraversing = false;
+
+/**
+ * Whether a router visit leaves the page holding unsaved changes: a page
+ * visit to another path. A prefetch on hover, a background refresh of the
+ * same page or a request sending data leaves nothing.
+ */
+export function isLeavingVisit(
+  visit: PendingVisit | undefined,
+  path: string,
+): visit is PendingVisit & { url: URL } {
+  if (!visit?.url || visit.prefetch) return false;
+  if (visit.method && visit.method.toLowerCase() !== "get") return false;
+  return visit.url.pathname !== path;
+}
+
+/**
+ * The ways out the app's own navigation guard never sees, installed once:
+ * a link the router follows directly (`inertia:before`) is held and run again
+ * once the user chose to leave; the Back and Forward buttons are held the
+ * same way (the Navigation API's `navigate` event, the only one that comes
+ * before the router has swapped the page); reloading or closing the tab gets
+ * the native prompt (browsers show their own text there).
+ */
+export function installBrowserLeaveGuards(
+  options: BrowserLeaveGuardsOptions,
+): void {
+  currentPath = options.path;
+  revisit = options.revisit;
+  if (browserGuardsInstalled || typeof window === "undefined") return;
+  browserGuardsInstalled = true;
+
+  document.addEventListener("inertia:before", (event) => {
+    const visit = (event as CustomEvent<{ visit?: PendingVisit }>).detail
+      ?.visit;
+    if (!isLeavingVisit(visit, currentPath())) return;
+    if (!hasUnsavedChanges()) return;
+    event.preventDefault();
+    const { pathname, search, hash } = visit.url;
+    void confirmLeave().then((shouldLeave) => {
+      if (shouldLeave) revisit(`${pathname}${search}${hash}`);
+    });
+  });
+
+  window.addEventListener("beforeunload", (event) => {
+    if (!hasUnsavedChanges()) return;
+    event.preventDefault();
+    // Older browsers only prompt when a value is set.
+    event.returnValue = "";
+  });
+
+  const navigation = (window as unknown as { navigation?: NavigationLike })
+    .navigation;
+  navigation?.addEventListener("navigate", (event) => {
+    const traverse = event as TraverseEvent;
+    const destination = traverse.destination;
+    if (traverse.navigationType !== "traverse" || !destination) return;
+    if (isTraversing) {
+      isTraversing = false;
+      return;
+    }
+    // Another document unloads this one: `beforeunload` asks. A hash or
+    // query change keeps the page and its forms.
+    if (!destination.sameDocument || !traverse.cancelable) return;
+    if (new URL(destination.url).pathname === currentPath()) return;
+    if (!hasUnsavedChanges()) return;
+    traverse.preventDefault();
+    void confirmLeave().then((shouldLeave) => {
+      if (!shouldLeave) return;
+      isTraversing = true;
+      navigation.traverseTo(destination.key);
+    });
+  });
+}

package/frontend-vue/layers/dms-ui/app/build/types/tree.ts

@@ -52,6 +52,7 @@ function buildNavigationItem(
     to,
     variant: item.variant,
     status: item.status,
+    badge: item.badge,
     children: children.length > 0 ? children : undefined,
   };
 }

package/frontend-vue/layers/dms-ui/app/build/utils/accessibilityPreferences.ts

@@ -0,0 +1,138 @@
+// Accessibility preferences of the Appearance settings page. Like the theme
+// and the density they belong to the device: one cookie, read by the server,
+// so the classes they put on `<html>` are in the first paint. The page CSS
+// (dms-layout main.css) keys on those classes; JavaScript-driven motion
+// (charts) asks `isReducedMotionActive()`.
+
+/**
+ * `auto` follows the operating system's `prefers-reduced-motion`; `on` and
+ * `off` pin the choice whatever the system says.
+ */
+export type ReduceMotionPreference = "auto" | "on" | "off";
+
+export interface AccessibilityPreferences {
+  reduceMotion: ReduceMotionPreference;
+  increaseContrast: boolean;
+  underlineLinks: boolean;
+}
+
+export const ACCESSIBILITY_COOKIE = "dms-accessibility";
+
+export const DEFAULT_ACCESSIBILITY_PREFERENCES: Readonly<AccessibilityPreferences> =
+  Object.freeze({
+    reduceMotion: "auto",
+    increaseContrast: false,
+    underlineLinks: false,
+  });
+
+/** The `<html>` classes the preferences map to. */
+export const ACCESSIBILITY_HTML_CLASSES = Object.freeze({
+  /** Motion pinned off: animations and transitions collapse to ~0ms. */
+  reduceMotion: "dms-reduce-motion",
+  /** Motion pinned on: the system's reduced-motion setting is ignored. */
+  fullMotion: "dms-full-motion",
+  increaseContrast: "dms-increase-contrast",
+  underlineLinks: "dms-underline-links",
+});
+
+export const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+
+const REDUCE_MOTION_PREFERENCES: ReduceMotionPreference[] = [
+  "auto",
+  "on",
+  "off",
+];
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+/** The cookie as a value: already parsed, or the raw (URI-encoded) JSON. */
+function decodeCookieValue(raw: unknown): unknown {
+  if (typeof raw !== "string") return raw;
+  try {
+    return JSON.parse(decodeURIComponent(raw));
+  } catch {
+    return undefined;
+  }
+}
+
+function isReduceMotionPreference(
+  value: unknown,
+): value is ReduceMotionPreference {
+  return REDUCE_MOTION_PREFERENCES.includes(value as ReduceMotionPreference);
+}
+
+/**
+ * Reads the cookie into complete preferences: a missing, malformed or
+ * unknown field falls back to its default, so a cookie written by another
+ * version never breaks the page.
+ */
+export function parseAccessibilityPreferences(
+  raw: unknown,
+): AccessibilityPreferences {
+  const value = decodeCookieValue(raw);
+  const source = isRecord(value) ? value : {};
+  return {
+    reduceMotion: isReduceMotionPreference(source.reduceMotion)
+      ? source.reduceMotion
+      : DEFAULT_ACCESSIBILITY_PREFERENCES.reduceMotion,
+    increaseContrast: source.increaseContrast === true,
+    underlineLinks: source.underlineLinks === true,
+  };
+}
+
+/**
+ * The `<html>` classes for the preferences. `auto` motion adds none: the CSS
+ * follows `prefers-reduced-motion` itself, so the server needs no guess.
+ */
+export function accessibilityHtmlClasses(
+  preferences: AccessibilityPreferences,
+): string[] {
+  const classes: string[] = [];
+  if (preferences.reduceMotion === "on")
+    classes.push(ACCESSIBILITY_HTML_CLASSES.reduceMotion);
+  if (preferences.reduceMotion === "off")
+    classes.push(ACCESSIBILITY_HTML_CLASSES.fullMotion);
+  if (preferences.increaseContrast)
+    classes.push(ACCESSIBILITY_HTML_CLASSES.increaseContrast);
+  if (preferences.underlineLinks)
+    classes.push(ACCESSIBILITY_HTML_CLASSES.underlineLinks);
+  return classes;
+}
+
+/** Whether motion is reduced, given what the system asks for. */
+export function resolveReducedMotion(
+  preference: ReduceMotionPreference,
+  systemPrefersReduced: boolean,
+): boolean {
+  if (preference === "on") return true;
+  if (preference === "off") return false;
+  return systemPrefersReduced;
+}
+
+/** The motion preference written on `<html>`, `auto` when none is. */
+export function reduceMotionFromClasses(
+  classList: Pick<DOMTokenList, "contains">,
+): ReduceMotionPreference {
+  if (classList.contains(ACCESSIBILITY_HTML_CLASSES.reduceMotion)) return "on";
+  if (classList.contains(ACCESSIBILITY_HTML_CLASSES.fullMotion)) return "off";
+  return "auto";
+}
+
+/**
+ * Whether the page should skip JavaScript-driven motion right now: the
+ * `<html>` class when the user pinned a choice, the system otherwise. Always
+ * false on the server, which renders no animation.
+ */
+export function isReducedMotionActive(): boolean {
+  const classList = globalThis.document?.documentElement?.classList;
+  if (!classList) return false;
+  const systemPrefersReduced =
+    typeof matchMedia === "function" &&
+    matchMedia(REDUCED_MOTION_QUERY).matches;
+  return resolveReducedMotion(
+    reduceMotionFromClasses(classList),
+    systemPrefersReduced,
+  );
+}

package/frontend-vue/layers/dms-ui/app/build/utils/codeCells.ts

@@ -0,0 +1,12 @@
+/**
+ * Puts the caret in the first empty cell of a code entry (after a refused or
+ * partial code), or in its first cell when every cell is filled.
+ *
+ * @param container Element holding the cells
+ */
+export function focusFirstEmptyCell(container: HTMLElement | null): void {
+  const cells = [
+    ...(container?.querySelectorAll<HTMLInputElement>("input") ?? []),
+  ];
+  (cells.find((cell) => !cell.value) ?? cells[0])?.focus();
+}

package/frontend-vue/layers/dms-ui/app/build/utils/codeEditor.ts

@@ -0,0 +1,304 @@
+// The DMS code editor, built on CodeMirror: the look of the database query
+// console (gutter, current line, colours, autocomplete with icons and
+// details), for any form field holding code. Loaded on demand: a page only
+// pays for CodeMirror once it shows a code field.
+import {
+  autocompletion,
+  type Completion,
+  type CompletionContext,
+  type CompletionResult,
+  completionKeymap,
+  startCompletion,
+} from "@codemirror/autocomplete";
+import {
+  defaultKeymap,
+  history,
+  historyKeymap,
+  indentWithTab,
+} from "@codemirror/commands";
+import { html } from "@codemirror/lang-html";
+import { javascript } from "@codemirror/lang-javascript";
+import { json } from "@codemirror/lang-json";
+import { sql } from "@codemirror/lang-sql";
+import {
+  bracketMatching,
+  HighlightStyle,
+  syntaxHighlighting,
+} from "@codemirror/language";
+import { Compartment, EditorState, type Extension } from "@codemirror/state";
+import {
+  EditorView,
+  highlightActiveLine,
+  highlightActiveLineGutter,
+  keymap,
+  lineNumbers,
+  placeholder as placeholderText,
+  tooltips,
+} from "@codemirror/view";
+import { tags } from "@lezer/highlight";
+
+/** A suggestion of the autocomplete (interface-dms `CodeCompletion`). */
+export interface CodeEditorCompletion {
+  label: string;
+  detail?: string;
+  icon?: string;
+}
+
+/** Where the cursor stands, 1-based, for the status line. */
+export interface CodeEditorPosition {
+  line: number;
+  column: number;
+}
+
+export interface CodeEditorOptions {
+  parent: HTMLElement;
+  value: string;
+  language: string;
+  lineNumbers?: boolean;
+  placeholder?: string;
+  readOnly?: boolean;
+  /** Attributes of the editable area: its id, aria attributes. */
+  contentAttributes?: Record<string, string>;
+  /** The module's suggestions, merged with the language's keywords. */
+  completions?: () => Promise<CodeEditorCompletion[]>;
+  /** Draws a suggestion's icon (an icon name) into the popup. */
+  renderIcon?: (icon: string) => HTMLElement;
+  /** The popup's footer: how to pick a suggestion and how to leave. */
+  completionFooter?: string;
+  onChange: (value: string) => void;
+  onPosition: (position: CodeEditorPosition) => void;
+}
+
+export interface CodeEditor {
+  setValue: (value: string) => void;
+  setReadOnly: (readOnly: boolean) => void;
+  setContentAttributes: (attributes: Record<string, string>) => void;
+  focus: () => void;
+  destroy: () => void;
+}
+
+const LANGUAGES: Record<string, () => Extension> = {
+  json: () => json(),
+  sql: () => sql(),
+  html: () => html(),
+  javascript: () => javascript(),
+};
+
+// The query console's palette, read from the theme's variables so light and
+// dark follow the app.
+const HIGHLIGHT = HighlightStyle.define([
+  { tag: [tags.keyword, tags.operatorKeyword], color: "var(--ui-primary)" },
+  { tag: [tags.string, tags.special(tags.string)], color: "var(--ui-success)" },
+  { tag: [tags.number, tags.bool, tags.null], color: "var(--ui-warning)" },
+  { tag: [tags.comment], color: "var(--ui-text-dimmed)", fontStyle: "italic" },
+  { tag: [tags.propertyName, tags.attributeName], color: "var(--ui-info)" },
+  { tag: [tags.function(tags.variableName)], color: "var(--ui-primary)" },
+  { tag: [tags.tagName], color: "var(--ui-primary)" },
+  { tag: [tags.invalid], color: "var(--ui-error)" },
+]);
+
+const THEME = EditorView.theme({
+  "&": {
+    backgroundColor: "var(--ui-bg)",
+    color: "var(--ui-text-highlighted)",
+    fontSize: "12.5px",
+  },
+  "&.cm-focused": { outline: "none" },
+  ".cm-content": {
+    fontFamily: "var(--font-mono, ui-monospace, monospace)",
+    caretColor: "var(--ui-primary)",
+    padding: "8px 0",
+  },
+  ".cm-gutters": {
+    backgroundColor: "var(--dms-bg-muted, var(--ui-bg-muted))",
+    color: "var(--ui-text-dimmed)",
+    borderRight: "1px solid var(--ui-border)",
+    fontFamily: "var(--font-mono, ui-monospace, monospace)",
+  },
+  ".cm-activeLine": { backgroundColor: "var(--ui-bg-elevated)" },
+  ".cm-activeLineGutter": {
+    backgroundColor: "var(--ui-bg-elevated)",
+    color: "var(--ui-text-highlighted)",
+  },
+  ".cm-selectionBackground, &.cm-focused .cm-selectionBackground": {
+    backgroundColor: "color-mix(in oklab, var(--ui-primary) 22%, transparent)",
+  },
+  ".cm-placeholder": { color: "var(--ui-text-dimmed)" },
+  ".cm-tooltip.cm-tooltip-autocomplete": {
+    backgroundColor: "var(--ui-bg)",
+    border: "1px solid var(--ui-border-accented)",
+    borderRadius: "10px",
+    boxShadow: "0 12px 32px rgb(0 0 0 / 0.18)",
+    overflow: "hidden",
+  },
+  ".cm-tooltip-autocomplete > ul": { fontFamily: "inherit", padding: "4px" },
+  ".cm-tooltip-autocomplete > ul > li": {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    padding: "5px 8px",
+    borderRadius: "6px",
+  },
+  ".cm-tooltip-autocomplete > ul > li[aria-selected]": {
+    backgroundColor: "var(--ui-bg-elevated)",
+    color: "var(--ui-text-highlighted)",
+  },
+  ".cm-completionDetail": {
+    marginLeft: "auto",
+    paddingLeft: "16px",
+    fontStyle: "normal",
+    color: "var(--ui-text-dimmed)",
+    fontSize: "11px",
+  },
+  ".cm-tooltip-autocomplete::after": {
+    display: "block",
+    padding: "6px 12px",
+    borderTop: "1px solid var(--ui-border)",
+    color: "var(--ui-text-dimmed)",
+    fontSize: "11px",
+  },
+});
+
+const MODULE_BOOST = 99;
+// Where a suggestion's icon goes among the parts of its row: before the
+// label (CodeMirror's own icon slot is at 20, turned off here).
+const ICON_POSITION = 20;
+
+function completionSource(
+  load: () => Promise<CodeEditorCompletion[]>,
+): (context: CompletionContext) => Promise<CompletionResult | null> {
+  let suggestions: Promise<Completion[]> | null = null;
+  return async (context) => {
+    const word = context.matchBefore(/[\w.$-]*/);
+    if (!word || (word.from === word.to && !context.explicit)) return null;
+    // The module's suggestions come before the language's keywords.
+    suggestions ??= load().then((items) =>
+      items.map((item) => ({ ...item, type: item.icon, boost: MODULE_BOOST })),
+    );
+    return {
+      from: word.from,
+      options: await suggestions,
+      validFor: /^[\w.$-]*$/,
+    };
+  };
+}
+
+function completionExtensions(options: CodeEditorOptions): Extension[] {
+  // One source per editor: it loads the module's suggestions once.
+  const source = options.completions
+    ? completionSource(options.completions)
+    : undefined;
+  const sources = source
+    ? [EditorState.languageData.of(() => [{ autocomplete: source }])]
+    : [];
+  const render = options.renderIcon;
+  return [
+    ...sources,
+    // The popup goes to the page, not the editor's frame that would clip it.
+    tooltips({ parent: document.body, position: "fixed" }),
+    EditorView.theme({
+      ".cm-tooltip-autocomplete::after": {
+        content: JSON.stringify(options.completionFooter ?? ""),
+      },
+    }),
+    autocompletion({
+      icons: false,
+      addToOptions: render
+        ? [
+            {
+              position: ICON_POSITION,
+              render: (completion) =>
+                completion.type ? render(completion.type) : null,
+            },
+          ]
+        : [],
+    }),
+    keymap.of([
+      { key: "Ctrl-Space", run: startCompletion },
+      ...completionKeymap,
+    ]),
+  ];
+}
+
+function baseExtensions(options: CodeEditorOptions): Extension[] {
+  return [
+    options.lineNumbers === false
+      ? []
+      : [lineNumbers(), highlightActiveLineGutter()],
+    highlightActiveLine(),
+    history(),
+    bracketMatching(),
+    EditorView.lineWrapping,
+    syntaxHighlighting(HIGHLIGHT),
+    THEME,
+    LANGUAGES[options.language]?.() ?? [],
+    options.placeholder ? placeholderText(options.placeholder) : [],
+    keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
+  ];
+}
+
+function positionOf(state: EditorState): CodeEditorPosition {
+  const head = state.selection.main.head;
+  const line = state.doc.lineAt(head);
+  return { line: line.number, column: head - line.from + 1 };
+}
+
+function stateOf(options: CodeEditorOptions, parts: Compartments): EditorState {
+  return EditorState.create({
+    doc: options.value,
+    extensions: [
+      ...baseExtensions(options),
+      ...completionExtensions(options),
+      parts.readOnly.of(EditorState.readOnly.of(!!options.readOnly)),
+      parts.attributes.of(
+        EditorView.contentAttributes.of(options.contentAttributes ?? {}),
+      ),
+      EditorView.updateListener.of((update) => {
+        if (update.docChanged) options.onChange(update.state.doc.toString());
+        if (update.docChanged || update.selectionSet) {
+          options.onPosition(positionOf(update.state));
+        }
+      }),
+    ],
+  });
+}
+
+function controlsOf(view: EditorView, parts: Compartments): CodeEditor {
+  return {
+    setValue: (value) => {
+      if (value === view.state.doc.toString()) return;
+      view.dispatch({
+        changes: { from: 0, to: view.state.doc.length, insert: value },
+      });
+    },
+    setReadOnly: (readOnly) =>
+      view.dispatch({
+        effects: parts.readOnly.reconfigure(EditorState.readOnly.of(readOnly)),
+      }),
+    setContentAttributes: (attributes) =>
+      view.dispatch({
+        effects: parts.attributes.reconfigure(
+          EditorView.contentAttributes.of(attributes),
+        ),
+      }),
+    focus: () => view.focus(),
+    destroy: () => view.destroy(),
+  };
+}
+
+/** Mounts a code editor in `parent`. */
+export function createCodeEditor(options: CodeEditorOptions): CodeEditor {
+  const parts = new Compartments();
+  const view = new EditorView({
+    parent: options.parent,
+    state: stateOf(options, parts),
+  });
+  options.onPosition(positionOf(view.state));
+  return controlsOf(view, parts);
+}
+
+/** The parts of the editor reconfigured as the field changes. */
+class Compartments {
+  readonly readOnly = new Compartment();
+  readonly attributes = new Compartment();
+}