@vuu-ui/grid-layout 4.0.0-alpha.1

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.
Files changed (142) hide show
  1. package/LICENSE +201 -0
  2. package/README.md +141 -0
  3. package/package.json +40 -0
  4. package/src/GridCommand.js +395 -0
  5. package/src/GridComponentSettings.js +163 -0
  6. package/src/GridController.js +359 -0
  7. package/src/GridDragCoordinator.js +293 -0
  8. package/src/GridGeometry.js +1298 -0
  9. package/src/GridLayout.css.js +119 -0
  10. package/src/GridLayout.js +120 -0
  11. package/src/GridLayoutContext.js +58 -0
  12. package/src/GridLayoutDocument.js +307 -0
  13. package/src/GridLayoutDocumentIds.js +110 -0
  14. package/src/GridLayoutItem.css.js +46 -0
  15. package/src/GridLayoutItem.js +147 -0
  16. package/src/GridLayoutLegacyCompatibility.js +66 -0
  17. package/src/GridLayoutModel.js +138 -0
  18. package/src/GridLayoutProvider.js +263 -0
  19. package/src/GridLayoutStackedItem.css.js +26 -0
  20. package/src/GridLayoutStackedtem.js +140 -0
  21. package/src/GridModel.js +1289 -0
  22. package/src/GridPlaceholder.css.js +9 -0
  23. package/src/GridPlaceholder.js +24 -0
  24. package/src/GridSnapshot.js +11 -0
  25. package/src/GridSplitter.css.js +62 -0
  26. package/src/GridSplitter.js +26 -0
  27. package/src/GridStack.js +277 -0
  28. package/src/Icon.css.js +8 -0
  29. package/src/Icon.js +26 -0
  30. package/src/IconButton.css.js +9 -0
  31. package/src/IconButton.js +28 -0
  32. package/src/TabDialog.css.js +10 -0
  33. package/src/TabDialog.js +77 -0
  34. package/src/TabMenu.css.js +8 -0
  35. package/src/TabMenu.js +78 -0
  36. package/src/componentToJson.js +41 -0
  37. package/src/drag-drop-next/DragContextNext.js +173 -0
  38. package/src/drag-drop-next/DragDropProviderNext.css.js +72 -0
  39. package/src/drag-drop-next/DragDropProviderNext.js +91 -0
  40. package/src/drag-drop-next/SpaceMan.js +256 -0
  41. package/src/drag-drop-next/TemplateDragSession.js +36 -0
  42. package/src/drag-drop-next/tabstrip-drag-drop.js +251 -0
  43. package/src/grid-dom-utils.js +57 -0
  44. package/src/grid-layout-utils.js +39 -0
  45. package/src/grid-snapshot-adapters.js +435 -0
  46. package/src/index.js +24 -0
  47. package/src/json-value.js +56 -0
  48. package/src/layoutFromJson.js +15 -0
  49. package/src/layoutToJson.js +5 -0
  50. package/src/propUtils.js +15 -0
  51. package/src/react-element-utils.js +15 -0
  52. package/src/typeOf.js +15 -0
  53. package/src/useAsDropTarget.js +229 -0
  54. package/src/useDraggable.js +46 -0
  55. package/src/useEditTabName.js +70 -0
  56. package/src/useGridChildProps.js +47 -0
  57. package/src/useGridControllerSnapshot.js +21 -0
  58. package/src/useGridLayout.js +727 -0
  59. package/src/useGridSplitterResizing.js +262 -0
  60. package/src/useNotDropTarget.js +2 -0
  61. package/types/AddTabDialog.d.ts +5 -0
  62. package/types/GridCommand.d.ts +146 -0
  63. package/types/GridComponentSettings.d.ts +71 -0
  64. package/types/GridController.d.ts +50 -0
  65. package/types/GridDragCoordinator.d.ts +80 -0
  66. package/types/GridGeometry.d.ts +331 -0
  67. package/types/GridLayout.d.ts +20 -0
  68. package/types/GridLayoutContext.d.ts +141 -0
  69. package/types/GridLayoutDocument.d.ts +61 -0
  70. package/types/GridLayoutDocumentIds.d.ts +15 -0
  71. package/types/GridLayoutItem.d.ts +28 -0
  72. package/types/GridLayoutLegacyCompatibility.d.ts +57 -0
  73. package/types/GridLayoutModel.d.ts +72 -0
  74. package/types/GridLayoutProvider.d.ts +59 -0
  75. package/types/GridLayoutStackedtem.d.ts +10 -0
  76. package/types/GridModel.d.ts +504 -0
  77. package/types/GridPlaceholder.d.ts +5 -0
  78. package/types/GridSnapshot.d.ts +49 -0
  79. package/types/GridSplitter.d.ts +10 -0
  80. package/types/GridStack.d.ts +160 -0
  81. package/types/Icon.d.ts +6 -0
  82. package/types/IconButton.d.ts +6 -0
  83. package/types/TabDialog.d.ts +9 -0
  84. package/types/TabMenu.d.ts +7 -0
  85. package/types/componentToJson.d.ts +38 -0
  86. package/types/drag-drop-next/DragContextNext.d.ts +92 -0
  87. package/types/drag-drop-next/DragDropProviderNext.d.ts +23 -0
  88. package/types/drag-drop-next/SpaceMan.d.ts +35 -0
  89. package/types/drag-drop-next/TemplateDragSession.d.ts +21 -0
  90. package/types/drag-drop-next/tabstrip-drag-drop.d.ts +3 -0
  91. package/types/grid-dom-utils.d.ts +17 -0
  92. package/types/grid-layout-utils.d.ts +18 -0
  93. package/types/grid-matrix.d.ts +5 -0
  94. package/types/grid-snapshot-adapters.d.ts +22 -0
  95. package/types/index.d.ts +24 -0
  96. package/types/json-value.d.ts +23 -0
  97. package/types/layoutFromJson.d.ts +4 -0
  98. package/types/layoutToJson.d.ts +3 -0
  99. package/types/propUtils.d.ts +5 -0
  100. package/types/react-element-utils.d.ts +3 -0
  101. package/types/src/AddTabDialog.d.ts +5 -0
  102. package/types/src/GridLayout.d.ts +14 -0
  103. package/types/src/GridLayoutContext.d.ts +88 -0
  104. package/types/src/GridLayoutItem.d.ts +28 -0
  105. package/types/src/GridLayoutModel.d.ts +59 -0
  106. package/types/src/GridLayoutProvider.d.ts +37 -0
  107. package/types/src/GridLayoutStackedtem.d.ts +10 -0
  108. package/types/src/GridModel.d.ts +350 -0
  109. package/types/src/GridPlaceholder.d.ts +5 -0
  110. package/types/src/GridSplitter.d.ts +9 -0
  111. package/types/src/Icon.d.ts +6 -0
  112. package/types/src/IconButton.d.ts +6 -0
  113. package/types/src/TabMenu.d.ts +6 -0
  114. package/types/src/componentToJson.d.ts +32 -0
  115. package/types/src/drag-drop-next/DragContextNext.d.ts +73 -0
  116. package/types/src/drag-drop-next/DragDropProviderNext.d.ts +20 -0
  117. package/types/src/drag-drop-next/SpaceMan.d.ts +35 -0
  118. package/types/src/drag-drop-next/tabstrip-drag-drop.d.ts +3 -0
  119. package/types/src/grid-dom-utils.d.ts +17 -0
  120. package/types/src/grid-layout-utils.d.ts +80 -0
  121. package/types/src/grid-matrix.d.ts +5 -0
  122. package/types/src/index.d.ts +10 -0
  123. package/types/src/layoutFromJson.d.ts +3 -0
  124. package/types/src/layoutToJson.d.ts +2 -0
  125. package/types/src/propUtils.d.ts +5 -0
  126. package/types/src/react-element-utils.d.ts +3 -0
  127. package/types/src/typeOf.d.ts +6 -0
  128. package/types/src/useAsDropTarget.d.ts +7 -0
  129. package/types/src/useDraggable.d.ts +23 -0
  130. package/types/src/useGridChildProps.d.ts +13 -0
  131. package/types/src/useGridLayout.d.ts +43 -0
  132. package/types/src/useGridSplitterResizing.d.ts +12 -0
  133. package/types/src/useNotDropTarget.d.ts +1 -0
  134. package/types/typeOf.d.ts +6 -0
  135. package/types/useAsDropTarget.d.ts +7 -0
  136. package/types/useDraggable.d.ts +24 -0
  137. package/types/useEditTabName.d.ts +11 -0
  138. package/types/useGridChildProps.d.ts +13 -0
  139. package/types/useGridControllerSnapshot.d.ts +7 -0
  140. package/types/useGridLayout.d.ts +53 -0
  141. package/types/useGridSplitterResizing.d.ts +14 -0
  142. package/types/useNotDropTarget.d.ts +1 -0
