@floegence/floe-webapp-core 0.78.1 → 0.78.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/file-browser/DirectoryTree.js +10 -10
- package/dist/components/file-browser/FileBrowserStatusBar.js +16 -16
- package/dist/components/file-browser/FileListView.js +352 -339
- package/dist/components/layout/MobileNavigationPanel.js +44 -37
- package/dist/components/layout/Sidebar.js +10 -10
- package/dist/floe.css +2 -0
- package/dist/primitives.css +12 -5
- package/dist/styles/tokens.d.ts +10 -10
- package/dist/styles/tokens.js +5 -5
- package/dist/styles.css +1 -1
- package/dist/ui.css +2 -2
- package/package.json +1 -1
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import { createComponent as
|
|
2
|
-
import { createUniqueId as
|
|
3
|
-
import { useOverlayMask as
|
|
4
|
-
import { createFloatingPresence as
|
|
5
|
-
import { cn as
|
|
6
|
-
import { deferAfterPaint as
|
|
7
|
-
import { X as
|
|
8
|
-
var
|
|
9
|
-
function
|
|
10
|
-
const
|
|
1
|
+
import { createComponent as g, use as T, setAttribute as a, insert as f, effect as S, memo as j, className as M, template as h, delegateEvents as q } from "solid-js/web";
|
|
2
|
+
import { createUniqueId as A, createEffect as _, onCleanup as E, createMemo as F, Show as B, untrack as K } from "solid-js";
|
|
3
|
+
import { useOverlayMask as O } from "../../hooks/useOverlayMask.js";
|
|
4
|
+
import { createFloatingPresence as z } from "../ui/floatingPresence.js";
|
|
5
|
+
import { cn as D } from "../../utils/cn.js";
|
|
6
|
+
import { deferAfterPaint as L } from "../../utils/defer.js";
|
|
7
|
+
import { X as R } from "../icons/index.js";
|
|
8
|
+
var U = /* @__PURE__ */ h('<header class="flex shrink-0 items-center gap-2 border-b px-4 py-2"><h2 class="min-w-0 flex-1 text-base font-semibold"></h2><button type=button data-floe-autofocus class="flex h-11 w-11 shrink-0 items-center justify-center rounded-md hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">'), W = /* @__PURE__ */ h('<div data-floe-mobile-navigation-overlay class="absolute inset-0 z-50 overflow-hidden p-2"><div class="absolute inset-0 floe-floating-presence floe-floating-backdrop floe-bottom-drawer-backdrop"data-floe-mobile-navigation-backdrop></div><div class="relative pointer-events-none flex h-full min-h-0 items-end justify-center"><div role=dialog tabindex=-1 data-floe-mobile-navigation-panel data-floe-surface=floating data-floe-surface-portal-layer=true style="max-height:min(680px, 86%);border-radius:24px"><div>'), X = /* @__PURE__ */ h("<h2 class=sr-only>");
|
|
9
|
+
function p(t) {
|
|
10
|
+
const v = `mobile-navigation-${A()}`, r = z({
|
|
11
11
|
open: () => t.open,
|
|
12
12
|
exitDurationMs: 180
|
|
13
13
|
});
|
|
14
14
|
let i, d = null;
|
|
15
|
-
const
|
|
15
|
+
const m = () => {
|
|
16
16
|
d = t.trigger ?? null, t.onOpenChange(!1);
|
|
17
17
|
};
|
|
18
|
-
|
|
18
|
+
_(() => {
|
|
19
19
|
const n = r.mounted();
|
|
20
20
|
if (t.onPresenceChange?.(n), !n && d) {
|
|
21
21
|
const l = d;
|
|
@@ -23,21 +23,28 @@ function Z(t) {
|
|
|
23
23
|
preventScroll: !0
|
|
24
24
|
});
|
|
25
25
|
}
|
|
26
|
-
}),
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
26
|
+
}), E(() => t.onPresenceChange?.(!1));
|
|
27
|
+
const I = F(() => t.open ? t.id : null);
|
|
28
|
+
_(() => {
|
|
29
|
+
const n = I();
|
|
30
|
+
if (n === null) return;
|
|
31
|
+
d = null;
|
|
32
|
+
let l = !0;
|
|
33
|
+
E(() => {
|
|
34
|
+
l = !1;
|
|
35
|
+
}), L(() => K(() => {
|
|
36
|
+
if (!l || !t.open || t.id !== n || !i?.isConnected) return;
|
|
37
|
+
const u = i.ownerDocument.activeElement;
|
|
38
|
+
u && i.contains(u) || (i.querySelector("[data-floe-autofocus]") ?? i).focus({
|
|
32
39
|
preventScroll: !0
|
|
33
40
|
});
|
|
34
|
-
}))
|
|
35
|
-
}),
|
|
41
|
+
}));
|
|
42
|
+
}), O({
|
|
36
43
|
open: r.mounted,
|
|
37
44
|
root: () => i,
|
|
38
45
|
focusRoots: () => [i, t.navigation()].filter((n) => !!n),
|
|
39
46
|
containsTarget: (n) => n instanceof Node && !!(i?.contains(n) || t.navigation()?.contains(n)),
|
|
40
|
-
onClose:
|
|
47
|
+
onClose: m,
|
|
41
48
|
lockBodyScroll: !1,
|
|
42
49
|
trapFocus: !0,
|
|
43
50
|
blockWheel: "outside",
|
|
@@ -46,36 +53,36 @@ function Z(t) {
|
|
|
46
53
|
autoFocus: !1,
|
|
47
54
|
restoreFocus: !1
|
|
48
55
|
});
|
|
49
|
-
const
|
|
50
|
-
return
|
|
56
|
+
const N = F(() => t.children);
|
|
57
|
+
return g(B, {
|
|
51
58
|
get when() {
|
|
52
59
|
return r.mounted();
|
|
53
60
|
},
|
|
54
61
|
get children() {
|
|
55
|
-
var n =
|
|
62
|
+
var n = W(), l = n.firstChild, u = l.nextSibling, o = u.firstChild, b = o.firstChild;
|
|
56
63
|
l.$$click = () => {
|
|
57
|
-
t.open &&
|
|
64
|
+
t.open && m();
|
|
58
65
|
}, o.$$keydown = (e) => t.onKeyDown?.(e);
|
|
59
|
-
var
|
|
60
|
-
return typeof
|
|
66
|
+
var x = i;
|
|
67
|
+
return typeof x == "function" ? T(x, o) : i = o, a(o, "aria-labelledby", v), f(o, g(B, {
|
|
61
68
|
get when() {
|
|
62
69
|
return t.header === void 0;
|
|
63
70
|
},
|
|
64
71
|
get fallback() {
|
|
65
72
|
return [(() => {
|
|
66
|
-
var e =
|
|
67
|
-
return a(e, "id",
|
|
68
|
-
})(),
|
|
73
|
+
var e = X();
|
|
74
|
+
return a(e, "id", v), f(e, () => t.title), e;
|
|
75
|
+
})(), j(() => t.header)];
|
|
69
76
|
},
|
|
70
77
|
get children() {
|
|
71
|
-
var e =
|
|
72
|
-
return a(s, "id",
|
|
78
|
+
var e = U(), s = e.firstChild, c = s.nextSibling;
|
|
79
|
+
return a(s, "id", v), f(s, () => t.title), c.$$click = m, f(c, g(R, {
|
|
73
80
|
class: "h-5 w-5"
|
|
74
81
|
})), S(() => a(c, "aria-label", t.closeLabel ?? "Close")), e;
|
|
75
82
|
}
|
|
76
|
-
}),
|
|
77
|
-
var s = r.state(), c = r.state(),
|
|
78
|
-
return s !== e.e && a(n, "data-floating-presence", e.e = s), c !== e.t && a(l, "data-floating-presence", e.t = c),
|
|
83
|
+
}), b), f(b, N), S((e) => {
|
|
84
|
+
var s = r.state(), c = r.state(), y = t.id, w = r.state(), k = r.exiting(), C = r.exiting() ? "true" : void 0, $ = D("pointer-events-auto relative flex min-h-0 w-full max-w-[640px] flex-col border border-border bg-card text-card-foreground shadow-xl floe-floating-presence floe-bottom-drawer-panel", t.class), P = D("flex min-h-0 flex-col overflow-auto overscroll-contain", t.contentClass);
|
|
85
|
+
return s !== e.e && a(n, "data-floating-presence", e.e = s), c !== e.t && a(l, "data-floating-presence", e.t = c), y !== e.a && a(o, "id", e.a = y), w !== e.o && a(o, "data-floating-presence", e.o = w), k !== e.i && (o.inert = e.i = k), C !== e.n && a(o, "aria-hidden", e.n = C), $ !== e.s && M(o, e.s = $), P !== e.h && M(b, e.h = P), e;
|
|
79
86
|
}, {
|
|
80
87
|
e: void 0,
|
|
81
88
|
t: void 0,
|
|
@@ -89,7 +96,7 @@ function Z(t) {
|
|
|
89
96
|
}
|
|
90
97
|
});
|
|
91
98
|
}
|
|
92
|
-
|
|
99
|
+
q(["click", "keydown"]);
|
|
93
100
|
export {
|
|
94
|
-
|
|
101
|
+
p as MobileNavigationPanel
|
|
95
102
|
};
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { insert as l, effect as s, setAttribute as f, className as c, setStyleProperty as u, memo as w, template as
|
|
1
|
+
import { insert as l, effect as s, setAttribute as f, className as c, setStyleProperty as u, memo as w, template as d, delegateEvents as S } from "solid-js/web";
|
|
2
2
|
import "solid-js";
|
|
3
3
|
import { cn as v } from "../../utils/cn.js";
|
|
4
|
-
var k = /* @__PURE__ */
|
|
4
|
+
var k = /* @__PURE__ */ d('<aside data-floe-shell-slot=sidebar data-floe-geometry-surface=shell-sidebar><div class="flex-1 overflow-auto overscroll-contain">'), _ = /* @__PURE__ */ d("<div>"), C = /* @__PURE__ */ d("<section><div class=flex-1>"), I = /* @__PURE__ */ d('<div class="flex items-center justify-between px-2.5 py-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60"><span>'), L = /* @__PURE__ */ d('<button type=button><span class="flex-1 truncate text-left">'), M = /* @__PURE__ */ d('<span class="flex-shrink-0 w-4 h-4 opacity-60">');
|
|
5
5
|
function E(e) {
|
|
6
6
|
const t = () => e.collapsed ?? !1, a = () => e.width ?? 350, n = () => e.visibilityMotion ?? "animated";
|
|
7
7
|
return (() => {
|
|
8
|
-
var i = k(),
|
|
9
|
-
return l(
|
|
10
|
-
var b = n(),
|
|
11
|
-
return b !== r.e && f(i, "data-floe-sidebar-visibility-motion", r.e = b),
|
|
8
|
+
var i = k(), o = i.firstChild;
|
|
9
|
+
return l(o, () => e.children), l(i, () => e.resizer, null), s((r) => {
|
|
10
|
+
var b = n(), h = v("relative h-full flex flex-col shrink-0 min-h-0", "bg-sidebar text-sidebar-foreground", "border-r border-sidebar-border", "overflow-hidden", n() === "animated" && "transition-[width] duration-150 ease-out", e.class), m = t() ? "0px" : `${a()}px`, x = t() ? "hidden" : "visible", g = t() ? "0px" : void 0, y = e.ariaLabel, $ = t() ? "true" : void 0;
|
|
11
|
+
return b !== r.e && f(i, "data-floe-sidebar-visibility-motion", r.e = b), h !== r.t && c(i, r.t = h), m !== r.a && u(i, "width", r.a = m), x !== r.o && u(i, "visibility", r.o = x), g !== r.i && u(i, "border-right-width", r.i = g), y !== r.n && f(i, "aria-label", r.n = y), $ !== r.s && f(i, "aria-hidden", r.s = $), r;
|
|
12
12
|
}, {
|
|
13
13
|
e: void 0,
|
|
14
14
|
t: void 0,
|
|
@@ -38,8 +38,8 @@ function q(e) {
|
|
|
38
38
|
return l(t, (() => {
|
|
39
39
|
var n = w(() => !!e.title);
|
|
40
40
|
return () => n() && (() => {
|
|
41
|
-
var i = I(),
|
|
42
|
-
return l(
|
|
41
|
+
var i = I(), o = i.firstChild;
|
|
42
|
+
return l(o, () => e.title), l(i, () => e.actions, null), i;
|
|
43
43
|
})();
|
|
44
44
|
})(), a), l(a, () => e.children), s(() => c(t, v("flex flex-col", e.class))), t;
|
|
45
45
|
})();
|
|
@@ -54,8 +54,8 @@ function B(e) {
|
|
|
54
54
|
return l(i, () => e.icon), i;
|
|
55
55
|
})();
|
|
56
56
|
})(), a), l(a, () => e.children), s((n) => {
|
|
57
|
-
var i = v("w-full flex items-center gap-2 px-2.5 py-1
|
|
58
|
-
return i !== n.e && c(t, n.e = i),
|
|
57
|
+
var i = v("w-full min-h-[var(--floe-row-height)] flex items-center gap-2 px-2.5 py-1 text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)] cursor-pointer", "transition-colors duration-75", "hover:bg-sidebar-accent/80 hover:text-sidebar-accent-foreground", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-sidebar-ring", e.active && "bg-sidebar-accent text-sidebar-accent-foreground font-medium", e.class), o = e.indent ? `${10 + e.indent * 10}px` : void 0;
|
|
58
|
+
return i !== n.e && c(t, n.e = i), o !== n.t && u(t, "padding-left", n.t = o), n;
|
|
59
59
|
}, {
|
|
60
60
|
e: void 0,
|
|
61
61
|
t: void 0
|
package/dist/floe.css
CHANGED
package/dist/primitives.css
CHANGED
|
@@ -5,14 +5,14 @@
|
|
|
5
5
|
--font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace;
|
|
6
6
|
--floe-type-caption: 0.6875rem;
|
|
7
7
|
--floe-type-supporting: 0.75rem;
|
|
8
|
-
--floe-type-control: 0.
|
|
9
|
-
--floe-type-body: 0.
|
|
8
|
+
--floe-type-control: 0.75rem;
|
|
9
|
+
--floe-type-body: 0.8125rem;
|
|
10
10
|
--floe-type-heading: 1rem;
|
|
11
|
-
--floe-line-control: 1.
|
|
12
|
-
--floe-line-body: 1.
|
|
11
|
+
--floe-line-control: 1.125rem;
|
|
12
|
+
--floe-line-body: 1.25rem;
|
|
13
13
|
--floe-control-height-sm: 1.75rem;
|
|
14
14
|
--floe-control-height-md: 2rem;
|
|
15
|
-
--floe-row-height:
|
|
15
|
+
--floe-row-height: 1.75rem;
|
|
16
16
|
--floe-space-1: 0.25rem;
|
|
17
17
|
--floe-space-2: 0.5rem;
|
|
18
18
|
--floe-space-3: 0.75rem;
|
|
@@ -25,6 +25,13 @@
|
|
|
25
25
|
|
|
26
26
|
/* Compact visual controls retain usable, non-overlapping touch geometry. */
|
|
27
27
|
@media (pointer: coarse) {
|
|
28
|
+
body {
|
|
29
|
+
--floe-type-control: 0.8125rem;
|
|
30
|
+
--floe-type-body: 0.875rem;
|
|
31
|
+
--floe-line-control: 1.25rem;
|
|
32
|
+
--floe-line-body: 1.375rem;
|
|
33
|
+
--floe-row-height: 2.75rem;
|
|
34
|
+
}
|
|
28
35
|
[data-floe-control='button'],
|
|
29
36
|
[data-floe-control='input'],
|
|
30
37
|
[data-floe-control='compound-input'],
|
package/dist/styles/tokens.d.ts
CHANGED
|
@@ -49,14 +49,14 @@ export declare const floeSharedCssVariables: {
|
|
|
49
49
|
readonly '--font-mono': "'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace";
|
|
50
50
|
readonly '--floe-type-caption': "0.6875rem";
|
|
51
51
|
readonly '--floe-type-supporting': "0.75rem";
|
|
52
|
-
readonly '--floe-type-control': "0.
|
|
53
|
-
readonly '--floe-type-body': "0.
|
|
52
|
+
readonly '--floe-type-control': "0.75rem";
|
|
53
|
+
readonly '--floe-type-body': "0.8125rem";
|
|
54
54
|
readonly '--floe-type-heading': "1rem";
|
|
55
|
-
readonly '--floe-line-control': "1.
|
|
56
|
-
readonly '--floe-line-body': "1.
|
|
55
|
+
readonly '--floe-line-control': "1.125rem";
|
|
56
|
+
readonly '--floe-line-body': "1.25rem";
|
|
57
57
|
readonly '--floe-control-height-sm': "1.75rem";
|
|
58
58
|
readonly '--floe-control-height-md': "2rem";
|
|
59
|
-
readonly '--floe-row-height': "
|
|
59
|
+
readonly '--floe-row-height': "1.75rem";
|
|
60
60
|
readonly '--floe-space-1': "0.25rem";
|
|
61
61
|
readonly '--floe-space-2': "0.5rem";
|
|
62
62
|
readonly '--floe-space-3': "0.75rem";
|
|
@@ -1265,14 +1265,14 @@ export declare const floeDesignTokens: {
|
|
|
1265
1265
|
readonly '--font-mono': "'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace";
|
|
1266
1266
|
readonly '--floe-type-caption': "0.6875rem";
|
|
1267
1267
|
readonly '--floe-type-supporting': "0.75rem";
|
|
1268
|
-
readonly '--floe-type-control': "0.
|
|
1269
|
-
readonly '--floe-type-body': "0.
|
|
1268
|
+
readonly '--floe-type-control': "0.75rem";
|
|
1269
|
+
readonly '--floe-type-body': "0.8125rem";
|
|
1270
1270
|
readonly '--floe-type-heading': "1rem";
|
|
1271
|
-
readonly '--floe-line-control': "1.
|
|
1272
|
-
readonly '--floe-line-body': "1.
|
|
1271
|
+
readonly '--floe-line-control': "1.125rem";
|
|
1272
|
+
readonly '--floe-line-body': "1.25rem";
|
|
1273
1273
|
readonly '--floe-control-height-sm': "1.75rem";
|
|
1274
1274
|
readonly '--floe-control-height-md': "2rem";
|
|
1275
|
-
readonly '--floe-row-height': "
|
|
1275
|
+
readonly '--floe-row-height': "1.75rem";
|
|
1276
1276
|
readonly '--floe-space-1': "0.25rem";
|
|
1277
1277
|
readonly '--floe-space-2': "0.5rem";
|
|
1278
1278
|
readonly '--floe-space-3': "0.75rem";
|
package/dist/styles/tokens.js
CHANGED
|
@@ -5,14 +5,14 @@ const i = {
|
|
|
5
5
|
"--font-mono": "'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace",
|
|
6
6
|
"--floe-type-caption": "0.6875rem",
|
|
7
7
|
"--floe-type-supporting": "0.75rem",
|
|
8
|
-
"--floe-type-control": "0.
|
|
9
|
-
"--floe-type-body": "0.
|
|
8
|
+
"--floe-type-control": "0.75rem",
|
|
9
|
+
"--floe-type-body": "0.8125rem",
|
|
10
10
|
"--floe-type-heading": "1rem",
|
|
11
|
-
"--floe-line-control": "1.
|
|
12
|
-
"--floe-line-body": "1.
|
|
11
|
+
"--floe-line-control": "1.125rem",
|
|
12
|
+
"--floe-line-body": "1.25rem",
|
|
13
13
|
"--floe-control-height-sm": "1.75rem",
|
|
14
14
|
"--floe-control-height-md": "2rem",
|
|
15
|
-
"--floe-row-height": "
|
|
15
|
+
"--floe-row-height": "1.75rem",
|
|
16
16
|
"--floe-space-1": "0.25rem",
|
|
17
17
|
"--floe-space-2": "0.5rem",
|
|
18
18
|
"--floe-space-3": "0.75rem",
|