regular-layout 0.1.0 → 0.2.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 (44) hide show
  1. package/LICENSE.md +1 -1
  2. package/README.md +6 -6
  3. package/dist/extensions.d.ts +5 -4
  4. package/dist/index.d.ts +3 -3
  5. package/dist/index.js +15 -10
  6. package/dist/index.js.map +4 -4
  7. package/dist/{common → layout}/calculate_edge.d.ts +3 -2
  8. package/dist/{common → layout}/calculate_intersect.d.ts +13 -9
  9. package/dist/layout/constants.d.ts +81 -0
  10. package/dist/{common → layout}/flatten.d.ts +1 -1
  11. package/dist/{common → layout}/generate_grid.d.ts +5 -4
  12. package/dist/layout/generate_overlay.d.ts +2 -0
  13. package/dist/{common → layout}/insert_child.d.ts +3 -2
  14. package/dist/{common → layout}/redistribute_panel_sizes.d.ts +2 -2
  15. package/dist/{common → layout}/remove_child.d.ts +1 -1
  16. package/dist/{common/layout_config.d.ts → layout/types.d.ts} +6 -10
  17. package/dist/regular-layout-frame.d.ts +1 -4
  18. package/dist/regular-layout-tab.d.ts +26 -0
  19. package/dist/regular-layout.d.ts +37 -18
  20. package/package.json +9 -7
  21. package/src/extensions.ts +10 -4
  22. package/src/index.ts +3 -7
  23. package/src/layout/calculate_edge.ts +217 -0
  24. package/src/{common → layout}/calculate_intersect.ts +61 -101
  25. package/src/layout/constants.ts +119 -0
  26. package/src/{common → layout}/flatten.ts +1 -1
  27. package/src/{common → layout}/generate_grid.ts +120 -106
  28. package/src/{common → layout}/generate_overlay.ts +26 -12
  29. package/src/{common → layout}/insert_child.ts +105 -51
  30. package/src/{common → layout}/redistribute_panel_sizes.ts +11 -4
  31. package/src/{common → layout}/remove_child.ts +2 -2
  32. package/src/{common/layout_config.ts → layout/types.ts} +7 -19
  33. package/src/regular-layout-frame.ts +40 -74
  34. package/src/regular-layout-tab.ts +103 -0
  35. package/src/regular-layout.ts +260 -148
  36. package/themes/chicago.css +89 -0
  37. package/themes/fluxbox.css +110 -0
  38. package/themes/gibson.css +264 -0
  39. package/themes/hotdog.css +88 -0
  40. package/themes/lorax.css +130 -0
  41. package/dist/common/constants.d.ts +0 -29
  42. package/dist/common/generate_overlay.d.ts +0 -2
  43. package/src/common/calculate_edge.ts +0 -104
  44. package/src/common/constants.ts +0 -46
