@weasel-js/labkit 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_dts/{DrawCommand-CitWPxMY.d.ts → DrawCommand-uKHt4Vul.d.ts} +56 -0
- package/dist/_dts/{index-C6Yze7sQ.d.ts → index-CFlDPeZh.d.ts} +30 -1
- package/dist/_dts/{types-Si4Fw-1F.d.ts → types-x92Kfeme.d.ts} +14 -0
- package/dist/_dts/{useExperimentState-CJn2hHzd.d.ts → useExperimentState-vrttakTt.d.ts} +43 -0
- package/dist/canvas/index.d.ts +13 -2
- package/dist/canvas/index.js +2 -2
- package/dist/{chunk-ISEK5LXT.js → chunk-3WPOGKUP.js} +1603 -1670
- package/dist/chunk-3WPOGKUP.js.map +1 -0
- package/dist/{chunk-54IQ2DX7.js → chunk-574LJAV4.js} +3 -3
- package/dist/chunk-574LJAV4.js.map +1 -0
- package/dist/{chunk-VLAHRJOC.js → chunk-5R2ATYPJ.js} +2 -2
- package/dist/{chunk-VLAHRJOC.js.map → chunk-5R2ATYPJ.js.map} +1 -1
- package/dist/{chunk-EXBV7A6X.js → chunk-73PXCRCR.js} +3 -3
- package/dist/chunk-73PXCRCR.js.map +1 -0
- package/dist/{chunk-PWC7AQZM.js → chunk-CPUJ3QXL.js} +2 -2
- package/dist/chunk-CPUJ3QXL.js.map +1 -0
- package/dist/{chunk-NRD3TDNQ.js → chunk-N5KTQKQA.js} +1462 -1487
- package/dist/chunk-N5KTQKQA.js.map +1 -0
- package/dist/{chunk-HXZHVU4G.js → chunk-PMAU3SEE.js} +3 -3
- package/dist/chunk-PMAU3SEE.js.map +1 -0
- package/dist/{chunk-7BKDG73Z.js → chunk-RL2LOLNI.js} +2 -2
- package/dist/chunk-RL2LOLNI.js.map +1 -0
- package/dist/{chunk-2QNYYL3V.js → chunk-SFL7NFKN.js} +2 -2
- package/dist/chunk-SFL7NFKN.js.map +1 -0
- package/dist/{chunk-53XSBIUK.js → chunk-T7OKNJTY.js} +2 -2
- package/dist/chunk-T7OKNJTY.js.map +1 -0
- package/dist/controls/index.d.ts +4 -2
- package/dist/controls/index.js +1 -1
- package/dist/dragdrop/index.d.ts +2 -2
- package/dist/index.d.ts +122 -6
- package/dist/index.js +18 -18
- package/dist/index.js.map +1 -1
- package/dist/layers/index.d.ts +6 -3
- package/dist/layers/index.js +1 -1
- package/dist/passthrough/weasel-canvas.d.ts +5 -1
- package/dist/passthrough/weasel-canvas.js +1 -1
- package/dist/passthrough/weasel-ui.d.ts +514 -36
- package/dist/passthrough/weasel-ui.js +2 -2
- package/dist/primitives/index.d.ts +13 -0
- package/dist/primitives/index.js +2 -2
- package/dist/state/index.d.ts +15 -2
- package/dist/state/index.js +2 -2
- package/dist/state/index.js.map +1 -1
- package/dist/styles.css +147 -0
- package/dist/ui/layers/index.d.ts +5 -0
- package/dist/ui/layers/index.js +3 -3
- package/dist/undo/index.d.ts +17 -2
- package/dist/undo/index.js +1 -1
- package/package.json +2 -2
- package/src/canvas/CanvasStack.tsx +4 -0
- package/src/canvas/CanvasStackContext.ts +3 -0
- package/src/canvas/canvasCoords.ts +2 -0
- package/src/canvas/useLayerScheduler.ts +2 -0
- package/src/controls/ControlPanel.tsx +2 -0
- package/src/controls/types.ts +14 -0
- package/src/instrument/capabilityDetector.ts +3 -0
- package/src/instrument/defineInstrument.ts +2 -0
- package/src/instrument/types.ts +29 -0
- package/src/instrument/validateConfigSchema.ts +5 -0
- package/src/lab/Lab.tsx +3 -0
- package/src/lab/LabContext.ts +5 -0
- package/src/lab/LabShell.tsx +4 -0
- package/src/lab/WorkspaceGrid.tsx +2 -0
- package/src/lab/gridDims.ts +2 -0
- package/src/layers/LayerList.tsx +3 -0
- package/src/primitives/FpsMeter.tsx +1 -0
- package/src/primitives/ScaleIndicator.tsx +4 -0
- package/src/primitives/Sidebar.tsx +3 -0
- package/src/primitives/StatusBar.tsx +3 -0
- package/src/primitives/Toolbar.tsx +6 -0
- package/src/state/SingletonExperiment.tsx +1 -0
- package/src/state/adapters.ts +8 -0
- package/src/state/context.tsx +9 -0
- package/src/state/helpers.ts +12 -0
- package/src/state/store.ts +6 -0
- package/src/state/types.ts +17 -0
- package/src/state/useExperimentState.ts +3 -0
- package/src/ui/layers/LayerStack.tsx +5 -0
- package/src/ui/properties/CurveField.tsx +4 -1
- package/src/ui/properties/EffectCard.tsx +12 -0
- package/src/ui/properties/PropertyGroup.tsx +1 -0
- package/src/ui/properties/PropertyPanel.tsx +28 -0
- package/src/undo/eventBus.ts +4 -0
- package/src/undo/undoStack.ts +11 -0
- package/src/workspace/DefaultSidebar.tsx +3 -0
- package/src/workspace/DefaultStatusBar.tsx +3 -0
- package/src/workspace/DefaultToolbar.tsx +3 -0
- package/src/workspace/Workspace.tsx +3 -0
- package/src/workspace/WorkspaceChrome.tsx +4 -0
- package/src/workspace/slotTypes.ts +9 -0
- package/src/workspace/workspaceOps.ts +8 -0
- package/dist/chunk-2QNYYL3V.js.map +0 -1
- package/dist/chunk-53XSBIUK.js.map +0 -1
- package/dist/chunk-54IQ2DX7.js.map +0 -1
- package/dist/chunk-7BKDG73Z.js.map +0 -1
- package/dist/chunk-EXBV7A6X.js.map +0 -1
- package/dist/chunk-HXZHVU4G.js.map +0 -1
- package/dist/chunk-ISEK5LXT.js.map +0 -1
- package/dist/chunk-NRD3TDNQ.js.map +0 -1
- package/dist/chunk-PWC7AQZM.js.map +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as react from 'react';
|
|
3
|
-
import { ReactNode, CSSProperties, ButtonHTMLAttributes, ReactElement, MutableRefObject, PointerEvent as PointerEvent$1,
|
|
4
|
-
import { V as View, D as DrawCommand, O as Op, b as NodeId, c as Path, S as Scene, H as History, B as Bounds } from '../_dts/DrawCommand-
|
|
3
|
+
import { ReactNode, CSSProperties, ButtonHTMLAttributes, ReactElement, MutableRefObject, KeyboardEvent, PointerEvent as PointerEvent$1, RefCallback, RefObject } from 'react';
|
|
4
|
+
import { V as View, D as DrawCommand, O as Op, b as NodeId, c as Path, S as Scene, H as History, B as Bounds } from '../_dts/DrawCommand-uKHt4Vul.js';
|
|
5
5
|
import { TextFieldProps, ValidationResult, CheckboxProps as CheckboxProps$1, SwitchProps as SwitchProps$1, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, NumberFieldProps as NumberFieldProps$1, SelectProps as SelectProps$1, ListBoxItemProps, ComboBoxProps as ComboBoxProps$1, SliderProps as SliderProps$1, ModalOverlayProps, DialogProps as DialogProps$1 } from 'react-aria-components';
|
|
6
6
|
|
|
7
7
|
/**
|
|
@@ -37,6 +37,7 @@ declare function isDebugEnabled(namespace: string): boolean;
|
|
|
37
37
|
* Each call is prefixed with `[namespace]` so the source is searchable. */
|
|
38
38
|
declare function dlog(namespace: string, ...args: unknown[]): void;
|
|
39
39
|
|
|
40
|
+
/** Props for {@link ActionBar}. */
|
|
40
41
|
interface ActionBarProps {
|
|
41
42
|
/** Group key — only actions with `action.group === group` are rendered. */
|
|
42
43
|
group: string;
|
|
@@ -72,9 +73,20 @@ interface ActionBarProps {
|
|
|
72
73
|
*/
|
|
73
74
|
declare function ActionBar(props: ActionBarProps): react_jsx_runtime.JSX.Element;
|
|
74
75
|
|
|
76
|
+
/**
|
|
77
|
+
* Built-in badge silhouettes. `pill`, `plain` and `square` are drawn in CSS;
|
|
78
|
+
* the rest are SVG outlines, several of which route through the compose
|
|
79
|
+
* pipeline (a base shape plus perimeter effects).
|
|
80
|
+
*/
|
|
75
81
|
type BadgeShape = 'pill' | 'plain' | 'square' | 'notched' | 'perforated' | 'hexagon' | 'starburst' | 'scalloped' | 'shield' | 'ribbon' | 'beavis' | 'sparkler' | 'postage' | 'cloud' | 'house' | 'plaque' | 'crest' | 'urn' | 'coffin' | 'receipt' | 'wood' | 'quatrefoil';
|
|
82
|
+
/**
|
|
83
|
+
* Semantic color of a badge. `custom` paints from the `--badge-edge` custom
|
|
84
|
+
* property instead of a theme token, so a call site can supply its own color.
|
|
85
|
+
*/
|
|
76
86
|
type BadgeTone = 'accent' | 'info' | 'warn' | 'danger' | 'muted' | 'neutral' | 'custom';
|
|
87
|
+
/** How a badge's tone is applied: outline only, filled, or a soft tinted fill. */
|
|
77
88
|
type BadgeVariant = 'outline' | 'solid' | 'subtle';
|
|
89
|
+
/** Badge type scale and padding step. */
|
|
78
90
|
type BadgeSize = 'sm' | 'md';
|
|
79
91
|
|
|
80
92
|
interface SquareParams {
|
|
@@ -437,9 +449,17 @@ interface RibbonParams {
|
|
|
437
449
|
taperWidth?: number;
|
|
438
450
|
}
|
|
439
451
|
|
|
452
|
+
/**
|
|
453
|
+
* Shapes one vertical edge of a badge base. Given a position down the edge
|
|
454
|
+
* (`t`, 0 at the top to 1 at the bottom) and the configured depth in CSS px,
|
|
455
|
+
* returns the horizontal displacement of that point, positive to the right.
|
|
456
|
+
*/
|
|
440
457
|
type EdgeProfile = (t: number, depth: number) => number;
|
|
458
|
+
/** The named edge profiles in {@link EDGE_PROFILES}. */
|
|
441
459
|
type BuiltInEdgeName = 'flat' | 'chevron' | 'slant' | 'slant-up' | 'round' | 'scallop' | 'concave-chevron';
|
|
460
|
+
/** An edge profile, either by name or as a function. */
|
|
442
461
|
type EdgeCap = BuiltInEdgeName | EdgeProfile;
|
|
462
|
+
/** The built-in {@link EdgeProfile} implementations, by name. */
|
|
443
463
|
declare const EDGE_PROFILES: Record<BuiltInEdgeName, EdgeProfile>;
|
|
444
464
|
|
|
445
465
|
interface PowerlineParams {
|
|
@@ -749,10 +769,26 @@ type BadgePropsByShape = {
|
|
|
749
769
|
shapeParams?: BadgeShapeParams[S];
|
|
750
770
|
};
|
|
751
771
|
}[BadgeShape];
|
|
772
|
+
/**
|
|
773
|
+
* Props for {@link Badge}. Discriminated on `shape` so `shapeParams` is typed
|
|
774
|
+
* to the chosen shape's own parameters.
|
|
775
|
+
*/
|
|
752
776
|
type BadgeProps = BadgePropsByShape;
|
|
777
|
+
/**
|
|
778
|
+
* A small labelled chip. Renders as a `<span>`, or as a `<button>`/`<a>` when
|
|
779
|
+
* given `onClick`/`href` — override with `as`.
|
|
780
|
+
*
|
|
781
|
+
* Beyond the built-in {@link BadgeShape} silhouettes, a badge can be composed:
|
|
782
|
+
* `base` picks the underlying outline and `effects` layer perimeter treatments
|
|
783
|
+
* over it, which stack additively. `bloat` pushes the whole silhouette outward
|
|
784
|
+
* along its normals before effects run, and `crawl` animates perimeter
|
|
785
|
+
* patterns.
|
|
786
|
+
*/
|
|
753
787
|
declare function Badge(props: BadgeProps): react_jsx_runtime.JSX.Element;
|
|
754
788
|
|
|
789
|
+
/** Visual weight of a button. Defaults to `secondary`. */
|
|
755
790
|
type ButtonVariant = 'primary' | 'secondary' | 'ghost';
|
|
791
|
+
/** Button height and type scale. */
|
|
756
792
|
type ButtonSize = 'sm' | 'md';
|
|
757
793
|
type ButtonBase = {
|
|
758
794
|
variant?: ButtonVariant;
|
|
@@ -776,9 +812,24 @@ type ButtonIconOnly = ButtonBase & {
|
|
|
776
812
|
iconOnly: true;
|
|
777
813
|
ariaLabel: string;
|
|
778
814
|
};
|
|
815
|
+
/**
|
|
816
|
+
* Props for {@link Button}. Setting `iconOnly` makes `ariaLabel` required,
|
|
817
|
+
* since an icon-only button has no text for a screen reader to announce.
|
|
818
|
+
*/
|
|
779
819
|
type ButtonProps = ButtonRegular | ButtonIconOnly;
|
|
820
|
+
/**
|
|
821
|
+
* Standard button. `loading` swaps the leading icon for a spinner, marks the
|
|
822
|
+
* button `aria-busy`, and leaves the label in place; it does not disable the
|
|
823
|
+
* button, so pass `disabled` too if the click should be blocked.
|
|
824
|
+
*
|
|
825
|
+
* `ref` forwards to the underlying `<button>`.
|
|
826
|
+
*/
|
|
780
827
|
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
781
828
|
|
|
829
|
+
/**
|
|
830
|
+
* One column of a {@link DataGrid}. `id` doubles as the default property name
|
|
831
|
+
* read off each row when no `accessor` is given.
|
|
832
|
+
*/
|
|
782
833
|
interface DataGridColumn<Row> {
|
|
783
834
|
id: string;
|
|
784
835
|
header: ReactNode;
|
|
@@ -791,6 +842,7 @@ interface DataGridColumn<Row> {
|
|
|
791
842
|
/** Optional CSS class on every <td> in this column. */
|
|
792
843
|
className?: string;
|
|
793
844
|
}
|
|
845
|
+
/** Props for {@link DataGrid}. */
|
|
794
846
|
interface DataGridProps<Row extends {
|
|
795
847
|
id: string;
|
|
796
848
|
}> {
|
|
@@ -808,13 +860,30 @@ interface DataGridProps<Row extends {
|
|
|
808
860
|
empty?: ReactNode;
|
|
809
861
|
className?: string;
|
|
810
862
|
}
|
|
863
|
+
/**
|
|
864
|
+
* Sortable table for inspector-style data. Rows are keyed by `id`. Clicking a
|
|
865
|
+
* sortable header cycles ascending, descending, unsorted; nullish values sort
|
|
866
|
+
* last regardless of direction. Passing `onReorder` adds a leading drag-handle
|
|
867
|
+
* column — note that the drag indices it reports are into the *sorted* row
|
|
868
|
+
* order, not the input order.
|
|
869
|
+
*/
|
|
811
870
|
declare function DataGrid<Row extends {
|
|
812
871
|
id: string;
|
|
813
872
|
}>(props: DataGridProps<Row>): react_jsx_runtime.JSX.Element;
|
|
814
873
|
|
|
874
|
+
/**
|
|
875
|
+
* Width class of a keycap: a modifier glyph, a multi-character legend that
|
|
876
|
+
* needs a wider chip, or a single character in a square one.
|
|
877
|
+
*/
|
|
815
878
|
type KeycapKind = 'modifier' | 'wide' | 'square';
|
|
879
|
+
/**
|
|
880
|
+
* Picks the chip width for a legend — modifier glyphs and anything longer
|
|
881
|
+
* than one character get the wider forms.
|
|
882
|
+
*/
|
|
816
883
|
declare function inferKeycapKind(label: string): KeycapKind;
|
|
884
|
+
/** Visual style of a keycap chip. */
|
|
817
885
|
type KeyCapVariant = 'default' | 'minimal';
|
|
886
|
+
/** Props for {@link KeyCap}. */
|
|
818
887
|
interface KeyCapProps {
|
|
819
888
|
/** Glyph rendered in the chip (modifier or key). */
|
|
820
889
|
label: string;
|
|
@@ -845,6 +914,7 @@ interface KeyCapProps {
|
|
|
845
914
|
* `KeySequence` to render a full shortcut. */
|
|
846
915
|
declare function KeyCap({ label, inverted, variant, className, style, font }: KeyCapProps): react_jsx_runtime.JSX.Element;
|
|
847
916
|
|
|
917
|
+
/** One key in a shortcut. */
|
|
848
918
|
interface KeySpec$1 {
|
|
849
919
|
/** Glyph rendered in the chip (modifier or key). */
|
|
850
920
|
label: string;
|
|
@@ -852,6 +922,7 @@ interface KeySpec$1 {
|
|
|
852
922
|
* trigger the action (e.g. an optional modifier). Defaults to false. */
|
|
853
923
|
optional?: boolean;
|
|
854
924
|
}
|
|
925
|
+
/** Props for {@link KeySequence}. */
|
|
855
926
|
interface KeySequenceProps {
|
|
856
927
|
/** Keys to render. `undefined` or empty renders a muted em-dash.
|
|
857
928
|
* Modifiers are always rendered first regardless of input order; relative
|
|
@@ -898,12 +969,14 @@ type Platform = 'macos' | 'windows' | 'linux';
|
|
|
898
969
|
* back to text.
|
|
899
970
|
* - `'text'` always spells the label out (Cmd / Option / Esc / Enter). */
|
|
900
971
|
type LegendStyle = 'auto' | 'symbol' | 'text';
|
|
972
|
+
/** A modifier to render, named platform-independently. */
|
|
901
973
|
interface LogicalModSpec {
|
|
902
974
|
name: LogicalMod;
|
|
903
975
|
/** Marks this modifier as optional (may be held but isn't required).
|
|
904
976
|
* Forwarded as the resulting `KeySpec.optional`. */
|
|
905
977
|
optional?: boolean;
|
|
906
978
|
}
|
|
979
|
+
/** Options for {@link keySpecsFromMods}. */
|
|
907
980
|
interface KeySpecsFromModsOptions {
|
|
908
981
|
/** Override OS detection. Defaults to the detected platform, or
|
|
909
982
|
* `'macos'` when detection is unavailable (e.g. in tests, or when
|
|
@@ -960,32 +1033,65 @@ declare function keySpecFromKey(raw: string, opts?: KeySpecsFromModsOptions & {
|
|
|
960
1033
|
optional?: boolean;
|
|
961
1034
|
}): KeySpec$1;
|
|
962
1035
|
|
|
1036
|
+
/**
|
|
1037
|
+
* Passed to a custom thumb renderer: the thumb box in CSS px, and whether
|
|
1038
|
+
* this thumb is the one being dragged.
|
|
1039
|
+
*/
|
|
963
1040
|
type ThumbRenderCtx = {
|
|
964
1041
|
width: number;
|
|
965
1042
|
height: number;
|
|
966
1043
|
isActive: boolean;
|
|
967
1044
|
};
|
|
1045
|
+
/**
|
|
1046
|
+
* A thumb's appearance — one of the two built-in shapes, or a custom
|
|
1047
|
+
* renderer.
|
|
1048
|
+
*/
|
|
968
1049
|
type ThumbShape = 'round' | 'notched' | {
|
|
969
1050
|
render: (ctx: ThumbRenderCtx) => ReactNode;
|
|
970
1051
|
};
|
|
1052
|
+
/**
|
|
1053
|
+
* One handle on a {@link Slider}. `bounds` narrows the range this particular
|
|
1054
|
+
* thumb may move within, either fixed or computed from the current thumb
|
|
1055
|
+
* list.
|
|
1056
|
+
*/
|
|
971
1057
|
type Thumb = {
|
|
972
1058
|
value: number;
|
|
973
1059
|
label?: string;
|
|
974
1060
|
shape?: ThumbShape;
|
|
975
1061
|
bounds?: [number, number] | ((ctx: BoundsCtx) => [number, number]);
|
|
976
1062
|
};
|
|
1063
|
+
/**
|
|
1064
|
+
* Passed to a thumb's `bounds` function: the full thumb list and this thumb's
|
|
1065
|
+
* index in it, so a bound can be expressed relative to its neighbors.
|
|
1066
|
+
*/
|
|
977
1067
|
type BoundsCtx = {
|
|
978
1068
|
thumbs: readonly Thumb[];
|
|
979
1069
|
index: number;
|
|
980
1070
|
};
|
|
1071
|
+
/**
|
|
1072
|
+
* Passed to `renderTrack`: the track's width in CSS px and a mapping from a
|
|
1073
|
+
* slider value to its 0..1 position along the track.
|
|
1074
|
+
*/
|
|
981
1075
|
type TrackCtx = {
|
|
982
1076
|
trackWidth: number;
|
|
983
1077
|
valueToFraction: (v: number) => number;
|
|
984
1078
|
};
|
|
1079
|
+
/**
|
|
1080
|
+
* Props for {@link Slider}.
|
|
1081
|
+
*
|
|
1082
|
+
* `onInput` fires continuously through a drag; `onChange` fires once when it
|
|
1083
|
+
* ends and is the one to write to history.
|
|
1084
|
+
*
|
|
1085
|
+
* `constraint: 'ordered'` keeps thumbs from crossing each other. Supplying
|
|
1086
|
+
* `onAddThumb` makes a click on empty track create a thumb, and supplying
|
|
1087
|
+
* `onRemoveThumb` lets a right-click or a drag off the track remove one —
|
|
1088
|
+
* both callbacks can decline by returning `null`/`false`. `allowShiftAll`
|
|
1089
|
+
* makes shift-drag translate every thumb together.
|
|
1090
|
+
*/
|
|
985
1091
|
type SliderProps<T extends Thumb = Thumb> = {
|
|
986
1092
|
thumbs: readonly T[];
|
|
987
|
-
|
|
988
|
-
|
|
1093
|
+
onInput: (next: T[]) => void;
|
|
1094
|
+
onChange?: (next: T[]) => void;
|
|
989
1095
|
min: number;
|
|
990
1096
|
max: number;
|
|
991
1097
|
step?: number;
|
|
@@ -1000,15 +1106,26 @@ type SliderProps<T extends Thumb = Thumb> = {
|
|
|
1000
1106
|
ariaLabel?: string;
|
|
1001
1107
|
className?: string;
|
|
1002
1108
|
};
|
|
1109
|
+
/**
|
|
1110
|
+
* Multi-thumb slider over a shared track. The thumb list is fully controlled:
|
|
1111
|
+
* every change, live or committed, arrives as a whole new array.
|
|
1112
|
+
*
|
|
1113
|
+
* Thumbs are draggable, and arrow/Home/End move the focused thumb — those
|
|
1114
|
+
* keystrokes fire `onInput` and `onChange` together, since there is no
|
|
1115
|
+
* in-flight state to buffer.
|
|
1116
|
+
*/
|
|
1003
1117
|
declare function Slider<T extends Thumb = Thumb>(props: SliderProps<T>): ReactElement;
|
|
1004
1118
|
|
|
1119
|
+
/** One segment of a {@link ToggleBar}, identified by its `value`. */
|
|
1005
1120
|
type ToggleBarItem<V extends string | number = string> = {
|
|
1006
1121
|
value: V;
|
|
1007
1122
|
label?: ReactNode;
|
|
1008
1123
|
ariaLabel?: string;
|
|
1009
1124
|
disabled?: boolean;
|
|
1010
1125
|
};
|
|
1126
|
+
/** Segment height and type scale for a {@link ToggleBar}. */
|
|
1011
1127
|
type ToggleBarSize = 'sm' | 'md';
|
|
1128
|
+
/** Visual treatment of a {@link ToggleBar}. */
|
|
1012
1129
|
type ToggleBarVariant = 'default' | 'minimal';
|
|
1013
1130
|
type CommonProps = {
|
|
1014
1131
|
ariaLabel?: string;
|
|
@@ -1021,6 +1138,11 @@ type CommonProps = {
|
|
|
1021
1138
|
* selection becomes a flat accent. For dense diagnostic surfaces. */
|
|
1022
1139
|
variant?: ToggleBarVariant;
|
|
1023
1140
|
};
|
|
1141
|
+
/**
|
|
1142
|
+
* Props for {@link ToggleBar}, discriminated on `mode`. Single mode is
|
|
1143
|
+
* controlled by one value or `null`; multiple mode by an array, and only it
|
|
1144
|
+
* accepts `mixedValues`.
|
|
1145
|
+
*/
|
|
1024
1146
|
type ToggleBarProps<V extends string | number = string> = (CommonProps & {
|
|
1025
1147
|
mode?: 'single';
|
|
1026
1148
|
items: readonly ToggleBarItem<V>[];
|
|
@@ -1050,8 +1172,20 @@ type ToggleBarProps<V extends string | number = string> = (CommonProps & {
|
|
|
1050
1172
|
mixedValues?: readonly V[];
|
|
1051
1173
|
onChange: (next: V[]) => void;
|
|
1052
1174
|
});
|
|
1175
|
+
/**
|
|
1176
|
+
* Segmented control for choosing among a fixed set of values — one of them
|
|
1177
|
+
* (`mode: 'single'`, the default) or any number (`mode: 'multiple'`).
|
|
1178
|
+
*
|
|
1179
|
+
* Single mode ignores a click on the already-selected segment unless
|
|
1180
|
+
* `allowDeselect` is set. Arrow keys move focus without changing the value;
|
|
1181
|
+
* Space and Enter commit.
|
|
1182
|
+
*/
|
|
1053
1183
|
declare function ToggleBar<V extends string | number = string>(props: ToggleBarProps<V>): ReactElement;
|
|
1054
1184
|
|
|
1185
|
+
/**
|
|
1186
|
+
* One segment of an {@link OptionsBar}. Unlike `ToggleBar`, each item carries
|
|
1187
|
+
* its own selected state and its own `onChange`.
|
|
1188
|
+
*/
|
|
1055
1189
|
type OptionsBarItem<V extends string | number = string> = {
|
|
1056
1190
|
value: V;
|
|
1057
1191
|
label?: ReactNode;
|
|
@@ -1060,8 +1194,11 @@ type OptionsBarItem<V extends string | number = string> = {
|
|
|
1060
1194
|
selected: boolean;
|
|
1061
1195
|
onChange: (next: boolean) => void;
|
|
1062
1196
|
};
|
|
1197
|
+
/** Segment height and type scale for an {@link OptionsBar}. */
|
|
1063
1198
|
type OptionsBarSize = 'sm' | 'md';
|
|
1199
|
+
/** Visual treatment of an {@link OptionsBar}. */
|
|
1064
1200
|
type OptionsBarVariant = 'default' | 'minimal';
|
|
1201
|
+
/** Props for {@link OptionsBar}. */
|
|
1065
1202
|
type OptionsBarProps<V extends string | number = string> = {
|
|
1066
1203
|
items: readonly OptionsBarItem<V>[];
|
|
1067
1204
|
ariaLabel?: string;
|
|
@@ -1074,8 +1211,17 @@ type OptionsBarProps<V extends string | number = string> = {
|
|
|
1074
1211
|
* selection becomes a flat accent. For dense diagnostic surfaces. */
|
|
1075
1212
|
variant?: OptionsBarVariant;
|
|
1076
1213
|
};
|
|
1214
|
+
/**
|
|
1215
|
+
* Segmented strip of independent on/off options, each owning its own state.
|
|
1216
|
+
* Use it when the segments are unrelated booleans; use `ToggleBar` when they
|
|
1217
|
+
* are values of one setting.
|
|
1218
|
+
*/
|
|
1077
1219
|
declare function OptionsBar<V extends string | number = string>(props: OptionsBarProps<V>): ReactElement;
|
|
1078
1220
|
|
|
1221
|
+
/**
|
|
1222
|
+
* One button in an {@link ActionsBar}. `value` is only a React key; the item
|
|
1223
|
+
* carries no selected state.
|
|
1224
|
+
*/
|
|
1079
1225
|
type ActionsBarItem<V extends string | number = string> = {
|
|
1080
1226
|
value: V;
|
|
1081
1227
|
label?: ReactNode;
|
|
@@ -1083,8 +1229,11 @@ type ActionsBarItem<V extends string | number = string> = {
|
|
|
1083
1229
|
disabled?: boolean;
|
|
1084
1230
|
onAction: () => void;
|
|
1085
1231
|
};
|
|
1232
|
+
/** Segment height and type scale for an {@link ActionsBar}. */
|
|
1086
1233
|
type ActionsBarSize = 'sm' | 'md';
|
|
1234
|
+
/** Visual treatment of an {@link ActionsBar}. */
|
|
1087
1235
|
type ActionsBarVariant = 'default' | 'minimal';
|
|
1236
|
+
/** Props for {@link ActionsBar}. */
|
|
1088
1237
|
type ActionsBarProps<V extends string | number = string> = {
|
|
1089
1238
|
items: readonly ActionsBarItem<V>[];
|
|
1090
1239
|
ariaLabel?: string;
|
|
@@ -1093,8 +1242,20 @@ type ActionsBarProps<V extends string | number = string> = {
|
|
|
1093
1242
|
size?: ActionsBarSize;
|
|
1094
1243
|
variant?: ActionsBarVariant;
|
|
1095
1244
|
};
|
|
1245
|
+
/**
|
|
1246
|
+
* Segmented strip of momentary buttons — each press fires and nothing stays
|
|
1247
|
+
* selected. Shares the look and the arrow-key navigation of `ToggleBar` and
|
|
1248
|
+
* `OptionsBar`.
|
|
1249
|
+
*
|
|
1250
|
+
* This is a plain callback bar. For buttons driven by the kit's actions
|
|
1251
|
+
* registry, use `ActionBar` instead.
|
|
1252
|
+
*/
|
|
1096
1253
|
declare function ActionsBar<V extends string | number = string>(props: ActionsBarProps<V>): ReactElement;
|
|
1097
1254
|
|
|
1255
|
+
/**
|
|
1256
|
+
* One segment of a {@link Powerline}. Giving it `onClick` or `href` makes it
|
|
1257
|
+
* interactive, the same way it does on a `Badge`.
|
|
1258
|
+
*/
|
|
1098
1259
|
interface PowerlineSegment {
|
|
1099
1260
|
text: ReactNode;
|
|
1100
1261
|
/** Cap on this segment's right edge. Next segment's left edge adopts the same profile. */
|
|
@@ -1106,6 +1267,7 @@ interface PowerlineSegment {
|
|
|
1106
1267
|
href?: string;
|
|
1107
1268
|
'aria-label'?: string;
|
|
1108
1269
|
}
|
|
1270
|
+
/** Props for {@link Powerline}. */
|
|
1109
1271
|
interface PowerlineProps {
|
|
1110
1272
|
segments: PowerlineSegment[];
|
|
1111
1273
|
/** Left edge of the first segment. Defaults to 'flat'. */
|
|
@@ -1122,6 +1284,14 @@ interface PowerlineProps {
|
|
|
1122
1284
|
className?: string;
|
|
1123
1285
|
'aria-label'?: string;
|
|
1124
1286
|
}
|
|
1287
|
+
/**
|
|
1288
|
+
* A row of chevron-linked badge segments, in the style of a shell powerline
|
|
1289
|
+
* prompt. Each segment's `endCap` shapes both its own right edge and the next
|
|
1290
|
+
* segment's left edge, so the run reads as one continuous chain.
|
|
1291
|
+
*
|
|
1292
|
+
* Built for showing a path through a sequence of steps — the inspector uses
|
|
1293
|
+
* it to display how input routes from tool to gesture to action to target.
|
|
1294
|
+
*/
|
|
1125
1295
|
declare function Powerline({ segments, startCap, size, variant, depth, gap, className, ...rest }: PowerlineProps): react_jsx_runtime.JSX.Element;
|
|
1126
1296
|
|
|
1127
1297
|
/**
|
|
@@ -1299,16 +1469,21 @@ interface DeviceProfile {
|
|
|
1299
1469
|
readonly targetScale: number;
|
|
1300
1470
|
}
|
|
1301
1471
|
|
|
1472
|
+
/** A layout container's extent in world units. */
|
|
1302
1473
|
type ContainerBounds = {
|
|
1303
1474
|
x: number;
|
|
1304
1475
|
y: number;
|
|
1305
1476
|
width: number;
|
|
1306
1477
|
height: number;
|
|
1307
1478
|
};
|
|
1479
|
+
/** A child a layout strategy is arranging. */
|
|
1308
1480
|
interface LayoutChild<TPose> {
|
|
1309
1481
|
id: string;
|
|
1310
1482
|
pose: TPose;
|
|
1311
1483
|
}
|
|
1484
|
+
/** One place a dragged child could land. A strategy offers these as the drag
|
|
1485
|
+
* moves, a `LayoutSnap` picks between them, and the chosen one decides both
|
|
1486
|
+
* the preview and the committed poses. */
|
|
1312
1487
|
interface DropTarget<TPose> {
|
|
1313
1488
|
/** Where the dragged child lands if this target is picked. */
|
|
1314
1489
|
pose: TPose;
|
|
@@ -1332,16 +1507,22 @@ interface DropTarget<TPose> {
|
|
|
1332
1507
|
/** Strategy-private metadata (e.g. cell coords for tile-grid). */
|
|
1333
1508
|
meta?: unknown;
|
|
1334
1509
|
}
|
|
1510
|
+
/** Chooses which of a strategy's drop targets the pointer means, or `null`
|
|
1511
|
+
* to reject the drop. Separate from the strategy so the same arrangement can
|
|
1512
|
+
* be paired with different snapping rules. */
|
|
1335
1513
|
interface LayoutSnap<TPose> {
|
|
1336
1514
|
pickTarget(targets: DropTarget<TPose>[], pointer: {
|
|
1337
1515
|
x: number;
|
|
1338
1516
|
y: number;
|
|
1339
1517
|
}): DropTarget<TPose> | null;
|
|
1340
1518
|
}
|
|
1519
|
+
/** The container a layout strategy is arranging children within. */
|
|
1341
1520
|
interface LayoutContainer {
|
|
1342
1521
|
id: string;
|
|
1343
1522
|
bounds: ContainerBounds;
|
|
1344
1523
|
}
|
|
1524
|
+
/** The child currently being dragged: where it started, where the pointer
|
|
1525
|
+
* currently proposes it goes, and which container it came from. */
|
|
1345
1526
|
interface LayoutDragged<TPose> {
|
|
1346
1527
|
id: string;
|
|
1347
1528
|
/** The pose the dragged child currently has (pre-drop). */
|
|
@@ -1350,6 +1531,15 @@ interface LayoutDragged<TPose> {
|
|
|
1350
1531
|
pose: TPose;
|
|
1351
1532
|
sourceContainerId: string | null;
|
|
1352
1533
|
}
|
|
1534
|
+
/**
|
|
1535
|
+
* How a container arranges its children, and what happens when one is dragged
|
|
1536
|
+
* into or around it.
|
|
1537
|
+
*
|
|
1538
|
+
* The four required methods cover the whole cycle: `childPoses` is the resting
|
|
1539
|
+
* arrangement, `getDropTargets` enumerates where a drag could land,
|
|
1540
|
+
* `reflowPoses` is the live preview once a target is picked, and `commitDrop`
|
|
1541
|
+
* turns the result into ops so the drop is undoable.
|
|
1542
|
+
*/
|
|
1353
1543
|
interface LayoutStrategy<TPose> {
|
|
1354
1544
|
childPoses(container: LayoutContainer, children: ReadonlyArray<LayoutChild<TPose>>): Map<string, TPose>;
|
|
1355
1545
|
getDropTargets(container: LayoutContainer, children: ReadonlyArray<LayoutChild<TPose>>, dragged: LayoutDragged<TPose>): DropTarget<TPose>[];
|
|
@@ -1365,6 +1555,12 @@ interface LayoutStrategy<TPose> {
|
|
|
1365
1555
|
x: number;
|
|
1366
1556
|
y: number;
|
|
1367
1557
|
}): boolean;
|
|
1558
|
+
/** Optional: reject a drag before any drop-target work happens. A type-aware
|
|
1559
|
+
* container (a palette that only takes swatches, say) returns `false` and
|
|
1560
|
+
* the drag falls through to whatever container is under it next. When
|
|
1561
|
+
* absent, every drag is considered — rejection is still possible later, by
|
|
1562
|
+
* `snap.pickTarget` returning null. */
|
|
1563
|
+
acceptsDrop?(container: LayoutContainer, dragged: LayoutDragged<TPose>): boolean;
|
|
1368
1564
|
}
|
|
1369
1565
|
|
|
1370
1566
|
/**
|
|
@@ -1406,6 +1602,12 @@ interface MoveAdapter<TNode extends {
|
|
|
1406
1602
|
* targeting (`getLayout` present), nested-hit collapse
|
|
1407
1603
|
* (`pickTopMostHit`), and group-pose composition. Flat scenes may omit. */
|
|
1408
1604
|
getParent?(id: string): string | null;
|
|
1605
|
+
/** Optional paint depth, read by `pickTopMostHit` to resolve two *siblings*
|
|
1606
|
+
* whose bodies both cover the pointer. Without it the hit list's own order
|
|
1607
|
+
* decides, which is right for a back-to-front walk and wrong for anything
|
|
1608
|
+
* else. See `PickTopMostHitAdapter` for the `compareZ` alternative. */
|
|
1609
|
+
getZIndex?(id: string): number | null | undefined;
|
|
1610
|
+
compareZ?(a: string, b: string): number;
|
|
1409
1611
|
setPose(id: string, pose: TPose): void;
|
|
1410
1612
|
/** Optional. Used only by reparent ops (e.g. drag-into-container drops via
|
|
1411
1613
|
* layout strategies). Flat scenes that never reparent may omit. */
|
|
@@ -1602,13 +1804,28 @@ interface PointSnapBehavior<TPose extends ResizePose> {
|
|
|
1602
1804
|
* Apps and other consumers can add their own tags; this list is what
|
|
1603
1805
|
* `weasel-modes` itself uses. */
|
|
1604
1806
|
declare const ALL_TAGS: readonly ["navigation", "creates-selection", "creates-paths", "creates-shapes", "creates-text", "edits-anchors", "edits-text", "transforms-selection", "samples-color", "applies-fill", "edits-page"];
|
|
1807
|
+
/** One capability a tool or contribution declares, and a mode allows. Any
|
|
1808
|
+
* string is accepted so apps can add tags of their own; `ALL_TAGS` is the
|
|
1809
|
+
* set this package ships. */
|
|
1605
1810
|
type CapabilityTag = (typeof ALL_TAGS)[number] | (string & {});
|
|
1606
1811
|
|
|
1812
|
+
/** How a mode tints the workspace — the area around the page — so the user
|
|
1813
|
+
* can see at a glance which mode is active. */
|
|
1607
1814
|
interface WorkspaceVisual {
|
|
1608
1815
|
tint?: string;
|
|
1609
1816
|
gradient?: 'top-down' | 'bottom-up';
|
|
1610
1817
|
intensity?: number;
|
|
1611
1818
|
}
|
|
1819
|
+
/**
|
|
1820
|
+
* A mode: an app-level editing context that narrows which tools are usable and
|
|
1821
|
+
* how the workspace looks. Tools live inside modes; a tool is never "in" one.
|
|
1822
|
+
*
|
|
1823
|
+
* `kind` picks the lifecycle. A `soft` mode (path-edit, isolation, text-edit)
|
|
1824
|
+
* is a scoped context with no commit ceremony — every edit inside it is
|
|
1825
|
+
* independently undoable and `exit` is non-destructive. A `strict` mode
|
|
1826
|
+
* (free-transform, crop) is a transaction: the whole session collapses to one
|
|
1827
|
+
* undoable step and leaving requires an explicit `commit` or `cancel`.
|
|
1828
|
+
*/
|
|
1612
1829
|
interface ModeDefinition {
|
|
1613
1830
|
id: string;
|
|
1614
1831
|
kind: 'soft' | 'strict';
|
|
@@ -1632,6 +1849,10 @@ interface ModeDefinition {
|
|
|
1632
1849
|
};
|
|
1633
1850
|
}
|
|
1634
1851
|
|
|
1852
|
+
/** Holds the set of available modes and which one is active, and notifies
|
|
1853
|
+
* subscribers when that changes. `getVersion` is a monotonic counter for
|
|
1854
|
+
* render-cache invalidation. Unknown mode ids throw rather than being
|
|
1855
|
+
* ignored. */
|
|
1635
1856
|
interface ModeRegistry {
|
|
1636
1857
|
current(): ModeDefinition;
|
|
1637
1858
|
setMode(id: string): void;
|
|
@@ -2272,7 +2493,7 @@ type OngoingOverlay = {
|
|
|
2272
2493
|
* renderer narrows on `shape` and casts the field shape it expects.
|
|
2273
2494
|
*/
|
|
2274
2495
|
kind: 'insertPreview';
|
|
2275
|
-
shape: 'rect' | 'ellipse' | 'line' | 'polygon' | 'star' | 'pencil';
|
|
2496
|
+
shape: 'rect' | 'ellipse' | 'line' | 'polygon' | 'star' | 'pencil' | 'image';
|
|
2276
2497
|
bounds: {
|
|
2277
2498
|
x: number;
|
|
2278
2499
|
y: number;
|
|
@@ -2336,6 +2557,14 @@ interface OngoingHandle {
|
|
|
2336
2557
|
*/
|
|
2337
2558
|
previewIds?(): Iterable<string> | null;
|
|
2338
2559
|
previewPose?(id: string): unknown | null;
|
|
2560
|
+
/**
|
|
2561
|
+
* Subset of `previewIds()` the ghost layer paints at full opacity. The
|
|
2562
|
+
* ghost alpha says "this is in flight under the pointer"; a node the
|
|
2563
|
+
* gesture merely displaces — a layout sibling reflowing into its
|
|
2564
|
+
* destination slot — is not, and reads better settled. Honored at
|
|
2565
|
+
* subtree-root granularity.
|
|
2566
|
+
*/
|
|
2567
|
+
previewOpaqueIds?(): Iterable<string> | null;
|
|
2339
2568
|
/**
|
|
2340
2569
|
* When `false`, the preview-ghost layer paints the ghost AND the
|
|
2341
2570
|
* source node stays visible at its committed pose. Defaults to
|
|
@@ -2403,6 +2632,9 @@ type Invoker = ImmediateInvoker | OngoingInvoker;
|
|
|
2403
2632
|
* See `docs/superpowers/specs/2026-05-16-registry-unification-design.md`.
|
|
2404
2633
|
*/
|
|
2405
2634
|
|
|
2635
|
+
/** An interaction: a gesture spec composed with the id of the action it
|
|
2636
|
+
* invokes. Tools declare arrays of these; the dispatcher matches an incoming
|
|
2637
|
+
* input event against them and runs the winner's action. */
|
|
2406
2638
|
interface GestureBinding {
|
|
2407
2639
|
spec: GestureSpec;
|
|
2408
2640
|
actionId: string;
|
|
@@ -2613,6 +2845,9 @@ interface PointerContextValue {
|
|
|
2613
2845
|
readonly getDropPoint: () => PointerWorldPos;
|
|
2614
2846
|
}
|
|
2615
2847
|
|
|
2848
|
+
/** Which tool is active, plus the stack of tools temporarily held active by a
|
|
2849
|
+
* hotkey (space-for-hand and the like). The dispatcher reads this to decide
|
|
2850
|
+
* whose bindings are in scope. */
|
|
2616
2851
|
interface ActiveToolContextValue {
|
|
2617
2852
|
active: string;
|
|
2618
2853
|
hotkeyStack: string[];
|
|
@@ -2854,6 +3089,8 @@ type NodeAtPointDep = (point: {
|
|
|
2854
3089
|
x: number;
|
|
2855
3090
|
y: number;
|
|
2856
3091
|
}, exclude?: Iterable<NodeId>) => NodeId | null;
|
|
3092
|
+
/** What an area-selecting action needs: a way to ask what a region covers,
|
|
3093
|
+
* and a way to read and replace the selection. */
|
|
2857
3094
|
interface AreaSelectDep {
|
|
2858
3095
|
/** Return ids of all scene nodes whose AABB overlaps `bounds`. */
|
|
2859
3096
|
hitTestArea(bounds: {
|
|
@@ -3102,6 +3339,13 @@ type InsertExtras = {
|
|
|
3102
3339
|
} | {
|
|
3103
3340
|
kind: 'text';
|
|
3104
3341
|
text?: string;
|
|
3342
|
+
} | {
|
|
3343
|
+
kind: 'image';
|
|
3344
|
+
src?: string;
|
|
3345
|
+
opacity?: number;
|
|
3346
|
+
/** Chrome-only: what the in-flight drag paints. Read by the overlay
|
|
3347
|
+
* layer, ignored by the insert dep. */
|
|
3348
|
+
preview?: 'bitmap' | 'outline';
|
|
3105
3349
|
} | {
|
|
3106
3350
|
kind: string;
|
|
3107
3351
|
[extra: string]: unknown;
|
|
@@ -3185,6 +3429,14 @@ interface ResizePolicy<TPose> {
|
|
|
3185
3429
|
interface LayoutDep {
|
|
3186
3430
|
getLayout(containerId: string): LayoutStrategy<unknown> | null;
|
|
3187
3431
|
}
|
|
3432
|
+
/**
|
|
3433
|
+
* The names an action may declare in `requires`, and what each resolves to.
|
|
3434
|
+
*
|
|
3435
|
+
* This is the whole vocabulary of things an action can reach — selection,
|
|
3436
|
+
* scene, view, history, and the rest. Consumers add their own entries by
|
|
3437
|
+
* augmenting the interface (`declare module '@weasel-js/core'`), which is what
|
|
3438
|
+
* makes a custom dep name type-check in `requires` and in the deps bag.
|
|
3439
|
+
*/
|
|
3188
3440
|
interface DepSchema {
|
|
3189
3441
|
/** Kit selection state — ids of currently selected nodes. */
|
|
3190
3442
|
selection: SelectionApi;
|
|
@@ -3371,7 +3623,10 @@ interface DepSchema {
|
|
|
3371
3623
|
*/
|
|
3372
3624
|
type DepName = keyof DepSchema;
|
|
3373
3625
|
|
|
3626
|
+
/** Which kind of handle a recorded handle marker represents. */
|
|
3374
3627
|
type HandleKind = 'corner' | 'rotation' | 'anchor';
|
|
3628
|
+
/** The geometry a hit region actually tests against, as reported to the debug
|
|
3629
|
+
* sink so the overlay can draw the real shape rather than its bounding box. */
|
|
3375
3630
|
type HitShape = {
|
|
3376
3631
|
kind: 'rect';
|
|
3377
3632
|
x: number;
|
|
@@ -3388,6 +3643,14 @@ type HitShape = {
|
|
|
3388
3643
|
kind: 'path';
|
|
3389
3644
|
d: Path2D;
|
|
3390
3645
|
};
|
|
3646
|
+
/**
|
|
3647
|
+
* Where the kit reports what it is doing so the debug overlay can draw it.
|
|
3648
|
+
*
|
|
3649
|
+
* Recording is push-based and cheap: hit-testers, handle painters and snap
|
|
3650
|
+
* strategies call these as they run, whether or not any overlay is watching.
|
|
3651
|
+
* Nothing here affects behavior — a sink that discards everything is a valid
|
|
3652
|
+
* sink.
|
|
3653
|
+
*/
|
|
3391
3654
|
interface DebugSink {
|
|
3392
3655
|
recordHitbox(id: string, kind: 'body' | 'handle' | 'rotation' | 'anchor', shape: HitShape): void;
|
|
3393
3656
|
recordHandle(id: string, position: {
|
|
@@ -3431,6 +3694,14 @@ interface Eligibility {
|
|
|
3431
3694
|
/** Modality filter, applied wherever it would otherwise be live. */
|
|
3432
3695
|
capabilities?: CapabilityTag[];
|
|
3433
3696
|
}
|
|
3697
|
+
/**
|
|
3698
|
+
* Where an entry's overlay sits in the layer stack, relative to the
|
|
3699
|
+
* selection chrome. `'top'` is the default and renders above everything;
|
|
3700
|
+
* the other two exist for chrome that belongs under the selection handles
|
|
3701
|
+
* (a snap-target highlight, say). With no selection overlay in the stack,
|
|
3702
|
+
* all three collapse to `'top'`.
|
|
3703
|
+
*/
|
|
3704
|
+
type OverlayPosition = 'top' | 'before-selection' | 'after-selection';
|
|
3434
3705
|
/**
|
|
3435
3706
|
* A registry entry: what it contributes, and when it is eligible. Every role
|
|
3436
3707
|
* is optional and independent — an entry that only routes input declares only
|
|
@@ -3441,12 +3712,37 @@ interface Contribution {
|
|
|
3441
3712
|
eligibility: Eligibility;
|
|
3442
3713
|
bindings?: GestureBinding[];
|
|
3443
3714
|
actions?: Action[];
|
|
3444
|
-
|
|
3715
|
+
/** One layer, or several composed in the given order. */
|
|
3716
|
+
overlay?: RenderLayer<unknown> | RenderLayer<unknown>[];
|
|
3717
|
+
/** Defaults to `'top'`. Applies to every layer in `overlay`. */
|
|
3718
|
+
overlayPosition?: OverlayPosition;
|
|
3445
3719
|
presentation?: ToolPresentation;
|
|
3446
3720
|
/** Reflection escape hatch — the authored form, when there was one. */
|
|
3447
3721
|
def?: unknown;
|
|
3448
3722
|
}
|
|
3449
3723
|
|
|
3724
|
+
/**
|
|
3725
|
+
* Configurable activation-key descriptor for tools that expose their
|
|
3726
|
+
* keybinding to the host (currently Lasso and Eyedropper). Captures
|
|
3727
|
+
* only the fields meaningful to a caller-supplied tool-select key —
|
|
3728
|
+
* dispatcher-internal fields (`skipInEditable`, `enabled`,
|
|
3729
|
+
* `preventDefault`) live on `KeyBinding` in keyHelpers.ts and are
|
|
3730
|
+
* not part of the configurable surface.
|
|
3731
|
+
*/
|
|
3732
|
+
interface ToolKeybinding {
|
|
3733
|
+
/** Key or list of keys to match (case-insensitive against `event.key`). */
|
|
3734
|
+
key: string | readonly string[];
|
|
3735
|
+
/** Require Cmd (mac) / Ctrl (others). Default `false`. */
|
|
3736
|
+
mod?: boolean;
|
|
3737
|
+
/** Require Alt. Default `false`. */
|
|
3738
|
+
alt?: boolean;
|
|
3739
|
+
/**
|
|
3740
|
+
* Shift policy. `undefined`/`false` forbids shift, `true` requires
|
|
3741
|
+
* shift, `'optional'` allows either.
|
|
3742
|
+
*/
|
|
3743
|
+
shift?: boolean | 'optional';
|
|
3744
|
+
}
|
|
3745
|
+
|
|
3450
3746
|
/** Modifier-key snapshot at event dispatch time. `space` is included
|
|
3451
3747
|
* because tools commonly use space as a hotkey-slot trigger and may
|
|
3452
3748
|
* also want to read it as a flag mid-gesture. */
|
|
@@ -3716,30 +4012,11 @@ declare const ActionDisabledReason: {
|
|
|
3716
4012
|
/** Sentinel: the predicate threw. Surfaced by `evaluateEnabled`'s catch. */
|
|
3717
4013
|
readonly PredicateThrew: "predicate-threw";
|
|
3718
4014
|
};
|
|
4015
|
+
/** Why an action is unavailable right now. */
|
|
3719
4016
|
type ActionDisabledReason = (typeof ActionDisabledReason)[keyof typeof ActionDisabledReason];
|
|
3720
4017
|
|
|
3721
|
-
/**
|
|
3722
|
-
*
|
|
3723
|
-
* keybinding to the host (currently Lasso and Eyedropper). Captures
|
|
3724
|
-
* only the fields meaningful to a caller-supplied tool-select key —
|
|
3725
|
-
* dispatcher-internal fields (`skipInEditable`, `enabled`,
|
|
3726
|
-
* `preventDefault`) live on `KeyBinding` in keyHelpers.ts and are
|
|
3727
|
-
* not part of the configurable surface.
|
|
3728
|
-
*/
|
|
3729
|
-
interface ToolKeybinding {
|
|
3730
|
-
/** Key or list of keys to match (case-insensitive against `event.key`). */
|
|
3731
|
-
key: string | readonly string[];
|
|
3732
|
-
/** Require Cmd (mac) / Ctrl (others). Default `false`. */
|
|
3733
|
-
mod?: boolean;
|
|
3734
|
-
/** Require Alt. Default `false`. */
|
|
3735
|
-
alt?: boolean;
|
|
3736
|
-
/**
|
|
3737
|
-
* Shift policy. `undefined`/`false` forbids shift, `true` requires
|
|
3738
|
-
* shift, `'optional'` allows either.
|
|
3739
|
-
*/
|
|
3740
|
-
shift?: boolean | 'optional';
|
|
3741
|
-
}
|
|
3742
|
-
|
|
4018
|
+
/** The tool registry's runtime surface: which tool is active, which is
|
|
4019
|
+
* temporarily held by a hotkey, and how to change either. */
|
|
3743
4020
|
interface ToolsApi {
|
|
3744
4021
|
/** Current active-slot tool id. */
|
|
3745
4022
|
active: string;
|
|
@@ -3760,12 +4037,13 @@ interface ToolsApi {
|
|
|
3760
4037
|
/** Returns true if a tool with the given id is in the registry or ambient list. */
|
|
3761
4038
|
has(id: string): boolean;
|
|
3762
4039
|
/** All overlay layers from currently-engaged tools (active slot, hotkey
|
|
3763
|
-
* slot if engaged, all ambient slot tools)
|
|
3764
|
-
* `overlay` field. Order: active, then hotkey
|
|
3765
|
-
* ambient (registration order). */
|
|
3766
|
-
getActiveOverlays(): RenderLayer<unknown>[];
|
|
4040
|
+
* slot if engaged, all ambient slot tools) that declare `position`.
|
|
4041
|
+
* Filters out tools with no `overlay` field. Order: active, then hotkey
|
|
4042
|
+
* (if engaged), then ambient (registration order). */
|
|
4043
|
+
getActiveOverlays(position?: OverlayPosition): RenderLayer<unknown>[];
|
|
3767
4044
|
}
|
|
3768
4045
|
|
|
4046
|
+
/** Props for {@link Sidebar}. */
|
|
3769
4047
|
interface SidebarProps {
|
|
3770
4048
|
/**
|
|
3771
4049
|
* Edge the sidebar docks to. Adds a class hook (`s.left` / `s.right`)
|
|
@@ -3796,6 +4074,7 @@ interface SidebarProps {
|
|
|
3796
4074
|
*/
|
|
3797
4075
|
declare function Sidebar(props: SidebarProps): react_jsx_runtime.JSX.Element;
|
|
3798
4076
|
|
|
4077
|
+
/** Props for {@link SidebarPanel}. */
|
|
3799
4078
|
interface SidebarPanelProps {
|
|
3800
4079
|
/** Title rendered in the panel's header row. */
|
|
3801
4080
|
title?: ReactNode;
|
|
@@ -3830,6 +4109,7 @@ interface SidebarPanelProps {
|
|
|
3830
4109
|
*/
|
|
3831
4110
|
declare function SidebarPanel(props: SidebarPanelProps): react_jsx_runtime.JSX.Element;
|
|
3832
4111
|
|
|
4112
|
+
/** Props for {@link ToolButton}. */
|
|
3833
4113
|
interface ToolButtonProps {
|
|
3834
4114
|
/** Icon node (typically an SVG component). */
|
|
3835
4115
|
icon: ReactNode;
|
|
@@ -3856,6 +4136,9 @@ interface ToolButtonProps {
|
|
|
3856
4136
|
tabbable?: boolean;
|
|
3857
4137
|
/** Click handler. */
|
|
3858
4138
|
onClick(): void;
|
|
4139
|
+
/** Key handler for the underlying button — a toolbar's roving-tabindex
|
|
4140
|
+
* navigation attaches here. */
|
|
4141
|
+
onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
|
|
3859
4142
|
/**
|
|
3860
4143
|
* Tooltip content. Defaults to `label` (plus `shortcut` if provided).
|
|
3861
4144
|
*/
|
|
@@ -3870,6 +4153,7 @@ interface ToolButtonProps {
|
|
|
3870
4153
|
*/
|
|
3871
4154
|
declare function ToolButton(props: ToolButtonProps): react_jsx_runtime.JSX.Element;
|
|
3872
4155
|
|
|
4156
|
+
/** Props for {@link ToolGroup}. */
|
|
3873
4157
|
interface ToolGroupProps {
|
|
3874
4158
|
children: ReactNode;
|
|
3875
4159
|
/**
|
|
@@ -3911,6 +4195,7 @@ declare function formatShortcutParts(b: ShortcutInput | undefined): readonly str
|
|
|
3911
4195
|
* is treated as falsy. */
|
|
3912
4196
|
declare function formatShortcut(b: ShortcutInput | undefined): string | undefined;
|
|
3913
4197
|
|
|
4198
|
+
/** Props for {@link ToolPalette}. */
|
|
3914
4199
|
interface ToolPaletteProps {
|
|
3915
4200
|
tools: ToolsApi;
|
|
3916
4201
|
orientation?: 'vertical' | 'horizontal';
|
|
@@ -3933,9 +4218,22 @@ interface ToolPaletteProps {
|
|
|
3933
4218
|
*/
|
|
3934
4219
|
groupOrder?: readonly string[];
|
|
3935
4220
|
}
|
|
4221
|
+
/**
|
|
4222
|
+
* Toolbar of the registered tools, split into separator-divided groups by
|
|
4223
|
+
* each tool's presentation group and navigable by arrow keys. Clicking a
|
|
4224
|
+
* button makes that tool active.
|
|
4225
|
+
*
|
|
4226
|
+
* Given a `modeRegistry`, tools whose capabilities the current mode does not
|
|
4227
|
+
* allow render greyed out and inert rather than disappearing.
|
|
4228
|
+
*/
|
|
3936
4229
|
declare function ToolPalette(props: ToolPaletteProps): react_jsx_runtime.JSX.Element;
|
|
3937
4230
|
|
|
4231
|
+
/**
|
|
4232
|
+
* Whether a {@link Field} stacks its label above the control or sits them
|
|
4233
|
+
* side by side.
|
|
4234
|
+
*/
|
|
3938
4235
|
type FieldOrientation = 'stacked' | 'row';
|
|
4236
|
+
/** Props for {@link Field}. */
|
|
3939
4237
|
type FieldProps = {
|
|
3940
4238
|
orientation?: FieldOrientation;
|
|
3941
4239
|
className?: string;
|
|
@@ -3951,6 +4249,10 @@ type FieldProps = {
|
|
|
3951
4249
|
* control to sit in the same visual rhythm.
|
|
3952
4250
|
*/
|
|
3953
4251
|
declare function Field({ orientation, className, children }: FieldProps): react_jsx_runtime.JSX.Element;
|
|
4252
|
+
/**
|
|
4253
|
+
* The class names {@link Field} paints its slots with, so a control composing
|
|
4254
|
+
* its own layout can match the same form-row rhythm.
|
|
4255
|
+
*/
|
|
3954
4256
|
declare const fieldClasses: {
|
|
3955
4257
|
root: string;
|
|
3956
4258
|
row: string;
|
|
@@ -3959,6 +4261,7 @@ declare const fieldClasses: {
|
|
|
3959
4261
|
error: string;
|
|
3960
4262
|
};
|
|
3961
4263
|
|
|
4264
|
+
/** Props for {@link Input}, on top of React Aria's `TextField` props. */
|
|
3962
4265
|
type InputProps = Omit<TextFieldProps, 'children' | 'className'> & {
|
|
3963
4266
|
label?: ReactNode;
|
|
3964
4267
|
description?: ReactNode;
|
|
@@ -3985,6 +4288,10 @@ declare const Input: react.ForwardRefExoticComponent<Omit<TextFieldProps, "child
|
|
|
3985
4288
|
className?: string;
|
|
3986
4289
|
} & react.RefAttributes<HTMLInputElement>>;
|
|
3987
4290
|
|
|
4291
|
+
/**
|
|
4292
|
+
* Props for {@link Checkbox}, on top of React Aria's `Checkbox` props. The
|
|
4293
|
+
* label is passed as children.
|
|
4294
|
+
*/
|
|
3988
4295
|
type CheckboxProps = Omit<CheckboxProps$1, 'children' | 'className'> & {
|
|
3989
4296
|
children?: ReactNode;
|
|
3990
4297
|
className?: string;
|
|
@@ -3998,35 +4305,58 @@ declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxProps$1, "c
|
|
|
3998
4305
|
className?: string;
|
|
3999
4306
|
} & react.RefAttributes<HTMLLabelElement>>;
|
|
4000
4307
|
|
|
4308
|
+
/**
|
|
4309
|
+
* Props for {@link Switch}, on top of React Aria's `Switch` props. The label
|
|
4310
|
+
* is passed as children.
|
|
4311
|
+
*/
|
|
4001
4312
|
type SwitchProps = Omit<SwitchProps$1, 'children' | 'className'> & {
|
|
4002
4313
|
children?: ReactNode;
|
|
4003
4314
|
className?: string;
|
|
4004
4315
|
};
|
|
4316
|
+
/**
|
|
4317
|
+
* On/off toggle wrapping React Aria's Switch, skinned against the `--wzl-*`
|
|
4318
|
+
* tokens. Use for a setting that takes effect immediately; use `Checkbox`
|
|
4319
|
+
* for one that is submitted with a form.
|
|
4320
|
+
*
|
|
4321
|
+
* `ref` forwards to the underlying label element.
|
|
4322
|
+
*/
|
|
4005
4323
|
declare const Switch: react.ForwardRefExoticComponent<Omit<SwitchProps$1, "children" | "className"> & {
|
|
4006
4324
|
children?: ReactNode;
|
|
4007
4325
|
className?: string;
|
|
4008
4326
|
} & react.RefAttributes<HTMLLabelElement>>;
|
|
4009
4327
|
|
|
4328
|
+
/** Props for {@link Tabs}, on top of React Aria's `Tabs` props. */
|
|
4010
4329
|
type TabsProps = Omit<TabsProps$1, 'className' | 'children'> & {
|
|
4011
4330
|
children?: ReactNode;
|
|
4012
4331
|
className?: string;
|
|
4013
4332
|
};
|
|
4333
|
+
/**
|
|
4334
|
+
* Tab set wrapping React Aria's Tabs, skinned against the `--wzl-*` tokens.
|
|
4335
|
+
* Holds a {@link TabList} and one {@link TabPanel} per tab.
|
|
4336
|
+
*/
|
|
4014
4337
|
declare function Tabs({ children, className, ...rest }: TabsProps): react_jsx_runtime.JSX.Element;
|
|
4338
|
+
/** Props for {@link TabList}, on top of React Aria's `TabList` props. */
|
|
4015
4339
|
type TabListProps<T extends object> = Omit<TabListProps$1<T>, 'className'> & {
|
|
4016
4340
|
className?: string;
|
|
4017
4341
|
};
|
|
4342
|
+
/** The row of tab buttons inside a {@link Tabs}. */
|
|
4018
4343
|
declare function TabList<T extends object>({ className, ...rest }: TabListProps<T>): react_jsx_runtime.JSX.Element;
|
|
4344
|
+
/** Props for {@link Tab}, on top of React Aria's `Tab` props. */
|
|
4019
4345
|
type TabProps = Omit<TabProps$1, 'className' | 'children'> & {
|
|
4020
4346
|
children?: ReactNode;
|
|
4021
4347
|
className?: string;
|
|
4022
4348
|
};
|
|
4349
|
+
/** One tab button. Its `id` selects the {@link TabPanel} it reveals. */
|
|
4023
4350
|
declare function Tab({ children, className, ...rest }: TabProps): react_jsx_runtime.JSX.Element;
|
|
4351
|
+
/** Props for {@link TabPanel}, on top of React Aria's `TabPanel` props. */
|
|
4024
4352
|
type TabPanelProps = Omit<TabPanelProps$1, 'className' | 'children'> & {
|
|
4025
4353
|
children?: ReactNode;
|
|
4026
4354
|
className?: string;
|
|
4027
4355
|
};
|
|
4356
|
+
/** The content shown for the {@link Tab} whose `id` matches this panel's. */
|
|
4028
4357
|
declare function TabPanel({ children, className, ...rest }: TabPanelProps): react_jsx_runtime.JSX.Element;
|
|
4029
4358
|
|
|
4359
|
+
/** Props for {@link RadioGroup}, on top of React Aria's `RadioGroup` props. */
|
|
4030
4360
|
type RadioGroupProps = Omit<RadioGroupProps$1, 'children' | 'className'> & {
|
|
4031
4361
|
label?: ReactNode;
|
|
4032
4362
|
description?: ReactNode;
|
|
@@ -4034,13 +4364,21 @@ type RadioGroupProps = Omit<RadioGroupProps$1, 'children' | 'className'> & {
|
|
|
4034
4364
|
children?: ReactNode;
|
|
4035
4365
|
className?: string;
|
|
4036
4366
|
};
|
|
4367
|
+
/**
|
|
4368
|
+
* A set of mutually exclusive choices, wrapping React Aria's RadioGroup and
|
|
4369
|
+
* supplying the same label / description / errorMessage slots as `Input`.
|
|
4370
|
+
* Holds {@link Radio} children.
|
|
4371
|
+
*/
|
|
4037
4372
|
declare function RadioGroup(props: RadioGroupProps): react_jsx_runtime.JSX.Element;
|
|
4373
|
+
/** Props for {@link Radio}, on top of React Aria's `Radio` props. */
|
|
4038
4374
|
type RadioProps = Omit<RadioProps$1, 'className' | 'children'> & {
|
|
4039
4375
|
children?: ReactNode;
|
|
4040
4376
|
className?: string;
|
|
4041
4377
|
};
|
|
4378
|
+
/** One choice in a {@link RadioGroup}. The label is passed as children. */
|
|
4042
4379
|
declare function Radio({ children, className, ...rest }: RadioProps): react_jsx_runtime.JSX.Element;
|
|
4043
4380
|
|
|
4381
|
+
/** Props for {@link NumberField}, on top of React Aria's `NumberField` props. */
|
|
4044
4382
|
type NumberFieldProps = Omit<NumberFieldProps$1, 'children' | 'className'> & {
|
|
4045
4383
|
label?: ReactNode;
|
|
4046
4384
|
description?: ReactNode;
|
|
@@ -4052,6 +4390,14 @@ type NumberFieldProps = Omit<NumberFieldProps$1, 'children' | 'className'> & {
|
|
|
4052
4390
|
placeholder?: string;
|
|
4053
4391
|
className?: string;
|
|
4054
4392
|
};
|
|
4393
|
+
/**
|
|
4394
|
+
* Numeric input with stepper buttons, wrapping React Aria's NumberField and
|
|
4395
|
+
* supplying the same label / description / errorMessage slots as `Input`.
|
|
4396
|
+
* Arrow keys and scroll step the value; parsing and formatting are React
|
|
4397
|
+
* Aria's.
|
|
4398
|
+
*
|
|
4399
|
+
* `ref` forwards to the underlying `<input>`.
|
|
4400
|
+
*/
|
|
4055
4401
|
declare const NumberField: react.ForwardRefExoticComponent<Omit<NumberFieldProps$1, "children" | "className"> & {
|
|
4056
4402
|
label?: ReactNode;
|
|
4057
4403
|
description?: ReactNode;
|
|
@@ -4064,6 +4410,7 @@ declare const NumberField: react.ForwardRefExoticComponent<Omit<NumberFieldProps
|
|
|
4064
4410
|
className?: string;
|
|
4065
4411
|
} & react.RefAttributes<HTMLInputElement>>;
|
|
4066
4412
|
|
|
4413
|
+
/** One option in a {@link Select}'s `options` list. */
|
|
4067
4414
|
type SelectOption = {
|
|
4068
4415
|
value: string;
|
|
4069
4416
|
label: ReactNode;
|
|
@@ -4077,6 +4424,10 @@ type SelectOption = {
|
|
|
4077
4424
|
textValue?: string;
|
|
4078
4425
|
};
|
|
4079
4426
|
type Key$1 = string | number;
|
|
4427
|
+
/**
|
|
4428
|
+
* Props for {@link Select}, on top of React Aria's `Select` props, with the
|
|
4429
|
+
* selection key narrowed to the option value type.
|
|
4430
|
+
*/
|
|
4080
4431
|
type SelectProps<T extends Key$1 = string> = Omit<SelectProps$1<object>, 'children' | 'className' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange'> & {
|
|
4081
4432
|
label?: ReactNode;
|
|
4082
4433
|
description?: ReactNode;
|
|
@@ -4101,12 +4452,23 @@ type SelectProps<T extends Key$1 = string> = Omit<SelectProps$1<object>, 'childr
|
|
|
4101
4452
|
* union for `value` (e.g. `'r' | 'g' | 'b'`) get a typed `onSelectionChange`.
|
|
4102
4453
|
*/
|
|
4103
4454
|
declare function Select<T extends Key$1 = string>(props: SelectProps<T>): react_jsx_runtime.JSX.Element;
|
|
4455
|
+
/** Props for {@link SelectItem}, on top of React Aria's `ListBoxItem` props. */
|
|
4104
4456
|
type SelectItemProps = Omit<ListBoxItemProps, 'className' | 'children'> & {
|
|
4105
4457
|
children?: ReactNode;
|
|
4106
4458
|
className?: string;
|
|
4107
4459
|
};
|
|
4460
|
+
/**
|
|
4461
|
+
* One row in a {@link Select}'s list, with a leading check mark when
|
|
4462
|
+
* selected. A string child supplies its own `textValue`; anything richer must
|
|
4463
|
+
* pass one so type-to-select and screen readers have something to read.
|
|
4464
|
+
*/
|
|
4108
4465
|
declare function SelectItem({ children, className, textValue, ...rest }: SelectItemProps): react_jsx_runtime.JSX.Element;
|
|
4109
4466
|
|
|
4467
|
+
/**
|
|
4468
|
+
* One option in a {@link ComboBox}'s `options` list. `textValue` is the
|
|
4469
|
+
* plain-text form used for filtering and screen readers, needed only when
|
|
4470
|
+
* `label` isn't a bare string.
|
|
4471
|
+
*/
|
|
4110
4472
|
type ComboBoxOption = {
|
|
4111
4473
|
value: string;
|
|
4112
4474
|
label: ReactNode;
|
|
@@ -4114,6 +4476,10 @@ type ComboBoxOption = {
|
|
|
4114
4476
|
isDisabled?: boolean;
|
|
4115
4477
|
};
|
|
4116
4478
|
type Key = string | number;
|
|
4479
|
+
/**
|
|
4480
|
+
* Props for {@link ComboBox}, on top of React Aria's `ComboBox` props, with
|
|
4481
|
+
* the selection key narrowed to the option value type.
|
|
4482
|
+
*/
|
|
4117
4483
|
type ComboBoxProps<T extends Key = string> = Omit<ComboBoxProps$1<object>, 'children' | 'className' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange'> & {
|
|
4118
4484
|
label?: ReactNode;
|
|
4119
4485
|
description?: ReactNode;
|
|
@@ -4135,11 +4501,14 @@ type ComboBoxProps<T extends Key = string> = Omit<ComboBoxProps$1<object>, 'chil
|
|
|
4135
4501
|
* is in the input, selection clears (key becomes null).
|
|
4136
4502
|
*/
|
|
4137
4503
|
declare function ComboBox<T extends Key = string>(props: ComboBoxProps<T>): react_jsx_runtime.JSX.Element;
|
|
4504
|
+
/** Props for {@link ComboBoxItem}, on top of React Aria's `ListBoxItem` props. */
|
|
4138
4505
|
type ComboBoxItemProps = Omit<ListBoxItemProps, 'className'> & {
|
|
4139
4506
|
className?: string;
|
|
4140
4507
|
};
|
|
4508
|
+
/** One row in a {@link ComboBox}'s filtered list. */
|
|
4141
4509
|
declare function ComboBoxItem({ className, ...rest }: ComboBoxItemProps): react_jsx_runtime.JSX.Element;
|
|
4142
4510
|
|
|
4511
|
+
/** Props for {@link RangeSlider}, on top of React Aria's `Slider` props. */
|
|
4143
4512
|
type RangeSliderProps = Omit<SliderProps$1, 'children' | 'className'> & {
|
|
4144
4513
|
label?: ReactNode;
|
|
4145
4514
|
/** Show the current value next to the label. Defaults to true when a
|
|
@@ -4156,6 +4525,7 @@ type RangeSliderProps = Omit<SliderProps$1, 'children' | 'className'> & {
|
|
|
4156
4525
|
*/
|
|
4157
4526
|
declare function RangeSlider(props: RangeSliderProps): react_jsx_runtime.JSX.Element;
|
|
4158
4527
|
|
|
4528
|
+
/** Props for {@link Dialog}, on top of React Aria's `ModalOverlay` props. */
|
|
4159
4529
|
type DialogProps = Omit<ModalOverlayProps, 'children' | 'className'> & {
|
|
4160
4530
|
/** Heading rendered in the dialog's default header. Omit when supplying
|
|
4161
4531
|
* a custom `header` slot via children. */
|
|
@@ -4195,6 +4565,7 @@ interface Point {
|
|
|
4195
4565
|
y: number;
|
|
4196
4566
|
}
|
|
4197
4567
|
|
|
4568
|
+
/** Background grid configuration for a {@link Plot2D}. */
|
|
4198
4569
|
interface GridSettings {
|
|
4199
4570
|
/** Number of evenly-spaced internal grid lines per axis (excluding
|
|
4200
4571
|
* the edges). Applied to both x and y. Default 3. */
|
|
@@ -4202,14 +4573,17 @@ interface GridSettings {
|
|
|
4202
4573
|
/** Stroke color override. When omitted, uses `var(--plot-grid)`. */
|
|
4203
4574
|
color?: string;
|
|
4204
4575
|
}
|
|
4576
|
+
/** Axis-line configuration for a {@link Plot2D}. */
|
|
4205
4577
|
interface AxesSettings {
|
|
4206
4578
|
/** Stroke color override. When omitted, uses `var(--plot-axis)`. */
|
|
4207
4579
|
color?: string;
|
|
4208
4580
|
}
|
|
4581
|
+
/** A pointer position given in both of the plot's coordinate systems. */
|
|
4209
4582
|
interface Plot2DCoords {
|
|
4210
4583
|
plot: Point;
|
|
4211
4584
|
model: Point;
|
|
4212
4585
|
}
|
|
4586
|
+
/** Props for {@link Plot2D}. */
|
|
4213
4587
|
interface Plot2DProps {
|
|
4214
4588
|
width: number;
|
|
4215
4589
|
height: number;
|
|
@@ -4233,6 +4607,11 @@ interface Plot2DProps {
|
|
|
4233
4607
|
onKeyDown?: (e: KeyboardEvent<SVGSVGElement>) => void;
|
|
4234
4608
|
children?: ReactNode;
|
|
4235
4609
|
}
|
|
4610
|
+
/**
|
|
4611
|
+
* Imperative handle on a {@link Plot2D}: the SVG element, its size, and the
|
|
4612
|
+
* coordinate conversions, including ones that start from a raw DOM event so a
|
|
4613
|
+
* drag tracked on `window` can still map back into the plot.
|
|
4614
|
+
*/
|
|
4236
4615
|
interface Plot2DHandle {
|
|
4237
4616
|
readonly svg: SVGSVGElement | null;
|
|
4238
4617
|
plotToModel(pt: Point): Point;
|
|
@@ -4251,6 +4630,11 @@ interface Plot2DHandle {
|
|
|
4251
4630
|
readonly width: number;
|
|
4252
4631
|
readonly height: number;
|
|
4253
4632
|
}
|
|
4633
|
+
/**
|
|
4634
|
+
* An SVG plotting surface with an optional grid and axes. It draws the frame
|
|
4635
|
+
* and owns the model-space to plot-space mapping; the plotted content is
|
|
4636
|
+
* whatever children are passed, positioned in plot space.
|
|
4637
|
+
*/
|
|
4254
4638
|
declare const Plot2D: react.ForwardRefExoticComponent<Plot2DProps & react.RefAttributes<Plot2DHandle>>;
|
|
4255
4639
|
|
|
4256
4640
|
/**
|
|
@@ -4274,6 +4658,7 @@ type InterpolationMode = 'linear' | 'catmull-rom' | 'catmull-rom-uniform' | 'cat
|
|
|
4274
4658
|
* and a derived (read-only) curve on the same chart.
|
|
4275
4659
|
*/
|
|
4276
4660
|
|
|
4661
|
+
/** One anchor of a curve, in model space. */
|
|
4277
4662
|
interface ControlPoint {
|
|
4278
4663
|
x: number;
|
|
4279
4664
|
y: number;
|
|
@@ -4281,9 +4666,27 @@ interface ControlPoint {
|
|
|
4281
4666
|
* user. Render as a smaller diamond with locked styling. */
|
|
4282
4667
|
locked?: boolean;
|
|
4283
4668
|
}
|
|
4669
|
+
/**
|
|
4670
|
+
* Whether a curve's points keep their x order. In `'1d'` an anchor cannot be
|
|
4671
|
+
* dragged past its neighbors and a new point is inserted at its x position;
|
|
4672
|
+
* in `'2d'` points are free to move anywhere and keep their list order.
|
|
4673
|
+
*/
|
|
4284
4674
|
type CurveDomain = '1d' | '2d';
|
|
4675
|
+
/**
|
|
4676
|
+
* How much of a curve's first and last anchor the user may move: everything,
|
|
4677
|
+
* only their y, or nothing.
|
|
4678
|
+
*/
|
|
4285
4679
|
type EndpointMode = 'free' | 'pinned-x' | 'pinned-both';
|
|
4680
|
+
/**
|
|
4681
|
+
* Where a click adds a new anchor — on the curve itself, anywhere in the
|
|
4682
|
+
* plot, or nowhere.
|
|
4683
|
+
*/
|
|
4286
4684
|
type AddPointMode = 'click-curve' | 'click-empty' | 'never';
|
|
4685
|
+
/**
|
|
4686
|
+
* What a `renderAnchor` function is given for one anchor: the point, its
|
|
4687
|
+
* index, its position in plot space (`cx`/`cy`), and the states that change
|
|
4688
|
+
* how it should look.
|
|
4689
|
+
*/
|
|
4287
4690
|
interface AnchorRenderProps {
|
|
4288
4691
|
point: ControlPoint;
|
|
4289
4692
|
index: number;
|
|
@@ -4294,17 +4697,26 @@ interface AnchorRenderProps {
|
|
|
4294
4697
|
isPinnedEndpoint: boolean;
|
|
4295
4698
|
isEndpoint: boolean;
|
|
4296
4699
|
}
|
|
4700
|
+
/**
|
|
4701
|
+
* Per-instance curve-rendering overrides. Currently empty — passing `{}`
|
|
4702
|
+
* means "draw the curve", and `false`/`null` means don't.
|
|
4703
|
+
*/
|
|
4297
4704
|
interface CurveSettings {
|
|
4298
4705
|
}
|
|
4706
|
+
/** Shades the region between the curve and one edge of the plot. */
|
|
4299
4707
|
interface FillSettings {
|
|
4300
4708
|
side: 'below' | 'above';
|
|
4301
4709
|
color?: string;
|
|
4302
4710
|
}
|
|
4303
4711
|
|
|
4712
|
+
/**
|
|
4713
|
+
* Props for {@link CurveEditor}. `onInput` fires throughout a gesture and
|
|
4714
|
+
* `onChange` once at its end, with the pre-gesture points as `prev`.
|
|
4715
|
+
*/
|
|
4304
4716
|
interface CurveEditorProps {
|
|
4305
4717
|
value: readonly ControlPoint[];
|
|
4306
|
-
|
|
4307
|
-
|
|
4718
|
+
onInput: (next: ControlPoint[]) => void;
|
|
4719
|
+
onChange?: (next: ControlPoint[], prev: readonly ControlPoint[]) => void;
|
|
4308
4720
|
domain?: CurveDomain;
|
|
4309
4721
|
interpolation?: InterpolationMode;
|
|
4310
4722
|
endpoints?: EndpointMode;
|
|
@@ -4328,16 +4740,25 @@ interface CurveEditorProps {
|
|
|
4328
4740
|
className?: string;
|
|
4329
4741
|
style?: CSSProperties;
|
|
4330
4742
|
}
|
|
4743
|
+
/**
|
|
4744
|
+
* Editable curve through a list of control points: drag anchors, click to
|
|
4745
|
+
* insert, right-click to delete, with optional built-in undo.
|
|
4746
|
+
*
|
|
4747
|
+
* This is the single-curve API, implemented as one `createFunctionLayer` on
|
|
4748
|
+
* a `LayeredCurveEditor`. Reach for those directly to stack several curves
|
|
4749
|
+
* on one plot.
|
|
4750
|
+
*/
|
|
4331
4751
|
declare function CurveEditor(props: CurveEditorProps): react_jsx_runtime.JSX.Element;
|
|
4332
4752
|
|
|
4753
|
+
/** Props for {@link PointPlotter}. */
|
|
4333
4754
|
interface PointPlotterProps {
|
|
4334
4755
|
/** Plotted points; caller-owned. */
|
|
4335
4756
|
value: readonly ControlPoint[];
|
|
4336
4757
|
/** Fires every frame during drag with the live in-flight value. */
|
|
4337
|
-
|
|
4758
|
+
onInput: (next: ControlPoint[]) => void;
|
|
4338
4759
|
/** Fires once per discrete user action (drag-end, add, delete) with
|
|
4339
4760
|
* the new value and the value at gesture start. Wire history here. */
|
|
4340
|
-
|
|
4761
|
+
onChange?: (next: ControlPoint[], prev: readonly ControlPoint[]) => void;
|
|
4341
4762
|
/** Model-space x range. Default [0, 1]. */
|
|
4342
4763
|
xRange?: readonly [number, number];
|
|
4343
4764
|
/** Model-space y range. Default [0, 1]. */
|
|
@@ -4378,6 +4799,14 @@ interface PointPlotterProps {
|
|
|
4378
4799
|
*/
|
|
4379
4800
|
declare function PointPlotter(props: PointPlotterProps): react_jsx_runtime.JSX.Element;
|
|
4380
4801
|
|
|
4802
|
+
/**
|
|
4803
|
+
* Options for {@link paintGradientTrack}.
|
|
4804
|
+
*
|
|
4805
|
+
* `gradient` maps a normalized position along the track (0 to 1) to a CSS
|
|
4806
|
+
* color; `samples` is how many stops the resulting linear-gradient uses.
|
|
4807
|
+
* `activeRange`, given in the slider's own value units, keeps that span at
|
|
4808
|
+
* full strength and dims + hatches the rest.
|
|
4809
|
+
*/
|
|
4381
4810
|
type GradientTrackOpts = {
|
|
4382
4811
|
gradient: (t: number) => string;
|
|
4383
4812
|
samples?: number;
|
|
@@ -4389,8 +4818,19 @@ type GradientTrackOpts = {
|
|
|
4389
4818
|
dim?: number;
|
|
4390
4819
|
};
|
|
4391
4820
|
};
|
|
4821
|
+
/**
|
|
4822
|
+
* Builds a `Slider` `renderTrack` function that paints the track as a
|
|
4823
|
+
* sampled color gradient, optionally dimming and hatching the portions
|
|
4824
|
+
* outside an active range.
|
|
4825
|
+
*/
|
|
4392
4826
|
declare function paintGradientTrack(opts: GradientTrackOpts): (ctx: TrackCtx) => ReactNode;
|
|
4393
4827
|
|
|
4828
|
+
/**
|
|
4829
|
+
* A chroma envelope over lightness, as three linear segments: flat at `cBot`
|
|
4830
|
+
* below `lRange[0]`, rising to `cPeak` at `midL`, falling to `cTop` at
|
|
4831
|
+
* `lRange[1]`, flat beyond. Keeps a color ramp inside gamut at the light and
|
|
4832
|
+
* dark ends while staying saturated through the middle.
|
|
4833
|
+
*/
|
|
4394
4834
|
type ChromaCurve = {
|
|
4395
4835
|
lRange: [number, number];
|
|
4396
4836
|
midL: number;
|
|
@@ -4398,13 +4838,20 @@ type ChromaCurve = {
|
|
|
4398
4838
|
cPeak: number;
|
|
4399
4839
|
cTop: number;
|
|
4400
4840
|
};
|
|
4841
|
+
/** A single lightness/chroma sample. */
|
|
4401
4842
|
type ChromaCurvePoint = {
|
|
4402
4843
|
L: number;
|
|
4403
4844
|
C: number;
|
|
4404
4845
|
};
|
|
4846
|
+
/**
|
|
4847
|
+
* Converts an OKLCH color to a gamut-clipped `#rrggbb` string. Hue is in
|
|
4848
|
+
* degrees, unlike the kit's OKLab helpers which take radians.
|
|
4849
|
+
*/
|
|
4405
4850
|
declare function oklchToHex(L: number, C: number, Hdeg: number): string;
|
|
4851
|
+
/** Evaluates a {@link ChromaCurve} at a lightness, clamping outside its range. */
|
|
4406
4852
|
declare function chromaAt(L: number, curve: ChromaCurve): number;
|
|
4407
4853
|
|
|
4854
|
+
/** One row in a reorderable list. */
|
|
4408
4855
|
interface LayerListItem {
|
|
4409
4856
|
id: string;
|
|
4410
4857
|
label: ReactNode;
|
|
@@ -4414,6 +4861,10 @@ interface LayerListItem {
|
|
|
4414
4861
|
/** Optional color swatch rendered before the label. Any CSS color string. */
|
|
4415
4862
|
swatch?: string;
|
|
4416
4863
|
}
|
|
4864
|
+
/**
|
|
4865
|
+
* Options for {@link useReorderDragList}. `onReorder` receives the dragged ids
|
|
4866
|
+
* and the index they were dropped at, measured against the pre-drag `items`.
|
|
4867
|
+
*/
|
|
4417
4868
|
interface UseReorderDragListOptions {
|
|
4418
4869
|
items: LayerListItem[];
|
|
4419
4870
|
selectedIds: string[];
|
|
@@ -4421,10 +4872,18 @@ interface UseReorderDragListOptions {
|
|
|
4421
4872
|
/** Pointer-move distance (px) before pending drag engages. Default 4. */
|
|
4422
4873
|
threshold?: number;
|
|
4423
4874
|
}
|
|
4875
|
+
/**
|
|
4876
|
+
* Live drag state for rendering feedback: which ids are being dragged and the
|
|
4877
|
+
* insertion index the drop would use. Both `null` when no drag is engaged.
|
|
4878
|
+
*/
|
|
4424
4879
|
interface ReorderDragState {
|
|
4425
4880
|
draggedIds: string[] | null;
|
|
4426
4881
|
targetIndex: number | null;
|
|
4427
4882
|
}
|
|
4883
|
+
/**
|
|
4884
|
+
* Props to spread onto the list container and each row, plus the live
|
|
4885
|
+
* {@link ReorderDragState}.
|
|
4886
|
+
*/
|
|
4428
4887
|
interface ReorderDragHandlers {
|
|
4429
4888
|
rowProps(id: string, index: number): {
|
|
4430
4889
|
onPointerDown(e: PointerEvent$1): void;
|
|
@@ -4437,6 +4896,16 @@ interface ReorderDragHandlers {
|
|
|
4437
4896
|
};
|
|
4438
4897
|
state: ReorderDragState;
|
|
4439
4898
|
}
|
|
4899
|
+
/**
|
|
4900
|
+
* Drag-to-reorder for a vertical list of rows. Dragging a row that is part of
|
|
4901
|
+
* the current selection drags the whole selection; dragging any other row
|
|
4902
|
+
* drags just that row. Locked rows can neither be dragged nor crossed by a
|
|
4903
|
+
* drop. A drop that would leave a contiguous block where it already is does
|
|
4904
|
+
* not call `onReorder`.
|
|
4905
|
+
*
|
|
4906
|
+
* The pointer is captured on the row, so a drag that leaves the list still
|
|
4907
|
+
* tracks and still releases cleanly.
|
|
4908
|
+
*/
|
|
4440
4909
|
declare function useReorderDragList(opts: UseReorderDragListOptions): ReorderDragHandlers;
|
|
4441
4910
|
|
|
4442
4911
|
/** The only thing the hook needs to know about a bar's items: which are
|
|
@@ -4444,6 +4913,7 @@ declare function useReorderDragList(opts: UseReorderDragListOptions): ReorderDra
|
|
|
4444
4913
|
type RovingItem = {
|
|
4445
4914
|
disabled?: boolean;
|
|
4446
4915
|
};
|
|
4916
|
+
/** Options for {@link useRovingTabIndex}. */
|
|
4447
4917
|
type UseRovingTabIndexOptions = {
|
|
4448
4918
|
/** In the same order as the elements carrying `itemClassName`. */
|
|
4449
4919
|
items: readonly RovingItem[];
|
|
@@ -4461,6 +4931,10 @@ type UseRovingTabIndexOptions = {
|
|
|
4461
4931
|
* alone, which on a native `<button>` produces an ordinary click. */
|
|
4462
4932
|
onActivate?: (index: number) => void;
|
|
4463
4933
|
};
|
|
4934
|
+
/**
|
|
4935
|
+
* What {@link useRovingTabIndex} returns: a container ref plus the per-item
|
|
4936
|
+
* `tabIndex` and `onKeyDown` values to spread onto each item.
|
|
4937
|
+
*/
|
|
4464
4938
|
type RovingTabIndex<T extends HTMLElement = HTMLDivElement> = {
|
|
4465
4939
|
/** Attach to the container element that holds the items. */
|
|
4466
4940
|
rootRef: RefObject<T | null>;
|
|
@@ -4501,6 +4975,10 @@ declare function useRovingTabIndex<T extends HTMLElement = HTMLDivElement>(optio
|
|
|
4501
4975
|
* glyph doesn't get confused with a bullet or list dash.
|
|
4502
4976
|
*/
|
|
4503
4977
|
declare const MINUS_SIGN = "\u2212";
|
|
4978
|
+
/**
|
|
4979
|
+
* Formats a number for display, substituting {@link MINUS_SIGN} for the ASCII
|
|
4980
|
+
* hyphen `toLocaleString` emits. Non-finite values stringify as-is.
|
|
4981
|
+
*/
|
|
4504
4982
|
declare function formatNumber(value: number, options?: Intl.NumberFormatOptions): string;
|
|
4505
4983
|
|
|
4506
4984
|
export { ActionBar, ActionsBar, Badge, Button, Checkbox, ComboBox, ComboBoxItem, CurveEditor, DataGrid, Dialog, EDGE_PROFILES, Field, Input, KeyCap, KeySequence, MINUS_SIGN, NumberField, OptionsBar, Plot2D, PointPlotter, Powerline, Radio, RadioGroup, RangeSlider, Select, SelectItem, Sidebar, SidebarPanel, Slider, Switch, Tab, TabList, TabPanel, Tabs, ToggleBar, ToolButton, ToolGroup, ToolPalette, chromaAt, detectPlatform, dlog, fieldClasses, formatNumber, formatShortcut, formatShortcutParts, inferKeycapKind, isDebugEnabled, keyGlyph, keySpecFromKey, keySpecsFromMods, oklchToHex, paintGradientTrack, useReorderDragList, useRovingTabIndex };
|