@graview/primitives 0.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/LICENSE +96 -0
- package/README.md +25 -0
- package/dist/arrange-bar.d.ts +49 -0
- package/dist/arrange-bar.d.ts.map +1 -0
- package/dist/arrange-bar.js +264 -0
- package/dist/arrange-bar.js.map +1 -0
- package/dist/chat.d.ts +46 -0
- package/dist/chat.d.ts.map +1 -0
- package/dist/chat.js +343 -0
- package/dist/chat.js.map +1 -0
- package/dist/companion.d.ts +58 -0
- package/dist/companion.d.ts.map +1 -0
- package/dist/companion.js +433 -0
- package/dist/companion.js.map +1 -0
- package/dist/connections.d.ts +23 -0
- package/dist/connections.d.ts.map +1 -0
- package/dist/connections.js +100 -0
- package/dist/connections.js.map +1 -0
- package/dist/default-views.d.ts +35 -0
- package/dist/default-views.d.ts.map +1 -0
- package/dist/default-views.js +605 -0
- package/dist/default-views.js.map +1 -0
- package/dist/editable.d.ts +71 -0
- package/dist/editable.d.ts.map +1 -0
- package/dist/editable.js +225 -0
- package/dist/editable.js.map +1 -0
- package/dist/figure.d.ts +30 -0
- package/dist/figure.d.ts.map +1 -0
- package/dist/figure.js +66 -0
- package/dist/figure.js.map +1 -0
- package/dist/find.d.ts +5 -0
- package/dist/find.d.ts.map +1 -0
- package/dist/find.js +252 -0
- package/dist/find.js.map +1 -0
- package/dist/index.d.ts +51 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +44 -0
- package/dist/index.js.map +1 -0
- package/dist/installation.d.ts +17 -0
- package/dist/installation.d.ts.map +1 -0
- package/dist/installation.js +37 -0
- package/dist/installation.js.map +1 -0
- package/dist/ladder.d.ts +2 -0
- package/dist/ladder.d.ts.map +1 -0
- package/dist/ladder.js +53 -0
- package/dist/ladder.js.map +1 -0
- package/dist/lens/arranging.d.ts +41 -0
- package/dist/lens/arranging.d.ts.map +1 -0
- package/dist/lens/arranging.js +38 -0
- package/dist/lens/arranging.js.map +1 -0
- package/dist/lens/board.d.ts +146 -0
- package/dist/lens/board.d.ts.map +1 -0
- package/dist/lens/board.js +658 -0
- package/dist/lens/board.js.map +1 -0
- package/dist/lens/calendar-dates.d.ts +19 -0
- package/dist/lens/calendar-dates.d.ts.map +1 -0
- package/dist/lens/calendar-dates.js +55 -0
- package/dist/lens/calendar-dates.js.map +1 -0
- package/dist/lens/calendar-drawing.d.ts +59 -0
- package/dist/lens/calendar-drawing.d.ts.map +1 -0
- package/dist/lens/calendar-drawing.js +229 -0
- package/dist/lens/calendar-drawing.js.map +1 -0
- package/dist/lens/calendar-options.d.ts +107 -0
- package/dist/lens/calendar-options.d.ts.map +1 -0
- package/dist/lens/calendar-options.js +19 -0
- package/dist/lens/calendar-options.js.map +1 -0
- package/dist/lens/calendar-placing.d.ts +35 -0
- package/dist/lens/calendar-placing.d.ts.map +1 -0
- package/dist/lens/calendar-placing.js +113 -0
- package/dist/lens/calendar-placing.js.map +1 -0
- package/dist/lens/calendar-spans.d.ts +48 -0
- package/dist/lens/calendar-spans.d.ts.map +1 -0
- package/dist/lens/calendar-spans.js +146 -0
- package/dist/lens/calendar-spans.js.map +1 -0
- package/dist/lens/calendar-view.d.ts +34 -0
- package/dist/lens/calendar-view.d.ts.map +1 -0
- package/dist/lens/calendar-view.js +228 -0
- package/dist/lens/calendar-view.js.map +1 -0
- package/dist/lens/calendar.d.ts +43 -0
- package/dist/lens/calendar.d.ts.map +1 -0
- package/dist/lens/calendar.js +43 -0
- package/dist/lens/calendar.js.map +1 -0
- package/dist/lens/coverage.d.ts +183 -0
- package/dist/lens/coverage.d.ts.map +1 -0
- package/dist/lens/coverage.js +732 -0
- package/dist/lens/coverage.js.map +1 -0
- package/dist/lens/horizon.d.ts +14 -0
- package/dist/lens/horizon.d.ts.map +1 -0
- package/dist/lens/horizon.js +20 -0
- package/dist/lens/horizon.js.map +1 -0
- package/dist/lens/more.d.ts +16 -0
- package/dist/lens/more.d.ts.map +1 -0
- package/dist/lens/more.js +17 -0
- package/dist/lens/more.js.map +1 -0
- package/dist/lens/plan-lens.d.ts +17 -0
- package/dist/lens/plan-lens.d.ts.map +1 -0
- package/dist/lens/plan-lens.js +24 -0
- package/dist/lens/plan-lens.js.map +1 -0
- package/dist/lens/plan-state.d.ts +122 -0
- package/dist/lens/plan-state.d.ts.map +1 -0
- package/dist/lens/plan-state.js +152 -0
- package/dist/lens/plan-state.js.map +1 -0
- package/dist/lens/plan-view.d.ts +10 -0
- package/dist/lens/plan-view.d.ts.map +1 -0
- package/dist/lens/plan-view.js +576 -0
- package/dist/lens/plan-view.js.map +1 -0
- package/dist/lens/plan.d.ts +25 -0
- package/dist/lens/plan.d.ts.map +1 -0
- package/dist/lens/plan.js +25 -0
- package/dist/lens/plan.js.map +1 -0
- package/dist/lens/reach.d.ts +47 -0
- package/dist/lens/reach.d.ts.map +1 -0
- package/dist/lens/reach.js +67 -0
- package/dist/lens/reach.js.map +1 -0
- package/dist/lens/timeline.d.ts +137 -0
- package/dist/lens/timeline.d.ts.map +1 -0
- package/dist/lens/timeline.js +426 -0
- package/dist/lens/timeline.js.map +1 -0
- package/dist/markup.d.ts +23 -0
- package/dist/markup.d.ts.map +1 -0
- package/dist/markup.js +24 -0
- package/dist/markup.js.map +1 -0
- package/dist/places.d.ts +24 -0
- package/dist/places.d.ts.map +1 -0
- package/dist/places.js +227 -0
- package/dist/places.js.map +1 -0
- package/dist/popover.d.ts +28 -0
- package/dist/popover.d.ts.map +1 -0
- package/dist/popover.js +59 -0
- package/dist/popover.js.map +1 -0
- package/dist/primitives/index.d.ts +214 -0
- package/dist/primitives/index.d.ts.map +1 -0
- package/dist/primitives/index.js +381 -0
- package/dist/primitives/index.js.map +1 -0
- package/dist/profile.d.ts +65 -0
- package/dist/profile.d.ts.map +1 -0
- package/dist/profile.js +233 -0
- package/dist/profile.js.map +1 -0
- package/dist/quick-relations.d.ts +16 -0
- package/dist/quick-relations.d.ts.map +1 -0
- package/dist/quick-relations.js +183 -0
- package/dist/quick-relations.js.map +1 -0
- package/dist/relation-key.d.ts +44 -0
- package/dist/relation-key.d.ts.map +1 -0
- package/dist/relation-key.js +196 -0
- package/dist/relation-key.js.map +1 -0
- package/dist/seat.d.ts +137 -0
- package/dist/seat.d.ts.map +1 -0
- package/dist/seat.js +162 -0
- package/dist/seat.js.map +1 -0
- package/dist/seats.d.ts +21 -0
- package/dist/seats.d.ts.map +1 -0
- package/dist/seats.js +62 -0
- package/dist/seats.js.map +1 -0
- package/dist/seeding.d.ts +150 -0
- package/dist/seeding.d.ts.map +1 -0
- package/dist/seeding.js +538 -0
- package/dist/seeding.js.map +1 -0
- package/dist/shell.d.ts +74 -0
- package/dist/shell.d.ts.map +1 -0
- package/dist/shell.js +86 -0
- package/dist/shell.js.map +1 -0
- package/dist/theme.d.ts +50 -0
- package/dist/theme.d.ts.map +1 -0
- package/dist/theme.js +1692 -0
- package/dist/theme.js.map +1 -0
- package/dist/wordmark.d.ts +15 -0
- package/dist/wordmark.d.ts.map +1 -0
- package/dist/wordmark.js +55 -0
- package/dist/wordmark.js.map +1 -0
- package/dist/workbench/activity.d.ts +75 -0
- package/dist/workbench/activity.d.ts.map +1 -0
- package/dist/workbench/activity.js +259 -0
- package/dist/workbench/activity.js.map +1 -0
- package/dist/workbench/agent-seat.d.ts +51 -0
- package/dist/workbench/agent-seat.d.ts.map +1 -0
- package/dist/workbench/agent-seat.js +112 -0
- package/dist/workbench/agent-seat.js.map +1 -0
- package/dist/workbench/answer-args.d.ts +31 -0
- package/dist/workbench/answer-args.d.ts.map +1 -0
- package/dist/workbench/answer-args.js +257 -0
- package/dist/workbench/answer-args.js.map +1 -0
- package/dist/workbench/back-out.d.ts +71 -0
- package/dist/workbench/back-out.d.ts.map +1 -0
- package/dist/workbench/back-out.js +238 -0
- package/dist/workbench/back-out.js.map +1 -0
- package/dist/workbench/following.d.ts +7 -0
- package/dist/workbench/following.d.ts.map +1 -0
- package/dist/workbench/following.js +26 -0
- package/dist/workbench/following.js.map +1 -0
- package/dist/workbench/index.d.ts +23 -0
- package/dist/workbench/index.d.ts.map +1 -0
- package/dist/workbench/index.js +23 -0
- package/dist/workbench/index.js.map +1 -0
- package/dist/workbench/inspector.d.ts +27 -0
- package/dist/workbench/inspector.d.ts.map +1 -0
- package/dist/workbench/inspector.js +745 -0
- package/dist/workbench/inspector.js.map +1 -0
- package/dist/workbench/standing.d.ts +16 -0
- package/dist/workbench/standing.d.ts.map +1 -0
- package/dist/workbench/standing.js +102 -0
- package/dist/workbench/standing.js.map +1 -0
- package/dist/workbench/trail.d.ts +35 -0
- package/dist/workbench/trail.d.ts.map +1 -0
- package/dist/workbench/trail.js +150 -0
- package/dist/workbench/trail.js.map +1 -0
- package/package.json +62 -0
|
@@ -0,0 +1,381 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useViewMode } from "@graview/react";
|
|
3
|
+
import { useEffect, useRef, useState } from "react";
|
|
4
|
+
const TONES = {
|
|
5
|
+
default: { background: "var(--graview-panel, #ffffff)", color: "var(--graview-ink, #1a1a1a)" },
|
|
6
|
+
muted: { background: "var(--graview-panel-muted, #f7f5f1)", color: "var(--graview-ink, #1a1a1a)" },
|
|
7
|
+
warning: { background: "var(--graview-panel-warning, #fdf3ec)", color: "var(--graview-ink, #1a1a1a)" },
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* Secondary text: a COLOUR, never an opacity.
|
|
11
|
+
*
|
|
12
|
+
* `opacity: 0.7` on small text reads as "quieter" and computes as whatever
|
|
13
|
+
* the background happens to be — which is how four elements here landed at
|
|
14
|
+
* 3.32:1 against a 4.5:1 requirement without anyone choosing an unreadable
|
|
15
|
+
* colour. A token composites against a known ground and can be checked.
|
|
16
|
+
* axe-core checks it on every run of `scripts/run-a11y.mjs`.
|
|
17
|
+
*/
|
|
18
|
+
export const MUTED_TEXT = { color: "var(--graview-ink-muted, #55514a)" };
|
|
19
|
+
/** Even quieter, still above 4.5:1 on both panel grounds. */
|
|
20
|
+
export const FAINT_TEXT = { color: "var(--graview-ink-faint, #625d55)" };
|
|
21
|
+
/**
|
|
22
|
+
* Whether an element has more content than it is showing.
|
|
23
|
+
*
|
|
24
|
+
* Measured rather than assumed, because the answer decides whether the
|
|
25
|
+
* element becomes a tab stop. A scroll region with nothing focusable inside
|
|
26
|
+
* it is unreachable by keyboard — but making every panel focusable would put
|
|
27
|
+
* a stop in front of every card whether or not there is anything to scroll
|
|
28
|
+
* to, which is the same mistake as the matrix's empty cells.
|
|
29
|
+
*
|
|
30
|
+
* BOTH AXES. The scroller is `overflow: auto`, which scrolls sideways as
|
|
31
|
+
* readily as down, and this asked about height alone — so at a phone's width,
|
|
32
|
+
* where a panel overflows across rather than below, the region scrolled and
|
|
33
|
+
* never became a stop. axe found it (`scrollable-region-focusable`) at 390px
|
|
34
|
+
* on two screens of a real product; nothing found it at desk width because
|
|
35
|
+
* at desk width the question never comes up.
|
|
36
|
+
*/
|
|
37
|
+
function useOverflowing(ref) {
|
|
38
|
+
const [overflowing, setOverflowing] = useState(false);
|
|
39
|
+
useEffect(() => {
|
|
40
|
+
const element = ref.current;
|
|
41
|
+
if (!element || typeof ResizeObserver === "undefined")
|
|
42
|
+
return;
|
|
43
|
+
const check = () => setOverflowing(element.scrollHeight > element.clientHeight + 1 ||
|
|
44
|
+
element.scrollWidth > element.clientWidth + 1);
|
|
45
|
+
check();
|
|
46
|
+
const observer = new ResizeObserver(check);
|
|
47
|
+
observer.observe(element);
|
|
48
|
+
for (const child of element.children)
|
|
49
|
+
observer.observe(child);
|
|
50
|
+
return () => observer.disconnect();
|
|
51
|
+
// No dependency list: children change shape as the graph does, and this
|
|
52
|
+
// has to stay true across those without every caller remembering to say so.
|
|
53
|
+
});
|
|
54
|
+
return overflowing;
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* THE ROOM A VIEW HAS, in pixels, or null before the first measurement.
|
|
58
|
+
*
|
|
59
|
+
* A lens is drawn into whatever box the layout gives it — the focus card
|
|
60
|
+
* in a 360px embed, a billboard, a page's column — and the ones that laid
|
|
61
|
+
* themselves out for a desk (a 316px label column, seven day columns) were
|
|
62
|
+
* unreadable in half of them. The width is the fact they need to choose a
|
|
63
|
+
* shape by; this is the one place it is read.
|
|
64
|
+
*/
|
|
65
|
+
export function useWidth(ref) {
|
|
66
|
+
const [width, setWidth] = useState(null);
|
|
67
|
+
useEffect(() => {
|
|
68
|
+
const element = ref.current;
|
|
69
|
+
if (!element || typeof ResizeObserver === "undefined")
|
|
70
|
+
return;
|
|
71
|
+
const read = () => setWidth(Math.round(element.getBoundingClientRect().width));
|
|
72
|
+
read();
|
|
73
|
+
const observer = new ResizeObserver(read);
|
|
74
|
+
observer.observe(element);
|
|
75
|
+
return () => observer.disconnect();
|
|
76
|
+
}, [ref]);
|
|
77
|
+
return width;
|
|
78
|
+
}
|
|
79
|
+
/** The default container: a titled box. Most views are one of these. */
|
|
80
|
+
/** A panel's title: a heading of the level asked for, else the label it has always been. */
|
|
81
|
+
function Title({ level, style, children }) {
|
|
82
|
+
if (level === undefined)
|
|
83
|
+
return _jsx("strong", { style: style, children: children });
|
|
84
|
+
const Tag = `h${level}`;
|
|
85
|
+
return _jsx(Tag, { style: { margin: 0, ...style }, children: children });
|
|
86
|
+
}
|
|
87
|
+
export function Panel({ title, subtitle, meta, selected, tone = "default", children, style, fit = false, variant, heading, }) {
|
|
88
|
+
const scroller = useRef(null);
|
|
89
|
+
const overflowing = useOverflowing(scroller);
|
|
90
|
+
/*
|
|
91
|
+
* A page unless the panel says otherwise, when it is ON a page.
|
|
92
|
+
*
|
|
93
|
+
* The two-mode contract asked every view author to thread `mode` into every
|
|
94
|
+
* primitive, and three apps in, the app-written views were still drawing a
|
|
95
|
+
* card — border, shadow, card-sized heading — in the middle of a full
|
|
96
|
+
* screen. A contract only the framework's own views keep is not a contract.
|
|
97
|
+
* An explicit `variant` still wins; this is what happens when a view says
|
|
98
|
+
* nothing, which is most of the time.
|
|
99
|
+
*/
|
|
100
|
+
const mode = useViewMode();
|
|
101
|
+
const page = (variant ?? (mode === "fullscreen" ? "page" : "card")) === "page";
|
|
102
|
+
return (_jsxs("div", { "data-graview-primitive": "panel", "data-graview-variant": page ? "page" : "card", "data-selected": selected || undefined, style: {
|
|
103
|
+
display: "flex",
|
|
104
|
+
flexDirection: "column",
|
|
105
|
+
gap: page ? 12 : "var(--graview-gap, 7px)",
|
|
106
|
+
height: page || fit ? "auto" : "100%",
|
|
107
|
+
maxHeight: page ? "none" : "100%",
|
|
108
|
+
padding: page ? 0 : "var(--graview-pad, 15px)",
|
|
109
|
+
boxSizing: "border-box",
|
|
110
|
+
// The brand's own shape. A bid desk is square; a household is round.
|
|
111
|
+
borderRadius: page ? 0 : "var(--graview-radius, 12px)",
|
|
112
|
+
// A lit edge over the panel's own ground. Not `backdrop-filter`: a
|
|
113
|
+
// captured subtree has nothing behind it, so the effect is a no-op on
|
|
114
|
+
// the GPU path and the panel would differ between renderers.
|
|
115
|
+
border: page
|
|
116
|
+
? "none"
|
|
117
|
+
: `1px solid ${selected ? "var(--graview-accent, #2f6f5e)" : "var(--graview-edge, #e4e0d8)"}`,
|
|
118
|
+
boxShadow: page
|
|
119
|
+
? "none"
|
|
120
|
+
: selected
|
|
121
|
+
? "0 0 0 1px var(--graview-accent-dim), var(--graview-lift-low)"
|
|
122
|
+
: "var(--graview-lift-low)",
|
|
123
|
+
overflow: page ? "visible" : "hidden",
|
|
124
|
+
...TONES[tone],
|
|
125
|
+
...(page ? { background: "transparent" } : {}),
|
|
126
|
+
// The panel's own ground, handed to the scroll shadow so its cover
|
|
127
|
+
// gradients match whatever tone this panel is.
|
|
128
|
+
["--graview-panel-bg"]: TONES[tone].background,
|
|
129
|
+
...style,
|
|
130
|
+
}, children: [tone === "warning" ? (_jsx("span", { "data-graview-broken": "", style: VISUALLY_HIDDEN, children: "Implicated in a problem." })) : null, title === undefined ? null : (
|
|
131
|
+
/*
|
|
132
|
+
* THE HEADING WRAPS RATHER THAN RUNNING OFF THE EDGE.
|
|
133
|
+
*
|
|
134
|
+
* Both halves of this row are sized in `rem` — as everything here
|
|
135
|
+
* now is — so a reader on Largest doubles them, and on a phone
|
|
136
|
+
* "The rotation · 2026–2029" reached eight pixels past the screen.
|
|
137
|
+
* A row that cannot fit its own words on one line puts the second
|
|
138
|
+
* half on the next one; nothing is lost and nothing hangs off the
|
|
139
|
+
* side. The same answer the bar gives at the same width.
|
|
140
|
+
*/
|
|
141
|
+
_jsxs("div", { style: { display: "flex", alignItems: "baseline", flexWrap: "wrap", gap: 8, minWidth: 0 }, children: [tone === "warning" ? (_jsx("span", { "aria-hidden": "true", title: "Implicated in a problem", style: { color: "var(--graview-warn)", flex: "0 0 auto" }, children: "\u26A0" })) : null, _jsx(Title, { level: heading, style: {
|
|
142
|
+
/*
|
|
143
|
+
* A panel's title is the HEADING of this product.
|
|
144
|
+
*
|
|
145
|
+
* The display face was reaching the wordmark and nothing else,
|
|
146
|
+
* because the stylesheet gives it to `h1`–`h4` and a panel title
|
|
147
|
+
* is a `strong`. So a brand could name a serif and see it once,
|
|
148
|
+
* in eleven-pixel letterspaced caps at the top left. This is the
|
|
149
|
+
* largest text most screens have.
|
|
150
|
+
*/
|
|
151
|
+
fontFamily: "var(--graview-font-display, inherit)",
|
|
152
|
+
// A document's heading, not a card's label.
|
|
153
|
+
fontSize: page ? "1.5625rem" : "0.9375rem",
|
|
154
|
+
lineHeight: page ? 1.15 : 1.25,
|
|
155
|
+
fontWeight: page ? 600 : 560,
|
|
156
|
+
letterSpacing: page ? "-0.012em" : "0.005em",
|
|
157
|
+
// A long title gives ground before the row does.
|
|
158
|
+
minWidth: 0,
|
|
159
|
+
overflowWrap: "anywhere",
|
|
160
|
+
}, children: title }), meta === undefined ? null : (_jsx("span", { style: {
|
|
161
|
+
marginLeft: "auto",
|
|
162
|
+
fontSize: "0.75rem",
|
|
163
|
+
letterSpacing: "0.08em",
|
|
164
|
+
textTransform: "uppercase",
|
|
165
|
+
minWidth: 0,
|
|
166
|
+
overflowWrap: "anywhere",
|
|
167
|
+
...FAINT_TEXT,
|
|
168
|
+
}, children: meta }))] })), subtitle === undefined ? null : (_jsx("div", { style: { fontSize: page ? "0.90625rem" : "0.8125rem", lineHeight: 1.5, ...MUTED_TEXT }, children: subtitle })), _jsx("div", { ref: scroller,
|
|
169
|
+
// A page does not scroll inside itself — the page scrolls — so it must
|
|
170
|
+
// not carry the scroll region's cover gradients either. They paint the
|
|
171
|
+
// panel's own ground, which on a page is a white band across a
|
|
172
|
+
// document that has no card behind it.
|
|
173
|
+
className: page ? undefined : "graview-scroll", ...(overflowing && !page
|
|
174
|
+
? {
|
|
175
|
+
tabIndex: 0,
|
|
176
|
+
role: "region",
|
|
177
|
+
...(typeof title === "string" ? { "aria-label": title } : {}),
|
|
178
|
+
}
|
|
179
|
+
: {}), style: {
|
|
180
|
+
display: "flex",
|
|
181
|
+
flexDirection: "column",
|
|
182
|
+
gap: page ? 22 : "var(--graview-gap, 7px)",
|
|
183
|
+
flex: "1 1 auto",
|
|
184
|
+
// A page never scrolls inside itself: the page scrolls.
|
|
185
|
+
...(page ? { overflow: "visible" } : {}),
|
|
186
|
+
/*
|
|
187
|
+
* A CUT ROW AND A SCROLLED ROW LOOK THE SAME, and only one of them
|
|
188
|
+
* is all right.
|
|
189
|
+
*
|
|
190
|
+
* A card's chips sliced flat across the bottom edge read as
|
|
191
|
+
* broken — somebody reported it as text being cut off, which is
|
|
192
|
+
* exactly what it looks like — when in fact the panel scrolls and
|
|
193
|
+
* nothing is lost. The tab stop above says so to a keyboard and to
|
|
194
|
+
* a screen reader; this says the same thing to an eye. A few
|
|
195
|
+
* pixels of fade is the oldest way there is to write "there is
|
|
196
|
+
* more of this", and it costs nothing when there is not.
|
|
197
|
+
*/
|
|
198
|
+
/*
|
|
199
|
+
* Painted, not masked: the fade is the theme's (`.graview-scroll`
|
|
200
|
+
* with `data-graview-overflowing`), a strip of the panel's own
|
|
201
|
+
* ground that sticks to the bottom. A mask made the whole scroller
|
|
202
|
+
* its own offscreen layer — a cost on every frame it moved — and
|
|
203
|
+
* a layer painted before the rows arrived stayed painted: the
|
|
204
|
+
* tracklists panel drew solid black until something repainted it.
|
|
205
|
+
*/
|
|
206
|
+
}, "data-graview-overflowing": overflowing && !page ? "" : undefined, children: children })] }));
|
|
207
|
+
}
|
|
208
|
+
/**
|
|
209
|
+
* A PARAGRAPH WHOSE LINKS ARE TARGETS TOO.
|
|
210
|
+
*
|
|
211
|
+
* An inline link in a sentence is a link however it reads, and a harness
|
|
212
|
+
* measuring every control found one at 194x17 in a product's own prose — the
|
|
213
|
+
* text is sized in rem, the fingertip floor is not, and a line of body copy
|
|
214
|
+
* is shorter than a fingertip. Every app that ran the audit found this, and
|
|
215
|
+
* each one fixed it in its own stylesheet.
|
|
216
|
+
*
|
|
217
|
+
* `inline-flex` with the floor, so a link in a paragraph is as pressable as
|
|
218
|
+
* a button without the sentence changing shape around it.
|
|
219
|
+
*/
|
|
220
|
+
export function Prose({ children, style }) {
|
|
221
|
+
return (_jsxs("div", { "data-graview-primitive": "prose", style: { fontSize: "1rem", lineHeight: 1.6, ...style }, children: [_jsx("style", { children: `[data-graview-primitive="prose"] a { display: inline-flex; align-items: center; min-height: max(1.5rem, 24px); }` }), children] }));
|
|
222
|
+
}
|
|
223
|
+
/**
|
|
224
|
+
* Present to a screen reader, absent to the eye — the one idiom, written
|
|
225
|
+
* once.
|
|
226
|
+
*
|
|
227
|
+
* Written out by hand in two places, which meant two shapes for the same
|
|
228
|
+
* decision and no way for a harness to tell either of them from a caption
|
|
229
|
+
* that had genuinely been cut off. `scripts/survey-ui.mjs` reported both as
|
|
230
|
+
* "overflowing" on every screen of every app, twenty lines of noise that a
|
|
231
|
+
* real clipped caption would have hidden behind.
|
|
232
|
+
*/
|
|
233
|
+
export const VISUALLY_HIDDEN = {
|
|
234
|
+
position: "absolute",
|
|
235
|
+
width: 1,
|
|
236
|
+
height: 1,
|
|
237
|
+
overflow: "hidden",
|
|
238
|
+
clip: "rect(0 0 0 0)",
|
|
239
|
+
clipPath: "inset(50%)",
|
|
240
|
+
whiteSpace: "nowrap",
|
|
241
|
+
};
|
|
242
|
+
/** One small labelled thing. The glyph-fidelity workhorse. */
|
|
243
|
+
export function Chip({ label, hue, selected, title, pickId, emphasis }) {
|
|
244
|
+
// A cut chip must be able to say the rest somewhere, or cutting it loses
|
|
245
|
+
// information rather than tidying it. Whether it is cut is the container's
|
|
246
|
+
// decision, not the label's length: an eighteen-character rotation in a
|
|
247
|
+
// twenty-five-pixel calendar cell was cut to "Br…" and carried no title,
|
|
248
|
+
// because only a label past twenty-eight characters used to get one.
|
|
249
|
+
const full = typeof label === "string" ? label : undefined;
|
|
250
|
+
// Hue identifies the kind; luminance carries the reading. A chip is an
|
|
251
|
+
// outline with a trace of its hue behind it, so a dozen of them together
|
|
252
|
+
// stay a list rather than becoming confetti.
|
|
253
|
+
const tint = hue === undefined ? undefined : Math.round(hue);
|
|
254
|
+
return (_jsxs("span", { "data-graview-primitive": "chip", "data-selected": selected || undefined, "data-graview-pick": pickId, "data-graview-emphasis": emphasis, title: title ?? full, style: {
|
|
255
|
+
cursor: pickId ? "pointer" : undefined,
|
|
256
|
+
display: "inline-flex",
|
|
257
|
+
alignItems: "center",
|
|
258
|
+
// A chip is a label, never a bar. As a direct child of a column flex
|
|
259
|
+
// container it would otherwise stretch edge to edge, which is how
|
|
260
|
+
// "dropoff" ended up as a 700-pixel-wide pill.
|
|
261
|
+
alignSelf: "flex-start",
|
|
262
|
+
// A chip that stands for a node is a target, and a target is at least
|
|
263
|
+
// a fingertip tall. The extra pixel either side costs nothing and
|
|
264
|
+
// takes every navigable chip over the line.
|
|
265
|
+
minHeight: 24,
|
|
266
|
+
boxSizing: "border-box",
|
|
267
|
+
padding: "3px 9px",
|
|
268
|
+
borderRadius: 999,
|
|
269
|
+
fontSize: "0.8125rem",
|
|
270
|
+
lineHeight: 1.5,
|
|
271
|
+
whiteSpace: "nowrap",
|
|
272
|
+
/*
|
|
273
|
+
* A chip is a SMALL labelled thing. One that is a thousand pixels wide
|
|
274
|
+
* is not a chip, it is a sentence with a border — which is what a
|
|
275
|
+
* rationale rendered at glyph fidelity became, overflowing its card by
|
|
276
|
+
* 938 pixels and out into the scene.
|
|
277
|
+
*
|
|
278
|
+
* The cap lives here; the ELLIPSIS lives on the inner span, because
|
|
279
|
+
* `text-overflow` does not apply to a flex container. Set here it did
|
|
280
|
+
* nothing and the text was cut mid-word with no mark at all — which is
|
|
281
|
+
* worse than not capping it, since a hard edge reads as a bug and an
|
|
282
|
+
* ellipsis reads as a decision.
|
|
283
|
+
*
|
|
284
|
+
* And never wider than what holds it: a chip standing for a record in
|
|
285
|
+
* a band slot 175 pixels wide ran 28ch over the next slot's chip.
|
|
286
|
+
*/
|
|
287
|
+
maxWidth: "min(28ch, 100%)",
|
|
288
|
+
overflow: "hidden",
|
|
289
|
+
letterSpacing: "0.01em",
|
|
290
|
+
// Lightness and alpha come from the THEME: the same tint that reads
|
|
291
|
+
// as a lit outline in the dark reads as a wash on paper, and a fixed
|
|
292
|
+
// pair only ever works in one of them.
|
|
293
|
+
border: `1px solid ${selected
|
|
294
|
+
? "var(--graview-accent)"
|
|
295
|
+
: tint === undefined
|
|
296
|
+
? "var(--graview-edge)"
|
|
297
|
+
: `hsl(${tint} 55% var(--graview-tint-lightness) / 0.45)`}`,
|
|
298
|
+
background: tint === undefined
|
|
299
|
+
? "var(--graview-panel-muted)"
|
|
300
|
+
: `hsl(${tint} 55% var(--graview-tint-lightness) / calc(var(--graview-tint-alpha) * 0.65))`,
|
|
301
|
+
color: "var(--graview-ink, #1a1a1a)",
|
|
302
|
+
boxShadow: selected ? "0 0 14px -4px var(--graview-accent)" : undefined,
|
|
303
|
+
}, children: [tint === undefined ? null : (_jsx("span", { "aria-hidden": "true", style: {
|
|
304
|
+
width: 6,
|
|
305
|
+
height: 6,
|
|
306
|
+
borderRadius: 999,
|
|
307
|
+
flex: "0 0 auto",
|
|
308
|
+
marginRight: 6,
|
|
309
|
+
background: `hsl(${tint} 55% var(--graview-tint-lightness) / 0.9)`,
|
|
310
|
+
} })), _jsx("span", { style: {
|
|
311
|
+
minWidth: 0,
|
|
312
|
+
overflow: "hidden",
|
|
313
|
+
textOverflow: "ellipsis",
|
|
314
|
+
whiteSpace: "nowrap",
|
|
315
|
+
}, children: label })] }));
|
|
316
|
+
}
|
|
317
|
+
/**
|
|
318
|
+
* A list of chips that degrades honestly: past `max` it says how many more
|
|
319
|
+
* rather than truncating silently, because "and 9 more" is information and a
|
|
320
|
+
* clipped list is a lie.
|
|
321
|
+
*/
|
|
322
|
+
export function Roster({ items, max = 8, selectedIds = [], pick = false }) {
|
|
323
|
+
const shown = items.slice(0, max);
|
|
324
|
+
const hidden = items.length - shown.length;
|
|
325
|
+
return (_jsxs("div", { "data-graview-primitive": "roster", style: { display: "flex", flexWrap: "wrap", gap: 6, alignContent: "flex-start" }, children: [shown.map((item) => (_jsx(Chip, { label: item.label, ...(item.hue === undefined ? {} : { hue: item.hue }), ...(pick ? { pickId: item.id } : {}), ...(item.emphasis === undefined ? {} : { emphasis: item.emphasis }), selected: selectedIds.includes(item.id) }, item.id))), hidden > 0 ? _jsx(Chip, { label: `+${hidden} more` }) : null] }));
|
|
326
|
+
}
|
|
327
|
+
/**
|
|
328
|
+
* A group standing in for a kind.
|
|
329
|
+
*
|
|
330
|
+
* First-class, not a scale fallback: "People" is a legitimate view of a kind,
|
|
331
|
+
* which is why expanding it is the same mechanism as collapsing back.
|
|
332
|
+
*/
|
|
333
|
+
export function Aggregate({ label, count, items, onExpand, flagged }) {
|
|
334
|
+
return (_jsx(Panel, { title: label, meta: flagged ? `⚠ ${count}` : count, tone: flagged ? "warning" : "muted", style: onExpand ? { cursor: "zoom-in" } : undefined, children: items && items.length > 0 ? _jsx(Roster, { items: items, max: 6, pick: true }) : null }));
|
|
335
|
+
}
|
|
336
|
+
/** Labelled ticks along one dimension. The timeline's hours and days. */
|
|
337
|
+
export function Axis({ ticks, orientation = "vertical", extent }) {
|
|
338
|
+
const horizontal = orientation === "horizontal";
|
|
339
|
+
return (_jsx("div", { "data-graview-primitive": "axis", style: { position: "relative", width: "100%", height: "100%", fontSize: "0.75rem", ...FAINT_TEXT }, children: ticks.map((tick) => (_jsx("div", { style: {
|
|
340
|
+
position: "absolute",
|
|
341
|
+
...(horizontal
|
|
342
|
+
? { left: `${(tick.at / extent) * 100}%`, top: 0 }
|
|
343
|
+
: { top: `${(tick.at / extent) * 100}%`, left: 0 }),
|
|
344
|
+
}, children: tick.label }, String(tick.label)))) }));
|
|
345
|
+
}
|
|
346
|
+
/** Named columns over a continuous cross axis. A week over hours. */
|
|
347
|
+
export function Grid({ columns, extent, gutter = 46, children }) {
|
|
348
|
+
return (_jsxs("div", { "data-graview-primitive": "grid", style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [_jsx("div", { style: {
|
|
349
|
+
display: "flex",
|
|
350
|
+
paddingLeft: gutter,
|
|
351
|
+
paddingBottom: 6,
|
|
352
|
+
borderBottom: "1px solid var(--graview-edge, #e4e0d8)",
|
|
353
|
+
}, children: columns.map((column) => (_jsx("div", { style: {
|
|
354
|
+
flex: 1,
|
|
355
|
+
fontSize: "0.75rem",
|
|
356
|
+
letterSpacing: "0.14em",
|
|
357
|
+
textTransform: "uppercase",
|
|
358
|
+
textAlign: "center",
|
|
359
|
+
...MUTED_TEXT,
|
|
360
|
+
}, children: column.label }, column.id))) }), _jsx("div", { style: {
|
|
361
|
+
position: "relative",
|
|
362
|
+
flex: 1,
|
|
363
|
+
minHeight: 0,
|
|
364
|
+
marginLeft: gutter,
|
|
365
|
+
// Column rules and hour rules, drawn as a background rather than as
|
|
366
|
+
// elements: a measured surface costs nothing and adds no nodes for
|
|
367
|
+
// the capture pass to rasterise.
|
|
368
|
+
backgroundImage: `repeating-linear-gradient(to right, var(--graview-edge) 0 1px, transparent 1px calc(100% / ${columns.length})), repeating-linear-gradient(to bottom, var(--graview-edge) 0 1px, transparent 1px 12.5%)`,
|
|
369
|
+
backgroundSize: `100% 100%, 100% 100%`,
|
|
370
|
+
}, "data-graview-extent": extent, children: children })] }));
|
|
371
|
+
}
|
|
372
|
+
const DASHES = {
|
|
373
|
+
solid: undefined,
|
|
374
|
+
dashed: "6 4",
|
|
375
|
+
dotted: "1 4",
|
|
376
|
+
};
|
|
377
|
+
/** One drawn relationship. Stroke treatment carries the edge's meaning. */
|
|
378
|
+
export function Connector({ x1, y1, x2, y2, kind, pattern = "solid", hue, width = 1.5, }) {
|
|
379
|
+
return (_jsx("line", { "data-graview-primitive": "connector", "data-graview-connector": kind, x1: x1, y1: y1, x2: x2, y2: y2, stroke: hue === undefined ? "currentColor" : `hsl(${Math.round(hue)} 40% 40%)`, strokeWidth: width, strokeDasharray: DASHES[pattern], strokeLinecap: "round", opacity: 0.7 }));
|
|
380
|
+
}
|
|
381
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/primitives/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAsC,MAAM,OAAO,CAAC;AAsDxF,MAAM,KAAK,GAA2D;IACpE,OAAO,EAAE,EAAE,UAAU,EAAE,+BAA+B,EAAE,KAAK,EAAE,6BAA6B,EAAE;IAC9F,KAAK,EAAE,EAAE,UAAU,EAAE,qCAAqC,EAAE,KAAK,EAAE,6BAA6B,EAAE;IAClG,OAAO,EAAE,EAAE,UAAU,EAAE,uCAAuC,EAAE,KAAK,EAAE,6BAA6B,EAAE;CACvG,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,UAAU,GAAkB,EAAE,KAAK,EAAE,mCAAmC,EAAE,CAAC;AAExF,6DAA6D;AAC7D,MAAM,CAAC,MAAM,UAAU,GAAkB,EAAE,KAAK,EAAE,mCAAmC,EAAE,CAAC;AAExF;;;;;;;;;;;;;;;GAeG;AACH,SAAS,cAAc,CAAC,GAAoC;IAC1D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC;QAC5B,IAAI,CAAC,OAAO,IAAI,OAAO,cAAc,KAAK,WAAW;YAAE,OAAO;QAC9D,MAAM,KAAK,GAAG,GAAG,EAAE,CACjB,cAAc,CACZ,OAAO,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,GAAG,CAAC;YAC7C,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,GAAG,CAAC,CAChD,CAAC;QACJ,KAAK,EAAE,CAAC;QACR,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,KAAK,CAAC,CAAC;QAC3C,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAC1B,KAAK,MAAM,KAAK,IAAI,OAAO,CAAC,QAAQ;YAAE,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAC9D,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;QACnC,wEAAwE;QACxE,4EAA4E;IAC9E,CAAC,CAAC,CAAC;IACH,OAAO,WAAW,CAAC;AACrB,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,QAAQ,CAAC,GAAoC;IAC3D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IACxD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC;QAC5B,IAAI,CAAC,OAAO,IAAI,OAAO,cAAc,KAAK,WAAW;YAAE,OAAO;QAC9D,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;QAC/E,IAAI,EAAE,CAAC;QACP,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,CAAC;QAC1C,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAC1B,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IACrC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IACV,OAAO,KAAK,CAAC;AACf,CAAC;AAED,wEAAwE;AACxE,4FAA4F;AAC5F,SAAS,KAAK,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAA8G;IACnJ,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,iBAAQ,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAU,CAAC;IAC1E,MAAM,GAAG,GAAG,IAAI,KAAK,EAAW,CAAC;IACjC,OAAO,KAAC,GAAG,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,KAAK,EAAE,YAAG,QAAQ,GAAO,CAAC;AAC/D,CAAC;AAED,MAAM,UAAU,KAAK,CAAC,EACpB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,IAAI,GAAG,SAAS,EAChB,QAAQ,EACR,KAAK,EACL,GAAG,GAAG,KAAK,EACX,OAAO,EACP,OAAO,GACI;IACX,MAAM,QAAQ,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;IAC7C;;;;;;;;;OASG;IACH,MAAM,IAAI,GAAG,WAAW,EAAE,CAAC;IAC3B,MAAM,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,MAAM,CAAC;IAC/E,OAAO,CACL,yCACyB,OAAO,0BACR,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,mBAC7B,QAAQ,IAAI,SAAS,EACpC,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,yBAAyB;YAC1C,MAAM,EAAE,IAAI,IAAI,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;YACrC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;YACjC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,0BAA0B;YAC9C,SAAS,EAAE,YAAY;YACvB,qEAAqE;YACrE,YAAY,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,6BAA6B;YACtD,mEAAmE;YACnE,sEAAsE;YACtE,6DAA6D;YAC7D,MAAM,EAAE,IAAI;gBACV,CAAC,CAAC,MAAM;gBACR,CAAC,CAAC,aACE,QAAQ,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,8BAChD,EAAE;YACN,SAAS,EAAE,IAAI;gBACb,CAAC,CAAC,MAAM;gBACR,CAAC,CAAC,QAAQ;oBACR,CAAC,CAAC,8DAA8D;oBAChE,CAAC,CAAC,yBAAyB;YAC/B,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;YACrC,GAAG,KAAK,CAAC,IAAI,CAAC;YACd,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YAC9C,mEAAmE;YACnE,+CAA+C;YAC/C,CAAC,oBAA8B,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,UAAU;YACxD,GAAG,KAAK;SACT,aAcA,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CACpB,sCAA0B,EAAE,EAAC,KAAK,EAAE,eAAe,yCAE5C,CACR,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;YAC5B;;;;;;;;;gBASI;YACJ,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,aAC3F,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CACpB,8BAAkB,MAAM,EAAC,KAAK,EAAC,yBAAyB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,qBAAqB,EAAE,IAAI,EAAE,UAAU,EAAE,uBAE3G,CACR,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,KAAK,IACJ,KAAK,EAAE,OAAO,EACd,KAAK,EAAE;4BACL;;;;;;;;+BAQG;4BACH,UAAU,EAAE,sCAAsC;4BAClD,4CAA4C;4BAC5C,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;4BAC1C,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;4BAC9B,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;4BAC5B,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS;4BAC5C,iDAAiD;4BACjD,QAAQ,EAAE,CAAC;4BACX,YAAY,EAAE,UAAU;yBACzB,YAEA,KAAK,GACA,EACP,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC3B,eACE,KAAK,EAAE;4BACL,UAAU,EAAE,MAAM;4BAClB,QAAQ,EAAE,SAAS;4BACnB,aAAa,EAAE,QAAQ;4BACvB,aAAa,EAAE,WAAW;4BAC1B,QAAQ,EAAE,CAAC;4BACX,YAAY,EAAE,UAAU;4BACxB,GAAG,UAAU;yBACd,YAEA,IAAI,GACA,CACR,IACG,CACP,EACA,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC/B,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,EAAE,UAAU,EAAE,GAAG,EAAE,GAAG,UAAU,EAAE,YACxF,QAAQ,GACL,CACP,EAUD,cACE,GAAG,EAAE,QAAQ;gBACb,uEAAuE;gBACvE,uEAAuE;gBACvE,+DAA+D;gBAC/D,uCAAuC;gBACvC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,KAG1C,CAAC,WAAW,IAAI,CAAC,IAAI;oBACvB,CAAC,CAAC;wBACE,QAAQ,EAAE,CAAC;wBACX,IAAI,EAAE,QAAQ;wBACd,GAAG,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;qBAC9D;oBACH,CAAC,CAAC,EAAE,CAAC,EACP,KAAK,EAAE;oBACL,OAAO,EAAE,MAAM;oBACf,aAAa,EAAE,QAAQ;oBACvB,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,yBAAyB;oBAC1C,IAAI,EAAE,UAAU;oBAChB,wDAAwD;oBACxD,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;oBACxC;;;;;;;;;;;uBAWG;oBACH;;;;;;;uBAOG;iBACJ,8BACyB,WAAW,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,YAE9D,QAAQ,GACL,IACF,CACP,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAoE;IACzG,OAAO,CACL,yCACyB,OAAO,EAC9B,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,aAEtD,0BAAQ,kHAAkH,GAAS,EAClI,QAAQ,IACL,CACP,CAAC;AACJ,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,eAAe;IACrB,QAAQ,EAAE,YAAY;IACtB,UAAU,EAAE,QAAQ;CACY,CAAC;AA6BnC,8DAA8D;AAC9D,MAAM,UAAU,IAAI,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAa;IAC/E,yEAAyE;IACzE,2EAA2E;IAC3E,wEAAwE;IACxE,yEAAyE;IACzE,qEAAqE;IACrE,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3D,uEAAuE;IACvE,yEAAyE;IACzE,6CAA6C;IAC7C,MAAM,IAAI,GAAG,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC7D,OAAO,CACL,0CACyB,MAAM,mBACd,QAAQ,IAAI,SAAS,uBACjB,MAAM,2BACF,QAAQ,EAC/B,KAAK,EAAE,KAAK,IAAI,IAAI,EACpB,KAAK,EAAE;YACL,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YACtC,OAAO,EAAE,aAAa;YACtB,UAAU,EAAE,QAAQ;YACpB,qEAAqE;YACrE,kEAAkE;YAClE,+CAA+C;YAC/C,SAAS,EAAE,YAAY;YACvB,sEAAsE;YACtE,kEAAkE;YAClE,4CAA4C;YAC5C,SAAS,EAAE,EAAE;YACb,SAAS,EAAE,YAAY;YACvB,OAAO,EAAE,SAAS;YAClB,YAAY,EAAE,GAAG;YACjB,QAAQ,EAAE,WAAW;YACrB,UAAU,EAAE,GAAG;YACf,UAAU,EAAE,QAAQ;YACpB;;;;;;;;;;;;;;eAcG;YACH,QAAQ,EAAE,iBAAiB;YAC3B,QAAQ,EAAE,QAAQ;YAClB,aAAa,EAAE,QAAQ;YACvB,oEAAoE;YACpE,qEAAqE;YACrE,uCAAuC;YACvC,MAAM,EAAE,aACN,QAAQ;gBACN,CAAC,CAAC,uBAAuB;gBACzB,CAAC,CAAC,IAAI,KAAK,SAAS;oBAClB,CAAC,CAAC,qBAAqB;oBACvB,CAAC,CAAC,OAAO,IAAI,4CACnB,EAAE;YACF,UAAU,EACR,IAAI,KAAK,SAAS;gBAChB,CAAC,CAAC,4BAA4B;gBAC9B,CAAC,CAAC,OAAO,IAAI,8EAA8E;YAC/F,KAAK,EAAE,6BAA6B;YACpC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,CAAC,SAAS;SACxE,aAQA,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC3B,8BACc,MAAM,EAClB,KAAK,EAAE;oBACL,KAAK,EAAE,CAAC;oBACR,MAAM,EAAE,CAAC;oBACT,YAAY,EAAE,GAAG;oBACjB,IAAI,EAAE,UAAU;oBAChB,WAAW,EAAE,CAAC;oBACd,UAAU,EAAE,OAAO,IAAI,2CAA2C;iBACnE,GACD,CACH,EACD,eACE,KAAK,EAAE;oBACL,QAAQ,EAAE,CAAC;oBACX,QAAQ,EAAE,QAAQ;oBAClB,YAAY,EAAE,UAAU;oBACxB,UAAU,EAAE,QAAQ;iBACrB,YAEA,KAAK,GACD,IACF,CACR,CAAC;AACJ,CAAC;AAgBD;;;;GAIG;AACH,MAAM,UAAU,MAAM,CAAC,EAAE,KAAK,EAAE,GAAG,GAAG,CAAC,EAAE,WAAW,GAAG,EAAE,EAAE,IAAI,GAAG,KAAK,EAAe;IACpF,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAClC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;IAC3C,OAAO,CACL,yCACyB,QAAQ,EAC/B,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,aAE/E,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,KAAC,IAAI,IAEH,KAAK,EAAE,IAAI,CAAC,KAAK,KACb,CAAC,IAAI,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,KACjD,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KACjC,CAAC,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,EACpE,QAAQ,EAAE,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,IALlC,IAAI,CAAC,EAAE,CAMZ,CACH,CAAC,EACD,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,KAAK,EAAE,IAAI,MAAM,OAAO,GAAI,CAAC,CAAC,CAAC,IAAI,IACnD,CACP,CAAC;AACJ,CAAC;AAWD;;;;;GAKG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAkB;IAClF,OAAO,CACL,KAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,EACpC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACnC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,SAAS,YAElD,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,SAAG,CAAC,CAAC,CAAC,IAAI,GACnE,CACT,CAAC;AACJ,CAAC;AASD,yEAAyE;AACzE,MAAM,UAAU,IAAI,CAAC,EAAE,KAAK,EAAE,WAAW,GAAG,UAAU,EAAE,MAAM,EAAa;IACzE,MAAM,UAAU,GAAG,WAAW,KAAK,YAAY,CAAC;IAChD,OAAO,CACL,wCACyB,MAAM,EAC7B,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,YAEjG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,cAEE,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,GAAG,CAAC,UAAU;oBACZ,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC,GAAG,GAAG,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE;oBAClD,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC,GAAG,GAAG,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;aACtD,YAEA,IAAI,CAAC,KAAK,IARN,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CASnB,CACP,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAWD,qEAAqE;AACrE,MAAM,UAAU,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,GAAG,EAAE,EAAE,QAAQ,EAAa;IACxE,OAAO,CACL,yCACyB,MAAM,EAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,EAAE,aAEjF,cACE,KAAK,EAAE;oBACL,OAAO,EAAE,MAAM;oBACf,WAAW,EAAE,MAAM;oBACnB,aAAa,EAAE,CAAC;oBAChB,YAAY,EAAE,wCAAwC;iBACvD,YAEA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,cAEE,KAAK,EAAE;wBACL,IAAI,EAAE,CAAC;wBACP,QAAQ,EAAE,SAAS;wBACnB,aAAa,EAAE,QAAQ;wBACvB,aAAa,EAAE,WAAW;wBAC1B,SAAS,EAAE,QAAQ;wBACnB,GAAG,UAAU;qBACd,YAEA,MAAM,CAAC,KAAK,IAVR,MAAM,CAAC,EAAE,CAWV,CACP,CAAC,GACE,EACN,cACE,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU;oBACpB,IAAI,EAAE,CAAC;oBACP,SAAS,EAAE,CAAC;oBACZ,UAAU,EAAE,MAAM;oBAClB,oEAAoE;oBACpE,mEAAmE;oBACnE,iCAAiC;oBACjC,eAAe,EAAE,8FAA8F,OAAO,CAAC,MAAM,4FAA4F;oBACzN,cAAc,EAAE,sBAAsB;iBACvC,yBACoB,MAAM,YAE1B,QAAQ,GACL,IACF,CACP,CAAC;AACJ,CAAC;AAaD,MAAM,MAAM,GAAuE;IACjF,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,KAAK;CACd,CAAC;AAEF,2EAA2E;AAC3E,MAAM,UAAU,SAAS,CAAC,EACxB,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,IAAI,EACJ,OAAO,GAAG,OAAO,EACjB,GAAG,EACH,KAAK,GAAG,GAAG,GACI;IACf,OAAO,CACL,yCACyB,WAAW,4BACV,IAAI,EAC5B,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,MAAM,EAAE,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,WAAW,EAC9E,WAAW,EAAE,KAAK,EAClB,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,EAChC,aAAa,EAAC,OAAO,EACrB,OAAO,EAAE,GAAG,GACZ,CACH,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { type AnySchema } from "@graview/core";
|
|
2
|
+
import { type ReactNode } from "react";
|
|
3
|
+
/**
|
|
4
|
+
* WHO YOU ARE AT THIS KEYBOARD, AND WHAT YOU SET FOR YOURSELF.
|
|
5
|
+
*
|
|
6
|
+
* Every app needs one place that answers "who am I signed in as" and holds
|
|
7
|
+
* the handful of things that are the READER's rather than the
|
|
8
|
+
* installation's. Text size is the case that forced it: the framework sizes
|
|
9
|
+
* every surface in `rem` precisely so that one number on the root element
|
|
10
|
+
* resizes the whole app — and until now nothing anywhere offered that
|
|
11
|
+
* number, so the property existed and nobody could use it.
|
|
12
|
+
*
|
|
13
|
+
* What the pane holds, in the order a person looks for it:
|
|
14
|
+
*
|
|
15
|
+
* who you are — the seat's own name and role, and where the installation
|
|
16
|
+
* is declared, a way into your own record, which the self
|
|
17
|
+
* grant already makes yours to edit and nobody else's;
|
|
18
|
+
* which seat — the switcher, where the app offers a choice, because
|
|
19
|
+
* "who am I" and "be somebody else" belong together;
|
|
20
|
+
* your settings — drawn from the DECLARATION. Nothing here knows what
|
|
21
|
+
* "text size" means; it renders what the app declared and
|
|
22
|
+
* the provider has already carried the answer to the root.
|
|
23
|
+
* the scheme — light or dark, which was on the bar alone.
|
|
24
|
+
* keeping it — and, for the seat that keeps this installation ONLY, the
|
|
25
|
+
* ways into it: its own districts, and its declaration.
|
|
26
|
+
*
|
|
27
|
+
* That last block was two pills on the bar, beside the places — which put
|
|
28
|
+
* administration in the same row as "the week" and "the month", where every
|
|
29
|
+
* reader saw the app's shape before they saw their own work. They are the
|
|
30
|
+
* keeper's, they are rare, and they belong behind the same door as "who am
|
|
31
|
+
* I". A member never sees the block at all, because both controls draw
|
|
32
|
+
* nothing for a seat that may not administer and the block hides itself
|
|
33
|
+
* when it holds nothing.
|
|
34
|
+
*
|
|
35
|
+
* What is NOT administration stays what it was: a member sees their own
|
|
36
|
+
* name, their own record and their own text size, and never a person who is
|
|
37
|
+
* not them.
|
|
38
|
+
*/
|
|
39
|
+
export declare function Profile<S extends AnySchema>({ scheme, onScheme,
|
|
40
|
+
/** Where a person's own record lives on the routed face, if there is one. */
|
|
41
|
+
profileHref,
|
|
42
|
+
/**
|
|
43
|
+
* The ways into the app itself, for the seat that keeps it: showing the
|
|
44
|
+
* installation's own districts, and opening its declaration in the studio.
|
|
45
|
+
*
|
|
46
|
+
* A slot rather than a fixed pair, because the studio lives in a package
|
|
47
|
+
* this one must not depend on — the same reason the shell takes it as a
|
|
48
|
+
* node. Both of them render nothing for a seat that may not administer,
|
|
49
|
+
* and the block they sit in hides itself when they do.
|
|
50
|
+
*/
|
|
51
|
+
keeping, compact, }: {
|
|
52
|
+
/** Just the mark: the name is the title. For a bar without the room. */
|
|
53
|
+
readonly compact?: boolean;
|
|
54
|
+
/**
|
|
55
|
+
* The scheme, where this surface owns it. An embed wears the scheme its
|
|
56
|
+
* host chose and has no business offering to change it, so both are
|
|
57
|
+
* optional and the block is simply absent — a control that cannot act is
|
|
58
|
+
* worse than no control.
|
|
59
|
+
*/
|
|
60
|
+
readonly scheme?: "light" | "dark";
|
|
61
|
+
readonly onScheme?: (scheme: "light" | "dark") => void;
|
|
62
|
+
readonly profileHref?: (userId: string) => string;
|
|
63
|
+
readonly keeping?: ReactNode;
|
|
64
|
+
}): import("react").JSX.Element;
|
|
65
|
+
//# sourceMappingURL=profile.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"profile.d.ts","sourceRoot":"","sources":["../src/profile.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwC,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAGrF,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,SAAS,EAAE,EAC3C,MAAM,EACN,QAAQ;AACR,6EAA6E;AAC7E,WAAW;AACX;;;;;;;;GAQG;AACH,OAAO,EACP,OAAe,GAChB,EAAE;IACD,wEAAwE;IACxE,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;OAKG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACnC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,KAAK,IAAI,CAAC;IACvD,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IAClD,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;CAC9B,+BAoUA"}
|