@fiestaboard/ui 5.0.1 → 5.1.0
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/chrome/sidebar.d.ts +8 -1
- package/dist/components/chrome/sidebar.js +106 -102
- package/dist/components/chrome/sidebar.js.map +1 -1
- package/dist/components/data/stat-strip.d.ts +86 -0
- package/dist/components/data/stat-strip.js +36 -0
- package/dist/components/data/stat-strip.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +34 -33
- package/dist/theme.css +55 -10
- package/package.json +1 -1
|
@@ -55,7 +55,14 @@ export interface SidebarProps {
|
|
|
55
55
|
logoIconSrc?: string;
|
|
56
56
|
/** Click handler for the logo. When present, the lockup renders as a button. */
|
|
57
57
|
onLogoClick?: (e: React.MouseEvent) => void;
|
|
58
|
-
/**
|
|
58
|
+
/**
|
|
59
|
+
* AI assistant nav entry; omit to hide. Renders as the LAST ROW of the main
|
|
60
|
+
* nav list — visually identical to the items around it, scrolling with
|
|
61
|
+
* them. It used to be its own one-row section between two hairlines below
|
|
62
|
+
* the list; a single entry fenced off by dividers read as a stranded
|
|
63
|
+
* mini-menu, and every hairline it added shrank the space the list had
|
|
64
|
+
* before it needed to scroll.
|
|
65
|
+
*/
|
|
59
66
|
ai?: {
|
|
60
67
|
active: boolean;
|
|
61
68
|
onOpen: () => void;
|
|
@@ -4,19 +4,19 @@ import { Button as t } from "../forms/button.js";
|
|
|
4
4
|
import { Tooltip as n, TooltipContent as r, TooltipProvider as i, TooltipTrigger as a } from "../overlays/tooltip.js";
|
|
5
5
|
import { FIESTA_ICON_DATA_URI as o } from "./fiesta-icon.js";
|
|
6
6
|
import { FiestaLogo as s } from "./fiesta-logo.js";
|
|
7
|
-
import { ChevronLeft as
|
|
8
|
-
import { Fragment as
|
|
9
|
-
import { Fragment as
|
|
7
|
+
import { ChevronLeft as ee, ChevronRight as te, Menu as ne, Sparkles as c, X as l } from "lucide-react";
|
|
8
|
+
import { Fragment as u, memo as d, useEffect as f, useRef as p, useState as m } from "react";
|
|
9
|
+
import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
|
|
10
10
|
//#region src/components/chrome/sidebar.tsx
|
|
11
|
-
var
|
|
11
|
+
var v = "nav-active font-semibold", y = "text-sidebar-foreground nav-active-hover", b = "flex items-center gap-3 rounded-lg px-4 py-3 text-base font-medium min-h-[48px]", x = e(b, v), S = e(b, y), C = "flex w-full items-center gap-3 rounded-lg px-4 py-3 text-base font-medium min-h-[48px]", w = e(C, v), T = e(C, y), E = "flex items-center gap-3 py-2 pl-[14px] pr-3 rounded-lg text-sm font-medium transition-colors", D = e(E, v), re = e(E, y), O = "flex w-full items-center gap-3 py-2 pl-[14px] pr-3 rounded-lg text-sm font-medium transition-colors", k = e(O, v), A = e(O, y), j = "whitespace-nowrap overflow-hidden transition-opacity duration-fast", M = e(j, "opacity-0 max-w-0"), N = e(j, "opacity-100 max-w-48 delay-150"), P = "lg:hidden fixed inset-0 z-[var(--z-mobile-backdrop)] bg-black/25 backdrop-blur-[2px] transition-opacity duration-base pointer-events-none", ie = e(P, "opacity-100 pointer-events-auto"), F = e(P, "opacity-0"), I = "lg:hidden fixed top-[calc(var(--mobile-header-height,56px)+16px)] left-3 right-3 z-[var(--z-mobile-menu)] flex max-h-[calc(100dvh-var(--mobile-header-height,56px)-2rem)] flex-col overflow-hidden sidebar-gradient-horizontal", ae = e(I, "opacity-100"), oe = e(I, "opacity-0 pointer-events-none"), L = "clip-path var(--motion-duration-slower) var(--motion-ease-spring), opacity var(--motion-duration-exit) var(--motion-ease-standard)", se = {
|
|
12
12
|
clipPath: "inset(0 0 0 0 round var(--radius-chrome-mobile, 16px))",
|
|
13
|
-
transition:
|
|
13
|
+
transition: L
|
|
14
14
|
}, R = {
|
|
15
15
|
clipPath: "inset(0 0 100% 0 round var(--radius-chrome-mobile, 16px))",
|
|
16
|
-
transition:
|
|
17
|
-
}, z = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", B =
|
|
18
|
-
let [K, q] =
|
|
19
|
-
|
|
16
|
+
transition: L
|
|
17
|
+
}, z = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", B = d(function({ labels: d, primaryItems: v, secondaryItems: y, renderLink: b, collapsed: C, transitioning: E = !1, onToggleCollapsed: O, onTransitionEnd: j, logoIconSrc: P = o, onLogoClick: I, ai: L, boardSelector: B, mobileBoardSelector: V, renderAccount: H, versionSlot: U, themeToggleSlot: W, maxWidth: G, sidebarInset: ce }) {
|
|
18
|
+
let [K, q] = m(!1), [le, ue] = m(0), J = p(null), Y = p(null), X = p(null);
|
|
19
|
+
f(() => {
|
|
20
20
|
let e = J.current;
|
|
21
21
|
if (!e) return;
|
|
22
22
|
let t = null, n = "", r = () => {
|
|
@@ -29,9 +29,9 @@ var y = "nav-active font-semibold", b = "text-sidebar-foreground nav-active-hove
|
|
|
29
29
|
return i.observe(e), r(), () => {
|
|
30
30
|
i.disconnect(), t !== null && cancelAnimationFrame(t), document.documentElement.style.removeProperty("--mobile-header-height");
|
|
31
31
|
};
|
|
32
|
-
}, []),
|
|
32
|
+
}, []), f(() => (K ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
|
|
33
33
|
document.body.style.overflow = "";
|
|
34
|
-
}), [K]),
|
|
34
|
+
}), [K]), f(() => {
|
|
35
35
|
if (K) {
|
|
36
36
|
let e = Y.current;
|
|
37
37
|
(e?.querySelector(z) ?? e)?.focus();
|
|
@@ -55,7 +55,7 @@ var y = "nav-active font-semibold", b = "text-sidebar-foreground nav-active-hove
|
|
|
55
55
|
let r = n[0], i = n[n.length - 1], a = document.activeElement;
|
|
56
56
|
e.shiftKey ? (a === r || a === t) && (e.preventDefault(), i.focus()) : a === i && (e.preventDefault(), r.focus());
|
|
57
57
|
}
|
|
58
|
-
|
|
58
|
+
f(() => {
|
|
59
59
|
let e = null, t = () => {
|
|
60
60
|
e = null;
|
|
61
61
|
let t = Math.max(0, (document.body.clientWidth - G) / 2);
|
|
@@ -68,219 +68,223 @@ var y = "nav-active font-semibold", b = "text-sidebar-foreground nav-active-hove
|
|
|
68
68
|
};
|
|
69
69
|
}, [G]);
|
|
70
70
|
function Z(e) {
|
|
71
|
-
let t = e.icon, n = e.active ?
|
|
72
|
-
return e.external ? /* @__PURE__ */
|
|
71
|
+
let t = e.icon, n = e.active ? x : S;
|
|
72
|
+
return e.external ? /* @__PURE__ */ _("a", {
|
|
73
73
|
href: e.href,
|
|
74
74
|
target: "_blank",
|
|
75
75
|
rel: "noopener noreferrer",
|
|
76
76
|
onClick: () => q(!1),
|
|
77
77
|
className: n,
|
|
78
|
-
children: [/* @__PURE__ */
|
|
79
|
-
}, e.key) : /* @__PURE__ */
|
|
78
|
+
children: [/* @__PURE__ */ g(t, { className: "h-5 w-5" }), e.label]
|
|
79
|
+
}, e.key) : /* @__PURE__ */ g("span", {
|
|
80
80
|
className: "contents",
|
|
81
|
-
children:
|
|
81
|
+
children: b({
|
|
82
82
|
href: e.href,
|
|
83
83
|
onClick: () => q(!1),
|
|
84
84
|
onMouseEnter: e.onPrefetch,
|
|
85
85
|
onFocus: e.onPrefetch,
|
|
86
86
|
className: n,
|
|
87
|
-
children: /* @__PURE__ */
|
|
87
|
+
children: /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(t, { className: "h-5 w-5" }), e.label] })
|
|
88
88
|
}, e)
|
|
89
89
|
}, e.key);
|
|
90
90
|
}
|
|
91
91
|
function Q(e) {
|
|
92
|
-
let t = e.icon, i = e.active ?
|
|
93
|
-
className:
|
|
92
|
+
let t = e.icon, i = e.active ? D : re, o = /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(t, { className: "h-5 w-5 flex-shrink-0" }), /* @__PURE__ */ g("span", {
|
|
93
|
+
className: C ? M : N,
|
|
94
94
|
children: e.label
|
|
95
|
-
})] }), s = e.external ? /* @__PURE__ */
|
|
95
|
+
})] }), s = e.external ? /* @__PURE__ */ g("a", {
|
|
96
96
|
href: e.href,
|
|
97
97
|
target: "_blank",
|
|
98
98
|
rel: "noopener noreferrer",
|
|
99
99
|
className: i,
|
|
100
|
-
"aria-label":
|
|
100
|
+
"aria-label": C ? e.label : void 0,
|
|
101
101
|
children: o
|
|
102
|
-
}) :
|
|
102
|
+
}) : b({
|
|
103
103
|
href: e.href,
|
|
104
104
|
onMouseEnter: e.onPrefetch,
|
|
105
105
|
onFocus: e.onPrefetch,
|
|
106
106
|
className: i,
|
|
107
|
-
"aria-label":
|
|
107
|
+
"aria-label": C ? e.label : void 0,
|
|
108
108
|
children: o
|
|
109
109
|
}, e);
|
|
110
|
-
return
|
|
110
|
+
return C ? /* @__PURE__ */ _(n, { children: [/* @__PURE__ */ g(a, {
|
|
111
111
|
asChild: !0,
|
|
112
112
|
children: s
|
|
113
|
-
}), /* @__PURE__ */
|
|
113
|
+
}), /* @__PURE__ */ g(r, {
|
|
114
114
|
side: "right",
|
|
115
115
|
className: "font-medium",
|
|
116
116
|
children: e.label
|
|
117
|
-
})] }, e.key) : /* @__PURE__ */
|
|
117
|
+
})] }, e.key) : /* @__PURE__ */ g(u, { children: s }, e.key);
|
|
118
118
|
}
|
|
119
119
|
let $ = (t) => {
|
|
120
|
-
let n = t === "mobile" ? /* @__PURE__ */
|
|
120
|
+
let n = t === "mobile" ? /* @__PURE__ */ g(s, {
|
|
121
121
|
size: "sm",
|
|
122
122
|
className: "logo-on-gradient whitespace-nowrap"
|
|
123
|
-
}) : /* @__PURE__ */
|
|
123
|
+
}) : /* @__PURE__ */ g(s, { className: e("logo-on-gradient whitespace-nowrap overflow-hidden transition-opacity duration-fast", C ? "opacity-0 max-w-0" : "opacity-100 max-w-48 delay-150") }), r = /* @__PURE__ */ g("img", {
|
|
124
124
|
src: P,
|
|
125
125
|
alt: "",
|
|
126
126
|
width: 32,
|
|
127
127
|
height: 32,
|
|
128
128
|
className: "flex-shrink-0"
|
|
129
129
|
}), i = t === "mobile" ? "flex items-center gap-3 flex-1 ml-2" : "flex items-center gap-2 overflow-hidden px-4 py-4";
|
|
130
|
-
return
|
|
130
|
+
return I ? /* @__PURE__ */ _("button", {
|
|
131
131
|
type: "button",
|
|
132
|
-
onClick:
|
|
133
|
-
"aria-label":
|
|
132
|
+
onClick: I,
|
|
133
|
+
"aria-label": d.logoButtonAriaLabel,
|
|
134
134
|
className: e(i, "cursor-pointer text-left", t === "desktop" && "w-full"),
|
|
135
135
|
children: [r, n]
|
|
136
|
-
}) : /* @__PURE__ */
|
|
136
|
+
}) : /* @__PURE__ */ _("div", {
|
|
137
137
|
className: i,
|
|
138
138
|
children: [r, n]
|
|
139
139
|
});
|
|
140
140
|
};
|
|
141
|
-
return /* @__PURE__ */
|
|
142
|
-
/* @__PURE__ */
|
|
141
|
+
return /* @__PURE__ */ _(h, { children: [
|
|
142
|
+
/* @__PURE__ */ g("header", {
|
|
143
143
|
ref: J,
|
|
144
144
|
className: "lg:hidden fixed top-2 left-3 right-3 z-[var(--z-mobile-header)] overflow-hidden sidebar-gradient-horizontal",
|
|
145
|
-
children: /* @__PURE__ */
|
|
145
|
+
children: /* @__PURE__ */ _("div", {
|
|
146
146
|
className: "relative z-[1] flex min-h-14 flex-wrap items-center gap-y-2 px-3 py-2",
|
|
147
147
|
children: [
|
|
148
|
-
/* @__PURE__ */
|
|
148
|
+
/* @__PURE__ */ g(t, {
|
|
149
149
|
variant: "ghost",
|
|
150
150
|
size: "icon",
|
|
151
151
|
className: "h-9 w-9 flex-shrink-0 -ml-2 text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
|
152
152
|
onClick: (e) => {
|
|
153
153
|
K || (X.current = e.currentTarget), q(!K);
|
|
154
154
|
},
|
|
155
|
-
"aria-label": K ?
|
|
156
|
-
children:
|
|
155
|
+
"aria-label": K ? d.closeMenu : d.openMenu,
|
|
156
|
+
children: g(K ? l : ne, { className: "h-6 w-6" })
|
|
157
157
|
}),
|
|
158
158
|
$("mobile"),
|
|
159
|
-
V && /* @__PURE__ */
|
|
159
|
+
V && /* @__PURE__ */ g("div", {
|
|
160
160
|
className: "ml-auto pl-2 flex-shrink-0",
|
|
161
161
|
children: V
|
|
162
162
|
})
|
|
163
163
|
]
|
|
164
164
|
})
|
|
165
165
|
}),
|
|
166
|
-
/* @__PURE__ */
|
|
166
|
+
/* @__PURE__ */ g("div", {
|
|
167
167
|
"data-testid": "mobile-backdrop",
|
|
168
|
-
className: K ? ie :
|
|
168
|
+
className: K ? ie : F,
|
|
169
169
|
onClick: () => q(!1),
|
|
170
170
|
"aria-hidden": "true"
|
|
171
171
|
}),
|
|
172
|
-
/* @__PURE__ */
|
|
172
|
+
/* @__PURE__ */ _("div", {
|
|
173
173
|
ref: Y,
|
|
174
|
-
className: K ?
|
|
174
|
+
className: K ? ae : oe,
|
|
175
175
|
role: K ? "dialog" : void 0,
|
|
176
176
|
"aria-modal": K ? !0 : void 0,
|
|
177
|
-
"aria-label": K ?
|
|
177
|
+
"aria-label": K ? d.navigationMenu : void 0,
|
|
178
178
|
"aria-hidden": !K,
|
|
179
179
|
inert: !K || void 0,
|
|
180
180
|
tabIndex: K ? -1 : void 0,
|
|
181
181
|
onKeyDown: de,
|
|
182
|
-
style: K ?
|
|
182
|
+
style: K ? se : R,
|
|
183
183
|
children: [
|
|
184
|
-
/* @__PURE__ */
|
|
185
|
-
"aria-label":
|
|
184
|
+
/* @__PURE__ */ _("nav", {
|
|
185
|
+
"aria-label": d.primaryNavigation,
|
|
186
186
|
className: "min-h-0 flex-1 space-y-1 overflow-y-auto px-3 py-4",
|
|
187
|
-
children: [
|
|
187
|
+
children: [v.map(Z), L && /* @__PURE__ */ _("button", {
|
|
188
188
|
type: "button",
|
|
189
189
|
onClick: () => {
|
|
190
|
-
|
|
190
|
+
L.onOpen(), q(!1);
|
|
191
191
|
},
|
|
192
|
-
className:
|
|
193
|
-
children: [/* @__PURE__ */
|
|
192
|
+
className: L.active ? w : T,
|
|
193
|
+
children: [/* @__PURE__ */ g(c, { className: "h-5 w-5" }), d.aiAssistant]
|
|
194
194
|
})]
|
|
195
195
|
}),
|
|
196
|
-
/* @__PURE__ */
|
|
197
|
-
/* @__PURE__ */
|
|
196
|
+
/* @__PURE__ */ g("div", { className: "shrink-0 border-t border-sidebar-border mx-3" }),
|
|
197
|
+
/* @__PURE__ */ _("div", {
|
|
198
198
|
className: "shrink-0 px-3 py-3 text-sidebar-foreground",
|
|
199
|
-
children: [/* @__PURE__ */
|
|
200
|
-
"aria-label":
|
|
199
|
+
children: [/* @__PURE__ */ _("nav", {
|
|
200
|
+
"aria-label": d.secondaryNavigation,
|
|
201
201
|
className: "space-y-1",
|
|
202
|
-
children: [
|
|
202
|
+
children: [y.map(Z), H?.({
|
|
203
203
|
variant: "mobile",
|
|
204
204
|
collapsed: !1
|
|
205
205
|
})]
|
|
206
|
-
}), /* @__PURE__ */
|
|
206
|
+
}), /* @__PURE__ */ _("div", {
|
|
207
207
|
className: "mt-2 flex items-center justify-between gap-2 border-t border-sidebar-border/80 px-4 pt-3",
|
|
208
208
|
children: [U, W]
|
|
209
209
|
})]
|
|
210
210
|
})
|
|
211
211
|
]
|
|
212
212
|
}),
|
|
213
|
-
/* @__PURE__ */
|
|
213
|
+
/* @__PURE__ */ g(i, {
|
|
214
214
|
delayDuration: 0,
|
|
215
|
-
children: /* @__PURE__ */
|
|
216
|
-
"aria-label":
|
|
217
|
-
className: e("hidden lg:fixed lg:top-3 lg:bottom-3 lg:z-[var(--z-sidebar)] lg:block sidebar-gradient sidebar-transition",
|
|
215
|
+
children: /* @__PURE__ */ _("aside", {
|
|
216
|
+
"aria-label": d.mainNavigation,
|
|
217
|
+
className: e("hidden lg:fixed lg:top-3 lg:bottom-3 lg:z-[var(--z-sidebar)] lg:block sidebar-gradient sidebar-transition", C ? "lg:w-16" : "lg:w-64", E && "is-transitioning"),
|
|
218
218
|
style: { left: le + ce },
|
|
219
219
|
onTransitionEnd: (e) => {
|
|
220
220
|
e.target === e.currentTarget && e.propertyName === "width" && j?.();
|
|
221
221
|
},
|
|
222
|
-
children: [/* @__PURE__ */
|
|
222
|
+
children: [/* @__PURE__ */ _(n, { children: [/* @__PURE__ */ g(a, {
|
|
223
223
|
asChild: !0,
|
|
224
|
-
children: /* @__PURE__ */
|
|
224
|
+
children: /* @__PURE__ */ g("button", {
|
|
225
225
|
onClick: O,
|
|
226
|
-
"aria-label":
|
|
226
|
+
"aria-label": C ? d.expandSidebar : d.collapseSidebar,
|
|
227
227
|
className: "absolute -right-3.5 top-[51px] z-[var(--z-sidebar-toggle)] flex h-7 w-7 items-center justify-center rounded-full border border-sidebar-border bg-sidebar text-sidebar-foreground shadow-md transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
|
228
|
-
children:
|
|
228
|
+
children: g(C ? te : ee, { className: "h-3.5 w-3.5" })
|
|
229
229
|
})
|
|
230
|
-
}), /* @__PURE__ */
|
|
230
|
+
}), /* @__PURE__ */ g(r, {
|
|
231
231
|
side: "right",
|
|
232
|
-
children:
|
|
233
|
-
})] }), /* @__PURE__ */
|
|
232
|
+
children: C ? d.expandSidebar : d.collapseSidebar
|
|
233
|
+
})] }), /* @__PURE__ */ _("div", {
|
|
234
234
|
className: "relative z-[1] flex h-full flex-col overflow-hidden",
|
|
235
235
|
children: [
|
|
236
236
|
$("desktop"),
|
|
237
|
-
/* @__PURE__ */
|
|
238
|
-
|
|
239
|
-
className: "shrink-0 px-2 pb-3 pt-3",
|
|
237
|
+
B && /* @__PURE__ */ g("div", {
|
|
238
|
+
className: "shrink-0 px-2 pb-3",
|
|
240
239
|
children: B
|
|
241
|
-
}),
|
|
240
|
+
}),
|
|
241
|
+
/* @__PURE__ */ g("div", { className: "mx-2 border-t border-sidebar-border" }),
|
|
242
242
|
/* @__PURE__ */ _("nav", {
|
|
243
|
-
"aria-label":
|
|
243
|
+
"aria-label": d.primaryNavigation,
|
|
244
244
|
className: "min-h-0 flex-1 space-y-1 overflow-y-auto py-4 px-2",
|
|
245
|
-
children:
|
|
246
|
-
}),
|
|
247
|
-
I && /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("div", { className: "mx-2 border-t border-sidebar-border" }), /* @__PURE__ */ _("div", {
|
|
248
|
-
className: "shrink-0 px-2 py-2",
|
|
249
|
-
children: /* @__PURE__ */ v(n, { children: [/* @__PURE__ */ _(a, {
|
|
245
|
+
children: [v.map(Q), L && (C ? /* @__PURE__ */ _(n, { children: [/* @__PURE__ */ g(a, {
|
|
250
246
|
asChild: !0,
|
|
251
|
-
children: /* @__PURE__ */
|
|
247
|
+
children: /* @__PURE__ */ _("button", {
|
|
252
248
|
type: "button",
|
|
253
|
-
onClick:
|
|
254
|
-
"aria-label":
|
|
255
|
-
className:
|
|
256
|
-
children: [/* @__PURE__ */
|
|
257
|
-
className:
|
|
258
|
-
children:
|
|
249
|
+
onClick: L.onOpen,
|
|
250
|
+
"aria-label": d.aiAssistant,
|
|
251
|
+
className: L.active ? k : A,
|
|
252
|
+
children: [/* @__PURE__ */ g(c, { className: "h-5 w-5 flex-shrink-0" }), /* @__PURE__ */ g("span", {
|
|
253
|
+
className: M,
|
|
254
|
+
children: d.aiAssistant
|
|
259
255
|
})]
|
|
260
256
|
})
|
|
261
|
-
}),
|
|
257
|
+
}), /* @__PURE__ */ g(r, {
|
|
262
258
|
side: "right",
|
|
263
259
|
className: "font-medium",
|
|
264
|
-
children:
|
|
265
|
-
})] })
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
260
|
+
children: d.aiAssistant
|
|
261
|
+
})] }) : /* @__PURE__ */ _("button", {
|
|
262
|
+
type: "button",
|
|
263
|
+
onClick: L.onOpen,
|
|
264
|
+
className: L.active ? k : A,
|
|
265
|
+
children: [/* @__PURE__ */ g(c, { className: "h-5 w-5 flex-shrink-0" }), /* @__PURE__ */ g("span", {
|
|
266
|
+
className: N,
|
|
267
|
+
children: d.aiAssistant
|
|
268
|
+
})]
|
|
269
|
+
}))]
|
|
270
|
+
}),
|
|
271
|
+
/* @__PURE__ */ g("div", { className: "mx-2 border-t border-sidebar-border" }),
|
|
272
|
+
/* @__PURE__ */ _("div", {
|
|
269
273
|
className: "shrink-0 px-2 pt-2 pb-3",
|
|
270
|
-
children: [/* @__PURE__ */
|
|
271
|
-
"aria-label":
|
|
274
|
+
children: [/* @__PURE__ */ _("nav", {
|
|
275
|
+
"aria-label": d.secondaryNavigation,
|
|
272
276
|
className: "space-y-1",
|
|
273
|
-
children: [
|
|
277
|
+
children: [y.map(Q), H?.({
|
|
274
278
|
variant: "desktop",
|
|
275
|
-
collapsed:
|
|
279
|
+
collapsed: C
|
|
276
280
|
})]
|
|
277
|
-
}), /* @__PURE__ */
|
|
278
|
-
className: e("mt-2 border-t border-sidebar-border/80 py-2",
|
|
279
|
-
children: [/* @__PURE__ */
|
|
280
|
-
className: e("min-w-0 overflow-hidden whitespace-nowrap",
|
|
281
|
+
}), /* @__PURE__ */ _("div", {
|
|
282
|
+
className: e("mt-2 border-t border-sidebar-border/80 py-2", C ? "flex flex-col items-center gap-1" : "flex items-center justify-between gap-2 pl-[14px] pr-3"),
|
|
283
|
+
children: [/* @__PURE__ */ g("div", {
|
|
284
|
+
className: e("min-w-0 overflow-hidden whitespace-nowrap", C ? "order-2 w-full truncate text-center" : "order-1"),
|
|
281
285
|
children: U
|
|
282
|
-
}), /* @__PURE__ */
|
|
283
|
-
className: e("flex-shrink-0",
|
|
286
|
+
}), /* @__PURE__ */ g("div", {
|
|
287
|
+
className: e("flex-shrink-0", C ? "order-1" : "order-2"),
|
|
284
288
|
children: W
|
|
285
289
|
})]
|
|
286
290
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.js","names":[],"sources":["../../../src/components/chrome/sidebar.tsx"],"mappings":";;;;;;;;;;AAgBA,IAAM,IAAkB,4BAClB,IAAoB,4CAEpB,IAAmB,mFACnB,IAAqB,EAAG,GAAkB,CAAe,GACzD,IAAuB,EAAG,GAAkB,CAAiB,
|
|
1
|
+
{"version":3,"file":"sidebar.js","names":[],"sources":["../../../src/components/chrome/sidebar.tsx"],"mappings":"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"}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `data/` — the data-display family (#229).
|
|
3
|
+
*
|
|
4
|
+
* First member of a new family. The existing families each own a job —
|
|
5
|
+
* `containment` boxes things, `feedback` reports system state, `typography`
|
|
6
|
+
* sets prose — and none of them owns "render a derived number so a human can
|
|
7
|
+
* compare it". StatStrip (and the sibling BarList landing in a parallel PR)
|
|
8
|
+
* are exactly that: presentation of computed metrics, not chrome, not form
|
|
9
|
+
* input, not prose. Folding them into `feedback` would misfile them —
|
|
10
|
+
* feedback is the system talking about itself (alerts, spinners, status),
|
|
11
|
+
* not the product displaying the user's data. Hence `data/`.
|
|
12
|
+
*/
|
|
13
|
+
import * as React from "react";
|
|
14
|
+
type StatStripTone = "default" | "brand";
|
|
15
|
+
export interface StatStripItemData {
|
|
16
|
+
/** The big number. ReactNode so a consumer can wrap it in <abbr>, add a unit sup, etc. */
|
|
17
|
+
value: React.ReactNode;
|
|
18
|
+
/** The muted descriptor beside the value, e.g. "unique cloners (last 14 days)". */
|
|
19
|
+
label: React.ReactNode;
|
|
20
|
+
/**
|
|
21
|
+
* List key when `label` is not a plain string. Falls back to the array
|
|
22
|
+
* index, which is fine for the intended use (a short static header strip),
|
|
23
|
+
* wrong for anything reorderable — pass a key there.
|
|
24
|
+
*/
|
|
25
|
+
key?: string;
|
|
26
|
+
}
|
|
27
|
+
interface StatStripProps extends React.ComponentProps<"dl"> {
|
|
28
|
+
/**
|
|
29
|
+
* Data form: map an array straight onto the strip. Ignored when `children`
|
|
30
|
+
* is provided — the two forms answer the same question and mixing them
|
|
31
|
+
* would render duplicate stats.
|
|
32
|
+
*/
|
|
33
|
+
items?: StatStripItemData[];
|
|
34
|
+
/**
|
|
35
|
+
* Colour of every value in the strip. Strip-level rather than per-item
|
|
36
|
+
* deliberately: a summary strip is one statement, and mixing value colours
|
|
37
|
+
* inside it turns emphasis into noise. `brand` exists for the one real
|
|
38
|
+
* consumer (the docs stats header); the status tones (`destructive` etc.)
|
|
39
|
+
* are withheld until a real call site wants a red headline number —
|
|
40
|
+
* see heading.tsx for the same scoping argument.
|
|
41
|
+
*/
|
|
42
|
+
tone?: StatStripTone;
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* An inline row of big-number stats — "52 plugins · 5,612 unique cloners" —
|
|
46
|
+
* promoted from the docs site's stats header (#229).
|
|
47
|
+
*
|
|
48
|
+
* Semantics: a `<dl>` of name/value groups, because that is what the content
|
|
49
|
+
* IS — each stat is a term ("plugins") described by a value ("52"). The spec
|
|
50
|
+
* allows `<div>` group wrappers inside `<dl>`, so the flex styling survives
|
|
51
|
+
* without semantic lies. The content model requires `<dt>` before `<dd>`,
|
|
52
|
+
* but the design shows the value first; `order-first` on the `<dd>` flips
|
|
53
|
+
* the visual order only, so a screen reader hears the natural dl reading
|
|
54
|
+
* ("plugins, 52") while sighted users get the big-number-first layout. Both
|
|
55
|
+
* sequences are meaningful, so SC 1.3.2 is satisfied either way.
|
|
56
|
+
*
|
|
57
|
+
* Typography: the value carries the unified title treatment (semibold +
|
|
58
|
+
* tracking-tight, per heading.tsx) at 1.5rem rather than the docs version's
|
|
59
|
+
* 700 weight — one title voice across the system beats a one-off bold.
|
|
60
|
+
* `leading-none` because a value never wraps (it's a number); it also keeps
|
|
61
|
+
* the strip from towering over the sm label it baselines against. No
|
|
62
|
+
* `tabular-nums`: values sit in distinct rows of one, never in a column
|
|
63
|
+
* where digits must align.
|
|
64
|
+
*
|
|
65
|
+
* Colour: values default to `text-foreground`, not the docs' brand — brand
|
|
66
|
+
* emphasis is a page-level choice, not a property of "a statistic", so it is
|
|
67
|
+
* opt-in via `tone="brand"`. Contrast is inherited from theme.css: --brand
|
|
68
|
+
* (--hue-orange) measures 5.08:1 light / 9.63:1 dark on --background, and
|
|
69
|
+
* --muted-foreground labels measure 8.32:1 light on --background.
|
|
70
|
+
*/
|
|
71
|
+
declare function StatStrip({ items, tone, className, children, ...props }: StatStripProps): React.JSX.Element;
|
|
72
|
+
interface StatStripItemProps extends Omit<React.ComponentProps<"div">, "children"> {
|
|
73
|
+
value: React.ReactNode;
|
|
74
|
+
label: React.ReactNode;
|
|
75
|
+
}
|
|
76
|
+
/**
|
|
77
|
+
* One value/label pair. Exists as a public component (rather than only the
|
|
78
|
+
* `items` array) because the `<dl>` content model is an internal contract —
|
|
79
|
+
* a consumer composing custom markup should not need to know that the label
|
|
80
|
+
* must precede the value in the DOM, or that `order-first` restores the
|
|
81
|
+
* visual order. `value`/`label` stay props, not children slots: the pair is
|
|
82
|
+
* a fixed shape with no middle ground, the empty-state end of the
|
|
83
|
+
* config-vs-composition spectrum, not the card end.
|
|
84
|
+
*/
|
|
85
|
+
declare function StatStripItem({ value, label, className, ...props }: StatStripItemProps): React.JSX.Element;
|
|
86
|
+
export { StatStrip, StatStripItem };
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { cn as e } from "../../lib/utils.js";
|
|
2
|
+
import "react";
|
|
3
|
+
import { jsx as t, jsxs as n } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/data/stat-strip.tsx
|
|
5
|
+
function r({ items: n, tone: r = "default", className: a, children: o, ...s }) {
|
|
6
|
+
return /* @__PURE__ */ t("dl", {
|
|
7
|
+
"data-slot": "stat-strip",
|
|
8
|
+
"data-tone": r,
|
|
9
|
+
className: e("group/stat-strip flex flex-wrap items-baseline gap-x-5 gap-y-2 sm:gap-x-8", a),
|
|
10
|
+
...s,
|
|
11
|
+
children: o ?? n?.map((e, n) => /* @__PURE__ */ t(i, {
|
|
12
|
+
value: e.value,
|
|
13
|
+
label: e.label
|
|
14
|
+
}, e.key ?? n))
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
function i({ value: r, label: i, className: a, ...o }) {
|
|
18
|
+
return /* @__PURE__ */ n("div", {
|
|
19
|
+
"data-slot": "stat-strip-item",
|
|
20
|
+
className: e("flex items-baseline gap-1.5", a),
|
|
21
|
+
...o,
|
|
22
|
+
children: [/* @__PURE__ */ t("dt", {
|
|
23
|
+
"data-slot": "stat-strip-label",
|
|
24
|
+
className: "text-sm text-muted-foreground",
|
|
25
|
+
children: i
|
|
26
|
+
}), /* @__PURE__ */ t("dd", {
|
|
27
|
+
"data-slot": "stat-strip-value",
|
|
28
|
+
className: "order-first m-0 text-2xl leading-none font-semibold tracking-tight text-foreground group-data-[tone=brand]/stat-strip:text-brand",
|
|
29
|
+
children: r
|
|
30
|
+
})]
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
//#endregion
|
|
34
|
+
export { r as StatStrip, i as StatStripItem };
|
|
35
|
+
|
|
36
|
+
//# sourceMappingURL=stat-strip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"stat-strip.js","names":[],"sources":["../../../src/components/data/stat-strip.tsx"],"mappings":";;;;AA4EA,SAAS,EAAU,EAAE,UAAO,UAAO,WAAW,cAAW,aAAU,GAAG,KAAyB;CAC7F,OACE,kBAAC,MAAD;EACE,aAAU;EACV,aAAW;EAQX,WAAW,EAAG,6EAA6E,CAAS;EACpG,GAAI;EAEH,UAAA,KAAY,GAAO,KAAK,GAAM,MAAM,kBAAC,GAAD;GAAmC,OAAO,EAAK;GAAO,OAAO,EAAK;EAAQ,GAAtD,EAAK,OAAO,CAA0C,CAAC;CAC9G,CAAA;AAER;AAgBA,SAAS,EAAc,EAAE,UAAO,UAAO,cAAW,GAAG,KAA6B;CAChF,OACE,kBAAC,OAAD;EAAK,aAAU;EAAkB,WAAW,EAAG,+BAA+B,CAAS;EAAG,GAAI;EAA9F,UAAA,CACE,kBAAC,MAAD;GAAI,aAAU;GAAmB,WAAU;GACxC,UAAA;EACC,CAAA,GAGJ,kBAAC,MAAD;GACE,aAAU;GACV,WAAU;GAET,UAAA;EACC,CAAA,CACD;;AAET"}
|
package/dist/index.d.ts
CHANGED
|
@@ -70,6 +70,7 @@ export * from "./lib/board-characters";
|
|
|
70
70
|
export * from "./lib/board-colors";
|
|
71
71
|
export * from "./lib/board-dimensions";
|
|
72
72
|
export * from "./lib/board-previews";
|
|
73
|
+
export * from "./components/data/stat-strip";
|
|
73
74
|
export * from "./components/plugin/board-showcase";
|
|
74
75
|
export * from "./components/plugin/plugin-card";
|
|
75
76
|
export * from "./components/plugin/plugin-category-badge";
|
package/dist/index.js
CHANGED
|
@@ -62,36 +62,37 @@ import { BoardDisplay as On, FLAP_SPEED_PRESETS as kn, deriveFlapTiming as An, r
|
|
|
62
62
|
import { ScaledBoardDisplay as Mn } from "./components/board/scaled-board-display.js";
|
|
63
63
|
import { StaticBoardDisplay as Nn } from "./components/board/static-board-display.js";
|
|
64
64
|
import { DEFAULT_SHAPE_LABELS as Pn, previewLabel as Fn, previewLabels as In, previewMessage as Ln } from "./lib/board-previews.js";
|
|
65
|
-
import {
|
|
66
|
-
import {
|
|
67
|
-
import {
|
|
68
|
-
import {
|
|
69
|
-
import {
|
|
70
|
-
import {
|
|
71
|
-
import {
|
|
72
|
-
import {
|
|
73
|
-
import {
|
|
74
|
-
import {
|
|
75
|
-
import {
|
|
76
|
-
import {
|
|
77
|
-
import {
|
|
78
|
-
import {
|
|
79
|
-
import {
|
|
80
|
-
import {
|
|
81
|
-
import {
|
|
82
|
-
import {
|
|
83
|
-
import {
|
|
84
|
-
import {
|
|
85
|
-
import {
|
|
86
|
-
import {
|
|
87
|
-
import {
|
|
88
|
-
import {
|
|
89
|
-
import {
|
|
90
|
-
import {
|
|
91
|
-
import {
|
|
92
|
-
import {
|
|
93
|
-
import {
|
|
94
|
-
import {
|
|
95
|
-
import {
|
|
96
|
-
import {
|
|
97
|
-
|
|
65
|
+
import { StatStrip as Rn, StatStripItem as zn } from "./components/data/stat-strip.js";
|
|
66
|
+
import { BoardShowcase as Bn, DEFAULT_SHOWCASE_LABELS as Vn } from "./components/plugin/board-showcase.js";
|
|
67
|
+
import { PLUGIN_CATEGORIES as Hn, PluginCategoryBadge as Un } from "./components/plugin/plugin-category-badge.js";
|
|
68
|
+
import { ScaledBoardTeaser as Wn } from "./components/plugin/scaled-board-teaser.js";
|
|
69
|
+
import { PluginCard as Gn } from "./components/plugin/plugin-card.js";
|
|
70
|
+
import { BOARD_CODE_TO_COLOR as Kn, BOARD_COLOR_CODES as qn, CURSOR_ANCHOR as Jn, DEFAULT_BOARD_LINES as Yn, DEFAULT_BOARD_WIDTH as Xn, FILL_SPACE_REPEAT_VAR as Zn, FILL_SPACE_VAR as Qn } from "./components/editor/constants.js";
|
|
71
|
+
import { NodeViewInjectionProvider as $n, useNodeViewInjection as er } from "./components/editor/node-views/node-view-context.js";
|
|
72
|
+
import { ColorTileNodeView as tr, DEFAULT_COLOR_TILE_NODE_VIEW_LABELS as nr } from "./components/editor/node-views/color-tile-node-view.js";
|
|
73
|
+
import { ColorTileNode as rr } from "./components/editor/extensions/color-tile-node.js";
|
|
74
|
+
import { DEFAULT_FILL_SPACE_NODE_VIEW_LABELS as ir, FillSpaceNodeView as ar } from "./components/editor/node-views/fill-space-node-view.js";
|
|
75
|
+
import { FillSpaceNode as or } from "./components/editor/extensions/fill-space-node.js";
|
|
76
|
+
import { DEFAULT_FORMULA_NODE_VIEW_LABELS as sr, FormulaNodeView as cr } from "./components/editor/node-views/formula-node-view.js";
|
|
77
|
+
import { FormulaNode as lr } from "./components/editor/extensions/formula-node.js";
|
|
78
|
+
import { LineNavigation as ur } from "./components/editor/extensions/line-navigation.js";
|
|
79
|
+
import { SingleParagraphDoc as dr } from "./components/editor/extensions/single-paragraph-doc.js";
|
|
80
|
+
import { TrailingNewline as fr } from "./components/editor/extensions/trailing-newline.js";
|
|
81
|
+
import { DEFAULT_VARIABLE_NODE_VIEW_LABELS as pr, VariableNodeView as mr } from "./components/editor/node-views/variable-node-view.js";
|
|
82
|
+
import { VariableNode as hr } from "./components/editor/extensions/variable-node.js";
|
|
83
|
+
import { DEFAULT_WRAPPED_TEXT_VIEW_LABELS as gr, WrappedTextView as _r } from "./components/editor/node-views/wrapped-text-view.js";
|
|
84
|
+
import { WrappedTextNode as vr } from "./components/editor/extensions/wrapped-text-node.js";
|
|
85
|
+
import { ColorPickerContent as yr, DEFAULT_COLOR_PICKER_LABELS as br } from "./components/editor/color-picker-content.js";
|
|
86
|
+
import { DRAW_CHARS as xr, brushToCell as Sr, cellsToLine as Cr, isPositionalLine as wr, lineToCells as Tr, paintLine as Er, renderPositionalLine as Dr } from "./components/editor/utils/draw-mode.js";
|
|
87
|
+
import { DEFAULT_DRAW_CHAR_PICKER_LABELS as Or, DrawCharPickerContent as kr } from "./components/editor/draw-char-picker-content.js";
|
|
88
|
+
import { DEFAULT_FORMATTING_PICKER_LABELS as Ar, FormattingPickerContent as jr } from "./components/editor/formatting-picker-content.js";
|
|
89
|
+
import { DEFAULT_TOOLBAR_DROPDOWN_LABELS as Mr, ToolbarDropdown as Nr } from "./components/editor/toolbar-dropdown.js";
|
|
90
|
+
import { parseLineContent as Pr, parseTemplateSimple as Fr, serializeTemplateSimple as Ir } from "./components/editor/utils/serialization.js";
|
|
91
|
+
import { insertTemplateContent as Lr } from "./components/editor/utils/insertion.js";
|
|
92
|
+
import { DEFAULT_TEMPLATE_EDITOR_TOOLBAR_LABELS as Rr, TemplateEditorToolbar as zr } from "./components/editor/template-editor-toolbar.js";
|
|
93
|
+
import { buildStrokeTransaction as Br, lineRanges as Vr } from "./components/editor/utils/stroke-transaction.js";
|
|
94
|
+
import { DEFAULT_TEMPLATE_EDITOR_LABELS as Hr, TemplateEditor as Ur } from "./components/editor/template-editor.js";
|
|
95
|
+
import { DEFAULT_FILTER_PICKER_LABELS as Wr, FilterPickerContent as Gr } from "./components/editor/filter-picker-content.js";
|
|
96
|
+
import { DEFAULT_VARIABLE_PICKER_LABELS as Kr, VariablePickerContent as qr, createLucideIconResolver as Jr, getPluginsWithNestedArrays as Yr } from "./components/editor/variable-picker-content.js";
|
|
97
|
+
import { calculateLineLength as Xr, getOverflowAmount as Zr, willOverflow as Qr } from "./components/editor/utils/length-calculator.js";
|
|
98
|
+
export { $t as ALL_COLOR_CODES, en as AVAILABLE_COLORS, t as Accordion, n as AccordionContent, r as AccordionItem, i as AccordionTrigger, g as Alert, _ as AlertDescription, I as AlertDialog, L as AlertDialogAction, R as AlertDialogCancel, z as AlertDialogContent, B as AlertDialogDescription, V as AlertDialogFooter, H as AlertDialogHeader, U as AlertDialogOverlay, W as AlertDialogPortal, G as AlertDialogTitle, K as AlertDialogTrigger, v as AlertTitle, ln as BOARD_CHARS, Kn as BOARD_CODE_TO_COLOR, tn as BOARD_COLORS, qn as BOARD_COLOR_CODES, b as Badge, yn as BoardBackdrop, On as BoardDisplay, Pt as BoardIcon, Ft as BoardSelector, Bn as BoardShowcase, vn as BoardTeaser, j as Box, T as Button, nn as COLOR_CODE_MAP, rn as COLOR_DISPLAY, Jn as CURSOR_ANCHOR, a as Card, o as CardAction, s as CardContent, c as CardDescription, l as CardFooter, u as CardHeader, d as CardTitle, D as Checkbox, Te as Code, f as Collapsible, p as CollapsibleContent, m as CollapsibleTrigger, yr as ColorPickerContent, rr as ColorTileNode, tr as ColorTileNodeView, Yn as DEFAULT_BOARD_LINES, Xn as DEFAULT_BOARD_WIDTH, br as DEFAULT_COLOR_PICKER_LABELS, nr as DEFAULT_COLOR_TILE_NODE_VIEW_LABELS, Or as DEFAULT_DRAW_CHAR_PICKER_LABELS, ir as DEFAULT_FILL_SPACE_NODE_VIEW_LABELS, Wr as DEFAULT_FILTER_PICKER_LABELS, Ar as DEFAULT_FORMATTING_PICKER_LABELS, sr as DEFAULT_FORMULA_NODE_VIEW_LABELS, Pn as DEFAULT_SHAPE_LABELS, Vn as DEFAULT_SHOWCASE_LABELS, Hr as DEFAULT_TEMPLATE_EDITOR_LABELS, Rr as DEFAULT_TEMPLATE_EDITOR_TOOLBAR_LABELS, Mr as DEFAULT_TOOLBAR_DROPDOWN_LABELS, pr as DEFAULT_VARIABLE_NODE_VIEW_LABELS, Kr as DEFAULT_VARIABLE_PICKER_LABELS, gr as DEFAULT_WRAPPED_TEXT_VIEW_LABELS, xn as DEVICE_DIMENSIONS, xr as DRAW_CHARS, q as Dialog, J as DialogClose, Y as DialogContent, X as DialogDescription, Z as DialogFooter, Q as DialogHeader, $ as DialogOverlay, ee as DialogPortal, te as DialogTitle, ne as DialogTrigger, kr as DrawCharPickerContent, re as DropdownMenu, ie as DropdownMenuCheckboxItem, ae as DropdownMenuContent, oe as DropdownMenuGroup, se as DropdownMenuItem, ce as DropdownMenuLabel, le as DropdownMenuPortal, ue as DropdownMenuRadioGroup, de as DropdownMenuRadioItem, fe as DropdownMenuSeparator, pe as DropdownMenuShortcut, me as DropdownMenuSub, he as DropdownMenuSubContent, ge as DropdownMenuSubTrigger, _e as DropdownMenuTrigger, un as EXTRA_CHARS, S as EmptyState, an as FIESTABOARD_COLORS, It as FIESTA_ICON_DATA_URI, Lt as FIESTA_ICON_PALETTE, Rt as FIESTA_ICON_SVG, Zn as FILL_SPACE_REPEAT_VAR, Qn as FILL_SPACE_VAR, kn as FLAP_SPEED_PRESETS, Ue as FadeContent, zt as FiestaIcon, Bt as FiestaLogo, or as FillSpaceNode, ar as FillSpaceNodeView, Gr as FilterPickerContent, M as Flex, jr as FormattingPickerContent, lr as FormulaNode, cr as FormulaNodeView, P as Grid, Ee as Heading, O as Input, h as JsonTree, k as Label, Vt as LanguageSelector, ur as LineNavigation, Oe as List, ke as ListItem, Sn as MAX_NOTES_PER_AXIS, Ht as MainContent, Cn as NOTE_COLS, wn as NOTE_ROWS, $n as NodeViewInjectionProvider, Ut as PAGE_HUES, Hn as PLUGIN_CATEGORIES, Wt as PageHeader, Gt as PageIconGradientDefs, qt as PageLayout, Jt as PageToolbar, Gn as PluginCard, Un as PluginCategoryBadge, ve as Popover, ye as PopoverClose, be as PopoverContent, xe as PopoverDescription, Se as PopoverTitle, Ce as PopoverTrigger, Mn as ScaledBoardDisplay, Wn as ScaledBoardTeaser, je as ScrollArea, Me as ScrollBar, A as SecretInput, lt as SegmentedControl, ut as SegmentedControlItem, qe as Select, Je as SelectContent, Ye as SelectGroup, Xe as SelectItem, Ze as SelectLabel, Qe as SelectScrollDownButton, $e as SelectScrollUpButton, et as SelectSeparator, tt as SelectTrigger, nt as SelectValue, yt as Sheet, bt as SheetClose, xt as SheetContent, St as SheetDescription, Ct as SheetFooter, wt as SheetHeader, Tt as SheetOverlay, Et as SheetPortal, Dt as SheetTitle, Ot as SheetTrigger, Yt as Sidebar, dr as SingleParagraphDoc, We as Skeleton, Xt as SkipToContent, rt as Slider, C as Spinner, _t as Stack, Rn as StatStrip, zn as StatStripItem, Nn as StaticBoardDisplay, Ge as StatusDot, it as Switch, Ne as Table, Pe as TableBody, Fe as TableCell, Ie as TableHead, Le as TableHeader, Re as TableRow, ze as Tabs, Be as TabsContent, Ve as TabsList, He as TabsTrigger, Ur as TemplateEditor, zr as TemplateEditorToolbar, ot as Text, Nt as TextLink, at as Textarea, Zt as ThemeToggle, ct as TimePicker, dt as ToggleCard, ft as ToggleCardGroup, Nr as ToolbarDropdown, kt as Tooltip, At as TooltipContent, jt as TooltipProvider, Mt as TooltipTrigger, fr as TrailingNewline, hr as VariableNode, mr as VariableNodeView, qr as VariablePickerContent, Qt as WizardProgress, bn as WizardShell, vr as WrappedTextNode, _r as WrappedTextView, y as alertVariants, x as badgeVariants, Sr as brushToCell, Br as buildStrokeTransaction, E as buttonVariants, Xr as calculateLineLength, Cr as cellsToLine, e as cn, Jr as createLucideIconResolver, An as deriveFlapTiming, N as flexVariants, on as getBoardColor, dn as getCharFromToken, fn as getCharIndex, Zr as getOverflowAmount, Yr as getPluginsWithNestedArrays, F as gridVariants, De as headingVariants, Lr as insertTemplateContent, pn as isColorTile, Tn as isNoteArray, wr as isPositionalLine, sn as isValidBoardColor, Vr as lineRanges, Tr as lineToCells, Ae as listVariants, mn as messageToGrid, hn as messageToText, En as noteArrayDimensions, Kt as pageHue, Er as paintLine, gn as parseLine, Pr as parseLineContent, Fr as parseTemplateSimple, Fn as previewLabel, In as previewLabels, Ln as previewMessage, Dr as renderPositionalLine, cn as resolveColorCode, Dn as resolveDimensions, jn as resolveFlapSpeed, pt as segmentedControlItemVariants, mt as segmentedControlVariants, Ir as serializeTemplateSimple, w as spinnerVariants, vt as stackVariants, Ke as statusDotVariants, st as textVariants, ht as toggleCardGroupVariants, gt as toggleCardVariants, _n as tokensEqual, er as useNodeViewInjection, we as usePopoverClose, Qr as willOverflow };
|
package/dist/theme.css
CHANGED
|
@@ -565,7 +565,20 @@
|
|
|
565
565
|
means on" still holds everywhere it physically can. */
|
|
566
566
|
--nav-active: var(--foreground);
|
|
567
567
|
--nav-active-foreground: var(--background);
|
|
568
|
-
|
|
568
|
+
/* Surface-relative, not a white literal (#228). The old `oklch(1 0 0 / 14%)`
|
|
569
|
+
was tuned by eye on the DARK rail (3.16:1 there) and was invisible
|
|
570
|
+
everywhere else: 1.03:1 on the light rail, and 1.015:1 when the class
|
|
571
|
+
reached the docs site's page surface in 4.0.0 — that site now hand-mixes
|
|
572
|
+
its own hover to survive us. Mixing the LOCAL foreground instead makes the
|
|
573
|
+
tint an emphasis of whatever ink the row already carries, so it
|
|
574
|
+
self-adapts to any surface: 3.36:1 on a dark page, 1.15:1 on a light one.
|
|
575
|
+
Custom properties substitute var() on the element they are DECLARED on,
|
|
576
|
+
so this :root value is resolved against the PAGE ink before it ever
|
|
577
|
+
inherits onto the rail — which is why .sidebar-gradient re-declares the
|
|
578
|
+
token from --sidebar-foreground (3.07:1 dark rail, within 0.1 of the
|
|
579
|
+
literal it replaces; 1.15:1 on the light rail, where hover previously
|
|
580
|
+
did not paint at all). */
|
|
581
|
+
--nav-active-hover: color-mix(in oklch, var(--foreground) 14%, transparent);
|
|
569
582
|
/* Fiesta gradient palette — three board hues at ONE lightness (0.46),
|
|
570
583
|
identical in both themes. Because that surface never changes luminance
|
|
571
584
|
across its 117s loop, the contrast of anything sitting on it is a
|
|
@@ -848,7 +861,10 @@
|
|
|
848
861
|
where a 117-second animation happens to be. */
|
|
849
862
|
--nav-active: var(--primary); /* see :root */
|
|
850
863
|
--nav-active-foreground: var(--primary-foreground);
|
|
851
|
-
--nav-active-hover
|
|
864
|
+
/* No --nav-active-hover copy here (#228): :root and this block style the
|
|
865
|
+
same element (html), so the :root color-mix re-resolves against this
|
|
866
|
+
block's --foreground on its own. A dark duplicate would only be a second
|
|
867
|
+
place for the recipe to drift. */
|
|
852
868
|
/* Identical to :root. See the note there. */
|
|
853
869
|
--fiesta-red: oklch(0.46 0.15 29);
|
|
854
870
|
--fiesta-orange: oklch(0.46 0.098 73);
|
|
@@ -1204,6 +1220,13 @@ html[data-board-switch="backward"]::view-transition-new(board-page) {
|
|
|
1204
1220
|
--accent: color-mix(in oklch, var(--sidebar-foreground) 10%, transparent);
|
|
1205
1221
|
--accent-foreground: var(--sidebar-foreground);
|
|
1206
1222
|
--border: color-mix(in oklch, var(--sidebar-foreground) 14%, transparent);
|
|
1223
|
+
/* Re-declared, not inherited (#228): the :root value already resolved its
|
|
1224
|
+
var(--foreground) against the PAGE ink before inheriting here — rebinding
|
|
1225
|
+
--foreground above cannot reach inside an inherited color-mix. From the
|
|
1226
|
+
rail ink: 3.07:1 on the dark rail (the white literal it replaces was
|
|
1227
|
+
3.16:1) and 1.15:1 on the light rail, where the white-on-near-white
|
|
1228
|
+
literal measured 1.03:1 — a hover that never painted. */
|
|
1229
|
+
--nav-active-hover: color-mix(in oklch, var(--sidebar-foreground) 14%, transparent);
|
|
1207
1230
|
}
|
|
1208
1231
|
|
|
1209
1232
|
/* No CSS gradient paints here any more (#231). The rail is a flat surface;
|
|
@@ -1350,12 +1373,20 @@ html[data-board-switch="backward"]::view-transition-new(board-page) {
|
|
|
1350
1373
|
}
|
|
1351
1374
|
|
|
1352
1375
|
/* The hover tint is the only chrome token left carrying alpha, so this is
|
|
1353
|
-
the one transparency branch that still has work to do.
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
a
|
|
1376
|
+
the one transparency branch that still has work to do. Two surfaces, two
|
|
1377
|
+
opaque answers (#228): 4.0.0 shipped ONE — the rail's — unscoped, and any
|
|
1378
|
+
page-surface consumer (the docs site) inherited a near-black row fill under
|
|
1379
|
+
a page-coloured label. The page rule now answers with --secondary, the
|
|
1380
|
+
opaque page-surface step that follows the theme (1.13:1 light, 1.25:1 dark
|
|
1381
|
+
against --background); the rail keeps its literal, scoped to the rail. */
|
|
1382
|
+
/* The rail value is a literal, not a color-mix. Mixing hue 315 into the
|
|
1383
|
+
hue-73 rail takes the shorter arc and lands around hue 47 — a seventh hue,
|
|
1384
|
+
and a brown one, inside a palette whose whole rule is six. */
|
|
1357
1385
|
@media (prefers-reduced-transparency: reduce) {
|
|
1358
1386
|
.nav-active-hover:hover {
|
|
1387
|
+
background: var(--secondary);
|
|
1388
|
+
}
|
|
1389
|
+
.sidebar-gradient .nav-active-hover:hover {
|
|
1359
1390
|
background: oklch(0.34 0.02 73);
|
|
1360
1391
|
}
|
|
1361
1392
|
}
|
|
@@ -1363,13 +1394,27 @@ html[data-board-switch="backward"]::view-transition-new(board-page) {
|
|
|
1363
1394
|
/* Users who ask for more contrast get the most legible path, not the least
|
|
1364
1395
|
(#162) — a heavier marker and a white hairline around the pill. */
|
|
1365
1396
|
/* More contrast means MORE CONTRAST, not more chrome: the same pigment, lifted.
|
|
1366
|
-
Fill vs rail 8.12 -> 10.60:1, ink label 8.84 -> 11.54:1. No rim, no marker.
|
|
1397
|
+
Fill vs rail 8.12 -> 10.60:1, ink label 8.84 -> 11.54:1. No rim, no marker.
|
|
1398
|
+
|
|
1399
|
+
The fill lift lives in the DARK token block, not on the class (#228): it
|
|
1400
|
+
lifts the TILE pair, and the tile pair only exists in dark — light mode's
|
|
1401
|
+
resting pill is already --foreground under a --background label, the most
|
|
1402
|
+
contrast this palette holds, and 4.0.0's unscoped `.nav-active` retune
|
|
1403
|
+
replaced exactly that pair with a 0.86-lightness fill on the docs site's
|
|
1404
|
+
light pages: 17.54:1 collapsed to 1.40:1 for precisely the readers who
|
|
1405
|
+
asked for more. Scoping by theme instead of by class means a surface where
|
|
1406
|
+
the resting pair is inverted never sees a fill-only retune again.
|
|
1407
|
+
The hover keeps the same recipe as its resting form, lifted 14% -> 24%
|
|
1408
|
+
(4.54:1 dark rail, 5.05:1 dark page, 1.29:1 light page). */
|
|
1367
1409
|
@media (prefers-contrast: more) {
|
|
1368
|
-
.
|
|
1410
|
+
.dark {
|
|
1369
1411
|
--nav-active: oklch(0.86 0.115 73);
|
|
1370
1412
|
}
|
|
1371
|
-
|
|
1372
|
-
|
|
1413
|
+
:root {
|
|
1414
|
+
--nav-active-hover: color-mix(in oklch, var(--foreground) 24%, transparent);
|
|
1415
|
+
}
|
|
1416
|
+
.sidebar-gradient {
|
|
1417
|
+
--nav-active-hover: color-mix(in oklch, var(--sidebar-foreground) 24%, transparent);
|
|
1373
1418
|
}
|
|
1374
1419
|
}
|
|
1375
1420
|
|