payload-nested-docs-page-tree 1.4.0 → 1.4.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 (27) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +276 -231
  3. package/dist/components/PageTreeContext.js.map +1 -1
  4. package/dist/components/PageTreeListView.client.js.map +1 -1
  5. package/dist/components/PageTreeListView.module.css +358 -358
  6. package/dist/components/PageTreeListView.server.js.map +1 -1
  7. package/dist/components/PageTreeTitleCell.js.map +1 -1
  8. package/dist/endpoints/createMovePageEndpoint.d.ts +1 -0
  9. package/dist/endpoints/createMovePageEndpoint.js +24 -6
  10. package/dist/endpoints/createMovePageEndpoint.js.map +1 -1
  11. package/dist/endpoints/createReorderPageEndpoint.js +4 -1
  12. package/dist/endpoints/createReorderPageEndpoint.js.map +1 -1
  13. package/dist/exports/client.js.map +1 -1
  14. package/dist/exports/rsc.js.map +1 -1
  15. package/dist/index.js +11 -7
  16. package/dist/index.js.map +1 -1
  17. package/dist/types.d.ts +38 -0
  18. package/dist/types.js +22 -1
  19. package/dist/types.js.map +1 -1
  20. package/dist/utilities/badgeConfig.js.map +1 -1
  21. package/dist/utilities/dropTargets.js.map +1 -1
  22. package/dist/utilities/moveValidation.js.map +1 -1
  23. package/dist/utilities/pageTree.js.map +1 -1
  24. package/dist/utilities/pageTreeCollision.js.map +1 -1
  25. package/dist/utilities/pageTreeConfig.js.map +1 -1
  26. package/dist/utilities/status.js.map +1 -1
  27. package/package.json +42 -21
