@weasel-js/labkit 1.6.0 → 1.7.0

package/dist/_dts/{CanvasStackContext-DQgcH1ny.d.ts → CanvasStackContext-D2jnIwfk.d.ts}

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { RefObject } from 'react';
-import { m as ViewTransform, W as WorldFrame } from './frac-DTRq7Xpb.js';
+import { b as ViewTransform, W as WorldFrame } from './types-CSm9jgol.js';
 
 /** One layer of a canvas stack: its id, whether it is currently shown, and how
  *  it paints itself. */

package/dist/_dts/FloatingPanel-7j0IcXwz.d.ts

@@ -0,0 +1,30 @@
+import react__default, { ReactNode } from 'react';
+import { Corner } from 'windease';
+
+/** Props for `<FloatingPanel>`. */
+interface FloatingPanelProps {
+    children: ReactNode;
+    /** Corner it rests in before it has ever been dragged. Default `'bottom-left'`. */
+    anchor?: Corner;
+    /** Corners that may capture it. Default: all four. */
+    snapCorners?: readonly Corner[];
+    /** Pixels in from a corner when snapped. Default 12. */
+    inset?: number;
+    /** Name to remember its position under, through `usePersistedState` — so it
+     *  is remembered only inside a lab or a `<Persistence>`. Omit to forget on
+     *  reload. */
+    persist?: string;
+    className?: string;
+}
+/**
+ * A draggable box that floats over its offset parent and snaps to its corners.
+ *
+ * Drives windease's `floatingStrategy` as a pure function rather than mounting a
+ * windease container: a lab overlay has one item and no zone tree, so the node
+ * model would be all cost. Pointer handling is therefore this component's, and
+ * windease's own affordance rendering never participates.
+ */
+declare function FloatingPanel({ children, anchor, snapCorners, inset, persist, className, }: FloatingPanelProps): react__default.JSX.Element;
+
+export { FloatingPanel as a };
+export type { FloatingPanelProps as F };

package/dist/_dts/{LayerList.d-2c9yup5Y.d.ts → LayerList.d-DiuEArKq.d.ts}

