@weasel-js/labkit 1.3.0-pre.0 → 1.4.0-pre.0

package/src/controls/ControlPanel.tsx

@@ -1,23 +1,34 @@
 import { isBuiltinToolPref } from '@weasel-js/core';
-import type { PrefLeaf } from '@weasel-js/ui';
-import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
-import { fromConfigFields } from '../config/fromConfigField';
-import type { ControlRenderer, ResolvedConfig } from '../config/types';
-import { isLeafVisible } from '../config/visible';
-import { PropertyGroup } from '../ui/properties/PropertyGroup';
 import {
   CheckboxRow,
   ColorRow,
   NumberRow,
+  type PrefLeaf,
+  PropertyGroup,
   PropertyList,
   PropertyRow,
+  type PropertyRowLayout,
   SelectRow,
+  SliderRow,
   TextRow,
   ToggleRow,
-  SliderRow,
-} from '../ui/properties/PropertyPanel';
+} from '@weasel-js/ui';
+import { type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import { fromConfigFields } from '../config/fromConfigField';
+import type { ControlRenderer, ResolvedConfig } from '../config/types';
+import { isLeafVisible } from '../config/visible';
 import type { ConfigField } from './types';
 
+/** How a panel packs its rows into the two-column property grid.
+ *   - `'auto'`: narrow controls (numbers, checkboxes, dropdowns, colours) sit
+ *     two per row; the ones that need the width — text, sliders, segmented
+ *     toggles — span it.
+ *   - `'pairs'`: every row pairs. A control that needs the full width says so
+ *     itself, with `<PropertyRow span>`.
+ *   - `'one-up'`: one control per row, colours excepted.
+ */
+export type ControlPack = 'auto' | 'pairs' | 'one-up';
+
 export interface ControlPanelProps<TC extends Record<string, unknown>> {
   /** The instrument's resolved config schema. */
   schema?: ResolvedConfig;
@@ -31,6 +42,11 @@ export interface ControlPanelProps<TC extends Record<string, unknown>> {
    * the row; entries override the built-in rows on collision.
    */
   renderers?: Record<string, ControlRenderer>;
+  /** How rows pack into the two-column grid. Defaults to `'pairs'`. */
+  pack?: ControlPack;
+  /** Where a row's label sits relative to its control. Defaults to `'block'`
+   *  — above it, which is what leaves a paired row room for its value. */
+  layout?: PropertyRowLayout;
   /** Draw leaves marked `hidden`. */
   showHidden?: boolean;
   className?: string;
@@ -45,13 +61,12 @@ export function ControlPanel<TC extends Record<string, unknown>>({
   config,
   setConfig,
   renderers,
+  pack = 'pairs',
+  layout = 'block',
   showHidden = false,
   className,
 }: ControlPanelProps<TC>) {
-  const resolved = useMemo(
-    () => schema ?? fromConfigFields(fields ?? []),
-    [schema, fields],
-  );
+  const resolved = useMemo(() => schema ?? fromConfigFields(fields ?? []), [schema, fields]);
 
   const paths = Object.keys(resolved.group.children);
   const sectioned = new Set(resolved.sections.flatMap((s) => s.paths));
@@ -65,15 +80,21 @@ export function ControlPanel<TC extends Record<string, unknown>>({
       config={config}
       setConfig={setConfig}
       renderers={renderers}
+      pack={pack}
+      layout={layout}
       showHidden={showHidden}
     />
   );
 
+  const gridPack = pack === 'one-up' ? 'auto-color' : 'pairs';
   return (
-    <PropertyList className={className ? `lk-control-panel ${className}` : 'lk-control-panel'}>
+    <PropertyList
+      pack={gridPack}
+      className={className ? `lk-control-panel ${className}` : 'lk-control-panel'}
+    >
       {loose.map(row)}
       {resolved.sections.map((section) => (
-        <PropertyGroup key={section.label} title={section.label}>
+        <PropertyGroup key={section.label} title={section.label} pack={gridPack}>
           {section.paths.map(row)}
         </PropertyGroup>
       ))}
@@ -87,6 +108,8 @@ interface ControlRowProps<TC extends Record<string, unknown>> {
   config: TC;
   setConfig: (key: keyof TC, value: unknown) => void;
   renderers?: Record<string, ControlRenderer>;
+  pack: ControlPack;
+  layout: PropertyRowLayout;
   showHidden: boolean;
 }
 
@@ -102,6 +125,8 @@ function ControlRow<TC extends Record<string, unknown>>({
   config,
   setConfig,
   renderers,
+  pack,
+  layout,
   showHidden,
 }: ControlRowProps<TC>) {
   const leaf = resolved.group.children[path] as PrefLeaf | undefined;
@@ -114,14 +139,20 @@ function ControlRow<TC extends Record<string, unknown>>({
 
   // Most specific wins, and within a tier the lab's entry beats the
   // instrument's: controls[path] -> node .render -> controls[kind] -> built-in.
-  const custom =
-    renderers?.[path] ?? resolved.renderers[path] ?? renderers?.[leaf.kind];
+  const custom = renderers?.[path] ?? resolved.renderers[path] ?? renderers?.[leaf.kind];
+  // A custom row places itself like any other; one that needs the full width
+  // says so with `<PropertyRow span>`, which is the same opt-out a built-in has.
   if (custom) return custom({ path, pref: leaf, value, setValue: write });
 
   const label = leaf.name;
+  const description = leaf.description;
   const read = <T,>(): T => value as T;
+  // `auto` gives the whole width to the controls that read badly at half of a
+  // sidebar's: free text, a slider track, a segmented toggle. `pairs` doesn't.
+  const wide = pack === 'auto';
 
-  if (!isBuiltinToolPref(leaf)) return <UnwiredRow label={label} kind={leaf.kind} />;
+  if (!isBuiltinToolPref(leaf))
+    return <UnwiredRow label={label} kind={leaf.kind} description={description} />;
 
   switch (leaf.kind) {
     case 'number': {
@@ -137,6 +168,9 @@ function ControlRow<TC extends Record<string, unknown>>({
             max={max}
             step={step}
             onChange={write}
+            layout={layout}
+            span={wide}
+            description={description}
           />
         );
       }
@@ -153,28 +187,58 @@ function ControlRow<TC extends Record<string, unknown>>({
           max={max}
           step={step}
           onChange={(n) => write(Math.min(hi, Math.max(lo, n)))}
+          layout={layout}
+          description={description}
         />
       );
     }
     case 'boolean':
-      return <CheckboxRow label={label} value={read<boolean>()} onChange={write} />;
+      return (
+        <CheckboxRow
+          label={label}
+          value={read<boolean>()}
+          onChange={write}
+          description={description}
+        />
+      );
     case 'enum': {
       const options = extra<readonly { value: string; label: string }[]>(leaf, 'options') ?? [];
-      const Row = extra<string>(leaf, 'control') === 'radio' ? ToggleRow : SelectRow;
+      const segmented = extra<string>(leaf, 'control') === 'radio';
+      const Row = segmented ? ToggleRow : SelectRow;
       return (
-        <Row label={label} value={read<string>()} options={options} onChange={write} />
+        <Row
+          label={label}
+          value={read<string>()}
+          options={options}
+          onChange={write}
+          layout={layout}
+          span={segmented && wide}
+          description={description}
+        />
       );
     }
     case 'string':
-      return <DebouncedTextRow leaf={leaf} label={label} value={read<string>()} write={write} />;
+      return (
+        <DebouncedTextRow
+          leaf={leaf}
+          label={label}
+          value={read<string>()}
+          write={write}
+          layout={layout}
+          span={wide}
+          description={description}
+        />
+      );
     case 'color':
-      return <ColorRow label={label} value={read<string>()} onChange={write} />;
+      return (
+        <ColorRow label={label} value={read<string>()} onChange={write} description={description} />
+      );
     case 'paint':
     case 'object':
       // Declined: a hex swatch would write a solid over a gradient, and a flat
       // row would write one field into a half-built object. Override with
       // `render` to edit either.
-      return <UnwiredRow label={label} kind={leaf.kind} />;
+      return <UnwiredRow label={label} kind={leaf.kind} description={description} />;
     default: {
       // Not reachable while every built-in kind has an arm — and a new kind
       // that lacks one is a compile error here, never a blank row.
@@ -188,9 +252,17 @@ function ControlRow<TC extends Record<string, unknown>>({
 
 /** A leaf this panel has no control for is named rather than dropped: a silent
  *  gap reads as "this control does not exist". */
-function UnwiredRow({ label, kind }: { label: string; kind: string }) {
+function UnwiredRow({
+  label,
+  kind,
+  description,
+}: {
+  label: string;
+  kind: string;
+  description?: string;
+}) {
   return (
-    <PropertyRow label={label}>
+    <PropertyRow label={label} description={description}>
       <span className="lk-control-panel__unknown">no control for “{kind}”</span>
     </PropertyRow>
   );
@@ -204,11 +276,17 @@ function DebouncedTextRow({
   label,
   value,
   write,
+  layout,
+  span,
+  description,
 }: {
   leaf: PrefLeaf;
   label: string;
   value: string;
   write: (value: unknown) => void;
+  layout?: PropertyRowLayout;
+  span?: boolean;
+  description?: string;
 }) {
   const debounceMs = extra<number>(leaf, 'debounceMs') ?? 150;
   const [local, setLocal] = useState(value);
@@ -232,6 +310,9 @@ function DebouncedTextRow({
   return (
     <TextRow
       label={label}
+      layout={layout}
+      span={span}
+      description={description}
       value={local}
       placeholder={extra<string>(leaf, 'placeholder')}
       maxLength={extra<number>(leaf, 'maxLength')}

package/src/dragdrop/DragDropRuntime.tsx

@@ -1,6 +1,7 @@
 import { useVisibleRaf } from '@weasel-js/core';
 import { type RefObject, useCallback, useEffect, useRef, useState } from 'react';
 import { screenToWorld } from '../canvas/canvasCoords';
+import { resolveFrame, type WorldSpec } from '../canvas/worldSpec';
 import type {
   DragDropCapability,
   DragFeedback,
@@ -20,6 +21,9 @@ export interface UseDragDropArgs<TS, TC> {
   capability: DragDropCapability<TS, TC>;
   canvasContainerRef: RefObject<HTMLElement | null>;
   view: ViewTransform;
+  /** The instrument's coordinate system, resolved against the container each
+   *  time a screen point is converted — the container is what knows its size. */
+  worldSpec?: WorldSpec;
   state: TS;
   config: TC;
   setState: (next: TS | ((prev: TS) => TS)) => void;
@@ -39,6 +43,7 @@ export function useDragDrop<TS, TC>({
   config,
   setState,
   emit,
+  worldSpec,
 }: UseDragDropArgs<TS, TC>): UseDragDropResult {
   const [drag, setDrag] = useState<DragState | null>(null);
   const dragRef = useRef<DragState | null>(null);
@@ -67,9 +72,10 @@ export function useDragDrop<TS, TC>({
       const el = canvasContainerRef.current;
       if (!el) return null;
       const r = el.getBoundingClientRect();
-      return screenToWorld({ x: screenPos.x - r.left, y: screenPos.y - r.top }, view);
+      const frame = resolveFrame(worldSpec, { width: r.width, height: r.height });
+      return screenToWorld({ x: screenPos.x - r.left, y: screenPos.y - r.top }, view, frame);
     },
-    [canvasContainerRef, view],
+    [canvasContainerRef, view, worldSpec],
   );
 
   const frameLoop = useVisibleRaf(() => {

package/src/dragdrop/dragDrop.test.tsx

@@ -41,9 +41,19 @@ function StateProbe({ onState }: { onState: (state: DropState) => void }) {
   return null;
 }
 
-function renderLab(probe?: (state: DropState) => void) {
+const centredInstrument = defineInstrument<DropState, Record<string, never>>({
+  ...testInstrument,
+  name: 'CentredDrop',
+  canvas: {
+    worldSpec: { origin: { x: 0.5, y: 0.5 }, yAxis: 'up' },
+    initialView: { zoom: 1, pan: { x: 0, y: 0 } },
+    layers: [{ id: 'main', draw: () => undefined }],
+  },
+});
+
+function renderLab(probe?: (state: DropState) => void, instrument = testInstrument) {
   return render(
-    <Lab instruments={[testInstrument]} defaultInstrument="TestDrop">
+    <Lab instruments={[instrument]} defaultInstrument={instrument.name}>
       {probe ? <StateProbe onState={probe} /> : null}
     </Lab>,
   );
@@ -139,4 +149,21 @@ describe('DragDrop integration', () => {
     windowPointerUp(250, 250);
     expect(document.querySelector('.lk-drag-ghost')).toBeNull();
   });
+
+  it('drops through the instrument world spec, not the canvas top-left', () => {
+    let latest: DropState = { items: [] };
+    renderLab((s) => {
+      latest = s;
+    }, centredInstrument);
+    const palette = screen.getByRole('button', { name: 'Item A' });
+
+    act(() => {
+      pointerDown(palette, 0, 0);
+    });
+    // The host spans (100,100)-(500,500), so its centre is at (300,300).
+    // Dropping 50px right of centre and 50px above it, at zoom 1, y up.
+    windowPointerUp(350, 250);
+
+    expect(latest.items[0]).toMatchObject({ x: 50, y: 50 });
+  });
 });

package/src/dragdrop/index.ts

@@ -1 +1,12 @@
 export type { DragDropCapability, DragFeedback, PaletteItem } from '../instrument/types';
+export type {
+  DragOverlayProps,
+  DragState,
+  UseDragDropArgs,
+  UseDragDropResult,
+} from './DragDropRuntime';
+export { DragOverlay, useDragDrop } from './DragDropRuntime';
+export type { DragGhostProps } from './DragGhost';
+export { DragGhost } from './DragGhost';
+export type { PaletteProps } from './Palette';
+export { Palette } from './Palette';

package/src/index.test.ts

@@ -60,11 +60,33 @@ describe('surface, job and orbit entry points', () => {
     expect(typeof kit.useSurfaceOptional).toBe('function');
     expect(typeof kit.toDeviceRect).toBe('function');
     expect(typeof kit.composeRects).toBe('function');
+    expect(typeof kit.createAnnotationStore).toBe('function');
+    expect(typeof kit.createAnnotationScene).toBe('function');
+    expect(typeof kit.annotationsFromJSON).toBe('function');
+    expect(typeof kit.seenFrom).toBe('function');
+    expect(typeof kit.fracToWorld).toBe('function');
     expect(typeof kit.useOrbit).toBe('function');
     expect(typeof kit.orbitAfterDrag).toBe('function');
     expect(typeof kit.useJob).toBe('function');
     expect(typeof kit.as2DView).toBe('function');
     expect(kit.SurfaceContext).toBeDefined();
+    expect(kit.SurfaceCanvasContext).toBeDefined();
+    expect(typeof kit.useSurfaceCanvas).toBe('function');
+  });
+});
+
+describe('the annotations capability', () => {
+  it('reaches a host through the package root', async () => {
+    const kit = await import('./index');
+    expect(typeof kit.useAnnotations).toBe('function');
+    expect(typeof kit.useAnnotationsOptional).toBe('function');
+    expect(typeof kit.AnnotationTargets).toBe('function');
+    expect(typeof kit.AnnotationOverlay).toBe('function');
+    expect(typeof kit.markCommands).toBe('function');
+    expect(typeof kit.annotationToolInfo).toBe('function');
+    expect(typeof kit.fitView).toBe('function');
+    expect(kit.ANNOTATION_TOOLS.map((t) => t.id)).toContain('arrow');
+    expect(typeof kit.MarkList).toBe('function');
     expect(kit.DEFAULT_VIEW).toEqual({ zoom: 1, pan: { x: 0, y: 0 } });
   });
 });

package/src/index.ts

@@ -1,5 +1,136 @@
-export type { CanvasLayerDescriptor, CanvasStackContextValue, CanvasStackProps } from './canvas';
-export { CanvasStack, CanvasStackContext, screenToWorld, worldToScreen } from './canvas';
+// The property-panel family and LayerStack live in `@weasel-js/ui` now; labkit
+// re-exports them so existing `@weasel-js/labkit` imports keep resolving. Named,
+// not `export *` — a star re-export of an external package emits no binding in
+// the bundle.
+export type {
+  CheckboxRowProps,
+  ColorRowProps,
+  CurveFieldProps,
+  CurveMark,
+  EffectCardListItem,
+  EffectCardListProps,
+  EffectCardProps,
+  LayerStackItem,
+  LayerStackProps,
+  NumberRowProps,
+  PropertyGroupProps,
+  PropertyListPack,
+  PropertyListProps,
+  PropertyOption,
+  PropertyPanelProps,
+  PropertyRowLayout,
+  PropertyRowProps,
+  PropertyRowVariant,
+  PropertySpanProps,
+  SelectRowProps,
+  SliderRowProps,
+  SubpanelProps,
+  TextRowProps,
+  ToggleRowProps,
+} from '@weasel-js/ui';
+export {
+  CheckboxRow,
+  ColorRow,
+  CurveField,
+  EffectCard,
+  EffectCardList,
+  LayerStack,
+  NumberRow,
+  PropertyGroup,
+  PropertyList,
+  PropertyPanel,
+  PropertyRow,
+  PropertySpan,
+  SelectRow,
+  SliderRow,
+  Subpanel,
+  TextRow,
+  ToggleRow,
+} from '@weasel-js/ui';
+export type {
+  Annotation,
+  AnnotationData,
+  AnnotationInit,
+  AnnotationKind,
+  AnnotationMeaning,
+  AnnotationPatch,
+  AnnotationQuery,
+  AnnotationStatus,
+  AnnotationStoreOptions,
+  AnnotationsApi,
+  AnnotationsCapability,
+  AnnotationTarget,
+  AnnotationTargetInfo,
+  CaptureDeps,
+  CaptureOptions,
+  CaptureResult,
+  CaptureSource,
+  FracPoint,
+  FracRect,
+  MarkScene,
+  SerializedAnnotations,
+  WorldRect,
+} from './annotations';
+export {
+  annotationsFromJSON,
+  createAnnotationScene,
+  createAnnotationStore,
+  fracContains,
+  fracIntersects,
+  fracToWorld,
+  isStale,
+  roundFrac,
+  seenFrom,
+  worldToFrac,
+} from './annotations';
+export type { AnnotationOverlayProps } from './annotations/AnnotationOverlay';
+export { AnnotationOverlay } from './annotations/AnnotationOverlay';
+export {
+  AnnotationsContext,
+  useAnnotations,
+  useAnnotationsOptional,
+} from './annotations/AnnotationsContext';
+export type { AnnotationTargetsProps } from './annotations/AnnotationTargets';
+export { AnnotationTargets } from './annotations/AnnotationTargets';
+export type { CaptureArgs, CapturePlan, ComposeSvgArgs } from './annotations/capture';
+export { capturePlan, captureTarget, composeCaptureSvg } from './annotations/capture';
+export type { MarkDrawOptions } from './annotations/drawOne';
+export { createMarkDrawOne, resolveMarkStyle } from './annotations/drawOne';
+export { ExportMenu } from './annotations/ExportMenu';
+export type { MarkListProps } from './annotations/MarkList';
+export { MarkList } from './annotations/MarkList';
+export type { MarkStyle, PaintableMark } from './annotations/paint';
+export { markCommands } from './annotations/paint';
+export { markSvgNodes } from './annotations/svgNodes';
+export type { AnnotationToolInfo } from './annotations/toolMap';
+export {
+  ANNOTATION_TOOLS,
+  ANNOTATION_WEASEL_TOOLS,
+  annotationToolInfo,
+} from './annotations/toolMap';
+export type { ContentSize, PaneSize } from './annotations/view';
+export { fitView, fromWeaselView, toWeaselView } from './annotations/view';
+export type {
+  CanvasLayerDescriptor,
+  CanvasStackContextValue,
+  CanvasStackProps,
+  CanvasStackSurface,
+  ViewportSize,
+  WorldFrame,
+  WorldSpec,
+  ZoomAtOptions,
+} from './canvas';
+export {
+  applyCamera,
+  CanvasStack,
+  CanvasStackContext,
+  centerOn,
+  DEFAULT_FRAME,
+  resolveFrame,
+  screenToWorld,
+  worldToScreen,
+  zoomAt,
+} from './canvas';
 export type { OrbitHandlers, OrbitView, UseOrbitOptions, Vec3 } from './canvas/useOrbit';
 export {
   clampPitch,
@@ -69,6 +200,7 @@ export * from './job';
 export * from './lab';
 export type { LayerListProps } from './layers';
 export { LayerList } from './layers';
+export * from './loupe';
 export * from './primitives';
 export {
   createMemoryAdapter,
@@ -98,6 +230,8 @@ export type {
   TrialStateHandle,
   UndoStack,
 } from './state/types';
+export type { UndockedPanel, UndockedPanels } from './state/undock';
+export { dockPanel, panelKey, undockPanel } from './state/undock';
 export { useTrialState } from './state/useTrialState';
 export type { ViewTransform2D } from './state/view';
 export { as2DView, DEFAULT_VIEW } from './state/view';
@@ -105,7 +239,5 @@ export * from './surface';
 export { interstellarTheme } from './theme/interstellar';
 export type { ToolCapability, TrialTool } from './tools/types';
 export * from './trial';
-export * from './ui/layers';
-export * from './ui/properties';
 export type { EventBus, EventListener } from './undo';
 export { clearUndo, createEventBus, emptyStack, pushSnapshot, redo, undo } from './undo';

package/src/instrument/SineWave.smoke.test.tsx

@@ -93,6 +93,7 @@ describe('SineWave instrument smoke test', () => {
         zoom: 1,
         setZoom: vi.fn(),
         activeToolId: null,
+        visibleLayers: [],
       },
       emit: vi.fn(),
     };

package/src/instrument/types.ts

@@ -1,8 +1,11 @@
 import type { ReactNode } from 'react';
+import type { AnnotationsCapability } from '../annotations/types';
+import type { ViewportSize, WorldSpec } from '../canvas/worldSpec';
 import type { TrialContribution } from '../chrome/types';
 import type { ConfigSchema } from '../config/types';
 import type { ConfigField } from '../controls/types';
 import type { JobCapability, JobHandle } from '../job/types';
+import type { LoupeDeclaration } from '../loupe/types';
 import type { ToolCapability } from '../tools/types';
 
 /** What an instrument's `render` is handed: its state and config, the setters
@@ -25,6 +28,10 @@ export interface RenderContext<TS = unknown, TC = unknown> {
     /** Resolved active tool: this trial's slot, or the lab's. Null when neither
      *  holds one. */
     activeToolId: string | null;
+    /** The canvas layers currently shown, in declaration order. labkit skips a
+     *  hidden layer's `draw`, so this is the only way to know what was
+     *  painted — a legend listing rows the view did not draw needs it. */
+    visibleLayers: readonly string[];
   };
   emit: (event: string) => void;
   /** Present only when the instrument declares a `job`. */
@@ -45,7 +52,14 @@ export interface CanvasLayer<TS = unknown, TC = unknown> {
  *  view starts. */
 export interface CanvasCapability<TS = unknown, TC = unknown> {
   layers: CanvasLayer<TS, TC>[];
-  initialView?: { zoom: number; pan: { x: number; y: number } };
+  /** The coordinate system this instrument's world is in. Omitted, world (0,0)
+   *  sits at the canvas top-left with y running down — what labkit assumed
+   *  before an instrument could say otherwise. */
+  worldSpec?: WorldSpec;
+  /** Where the view starts. A function is called once the canvas knows its
+   *  size, so an instrument can frame content it can only place in terms of
+   *  the viewport; until then the trial's view is `null`. */
+  initialView?: ViewTransform | ((size: ViewportSize) => ViewTransform);
   /** Widens `usePanZoom`'s default clamp; the opening zoom stays reachable
    *  regardless of these. */
   minZoom?: number;
@@ -127,6 +141,15 @@ export interface Instrument<TS = unknown, TC = unknown, TItem = unknown> {
   /** Tools this instrument offers. Declaring them gives the trial a palette
    *  region and its own tool slot. */
   tools?: ToolCapability;
+  /** Regions of this instrument that accept marks, and optionally what a mark
+   *  is allowed to mean. Declaring it is what makes the trial provide the
+   *  annotation overlay and its chrome. */
+  annotations?: AnnotationsCapability<TS, TC>;
+  /** Magnification. `true` takes every default and re-draws the instrument's
+   *  canvas layers through a zoomed camera; an instrument whose content is DOM
+   *  gives a `render` that draws it again at a camera it is handed. A function
+   *  is re-read as the config changes, so a setting can drive the lens. */
+  loupe?: LoupeDeclaration<TS, TC> | ((config: TC) => LoupeDeclaration<TS, TC>);
   /** Chrome this instrument contributes beyond what its capabilities imply. */
   chrome?: TrialContribution[];
   /** Work too slow to do during a render. The runtime starts it, aborts it on