package/dist/components/PageTreeListView.module.css CHANGED
@@ -1,105 +1,105 @@
1
- .root {
2
- }
3
-
4
- .root :global(.pages-hierarchy-table) {
5
- --pages-tree-shade-rgb: 0 0 0;
6
- --pages-tree-shade-1: rgb(var(--pages-tree-shade-rgb) / 0.03);
7
- --pages-tree-shade-2: rgb(var(--pages-tree-shade-rgb) / 0.06);
8
- --pages-tree-shade-3: rgb(var(--pages-tree-shade-rgb) / 0.08);
9
- --pages-tree-shade-4: rgb(var(--pages-tree-shade-rgb) / 0.1);
10
- --pages-tree-shade-5: rgb(var(--pages-tree-shade-rgb) / 0.14);
11
- --pages-tree-shade-6: rgb(var(--pages-tree-shade-rgb) / 0.16);
12
- overflow: visible;
13
- position: relative;
14
- }
15
-
16
- .root :global(.pages-hierarchy-insert-row td) {
17
- block-size: 0;
18
- border: 0;
19
- line-height: 0;
20
- overflow: visible;
21
- padding: 0;
22
- }
23
-
24
- .root :global(.pages-hierarchy-insert-row__target) {
25
- block-size: 0;
26
- overflow: visible;
27
- position: relative;
28
- }
29
-
30
- .root :global(.pages-hierarchy-insert-row__target::after) {
31
- background: transparent;
32
- block-size: 2px;
33
- border-radius: 999px;
34
- content: '';
35
- inset-block-start: -1px;
36
- inset-inline: 0.75rem;
37
- position: absolute;
38
- transition:
39
- background-color 0.15s ease,
40
- box-shadow 0.15s ease;
41
- }
42
-
43
- .root :global(.pages-hierarchy-insert-row[data-drop-valid='true'][data-drag-over='true'] .pages-hierarchy-insert-row__target::after) {
44
- background: rgb(74 84 98 / 0.64);
45
- box-shadow: 0 0 0 1px rgb(74 84 98 / 0.16);
46
- }
47
-
48
- .root :global(.pages-hierarchy-insert-row[data-drop-valid='false'][data-drag-over='true'] .pages-hierarchy-insert-row__target::after) {
49
- background: rgb(190 90 70 / 0.42);
50
- box-shadow: 0 0 0 1px rgb(190 90 70 / 0.12);
51
- }
52
-
53
- .root :global(.pages-hierarchy-table .table) {
54
- margin-bottom: 0;
55
- overflow-y: hidden;
56
- }
57
-
58
- .root :global(.pages-hierarchy-table .table tbody tr) {
59
- background: transparent;
60
- transition: background-color 0.16s ease;
61
- }
62
-
63
- .root :global(.pages-hierarchy-table .table tbody tr:nth-child(odd)),
64
- .root :global(.pages-hierarchy-table .table tbody tr:nth-child(even)) {
65
- background: transparent;
66
- }
67
-
68
- .root :global(.pages-hierarchy-table .table tbody tr:nth-child(odd) td:first-child),
69
- .root :global(.pages-hierarchy-table .table tbody tr:nth-child(odd) td:last-child),
70
- .root :global(.pages-hierarchy-table .table tbody tr:nth-child(even) td:first-child),
71
- .root :global(.pages-hierarchy-table .table tbody tr:nth-child(even) td:last-child) {
72
- border-radius: 0;
73
- }
74
-
75
- .root :global(.pages-hierarchy-table .table th[id='heading-_pageTreeOrderSort']),
76
- .root :global(.pages-hierarchy-table .table td.cell-_pageTreeOrderSort) {
77
- inline-size: 2rem;
78
- max-inline-size: 2rem;
79
- min-inline-size: 0;
80
- padding-inline: 0.2rem;
81
- text-align: center;
82
- width: 2rem;
83
- }
84
-
85
- .root :global(.pages-hierarchy-table .table th[id='heading-_pageTreeOrderSort'] .sort-header) {
86
- justify-content: center;
87
- }
88
-
89
- .root :global(.pages-hierarchy-table .table th[id='heading-_pageTreeOrderSort'] .sort-header__button svg) {
90
- display: none;
91
- }
92
-
1
+ .root {
2
+ }
3
+
4
+ .root :global(.pages-hierarchy-table) {
5
+ --pages-tree-shade-rgb: 0 0 0;
6
+ --pages-tree-shade-1: rgb(var(--pages-tree-shade-rgb) / 0.03);
7
+ --pages-tree-shade-2: rgb(var(--pages-tree-shade-rgb) / 0.06);
8
+ --pages-tree-shade-3: rgb(var(--pages-tree-shade-rgb) / 0.08);
9
+ --pages-tree-shade-4: rgb(var(--pages-tree-shade-rgb) / 0.1);
10
+ --pages-tree-shade-5: rgb(var(--pages-tree-shade-rgb) / 0.14);
11
+ --pages-tree-shade-6: rgb(var(--pages-tree-shade-rgb) / 0.16);
12
+ overflow: visible;
13
+ position: relative;
14
+ }
15
+
16
+ .root :global(.pages-hierarchy-insert-row td) {
17
+ block-size: 0;
18
+ border: 0;
19
+ line-height: 0;
20
+ overflow: visible;
21
+ padding: 0;
22
+ }
23
+
24
+ .root :global(.pages-hierarchy-insert-row__target) {
25
+ block-size: 0;
26
+ overflow: visible;
27
+ position: relative;
28
+ }
29
+
30
+ .root :global(.pages-hierarchy-insert-row__target::after) {
31
+ background: transparent;
32
+ block-size: 2px;
33
+ border-radius: 999px;
34
+ content: '';
35
+ inset-block-start: -1px;
36
+ inset-inline: 0.75rem;
37
+ position: absolute;
38
+ transition:
39
+ background-color 0.15s ease,
40
+ box-shadow 0.15s ease;
41
+ }
42
+
43
+ .root :global(.pages-hierarchy-insert-row[data-drop-valid='true'][data-drag-over='true'] .pages-hierarchy-insert-row__target::after) {
44
+ background: rgb(74 84 98 / 0.64);
45
+ box-shadow: 0 0 0 1px rgb(74 84 98 / 0.16);
46
+ }
47
+
48
+ .root :global(.pages-hierarchy-insert-row[data-drop-valid='false'][data-drag-over='true'] .pages-hierarchy-insert-row__target::after) {
49
+ background: rgb(190 90 70 / 0.42);
50
+ box-shadow: 0 0 0 1px rgb(190 90 70 / 0.12);
51
+ }
52
+
53
+ .root :global(.pages-hierarchy-table .table) {
54
+ margin-bottom: 0;
55
+ overflow-y: hidden;
56
+ }
57
+
58
+ .root :global(.pages-hierarchy-table .table tbody tr) {
59
+ background: transparent;
60
+ transition: background-color 0.16s ease;
61
+ }
62
+
63
+ .root :global(.pages-hierarchy-table .table tbody tr:nth-child(odd)),
64
+ .root :global(.pages-hierarchy-table .table tbody tr:nth-child(even)) {
65
+ background: transparent;
66
+ }
67
+
68
+ .root :global(.pages-hierarchy-table .table tbody tr:nth-child(odd) td:first-child),
69
+ .root :global(.pages-hierarchy-table .table tbody tr:nth-child(odd) td:last-child),
70
+ .root :global(.pages-hierarchy-table .table tbody tr:nth-child(even) td:first-child),
71
+ .root :global(.pages-hierarchy-table .table tbody tr:nth-child(even) td:last-child) {
72
+ border-radius: 0;
73
+ }
74
+
75
+ .root :global(.pages-hierarchy-table .table th[id='heading-_pageTreeOrderSort']),
76
+ .root :global(.pages-hierarchy-table .table td.cell-_pageTreeOrderSort) {
77
+ inline-size: 2rem;
78
+ max-inline-size: 2rem;
79
+ min-inline-size: 0;
80
+ padding-inline: 0.2rem;
81
+ text-align: center;
82
+ width: 2rem;
83
+ }
84
+
85
+ .root :global(.pages-hierarchy-table .table th[id='heading-_pageTreeOrderSort'] .sort-header) {
86
+ justify-content: center;
87
+ }
88
+
89
+ .root :global(.pages-hierarchy-table .table th[id='heading-_pageTreeOrderSort'] .sort-header__button svg) {
90
+ display: none;
91
+ }
92
+
93
93
  .root :global(.pages-hierarchy-table .table th[id='heading-_pageTreeOrderSort'] .sort-header__button::before) {
94
94
  background-color: currentColor;
95
95
  block-size: 12px;
96
96
  content: '';
97
- display: block;
98
- inline-size: 12px;
99
- mask: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.35714 3.92857H0.5M5.07143 7.35714H0.5M2.78571 10.7857H0.5M9.64286 0.5H0.5M9.64286 3.92857V12.5M9.64286 12.5L12.5 9.92857M9.64286 12.5L6.78571 9.92857' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
100
- -webkit-mask: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.35714 3.92857H0.5M5.07143 7.35714H0.5M2.78571 10.7857H0.5M9.64286 0.5H0.5M9.64286 3.92857V12.5M9.64286 12.5L12.5 9.92857M9.64286 12.5L6.78571 9.92857' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
101
- }
102
-
97
+ display: block;
98
+ inline-size: 12px;
99
+ mask: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.35714 3.92857H0.5M5.07143 7.35714H0.5M2.78571 10.7857H0.5M9.64286 0.5H0.5M9.64286 3.92857V12.5M9.64286 12.5L12.5 9.92857M9.64286 12.5L6.78571 9.92857' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
100
+ -webkit-mask: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.35714 3.92857H0.5M5.07143 7.35714H0.5M2.78571 10.7857H0.5M9.64286 0.5H0.5M9.64286 3.92857V12.5M9.64286 12.5L12.5 9.92857M9.64286 12.5L6.78571 9.92857' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
101
+ }
102
+
103
103
  .root :global(.pages-hierarchy-order-sort-spacer) {
104
104
  display: block;
105
105
  inline-size: 1rem;
@@ -112,192 +112,192 @@
112
112
  .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='1'])) {
113
113
  background: var(--pages-tree-shade-1);
114
114
  }