@@ -1,6 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { ReactNode } from 'react';
-import { S as StanceProps } from './PrefsRow.d-DFpPIeIC.js';
+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. */
@@ -49,7 +49,7 @@ interface LayerListProps {
     onSelect?: (ids: string[]) => void;
     /** Adds a visibility checkbox to every unlocked layer. */
     onVisibilityChange?: (id: string, visible: boolean) => void;
-    /** Adds a ✕ to every unlocked layer. */
+    /** 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;
@@ -77,7 +77,7 @@ declare function moveLayers(items: LayerListItem[], move: LayerMove): LayerListI
  * 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_runtime.JSX.Element;
+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

@@ -0,0 +1,79 @@
+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

@@ -0,0 +1,141 @@
+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 };

package/dist/_dts/{Select.d-BchGMC2Y.d.ts → Select.d-Bensr_MT.d.ts}

@@ -1,7 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, ButtonHTMLAttributes, ReactElement } from 'react';
-import { S as StanceProps } from './PrefsRow.d-DFpPIeIC.js';
+import { S as StanceProps } from './PrefsRow.d-TOZ7BgD9.js';
 import { TextFieldProps, ValidationResult, SelectProps as SelectProps$1, ListBoxItemProps } from 'react-aria-components';
 
 declare const ICON_PATHS: {
@@ -29,6 +28,12 @@ declare const ICON_PATHS: {
     readonly superscript: "<path d=\"M3.6 8.6 10.4 16.4M10.4 8.6 3.6 16.4\"/><path d=\"M11.9 5.3a2.2 2.2 0 1 1 4.3.8c0 1.4-4.3 2.2-4.3 3.5h4.5\"/>";
     readonly subscript: "<path d=\"M3.6 3.6 10.4 11.4M10.4 3.6 3.6 11.4\"/><path d=\"M11.9 11.5a2.2 2.2 0 1 1 4.3.8c0 1.4-4.3 2.2-4.3 3.5h4.5\"/>";
     readonly code: "<path d=\"M7 6.2 3.2 10 7 13.8M13 6.2 16.8 10 13 13.8\"/><path d=\"M11.2 4.8 8.8 15.2\"/>";
+    readonly textAlignLeft: "<path d=\"M3 4.375H17M3 8.125H12M3 11.875H17M3 15.625H12\"/>";
+    readonly textAlignCenter: "<path d=\"M3 4.375H17M5.5 8.125H14.5M3 11.875H17M5.5 15.625H14.5\"/>";
+    readonly textAlignRight: "<path d=\"M3 4.375H17M8 8.125H17M3 11.875H17M8 15.625H17\"/>";
+    readonly textAlignTop: "<rect x=\"1.875\" y=\"1.875\" width=\"16.25\" height=\"16.25\" rx=\"2\" stroke-width=\"1\"/><path d=\"M5.5 5.625H14.5M7 9.375H13\"/>";
+    readonly textAlignMiddle: "<rect x=\"1.875\" y=\"1.875\" width=\"16.25\" height=\"16.25\" rx=\"2\" stroke-width=\"1\"/><path d=\"M5.5 8.125H14.5M7 11.875H13\"/>";
+    readonly textAlignBottom: "<rect x=\"1.875\" y=\"1.875\" width=\"16.25\" height=\"16.25\" rx=\"2\" stroke-width=\"1\"/><path d=\"M5.5 10.625H14.5M7 14.375H13\"/>";
     readonly play: "<path d=\"M7.6 5.2 15.6 10 7.6 14.8Z\"/>";
     readonly pause: "<path d=\"M7.8 5.2v9.6M12.2 5.2v9.6\"/>";
     readonly stop: "<rect x=\"5.6\" y=\"5.6\" width=\"8.8\" height=\"8.8\" rx=\"1.4\"/>";
@@ -47,6 +52,10 @@ declare const ICON_PATHS: {
     readonly modeLight: "<circle cx=\"10\" cy=\"10\" r=\"3.5\"/><path d=\"M15.3 10L17.7 10M13.75 6.25L15.44 4.56M10 4.7L10 2.3M6.25 6.25L4.56 4.56M4.7 10L2.3 10M6.25 13.75L4.56 15.44M10 15.3L10 17.7M13.75 13.75L15.44 15.44\"/>";
     readonly modeDark: "<path d=\"M8.19 3.55A6.7 6.7 0 1 0 16.45 11.81A5.9 5.9 0 0 1 8.19 3.55Z\"/>";
     readonly modeAuto: "<path d=\"M10 2.6Q10 10 17.4 10Q10 10 10 17.4Q10 10 2.6 10Q10 10 10 2.6Z\"/>";
+    readonly statusSuccess: "<circle cx=\"10\" cy=\"10\" r=\"7\"/><path d=\"M6.84 10.33 8.89 12.38 13.17 7.62\"/>";
+    readonly statusAccent: "<circle cx=\"10\" cy=\"10\" r=\"7\" fill=\"currentColor\"/>";
+    readonly statusNeutral: "<path d=\"M10 3A7 7 0 0 1 10 17Z\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"10\" cy=\"10\" r=\"7\"/>";
+    readonly statusMuted: "<path d=\"M11.44 3.15A7 7 0 0 0 8.56 3.15M4.79 5.33A7 7 0 0 0 3.35 7.82M3.35 12.18A7 7 0 0 0 4.79 14.67M8.56 16.85A7 7 0 0 0 11.44 16.85M15.21 14.67A7 7 0 0 0 16.65 12.18M16.65 7.82A7 7 0 0 0 15.21 5.33\"/>";
     readonly crosshair: "<circle cx=\"10\" cy=\"10\" r=\"5.6\"/><path d=\"M10 2.8v4.4M10 12.8v4.4M2.8 10h4.4M12.8 10h4.4\"/>";
     readonly fullscreen: "<path d=\"M11.6 3.6h4.8v4.8M8.4 16.4H3.6v-4.8\"/><path d=\"M16.4 3.6 11.2 8.8M3.6 16.4 8.8 11.2\"/>";
     readonly compare: "<rect x=\"3.4\" y=\"4.6\" width=\"13.2\" height=\"10.8\" rx=\"1.6\"/><path d=\"M10 4.6v10.8\" stroke-width=\"1\"/><path d=\"M5.2 7.6h3.4M5.2 10h2.6M5.2 12.4h3.4\" stroke-width=\"1\"/><path d=\"M11.4 7.6h3.4M11.4 10h3.4M11.4 12.4h1.8\" stroke-width=\"1\"/>";
@@ -239,7 +248,7 @@ interface IconProps {
  *  in; reach for this when the glyph is chosen at runtime. */
 declare function Icon({ name, className, size, label, filled, fillOpacity, }: IconProps & {
     name: IconName;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 /** The tooltip fields a segmented bar's item carries. */
 interface SegmentTooltipFields {
@@ -407,7 +416,7 @@ type FieldProps = {
  * compose Field internally. Use Field directly when you need a custom
  * control to sit in the same visual rhythm.
  */
-declare function Field({ orientation, className, children }: FieldProps): react_jsx_runtime.JSX.Element;
+declare function Field({ orientation, className, children }: FieldProps): react.JSX.Element;
 /**
  * The class names {@link Field} paints its slots with, so a control composing
  * its own layout can match the same form-row rhythm.
@@ -553,7 +562,7 @@ type SelectProps<T extends Key = string> = Omit<SelectProps$1<object>, 'children
  * `aria-label` or a string `label`, as `Button` does; `tooltip` replaces that
  * text.
  */
-declare function Select<T extends Key = string>(props: SelectProps<T>): react_jsx_runtime.JSX.Element;
+declare function Select<T extends Key = string>(props: SelectProps<T>): react.JSX.Element;
 /** Props for {@link SelectItem}, on top of React Aria's `ListBoxItem` props. */
 type SelectItemProps = Omit<ListBoxItemProps, 'className' | 'children'> & {
     children?: ReactNode;
@@ -564,7 +573,7 @@ type SelectItemProps = Omit<ListBoxItemProps, 'className' | 'children'> & {
  * selected. A string child supplies its own `textValue`; anything richer must
  * pass one so type-to-select and screen readers have something to read.
  */
-declare function SelectItem({ children, className, textValue, ...rest }: SelectItemProps): react_jsx_runtime.JSX.Element;
+declare function SelectItem({ children, className, textValue, ...rest }: SelectItemProps): react.JSX.Element;
 
 export { Button as B, Select as S, ToggleBar as T, Icon as d, Input as e, Field as m, ICON_PATHS as o, SelectItem as q, fieldClasses as t };
 export type { FieldOrientation as F, IconProps as I, OverlayPortalProps as O, WithoutPortalTarget as W, ButtonProps as a, ButtonSize as b, ButtonVariant as c, InputProps as f, SelectProps as g, ToggleBarItem as h, ToggleBarProps as i, ToggleBarSize as j, ToggleBarVariant as k, SegmentTooltipFields as l, FieldProps as n, IconName as p, SelectItemProps as r, SelectOption as s };

package/dist/_dts/Stage-CCWfQQWM.d.ts

@@ -0,0 +1,202 @@
+import * as react from 'react';
+import { RefObject, ReactNode } from 'react';
+import { ViewApi, Yoke } from '@weasel-js/core';
+import { W as WorldFrame, P as Point, b as ViewTransform, l as WorldSpec, V as ViewportSize } from './types-CSm9jgol.js';
+import { C as CanvasLayerDescriptor } from './CanvasStackContext-D2jnIwfk.js';
+
+/** The view id the stage publishes its pointer under. */
+declare const STAGE_VIEW_ID = "stage";
+/**
+ * A camera, as the things that sit beside it read it: an overview, a loupe, a
+ * linked cursor. Points are *frame-local* — the world with `y` multiplied by
+ * `frame.yDir` — which is the space `view` works in.
+ */
+interface CameraContextValue {
+    /** The camera as a weasel `ViewApi`, clamped to its zoom range. */
+    view: ViewApi;
+    frame: WorldFrame;
+    /** The element the camera's dispatcher listens on. */
+    element: () => HTMLElement | null;
+    /** The content's own rect, frame-local, when it has one — a `<Stage>`'s. */
+    content?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}
+/** The camera around the caller, or `null` outside one. */
+declare const CameraContext: react.Context<CameraContextValue | null>;
+/**
+ * The input scope a camera routes through. Inside another camera — a loupe or
+ * an overlay laid over a canvas stack — it joins that camera's scope, so its
+ * actions reach the dispatcher already listening there. Anywhere else it
+ * mounts a scope of its own, which keeps its own tool unless it joins `yoke`:
+ * a camera beside another never takes that one's gestures. The pointer store is the exception — one
+ * already in scope is kept, since sharing it is the point.
+ */
+declare function CameraScope({ yoke, children }: {
+    yoke?: Yoke;
+    children: ReactNode;
+}): react.JSX.Element;
+/** Options for {@link useCameraView}. */
+interface CameraViewOptions {
+    view: ViewTransform;
+    onViewChange: (v: ViewTransform) => void;
+    frame: WorldFrame;
+    hostRef: RefObject<HTMLElement | null>;
+    minZoom?: number;
+    maxZoom?: number;
+}
+/** A camera's zoom limits, after widening to admit its opening zoom. */
+interface ZoomRange {
+    min: number;
+    max: number;
+}
+/** A labkit camera: a weasel `ViewApi` that also says how far it zooms. */
+interface CameraView extends ViewApi {
+    zoomRange(): ZoomRange;
+}
+/**
+ * A labkit camera as a stable `ViewApi`. Its zoom range is widened to keep the
+ * opening zoom reachable — captured once, so a zoom-out cannot shrink the
+ * range and strand the opening view behind it.
+ */
+declare function useCameraView({ view, onViewChange, frame, hostRef, minZoom, maxZoom, }: CameraViewOptions): CameraView;
+/** Props for `<CameraInput>`. */
+interface CameraInputProps {
+    hostRef: RefObject<HTMLElement | null>;
+    /** Published to the host's camera registry while its scope is the active
+     *  one, so chrome acting on "the camera" acts on the one last used. */
+    camera: CameraView;
+    frame: WorldFrame;
+    /** A primary-button press released without crossing the drag threshold, at
+     *  the world point it landed on. */
+    onTap?: (world: Point) => void;
+}
+/**
+ * Mounts the dispatcher on `hostRef` and routes the camera's gestures through
+ * it. Render it inside a `<CameraScope>`; with no actions registry in scope it
+ * renders nothing.
+ */
+declare function CameraInput(props: CameraInputProps): react.JSX.Element | null;
+
+/** Props for `<CanvasStack>`. */
+interface CanvasStackProps {
+    layers: CanvasLayerDescriptor[];
+    view: ViewTransform;
+    onViewChange: (v: ViewTransform) => void;
+    /** The instrument's coordinate system. Omitted, world (0,0) sits at the
+     *  element's top-left with y running down. */
+    worldSpec?: WorldSpec;
+    minZoom?: number;
+    maxZoom?: number;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    /** Fired whenever the stack is measured, so a consumer can place a view that
+     *  only makes sense in terms of the viewport. */
+    onResize?: (size: ViewportSize) => void;
+    onHitTest?: (worldPos: Point) => void;
+    children?: ReactNode;
+    /** A yoke to join, from `useYoke()`: cameras on one yoke share their tool
+     *  and gesture in flight. Omitted, this one keeps its own. */
+    yoke?: Yoke;
+}
+/** Stacks one `<canvas>` per layer and drives them from a shared view, so a
+ *  layer that changes rarely is not redrawn with one that changes every frame.
+ *  Handles sizing and device pixel ratio; pan and zoom route through weasel's
+ *  gesture dispatcher (`<CameraInput>`). */
+declare function CanvasStack({ layers, view: viewProp, onViewChange, worldSpec, minZoom, maxZoom, width, height, className, onResize, onHitTest, children, yoke, }: CanvasStackProps): react.JSX.Element;
+
+/** Bounds and coordinate system a {@link zoomAt} works in. */
+interface ZoomAtOptions {
+    /** The instrument's coordinate system, resolved against the viewport.
+     *  Omitted, `at` is measured from the element's top-left. */
+    frame?: WorldFrame;
+    min?: number;
+    max?: number;
+}
+/**
+ * Zoom a view by `factor` about a fixed point, so whatever world coordinate
+ * `at` was over stays under it.
+ *
+ * `at` is in the element's own pixels — a cursor position, or the centre of a
+ * lens. The clamp is applied before the pan is solved, so a zoom that hits a
+ * bound still anchors on the zoom it actually reached.
+ */
+declare function zoomAt(view: ViewTransform, factor: number, at: Point, { frame, min, max }?: ZoomAtOptions): ViewTransform;
+/** The view that puts a world point at the centre of a `size` viewport, at
+ *  `zoom`. What a lens showing a region around one point renders through. */
+declare function centerOn(world: Point, zoom: number, size: ViewportSize, frame?: WorldFrame): ViewTransform;
+
+/**
+ * Cameras by key, for chrome that acts on a camera it does not contain — the
+ * lab's zoom controls, which drive whichever trial has the focus.
+ */
+interface CameraRegistry {
+    /** Publish `camera` under `key` and return its release. Registrants for one
+     *  key stack, newest live. */
+    register(key: string, camera: CameraView): () => void;
+    get(key: string): CameraView | null;
+    /** Fires after any register or release. Shaped for `useSyncExternalStore`. */
+    subscribe(listener: () => void): () => void;
+}
+declare function createCameraRegistry(): CameraRegistry;
+/** The registry a lab keeps its trials' cameras in. */
+declare const CameraRegistryContext: react.Context<CameraRegistry | null>;
+/** Where a camera publishes itself. The host binds the key — a trial provides
+ *  one that registers under its own id — so the camera needs no name. */
+declare const CameraPublishContext: react.Context<((camera: CameraView) => () => void) | null>;
+/** Publish `camera` to the host in scope for as long as the caller is mounted,
+ *  and again each time its input scope becomes the active one — a registry
+ *  key stacks newest-live, so the camera last used is the one chrome reaches.
+ *  Call it inside the camera's scope. */
+declare function usePublishCamera(camera: CameraView): void;
+
+/** Project a world point into screen coordinates under a view.
+ *
+ *  `frame` is the instrument's declared coordinate system, resolved against the
+ *  viewport; omitting it gives labkit's original one — origin at the top-left,
+ *  y downward. */
+declare function worldToScreen(world: Point, view: ViewTransform, frame?: WorldFrame): Point;
+/** Unproject a screen point back to world coordinates under a view. */
+declare function screenToWorld(screen: Point, view: ViewTransform, frame?: WorldFrame): Point;
+
+/** Props for `<Stage>`. */
+interface StageProps {
+    /** The content's own size in CSS pixels, at zoom 1. */
+    size: ViewportSize;
+    view: ViewTransform;
+    onViewChange: (v: ViewTransform) => void;
+    minZoom?: number;
+    maxZoom?: number;
+    /** Fired whenever the stage's viewport is measured at a non-zero size. */
+    onResize?: (viewport: ViewportSize) => void;
+    /** Handed the viewport element, for a consumer tracking the pointer over it. */
+    hostRef?: {
+        current: HTMLDivElement | null;
+    };
+    /** Drawn over the content in viewport pixels, outside the camera. */
+    overlay?: ReactNode;
+    children?: ReactNode;
+    /** A yoke to join, from `useYoke()`: cameras on one yoke share their tool
+     *  and gesture in flight. Omitted, this one keeps its own. */
+    yoke?: Yoke;
+}
+/**
+ * The camera a stage opens at: the content centered in its viewport, shrunk to
+ * fit if it has to be and never enlarged past its own size.
+ */
+declare function fitStage(size: ViewportSize, viewport: ViewportSize): ViewTransform;
+/**
+ * DOM content of a fixed size, panned and zoomed by a camera — what
+ * `<CanvasStack>` is for layers drawn to a canvas. Pan and zoom route through
+ * weasel's gesture dispatcher (`<CameraInput>`). The content is laid out at
+ * its own size and transformed, so everything inside keeps its layout and a
+ * measurement of any element in it reports where it is actually drawn.
+ */
+declare function Stage({ size, view: viewProp, onViewChange, minZoom, maxZoom, onResize, hostRef, overlay, children, yoke, }: StageProps): react.JSX.Element;
+
+export { CameraContext as C, STAGE_VIEW_ID as S, CameraInput as b, CameraPublishContext as d, CameraRegistryContext as f, CameraScope as g, CanvasStack as j, Stage as l, centerOn as o, createCameraRegistry as p, fitStage as q, usePublishCamera as r, screenToWorld as s, useCameraView as u, worldToScreen as w, zoomAt as z };
+export type { ZoomAtOptions as Z, CameraContextValue as a, CameraInputProps as c, CameraRegistry as e, CameraView as h, CameraViewOptions as i, CanvasStackProps as k, StageProps as m, ZoomRange as n };