package/themes/fluxbox.css ADDED
@@ -0,0 +1,110 @@
1
+ /* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
2
+ * ░░░░░░░░▄▀░█▀▄░█▀▀░█▀▀░█░█░█░░░█▀█░█▀▄░░░░░█░░░█▀█░█░█░█▀█░█░█░▀█▀░▀▄░░░░░░░░
3
+ * ░░░░░░░▀▄░░█▀▄░█▀▀░█░█░█░█░█░░░█▀█░█▀▄░▀▀▀░█░░░█▀█░░█░░█░█░█░█░░█░░░▄▀░░░░░░░
4
+ * ░░░░░░░░░▀░▀░▀░▀▀▀░▀▀▀░▀▀▀░▀▀▀░▀░▀░▀░▀░░░░░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░░▀░░▀░░░░░░░░░
5
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
6
+ * ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
7
+ * ┃ * Copyright (c) 2026, the Regular Layout Authors. This file is part * ┃
8
+ * ┃ * of the Regular Layout library, distributed under the terms of the * ┃
9
+ * ┃ * [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). * ┃
10
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
11
+ */
12
+
13
+ regular-layout.fluxbox {
14
+ background-color: #DBDFE6;
15
+ font-family: "ui-sans-serif", "Helvetica", "Arial", sans-serif;
16
+ padding: 16px;
17
+ }
18
+
19
+ /* Frame */
20
+ regular-layout.fluxbox regular-layout-frame {
21
+ position: relative;
22
+ box-sizing: border-box;
23
+ margin: 8px;
24
+ background: #FFFFFF;
25
+ border: 1px solid #9DACBE;
26
+ box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
27
+ }
28
+
29
+ regular-layout.fluxbox regular-layout-frame::part(close) {
30
+ border: 1px solid #8A96A3;
31
+ height: 14px;
32
+ background: linear-gradient(to bottom, #E8ECEF 0%, #CDD5DD 100%);
33
+ align-self: center;
34
+ display: flex;
35
+ align-items: center;
36
+ justify-content: center;
37
+ padding: 0px;
38
+ width: 14px;
39
+ margin-right: 2px;
40
+ }
41
+
42
+ regular-layout.fluxbox regular-layout-frame::part(close):hover {
43
+ background: linear-gradient(to bottom, #F0F3F5 0%, #D8DFE6 100%);
44
+ }
45
+
46
+ regular-layout.fluxbox regular-layout-frame::part(close):active {
47
+ background: linear-gradient(to bottom, #C5CFD9 0%, #B3BEC9 100%);
48
+ }
49
+
50
+ regular-layout.fluxbox regular-layout-frame::part(close):before {
51
+ content: "×";
52
+ font-size: 14px;
53
+ font-weight: normal;
54
+ color: #444444;
55
+ line-height: 1;
56
+ }
57
+
58
+ regular-layout.fluxbox regular-layout-frame::part(titlebar) {
59
+ display: flex;
60
+ align-items: stretch;
61
+ padding-right: 0px;
62
+ height: 22px;
63
+ }
64
+
65
+ regular-layout.fluxbox regular-layout-frame::part(tab) {
66
+ display: flex;
67
+ flex: 1 1 150px;
68
+ align-items: center;
69
+ padding: 0 8px;
70
+ cursor: pointer;
71
+ text-overflow: ellipsis;
72
+ background: linear-gradient(to bottom, #C7D1DB 0%, #B3BEC9 100%);
73
+ color: #4A4A4A;
74
+ font-size: 11px;
75
+ font-weight: normal;
76
+ border-right: 1px solid #9DACBE;
77
+ opacity: 0.85;
78
+ }
79
+
80
+ regular-layout.fluxbox regular-layout-frame::part(tab):hover {
81
+ background: linear-gradient(to bottom, #D2DBE4 0%, #BEC9D4 100%);
82
+ }
83
+
84
+ regular-layout.fluxbox regular-layout-frame::part(active-tab) {
85
+ background: linear-gradient(to bottom, #E0E7EF 0%, #D1DAE3 100%);
86
+ color: #1A1A1A;
87
+ opacity: 1;
88
+ font-weight: 500;
89
+ }
90
+
91
+ regular-layout.fluxbox:has(.overlay)>* {
92
+ opacity: 0.7;
93
+ }
94
+
95
+ regular-layout.fluxbox:has(.overlay)>.overlay {
96
+ opacity: 1;
97
+ }
98
+
99
+ /* Frame in Overlay Mode */
100
+ regular-layout.fluxbox regular-layout-frame.overlay {
101
+ margin: 0;
102
+ background-color: rgba(155, 172, 190, 0.25);
103
+ border: 1px solid #6B7C8F;
104
+ box-shadow: none;
105
+ transition:
106
+ top 0.1s ease-in-out,
107
+ height 0.1s ease-in-out,
108
+ width 0.1s ease-in-out,
109
+ left 0.1s ease-in-out;
110
+ }
package/themes/gibson.css ADDED
@@ -0,0 +1,264 @@
1
+ /* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
2
+ * ░░░░░░░░▄▀░█▀▄░█▀▀░█▀▀░█░█░█░░░█▀█░█▀▄░░░░░█░░░█▀█░█░█░█▀█░█░█░▀█▀░▀▄░░░░░░░░
3
+ * ░░░░░░░▀▄░░█▀▄░█▀▀░█░█░█░█░█░░░█▀█░█▀▄░▀▀▀░█░░░█▀█░░█░░█░█░█░█░░█░░░▄▀░░░░░░░
4
+ * ░░░░░░░░░▀░▀░▀░▀▀▀░▀▀▀░▀▀▀░▀▀▀░▀░▀░▀░▀░░░░░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░░▀░░▀░░░░░░░░░
5
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
6
+ * ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
7
+ * ┃ * Copyright (c) 2026, the Regular Layout Authors. This file is part * ┃
8
+ * ┃ * of the Regular Layout library, distributed under the terms of the * ┃
9
+ * ┃ * [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). * ┃
10
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
11
+ */
12
+
13
+ regular-layout.gibson {
14
+ background: radial-gradient(ellipse at center, #0a0a1a 0%, #000000 100%);
15
+ font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
16
+ padding: 8px;
17
+ }
18
+
19
+ /* Frame */
20
+ regular-layout.gibson regular-layout-frame {
21
+ --titlebar-height: 28px;
22
+ position: relative;
23
+ box-sizing: border-box;
24
+ margin: 8px;
25
+ background: rgba(10, 10, 26, 0.85);
26
+ backdrop-filter: blur(4px);
27
+ }
28
+
29
+ regular-layout.gibson regular-layout-frame::part(active-close) {
30
+ border: 1px solid #ff00ff;
31
+ height: 18px;
32
+ width: 18px;
33
+ background: rgba(255, 0, 255, 0.1);
34
+ align-self: center;
35
+ /* biome-ignore lint/complexity/noImportantStyles: reasons */
36
+ display: flex !important;
37
+ align-items: center;
38
+ justify-content: center;
39
+ margin-right: 1px;
40
+ box-shadow: 0 0 8px rgba(255, 0, 255, 0.4);
41
+ transition: all 0.1s ease;
42
+ }
43
+
44
+ regular-layout.gibson regular-layout-frame::part(active-close):hover {
45
+ background: rgba(255, 0, 255, 0.3);
46
+ box-shadow: 0 0 12px rgba(255, 0, 255, 0.8);
47
+ }
48
+
49
+ regular-layout.gibson regular-layout-frame::part(active-close):before {
50
+ content: "×";
51
+ font-size: 14px;
52
+ font-weight: bold;
53
+ color: #ff00ff;
54
+ text-shadow: 0 0 4px rgba(255, 0, 255, 0.8);
55
+ }
56
+
57
+ regular-layout.gibson regular-layout-frame::part(close) {
58
+ display: none;
59
+ }
60
+
61
+
62
+ regular-layout.gibson regular-layout-frame::part(titlebar) {
63
+ display: flex;
64
+ justify-content: flex-end;
65
+ align-items: stretch;
66
+ padding-left: 12px;
67
+ height: 32px;
68
+
69
+ /* border-bottom: 1px solid rgba(0, 255, 255, 0.3); */
70
+ }
71
+
72
+ regular-layout.gibson regular-layout-frame::part(tab) {
73
+ display: flex;
74
+ flex: 1 1 150px;
75
+ max-width: 200px;
76
+ align-items: center;
77
+ padding: 0 5px 0 12px;
78
+ cursor: pointer;
79
+ text-overflow: ellipsis;
80
+ background: rgba(255, 0, 255, 0.1);
81
+ color: #00ffff;
82
+ font-size: 11px;
83
+ font-weight: 500;
84
+ letter-spacing: 0.5px;
85
+ text-transform: uppercase;
86
+ /* border-right: 1px solid rgba(0, 255, 255, 0.2); */
87
+ opacity: 0.6;
88
+ transition: all 0.2s ease;
89
+ text-shadow: 0 0 4px rgba(0, 255, 255, 0.5);
90
+ }
91
+
92
+ regular-layout.gibson regular-layout-frame::part(tab):hover {
93
+ box-shadow: inset 0 0 12px rgba(0, 255, 255, 0.9);
94
+ }
95
+
96
+ regular-layout.gibson regular-layout-frame::part(active-tab) {
97
+ background: rgba(0, 255, 255, 0.15);
98
+ opacity: 1;
99
+ border: 2px solid #00ffff;
100
+ border-bottom-width: 1px;
101
+ box-shadow:
102
+ inset 0 0 12px rgba(0, 255, 255, 0.3),
103
+ 0 0 8px rgba(0, 255, 255, 0.4);
104
+ }
105
+
106
+ regular-layout.gibson:has(.overlay) > * {
107
+ opacity: 0.5;
108
+ }
109
+
110
+ regular-layout.gibson:has(.overlay) > .overlay {
111
+ opacity: 1;
112
+ }
113
+
114
+ /* Frame in Overlay Mode */
115
+ regular-layout.gibson regular-layout-frame.overlay {
116
+ background: rgba(255, 0, 255, 0.1);
117
+ border: 1px dashed #ff00ff;
118
+ border-radius: 12px;
119
+ box-shadow:
120
+ 0 0 15px rgba(255, 0, 255, 0.6),
121
+ inset 0 0 20px rgba(255, 0, 255, 0.2);
122
+ margin: 0;
123
+ transition:
124
+ top 0.075s ease-out,
125
+ height 0.075s ease-out,
126
+ width 0.075s ease-out,
127
+ left 0.075s ease-out;
128
+ }
129
+
130
+ regular-layout.gibson regular-layout-frame::part(container) {
131
+ display: none;
132
+ border: 1px solid #00ffff;
133
+ border-radius: 12px 0 12px 0;
134
+ }
135
+
136
+ regular-layout.gibson regular-layout-frame::part(titlebar) {
137
+ display: none;
138
+ }
139
+
140
+ regular-layout.gibson regular-layout-frame:not(.overlay)::part(container),
141
+ regular-layout.gibson regular-layout-frame:not(.overlay)::part(titlebar) {
142
+ display: flex;
143
+ }
144
+
145
+ /* Cyberpunk color variations */
146
+ regular-layout.gibson :nth-child(6n+1)::part(container) {
147
+ border-color: #00ffff;
148
+ box-shadow:
149
+ 0 0 10px rgba(0, 255, 255, 0.75),
150
+ inset 0 0 20px rgba(0, 255, 255, 0.1);
151
+ }
152
+
153
+ regular-layout.gibson :nth-child(6n+1)::part(tab) {
154
+ color: #00ffff;
155
+ text-shadow: 0 0 4px rgba(0, 255, 255, 0.6);
156
+ }
157
+
158
+ regular-layout.gibson :nth-child(6n+1)::part(active-tab) {
159
+ background: #00ffff44;
160
+ border-color: #00ffff;
161
+ box-shadow:
162
+ inset 0 0 12px rgba(0, 255, 255, 0.3),
163
+ 0 0 8px rgba(0, 255, 255, 0.4);
164
+ }
165
+
166
+ regular-layout.gibson :nth-child(6n+2)::part(container) {
167
+ border-color: #ff00ff;
168
+ box-shadow:
169
+ 0 0 10px rgba(255, 0, 255, 0.75),
170
+ inset 0 0 20px rgba(255, 0, 255, 0.1);
171
+ }
172
+
173
+ regular-layout.gibson :nth-child(6n+2)::part(tab) {
174
+ color: #ff00ff;
175
+ text-shadow: 0 0 4px rgba(255, 0, 255, 0.6);
176
+ }
177
+
178
+ regular-layout.gibson :nth-child(6n+2)::part(active-tab) {
179
+ background: #ff00ff44;
180
+ border-color: #ff00ff;
181
+ box-shadow:
182
+ inset 0 0 12px rgba(255, 0, 255, 0.3),
183
+ 0 0 8px rgba(255, 0, 255, 0.4);
184
+ }
185
+
186
+ regular-layout.gibson :nth-child(6n+3)::part(container) {
187
+ border-color: #00ff00;
188
+ box-shadow:
189
+ 0 0 10px rgba(0, 255, 0, 0.75),
190
+ inset 0 0 20px rgba(0, 255, 0, 0.1);
191
+ }
192
+
193
+ regular-layout.gibson :nth-child(6n+3)::part(tab) {
194
+ color: #00ff00;
195
+ text-shadow: 0 0 4px rgba(0, 255, 0, 0.6);
196
+ }
197
+
198
+ regular-layout.gibson :nth-child(6n+3)::part(active-tab) {
199
+ background: #00ff0044;
200
+ border-color: #00ff00;
201
+ box-shadow:
202
+ inset 0 0 12px rgba(0, 255, 0, 0.3),
203
+ 0 0 8px rgba(0, 255, 0, 0.4);
204
+ }
205
+
206
+ regular-layout.gibson :nth-child(6n+4)::part(container) {
207
+ border-color: #ff0080;
208
+ box-shadow:
209
+ 0 0 10px rgba(255, 0, 128, 0.75),
210
+ inset 0 0 20px rgba(255, 0, 128, 0.1);
211
+ }
212
+
213
+ regular-layout.gibson :nth-child(6n+4)::part(tab) {
214
+ color: #ff0080;
215
+ text-shadow: 0 0 4px rgba(255, 0, 128, 0.6);
216
+ }
217
+
218
+ regular-layout.gibson :nth-child(6n+4)::part(active-tab) {
219
+ background: #ff008044;
220
+ border-color: #ff0080;
221
+ box-shadow:
222
+ inset 0 0 12px rgba(255, 0, 128, 0.3),
223
+ 0 0 8px rgba(255, 0, 128, 0.4);
224
+ }
225
+
226
+ regular-layout.gibson :nth-child(6n+5)::part(container) {
227
+ border-color: #8000ff;
228
+ box-shadow:
229
+ 0 0 10px rgba(128, 0, 255, 0.75),
230
+ inset 0 0 20px rgba(128, 0, 255, 0.1);
231
+ }
232
+
233
+ regular-layout.gibson :nth-child(6n+5)::part(tab) {
234
+ color: #8000ff;
235
+ text-shadow: 0 0 4px rgba(128, 0, 255, 0.6);
236
+ }
237
+
238
+ regular-layout.gibson :nth-child(6n+5)::part(active-tab) {
239
+ background: #8000ff44;
240
+ border-color: #8000ff;
241
+ box-shadow:
242
+ inset 0 0 12px rgba(128, 0, 255, 0.3),
243
+ 0 0 8px rgba(128, 0, 255, 0.4);
244
+ }
245
+
246
+ regular-layout.gibson :nth-child(6n+6)::part(container) {
247
+ border-color: #ffff00;
248
+ box-shadow:
249
+ 0 0 10px rgba(255, 255, 0, 0.75),
250
+ inset 0 0 20px rgba(255, 255, 0, 0.1);
251
+ }
252
+
253
+ regular-layout.gibson :nth-child(6n+6)::part(tab) {
254
+ color: #ffff00;
255
+ text-shadow: 0 0 4px rgba(255, 255, 0, 0.6);
256
+ }
257
+
258
+ regular-layout.gibson :nth-child(6n+6)::part(active-tab) {
259
+ background: #ffff0044;
260
+ border-color: #ffff00;
261
+ box-shadow:
262
+ inset 0 0 12px rgba(255, 255, 0, 0.3),
263
+ 0 0 8px rgba(255, 255, 0, 0.4);
264
+ }
package/themes/hotdog.css ADDED
@@ -0,0 +1,88 @@
1
+ /* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
2
+ * ░░░░░░░░▄▀░█▀▄░█▀▀░█▀▀░█░█░█░░░█▀█░█▀▄░░░░░█░░░█▀█░█░█░█▀█░█░█░▀█▀░▀▄░░░░░░░░
3
+ * ░░░░░░░▀▄░░█▀▄░█▀▀░█░█░█░█░█░░░█▀█░█▀▄░▀▀▀░█░░░█▀█░░█░░█░█░█░█░░█░░░▄▀░░░░░░░
4
+ * ░░░░░░░░░▀░▀░▀░▀▀▀░▀▀▀░▀▀▀░▀▀▀░▀░▀░▀░▀░░░░░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░░▀░░▀░░░░░░░░░
5
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
6
+ * ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
7
+ * ┃ * Copyright (c) 2026, the Regular Layout Authors. This file is part * ┃
8
+ * ┃ * of the Regular Layout library, distributed under the terms of the * ┃
9
+ * ┃ * [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). * ┃
10
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
11
+ */
12
+
13
+ regular-layout.hotdog {
14
+ background-color: #FF0000;
15
+ font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
16
+ padding: 24px;
17
+ }
18
+
19
+ /* Frame */
20
+ regular-layout.hotdog regular-layout-frame {
21
+ margin: 12px;
22
+ background: #FFFF00;
23
+ border-width: 2px;
24
+ border-color: #FF6B6B #8B0000 #8B0000 #FF6B6B;
25
+ border-style: solid;
26
+ }
27
+
28
+ regular-layout.hotdog regular-layout-frame::part(close) {
29
+ border-width: 1px;
30
+ border-color: #FF6B6B #8B0000 #8B0000 #FF6B6B;
31
+ border-style: solid;
32
+ height: 16px;
33
+ background: #FF0000;
34
+ align-self: center;
35
+ display: flex;
36
+ align-items: center;
37
+ padding: 0px 4px;
38
+ color: #FFFF00;
39
+ }
40
+
41
+ regular-layout.hotdog regular-layout-frame::part(close):before {
42
+ content: "X";
43
+ font-size: 10px;
44
+ font-weight: bold;
45
+ }
46
+
47
+ regular-layout.hotdog regular-layout-frame::part(titlebar) {
48
+ display: flex;
49
+ align-items: stretch;
50
+ padding-right: 0px;
51
+ }
52
+
53
+ regular-layout.hotdog regular-layout-frame::part(tab) {
54
+ display: flex;
55
+ flex: 1 1 150px;
56
+ align-items: center;
57
+ padding: 0 3px 0 8px;
58
+ cursor: pointer;
59
+ text-overflow: ellipsis;
60
+ background: #CC0000;
61
+ color: #FFFF00;
62
+ font-family: "Tahoma", "Arial", sans-serif;
63
+ font-weight: bold;
64
+ font-size: 11px;
65
+ }
66
+
67
+ regular-layout.hotdog regular-layout-frame::part(active-tab) {
68
+ background: #FF0000;
69
+ opacity: 1;
70
+ }
71
+
72
+ regular-layout.hotdog:has(.overlay)>* {
73
+ opacity: 0.8;
74
+ }
75
+
76
+ regular-layout.hotdog:has(.overlay)>.overlay {
77
+ opacity: 1;
78
+ }
79
+
80
+ /* Frame in Overlay Mode */
81
+ regular-layout.hotdog regular-layout-frame.overlay {
82
+ margin: 0;
83
+ transition:
84
+ top 0.1s ease-in-out,
85
+ height 0.1s ease-in-out,
86
+ width 0.1s ease-in-out,
87
+ left 0.1s ease-in-out;
88
+ }
package/themes/lorax.css ADDED
@@ -0,0 +1,130 @@
1
+ /* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
2
+ * ░░░░░░░░▄▀░█▀▄░█▀▀░█▀▀░█░█░█░░░█▀█░█▀▄░░░░░█░░░█▀█░█░█░█▀█░█░█░▀█▀░▀▄░░░░░░░░
3
+ * ░░░░░░░▀▄░░█▀▄░█▀▀░█░█░█░█░█░░░█▀█░█▀▄░▀▀▀░█░░░█▀█░░█░░█░█░█░█░░█░░░▄▀░░░░░░░
4
+ * ░░░░░░░░░▀░▀░▀░▀▀▀░▀▀▀░▀▀▀░▀▀▀░▀░▀░▀░▀░░░░░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░░▀░░▀░░░░░░░░░
5
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
6
+ * ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
7
+ * ┃ * Copyright (c) 2026, the Regular Layout Authors. This file is part * ┃
8
+ * ┃ * of the Regular Layout library, distributed under the terms of the * ┃
9
+ * ┃ * [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). * ┃
10
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
11
+ */
12
+
13
+ regular-layout.lorax {
14
+ font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
15
+ }
16
+
17
+ /* Frame */
18
+ regular-layout.lorax regular-layout-frame {
19
+ margin: 3px;
20
+ margin-top: 27px;
21
+ border-radius: 0 6px 6px 6px;
22
+ border: 1px solid #666;
23
+ box-shadow: 0px 6px 6px -4px rgba(150, 150, 180);
24
+ }
25
+
26
+ regular-layout.lorax regular-layout-frame::part(titlebar) {
27
+ display: flex;
28
+ align-items: stretch;
29
+ margin-left: -1px;
30
+ margin-right: -1px;
31
+ margin-bottom: 0px;
32
+ margin-top: -24px;
33
+ padding-right: 6px;
34
+ }
35
+
36
+ regular-layout.lorax regular-layout-frame::part(tab) {
37
+ display: flex;
38
+ flex: 1 1 150px;
39
+ align-items: center;
40
+ text-align: center;
41
+ font-size: 10px;
42
+ padding: 0 6px;
43
+ cursor: pointer;
44
+ max-width: 150px;
45
+ text-overflow: ellipsis;
46
+ border: 1px solid #666;
47
+ border-radius: 6px 6px 0 0;
48
+ opacity: 0.5;
49
+ }
50
+
51
+ regular-layout.lorax regular-layout-frame::part(active-tab) {
52
+ opacity: 1;
53
+ }
54
+
55
+ regular-layout.lorax regular-layout-frame::part(close) {
56
+ border-radius: 7px;
57
+ border: 1px solid #666;
58
+ background: transparent;
59
+ height: 14px;
60
+ align-self: center
61
+ }
62
+
63
+
64
+ regular-layout.lorax regular-layout-frame::part(close):hover {
65
+ transition: background-color 0.2s;
66
+ background-color: rgba(255,0,0,0.2);
67
+ }
68
+
69
+ /* Frame in Overlay Mode */
70
+ regular-layout.lorax regular-layout-frame.overlay {
71
+ background-color: rgba(0, 0, 0, 0.2);
72
+ border: 1px dashed rgb(0, 0, 0);
73
+ border-radius: 6px;
74
+ margin: 0;
75
+ box-shadow: none;
76
+ transition:
77
+ top 0.1s ease-in-out,
78
+ height 0.1s ease-in-out,
79
+ width 0.1s ease-in-out,
80
+ left 0.1s ease-in-out;
81
+ }
82
+
83
+ regular-layout.lorax regular-layout-frame::part(container), regular-layout.lorax regular-layout-frame::part(titlebar) {
84
+ display: none;
85
+ }
86
+
87
+ regular-layout.lorax regular-layout-frame:not(.overlay)::part(container), regular-layout.lorax regular-layout-frame:not(.overlay)::part(titlebar) {
88
+ display: flex;
89
+ }
90
+
91
+ /* Colors */
92
+ regular-layout.lorax :nth-child(8n+1),
93
+ regular-layout.lorax :nth-child(8n+1)::part(tab) {
94
+ background-color: #ffadadff;
95
+ }
96
+
97
+ regular-layout.lorax :nth-child(8n+2),
98
+ regular-layout.lorax :nth-child(8n+2)::part(tab) {
99
+ background-color: #ffd6a5ff;
100
+ }
101
+
102
+ regular-layout.lorax :nth-child(8n+3),
103
+ regular-layout.lorax :nth-child(8n+3)::part(tab) {
104
+ background-color: #fdffb6ff;
105
+ }
106
+
107
+ regular-layout.lorax :nth-child(8n+4),
108
+ regular-layout.lorax :nth-child(8n+4)::part(tab) {
109
+ background-color: #caffbfff;
110
+ }
111
+
112
+ regular-layout.lorax :nth-child(8n+5),
113
+ regular-layout.lorax :nth-child(8n+5)::part(tab) {
114
+ background-color: #9bf6ffff;
115
+ }
116
+
117
+ regular-layout.lorax :nth-child(8n+6),
118
+ regular-layout.lorax :nth-child(8n+6)::part(tab) {
119
+ background-color: #a0c4ffff;
120
+ }
121
+
122
+ regular-layout.lorax :nth-child(8n+7),
123
+ regular-layout.lorax :nth-child(8n+7)::part(tab) {
124
+ background-color: #bdb2ffff;
125
+ }
126
+
127
+ regular-layout.lorax :nth-child(8n+8),
128
+ regular-layout.lorax :nth-child(8n+8)::part(tab) {
129
+ background-color: #ffc6ffff;
130
+ }
package/dist/common/constants.d.ts DELETED
@@ -1,29 +0,0 @@
1
- import type { OverlayMode } from "./layout_config";
2
- /**
3
- * The minimum number of pixels the mouse must move to be considered a drag.
4
- */
5
- export declare const MIN_DRAG_DISTANCE = 10;
6
- /**
7
- * Class name to use for child elements in overlay position (dragging).
8
- */
9
- export declare const OVERLAY_CLASSNAME = "overlay";
10
- /**
11
- * The percentage of the maximum resize distance that will be clamped.
12
- *
13
- */
14
- export declare const MINIMUM_REDISTRIBUTION_SIZE_THRESHOLD = 0.15;
15
- /**
16
- * Threshold from panel edge that is considered a split vs drop action.
17
- */
18
- export declare const SPLIT_EDGE_TOLERANCE = 0.25;
19
- /**
20
- * Tolerance threshold for considering two grid track positions as identical.
21
- *
22
- * When collecting and deduplicating track positions, any positions closer than
23
- * this value are treated as the same position to avoid redundant grid tracks.
24
- */
25
- export declare const GRID_TRACK_COLLAPSE_TOLERANCE = 0.001;
26
- /**
27
- * The overlay default behavior.
28
- */
29
- export declare const OVERLAY_DEFAULT: OverlayMode;
package/dist/common/generate_overlay.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import type { LayoutPath } from "./layout_config";
2
- export declare function updateOverlaySheet(slot: string, { view_window: { row_start, row_end, col_start, col_end }, box, }: LayoutPath<DOMRect>): string;