115
-
116
- .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='2'])) {
117
- background: var(--pages-tree-shade-2);
118
- }
119
-
120
- .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='3'])) {
121
- background: var(--pages-tree-shade-3);
122
- }
123
-
124
- .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='4'])) {
125
- background: var(--pages-tree-shade-4);
126
- }
127
-
128
- .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='5'])) {
129
- background: var(--pages-tree-shade-5);
130
- }
131
-
132
- .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='6'])) {
133
- background: var(--pages-tree-shade-6);
134
- }
135
-
136
- .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='1'])),
137
- .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='2'])),
138
- .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='3'])),
139
- .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='4'])),
140
- .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='5'])),
141
- .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='6'])) {
142
- border-radius: var(--style-radius-s);
143
- }
144
-
145
- .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='1']) td:first-child),
146
- .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='2']) td:first-child),
147
- .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='3']) td:first-child),
148
- .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='4']) td:first-child),
149
- .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='5']) td:first-child),
150
- .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='6']) td:first-child) {
151
- border-bottom-left-radius: inherit;
152
- border-top-left-radius: inherit;
153
- }
154
-
155
- .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='1']) td:last-child),
156
- .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='2']) td:last-child),
157
- .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='3']) td:last-child),
158
- .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='4']) td:last-child),
159
- .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='5']) td:last-child),
160
- .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='6']) td:last-child) {
161
- border-bottom-right-radius: inherit;
162
- border-top-right-radius: inherit;
163
- }
164
-
165
- .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-drag-source='true']) {
166
- box-shadow: inset 0 0 0 999px rgb(36 164 223 / 0.22);
167
- }
168
-
169
- .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-order-drag-source='true']) {
170
- box-shadow: inset 0 0 0 2px rgb(74 84 98 / 0.24);
171
- }
172
-
173
- .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-drag-over='true'][data-drop-valid='true']) {
174
- box-shadow: inset 0 0 0 2px rgb(74 84 98 / 0.38);
175
- }
176
-
177
- .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-drag-over='true'][data-drop-valid='false']) {
178
- box-shadow: inset 0 0 0 999px rgb(190 90 70 / 0.18);
179
- }
180
-
181
- .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-drag-source='true'][data-drag-over='true']) {
182
- box-shadow: inset 0 0 0 999px rgb(36 164 223 / 0.22);
183
- }
184
-
185
- :global(html[data-theme='dark']) .root :global(.pages-hierarchy-table) {
186
- --pages-tree-shade-rgb: 255 255 255;
187
- }
188
-
189
- :global(html[data-theme='dark']) .root :global(.pages-hierarchy-insert-row[data-drop-valid='true'][data-drag-over='true'] .pages-hierarchy-insert-row__target::after) {
190
- background: rgb(232 236 241 / 0.72);
191
- box-shadow: 0 0 0 1px rgb(232 236 241 / 0.22);
192
- }
193
-
194
- :global(html[data-theme='dark']) .root :global(.pages-hierarchy-insert-row[data-drop-valid='false'][data-drag-over='true'] .pages-hierarchy-insert-row__target::after) {
195
- background: rgb(255 134 117 / 0.42);
196
- box-shadow: 0 0 0 1px rgb(255 134 117 / 0.12);
197
- }
198
-
199
- :global(html[data-theme='dark']) .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-drag-source='true']) {
200
- box-shadow: inset 0 0 0 999px rgb(65 178 236 / 0.28);
201
- }
202
-
203
- :global(html[data-theme='dark']) .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-order-drag-source='true']) {
204
- box-shadow: inset 0 0 0 2px rgb(232 236 241 / 0.22);
205
- }
206
-
207
- :global(html[data-theme='dark']) .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-drag-source='true'][data-drag-over='true']) {
208
- box-shadow: inset 0 0 0 999px rgb(65 178 236 / 0.28);
209
- }
210
-
211
- :global(html[data-theme='dark']) .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-drag-over='true'][data-drop-valid='true']:not([data-is-drag-source='true'])) {
212
- box-shadow: inset 0 0 0 2px rgb(232 236 241 / 0.42);
213
- }
214
-
215
- :global(html[data-theme='dark']) .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-drag-over='true'][data-drop-valid='false']:not([data-is-drag-source='true'])) {
216
- box-shadow: inset 0 0 0 999px rgb(190 90 70 / 0.24);
217
- }
218
-
219
- .root :global(.pages-hierarchy-cell) {
220
- align-items: center;
221
- display: flex;
222
- gap: 0.35rem;
223
- min-width: 0;
224
- padding-inline-start: calc(var(--pages-tree-depth, 0) * 1.75rem);
225
- }
226
-
227
- .root :global(.pages-hierarchy-cell__drag-handle),
228
- .root :global(.pages-hierarchy-cell__drag-spacer),
229
- .root :global(.pages-hierarchy-cell__toggle),
230
- .root :global(.pages-hierarchy-cell__spacer) {
231
- align-items: center;
232
- block-size: 1.5rem;
233
- display: inline-flex;
234
- flex: 0 0 1.5rem;
235
- inline-size: 1.5rem;
236
- justify-content: center;
237
- }
238
-
239
- .root :global(.pages-hierarchy-cell__drag-handle),
240
- .root :global(.pages-hierarchy-cell__toggle) {
241
- appearance: none;
242
- background: transparent;
243
- border: 0;
244
- border-radius: var(--style-radius-s, 4px);
245
- color: var(--theme-text-dim);
246
- cursor: pointer;
247
- padding: 0;
248
- transition:
249
- background-color 0.15s ease,
250
- color 0.15s ease;
251
- }
252
-
253
- .root :global(.pages-hierarchy-cell__drag-handle) {
254
- cursor: grab;
255
- margin-inline-end: 3px;
256
- touch-action: none;
257
- }
258
-
259
- .root :global(.pages-hierarchy-cell__drag-handle:disabled) {
260
- cursor: default;
261
- opacity: 0.45;
262
- }
263
-
264
- .root :global(.pages-hierarchy-cell__drag-handle--active) {
265
- color: var(--theme-text);
266
- }
267
-
268
- .root :global(.pages-hierarchy-cell__drag-handle:active:not(:disabled)),
269
- .root :global(.pages-hierarchy-cell__drag-handle--active:not(:disabled)) {
270
- cursor: grabbing;
271
- }
272
-
273
- .root :global(.pages-hierarchy-cell__drag-handle svg) {
274
- block-size: 0.95rem;
275
- inline-size: 0.95rem;
276
- }
277
-
278
- .root :global(.pages-hierarchy-cell__drag-handle--parent svg) {
279
- block-size: 0.95rem;
280
- inline-size: 0.95rem;
281
- }
282
-
283
- .root :global(.pages-hierarchy-cell__drag-handle:hover:not(:disabled)),
284
- .root :global(.pages-hierarchy-cell__drag-handle:focus-visible:not(:disabled)),
285
- .root :global(.pages-hierarchy-cell__toggle:hover),
286
- .root :global(.pages-hierarchy-cell__toggle:focus-visible) {
287
- background: rgb(0 0 0 / 0.05);
288
- color: var(--theme-text);
289
- }
290
-
291
- .root :global(.pages-hierarchy-cell__chevron) {
292
- block-size: 0.8rem;
293
- inline-size: 0.8rem;
294
- transition: transform 0.15s ease;
295
- }
296
-
297
- .root :global(.pages-hierarchy-cell__chevron--collapsed) {
298
- transform: rotate(-90deg);
299
- }
300
-
115
+
116
+ .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='2'])) {
117
+ background: var(--pages-tree-shade-2);
118
+ }
119
+
120
+ .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='3'])) {
121
+ background: var(--pages-tree-shade-3);
122
+ }
123
+
124
+ .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='4'])) {
125
+ background: var(--pages-tree-shade-4);
126
+ }
127
+
128
+ .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='5'])) {
129
+ background: var(--pages-tree-shade-5);
130
+ }
131
+
132
+ .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='6'])) {
133
+ background: var(--pages-tree-shade-6);
134
+ }
135
+
136
+ .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='1'])),
137
+ .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='2'])),
138
+ .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='3'])),
139
+ .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='4'])),
140
+ .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='5'])),
141
+ .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='6'])) {
142
+ border-radius: var(--style-radius-s);
143
+ }
144
+
145
+ .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='1']) td:first-child),
146
+ .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='2']) td:first-child),
147
+ .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='3']) td:first-child),
148
+ .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='4']) td:first-child),
149
+ .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='5']) td:first-child),
150
+ .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='6']) td:first-child) {
151
+ border-bottom-left-radius: inherit;
152
+ border-top-left-radius: inherit;
153
+ }
154
+
155
+ .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='1']) td:last-child),
156
+ .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='2']) td:last-child),
157
+ .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='3']) td:last-child),
158
+ .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='4']) td:last-child),
159
+ .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='5']) td:last-child),
160
+ .root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='6']) td:last-child) {
161
+ border-bottom-right-radius: inherit;
162
+ border-top-right-radius: inherit;
163
+ }
164
+
165
+ .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-drag-source='true']) {
166
+ box-shadow: inset 0 0 0 999px rgb(36 164 223 / 0.22);
167
+ }
168
+
169
+ .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-order-drag-source='true']) {
170
+ box-shadow: inset 0 0 0 2px rgb(74 84 98 / 0.24);
171
+ }
172
+
173
+ .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-drag-over='true'][data-drop-valid='true']) {
174
+ box-shadow: inset 0 0 0 2px rgb(74 84 98 / 0.38);
175
+ }
176
+
177
+ .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-drag-over='true'][data-drop-valid='false']) {
178
+ box-shadow: inset 0 0 0 999px rgb(190 90 70 / 0.18);
179
+ }
180
+
181
+ .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-drag-source='true'][data-drag-over='true']) {
182
+ box-shadow: inset 0 0 0 999px rgb(36 164 223 / 0.22);
183
+ }
184
+
185
+ :global(html[data-theme='dark']) .root :global(.pages-hierarchy-table) {
186
+ --pages-tree-shade-rgb: 255 255 255;
187
+ }
188
+
189
+ :global(html[data-theme='dark']) .root :global(.pages-hierarchy-insert-row[data-drop-valid='true'][data-drag-over='true'] .pages-hierarchy-insert-row__target::after) {
190
+ background: rgb(232 236 241 / 0.72);
191
+ box-shadow: 0 0 0 1px rgb(232 236 241 / 0.22);
192
+ }
193
+
194
+ :global(html[data-theme='dark']) .root :global(.pages-hierarchy-insert-row[data-drop-valid='false'][data-drag-over='true'] .pages-hierarchy-insert-row__target::after) {
195
+ background: rgb(255 134 117 / 0.42);
196
+ box-shadow: 0 0 0 1px rgb(255 134 117 / 0.12);
197
+ }
198
+
199
+ :global(html[data-theme='dark']) .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-drag-source='true']) {
200
+ box-shadow: inset 0 0 0 999px rgb(65 178 236 / 0.28);
201
+ }
202
+
203
+ :global(html[data-theme='dark']) .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-order-drag-source='true']) {
204
+ box-shadow: inset 0 0 0 2px rgb(232 236 241 / 0.22);
205
+ }
206
+
207
+ :global(html[data-theme='dark']) .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-drag-source='true'][data-drag-over='true']) {
208
+ box-shadow: inset 0 0 0 999px rgb(65 178 236 / 0.28);
209
+ }
210
+
211
+ :global(html[data-theme='dark']) .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-drag-over='true'][data-drop-valid='true']:not([data-is-drag-source='true'])) {
212
+ box-shadow: inset 0 0 0 2px rgb(232 236 241 / 0.42);
213
+ }
214
+
215
+ :global(html[data-theme='dark']) .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-drag-over='true'][data-drop-valid='false']:not([data-is-drag-source='true'])) {
216
+ box-shadow: inset 0 0 0 999px rgb(190 90 70 / 0.24);
217
+ }
218
+
219
+ .root :global(.pages-hierarchy-cell) {
220
+ align-items: center;
221
+ display: flex;
222
+ gap: 0.35rem;
223
+ min-width: 0;
224
+ padding-inline-start: calc(var(--pages-tree-depth, 0) * 1.75rem);
225
+ }
226
+
227
+ .root :global(.pages-hierarchy-cell__drag-handle),
228
+ .root :global(.pages-hierarchy-cell__drag-spacer),
229
+ .root :global(.pages-hierarchy-cell__toggle),
230
+ .root :global(.pages-hierarchy-cell__spacer) {
231
+ align-items: center;
232
+ block-size: 1.5rem;
233
+ display: inline-flex;
234
+ flex: 0 0 1.5rem;
235
+ inline-size: 1.5rem;
236
+ justify-content: center;
237
+ }
238
+
239
+ .root :global(.pages-hierarchy-cell__drag-handle),
240
+ .root :global(.pages-hierarchy-cell__toggle) {
241
+ appearance: none;
242
+ background: transparent;
243
+ border: 0;
244
+ border-radius: var(--style-radius-s, 4px);
245
+ color: var(--theme-text-dim);
246
+ cursor: pointer;
247
+ padding: 0;
248
+ transition:
249
+ background-color 0.15s ease,
250
+ color 0.15s ease;
251
+ }
252
+
253
+ .root :global(.pages-hierarchy-cell__drag-handle) {
254
+ cursor: grab;
255
+ margin-inline-end: 3px;
256
+ touch-action: none;
257
+ }
258
+
259
+ .root :global(.pages-hierarchy-cell__drag-handle:disabled) {
260
+ cursor: default;
261
+ opacity: 0.45;
262
+ }
263
+
264
+ .root :global(.pages-hierarchy-cell__drag-handle--active) {
265
+ color: var(--theme-text);
266
+ }
267
+
268
+ .root :global(.pages-hierarchy-cell__drag-handle:active:not(:disabled)),
269
+ .root :global(.pages-hierarchy-cell__drag-handle--active:not(:disabled)) {
270
+ cursor: grabbing;
271
+ }
272
+
273
+ .root :global(.pages-hierarchy-cell__drag-handle svg) {
274
+ block-size: 0.95rem;
275
+ inline-size: 0.95rem;
276
+ }
277
+
278
+ .root :global(.pages-hierarchy-cell__drag-handle--parent svg) {
279
+ block-size: 0.95rem;
280
+ inline-size: 0.95rem;
281
+ }
282
+
283
+ .root :global(.pages-hierarchy-cell__drag-handle:hover:not(:disabled)),
284
+ .root :global(.pages-hierarchy-cell__drag-handle:focus-visible:not(:disabled)),
285
+ .root :global(.pages-hierarchy-cell__toggle:hover),
286
+ .root :global(.pages-hierarchy-cell__toggle:focus-visible) {
287
+ background: rgb(0 0 0 / 0.05);
288
+ color: var(--theme-text);
289
+ }
290
+
291
+ .root :global(.pages-hierarchy-cell__chevron) {
292
+ block-size: 0.8rem;
293
+ inline-size: 0.8rem;
294
+ transition: transform 0.15s ease;
295
+ }
296
+
297
+ .root :global(.pages-hierarchy-cell__chevron--collapsed) {
298
+ transform: rotate(-90deg);
299
+ }
300
+
301
301
  .root :global(.pages-hierarchy-cell[data-tree-home='true'] .pages-hierarchy-cell__content) {
302
302
  align-items: baseline;
303
303
  display: inline-flex;
@@ -310,86 +310,86 @@
310
310
  flex: 0 0 0.84em;
311
311
  inline-size: 0.84em;
312
312
  }
