@weasel-js/labkit 1.7.0 → 1.7.1

package/src/trial/Trial.tsx

@@ -1,11 +1,25 @@
-import { createPointerStore, PointerContextProvider, WeaselProvider } from '@weasel-js/core';
-import { type ReactNode, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  createPointerStore,
+  PointerContextProvider,
+  useLatest,
+  WeaselProvider,
+} from '@weasel-js/core';
+import {
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useStore } from 'zustand/react';
 import { AnnotationsContext } from '../annotations/AnnotationsContext';
 import { AnnotationTargets } from '../annotations/AnnotationTargets';
 import { AnnotationPreloadContext } from '../annotations/preload';
 import { annotationsFromJSON } from '../annotations/store';
-import type { AnnotationStorage, AnnotationTargetInfo } from '../annotations/types';
+import type { AnnotationStorage, AnnotationsApi, AnnotationTargetInfo } from '../annotations/types';
 import type { CameraView } from '../canvas/CameraInput';
 import { CameraWheelContext, type CameraWheelSlot } from '../canvas/CameraWheelContext';
 import { CanvasStack } from '../canvas/CanvasStack';
@@ -27,8 +41,6 @@ import type {
 } from '../instrument/types';
 import { useJob } from '../job/useJob';
 import { useLabContext } from '../lab/LabContext';
-import { TrialLoupe } from '../loupe/TrialLoupe';
-import { resolveLoupe } from '../loupe/types';
 import { LayerList, type LayerListItem, moveLayers } from '../passthrough/weasel-ui';
 import { LabStoreContext, TrialIdProvider } from '../state/context';
 import type { LabStore } from '../state/store';
@@ -37,6 +49,7 @@ import { as2DView, DEFAULT_VIEW, withZoom } from '../state/view';
 import { resolveLabTool } from '../tools/labTool';
 import { createEventBus, type EventBus } from '../undo/eventBus';
 import { pushSnapshot, redo as undoRedo, undo as undoUndo } from '../undo/undoStack';
+import { LoupeSwitchContext } from './loupeSwitch';
 import type { LoupeBindings, UndoBindings } from './TrialChrome';
 import { TrialChrome } from './TrialChrome';
 