@@ -0,0 +1,49 @@
1
+ export type GridId = string;
2
+ export type GridItemId = string;
3
+ export type StackId = string;
4
+ export type ComponentInstanceId = string;
5
+ export type GridTrackSize = `${number}fr` | `${number}px`;
6
+ export type GridItemResizeable = "h" | "v" | "hv" | false;
7
+ export interface GridTrackSnapshot {
8
+ readonly size: GridTrackSize;
9
+ }
10
+ export interface GridSpanSnapshot {
11
+ readonly span: number;
12
+ readonly start: number;
13
+ }
14
+ export interface GridItemSnapshot {
15
+ readonly column: GridSpanSnapshot;
16
+ readonly componentInstanceId?: ComponentInstanceId;
17
+ readonly contentVisible?: boolean;
18
+ readonly dropTarget?: boolean | string;
19
+ readonly header?: boolean;
20
+ readonly id: GridItemId;
21
+ readonly minHeight?: number;
22
+ readonly minWidth?: number;
23
+ readonly resizeable?: GridItemResizeable;
24
+ readonly row: GridSpanSnapshot;
25
+ readonly title?: string;
26
+ }
27
+ export interface GridStackSnapshot {
28
+ readonly id: StackId;
29
+ readonly itemIds: readonly GridItemId[];
30
+ readonly selectedItemId: GridItemId;
31
+ }
32
+ export interface GridSnapshot {
33
+ readonly columns: readonly GridTrackSnapshot[];
34
+ readonly gridId: GridId;
35
+ readonly items: readonly GridItemSnapshot[];
36
+ readonly revision: number;
37
+ readonly rows: readonly GridTrackSnapshot[];
38
+ readonly stacks: readonly GridStackSnapshot[];
39
+ }
40
+ export type GridSnapshotValidationCode = "DUPLICATE_ID" | "EMPTY_ID" | "INVALID_FIELD" | "INVALID_REVISION" | "INVALID_SPAN" | "INVALID_STACK_MEMBERSHIP" | "INVALID_STACK_POSITION" | "INVALID_STACK_SELECTION" | "INVALID_STRUCTURE" | "INVALID_TRACK_REFERENCE" | "MALFORMED_GRID_AREA" | "MALFORMED_TRACK" | "UNEXPECTED_FIELD";
41
+ export interface GridSnapshotValidationIssue {
42
+ readonly code: GridSnapshotValidationCode;
43
+ readonly message: string;
44
+ readonly path: string;
45
+ }
46
+ export declare class GridSnapshotValidationError extends Error {
47
+ readonly issues: readonly GridSnapshotValidationIssue[];
48
+ constructor(issues: readonly GridSnapshotValidationIssue[]);
49
+ }
@@ -0,0 +1,10 @@
1
+ import { HTMLAttributes } from "react";
2
+ import { AriaOrientation } from "./GridModel";
3
+ import { ResizeOrientation } from "./grid-dom-utils";
4
+ export interface GridSplitterProps extends HTMLAttributes<HTMLDivElement> {
5
+ "aria-controls": string;
6
+ ariaOrientation: AriaOrientation;
7
+ offsetStart?: boolean;
8
+ orientation: ResizeOrientation;
9
+ }
10
+ export declare const GridSplitter: ({ "aria-controls": ariaControls, ariaOrientation, offsetStart, orientation, ...htmlAttributes }: GridSplitterProps) => import("react").JSX.Element;
@@ -0,0 +1,160 @@
1
+ import { type GridItemId, type GridItemResizeable, type GridSnapshotValidationIssue, type GridSpanSnapshot, type GridStackSnapshot, type StackId } from "./GridSnapshot";
2
+ /**
3
+ * Canonical stack state and the pure transitions that own stack semantics:
4
+ * membership, order, stable identity, selection, placement and lifecycle.
5
+ *
6
+ * Nothing in this module knows about React, the DOM, event emitters or the
7
+ * legacy runtime models. `GridModel`, `TabState` and `TabStrip` are hydrated
8
+ * from the transitions declared here; they never compute stack semantics.
9
+ */
10
+ /** A stack with fewer members than this dissolves into a plain grid item. */
11
+ export declare const MIN_GRID_STACK_MEMBERS = 2;
12
+ /**
13
+ * The grid area occupied by a stack. Every member of a stack occupies exactly
14
+ * this area, which is what makes the stack a single placement on the grid.
15
+ */
16
+ export interface GridStackArea {
17
+ readonly column: GridSpanSnapshot;
18
+ readonly row: GridSpanSnapshot;
19
+ }
20
+ /**
21
+ * A stack member. Identity is the (stable) `id`; `label` and `title` are
22
+ * durable metadata, never used to identify, order or select a member.
23
+ */
24
+ export interface GridStackMember {
25
+ readonly id: GridItemId;
26
+ readonly label: string;
27
+ readonly title?: string;
28
+ }
29
+ /** Durable stack metadata required by descriptors and layout commands. */
30
+ export interface GridStackMetadata {
31
+ readonly minHeight?: number;
32
+ readonly minWidth?: number;
33
+ readonly resizeable?: GridItemResizeable;
34
+ }
35
+ export interface GridStackState {
36
+ readonly area: GridStackArea;
37
+ readonly id: StackId;
38
+ /** ordered membership; order is explicit and independent of title/label */
39
+ readonly members: readonly GridStackMember[];
40
+ readonly metadata: GridStackMetadata;
41
+ readonly selectedItemId: GridItemId;
42
+ }
43
+ export type GridStackOperation = "add" | "create" | "remove" | "rename" | "reorder" | "select";
44
+ export interface GridStackTransition {
45
+ readonly added: readonly GridStackMember[];
46
+ /** false for a no-op, so callers can avoid publishing a durable revision */
47
+ readonly changed: boolean;
48
+ /**
49
+ * true when the stack ceases to exist. `state` then describes the residual
50
+ * membership, which the projection unstacks.
51
+ */
52
+ readonly dissolved: boolean;
53
+ readonly operation: GridStackOperation;
54
+ readonly orderChanged: boolean;
55
+ /** true when an added member was placed relative to an existing member */
56
+ readonly positioned: boolean;
57
+ readonly previous: GridStackState | undefined;
58
+ readonly removed: readonly GridStackMember[];
59
+ readonly selectionChanged: boolean;
60
+ readonly stackId: StackId;
61
+ readonly state: GridStackState;
62
+ }
63
+ export type GridStackErrorCode = "DUPLICATE_ITEM_ID" | "INVALID_ITEM" | "INVALID_TARGET" | "STACK_NOT_FOUND" | "TAB_NOT_FOUND";
64
+ export interface GridStackError {
65
+ readonly code: GridStackErrorCode;
66
+ readonly message: string;
67
+ }
68
+ export type GridStackResult<T> = {
69
+ readonly ok: true;
70
+ readonly value: T;
71
+ } | {
72
+ readonly error: GridStackError;
73
+ readonly ok: false;
74
+ };
75
+ /** A detached copy, so canonical state never aliases legacy runtime state. */
76
+ export declare const cloneGridStackState: (state: GridStackState) => GridStackState;
77
+ export declare const gridStackItemIds: (state: GridStackState) => readonly GridItemId[];
78
+ export declare const findGridStackMember: (state: GridStackState, itemId: GridItemId) => GridStackMember | undefined;
79
+ export declare const gridStackMemberIndex: (state: GridStackState, itemId: GridItemId) => number;
80
+ export declare const gridStackSelectedIndex: (state: GridStackState) => number;
81
+ /** Project canonical state onto the persisted snapshot contract. */
82
+ export declare const toGridStackSnapshot: (state: GridStackState) => GridStackSnapshot;
83
+ export declare const isSameGridStackState: (left: GridStackState, right: GridStackState) => boolean;
84
+ /**
85
+ * Deterministically repair a state hydrated from the legacy runtime: drop
86
+ * empty or duplicated ids and fall back to the first member when the selected
87
+ * item is not (or no longer) a member.
88
+ */
89
+ export declare const normalizeGridStackState: (state: GridStackState) => GridStackState;
90
+ export interface GridStackValidationOptions {
91
+ /**
92
+ * The grid area of each known grid item. When provided, membership and
93
+ * placement are validated against the wider layout.
94
+ */
95
+ readonly itemAreas?: ReadonlyMap<GridItemId, GridStackArea>;
96
+ readonly path?: string;
97
+ }
98
+ export declare const validateGridStackState: (state: GridStackState, { itemAreas, path }?: GridStackValidationOptions) => readonly GridSnapshotValidationIssue[];
99
+ export declare const assertValidGridStackState: (state: GridStackState, options?: GridStackValidationOptions) => GridStackState;
100
+ export interface GridStackCreateRequest {
101
+ readonly area: GridStackArea;
102
+ readonly id: StackId;
103
+ readonly members: readonly GridStackMember[];
104
+ readonly metadata?: GridStackMetadata;
105
+ readonly selectedItemId?: GridItemId;
106
+ }
107
+ /**
108
+ * Create a stack from two or more existing grid items. The stack id is stable
109
+ * from this point on: it never changes when members are added, removed,
110
+ * renamed or reordered.
111
+ */
112
+ export declare const createGridStack: (request: GridStackCreateRequest) => GridStackResult<GridStackTransition>;
113
+ export interface GridStackPosition {
114
+ readonly placement: "after" | "before";
115
+ readonly targetItemId: GridItemId;
116
+ }
117
+ export interface GridStackAddRequest {
118
+ readonly member: GridStackMember;
119
+ readonly position?: GridStackPosition;
120
+ /**
121
+ * Select the added member. Defaults to true for a positioned add, matching
122
+ * the legacy tabstrip drop, and to false for an appended add.
123
+ */
124
+ readonly select?: boolean;
125
+ }
126
+ /** Add a member, optionally positioned relative to an existing member. */
127
+ export declare const addGridStackItem: (state: GridStackState, { member, position, select }: GridStackAddRequest) => GridStackResult<GridStackTransition>;
128
+ export interface GridStackRemoveRequest {
129
+ readonly itemId: GridItemId;
130
+ }
131
+ /**
132
+ * Remove a member. When the removed member was selected, selection falls back
133
+ * deterministically to the member that takes its position, or to the new last
134
+ * member when it was the last. A stack that drops below the minimum membership
135
+ * dissolves.
136
+ */
137
+ export declare const removeGridStackItem: (state: GridStackState, { itemId }: GridStackRemoveRequest) => GridStackResult<GridStackTransition>;
138
+ export interface GridStackSelectRequest {
139
+ readonly itemId: GridItemId;
140
+ }
141
+ /** Select a member by its stable id, never by title or label. */
142
+ export declare const selectGridStackItem: (state: GridStackState, { itemId }: GridStackSelectRequest) => GridStackResult<GridStackTransition>;
143
+ export interface GridStackReorderRequest {
144
+ /** select the moved member as part of the reorder */
145
+ readonly activate?: boolean;
146
+ readonly itemId: GridItemId;
147
+ readonly placement: "after" | "before";
148
+ readonly targetItemId: GridItemId;
149
+ }
150
+ /**
151
+ * Move a member relative to another member. Selection is carried by id, so a
152
+ * reorder never changes which item is selected unless `activate` asks for it.
153
+ */
154
+ export declare const reorderGridStackItem: (state: GridStackState, { activate, itemId, placement, targetItemId, }: GridStackReorderRequest) => GridStackResult<GridStackTransition>;
155
+ export interface GridStackRenameRequest {
156
+ readonly itemId: GridItemId;
157
+ readonly title: string;
158
+ }
159
+ /** Rename a member. Identity, order and selection are unaffected. */
160
+ export declare const renameGridStackItem: (state: GridStackState, { itemId, title }: GridStackRenameRequest) => GridStackResult<GridStackTransition>;
@@ -0,0 +1,6 @@
1
+ import { HTMLAttributes } from "react";
2
+ export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
3
+ name: string;
4
+ size?: number;
5
+ }
6
+ export declare const Icon: ({ className, name, size, style: styleProp, ...htmlAttributes }: IconProps) => import("react").JSX.Element;
@@ -0,0 +1,6 @@
1
+ import { ButtonProps } from "@salt-ds/core";
2
+ export interface IconButtonProps extends Omit<ButtonProps, "children"> {
3
+ icon: string;
4
+ size?: number;
5
+ }
6
+ export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
@@ -0,0 +1,9 @@
1
+ import { CSSProperties } from "react";
2
+ export declare const TabDialog: ({ open, onConfirm, onCancel, style, tabLabel, title, }: {
3
+ open?: boolean;
4
+ onConfirm: (value: string) => void;
5
+ onCancel: () => void;
6
+ style?: CSSProperties;
7
+ tabLabel?: string;
8
+ title?: string;
9
+ }) => import("react").JSX.Element;
@@ -0,0 +1,7 @@
1
+ export interface TabMenuProps {
2
+ allowClose?: boolean;
3
+ allowRename?: boolean;
4
+ layoutItemId: string;
5
+ tabLabel: string;
6
+ }
7
+ export declare const TabMenu: ({ allowClose, allowRename, layoutItemId, tabLabel, }: TabMenuProps) => import("react").JSX.Element;
@@ -0,0 +1,38 @@
1
+ import { type CSSProperties, type ReactElement } from "react";
2
+ export type LayoutJSONChild = LayoutJSON | number | string;
3
+ export interface LayoutJSON<T extends object = object> {
4
+ active?: number;
5
+ children?: LayoutJSONChild[];
6
+ id?: string;
7
+ props?: T;
8
+ state?: unknown;
9
+ style?: CSSProperties;
10
+ title?: string;
11
+ type: string;
12
+ }
13
+ export interface LayoutProps {
14
+ active?: number;
15
+ "data-path"?: string;
16
+ children?: ReactElement[];
17
+ /**
18
+ * indicates flexDirection for Flexbox
19
+ */
20
+ column?: boolean;
21
+ dropTarget?: boolean;
22
+ i8d: string;
23
+ key: string;
24
+ path?: string;
25
+ resizeable?: boolean;
26
+ style: CSSProperties;
27
+ type?: string;
28
+ version?: number;
29
+ }
30
+ /**
31
+ * @deprecated GridLayout persistence must use typed component settings and
32
+ * encodeGridLayoutDocument. This function is retained for legacy UI templates.
33
+ */
34
+ export declare function componentToJson(element: ReactElement): LayoutJSON;
35
+ /** @deprecated Generic React-prop persistence is a legacy compatibility path. */
36
+ export declare function serializeProps(props?: LayoutProps): {
37
+ [key: string]: unknown;
38
+ } | undefined;
@@ -0,0 +1,92 @@
1
+ import { EventEmitter, type orientationType } from "@vuu-ui/vuu-utils";
2
+ import { type DragSource } from "../GridLayoutContext";
3
+ import type { TemplateDragSession } from "./TemplateDragSession";
4
+ type DragSourceDescriptor = {
5
+ dropTargets: string[];
6
+ orientation?: orientationType;
7
+ payloadType?: string;
8
+ };
9
+ export type DropPosition = {
10
+ position: "before" | "after";
11
+ target: string;
12
+ };
13
+ export type DragSources = {
14
+ [key: string]: DragSourceDescriptor;
15
+ };
16
+ export type DropProps<T extends DragSource = DragSource> = {
17
+ dragSource: T;
18
+ toId?: string;
19
+ tabsId?: string;
20
+ dropPosition?: DropPosition;
21
+ };
22
+ export type DropHandler<T extends DragSource = DragSource> = (dropProps: DropProps<T>) => void;
23
+ export type DragContextDropEvent = {
24
+ type: "drop";
25
+ dragSource: DragSource;
26
+ tabsId: string;
27
+ dropPosition: DropPosition;
28
+ };
29
+ export type DragContextDetachTabEvent = {
30
+ gridId: string;
31
+ itemId: string;
32
+ type: "detach-tab";
33
+ tabsId: string;
34
+ value: string;
35
+ };
36
+ export type DragContextCancelTabDragEvent = Omit<DragContextDetachTabEvent, "type"> & {
37
+ type: "cancel-tab-drag";
38
+ };
39
+ export type DragContextCancelTabDragHandler = (evt: DragContextCancelTabDragEvent) => void;
40
+ export type DragContextDropHandler = (evt: DragContextDropEvent) => void;
41
+ export type DragContextDetachTabHandler = (evt: DragContextDetachTabEvent) => void;
42
+ export type DragContextEvents = {
43
+ "cancel-tab-drag": DragContextCancelTabDragHandler;
44
+ drop: DragContextDropHandler;
45
+ "detach-tab": DragContextDetachTabHandler;
46
+ };
47
+ export declare class DragContext extends EventEmitter<DragContextEvents> {
48
+ #private;
49
+ private readonly templateDragSession?;
50
+ constructor(templateDragSession?: TemplateDragSession | undefined);
51
+ beginDrag(e: DragEvent, dragSource: DragSource): void;
52
+ endDrag(): void;
53
+ beginDrop(): void;
54
+ cancelDrag(): void;
55
+ completeDrop(): void;
56
+ /**
57
+ * A 'detached' tab is one that has been dragged from its place in tabstrip
58
+ * but not yet dropped. If it is the selected tab, we want to avoid unmounting
59
+ * the react component in the associated TabPanel. By marking it as 'detached'
60
+ * the TabPanel is still rendered but not visible. When the tab is dropped, the
61
+ * TabPanel can be assigned its new location (might still be within tabstrip, might
62
+ * not be) and made visible, without ever having to unmount/remount.
63
+ */
64
+ detachTab(gridId: string, tabsId: string, itemId: string, value: string): void;
65
+ drop: ({ tabsId, dropPosition, }: Pick<DragContextDropEvent, "tabsId" | "dropPosition">) => void;
66
+ registerTabsForDragDrop: (id: string) => () => void;
67
+ registerDragStateCleanup: (cleanup: () => void) => () => boolean;
68
+ cleanupDragState(): void;
69
+ get draggedElement(): HTMLElement;
70
+ get dragElementWidth(): number;
71
+ get dragLabelWidth(): number;
72
+ get dragSource(): import("../GridLayoutContext").ComponentDragSource | import("../GridLayoutContext").TabbedComponentDragSource | (import("..").LegacyComponentTemplate & {
73
+ element: HTMLElement;
74
+ layoutId: string;
75
+ type: "template";
76
+ }) | (import("..").TypedComponentTemplate & {
77
+ element: HTMLElement;
78
+ layoutId: string;
79
+ type: "template";
80
+ }) | undefined;
81
+ get internalDragSources(): Map<string, DragSourceDescriptor>;
82
+ set dragSources(dragSources: DragSources);
83
+ get dropped(): boolean;
84
+ get dropPending(): boolean;
85
+ get x(): number;
86
+ set x(value: number);
87
+ get y(): number;
88
+ set y(value: number);
89
+ get ownsDrag(): boolean;
90
+ private buildDragSources;
91
+ }
92
+ export {};
@@ -0,0 +1,23 @@
1
+ import { type ReactNode } from "react";
2
+ import { DragContext, type DragContextCancelTabDragHandler, type DragContextDetachTabHandler, type DragContextDropHandler, type DragSources } from "./DragContextNext";
3
+ export type DragDropRegistrationFn = (id: string) => void;
4
+ export type DragDropBeginDrag = (id: string, draggedElement: HTMLElement) => void;
5
+ export type DragDropEndDrag = (id: string) => void;
6
+ export type DragSourceRegistrationHandler = (id: string) => void;
7
+ export interface DragDropNextProviderProps {
8
+ children: ReactNode;
9
+ dragSources: DragSources;
10
+ onCancelDrag?: () => void;
11
+ onCancelTabDrag: DragContextCancelTabDragHandler;
12
+ onDetachTab: DragContextDetachTabHandler;
13
+ onDrop: DragContextDropHandler;
14
+ }
15
+ export type MeasuredTarget = {
16
+ bottom: number;
17
+ left: number;
18
+ right: number;
19
+ top: number;
20
+ };
21
+ export declare const DragDropProviderNext: ({ children, onCancelDrag, onCancelTabDrag, onDetachTab, onDrop, }: DragDropNextProviderProps) => import("react").JSX.Element;
22
+ export declare const useDragContext: () => DragContext;
23
+ export declare const useOptionalDragContext: () => DragContext | undefined;
@@ -0,0 +1,35 @@
1
+ import type { RefCallback } from "react";
2
+ import { type orientationType } from "@vuu-ui/vuu-utils";
3
+ import type { DragContext, DropPosition } from "./DragContextNext";
4
+ export type State = "initial" | "away" | "1spacer" | "2spacer";
5
+ type Direction = "fwd" | "bwd";
6
+ export declare class SpaceMan {
7
+ #private;
8
+ id: string;
9
+ constructor(dragContext: DragContext, id: string, orientation?: orientationType);
10
+ get mouseOffset(): {
11
+ x: number;
12
+ y: number;
13
+ };
14
+ set mouseOffset(offset: {
15
+ x: number;
16
+ y: number;
17
+ });
18
+ get dropPosition(): DropPosition | undefined;
19
+ get positionRelativeToTargetTab(): "before" | "after";
20
+ setDragContainer: RefCallback<HTMLElement>;
21
+ enterDragContainer(): void;
22
+ leaveDragContainer(): void;
23
+ dragStart(index: number | string): void;
24
+ dragEnter(index: number, direction: Direction): void;
25
+ insertSpacer(index: number | string, size: number, direction?: Direction): void;
26
+ private clearSpacers;
27
+ private clearDragStartTimer;
28
+ cleanup(): void;
29
+ drop(x: number, y: number): Promise<void>;
30
+ private getPositionOfDragContainer;
31
+ private getPositionOfDropTarget;
32
+ private setSpacerSizes;
33
+ private createDragSpacer;
34
+ }
35
+ export {};
@@ -0,0 +1,21 @@
1
+ import type { TemplateSource } from "../GridLayoutContext";
2
+ export type TemplateDragMetrics = {
3
+ elementHeight: number;
4
+ elementWidth: number;
5
+ labelWidth: number;
6
+ x: number;
7
+ y: number;
8
+ };
9
+ export declare class TemplateDragSession {
10
+ #private;
11
+ begin(source: TemplateSource, metrics: TemplateDragMetrics): void;
12
+ completeDrop(): void;
13
+ end(): void;
14
+ get dropped(): boolean;
15
+ get metrics(): TemplateDragMetrics | undefined;
16
+ get source(): TemplateSource | undefined;
17
+ set x(value: number);
18
+ set y(value: number);
19
+ }
20
+ export declare const TemplateDragSessionContext: import("react").Context<TemplateDragSession | undefined>;
21
+ export declare const useTemplateDragSession: () => TemplateDragSession | undefined;
@@ -0,0 +1,3 @@
1
+ import { type orientationType } from "@vuu-ui/vuu-utils";
2
+ import type { DragContext } from "./DragContextNext";
3
+ export declare function initializeDragContainer(containerEl: HTMLElement, dragContext: DragContext, orientation?: orientationType, tabsId?: string): () => void;
@@ -0,0 +1,17 @@
1
+ import { GridLayoutModelPosition, GridLayoutResizeDirection } from "./GridLayoutModel";
2
+ import { GridModelChildItem } from "./GridModel";
3
+ export declare const classNameLayoutItem = "vuuGridLayoutItem";
4
+ export declare const classNameGridSplitter = "vuuGridSplitter";
5
+ export type ResizeOrientation = "horizontal" | "vertical";
6
+ type GridPos = [number, number];
7
+ export declare const getGridSplitter: (el: HTMLElement) => HTMLElement;
8
+ export declare const getGridLayoutItem: (el: HTMLElement) => HTMLElement;
9
+ export declare const getColumn: (el: HTMLElement) => GridPos;
10
+ export declare const getRow: (el: HTMLElement | undefined) => GridPos;
11
+ export declare const getRowIndex: (el: HTMLElement) => number;
12
+ export declare const setGridColumn: (target: string | HTMLElement, { start, end }: GridLayoutModelPosition) => void;
13
+ export declare const setGridRow: (target: string | HTMLElement, { start, end }: GridLayoutModelPosition) => void;
14
+ export declare const spansMultipleTracks: (gridItem: GridModelChildItem, direction: GridLayoutResizeDirection) => boolean;
15
+ export declare function getClosestGridLayout(source: string): string;
16
+ export declare function getClosestGridLayout(source: HTMLElement): string;
17
+ export {};
@@ -0,0 +1,18 @@
1
+ import type { GridLayoutChildItemDescriptor, GridLayoutModelCoordinates, GridModelChildItem, GridModelCoordinates, ISplitter, TrackType } from "./GridModel";
2
+ /**
3
+ * Geometry and track algorithms live in GridGeometry, which is pure and
4
+ * immutable. The helpers here bridge the runtime (React/DOM) layer to the
5
+ * mutable model instances.
6
+ */
7
+ /**
8
+ *
9
+ * @param moveBy positive or negative number
10
+ * @param adjustmentAmount positive number, never greater than abs(moveBy)
11
+ * @returns
12
+ */
13
+ export declare const adjustDistance: (moveBy: number, adjustmentAmount: number) => number;
14
+ export declare const getGridArea: ({ column, row }: GridLayoutModelCoordinates) => string;
15
+ export declare const getActiveIndex: (childItems: GridModelChildItem[]) => number;
16
+ export declare const getSharedGridPosition: (childItems: GridModelChildItem[]) => GridLayoutModelCoordinates;
17
+ export declare const getGridPosition: (gridArea: GridLayoutChildItemDescriptor["gridArea"]) => GridModelCoordinates;
18
+ export declare const getTrackType: (splitter: ISplitter) => TrackType;
@@ -0,0 +1,5 @@
1
+ import { GridModelChildItem } from "./GridModel";
2
+ export type GridMatrix = number[][];
3
+ export declare const getGridMatrix: (gridItems: GridModelChildItem[], rowCount: number, colCount: number) => GridMatrix;
4
+ export declare const printGrid: (grid: number[][]) => void;
5
+ export declare function getEmptyExtents(grid: GridMatrix): GridModelChildItem[];
@@ -0,0 +1,22 @@
1
+ import type { GridLayoutChildItemDescriptor, GridLayoutDescriptor } from "./GridModel";
2
+ import { type ComponentInstanceId, type GridSnapshot, type GridSnapshotValidationIssue } from "./GridSnapshot";
3
+ import { type GridStackState } from "./GridStack";
4
+ export interface GridLayoutDescriptorSnapshotOptions {
5
+ readonly gridId: string;
6
+ readonly revision?: number;
7
+ }
8
+ export interface GridLayoutDescriptorV1 extends Omit<GridLayoutDescriptor, "gridLayoutItems"> {
9
+ readonly gridLayoutItems?: Record<string, GridLayoutChildItemDescriptor & {
10
+ readonly componentId?: ComponentInstanceId;
11
+ }>;
12
+ }
13
+ export declare const validateGridSnapshot: (value: unknown) => readonly GridSnapshotValidationIssue[];
14
+ export declare const normalizeGridSnapshot: (snapshot: GridSnapshot) => GridSnapshot;
15
+ export declare const gridLayoutDescriptorToSnapshot: (descriptor: GridLayoutDescriptorV1, { gridId, revision }: GridLayoutDescriptorSnapshotOptions) => GridSnapshot;
16
+ export declare const gridSnapshotToGridLayoutDescriptor: (snapshot: GridSnapshot) => GridLayoutDescriptorV1;
17
+ /**
18
+ * Read canonical stack state from a snapshot. Membership, order and selection
19
+ * come from the snapshot stacks; placement and durable metadata come from the
20
+ * stack members, which all occupy the same grid area.
21
+ */
22
+ export declare const gridSnapshotToGridStackStates: (snapshot: GridSnapshot) => readonly GridStackState[];
@@ -0,0 +1,24 @@
1
+ export type { DragSources, DropHandler, } from "./drag-drop-next/DragContextNext";
2
+ export { DragDropProviderNext, useOptionalDragContext, } from "./drag-drop-next/DragDropProviderNext";
3
+ export { GridLayout, type GridResizeDistribution } from "./GridLayout";
4
+ export { GridDragCoordinator, createGridDropPlan, type GridDragCoordinatorError, type GridDragCoordinatorErrorCode, type GridDragCoordinatorResult, type GridDragCoordinatorState, type GridDragSource, type GridDropIntent, type GridDropPlan, type GridDropTarget, } from "./GridDragCoordinator";
5
+ export { GridController, type GridCommittedTransition, type GridCommittedTransitionListener, type GridControllerError, type GridControllerErrorCode, type GridControllerListener, type GridTransactionCloseResult, type GridTransactionKind, type GridTransactionStartResult, type GridTransaction, } from "./GridController";
6
+ export { GridCommandExecutionError, throwForGridCommandFailure, type GridCommand, type GridCommandError, type GridCommandErrorCode, type GridCommandItem, type GridCommandResizeConstraint, type GridCommandResult, type GridTrackResize, } from "./GridCommand";
7
+ export { useGridLayoutDispatch, useGridLayoutDragStartHandler, useGridController, useGridModel, useGridSnapshot, type ComponentTemplate, type ComponentTemplateWithoutLabel, type LegacyComponentTemplate, type DragSource, type TemplateSource, type TypedComponentTemplate, } from "./GridLayoutContext";
8
+ export { useGridControllerSnapshot } from "./useGridControllerSnapshot";
9
+ export { GridLayoutItem } from "./GridLayoutItem";
10
+ export { GridLayoutProvider, GridLayoutDocumentController, type GridLayoutDocumentChange, type GridLayoutDocumentChangeHandler, type GridLayoutDocumentStoreListener, type GridLayoutProviderProps, } from "./GridLayoutProvider";
11
+ export { createSequentialGridLayoutIdAllocator, remapGridLayoutDocumentIds, type GridLayoutIdAllocator, type GridLayoutIdKind, type GridLayoutIdRemapping, type RemappedGridLayoutDocument, } from "./GridLayoutDocumentIds";
12
+ export * as GridLayoutLegacyCompatibility from "./GridLayoutLegacyCompatibility";
13
+ export { createLegacyGridLayoutReader, decodeLegacySerializedGridLayout, type LegacyDeserializedGridLayout, type LegacyGridLayoutDecodeResult, type LegacyGridLayoutDocument, type LegacyGridLayoutReader, type LegacySerializedComponentMap, type SerializedGridLayout, } from "./GridLayoutLegacyCompatibility";
14
+ export { GridComponentRendererRegistry, GridComponentSettingsRegistry, GridLayoutContentRegistry, type DecodedGridComponentSettings, type EncodedGridComponentSettings, type GridComponentRenderer, type GridComponentSettingsCodec, type GridComponentSettingsError, type GridComponentSettingsErrorCode, type GridComponentSettingsInput, type GridComponentSettingsResult, type GridSettingsCodecIssue, type GridSettingsCodecResult, } from "./GridComponentSettings";
15
+ export { GRID_LAYOUT_DOCUMENT_KIND, GRID_LAYOUT_DOCUMENT_VERSION, GridLayoutDocumentCodecError, decodeGridLayoutDocument, encodeGridLayoutDocument, immutableGridLayoutDocument, type DecodedGridLayoutDocument, type EncodeGridLayoutDocumentOptions, type GridLayoutDocument, type GridLayoutDocumentError, type GridLayoutDocumentErrorCode, type GridLayoutDocumentResult, type GridLayoutDocumentV1, type PersistedGridLayout, } from "./GridLayoutDocument";
16
+ export { toJsonValue, type JsonPrimitive, type JsonValue, type JsonValueErrorCode, type JsonValueIssue, type JsonValueResult, } from "./json-value";
17
+ export { GridLayoutStackedItem } from "./GridLayoutStackedtem";
18
+ export { gridLayoutDescriptorToSnapshot, gridSnapshotToGridLayoutDescriptor, gridSnapshotToGridStackStates, normalizeGridSnapshot, validateGridSnapshot, type GridLayoutDescriptorSnapshotOptions, type GridLayoutDescriptorV1, } from "./grid-snapshot-adapters";
19
+ export { GridSnapshotValidationError, type ComponentInstanceId, type GridId, type GridItemId, type GridItemResizeable, type GridItemSnapshot, type GridSnapshot, type GridSnapshotValidationCode, type GridSnapshotValidationIssue, type GridSpanSnapshot, type GridStackSnapshot, type GridTrackSize, type GridTrackSnapshot, type StackId, } from "./GridSnapshot";
20
+ export { MIN_GRID_STACK_MEMBERS, addGridStackItem, assertValidGridStackState, cloneGridStackState, createGridStack, findGridStackMember, gridStackItemIds, gridStackMemberIndex, gridStackSelectedIndex, isSameGridStackState, normalizeGridStackState, removeGridStackItem, renameGridStackItem, reorderGridStackItem, selectGridStackItem, toGridStackSnapshot, validateGridStackState, type GridStackAddRequest, type GridStackArea, type GridStackCreateRequest, type GridStackError, type GridStackErrorCode, type GridStackMember, type GridStackMetadata, type GridStackOperation, type GridStackPosition, type GridStackRemoveRequest, type GridStackRenameRequest, type GridStackReorderRequest, type GridStackResult, type GridStackSelectRequest, type GridStackState, type GridStackTransition, type GridStackValidationOptions, } from "./GridStack";
21
+ export type { GridLayoutChangeHandler, GridLayoutDescriptor, TrackSize, } from "./GridModel";
22
+ export { layoutFromJson } from "./layoutFromJson";
23
+ export { useDraggable } from "./useDraggable";
24
+ export { GridPlaceholder } from "./GridPlaceholder";
@@ -0,0 +1,23 @@
1
+ export type JsonPrimitive = boolean | number | string | null;
2
+ export type JsonValue = JsonPrimitive | readonly JsonValue[] | {
3
+ readonly [key: string]: JsonValue;
4
+ };
5
+ export type JsonValueErrorCode = "CYCLE" | "INVALID_NUMBER" | "NON_PLAIN_OBJECT" | "UNSUPPORTED_VALUE";
6
+ export interface JsonValueIssue {
7
+ readonly code: JsonValueErrorCode;
8
+ readonly message: string;
9
+ readonly path: string;
10
+ }
11
+ export type JsonValueResult = {
12
+ readonly ok: true;
13
+ readonly value: JsonValue;
14
+ } | {
15
+ readonly error: JsonValueIssue;
16
+ readonly ok: false;
17
+ };
18
+ /**
19
+ * Validate and detach data at the persistence boundary. JSON.stringify is not
20
+ * used because it silently drops unsupported values and coerces non-finite
21
+ * numbers.
22
+ */
23
+ export declare const toJsonValue: (value: unknown, path?: string) => JsonValueResult;
@@ -0,0 +1,4 @@
1
+ import { type ReactElement } from "react";
2
+ import type { LayoutJSON } from "./componentToJson";
3
+ /** @deprecated Use GridLayoutProvider document plus renderer registries. */
4
+ export declare function layoutFromJson({ active, id, type, children, props, }: LayoutJSON): ReactElement;
@@ -0,0 +1,3 @@
1
+ import type { ReactElement } from "react";
2
+ /** @deprecated Use encodeGridLayoutDocument for GridLayout persistence. */
3
+ export declare function layoutToJSON(component: ReactElement): import("./componentToJson").LayoutJSON<object>;
@@ -0,0 +1,5 @@
1
+ import { ReactElement } from "react";
2
+ import { LayoutModel } from "@vuu-ui/vuu-utils";
3
+ export declare const getProp: (component: LayoutModel | undefined, propName: string) => any;
4
+ export declare const getProps: (component?: LayoutModel) => {};
5
+ export declare const getChildProp: (container: LayoutModel) => ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
@@ -0,0 +1,3 @@
1
+ import React, { ReactElement } from "react";
2
+ export declare const getGridItemChild: (gridItems: ReactElement[], gridItemId: string) => ReactElement;
3
+ export declare const addChildToStackedGridItem: (stackElement: ReactElement, childElement: ReactElement) => ReactElement<unknown, string | React.JSXElementConstructor<any>>;
@@ -0,0 +1,5 @@
1
+ export declare const AddTabDialog: ({ open, onConfirm, onCancel, }: {
2
+ open?: boolean;
3
+ onConfirm: (value: string) => void;
4
+ onCancel: () => void;
5
+ }) => import("react").JSX.Element;
@@ -0,0 +1,14 @@
1
+ import { HTMLAttributes, ReactElement } from "react";
2
+ import { GridLayoutItemProps } from "./GridLayoutItem";
3
+ import { GridColumnsAndRows, GridLayoutChangeHandler } from "./GridModel";
4
+ export type GridResizeable = "h" | "v" | "hv";
5
+ export interface GridLayoutProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
6
+ children?: ReactElement<GridLayoutItemProps> | ReactElement<GridLayoutItemProps>[];
7
+ "full-page"?: boolean;
8
+ colsAndRows?: GridColumnsAndRows;
9
+ onChange?: GridLayoutChangeHandler;
10
+ }
11
+ export declare function GridLayout({ id: idProp, children: childrenProp, className, "full-page": fullPage, colsAndRows, onClick, onChange, style: styleProp, ...htmlAttributes }: GridLayoutProps): import("react").JSX.Element;
12
+ export declare namespace GridLayout {
13
+ var displayName: string;
14
+ }