@floegence/floe-webapp-core 0.35.13 → 0.35.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/deck/WidgetResizeHandle.js +34 -33
- package/dist/components/file-browser/FileBrowser.js +77 -70
- package/dist/components/file-browser/FileBrowserContext.js +141 -140
- package/dist/components/file-browser/types.d.ts +1 -0
- package/dist/components/layout/ActivityBar.js +21 -21
- package/dist/components/layout/MobileTabBar.js +12 -12
- package/dist/components/layout/ResizeHandle.d.ts +2 -0
- package/dist/components/layout/ResizeHandle.js +38 -37
- package/dist/components/layout/Shell.js +164 -140
- package/dist/components/layout/Sidebar.js +8 -8
- package/dist/components/layout/SidebarPane.d.ts +2 -0
- package/dist/components/layout/SidebarPane.js +22 -16
- package/dist/components/ui/CommandPalette.js +47 -46
- package/dist/components/ui/FloatingWindow.d.ts +5 -1
- package/dist/components/ui/FloatingWindow.js +267 -194
- package/dist/components/ui/floatingWindowGeometry.d.ts +41 -0
- package/dist/components/ui/floatingWindowGeometry.js +65 -0
- package/dist/context/FileBrowserDragContext.js +45 -43
- package/dist/context/LayoutContext.d.ts +1 -0
- package/dist/context/LayoutContext.js +20 -19
- package/dist/floe.css +12 -0
- package/dist/hooks/useDeckDrag.js +39 -35
- package/dist/hooks/useFileBrowserDrag.js +74 -81
- package/dist/styles.css +1 -1
- package/dist/utils/hotInteraction.d.ts +9 -0
- package/dist/utils/hotInteraction.js +34 -0
- package/package.json +10 -10
- package/LICENSE +0 -21
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { effect as
|
|
1
|
+
import { effect as L, className as B, setAttribute as U, template as _, use as N, delegateEvents as O } from "solid-js/web";
|
|
2
2
|
import { createSignal as j, onCleanup as J } from "solid-js";
|
|
3
3
|
import { cn as K } from "../../utils/cn.js";
|
|
4
4
|
import { useDeck as Q } from "../../context/DeckContext.js";
|
|
5
5
|
import { applyResizeDelta as V } from "../../utils/gridLayout.js";
|
|
6
6
|
import { getGridConfigFromElement as Z } from "./DeckGrid.js";
|
|
7
|
-
import {
|
|
8
|
-
var te = /* @__PURE__ */
|
|
7
|
+
import { startHotInteraction as ee } from "../../utils/hotInteraction.js";
|
|
8
|
+
var te = /* @__PURE__ */ _("<div style=touch-action:none>");
|
|
9
9
|
const ne = {
|
|
10
10
|
n: "top-0 left-2 right-2 h-2 cursor-ns-resize",
|
|
11
11
|
s: "bottom-0 left-2 right-2 h-2 cursor-ns-resize",
|
|
@@ -28,81 +28,82 @@ const ne = {
|
|
|
28
28
|
function ue(i) {
|
|
29
29
|
const f = Q(), [m, C] = j(!1);
|
|
30
30
|
let g, h = null, d = 0, u = 0, y = 0, p = 0, s = 0, R = 0, b = 0, S = 0, l = null, w = null, r = null, A = null, P = 0, F = 0;
|
|
31
|
-
const
|
|
31
|
+
const I = (e) => {
|
|
32
32
|
if (!e) {
|
|
33
33
|
w?.(), w = null;
|
|
34
34
|
return;
|
|
35
35
|
}
|
|
36
36
|
w?.(), w = ee({
|
|
37
|
+
kind: "resize",
|
|
37
38
|
cursor: re[i.edge],
|
|
38
|
-
|
|
39
|
+
lockUserSelect: !0
|
|
39
40
|
});
|
|
40
|
-
},
|
|
41
|
-
m() && (l !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(l), l = null), C(!1), h = null, r = null, A = null,
|
|
42
|
-
},
|
|
41
|
+
}, E = () => {
|
|
42
|
+
m() && (l !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(l), l = null), C(!1), h = null, r = null, A = null, I(!1), f.endResize(!0));
|
|
43
|
+
}, H = () => {
|
|
43
44
|
if (!r) return;
|
|
44
|
-
const e = A ?? r.getBoundingClientRect(), t = 48, n = 24, o = s - e.top,
|
|
45
|
-
let
|
|
46
|
-
if (o < t ?
|
|
47
|
-
const z = r.scrollTop, v = Math.max(0, Math.min(z +
|
|
45
|
+
const e = A ?? r.getBoundingClientRect(), t = 48, n = 24, o = s - e.top, a = e.bottom - s;
|
|
46
|
+
let c = 0;
|
|
47
|
+
if (o < t ? c = -Math.ceil((t - o) / t * n) : a < t && (c = Math.ceil((t - a) / t * n)), c === 0) return;
|
|
48
|
+
const z = r.scrollTop, v = Math.max(0, Math.min(z + c, r.scrollHeight - r.clientHeight));
|
|
48
49
|
v !== z && (r.scrollTop = v);
|
|
49
|
-
},
|
|
50
|
+
}, Y = () => {
|
|
50
51
|
if (l !== null || typeof requestAnimationFrame > "u") return;
|
|
51
52
|
const e = () => {
|
|
52
53
|
if (!m()) {
|
|
53
54
|
l = null;
|
|
54
55
|
return;
|
|
55
56
|
}
|
|
56
|
-
|
|
57
|
+
D(), l = requestAnimationFrame(e);
|
|
57
58
|
};
|
|
58
59
|
l = requestAnimationFrame(e);
|
|
59
|
-
},
|
|
60
|
+
}, $ = (e) => {
|
|
60
61
|
if (e.pointerType === "mouse" && e.button !== 0) return;
|
|
61
62
|
e.preventDefault(), e.stopPropagation();
|
|
62
63
|
const t = e.currentTarget?.closest(".deck-grid");
|
|
63
64
|
if (!t) return;
|
|
64
|
-
h = e.pointerId, d = e.clientX, u = e.clientY, p = d, s = u, R = d, b = u, C(!0),
|
|
65
|
+
h = e.pointerId, d = e.clientX, u = e.clientY, p = d, s = u, R = d, b = u, C(!0), I(!0), r = t, A = t.getBoundingClientRect(), y = t.scrollTop, S = y;
|
|
65
66
|
const n = window.getComputedStyle(t);
|
|
66
|
-
P = parseFloat(n.paddingLeft) || 0, F = parseFloat(n.paddingRight) || 0, f.startResize(i.widget.id, i.edge, d, u), g?.setPointerCapture(e.pointerId),
|
|
67
|
-
},
|
|
68
|
-
!m() || h !== e.pointerId || (p = e.clientX, s = e.clientY, typeof requestAnimationFrame > "u" &&
|
|
69
|
-
},
|
|
67
|
+
P = parseFloat(n.paddingLeft) || 0, F = parseFloat(n.paddingRight) || 0, f.startResize(i.widget.id, i.edge, d, u), g?.setPointerCapture(e.pointerId), Y();
|
|
68
|
+
}, G = (e) => {
|
|
69
|
+
!m() || h !== e.pointerId || (p = e.clientX, s = e.clientY, typeof requestAnimationFrame > "u" && D());
|
|
70
|
+
}, D = () => {
|
|
70
71
|
if (!r) return;
|
|
71
|
-
|
|
72
|
+
H();
|
|
72
73
|
const e = r.scrollTop;
|
|
73
74
|
if (p === R && s === b && e === S) return;
|
|
74
75
|
R = p, b = s, S = e;
|
|
75
76
|
const t = p - d, n = s - u + (e - y), {
|
|
76
77
|
cols: o,
|
|
77
|
-
rowHeight:
|
|
78
|
-
gap:
|
|
79
|
-
} = Z(r), z = r.clientWidth - P - F, v =
|
|
78
|
+
rowHeight: a,
|
|
79
|
+
gap: c
|
|
80
|
+
} = Z(r), z = r.clientWidth - P - F, v = c * (o - 1), T = (z - v) / o;
|
|
80
81
|
if (!Number.isFinite(T) || T <= 0) return;
|
|
81
|
-
const
|
|
82
|
-
f.updateResize(
|
|
82
|
+
const W = a + c, X = Math.round(t / T), q = Math.round(n / W), k = f.getWidgetMinConstraints(i.widget.type), x = V(i.widget.position, i.edge, X, q, k.minColSpan, k.minRowSpan, o);
|
|
83
|
+
f.updateResize(x);
|
|
83
84
|
}, M = (e) => {
|
|
84
85
|
if (h === e.pointerId) {
|
|
85
86
|
try {
|
|
86
87
|
g?.releasePointerCapture(e.pointerId);
|
|
87
88
|
} catch {
|
|
88
89
|
}
|
|
89
|
-
|
|
90
|
+
E();
|
|
90
91
|
}
|
|
91
92
|
};
|
|
92
|
-
return J(() =>
|
|
93
|
+
return J(() => E()), (() => {
|
|
93
94
|
var e = te();
|
|
94
|
-
e.addEventListener("pointercancel", M), e.$$pointerup = M, e.$$pointermove =
|
|
95
|
+
e.addEventListener("pointercancel", M), e.$$pointerup = M, e.$$pointermove = G, e.$$pointerdown = $;
|
|
95
96
|
var t = g;
|
|
96
|
-
return typeof t == "function" ?
|
|
97
|
-
var o = K("absolute z-30", ne[i.edge], "hover:bg-primary/30 transition-colors", m() && "bg-primary/50"),
|
|
98
|
-
return o !== n.e &&
|
|
97
|
+
return typeof t == "function" ? N(t, e) : g = e, L((n) => {
|
|
98
|
+
var o = K("absolute z-30", ne[i.edge], "hover:bg-primary/30 transition-colors", m() && "bg-primary/50"), a = i.edge;
|
|
99
|
+
return o !== n.e && B(e, n.e = o), a !== n.t && U(e, "data-widget-resize-handle", n.t = a), n;
|
|
99
100
|
}, {
|
|
100
101
|
e: void 0,
|
|
101
102
|
t: void 0
|
|
102
103
|
}), e;
|
|
103
104
|
})();
|
|
104
105
|
}
|
|
105
|
-
|
|
106
|
+
O(["pointerdown", "pointermove", "pointerup"]);
|
|
106
107
|
export {
|
|
107
108
|
ue as WidgetResizeHandle
|
|
108
109
|
};
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import { createComponent as n, insert as i, use as
|
|
2
|
-
import { onMount as
|
|
3
|
-
import { cn as
|
|
4
|
-
import { useLayout as
|
|
5
|
-
import { useFileBrowserDrag as
|
|
6
|
-
import { deferAfterPaint as
|
|
7
|
-
import { FileBrowserProvider as
|
|
8
|
-
import { SidebarPane as
|
|
9
|
-
import { DirectoryTree as
|
|
10
|
-
import { FileListView as
|
|
11
|
-
import { FileGridView as
|
|
12
|
-
import { FileBrowserToolbar as
|
|
13
|
-
import { FileContextMenu as
|
|
14
|
-
import { DragPreview as
|
|
15
|
-
var
|
|
16
|
-
function
|
|
17
|
-
return n(
|
|
1
|
+
import { createComponent as n, insert as i, use as k, memo as E, effect as K, className as L, template as I, delegateEvents as B } from "solid-js/web";
|
|
2
|
+
import { createSignal as O, onMount as V, onCleanup as H, createEffect as N, Show as c } from "solid-js";
|
|
3
|
+
import { cn as T } from "../../utils/cn.js";
|
|
4
|
+
import { useLayout as j } from "../../context/LayoutContext.js";
|
|
5
|
+
import { useFileBrowserDrag as G } from "../../context/FileBrowserDragContext.js";
|
|
6
|
+
import { deferAfterPaint as Q } from "../../utils/defer.js";
|
|
7
|
+
import { FileBrowserProvider as q, useFileBrowser as J } from "./FileBrowserContext.js";
|
|
8
|
+
import { SidebarPane as U } from "../layout/SidebarPane.js";
|
|
9
|
+
import { DirectoryTree as X } from "./DirectoryTree.js";
|
|
10
|
+
import { FileListView as Y } from "./FileListView.js";
|
|
11
|
+
import { FileGridView as Z } from "./FileGridView.js";
|
|
12
|
+
import { FileBrowserToolbar as p } from "./FileBrowserToolbar.js";
|
|
13
|
+
import { FileContextMenu as ee } from "./FileContextMenu.js";
|
|
14
|
+
import { DragPreview as te } from "./DragPreview.js";
|
|
15
|
+
var re = /* @__PURE__ */ I('<div class="border-b border-border">'), ne = /* @__PURE__ */ I('<div><div class="flex flex-1 min-h-0 relative"><div class="flex-1 min-w-0 flex flex-col"><div class="flex-1 min-h-0"></div><div class="flex items-center justify-between px-3 py-1 border-t border-border text-[10px] text-muted-foreground"><span> items</span><span class="truncate max-w-[200px]">');
|
|
16
|
+
function we(e) {
|
|
17
|
+
return n(q, {
|
|
18
18
|
get files() {
|
|
19
19
|
return e.files;
|
|
20
20
|
},
|
|
@@ -55,7 +55,7 @@ function be(e) {
|
|
|
55
55
|
return e.onOpen;
|
|
56
56
|
},
|
|
57
57
|
get children() {
|
|
58
|
-
return n(
|
|
58
|
+
return n(ie, {
|
|
59
59
|
get class() {
|
|
60
60
|
return e.class;
|
|
61
61
|
},
|
|
@@ -99,73 +99,80 @@ function be(e) {
|
|
|
99
99
|
}
|
|
100
100
|
});
|
|
101
101
|
}
|
|
102
|
-
function
|
|
103
|
-
const
|
|
104
|
-
let
|
|
105
|
-
|
|
102
|
+
function ie(e) {
|
|
103
|
+
const r = J(), M = j(), o = G(), h = () => M.isMobile(), [v, b] = O(null), D = () => v() ?? r.sidebarWidth(), y = () => e.sidebarResizable ?? !0, a = () => (e.enableDragDrop ?? !0) && !!o, d = () => e.instanceId ?? `filebrowser-${Math.random().toString(36).slice(2, 9)}`;
|
|
104
|
+
let C, w = null, x = null;
|
|
105
|
+
V(() => {
|
|
106
106
|
if (!o || !a()) return;
|
|
107
|
-
const
|
|
107
|
+
const t = {
|
|
108
108
|
instanceId: d(),
|
|
109
|
-
currentPath:
|
|
110
|
-
files:
|
|
109
|
+
currentPath: r.currentPath,
|
|
110
|
+
files: r.files,
|
|
111
111
|
onDragMove: e.onDragMove,
|
|
112
|
-
getScrollContainer: () =>
|
|
112
|
+
getScrollContainer: () => w,
|
|
113
113
|
getSidebarScrollContainer: () => x,
|
|
114
|
-
optimisticRemove:
|
|
115
|
-
optimisticInsert:
|
|
114
|
+
optimisticRemove: r.optimisticRemove,
|
|
115
|
+
optimisticInsert: r.optimisticInsert
|
|
116
116
|
};
|
|
117
|
-
o.registerInstance(
|
|
118
|
-
}),
|
|
117
|
+
o.registerInstance(t);
|
|
118
|
+
}), H(() => {
|
|
119
119
|
o && a() && o.unregisterInstance(d());
|
|
120
120
|
});
|
|
121
|
-
let
|
|
122
|
-
|
|
123
|
-
const
|
|
124
|
-
if (!
|
|
125
|
-
|
|
121
|
+
let S = !1, m = !1;
|
|
122
|
+
N(() => {
|
|
123
|
+
const t = h();
|
|
124
|
+
if (!S) {
|
|
125
|
+
S = !0, m = t, t && e.hideSidebarOnMobile !== !1 && !r.sidebarCollapsed() && r.toggleSidebar();
|
|
126
126
|
return;
|
|
127
127
|
}
|
|
128
|
-
!
|
|
128
|
+
!m && t && e.hideSidebarOnMobile !== !1 && !r.sidebarCollapsed() && r.toggleSidebar(), m = t;
|
|
129
129
|
});
|
|
130
|
-
const
|
|
131
|
-
(
|
|
132
|
-
},
|
|
130
|
+
const R = (t) => {
|
|
131
|
+
(t.metaKey || t.ctrlKey) && t.key.toLowerCase() === "f" && (t.preventDefault(), r.setFilterActive(!0), Q(() => C?.focus()));
|
|
132
|
+
}, P = () => !r.sidebarCollapsed() || !h(), $ = () => {
|
|
133
|
+
b(r.sidebarWidth());
|
|
134
|
+
}, W = (t) => {
|
|
135
|
+
b((s) => r.clampSidebarWidth((s ?? r.sidebarWidth()) + t));
|
|
136
|
+
}, z = () => {
|
|
137
|
+
const t = v();
|
|
138
|
+
t !== null && (r.setSidebarWidth(t), b(null));
|
|
139
|
+
};
|
|
133
140
|
return (() => {
|
|
134
|
-
var
|
|
135
|
-
return
|
|
141
|
+
var t = ne(), s = t.firstChild, f = s.firstChild, g = f.firstChild, A = g.nextSibling, u = A.firstChild, F = u.firstChild, _ = u.nextSibling;
|
|
142
|
+
return t.$$keydown = R, i(t, n(c, {
|
|
136
143
|
get when() {
|
|
137
144
|
return e.header;
|
|
138
145
|
},
|
|
139
146
|
get children() {
|
|
140
|
-
var l =
|
|
147
|
+
var l = re();
|
|
141
148
|
return i(l, () => e.header), l;
|
|
142
149
|
}
|
|
143
|
-
}),
|
|
150
|
+
}), s), i(s, n(U, {
|
|
144
151
|
title: "Explorer",
|
|
145
152
|
get width() {
|
|
146
|
-
return
|
|
153
|
+
return D();
|
|
147
154
|
},
|
|
148
155
|
get open() {
|
|
149
|
-
return
|
|
156
|
+
return P();
|
|
150
157
|
},
|
|
151
158
|
get headerActions() {
|
|
152
159
|
return e.sidebarHeaderActions;
|
|
153
160
|
},
|
|
154
161
|
get resizable() {
|
|
155
|
-
return
|
|
156
|
-
},
|
|
157
|
-
onResize: (l) => {
|
|
158
|
-
t.setSidebarWidth(t.sidebarWidth() + l);
|
|
162
|
+
return y();
|
|
159
163
|
},
|
|
164
|
+
onResize: W,
|
|
160
165
|
get onClose() {
|
|
161
|
-
return
|
|
166
|
+
return r.toggleSidebar;
|
|
162
167
|
},
|
|
168
|
+
onResizeStart: $,
|
|
169
|
+
onResizeEnd: z,
|
|
163
170
|
bodyRef: (l) => {
|
|
164
171
|
x = l;
|
|
165
172
|
},
|
|
166
173
|
bodyClass: "py-1",
|
|
167
174
|
get children() {
|
|
168
|
-
return n(
|
|
175
|
+
return n(X, {
|
|
169
176
|
get instanceId() {
|
|
170
177
|
return d();
|
|
171
178
|
},
|
|
@@ -174,19 +181,19 @@ function Z(e) {
|
|
|
174
181
|
}
|
|
175
182
|
});
|
|
176
183
|
}
|
|
177
|
-
}),
|
|
178
|
-
filterInputRef: (l) =>
|
|
184
|
+
}), f), i(f, n(p, {
|
|
185
|
+
filterInputRef: (l) => C = l,
|
|
179
186
|
get endActions() {
|
|
180
187
|
return e.toolbarEndActions;
|
|
181
188
|
}
|
|
182
|
-
}),
|
|
183
|
-
|
|
184
|
-
},
|
|
189
|
+
}), g), k((l) => {
|
|
190
|
+
w = l;
|
|
191
|
+
}, g), i(g, n(c, {
|
|
185
192
|
get when() {
|
|
186
|
-
return
|
|
193
|
+
return r.viewMode() === "list";
|
|
187
194
|
},
|
|
188
195
|
get fallback() {
|
|
189
|
-
return n(
|
|
196
|
+
return n(Z, {
|
|
190
197
|
get instanceId() {
|
|
191
198
|
return d();
|
|
192
199
|
},
|
|
@@ -196,7 +203,7 @@ function Z(e) {
|
|
|
196
203
|
});
|
|
197
204
|
},
|
|
198
205
|
get children() {
|
|
199
|
-
return n(
|
|
206
|
+
return n(Y, {
|
|
200
207
|
get instanceId() {
|
|
201
208
|
return d();
|
|
202
209
|
},
|
|
@@ -205,21 +212,21 @@ function Z(e) {
|
|
|
205
212
|
}
|
|
206
213
|
});
|
|
207
214
|
}
|
|
208
|
-
})), i(
|
|
215
|
+
})), i(u, () => r.currentFiles().length, F), i(u, n(c, {
|
|
209
216
|
get when() {
|
|
210
|
-
return
|
|
217
|
+
return r.filterQueryApplied().trim();
|
|
211
218
|
},
|
|
212
219
|
get children() {
|
|
213
220
|
return [" ", "(filtered)"];
|
|
214
221
|
}
|
|
215
|
-
}), null), i(
|
|
222
|
+
}), null), i(u, n(c, {
|
|
216
223
|
get when() {
|
|
217
|
-
return
|
|
224
|
+
return r.selectedItems().size > 0;
|
|
218
225
|
},
|
|
219
226
|
get children() {
|
|
220
|
-
return [" · ",
|
|
227
|
+
return [" · ", E(() => r.selectedItems().size), " selected"];
|
|
221
228
|
}
|
|
222
|
-
}), null), i(
|
|
229
|
+
}), null), i(_, () => r.currentPath()), i(t, n(ee, {
|
|
223
230
|
get callbacks() {
|
|
224
231
|
return e.contextMenuCallbacks;
|
|
225
232
|
},
|
|
@@ -232,17 +239,17 @@ function Z(e) {
|
|
|
232
239
|
get hideItems() {
|
|
233
240
|
return e.hideContextMenuItems;
|
|
234
241
|
}
|
|
235
|
-
}), null), i(
|
|
242
|
+
}), null), i(t, n(c, {
|
|
236
243
|
get when() {
|
|
237
244
|
return a();
|
|
238
245
|
},
|
|
239
246
|
get children() {
|
|
240
|
-
return n(
|
|
247
|
+
return n(te, {});
|
|
241
248
|
}
|
|
242
|
-
}), null),
|
|
249
|
+
}), null), K(() => L(t, T("flex flex-col h-full min-h-0 bg-background", "border border-border rounded-lg overflow-hidden", "shadow-sm", e.class))), t;
|
|
243
250
|
})();
|
|
244
251
|
}
|
|
245
|
-
|
|
252
|
+
B(["keydown"]);
|
|
246
253
|
export {
|
|
247
|
-
|
|
254
|
+
we as FileBrowser
|
|
248
255
|
};
|