@umriss-ui/dashboard 0.40.2 → 0.40.4
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/CHANGELOG.md +11 -0
- package/dist/dashboard.css +1 -1
- package/dist/dashboard.js +142 -142
- package/docs/llms-full.md +7 -5
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -12,6 +12,17 @@ upgrade reads that one.
|
|
|
12
12
|
|
|
13
13
|
The dashboard joins the other five packages' one number at its first version: they are released together, and a package without a change of its own still gets a heading for it.
|
|
14
14
|
|
|
15
|
+
## 0.40.4 – A larger font keeps its rows (Oct. 2026)
|
|
16
|
+
|
|
17
|
+
### Fixed
|
|
18
|
+
|
|
19
|
+
- **The row unit's default grows with the reader's font size**: 50 px at the default size, more above it, rounded to whole pixels. At a browser font size of 200 %, widgets cut their content. `--u-dashboard-row` keeps its name; a theme that sets it keeps its value.
|
|
20
|
+
|
|
21
|
+
## 0.40.3 – No change of its own (Oct. 2026)
|
|
22
|
+
|
|
23
|
+
Released with the other five packages under their one number. No change of its
|
|
24
|
+
own.
|
|
25
|
+
|
|
15
26
|
## 0.40.2 – No change of its own (Oct. 2026)
|
|
16
27
|
|
|
17
28
|
Released with the other five packages under their one number. No change of its
|
package/dist/dashboard.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer umriss.tokens,umriss.base,umriss.components;@layer umriss.components{.
|
|
1
|
+
@layer umriss.tokens,umriss.base,umriss.components;@layer umriss.components{._root_1d7h6_17,._root_1d7h6_17:before,._root_1d7h6_17:after{box-sizing:border-box}._bar_1d7h6_34,._bar_1d7h6_34:before,._bar_1d7h6_34:after{box-sizing:border-box}._mode_1d7h6_43,._mode_1d7h6_43:before,._mode_1d7h6_43:after{box-sizing:border-box}._head_1d7h6_58,._head_1d7h6_58:before,._head_1d7h6_58:after{box-sizing:border-box}._editingHead_1d7h6_68,._editingHead_1d7h6_68:before,._editingHead_1d7h6_68:after{box-sizing:border-box}._grip_1d7h6_76,._grip_1d7h6_76:before,._grip_1d7h6_76:after{box-sizing:border-box}._title_1d7h6_81,._title_1d7h6_81:before,._title_1d7h6_81:after{box-sizing:border-box}._size_1d7h6_92,._size_1d7h6_92:before,._size_1d7h6_92:after{box-sizing:border-box}._item_1d7h6_100,._item_1d7h6_100:before,._item_1d7h6_100:after{box-sizing:border-box}._placeholder_1d7h6_110,._placeholder_1d7h6_110:before,._placeholder_1d7h6_110:after{box-sizing:border-box}._grid_1d7h6_116,._grid_1d7h6_116:before,._grid_1d7h6_116:after{box-sizing:border-box}._headingRow_1d7h6_133,._headingRow_1d7h6_133:before,._headingRow_1d7h6_133:after{box-sizing:border-box}._headingHead_1d7h6_138,._headingHead_1d7h6_138:before,._headingHead_1d7h6_138:after{box-sizing:border-box}._heading_1d7h6_133,._heading_1d7h6_133:before,._heading_1d7h6_133:after{box-sizing:border-box}._body_1d7h6_163,._body_1d7h6_163:before,._body_1d7h6_163:after{box-sizing:border-box}._options_1d7h6_189,._options_1d7h6_189:before,._options_1d7h6_189:after{box-sizing:border-box}._catalogue_1d7h6_194,._catalogue_1d7h6_194:before,._catalogue_1d7h6_194:after{box-sizing:border-box}._entry_1d7h6_202,._entry_1d7h6_202:before,._entry_1d7h6_202:after{box-sizing:border-box}._footprint_1d7h6_209,._footprint_1d7h6_209:before,._footprint_1d7h6_209:after{box-sizing:border-box}._entryText_1d7h6_221,._entryText_1d7h6_221:before,._entryText_1d7h6_221:after{box-sizing:border-box}._root_1d7h6_17{container-type:inline-size;width:100%;padding:0 var(--u-space-4) var(--u-space-4);border-radius:var(--u-radius-lg);corner-shape:squircle;--row-unit: var(--u-dashboard-row, round(max(50px, 3.125rem), 1px));--gap: var(--u-dashboard-gap, 12px)}._root_1d7h6_17[data-editing]{box-shadow:inset 0 0 0 2px var(--u-color-accent);outline:2px solid transparent;outline-offset:-2px}._bar_1d7h6_34{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--u-space-2);padding-block:var(--u-space-3)}._mode_1d7h6_43{margin-inline-end:auto;padding:5px var(--u-space-2);border-radius:var(--u-radius-xs);corner-shape:squircle;background:var(--u-color-accent);color:var(--u-color-on-accent);font-family:var(--u-font-mono);font-size:var(--u-text-xs);font-weight:var(--u-weight-medium);line-height:var(--u-leading-none);letter-spacing:var(--u-tracking-caps);text-transform:uppercase}._head_1d7h6_58{display:flex;align-items:center;gap:6px;min-width:0;min-height:calc(var(--u-control-height) + 2px);padding:var(--u-space-2) var(--u-space-2) 0 var(--u-space-3);border-radius:var(--u-radius-lg) var(--u-radius-lg) 0 0;corner-shape:squircle}._editingHead_1d7h6_68{padding-block-end:var(--u-space-1);background:var(--u-color-surface-pressed);touch-action:none;user-select:none;cursor:grab}._grip_1d7h6_76{flex:none;color:var(--u-color-text-muted)}._title_1d7h6_81{flex:1 1 auto;min-width:0;margin:0;overflow:hidden;font-size:var(--u-text-sm);font-weight:var(--u-weight-medium);white-space:nowrap;text-overflow:ellipsis}._size_1d7h6_92{font-family:var(--u-font-mono);font-size:var(--u-text-xs);line-height:var(--u-leading-none);color:var(--u-color-text-muted);white-space:nowrap}._item_1d7h6_100[data-dragging]{position:relative;z-index:5;box-shadow:var(--u-shadow-overlay)}._item_1d7h6_100[data-dragging] ._editingHead_1d7h6_68{cursor:grabbing}._placeholder_1d7h6_110{border:2px dashed var(--u-color-accent);border-radius:var(--u-radius-lg);corner-shape:squircle;background:var(--u-color-accent-subtle)}._grid_1d7h6_116{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:var(--row-unit);gap:var(--gap);max-width:var(--u-dashboard-max-width, 1560px)}._item_1d7h6_100{grid-column:var(--column) / span var(--columns);grid-row:var(--row) / span var(--rows);min-height:0;min-width:0}._headingRow_1d7h6_133{display:flex;align-items:stretch}._headingHead_1d7h6_138{flex:1 1 auto;align-items:flex-end;padding:0 var(--u-space-2) 0 2px;border-radius:var(--u-radius-md);corner-shape:squircle}._headingRow_1d7h6_133[data-editing] ._headingHead_1d7h6_138{align-items:center;padding-inline-start:var(--u-space-3);padding-block-end:0}._heading_1d7h6_133{flex:1 1 auto;min-width:0;margin:0;padding-block-end:calc(var(--u-space-1) + 2px);font-size:var(--u-text-lg)}._headingRow_1d7h6_133[data-editing] ._heading_1d7h6_133{padding-block-end:0}._body_1d7h6_163{flex:1 1 auto;min-height:0;padding:2px var(--u-space-3) 10px;overflow:hidden}._item_1d7h6_100[data-editing] ._body_1d7h6_163{padding-block-start:var(--u-space-2)}@container (max-width: 755px){._grid_1d7h6_116{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}._item_1d7h6_100{grid-column:1;grid-row:auto;order:var(--order, 0);height:calc(var(--rows) * var(--row-unit) + (var(--rows) - 1) * var(--gap))}}._options_1d7h6_189{min-width:16rem;padding:var(--u-space-3)}._catalogue_1d7h6_194{list-style:none;margin:0;padding:0;display:grid;gap:var(--u-space-3, 12px)}._entry_1d7h6_202{display:grid;grid-template-columns:4.5rem 1fr auto;align-items:center;gap:var(--u-space-3, 12px)}._footprint_1d7h6_209{aspect-ratio:3 / 1;border-radius:2px;corner-shape:squircle;box-shadow:var(--u-edge)}._footprint_1d7h6_209>span{box-sizing:border-box}._footprint_1d7h6_209>span{display:block;background:var(--u-color-accent, currentColor);opacity:.5}._entryText_1d7h6_221{display:grid}}
|
package/dist/dashboard.js
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import "./dashboard.css";
|
|
3
|
-
import { Component as
|
|
4
|
-
import { useWording as ae, FormField as ve, Input as Ce, Button as
|
|
5
|
-
import { jsx as a, jsxs as
|
|
6
|
-
const
|
|
3
|
+
import { Component as xe, useState as Z, useRef as O, useLayoutEffect as de, useMemo as oe, Children as ze, isValidElement as ie, useEffect as ne, useSyncExternalStore as ce, createElement as Me } from "react";
|
|
4
|
+
import { useWording as ae, FormField as ve, Input as Ce, Button as $, Text as K, GripGlyph as le, Heading as Se, Card as Ne, Drawer as ke, ModalHeader as He, ModalBody as Ee, Popover as Oe, announce as A, Menu as Re, MenuItem as U, MenuSeparator as se } from "@umriss-ui/core";
|
|
5
|
+
import { jsx as a, jsxs as E, Fragment as re } from "react/jsx-runtime";
|
|
6
|
+
const Te = (s, n) => (d) => {
|
|
7
7
|
const c = d.widgets.findIndex((t) => t.id === s), C = Math.max(0, Math.min(d.widgets.length - 1, n));
|
|
8
8
|
if (c < 0 || c === C) return d;
|
|
9
|
-
const
|
|
10
|
-
return
|
|
11
|
-
},
|
|
9
|
+
const x = [...d.widgets];
|
|
10
|
+
return x.splice(C, 0, ...x.splice(c, 1)), { ...d, widgets: x };
|
|
11
|
+
}, De = (s, n) => (d) => d.widgets.some((c) => c.id === s && c.size !== n) ? { ...d, widgets: d.widgets.map((c) => c.id === s ? { ...c, size: n } : c) } : d, Ie = (s) => (n) => n.widgets.some((d) => d.id === s) ? { ...n, widgets: n.widgets.filter((d) => d.id !== s) } : n, Le = (s, n) => {
|
|
12
12
|
let d = 1;
|
|
13
13
|
for (; s.widgets.some((c) => c.id === `${n}-${d}`); ) d++;
|
|
14
14
|
return `${n}-${d}`;
|
|
15
|
-
},
|
|
16
|
-
root:
|
|
17
|
-
bar:
|
|
18
|
-
mode:
|
|
19
|
-
head:
|
|
20
|
-
editingHead:
|
|
21
|
-
grip:
|
|
15
|
+
}, $e = (s) => (n) => ({ ...n, widgets: [...n.widgets, s] }), Ae = (s, n) => (d) => ({ ...d, widgets: d.widgets.map((c) => c.id === s ? { ...c, options: n } : c) }), Fe = "_root_1d7h6_17", Pe = "_bar_1d7h6_34", Be = "_mode_1d7h6_43", Ue = "_head_1d7h6_58", Ve = "_editingHead_1d7h6_68", je = "_grip_1d7h6_76", Ge = "_title_1d7h6_81", We = "_size_1d7h6_92", Ye = "_item_1d7h6_100", Xe = "_placeholder_1d7h6_110", Je = "_grid_1d7h6_116", Ke = "_headingRow_1d7h6_133", qe = "_headingHead_1d7h6_138", Qe = "_heading_1d7h6_133", Ze = "_body_1d7h6_163", et = "_options_1d7h6_189", tt = "_catalogue_1d7h6_194", nt = "_entry_1d7h6_202", st = "_footprint_1d7h6_209", rt = "_entryText_1d7h6_221", y = {
|
|
16
|
+
root: Fe,
|
|
17
|
+
bar: Pe,
|
|
18
|
+
mode: Be,
|
|
19
|
+
head: Ue,
|
|
20
|
+
editingHead: Ve,
|
|
21
|
+
grip: je,
|
|
22
22
|
title: Ge,
|
|
23
23
|
size: We,
|
|
24
24
|
item: Ye,
|
|
@@ -34,7 +34,7 @@ const Re = (s, n) => (d) => {
|
|
|
34
34
|
footprint: st,
|
|
35
35
|
entryText: rt
|
|
36
36
|
};
|
|
37
|
-
class ot extends
|
|
37
|
+
class ot extends xe {
|
|
38
38
|
state = { failed: !1 };
|
|
39
39
|
static getDerivedStateFromError() {
|
|
40
40
|
return { failed: !0 };
|
|
@@ -57,37 +57,37 @@ function ge(s, n) {
|
|
|
57
57
|
};
|
|
58
58
|
}
|
|
59
59
|
function me(s, n) {
|
|
60
|
-
const d = /* @__PURE__ */ new Set(), c = (
|
|
61
|
-
for (let h =
|
|
60
|
+
const d = /* @__PURE__ */ new Set(), c = (x, t, w, i) => {
|
|
61
|
+
for (let h = x; h < x + i; h++) for (let m = t; m < t + w; m++) if (d.has(h * n + m)) return !1;
|
|
62
62
|
return !0;
|
|
63
63
|
};
|
|
64
64
|
let C = 0;
|
|
65
|
-
return s.map((
|
|
66
|
-
const t = Math.min(
|
|
65
|
+
return s.map((x) => {
|
|
66
|
+
const t = Math.min(x.columns, n);
|
|
67
67
|
for (let w = C; ; w++) {
|
|
68
68
|
const i = Math.floor(w / n), h = w % n;
|
|
69
|
-
if (!(h + t > n || !c(i, h, t,
|
|
70
|
-
for (let m = i; m < i +
|
|
71
|
-
return C = w, { column: h, row: i, columns: t, rows:
|
|
69
|
+
if (!(h + t > n || !c(i, h, t, x.rows))) {
|
|
70
|
+
for (let m = i; m < i + x.rows; m++) for (let p = h; p < h + t; p++) d.add(m * n + p);
|
|
71
|
+
return C = w, { column: h, row: i, columns: t, rows: x.rows };
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
});
|
|
75
75
|
}
|
|
76
|
-
function at(s, n, d, c, C, { cell:
|
|
76
|
+
function at(s, n, d, c, C, { cell: x, unit: t, gap: w }) {
|
|
77
77
|
let i = d, h = 1 / 0;
|
|
78
78
|
for (let m = 0; m < s.length; m++) {
|
|
79
79
|
const p = [...s];
|
|
80
80
|
p.splice(m, 0, ...p.splice(d, 1));
|
|
81
|
-
const
|
|
81
|
+
const D = me(p, n)[m], k = (D.column * (x + w) - c) ** 2 + (D.row * (t + w) - C) ** 2;
|
|
82
82
|
k < h && (h = k, i = m);
|
|
83
83
|
}
|
|
84
84
|
return i;
|
|
85
85
|
}
|
|
86
86
|
const dt = { 3: "¼", 4: "⅓", 6: "½", 8: "⅔", 9: "¾" }, it = ({ columns: s }) => s >= 12 ? "" : dt[s] ?? `${s}/12`;
|
|
87
87
|
function ct({ grid: s, cards: n, shown: d, drop: c, cancelled: C }) {
|
|
88
|
-
const [
|
|
88
|
+
const [x, t] = Z(null), w = O(null), i = O({}), h = O(/* @__PURE__ */ new Map()), m = O(null), p = O({ update: () => {
|
|
89
89
|
}, finish: () => {
|
|
90
|
-
} }),
|
|
90
|
+
} }), D = () => {
|
|
91
91
|
const r = w.current, o = r && n.get(r.id);
|
|
92
92
|
if (!r || !m.current || !o) return;
|
|
93
93
|
const l = m.current.getBoundingClientRect();
|
|
@@ -97,16 +97,16 @@ function ct({ grid: s, cards: n, shown: d, drop: c, cancelled: C }) {
|
|
|
97
97
|
const r = /* @__PURE__ */ new Map(), o = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
98
98
|
for (const [l, g] of n) {
|
|
99
99
|
const M = h.current.get(l);
|
|
100
|
-
r.set(l, [g.offsetLeft, g.offsetTop]),
|
|
100
|
+
r.set(l, [g.offsetLeft, g.offsetTop]), x && !o && M && l !== x.id && (M[0] !== g.offsetLeft || M[1] !== g.offsetTop) && g.animate([{ transform: `translate(${M[0] - g.offsetLeft}px, ${M[1] - g.offsetTop}px)` }, { transform: "none" }], { duration: 150, easing: "ease-out" });
|
|
101
101
|
}
|
|
102
|
-
h.current = r,
|
|
102
|
+
h.current = r, x && D();
|
|
103
103
|
});
|
|
104
104
|
const k = () => {
|
|
105
105
|
const r = w.current, o = s.current, l = r && n.get(r.id);
|
|
106
106
|
if (!r || !o || !l) return;
|
|
107
|
-
const g = getComputedStyle(o), M = parseFloat(g.columnGap),
|
|
108
|
-
if (
|
|
109
|
-
r.target =
|
|
107
|
+
const g = getComputedStyle(o), M = parseFloat(g.columnGap), P = g.gridTemplateColumns.split(" ").length, R = o.getBoundingClientRect(), T = d[r.from].span, Y = { cell: (R.width - (P - 1) * M) / P, gap: M, unit: (l.offsetHeight - (T.rows - 1) * M) / T.rows }, L = at(d.map((j) => j.span), P, r.from, r.x - r.dx - R.left, r.y - r.dy - R.top, Y);
|
|
108
|
+
if (L === r.target) return D();
|
|
109
|
+
r.target = L, t({ id: r.id, target: L });
|
|
110
110
|
}, W = (r) => {
|
|
111
111
|
const o = w.current;
|
|
112
112
|
if (w.current = null, window.clearInterval(i.current.timer), i.current.escape && document.removeEventListener("keydown", i.current.escape), o && n.get(o.id)?.style.removeProperty("transform"), t(null), !!o?.started) {
|
|
@@ -117,12 +117,12 @@ function ct({ grid: s, cards: n, shown: d, drop: c, cancelled: C }) {
|
|
|
117
117
|
de(() => {
|
|
118
118
|
p.current = { update: k, finish: W };
|
|
119
119
|
});
|
|
120
|
-
const
|
|
120
|
+
const V = (r, o) => (l) => {
|
|
121
121
|
const g = l.target;
|
|
122
122
|
if (l.button > 0 || g.closest("button") || !l.currentTarget.contains(g)) return;
|
|
123
123
|
const M = n.get(r).getBoundingClientRect();
|
|
124
124
|
w.current = { id: r, from: o, x0: l.clientX, y0: l.clientY, x: l.clientX, y: l.clientY, dx: l.clientX - M.left, dy: l.clientY - M.top, started: !1, target: o }, l.currentTarget.setPointerCapture(l.pointerId);
|
|
125
|
-
},
|
|
125
|
+
}, F = (r) => {
|
|
126
126
|
const o = w.current;
|
|
127
127
|
if (o) {
|
|
128
128
|
if (o.x = r.clientX, o.y = r.clientY, !o.started) {
|
|
@@ -136,13 +136,13 @@ function ct({ grid: s, cards: n, shown: d, drop: c, cancelled: C }) {
|
|
|
136
136
|
}
|
|
137
137
|
};
|
|
138
138
|
return {
|
|
139
|
-
drag:
|
|
139
|
+
drag: x,
|
|
140
140
|
/** To go on the placeholder. */
|
|
141
141
|
placeholder: m,
|
|
142
142
|
/** The pointer handlers of a widget's head. */
|
|
143
143
|
handlers: (r, o) => ({
|
|
144
|
-
onPointerDown:
|
|
145
|
-
onPointerMove:
|
|
144
|
+
onPointerDown: V(r, o),
|
|
145
|
+
onPointerMove: F,
|
|
146
146
|
onPointerUp: () => p.current.finish(!0),
|
|
147
147
|
onPointerCancel: () => p.current.finish(!1)
|
|
148
148
|
})
|
|
@@ -179,86 +179,86 @@ function pt({ render: s, ...n }) {
|
|
|
179
179
|
const he = (s, n) => ({ "--column": s.column + 1, "--row": s.row + 1, "--columns": s.columns, "--rows": s.rows, "--order": n }), fe = (s) => s.columns * s.rows, ee = (s, n) => (d) => {
|
|
180
180
|
d ? s.set(n, d) : s.delete(n);
|
|
181
181
|
};
|
|
182
|
-
function gt({ view: s, editor: n, className: d, children: c, catalogue: C, ...
|
|
182
|
+
function gt({ view: s, editor: n, className: d, children: c, catalogue: C, ...x }) {
|
|
183
183
|
const t = ae(), w = oe(() => ft(t), [t]), i = /* @__PURE__ */ new Map();
|
|
184
184
|
for (const e of ze.toArray(c))
|
|
185
185
|
ie(e) && e.type === be ? i.set(e.props.name, e.props) : ie(e) && e.type === lt && i.set(w.name, w);
|
|
186
186
|
const { register: h } = n;
|
|
187
187
|
ne(() => h(i));
|
|
188
188
|
const m = ge(s, i), p = m.widgets.flatMap((e) => {
|
|
189
|
-
const u = i.get(e.type),
|
|
190
|
-
return u &&
|
|
191
|
-
}),
|
|
192
|
-
const S = m.widgets.findIndex((
|
|
193
|
-
S !== v && (n.step(
|
|
194
|
-
}, { drag: g, placeholder: M, handlers:
|
|
195
|
-
grid:
|
|
189
|
+
const u = i.get(e.type), _ = u?.sizes[e.size];
|
|
190
|
+
return u && _ ? [{ widget: e, type: u, span: _ }] : [];
|
|
191
|
+
}), D = O(null), [k] = Z(() => /* @__PURE__ */ new Map()), [W] = Z(() => /* @__PURE__ */ new Map()), [V] = Z(() => /* @__PURE__ */ new Map()), F = O(null), { editing: r } = n, o = m.widgets.length, l = (e, u, _) => {
|
|
192
|
+
const S = m.widgets.findIndex((I) => I.id === e), v = Math.max(0, Math.min(o - 1, _));
|
|
193
|
+
S !== v && (n.step(Te(e, v)), A(t.dashboardMoved(u, S + 1, v + 1, o)));
|
|
194
|
+
}, { drag: g, placeholder: M, handlers: P } = ct({
|
|
195
|
+
grid: D,
|
|
196
196
|
cards: k,
|
|
197
|
-
shown: p.map(({ widget: e, type: u, span:
|
|
197
|
+
shown: p.map(({ widget: e, type: u, span: _ }) => ({ id: e.id, span: _, title: q(u, e.options) })),
|
|
198
198
|
drop: (e, u) => {
|
|
199
|
-
const
|
|
200
|
-
l(e, q(
|
|
199
|
+
const _ = p.find((S) => S.widget.id === e);
|
|
200
|
+
l(e, q(_.type, _.widget.options), m.widgets.findIndex((S) => S.id === u));
|
|
201
201
|
},
|
|
202
|
-
cancelled: (e) =>
|
|
203
|
-
}),
|
|
204
|
-
|
|
205
|
-
const Y = me(
|
|
202
|
+
cancelled: (e) => A(t.dashboardDragCancelled(e))
|
|
203
|
+
}), R = g ? p.findIndex((e) => e.widget.id === g.id) : -1, T = p.map((e, u) => u);
|
|
204
|
+
R >= 0 && T.splice(g.target, 0, ...T.splice(R, 1));
|
|
205
|
+
const Y = me(T.map((e) => p[e].span), ue), L = p.map((e, u) => Y[T.indexOf(u)]), [j, b] = Z(null), f = O(null), z = O(null);
|
|
206
206
|
ne(() => {
|
|
207
207
|
z.current && (k.get(z.current)?.scrollIntoView?.({ block: "nearest" }), z.current = null);
|
|
208
208
|
});
|
|
209
|
-
const N =
|
|
209
|
+
const N = O(!1);
|
|
210
210
|
ne(() => {
|
|
211
|
-
N.current !== !1 && ((N.current === null ?
|
|
211
|
+
N.current !== !1 && ((N.current === null ? F.current : W.get(N.current))?.focus(), N.current = !1);
|
|
212
212
|
});
|
|
213
|
-
const
|
|
214
|
-
const u = { id:
|
|
215
|
-
z.current = u.id, n.step(
|
|
216
|
-
}, X =
|
|
213
|
+
const B = [...i.values()].filter((e) => !C || C.includes(e.name)), G = (e) => {
|
|
214
|
+
const u = { id: Le(m, e.name), type: e.name, size: e.start, options: e.defaultOptions };
|
|
215
|
+
z.current = u.id, n.step($e(u)), A(t.dashboardAdded(q(e, u.options), o + 1, o + 1));
|
|
216
|
+
}, X = j ? i.get(m.widgets.find((e) => e.id === j)?.type ?? "") : void 0, te = m.widgets.find((e) => e.id === j), we = (e, u, _, S) => r ? {
|
|
217
217
|
ref: ee(W, e.id),
|
|
218
|
-
className: Q(
|
|
219
|
-
...
|
|
218
|
+
className: Q(y.head, y.editingHead),
|
|
219
|
+
...P(e.id, _),
|
|
220
220
|
role: "group",
|
|
221
221
|
tabIndex: 0,
|
|
222
222
|
"aria-label": t.dashboardHead(u, S + 1, o),
|
|
223
223
|
onKeyDown: (v) => {
|
|
224
224
|
if (v.target !== v.currentTarget) return;
|
|
225
|
-
const
|
|
226
|
-
|
|
225
|
+
const I = { ArrowLeft: S - 1, ArrowUp: S - 1, ArrowRight: S + 1, ArrowDown: S + 1, Home: 0, End: o - 1 }[v.key];
|
|
226
|
+
I !== void 0 && (v.preventDefault(), l(e.id, u, I));
|
|
227
227
|
}
|
|
228
|
-
} : { className:
|
|
229
|
-
const
|
|
230
|
-
return /* @__PURE__ */
|
|
231
|
-
|
|
228
|
+
} : { className: y.head }, _e = (e, u, _, S, v) => {
|
|
229
|
+
const I = Object.entries(u.sizes).sort(([, H], [, J]) => fe(H) - fe(J));
|
|
230
|
+
return /* @__PURE__ */ E(
|
|
231
|
+
Re,
|
|
232
232
|
{
|
|
233
233
|
align: "end",
|
|
234
|
-
trigger: /* @__PURE__ */ a(
|
|
234
|
+
trigger: /* @__PURE__ */ a($, { ref: ee(V, e.id), size: "sm", variant: "ghost", "aria-label": t.dashboardMenu(_), children: /* @__PURE__ */ a("svg", { viewBox: "0 0 10 10", width: "10", height: "10", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", children: /* @__PURE__ */ a("path", { d: "M1.5 5h.01M5 5h.01M8.5 5h.01" }) }) }),
|
|
235
235
|
children: [
|
|
236
|
-
/* @__PURE__ */ a(
|
|
237
|
-
/* @__PURE__ */ a(
|
|
238
|
-
/* @__PURE__ */ a(
|
|
239
|
-
/* @__PURE__ */ a(
|
|
240
|
-
/* @__PURE__ */ a(
|
|
241
|
-
|
|
236
|
+
/* @__PURE__ */ a(U, { disabled: !0, children: t.dashboardPlace(v + 1, o) }),
|
|
237
|
+
/* @__PURE__ */ a(U, { disabled: v === 0, onSelect: () => l(e.id, _, 0), children: t.dashboardMoveStart }),
|
|
238
|
+
/* @__PURE__ */ a(U, { disabled: v === 0, onSelect: () => l(e.id, _, v - 1), children: t.dashboardMoveEarlier }),
|
|
239
|
+
/* @__PURE__ */ a(U, { disabled: v === o - 1, onSelect: () => l(e.id, _, v + 1), children: t.dashboardMoveLater }),
|
|
240
|
+
/* @__PURE__ */ a(U, { disabled: v === o - 1, onSelect: () => l(e.id, _, o - 1), children: t.dashboardMoveEnd }),
|
|
241
|
+
I.length > 1 && /* @__PURE__ */ E(re, { children: [
|
|
242
242
|
/* @__PURE__ */ a(se, {}),
|
|
243
|
-
|
|
244
|
-
|
|
243
|
+
I.map(([H, J]) => /* @__PURE__ */ a(
|
|
244
|
+
U,
|
|
245
245
|
{
|
|
246
|
-
"aria-current":
|
|
246
|
+
"aria-current": H === e.size || void 0,
|
|
247
247
|
onSelect: () => {
|
|
248
|
-
n.step(
|
|
248
|
+
n.step(De(e.id, H)), A(t.dashboardResized(_, t.dashboardSizes[H]));
|
|
249
249
|
},
|
|
250
|
-
children: t.dashboardSizeEntry(t.dashboardSizes[
|
|
250
|
+
children: t.dashboardSizeEntry(t.dashboardSizes[H], it(J), H === e.size)
|
|
251
251
|
},
|
|
252
|
-
|
|
252
|
+
H
|
|
253
253
|
))
|
|
254
254
|
] }),
|
|
255
|
-
u.form && /* @__PURE__ */
|
|
255
|
+
u.form && /* @__PURE__ */ E(re, { children: [
|
|
256
256
|
/* @__PURE__ */ a(se, {}),
|
|
257
257
|
/* @__PURE__ */ a(
|
|
258
|
-
|
|
258
|
+
U,
|
|
259
259
|
{
|
|
260
260
|
onSelect: () => {
|
|
261
|
-
f.current =
|
|
261
|
+
f.current = V.get(e.id) ?? null, b(e.id);
|
|
262
262
|
},
|
|
263
263
|
children: t.dashboardOptions
|
|
264
264
|
}
|
|
@@ -266,11 +266,11 @@ function gt({ view: s, editor: n, className: d, children: c, catalogue: C, ...y
|
|
|
266
266
|
] }),
|
|
267
267
|
/* @__PURE__ */ a(se, {}),
|
|
268
268
|
/* @__PURE__ */ a(
|
|
269
|
-
|
|
269
|
+
U,
|
|
270
270
|
{
|
|
271
271
|
tone: "danger",
|
|
272
272
|
onSelect: () => {
|
|
273
|
-
N.current = (p[S + 1] ?? p[S - 1])?.widget.id ?? null, n.step(
|
|
273
|
+
N.current = (p[S + 1] ?? p[S - 1])?.widget.id ?? null, n.step(Ie(e.id)), A(t.dashboardRemoved(_));
|
|
274
274
|
},
|
|
275
275
|
children: t.dashboardRemove
|
|
276
276
|
}
|
|
@@ -279,90 +279,90 @@ function gt({ view: s, editor: n, className: d, children: c, catalogue: C, ...y
|
|
|
279
279
|
}
|
|
280
280
|
);
|
|
281
281
|
};
|
|
282
|
-
return /* @__PURE__ */
|
|
283
|
-
n.allowed && /* @__PURE__ */ a("div", { className:
|
|
284
|
-
/* @__PURE__ */ a("span", { className:
|
|
285
|
-
/* @__PURE__ */ a(
|
|
286
|
-
/* @__PURE__ */ a(
|
|
287
|
-
/* @__PURE__ */ a(
|
|
288
|
-
/* @__PURE__ */ a(
|
|
289
|
-
/* @__PURE__ */ a(
|
|
290
|
-
/* @__PURE__ */ a(
|
|
291
|
-
] }) : /* @__PURE__ */ a(
|
|
282
|
+
return /* @__PURE__ */ E("div", { role: "group", className: Q(y.root, d), "data-editing": r || void 0, ...x, children: [
|
|
283
|
+
n.allowed && /* @__PURE__ */ a("div", { className: y.bar, children: r ? /* @__PURE__ */ E(re, { children: [
|
|
284
|
+
/* @__PURE__ */ a("span", { className: y.mode, children: t.dashboardEditing }),
|
|
285
|
+
/* @__PURE__ */ a($, { size: "sm", disabled: !n.canUndo, onClick: n.undo, children: t.dashboardUndo }),
|
|
286
|
+
/* @__PURE__ */ a($, { size: "sm", disabled: !n.canRedo, onClick: n.redo, children: t.dashboardRedo }),
|
|
287
|
+
/* @__PURE__ */ a($, { size: "sm", disabled: !n.canReset, onClick: n.reset, children: t.dashboardReset }),
|
|
288
|
+
/* @__PURE__ */ a($, { ref: F, size: "sm", onClick: () => n.setCatalogue(!0), children: t.dashboardAddWidget }),
|
|
289
|
+
/* @__PURE__ */ a($, { size: "sm", onClick: n.cancel, children: t.dashboardCancel }),
|
|
290
|
+
/* @__PURE__ */ a($, { size: "sm", variant: "primary", onClick: n.done, children: t.dashboardDone })
|
|
291
|
+
] }) : /* @__PURE__ */ a($, { size: "sm", onClick: n.edit, children: t.dashboardEdit }) }),
|
|
292
292
|
r && o === 0 && /* @__PURE__ */ a(K, { children: t.dashboardEmptyEditing }),
|
|
293
293
|
!r && o === 0 && /* @__PURE__ */ a(K, { children: t.dashboardEmpty }),
|
|
294
|
-
/* @__PURE__ */
|
|
295
|
-
p.map(({ widget: e, type: u },
|
|
296
|
-
const S = he(
|
|
297
|
-
return u === w ? /* @__PURE__ */ a("div", { ref: ee(k, e.id), className: Q(
|
|
298
|
-
r && /* @__PURE__ */ a(le, { className:
|
|
299
|
-
/* @__PURE__ */ a(Se, { level: 2, size: "lg", className:
|
|
294
|
+
/* @__PURE__ */ E("div", { className: y.grid, ref: D, children: [
|
|
295
|
+
p.map(({ widget: e, type: u }, _) => {
|
|
296
|
+
const S = he(L[_], T.indexOf(_)), v = q(u, e.options), I = m.widgets.findIndex((ye) => ye.id === e.id), H = we(e, v, _, I), J = r && _e(e, u, v, _, I);
|
|
297
|
+
return u === w ? /* @__PURE__ */ a("div", { ref: ee(k, e.id), className: Q(y.item, y.headingRow), style: S, "data-widget": e.id, "data-editing": r || void 0, "data-dragging": g?.id === e.id || void 0, children: /* @__PURE__ */ E("div", { ...H, className: Q(H.className, y.headingHead), children: [
|
|
298
|
+
r && /* @__PURE__ */ a(le, { className: y.grip }),
|
|
299
|
+
/* @__PURE__ */ a(Se, { level: 2, size: "lg", className: y.heading, children: e.options.text }),
|
|
300
300
|
J
|
|
301
|
-
] }) }, e.id) : /* @__PURE__ */
|
|
302
|
-
/* @__PURE__ */
|
|
303
|
-
r && /* @__PURE__ */ a(le, { className:
|
|
304
|
-
/* @__PURE__ */ a("h2", { className:
|
|
305
|
-
r && /* @__PURE__ */ a("span", { className:
|
|
301
|
+
] }) }, e.id) : /* @__PURE__ */ E(Ne, { ref: ee(k, e.id), className: y.item, style: S, "data-widget": e.id, "data-editing": r || void 0, "data-dragging": g?.id === e.id || void 0, "aria-label": v, children: [
|
|
302
|
+
/* @__PURE__ */ E("div", { ...H, children: [
|
|
303
|
+
r && /* @__PURE__ */ a(le, { className: y.grip }),
|
|
304
|
+
/* @__PURE__ */ a("h2", { className: y.title, children: v }),
|
|
305
|
+
r && /* @__PURE__ */ a("span", { className: y.size, children: t.dashboardSizes[e.size] }),
|
|
306
306
|
J
|
|
307
307
|
] }),
|
|
308
|
-
/* @__PURE__ */ a("div", { className:
|
|
308
|
+
/* @__PURE__ */ a("div", { className: y.body, inert: r, children: /* @__PURE__ */ a(ot, { size: e.size, options: e.options, fallback: /* @__PURE__ */ a(K, { tone: "secondary", children: t.dashboardFailed }), children: /* @__PURE__ */ a(pt, { render: u.children, size: e.size, options: e.options }) }) })
|
|
309
309
|
] }, e.id);
|
|
310
310
|
}),
|
|
311
|
-
|
|
311
|
+
R >= 0 && /* @__PURE__ */ a("div", { ref: M, "aria-hidden": "true", "data-placeholder": !0, className: Q(y.item, y.placeholder), style: he(L[R], g.target) })
|
|
312
312
|
] }),
|
|
313
|
-
/* @__PURE__ */
|
|
314
|
-
/* @__PURE__ */ a(
|
|
315
|
-
/* @__PURE__ */ a(
|
|
313
|
+
/* @__PURE__ */ E(ke, { open: n.catalogue, onClose: () => n.setCatalogue(!1), children: [
|
|
314
|
+
/* @__PURE__ */ a(He, { title: t.dashboardCatalogue, description: t.dashboardCatalogueSentence }),
|
|
315
|
+
/* @__PURE__ */ a(Ee, { children: /* @__PURE__ */ a("ul", { className: y.catalogue, children: B.map((e) => {
|
|
316
316
|
const u = e.sizes[e.start];
|
|
317
|
-
return /* @__PURE__ */
|
|
318
|
-
/* @__PURE__ */ a("div", { className:
|
|
319
|
-
/* @__PURE__ */
|
|
317
|
+
return /* @__PURE__ */ E("li", { className: y.entry, children: [
|
|
318
|
+
/* @__PURE__ */ a("div", { className: y.footprint, role: "img", "aria-label": t.dashboardFootprint(u.columns, u.rows), children: /* @__PURE__ */ a("span", { style: { width: `${u.columns / ue * 100}%`, height: `${Math.min(1, u.rows / 4) * 100}%` } }) }),
|
|
319
|
+
/* @__PURE__ */ E("div", { className: y.entryText, children: [
|
|
320
320
|
/* @__PURE__ */ a(K, { as: "strong", weight: "semibold", children: e.label }),
|
|
321
321
|
/* @__PURE__ */ a(K, { as: "span", size: "sm", tone: "secondary", children: e.sentence })
|
|
322
322
|
] }),
|
|
323
|
-
/* @__PURE__ */ a(
|
|
323
|
+
/* @__PURE__ */ a($, { size: "sm", "aria-label": t.dashboardAddType(e.label), onClick: () => G(e), children: t.dashboardAdd })
|
|
324
324
|
] }, e.name);
|
|
325
325
|
}) }) })
|
|
326
326
|
] }),
|
|
327
|
-
X?.form && te && /* @__PURE__ */ a(
|
|
327
|
+
X?.form && te && /* @__PURE__ */ a(Oe, { open: !0, anchorRef: f, align: "end", onOpenChange: () => b(null), role: "dialog", ariaLabel: t.dashboardOptions, children: /* @__PURE__ */ a("div", { className: y.options, children: X.form({
|
|
328
328
|
options: te.options,
|
|
329
329
|
change: (e) => {
|
|
330
|
-
n.step(
|
|
330
|
+
n.step(Ae(te.id, e)), A(t.dashboardOptionsChanged(q(X, e)));
|
|
331
331
|
}
|
|
332
332
|
}) }) })
|
|
333
333
|
] });
|
|
334
334
|
}
|
|
335
335
|
const pe = (s, n) => JSON.stringify(s) === JSON.stringify(n);
|
|
336
|
-
function
|
|
337
|
-
const
|
|
338
|
-
|
|
339
|
-
const t =
|
|
336
|
+
function _t({ defaultView: s, initialView: n, allowEdit: d = !0, onViewChange: c, onDraftChange: C }) {
|
|
337
|
+
const x = O(null);
|
|
338
|
+
x.current ??= { state: { view: n ?? s, draft: null, known: 0 }, listeners: /* @__PURE__ */ new Set(), types: /* @__PURE__ */ new Map(), signature: "" };
|
|
339
|
+
const t = x.current, w = ae(), i = O({ defaultView: s, allowEdit: d, onViewChange: c, onDraftChange: C, wording: w });
|
|
340
340
|
i.current = { defaultView: s, allowEdit: d, onViewChange: c, onDraftChange: C, wording: w };
|
|
341
341
|
const h = oe(() => {
|
|
342
|
-
const
|
|
342
|
+
const V = (b) => (t.listeners.add(b), () => void t.listeners.delete(b)), F = () => t.state, r = (b) => {
|
|
343
343
|
t.state = b, t.listeners.forEach((f) => f());
|
|
344
344
|
}, o = (b) => t.types.size ? ge(b, t.types) : b, l = () => {
|
|
345
345
|
!i.current.allowEdit || t.state.draft || (r({ ...t.state, draft: { steps: [o(t.state.view)], at: 0 } }), i.current.onDraftChange?.(!0));
|
|
346
346
|
}, g = (b) => {
|
|
347
347
|
const { view: f, draft: z } = t.state;
|
|
348
348
|
if (!z) return;
|
|
349
|
-
const N = z.steps[z.at],
|
|
350
|
-
r({ ...t.state, view:
|
|
349
|
+
const N = z.steps[z.at], B = b && !pe(N, o(f));
|
|
350
|
+
r({ ...t.state, view: B ? N : f, draft: null, catalogue: !1 }), i.current.onDraftChange?.(!1);
|
|
351
351
|
const { wording: G } = i.current;
|
|
352
|
-
|
|
352
|
+
A(b ? B ? G.dashboardKept : G.dashboardLeft : G.dashboardCancelled), B && i.current.onViewChange?.(N);
|
|
353
353
|
}, M = (b) => {
|
|
354
354
|
t.state.draft && r({ ...t.state, catalogue: b });
|
|
355
|
-
},
|
|
355
|
+
}, P = (b) => {
|
|
356
356
|
const { draft: f } = t.state;
|
|
357
357
|
if (!f) return;
|
|
358
358
|
const z = f.steps[f.at], N = b(z);
|
|
359
359
|
N !== z && r({ ...t.state, draft: { steps: [...f.steps.slice(0, f.at + 1), N], at: f.at + 1 } });
|
|
360
|
-
},
|
|
360
|
+
}, R = (b, f) => {
|
|
361
361
|
const { draft: z } = t.state;
|
|
362
|
-
z?.steps[z.at + b] && (r({ ...t.state, draft: { ...z, at: z.at + b } }),
|
|
363
|
-
},
|
|
364
|
-
t.state.draft && (
|
|
365
|
-
},
|
|
362
|
+
z?.steps[z.at + b] && (r({ ...t.state, draft: { ...z, at: z.at + b } }), A(f));
|
|
363
|
+
}, T = () => R(-1, i.current.wording.dashboardUndone), Y = () => R(1, i.current.wording.dashboardRedone), L = () => {
|
|
364
|
+
t.state.draft && (P(() => o(i.current.defaultView)), A(i.current.wording.dashboardResetDone));
|
|
365
|
+
}, j = (b, f, z) => ({
|
|
366
366
|
allowed: b,
|
|
367
367
|
editing: f !== null,
|
|
368
368
|
edit: l,
|
|
@@ -372,26 +372,26 @@ function xt({ defaultView: s, initialView: n, allowEdit: d = !0, onViewChange: c
|
|
|
372
372
|
setCatalogue: M,
|
|
373
373
|
register: (N) => {
|
|
374
374
|
t.types = N;
|
|
375
|
-
const
|
|
376
|
-
|
|
375
|
+
const B = [...N].map(([G, X]) => `${G}:${X.start}:${JSON.stringify(X.sizes)}`).join("|");
|
|
376
|
+
B !== t.signature && (t.signature = B, r({ ...t.state, known: t.state.known + 1 }));
|
|
377
377
|
},
|
|
378
|
-
step:
|
|
379
|
-
undo:
|
|
378
|
+
step: P,
|
|
379
|
+
undo: T,
|
|
380
380
|
redo: Y,
|
|
381
|
-
reset:
|
|
381
|
+
reset: L,
|
|
382
382
|
canUndo: !!f && f.at > 0,
|
|
383
383
|
canRedo: !!f && f.at < f.steps.length - 1,
|
|
384
384
|
canReset: !!f && !pe(f.steps[f.at], o(i.current.defaultView))
|
|
385
385
|
});
|
|
386
386
|
return {
|
|
387
|
-
get:
|
|
388
|
-
subscribe:
|
|
387
|
+
get: F,
|
|
388
|
+
subscribe: V,
|
|
389
389
|
edit: l,
|
|
390
390
|
done: () => g(!0),
|
|
391
391
|
cancel: () => g(!1),
|
|
392
|
-
undo:
|
|
392
|
+
undo: T,
|
|
393
393
|
redo: Y,
|
|
394
|
-
reset:
|
|
394
|
+
reset: L,
|
|
395
395
|
catalogue: () => M(!0),
|
|
396
396
|
read: o,
|
|
397
397
|
setView: (b) => {
|
|
@@ -399,11 +399,11 @@ function xt({ defaultView: s, initialView: n, allowEdit: d = !0, onViewChange: c
|
|
|
399
399
|
r({ ...t.state, view: f, draft: t.state.draft ? { steps: [f], at: 0 } : null });
|
|
400
400
|
},
|
|
401
401
|
Dashboard: (b) => {
|
|
402
|
-
const { view: f, draft: z, catalogue: N } = ce(
|
|
403
|
-
return Me(gt, { ...b, view: z ? z.steps[z.at] : f, editor:
|
|
402
|
+
const { view: f, draft: z, catalogue: N } = ce(V, F, F);
|
|
403
|
+
return Me(gt, { ...b, view: z ? z.steps[z.at] : f, editor: j(i.current.allowEdit, z, !!N) });
|
|
404
404
|
}
|
|
405
405
|
};
|
|
406
|
-
}, [t]), { view: m, draft: p, known:
|
|
406
|
+
}, [t]), { view: m, draft: p, known: D } = ce(h.subscribe, h.get, h.get), k = p ? p.steps[p.at] : m, W = oe(() => h.read(k), [h, k, D]);
|
|
407
407
|
return {
|
|
408
408
|
Dashboard: h.Dashboard,
|
|
409
409
|
WidgetType: be,
|
|
@@ -422,5 +422,5 @@ function xt({ defaultView: s, initialView: n, allowEdit: d = !0, onViewChange: c
|
|
|
422
422
|
export {
|
|
423
423
|
lt as HeadingType,
|
|
424
424
|
be as WidgetType,
|
|
425
|
-
|
|
425
|
+
_t as useDashboard
|
|
426
426
|
};
|
package/docs/llms-full.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# @umriss-ui/dashboard 0.40.
|
|
1
|
+
# @umriss-ui/dashboard 0.40.4
|
|
2
2
|
|
|
3
3
|
> React dashboard for data-dense applications - widgets a reader arranges, packed in order on twelve columns.
|
|
4
4
|
|
|
@@ -49,9 +49,10 @@ function Dot({ verdict }: { verdict: Verdict }) {
|
|
|
49
49
|
function Kz({ value, unit, verdict, note }: { value: string; unit?: string; verdict: Verdict; note: string }) {
|
|
50
50
|
return (
|
|
51
51
|
<div style={{ display: "flex", flexDirection: "column", justifyContent: "center", gap: "var(--u-space-1)", height: "100%", minWidth: 0 }}>
|
|
52
|
-
<Text as="div" size="2xl" weight="semibold" leading="tight" style={{ fontVariantNumeric: "tabular-nums"
|
|
52
|
+
<Text as="div" size="2xl" weight="semibold" leading="tight" style={{ fontVariantNumeric: "tabular-nums" }}>
|
|
53
53
|
{value}
|
|
54
|
-
{unit
|
|
54
|
+
{/* The unit keeps its words together and goes under the value where the tile is too narrow for both. */}
|
|
55
|
+
{unit && <Text as="span" size="sm" tone="muted" style={{ marginInlineStart: "var(--u-space-1)", fontWeight: "var(--u-weight-regular)", whiteSpace: "nowrap" }}>{unit}</Text>}
|
|
55
56
|
</Text>
|
|
56
57
|
<Text as="div" size="xs" tone="secondary" style={{ display: "flex", alignItems: "center", gap: 6, whiteSpace: "nowrap" }}>
|
|
57
58
|
<Dot verdict={verdict} />
|
|
@@ -442,9 +443,10 @@ function Dot({ verdict }: { verdict: Verdict }) {
|
|
|
442
443
|
function Kz({ value, unit, verdict, note }: { value: string; unit?: string; verdict: Verdict; note: string }) {
|
|
443
444
|
return (
|
|
444
445
|
<div style={{ display: "flex", flexDirection: "column", justifyContent: "center", gap: "var(--u-space-1)", height: "100%", minWidth: 0 }}>
|
|
445
|
-
<Text as="div" size="2xl" weight="semibold" leading="tight" style={{ fontVariantNumeric: "tabular-nums"
|
|
446
|
+
<Text as="div" size="2xl" weight="semibold" leading="tight" style={{ fontVariantNumeric: "tabular-nums" }}>
|
|
446
447
|
{value}
|
|
447
|
-
{unit
|
|
448
|
+
{/* The unit keeps its words together and goes under the value where the tile is too narrow for both. */}
|
|
449
|
+
{unit && <Text as="span" size="sm" tone="muted" style={{ marginInlineStart: "var(--u-space-1)", fontWeight: "var(--u-weight-regular)", whiteSpace: "nowrap" }}>{unit}</Text>}
|
|
448
450
|
</Text>
|
|
449
451
|
<Text as="div" size="xs" tone="secondary" style={{ display: "flex", alignItems: "center", gap: 6, whiteSpace: "nowrap" }}>
|
|
450
452
|
<Dot verdict={verdict} />
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umriss-ui/dashboard",
|
|
3
|
-
"version": "0.40.
|
|
3
|
+
"version": "0.40.4",
|
|
4
4
|
"description": "React dashboard for data-dense applications - widgets a reader arranges, packed in order on twelve columns.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Roman Händler",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"peerDependencies": {
|
|
46
46
|
"react": ">=19",
|
|
47
47
|
"react-dom": ">=19",
|
|
48
|
-
"@umriss-ui/core": "^0.40.
|
|
48
|
+
"@umriss-ui/core": "^0.40.4"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@fontsource/geist-mono": "^5.3.0",
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"typescript": "^5.6.3",
|
|
60
60
|
"vite": "^6.0.0",
|
|
61
61
|
"vite-plugin-dts": "^4.3.0",
|
|
62
|
-
"@umriss-ui/core": "0.40.
|
|
62
|
+
"@umriss-ui/core": "0.40.4",
|
|
63
63
|
"@umriss-ui/demo": "0.0.0"
|
|
64
64
|
},
|
|
65
65
|
"scripts": {
|