313
-
314
- .root :global(.pages-hierarchy-cell__content) {
315
- flex: 1 1 auto;
316
- min-width: 0;
317
- }
318
-
319
- .root :global(.pages-hierarchy-empty-cell) {
320
- color: var(--theme-text-dim);
321
- }
322
-
323
- .root :global(.pages-hierarchy-drag-overlay) {
324
- align-items: center;
325
- background: var(--theme-elevation-0);
326
- border: 1px solid var(--theme-elevation-200);
327
- border-radius: var(--style-radius-s, 4px);
328
- box-shadow: 0 12px 28px rgb(0 0 0 / 0.14);
329
- color: var(--theme-text);
330
- display: inline-flex;
331
- font-family: var(--font-mono, var(--font-body));
332
- font-size: 0.95rem;
333
- font-weight: 500;
334
- inline-size: max-content;
335
- margin-inline-start: 2rem;
336
- padding: 0.65rem 0.85rem;
337
- pointer-events: none;
338
- transform: translateY(calc(0.75rem - 50%));
339
- white-space: nowrap;
340
- }
341
-
342
- .root :global(.pages-hierarchy-status-badge) {
343
- align-items: center;
344
- border-radius: 4px;
345
- display: inline-flex;
346
- font-size: 0.72rem;
347
- font-weight: 500;
348
- letter-spacing: 0.08em;
349
- line-height: 1;
350
- min-height: 1.55rem;
351
- padding: 0.32rem 0.72rem;
352
- text-transform: uppercase;
353
- white-space: nowrap;
354
- }
355
-
356
- .root :global(.pages-hierarchy-status-badge--published) {
357
- background: var(--theme-success-150);
358
- color: var(--theme-success-800);
359
- }
360
-
361
- .root :global(.pages-hierarchy-status-badge--changed) {
362
- background: var(--theme-warning-150);
363
- color: var(--theme-warning-800);
364
- }
365
-
366
- .root :global(.pages-hierarchy-status-badge--draft) {
367
- background: var(--theme-elevation-150);
368
- color: var(--theme-elevation-800);
369
- }
370
-
371
- .root :global(.pages-hierarchy-status-badge--unknown) {
372
- background: var(--theme-elevation-100);
373
- color: var(--theme-text-dim);
374
- }
375
-
376
- .root :global(.pages-hierarchy-status-badge[data-custom-color='true']) {
377
- background: color-mix(in srgb, var(--page-tree-badge-base) 24%, white);
378
- color: color-mix(in srgb, var(--page-tree-badge-base) 78%, black);
379
- }
380
-
313
+
314
+ .root :global(.pages-hierarchy-cell__content) {
315
+ flex: 1 1 auto;
316
+ min-width: 0;
317
+ }
318
+
319
+ .root :global(.pages-hierarchy-empty-cell) {
320
+ color: var(--theme-text-dim);
321
+ }
322
+
323
+ .root :global(.pages-hierarchy-drag-overlay) {
324
+ align-items: center;
325
+ background: var(--theme-elevation-0);
326
+ border: 1px solid var(--theme-elevation-200);
327
+ border-radius: var(--style-radius-s, 4px);
328
+ box-shadow: 0 12px 28px rgb(0 0 0 / 0.14);
329
+ color: var(--theme-text);
330
+ display: inline-flex;
331
+ font-family: var(--font-mono, var(--font-body));
332
+ font-size: 0.95rem;
333
+ font-weight: 500;
334
+ inline-size: max-content;
335
+ margin-inline-start: 2rem;
336
+ padding: 0.65rem 0.85rem;
337
+ pointer-events: none;
338
+ transform: translateY(calc(0.75rem - 50%));
339
+ white-space: nowrap;
340
+ }
341
+
342
+ .root :global(.pages-hierarchy-status-badge) {
343
+ align-items: center;
344
+ border-radius: 4px;
345
+ display: inline-flex;
346
+ font-size: 0.72rem;
347
+ font-weight: 500;
348
+ letter-spacing: 0.08em;
349
+ line-height: 1;
350
+ min-height: 1.55rem;
351
+ padding: 0.32rem 0.72rem;
352
+ text-transform: uppercase;
353
+ white-space: nowrap;
354
+ }
355
+
356
+ .root :global(.pages-hierarchy-status-badge--published) {
357
+ background: var(--theme-success-150);
358
+ color: var(--theme-success-800);
359
+ }
360
+
361
+ .root :global(.pages-hierarchy-status-badge--changed) {
362
+ background: var(--theme-warning-150);
363
+ color: var(--theme-warning-800);
364
+ }
365
+
366
+ .root :global(.pages-hierarchy-status-badge--draft) {
367
+ background: var(--theme-elevation-150);
368
+ color: var(--theme-elevation-800);
369
+ }
370
+
371
+ .root :global(.pages-hierarchy-status-badge--unknown) {
372
+ background: var(--theme-elevation-100);
373
+ color: var(--theme-text-dim);
374
+ }
375
+
376
+ .root :global(.pages-hierarchy-status-badge[data-custom-color='true']) {
377
+ background: color-mix(in srgb, var(--page-tree-badge-base) 24%, white);
378
+ color: color-mix(in srgb, var(--page-tree-badge-base) 78%, black);
379
+ }
380
+
381
381
  .root :global(.pages-hierarchy-status-badge--published[data-custom-color='true']),