@@ -145,7 +158,6 @@ function TrialRuntime({
   );
   const [pointer] = useState(createPointerStore);
   const canvasContainerRef = useRef<HTMLDivElement | null>(null);
-  const loupeHostRef = useRef<HTMLDivElement | null>(null);
   const updateTrialState = useStore(store, (s) => s.updateTrialState);
   const updateTrialConfig = useStore(store, (s) => s.updateTrialConfig);
   const updateTrialView = useStore(store, (s) => s.updateTrialView);
@@ -167,6 +179,12 @@ function TrialRuntime({
   const [layerVisibility, setLayerVisibility] = useState<Record<string, boolean>>({});
   const [layerOrder, setLayerOrder] = useState<string[] | null>(null);
   const [loupeOn, setLoupeOn] = useState(false);
+  const [lenses, setLenses] = useState(0);
+  const mountLens = useCallback(() => {
+    setLenses((n) => n + 1);
+    return () => setLenses((n) => n - 1);
+  }, []);
+  const loupeSwitch = useMemo(() => ({ on: loupeOn, mount: mountLens }), [loupeOn, mountLens]);
 
   const visibleLayers = useMemo(
     () =>
@@ -207,43 +225,69 @@ function TrialRuntime({
   // resizing or gaining a dependency must not need the store rebuilt. Held in
   // a ref because the store is built once and closes over it.
   const annotationsCap = instrument.annotations;
-  const targetsRef = useRef<() => readonly AnnotationTargetInfo[]>(() => []);
-  targetsRef.current = () =>
+  const targetsRef = useLatest((): readonly AnnotationTargetInfo[] =>
     annotationsCap
       ? annotationsCap.targets(record.state, config, { id: record.id, view: record.view })
-      : [];
+      : [],
+  );
 
   // One store for the trial's lifetime.
   const annotationsRef = useRef<ReturnType<typeof annotationsFromJSON> | null>(null);
   // Read through refs for the same reason `targets` is: the store is built
   // once, and an export must draw against the config the trial holds now.
-  const configRef = useRef<unknown>(config);
-  configRef.current = config;
+  const configRef = useLatest(config);
   // The instrument can be swapped under a live trial, so the capability is read at use too.
-  const capRef = useRef(annotationsCap);
-  capRef.current = annotationsCap;
+  const capRef = useLatest(annotationsCap);
   if (annotationsRef.current === null) {
     // Seeded from wherever the marks were kept: the instrument's own store if
     // it declared one, else this trial's slot.
-    const kept = annotationsCap?.storage ? keptMarks : record.annotations;
-    annotationsRef.current = annotationsFromJSON(kept, () => targetsRef.current(), {
-      meaning: () => capRef.current?.meaning,
-      config: () => configRef.current,
-      onCapture: (result) => capRef.current?.onCapture?.(result),
-    });
+    annotationsRef.current = annotationsFromJSON(
+      annotationsCap?.storage ? keptMarks : record.annotations,
+      () => targetsRef.current(),
+      {
+        meaning: () => capRef.current?.meaning,
+        config: () => configRef.current,
+        onCapture: (result) => capRef.current?.onCapture?.(result),
+        selection: () => capRef.current?.selection,
+      },
+    );
   }
   const annotations = annotationsRef.current;
 
+  // Chrome reads the store while it renders — a mark list, the export menu,
+  // the overview — and the store reads the refs above, which hold the last
+  // commit. So once a change to them commits, those readers are told to read
+  // again. Through the context's `subscribe` alone: the store's own would have
+  // the debounce below save marks that did not change.
+  const inputsCommitted = useRef(new Set<() => void>());
+  // biome-ignore lint/correctness/useExhaustiveDependencies: these are what `targets` and `config` answer from — the signal, not values this reads
+  useLayoutEffect(() => {
+    for (const fn of inputsCommitted.current) fn();
+  }, [record.state, record.view, config, annotationsCap]);
+  const provided = useMemo<AnnotationsApi>(
+    () => ({
+      ...annotations,
+      subscribe: (fn) => {
+        const off = annotations.subscribe(fn);
+        inputsCommitted.current.add(fn);
+        return () => {
+          off();
+          inputsCommitted.current.delete(fn);
+        };
+      },
+    }),
+    [annotations],
+  );
+
   // Written on a trailing debounce rather than per notification: a scene
   // mutates every frame of a drag, and a zustand write per frame re-renders
   // every trial in the lab. The unmount flush is not an optimization — the
   // last mark before a trial closes is otherwise lost.
   const saveCap = annotationsCap?.storage;
-  const saveRef = useRef<(doc: unknown) => void>(() => {});
-  saveRef.current = (doc) => {
+  const saveRef = useLatest((doc: unknown): void => {
     if (saveCap) saveCap.save(doc as never);
     else updateTrialAnnotations(record.id, doc);
-  };
+  });
   // Only when the pair flips, which is rare: bumping React state on every
   // scene notification would re-render the trial on every frame of a drag,
   // which is the thing the debounce below exists to avoid.
@@ -280,7 +324,7 @@ function TrialRuntime({
       if (timer) clearTimeout(timer);
       flush();
     };
-  }, [annotations, annotationsCap]);
+  }, [annotations, annotationsCap, saveRef]);
 
   // A trial gets its own slot when its instrument declares tools; otherwise it
   // reads the lab's. Which slot a change writes follows from the same thing.
@@ -380,14 +424,8 @@ function TrialRuntime({
         }
       : undefined;
 
-  const loupeCap = useMemo(() => {
-    const declared = instrument.loupe;
-    if (declared == null) return null;
-    return resolveLoupe(typeof declared === 'function' ? declared(config) : declared);
-  }, [instrument.loupe, config]);
-  const loupeBindings: LoupeBindings | undefined = loupeCap
-    ? { on: loupeOn, toggle: () => setLoupeOn((v) => !v) }
-    : undefined;
+  const loupeBindings: LoupeBindings | undefined =
+    lenses > 0 ? { on: loupeOn, toggle: () => setLoupeOn((v) => !v) } : undefined;
 
   const canvasLayers: CanvasLayerDescriptor[] = useMemo(() => {
     if (!instrument.canvas) return [];
@@ -478,20 +516,6 @@ function TrialRuntime({
     ];
   }, [canvasLayers, dragDropResult.drag]);
 
-  // The lens tracks the pointer over whatever box holds the content: the canvas
-  // stack's own element, which it takes from context, or the wrapper below.
-  const lens = loupeCap ? (
-    <TrialLoupe
-      capability={loupeCap}
-      enabled={loupeOn}
-      state={record.state}
-      config={config}
-      view={view2d ?? DEFAULT_VIEW}
-      worldSpec={instrument.canvas?.worldSpec}
-      hostRef={loupeHostRef}
-    />
-  ) : null;
-
   let body: ReactNode;
   if (instrument.canvas) {
     body = (
@@ -506,7 +530,6 @@ function TrialRuntime({
           maxZoom={instrument.canvas.maxZoom}
         >
           {instrument.render(renderCtx)}
-          {lens}
         </CanvasStack>
         <DragOverlay drag={dragDropResult.drag} />
       </div>
@@ -520,24 +543,11 @@ function TrialRuntime({
         onResize={placeView}
         minZoom={stage.minZoom}
         maxZoom={stage.maxZoom}
-        hostRef={loupeHostRef}
-        overlay={
-          <>
-            {stage.overlay?.(renderCtx)}
-            {lens}
-          </>
-        }
+        overlay={stage.overlay?.(renderCtx)}
       >
         {instrument.render(renderCtx)}
       </Stage>
     );
-  } else if (lens) {
-    body = (
-      <div ref={loupeHostRef} className="lk-trial__loupe-host">
-        {instrument.render(renderCtx)}
-        {lens}
-      </div>
-    );
   } else {
     body = instrument.render(renderCtx);
   }
@@ -606,14 +616,16 @@ function TrialRuntime({
   const scopedBody = (
     <WeaselProvider isolate>
       <PointerContextProvider store={pointer}>
-        <CameraPublishContext.Provider value={publishCamera}>{body}</CameraPublishContext.Provider>
+        <CameraPublishContext.Provider value={publishCamera}>
+          <LoupeSwitchContext.Provider value={loupeSwitch}>{body}</LoupeSwitchContext.Provider>
+        </CameraPublishContext.Provider>
       </PointerContextProvider>
     </WeaselProvider>
   );
 
   return (
     <TrialIdProvider trialId={record.id}>
-      <AnnotationsContext.Provider value={annotationsCap ? annotations : null}>
+      <AnnotationsContext.Provider value={annotationsCap ? provided : null}>
         <CameraWheelContext.Provider value={wheelSlot}>
           <TrialChrome
             job={jobCap ? job : undefined}

package/src/trial/TrialChrome.tsx

@@ -8,7 +8,7 @@ import {
 import { useStore } from 'zustand/react';
 import { CameraRegistryContext } from '../canvas/cameraRegistry';
 import { zoomCameraTo } from '../canvas/cameraZoom';
-import { builtinContributions } from '../chrome/builtins';
+import { builtinContributions, TRANSIENT_BUILTINS } from '../chrome/builtins';
 import { mergeContributions, suppressContributions } from '../chrome/merge';
 import { PaletteRegion } from '../chrome/regions/PaletteRegion';
 import { SidebarRegion } from '../chrome/regions/SidebarRegion';
@@ -38,6 +38,7 @@ export interface LoupeBindings {
   toggle: () => void;
 }
 
+/** The trial's undo history as its chrome sees it. */
 export interface UndoBindings {
   canUndo: boolean;
   canRedo: boolean;
@@ -54,8 +55,8 @@ export interface TrialChromeProps {
   undoBindings?: UndoBindings;
   /** Supplied when the instrument declares a `job`. */
   job?: JobHandle;
-  /** Supplied when the instrument declares a `loupe`. The lens itself is the
-   *  trial's to mount; the chrome only offers the switch. */
+  /** Supplied while a lens is mounted in the trial. The lens itself is the
+   *  instrument's to mount; the chrome only offers the switch. */
   loupe?: LoupeBindings;
   /** Contributions the trial runtime itself adds — the drag palette and the
    *  layer list, which depend on runtime state the instrument cannot reach. */
@@ -157,6 +158,7 @@ export function TrialChrome({
       canRedo: undoBindings?.canRedo ?? false,
       undo: undoBindings?.undo ?? NO_OP,
       redo: undoBindings?.redo ?? NO_OP,
+      hasLoupe: loupe != null,
       loupeOn: loupe?.on ?? false,
       toggleLoupe: loupe?.toggle ?? NO_OP,
       configSchema,
@@ -233,6 +235,7 @@ export function TrialChrome({
           [...(chrome ?? [])],
         ),
         suppress ?? [],
+        TRANSIENT_BUILTINS,
       ),
     [instrument, ctx, trialChrome, chrome, suppress, lab.controls],
   );

package/src/trial/index.ts

@@ -1,3 +1,5 @@
+export type { LoupeSwitch } from './loupeSwitch';
+export { LoupeSwitchContext } from './loupeSwitch';
 export type { TrialProps } from './Trial';
 export { Trial } from './Trial';
 export type { TrialBodyProps } from './TrialBody';

package/src/trial/loupeSwitch.ts

@@ -0,0 +1,15 @@
+import { createContext } from 'react';
+
+/**
+ * A trial's loupe switch, as a lens mounted inside the trial finds it. The
+ * trial offers its toolbar toggle while at least one lens has called `mount`,
+ * and every lens reads `on` as whether it is turned on.
+ */
+export interface LoupeSwitch {
+  on: boolean;
+  /** Reports a lens mounted; the returned function reports it gone. */
+  mount: () => () => void;
+}
+
+/** The loupe switch of the trial around the caller, or `null` outside one. */
+export const LoupeSwitchContext = createContext<LoupeSwitch | null>(null);

package/dist/_dts/LayerList.d-DiuEArKq.d.ts

@@ -1,83 +0,0 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-import { S as StanceProps } from './PrefsRow.d-TOZ7BgD9.js';
-
-/** One layer. With a body (see `renderBody`) it draws as a card that folds its
- *  body away; without one, as a one-line row. Either can hold child layers. */
-interface LayerListItem {
-    id: string;
-    /** The layer's name. Also what its controls are labeled by. */
-    label: string;
-    /** Shown in the header in place of `label` — a select that switches the
-     *  layer's kind, say. */
-    title?: ReactNode;
-    /** Fixed-size content before the label: a color swatch, a kind icon. */
-    leading?: ReactNode;
-    /** Drawn in the drag handle in place of the grip — an ordinal. */
-    badge?: ReactNode;
-    /** Which of its list this layer is: an index into the theme's tone list, or
-     *  a color. A card draws its edge and handle in it and recolors its controls. */
-    tone?: StanceProps['tone'];
-    /** Cannot be dragged, hidden or removed, walls off drops on either side, and
-     *  selects alone rather than joining a multi-selection. */
-    locked?: boolean;
-    /** Shown or not, when the list has `onVisibilityChange`. Default true. */
-    visible?: boolean;
-    children?: LayerListItem[];
-    /** Folds the body and children away until the user opens them.
-     *  `collapsedIds` overrides it. */
-    defaultCollapsed?: boolean;
-}
-/**
- * A reorder: `ids`, siblings under `parentId` (`null` at the top level), now
- * sit as one block in list order starting at `index` of the parent's children.
- * A drag never moves a layer to another parent.
- */
-interface LayerMove {
-    ids: string[];
-    parentId: string | null;
-    index: number;
-}
-/** Props for `<LayerList>`. */
-interface LayerListProps {
-    items: LayerListItem[];
-    /** Omit for a list the user cannot reorder. */
-    onReorder?: (move: LayerMove) => void;
-    /** Giving both makes rows selectable: a click selects one, shift-click adds
-     *  or removes one, and dragging a selected row drags its selected siblings. */
-    selectedIds?: readonly string[];
-    onSelect?: (ids: string[]) => void;
-    /** Adds a visibility checkbox to every unlocked layer. */
-    onVisibilityChange?: (id: string, visible: boolean) => void;
-    /** Adds a remove button to every unlocked layer. */
-    onRemove?: (id: string) => void;
-    /** A layer's controls. Returning `null` leaves that layer a one-line row. */
-    renderBody?: (item: LayerListItem) => ReactNode;
-    /** Ids whose body and children are folded away. Giving it makes folding
-     *  controlled; `onCollapsedChange` fires either way. */
-    collapsedIds?: readonly string[];
-    onCollapsedChange?: (ids: string[]) => void;
-    /** Heading above the list. */
-    title?: string;
-    /** Names the list for assistive tech when it has no `title`. */
-    label?: string;
-    /** Kinds the user can add, as buttons beside the title. Shown only with `onAdd`. */
-    addKinds?: string[];
-    onAdd?: (kind: string) => void;
-    /** Shown in place of the list when `items` is empty. */
-    empty?: ReactNode;
-    /** Appended to the root's class list — the module's own names are hashed. */
-    className?: string;
-}
-/** Returns `items` with `move` applied, for a consumer that holds the tree as state. */
-declare function moveLayers(items: LayerListItem[], move: LayerMove): LayerListItem[];
-/**
- * An ordered, drag-reorderable list of layers — a document's objects, a lab's
- * canvases, a fill's effects. Each layer is a one-line row or, with a body, a
- * card whose controls fold away; either can nest child layers. Selection,
- * visibility, removal and an add palette are each on when their handler is given.
- */
-declare function LayerList(props: LayerListProps): react.JSX.Element;
-
-export { LayerList as L, moveLayers as m };
-export type { LayerListItem as a, LayerListProps as b, LayerMove as c };

package/dist/_dts/PrefsRow.d-TOZ7BgD9.d.ts

@@ -1,79 +0,0 @@
-import { Stance } from '@weasel-js/theme';
-import { ReactNode } from 'react';
-import { ToolPrefLeaf } from '@weasel-js/core';
-
-/** What one unit is worth in base units: `base = value * factor + offset`. */
-interface UnitScale {
-    factor: number;
-    /** Where this unit puts zero, in base units. Absent is 0 — a pure scale. */
-    offset?: number;
-}
-/** One unit's conversion. A bare number is the `{ factor }` shorthand. */
-type UnitEntry = number | UnitScale;
-
-/**
- * How a number shows, speaks and reads back, as plain data: `{ kind: 'fraction',
- * maxDenominator: 64 }`. Data rather than a function so a tagged value keeps its
- * presentation through JSON, history snapshots and `structuredClone`. The
- * behavior lives on the registered {@link DisplayKind} of the same `kind`.
- */
-interface Display {
-    readonly kind: string;
-    readonly [option: string]: unknown;
-}
-
-/**
- * Display-formatter for numbers. Use this anywhere a number is shown to
- * a user. The whole point: negative values get prefixed with the real
- * MINUS SIGN (U+2212) instead of the ASCII HYPHEN-MINUS (U+002D) that
- * `toLocaleString` and template literals produce by default.
- *
- * U+2212 is the same visual width as `+` and reads as a sign rather
- * than a hyphen — columns of signed numbers align cleanly and the
- * glyph doesn't get confused with a bullet or list dash.
- */
-declare const MINUS_SIGN = "\u2212";
-/**
- * Formats a number for display, substituting {@link MINUS_SIGN} for the ASCII
- * hyphen `toLocaleString` emits. Non-finite values stringify as-is.
- */
-declare function formatNumber(value: number, options?: Intl.NumberFormatOptions): string;
-/** Suffixes a person may type, each mapped to its conversion into the shown unit. */
-type UnitTable = Record<string, UnitEntry>;
-
-/**
- * What a surface holds, and which of its peers it is. Every surface that takes
- * these takes both, and the theme decides how each looks.
- */
-interface StanceProps {
-    /** The class of content the surface holds. Omitted, it draws as it always has. */
-    stance?: Stance;
-    /**
-     * Which of its peers this is: an index into the theme's tone list, wrapping,
-     * or a color given directly. Independent of `stance`, and allowed without one.
-     */
-    tone?: number | string;
-}
-
-/** What a {@link PrefRenderer} is given for the leaf it is rendering. */
-interface PrefRenderContext {
-    /** Dotted path of the leaf within the schema root. */
-    path: string;
-    /** The schema node. App renderers narrow this to their own kind shape. */
-    pref: ToolPrefLeaf;
-    /** Current value — `values` at `path`, falling back to `pref.default`. */
-    value: unknown;
-    setValue: (value: unknown) => void;
-    /** Whether this leaf is currently auto — not pinned, computed by the owner. */
-    auto: boolean;
-    /** Toggle this leaf's auto state. */
-    setAuto: (next: boolean) => void;
-}
-/**
- * Renders the control cell for one preference leaf. Returning `null`
- * collapses the row.
- */
-type PrefRenderer = (ctx: PrefRenderContext) => ReactNode;
-
-export { MINUS_SIGN as M, formatNumber as f };
-export type { Display as D, PrefRenderer as P, StanceProps as S, UnitTable as U, PrefRenderContext as a };

package/dist/_dts/PropertyPanel.d-D-1paCbE.d.ts

@@ -1,141 +0,0 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-import { S as StanceProps } from './PrefsRow.d-TOZ7BgD9.js';
-
-/**
- * How much room a container gives its rows — gaps, padding, and field height,
- * moved together. Set on any container in the family; it reaches every
- * descendant, so an inner group can differ from the panel around it.
- */
-type PropertyDensity = 'tight' | 'normal' | 'roomy';
-/** Where an inline row's label and control sit on the row's cross axis. Set on
- *  a container to line a whole column of them up. */
-type PropertyAlign = 'start' | 'center' | 'end' | 'baseline';
-/** Metric props every container in the family takes. Both reach descendants,
- *  so the nearest container that states one wins. */
-interface PropertyMetricProps {
-    /** Room the rows get. Unset inherits from an outer container, else `normal`. */
-    density?: PropertyDensity;
-    /**
-     * Cross-axis alignment of an inline row's label and control. `baseline` sits
-     * the control on the label's first-line baseline, which is what lines a
-     * column of swatches up against labels of different heights. Unset keeps each
-     * variant's own alignment — a color row centers its label and swatch and
-     * sinks the pair to the row's bottom edge, which keeps a paired alpha track
-     * level with its neighbour.
-     */
-    align?: PropertyAlign;
-}
-/** Props for `<PropertyPanel>`. */
-interface PropertyPanelProps extends PropertyMetricProps, StanceProps {
-    title?: ReactNode;
-    /** Controls on the trailing edge of the title row — a switch, a clear
-     *  button. They sit outside the heading, so they neither take its type nor
-     *  join its accessible name. */
-    actions?: ReactNode;
-    /**
-     * Lets text inside the panel be selected and copied. A panel is chrome by
-     * default, so a drag across it moves a slider rather than painting a
-     * selection; a `debug` panel defaults to selectable, since what it shows —
-     * ids, keys, traces — is there to be copied.
-     */
-    selectable?: boolean;
-    children: ReactNode;
-    className?: string;
-}
-/**
- * A titled panel holding property rows — the sidebar container the rest of
- * this module's components fill.
- *
- * `stance` says what kind of content it holds and `tone` which of its peers it
- * is; the theme's `--wzl-panel-*` and `--wzl-stance-*` slots decide how each looks. A stanced
- * panel's title takes the row-label recipe rather than the display title.
- */
-declare function PropertyPanel({ title, actions, selectable, children, className, density, align, stance, tone, }: PropertyPanelProps): react.JSX.Element;
-/** How a property list packs its rows into two columns. */
-type PropertyListPack = 'auto-color' | 'pairs' | 'one-up';
-/** Props for `<PropertyList>`. */
-interface PropertyListProps extends PropertyMetricProps {
-    children: ReactNode;
-    className?: string;
-    /**
-     * How rows pack into the 2-column grid.
-     *   - `'auto-color'` (default): only color rows pair side-by-side; everything
-     *     else spans the full width. Right for sparse top-level panels.
-     *   - `'pairs'`: every row auto-places into the 2-column grid two-per-row.
-     *     Headers and subpanels still span the full width; wrap any other
-     *     full-width child in `<PropertySpan>`. Right for dense effect bodies.
-     *   - `'one-up'`: every row spans the full width, color rows included. Right
-     *     for a palette — a column of swatches read as a group.
-     */
-    pack?: PropertyListPack;
-}
-/**
- * Grid container for PropertyRows. Use standalone for chrome-less layouts, or
- * nest inside <PropertyPanel/> for the standard glass card.
- */
-declare const PropertyList: react.ForwardRefExoticComponent<PropertyListProps & react.RefAttributes<HTMLDivElement>>;
-/** Props for `<PropertySpan>`. */
-interface PropertySpanProps {
-    children: ReactNode;
-    className?: string;
-}
-/**
- * Wrapper that makes an arbitrary child span both columns of a
- * `<PropertyList pack="pairs">`, a `<PropertyGroup pack="pairs">` body, or a
- * `<Subpanel>`. `<PropertyRow span>` covers the row case; this covers
- * everything else a consumer puts in the grid.
- */
-declare function PropertySpan({ children, className }: PropertySpanProps): react.JSX.Element;
-/** Which control shape a row holds, which decides its intrinsic layout. */
-type PropertyRowVariant = 'default' | 'color' | 'checkbox';
-/** Whether a row's label sits above its control or beside it. */
-type PropertyRowLayout = 'block' | 'inline';
-/** Props for `<PropertyRow>`. */
-interface PropertyRowProps extends PropertyMetricProps {
-    label: ReactNode;
-    /** Right-aligned readout shown next to the label (e.g. current value). */
-    readout?: ReactNode;
-    /**
-     * Help text for the row, shown in a tooltip off an ⓘ affordance beside the
-     * label. Empty or absent renders no affordance.
-     */
-    description?: string;
-    variant?: PropertyRowVariant;
-    /**
-     * Label position relative to the control. Unset takes the variant's own
-     * orientation: `block` — label above control — for the default variant, and
-     * `inline` for the color and checkbox variants, which read as a row.
-     */
-    layout?: PropertyRowLayout;
-    /**
-     * Take the full width of the enclosing grid. Only has an effect inside a
-     * `<PropertyList pack="pairs">` or a `<Subpanel>`; elsewhere rows are already
-     * full width.
-     */
-    span?: boolean;
-    children: ReactNode;
-    htmlFor?: string;
-    /** The control is a group of several (a segmented toggle), not one element.
-     *  The row then renders as a `<div>`: a `<label>` hands a click on its text to
-     *  its first control, which in a group means selecting the first option. Each
-     *  member has to carry its own name. */
-    group?: boolean;
-    className?: string;
-    /** The row is auto: its value is not pinned and the owner computes it. The
-     *  control is hidden — its box kept, so the row does not resize — and the
-     *  row reads out the word instead. */
-    auto?: boolean;
-    /** Given, the row's label toggles `auto` when it is clicked. Omitted, the row
-     *  can show an auto state but not change it.
-     *
-     *  The label then names that toggle, so a control passed as `children` has to
-     *  carry its own accessible name — every `<PropertyField>` does. */
-    onAutoChange?: (next: boolean) => void;
-}
-/** The label-plus-control frame `<PropertyField>` draws its rows in. Use it
- *  directly for a control no field kind covers. */
-declare function PropertyRow({ label, readout, description, variant, layout, span, children, htmlFor, group, className, density, align, auto, onAutoChange, }: PropertyRowProps): react.JSX.Element;
-
-export { PropertyList as c, PropertyPanel as e, PropertyRow as g, PropertySpan as j };
-export type { PropertyMetricProps as P, PropertyRowLayout as a, PropertyListPack as b, PropertyListProps as d, PropertyPanelProps as f, PropertyRowProps as h, PropertyRowVariant as i, PropertySpanProps as k, PropertyAlign as l, PropertyDensity as m };