entasis 0.9.0 → 0.9.2
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.
|
@@ -54,6 +54,21 @@ const defaultPage = cva({
|
|
|
54
54
|
right: ''
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
|
+
compoundVariants: [
|
|
58
|
+
// A floating panel column pads its page side, which already spaces the panel card from the
|
|
59
|
+
// page's header and footer cards: their own inset on that side would double the gap. A
|
|
60
|
+
// hidden panel leaves the rail (or the screen edge) beside the page, so the inset returns.
|
|
61
|
+
{
|
|
62
|
+
variant: 'floating',
|
|
63
|
+
side: 'left',
|
|
64
|
+
class: 'md:[--page-shell-chrome-left-gap:0px] md:group-data-[display-state=hidden]/sidebar-wrapper:[--page-shell-chrome-left-gap:0.5rem]'
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
variant: 'floating',
|
|
68
|
+
side: 'right',
|
|
69
|
+
class: 'md:[--page-shell-chrome-right-gap:0px] md:group-data-[display-state=hidden]/sidebar-wrapper:[--page-shell-chrome-right-gap:0.5rem]'
|
|
70
|
+
}
|
|
71
|
+
],
|
|
57
72
|
defaultVariants: {
|
|
58
73
|
variant: 'admin',
|
|
59
74
|
side: 'left'
|
|
@@ -4,7 +4,7 @@ const defaultShell = cva({
|
|
|
4
4
|
base: 'flex min-h-full w-full flex-col overflow-clip rounded-[inherit] bg-surface !bg-[var(--page-shell-surface,var(--color-surface))] text-neutral'
|
|
5
5
|
});
|
|
6
6
|
const defaultHeader = cva({
|
|
7
|
-
base: 'sticky top-[calc(var(--page-shell-edge-inset,0px)_+_var(--page-shell-chrome-block-gap,0px))] z-20
|
|
7
|
+
base: 'sticky top-[calc(var(--page-shell-edge-inset,0px)_+_var(--page-shell-chrome-block-gap,0px))] z-20 ml-[var(--page-shell-chrome-left-gap,var(--page-shell-chrome-inline-gap,0px))] mr-[var(--page-shell-chrome-right-gap,var(--page-shell-chrome-inline-gap,0px))] mt-[var(--page-shell-chrome-block-gap,0px)] mb-[var(--page-shell-chrome-block-gap,0px)] shrink-0 rounded-tl-[var(--page-shell-header-top-radius,inherit)] rounded-tr-[var(--page-shell-header-top-radius,inherit)] rounded-br-[var(--page-shell-header-bottom-radius,0px)] rounded-bl-[var(--page-shell-header-bottom-radius,0px)] border-b [border-bottom-color:var(--page-shell-chrome-divider,var(--color-neutral-muted))] bg-[var(--page-shell-chrome,var(--color-surface))] shadow-[var(--page-shell-chrome-shadow,none)] ring-1 ring-inset ring-[var(--page-shell-chrome-border,transparent)] backdrop-blur'
|
|
8
8
|
});
|
|
9
9
|
// The row wraps: the title keeps its natural width and the actions drop under it when they do not
|
|
10
10
|
// fit, instead of the title being squeezed to an ellipsis by a wide actions block.
|
|
@@ -63,7 +63,7 @@ const defaultContentInner = cva({
|
|
|
63
63
|
}
|
|
64
64
|
});
|
|
65
65
|
const defaultFooter = cva({
|
|
66
|
-
base: 'sticky bottom-[calc(var(--page-shell-edge-inset,0px)_+_var(--page-shell-chrome-block-gap,0px))] z-20
|
|
66
|
+
base: 'sticky bottom-[calc(var(--page-shell-edge-inset,0px)_+_var(--page-shell-chrome-block-gap,0px))] z-20 ml-[var(--page-shell-chrome-left-gap,var(--page-shell-chrome-inline-gap,0px))] mr-[var(--page-shell-chrome-right-gap,var(--page-shell-chrome-inline-gap,0px))] mt-[var(--page-shell-chrome-block-gap,0px)] mb-[var(--page-shell-chrome-block-gap,0px)] shrink-0 rounded-tl-[var(--page-shell-footer-top-radius,0px)] rounded-tr-[var(--page-shell-footer-top-radius,0px)] rounded-br-[var(--page-shell-footer-bottom-radius,inherit)] rounded-bl-[var(--page-shell-footer-bottom-radius,inherit)] border-t [border-top-color:var(--page-shell-chrome-divider,var(--color-neutral-muted))] bg-[var(--page-shell-chrome,var(--color-surface))] shadow-[var(--page-shell-chrome-shadow,none)] ring-1 ring-inset ring-[var(--page-shell-chrome-border,transparent)] backdrop-blur'
|
|
67
67
|
});
|
|
68
68
|
const defaultFooterInner = cva({
|
|
69
69
|
base: 'flex min-h-row-lg items-center justify-between gap-lg px-xl py-md text-sm text-neutral/70'
|
|
@@ -99,6 +99,7 @@
|
|
|
99
99
|
let panelRef: HTMLElement | null = $state(null);
|
|
100
100
|
let resizeHandleRef: HTMLElement | null = $state(null);
|
|
101
101
|
let edgeTriggerRef: HTMLButtonElement | null = $state(null);
|
|
102
|
+
let activityBarRef: HTMLElement | null = $state(null);
|
|
102
103
|
|
|
103
104
|
let focusInside = $state(false);
|
|
104
105
|
let pointerInside = $state(false);
|
|
@@ -185,6 +186,34 @@
|
|
|
185
186
|
return () => offs.forEach((off) => off());
|
|
186
187
|
});
|
|
187
188
|
|
|
189
|
+
// The activity bar is part of the sidebar: hovering it opens the collapsed panel the way the
|
|
190
|
+
// edge strip (or `expandOnHover`) does, and a peek stays open while the pointer or focus is on
|
|
191
|
+
// the rail, so switching sections from it never closes the panel it is switching. Keyboard
|
|
192
|
+
// focus only keeps a peek: tabbing through the rail does not pop the panel out.
|
|
193
|
+
$effect(() => {
|
|
194
|
+
const rail = activityBarRef;
|
|
195
|
+
if (!rail) return;
|
|
196
|
+
const isInside = (target: EventTarget | null) =>
|
|
197
|
+
target instanceof Node && [rail, ...peekRegion].some((node) => node.contains(target));
|
|
198
|
+
const offs = [
|
|
199
|
+
on(rail, 'pointerenter', () => {
|
|
200
|
+
pointerInside = true;
|
|
201
|
+
if (showEdgeTrigger && !resize.isEdgeRevealSuppressed) edgeRevealed = true;
|
|
202
|
+
if (canHoverExpand) hoverExpanded = true;
|
|
203
|
+
}),
|
|
204
|
+
on(rail, 'pointerleave', (event) => {
|
|
205
|
+
pointerInside = isInside(event.relatedTarget);
|
|
206
|
+
}),
|
|
207
|
+
on(rail, 'focusin', () => {
|
|
208
|
+
if (isPeeking) focusInside = true;
|
|
209
|
+
}),
|
|
210
|
+
on(rail, 'focusout', (event) => {
|
|
211
|
+
focusInside = isInside(event.relatedTarget);
|
|
212
|
+
})
|
|
213
|
+
];
|
|
214
|
+
return () => offs.forEach((off) => off());
|
|
215
|
+
});
|
|
216
|
+
|
|
188
217
|
// `revealSafeArea` owns edge-reveal dismissal, and its tolerance rectangle is what lets a
|
|
189
218
|
// pointer graze the panel edge without losing the reveal. It stops listening while a peek is
|
|
190
219
|
// pinned, though, so a pin that releases with the pointer already gone leaves nobody to close
|
|
@@ -284,6 +313,8 @@
|
|
|
284
313
|
<!-- Pinned outside the panel and never offset by the collapse state, so the rail stays
|
|
285
314
|
on screen while the panel slides away. -->
|
|
286
315
|
<div
|
|
316
|
+
bind:this={activityBarRef}
|
|
317
|
+
{@attach revealSafeArea.reference}
|
|
287
318
|
data-slot="sidebar-activity-bar-container"
|
|
288
319
|
data-side={side}
|
|
289
320
|
class={getSidebarActivityBarContainerClass(side, frame, variant)}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "entasis",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "vite dev",
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
"@maskito/kit": "^5.4.0",
|
|
136
136
|
"@pierre/diffs": "^1.4.2",
|
|
137
137
|
"@pierre/trees": "1.0.0-beta.6",
|
|
138
|
-
"@tanstack/highlight": "
|
|
138
|
+
"@tanstack/highlight": "1.0.0",
|
|
139
139
|
"@tanstack/svelte-virtual": "3.13.38",
|
|
140
140
|
"@tanstack/table-core": "9.2.4",
|
|
141
141
|
"cn": "0.3.0",
|
|
@@ -145,7 +145,7 @@
|
|
|
145
145
|
"lightgallery": "^2.9.0",
|
|
146
146
|
"melt": "^0.44.0",
|
|
147
147
|
"runed": "^0.37.1",
|
|
148
|
-
"svelte-streamdown": "^4.2.
|
|
148
|
+
"svelte-streamdown": "^4.2.1",
|
|
149
149
|
"svelte-themes": "^2.0.10",
|
|
150
150
|
"valibot": "^1.5.0"
|
|
151
151
|
},
|