382
382
  .root :global(.pages-hierarchy-status-badge--changed[data-custom-color='true']),
383
383
  .root :global(.pages-hierarchy-status-badge--draft[data-custom-color='true']) {
384
384
  background: var(--page-tree-badge-base);
385
385
  color: color-mix(in srgb, var(--page-tree-badge-base) 35%, black);
386
386
  }
387
-
388
- :global(html[data-theme='dark']) .root :global(.pages-hierarchy-status-badge[data-custom-color='true']) {
389
- background: color-mix(in srgb, var(--page-tree-badge-base) 32%, black);
390
- color: color-mix(in srgb, var(--page-tree-badge-base) 64%, white);
391
- }
392
-
387
+
388
+ :global(html[data-theme='dark']) .root :global(.pages-hierarchy-status-badge[data-custom-color='true']) {
389
+ background: color-mix(in srgb, var(--page-tree-badge-base) 32%, black);
390
+ color: color-mix(in srgb, var(--page-tree-badge-base) 64%, white);
391
+ }
392
+
393
393
  :global(html[data-theme='dark']) .root :global(.pages-hierarchy-status-badge--published[data-custom-color='true']),
394
394
  :global(html[data-theme='dark']) .root :global(.pages-hierarchy-status-badge--changed[data-custom-color='true']),
395
395
  :global(html[data-theme='dark']) .root :global(.pages-hierarchy-status-badge--draft[data-custom-color='true']) {