@graview/primitives 0.1.17 → 0.1.19
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/README.md +5 -2
- package/dist/app-bar.d.ts +54 -1
- package/dist/app-bar.d.ts.map +1 -1
- package/dist/app-bar.js +277 -62
- package/dist/app-bar.js.map +1 -1
- package/dist/arrange-bar.d.ts +1 -1
- package/dist/arrange-bar.d.ts.map +1 -1
- package/dist/arrange-bar.js +48 -16
- package/dist/arrange-bar.js.map +1 -1
- package/dist/bar-panes-door.d.ts +8 -0
- package/dist/bar-panes-door.d.ts.map +1 -0
- package/dist/bar-panes-door.js +10 -0
- package/dist/bar-panes-door.js.map +1 -0
- package/dist/bar-panes.d.ts +3 -1
- package/dist/bar-panes.d.ts.map +1 -1
- package/dist/bar-panes.js +12 -5
- package/dist/bar-panes.js.map +1 -1
- package/dist/chat.d.ts +68 -30
- package/dist/chat.d.ts.map +1 -1
- package/dist/chat.js +206 -223
- package/dist/chat.js.map +1 -1
- package/dist/connections.d.ts +7 -1
- package/dist/connections.d.ts.map +1 -1
- package/dist/connections.js +13 -13
- package/dist/connections.js.map +1 -1
- package/dist/declared-lens-doors.d.ts +21 -3
- package/dist/declared-lens-doors.d.ts.map +1 -1
- package/dist/declared-lens-doors.js +62 -27
- package/dist/declared-lens-doors.js.map +1 -1
- package/dist/declared-lenses.d.ts.map +1 -1
- package/dist/declared-lenses.js +4 -7
- package/dist/declared-lenses.js.map +1 -1
- package/dist/default-view.d.ts +2 -0
- package/dist/default-view.d.ts.map +1 -1
- package/dist/default-view.js +10 -4
- package/dist/default-view.js.map +1 -1
- package/dist/default-views.d.ts.map +1 -1
- package/dist/default-views.js +195 -42
- package/dist/default-views.js.map +1 -1
- package/dist/draft-door.d.ts +3 -0
- package/dist/draft-door.d.ts.map +1 -0
- package/dist/draft-door.js +22 -0
- package/dist/draft-door.js.map +1 -0
- package/dist/draft-frame.d.ts +25 -0
- package/dist/draft-frame.d.ts.map +1 -0
- package/dist/draft-frame.js +69 -0
- package/dist/draft-frame.js.map +1 -0
- package/dist/editable.d.ts +35 -1
- package/dist/editable.d.ts.map +1 -1
- package/dist/editable.js +93 -23
- package/dist/editable.js.map +1 -1
- package/dist/figure.js +1 -1
- package/dist/figure.js.map +1 -1
- package/dist/find.d.ts.map +1 -1
- package/dist/find.js +46 -11
- package/dist/find.js.map +1 -1
- package/dist/frame.d.ts +8 -6
- package/dist/frame.d.ts.map +1 -1
- package/dist/frame.js +7 -5
- package/dist/frame.js.map +1 -1
- package/dist/index.d.ts +23 -11
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +20 -9
- package/dist/index.js.map +1 -1
- package/dist/lens/board.d.ts.map +1 -1
- package/dist/lens/board.js +7 -3
- package/dist/lens/board.js.map +1 -1
- package/dist/lens/calendar-dates.d.ts +2 -0
- package/dist/lens/calendar-dates.d.ts.map +1 -1
- package/dist/lens/calendar-dates.js +2 -0
- package/dist/lens/calendar-dates.js.map +1 -1
- package/dist/lens/calendar-drawing.d.ts +2 -2
- package/dist/lens/calendar-drawing.d.ts.map +1 -1
- package/dist/lens/calendar-drawing.js +1 -2
- package/dist/lens/calendar-drawing.js.map +1 -1
- package/dist/lens/calendar-options.d.ts +8 -1
- package/dist/lens/calendar-options.d.ts.map +1 -1
- package/dist/lens/calendar-options.js +5 -0
- package/dist/lens/calendar-options.js.map +1 -1
- package/dist/lens/calendar-spans.d.ts.map +1 -1
- package/dist/lens/calendar-spans.js +1 -2
- package/dist/lens/calendar-spans.js.map +1 -1
- package/dist/lens/calendar-view.d.ts +2 -1
- package/dist/lens/calendar-view.d.ts.map +1 -1
- package/dist/lens/calendar-view.js +4 -3
- package/dist/lens/calendar-view.js.map +1 -1
- package/dist/lens/columns.d.ts.map +1 -1
- package/dist/lens/columns.js +2 -2
- package/dist/lens/columns.js.map +1 -1
- package/dist/lens/coverage.d.ts.map +1 -1
- package/dist/lens/coverage.js +14 -10
- package/dist/lens/coverage.js.map +1 -1
- package/dist/lens/more.d.ts.map +1 -1
- package/dist/lens/more.js +2 -1
- package/dist/lens/more.js.map +1 -1
- package/dist/lens-keeping.d.ts +17 -0
- package/dist/lens-keeping.d.ts.map +1 -0
- package/dist/lens-keeping.js +127 -0
- package/dist/lens-keeping.js.map +1 -0
- package/dist/lines-key.d.ts +12 -0
- package/dist/lines-key.d.ts.map +1 -0
- package/dist/lines-key.js +74 -0
- package/dist/lines-key.js.map +1 -0
- package/dist/notice-place.d.ts +3 -3
- package/dist/notice-place.d.ts.map +1 -1
- package/dist/notice-place.js +6 -4
- package/dist/notice-place.js.map +1 -1
- package/dist/notices.d.ts +6 -0
- package/dist/notices.d.ts.map +1 -1
- package/dist/notices.js +7 -1
- package/dist/notices.js.map +1 -1
- package/dist/pages.d.ts +14 -8
- package/dist/pages.d.ts.map +1 -1
- package/dist/pages.js +14 -7
- package/dist/pages.js.map +1 -1
- package/dist/places.d.ts +0 -24
- package/dist/places.d.ts.map +1 -1
- package/dist/places.js +7 -3
- package/dist/places.js.map +1 -1
- package/dist/profile.d.ts +7 -1
- package/dist/profile.d.ts.map +1 -1
- package/dist/profile.js +35 -10
- package/dist/profile.js.map +1 -1
- package/dist/prose-editor.d.ts +9 -0
- package/dist/prose-editor.d.ts.map +1 -0
- package/dist/prose-editor.js +64 -0
- package/dist/prose-editor.js.map +1 -0
- package/dist/quick-relations.d.ts.map +1 -1
- package/dist/quick-relations.js +2 -2
- package/dist/quick-relations.js.map +1 -1
- package/dist/reader-lenses.d.ts +21 -0
- package/dist/reader-lenses.d.ts.map +1 -0
- package/dist/reader-lenses.js +27 -0
- package/dist/reader-lenses.js.map +1 -0
- package/dist/record-head.d.ts +28 -0
- package/dist/record-head.d.ts.map +1 -0
- package/dist/record-head.js +3 -0
- package/dist/record-head.js.map +1 -0
- package/dist/relation-key.d.ts +2 -0
- package/dist/relation-key.d.ts.map +1 -1
- package/dist/relation-key.js +14 -24
- package/dist/relation-key.js.map +1 -1
- package/dist/scene-bar.d.ts +29 -0
- package/dist/scene-bar.d.ts.map +1 -0
- package/dist/scene-bar.js +72 -0
- package/dist/scene-bar.js.map +1 -0
- package/dist/scene-css.d.ts.map +1 -1
- package/dist/scene-css.js +538 -0
- package/dist/scene-css.js.map +1 -1
- package/dist/scene-places.d.ts +37 -0
- package/dist/scene-places.d.ts.map +1 -0
- package/dist/scene-places.js +77 -0
- package/dist/scene-places.js.map +1 -0
- package/dist/scene.d.ts +5 -2
- package/dist/scene.d.ts.map +1 -1
- package/dist/scene.js +5 -1
- package/dist/scene.js.map +1 -1
- package/dist/seat-field.d.ts +58 -0
- package/dist/seat-field.d.ts.map +1 -0
- package/dist/seat-field.js +144 -0
- package/dist/seat-field.js.map +1 -0
- package/dist/seat-move.d.ts +32 -0
- package/dist/seat-move.d.ts.map +1 -0
- package/dist/seat-move.js +56 -0
- package/dist/seat-move.js.map +1 -0
- package/dist/seat-panel.d.ts +37 -0
- package/dist/seat-panel.d.ts.map +1 -0
- package/dist/seat-panel.js +131 -0
- package/dist/seat-panel.js.map +1 -0
- package/dist/seat.d.ts +20 -58
- package/dist/seat.d.ts.map +1 -1
- package/dist/seat.js +28 -45
- package/dist/seat.js.map +1 -1
- package/dist/seeding.d.ts.map +1 -1
- package/dist/seeding.js +4 -4
- package/dist/seeding.js.map +1 -1
- package/dist/shell.d.ts +25 -21
- package/dist/shell.d.ts.map +1 -1
- package/dist/shell.js +46 -116
- package/dist/shell.js.map +1 -1
- package/dist/spec-views.d.ts +9 -2
- package/dist/spec-views.d.ts.map +1 -1
- package/dist/spec-views.js +55 -6
- package/dist/spec-views.js.map +1 -1
- package/dist/subject.d.ts +19 -0
- package/dist/subject.d.ts.map +1 -0
- package/dist/subject.js +159 -0
- package/dist/subject.js.map +1 -0
- package/dist/text-body.d.ts +28 -0
- package/dist/text-body.d.ts.map +1 -0
- package/dist/text-body.js +64 -0
- package/dist/text-body.js.map +1 -0
- package/dist/theme.d.ts.map +1 -1
- package/dist/theme.js +6 -523
- package/dist/theme.js.map +1 -1
- package/dist/view-doors.d.ts +5 -1
- package/dist/view-doors.d.ts.map +1 -1
- package/dist/view-doors.js +28 -14
- package/dist/view-doors.js.map +1 -1
- package/dist/workbench/activity.d.ts.map +1 -1
- package/dist/workbench/activity.js +9 -9
- package/dist/workbench/activity.js.map +1 -1
- package/dist/workbench/answer-args.d.ts.map +1 -1
- package/dist/workbench/answer-args.js +26 -2
- package/dist/workbench/answer-args.js.map +1 -1
- package/dist/workbench/back-out.js +3 -3
- package/dist/workbench/back-out.js.map +1 -1
- package/dist/workbench/inspector.d.ts +11 -6
- package/dist/workbench/inspector.d.ts.map +1 -1
- package/dist/workbench/inspector.js +42 -56
- package/dist/workbench/inspector.js.map +1 -1
- package/dist/workbench/standing.d.ts.map +1 -1
- package/dist/workbench/standing.js +4 -3
- package/dist/workbench/standing.js.map +1 -1
- package/dist/workbench/trail.d.ts +10 -17
- package/dist/workbench/trail.d.ts.map +1 -1
- package/dist/workbench/trail.js +29 -41
- package/dist/workbench/trail.js.map +1 -1
- package/package.json +7 -7
- package/dist/companion.d.ts +0 -73
- package/dist/companion.d.ts.map +0 -1
- package/dist/companion.js +0 -594
- package/dist/companion.js.map +0 -1
- package/dist/ladder.d.ts +0 -2
- package/dist/ladder.d.ts.map +0 -1
- package/dist/ladder.js +0 -48
- package/dist/ladder.js.map +0 -1
- package/dist/popover.d.ts +0 -21
- package/dist/popover.d.ts.map +0 -1
- package/dist/popover.js +0 -28
- package/dist/popover.js.map +0 -1
- package/dist/wordmark.d.ts +0 -15
- package/dist/wordmark.d.ts.map +0 -1
- package/dist/wordmark.js +0 -50
- package/dist/wordmark.js.map +0 -1
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { layer } from "@graview/core";
|
|
3
|
+
import { useCallback, useState } from "react";
|
|
4
|
+
import { createPortal } from "react-dom";
|
|
5
|
+
import { FindBox } from "./find.js";
|
|
6
|
+
import { ActivityRail } from "./workbench/activity.js";
|
|
7
|
+
import { FollowingLine } from "./workbench/following.js";
|
|
8
|
+
import { Trail } from "./workbench/trail.js";
|
|
9
|
+
/*
|
|
10
|
+
* WHAT THE SCENE PUTS IN THE ONE BAR, AND WHAT IT KEEPS ON ITS PICTURE.
|
|
11
|
+
*
|
|
12
|
+
* The whole-page Shell drew a bar of its own on the scene — a wordmark, the
|
|
13
|
+
* browser's back and forward drawn again, "Lists", the trail, the places as
|
|
14
|
+
* tabs, Find, the standing, Activity and the person — while an embed and the
|
|
15
|
+
* routed face wore the one `AppBar`. The same app looked like two apps, and
|
|
16
|
+
* on a phone the Shell's bar wrapped to three rows. Both scene faces now
|
|
17
|
+
* wear the `AppBar` and hand it the same two things from here: the scene's
|
|
18
|
+
* Find, in the bar's place for it, and the scene's Activity, in the bar's
|
|
19
|
+
* place for the face's own tool (`BarFind.own`).
|
|
20
|
+
*
|
|
21
|
+
* The rest of what the Shell's bar said was about the picture, not the app:
|
|
22
|
+
* "the past", "zoomed in", "moved", a raised relation, whose stop you are
|
|
23
|
+
* following — each with its ×. The record in focus is not named again: its
|
|
24
|
+
* own card says its name, and a crumb over the picture stood on its title. Those are on the picture
|
|
25
|
+
* now (`SceneTrail`), in its top corner opposite Up, the way a map carries
|
|
26
|
+
* its own state; the browser keeps its own back and forward.
|
|
27
|
+
*/
|
|
28
|
+
/** The calls a seat made, newest first, a settling call replacing its own "running" line: the record Activity shows. */
|
|
29
|
+
export function useCallLog() {
|
|
30
|
+
const [calls, setCalls] = useState([]);
|
|
31
|
+
const onCall = useCallback((call) => {
|
|
32
|
+
setCalls((current) => {
|
|
33
|
+
// A call that settles replaces its own "running" entry rather than
|
|
34
|
+
// stacking on it, so the rail shows twelve turns, not twelve halves.
|
|
35
|
+
const settling = call.phase !== "running" && current[0]?.name === call.name && current[0]?.at === call.at;
|
|
36
|
+
return [call, ...(settling ? current.slice(1) : current)].slice(0, 12);
|
|
37
|
+
});
|
|
38
|
+
}, []);
|
|
39
|
+
return [calls, onCall];
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* THE SCENE'S PART OF THE BAR: its Find in the bar's place for Find, and its
|
|
43
|
+
* Activity in the bar's place for the face's own tool. Nothing until the bar
|
|
44
|
+
* has said where (`BarFind`).
|
|
45
|
+
*/
|
|
46
|
+
export function SceneBarTools({ find, calls, seat, remembers = false, }) {
|
|
47
|
+
if (!find)
|
|
48
|
+
return null;
|
|
49
|
+
return (_jsxs(_Fragment, { children: [createPortal(_jsx(FindBox, { compact: find.compact }), find.slot), find.own ? createPortal(_jsx(ActivityRail, { calls: calls, remembers: remembers, ...(seat !== undefined ? { seat } : {}) }), find.own) : null] }));
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* WHAT THE PICTURE IS DOING, ON THE PICTURE: the past, zoomed in, what a
|
|
53
|
+
* hand moved, a raised relation and whose stop you follow,
|
|
54
|
+
* each a word with its × — in the picture's top corner, opposite Up. Nothing
|
|
55
|
+
* at all while the picture is as it opened.
|
|
56
|
+
*/
|
|
57
|
+
export function SceneTrail({ home = null }) {
|
|
58
|
+
return (_jsxs("div", { "data-graview-scene-trail": "", style: {
|
|
59
|
+
position: "absolute",
|
|
60
|
+
top: 14,
|
|
61
|
+
left: 14,
|
|
62
|
+
// Up, at the other corner, keeps its room.
|
|
63
|
+
maxWidth: "calc(100% - 150px)",
|
|
64
|
+
zIndex: layer("overview"),
|
|
65
|
+
display: "flex",
|
|
66
|
+
alignItems: "center",
|
|
67
|
+
gap: 6,
|
|
68
|
+
minWidth: 0,
|
|
69
|
+
pointerEvents: "none",
|
|
70
|
+
}, children: [_jsx(Trail, { home: home, onPicture: true }), _jsx("span", { style: { pointerEvents: "auto" }, children: _jsx(FollowingLine, {}) })] }));
|
|
71
|
+
}
|
|
72
|
+
//# sourceMappingURL=scene-bar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"scene-bar.js","sourceRoot":"","sources":["../src/scene-bar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAkB,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7C;;;;;;;;;;;;;;;;;;GAkBG;AAEH,wHAAwH;AACxH,MAAM,UAAU,UAAU;IACxB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAsB,EAAE,CAAC,CAAC;IAC5D,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,IAAc,EAAE,EAAE;QAC5C,QAAQ,CAAC,CAAC,OAAO,EAAE,EAAE;YACnB,mEAAmE;YACnE,qEAAqE;YACrE,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC,IAAI,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC;YAC1G,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;QACzE,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CAAC,KAAK,EAAE,MAAM,CAAU,CAAC;AAClC,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,aAAa,CAAsB,EACjD,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,SAAS,GAAG,KAAK,GAQlB;IACC,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IACvB,OAAO,CACL,8BACG,YAAY,CAAC,KAAC,OAAO,IAAI,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI,EAAE,IAAI,CAAC,IAAI,CAAC,EAC9D,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,YAAY,CAAC,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,KAAM,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,IACxI,CACJ,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,EAAqC;IAC3E,OAAO,CACL,2CAC2B,EAAE,EAC3B,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,EAAE;YACP,IAAI,EAAE,EAAE;YACR,2CAA2C;YAC3C,QAAQ,EAAE,oBAAoB;YAC9B,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC;YACzB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;YACN,QAAQ,EAAE,CAAC;YACX,aAAa,EAAE,MAAM;SACtB,aAED,KAAC,KAAK,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,SAAG,EAC/B,eAAM,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,YACpC,KAAC,aAAa,KAAG,GACZ,IACH,CACP,CAAC;AACJ,CAAC"}
|
package/dist/scene-css.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scene-css.d.ts","sourceRoot":"","sources":["../src/scene-css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAoB,MAAM,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"scene-css.d.ts","sourceRoot":"","sources":["../src/scene-css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAoB,MAAM,EAAE,MAAM,eAAe,CAAC;AAG9D,OAAO,EAA0C,KAAK,KAAK,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AA0wCtG,0GAA0G;AAC1G,wBAAgB,QAAQ,CAAC,MAAM,GAAE,MAAe,EAAE,OAAO,GAAE,eAAoB,GAAG,MAAM,CAGvF;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,MAAM,GAAE,MAAe,EAAE,KAAK,GAAE,KAAqB,EAAE,OAAO,GAAE,eAAoB,GAAG,MAAM,CAGrH"}
|
package/dist/scene-css.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { isoShade, layer, SCENE_LAYERS } from "@graview/core";
|
|
2
|
+
import { MARQUEE_GAP, MARQUEE_WIDTH } from "@graview/layout/view";
|
|
2
3
|
import { baseSheet, GRAVIEW_BRAND, withinTheBox } from "./theme.js";
|
|
3
4
|
import { SPEC_VIEW_CSS } from "./spec-css.js";
|
|
4
5
|
/*
|
|
@@ -20,6 +21,530 @@ const wash = (f) => `${face(f)} / ${f.alpha}`;
|
|
|
20
21
|
function sceneSheet(scheme) {
|
|
21
22
|
const iso = isoShade(scheme);
|
|
22
23
|
return `
|
|
24
|
+
${ /* What theme.ts drew for the scene alone, before FR-104's own rules and
|
|
25
|
+
in the order it drew them: the altitude control, the kind's card, its
|
|
26
|
+
drive-in, the others in the city, the district's block, and the seat's
|
|
27
|
+
marks. */""}
|
|
28
|
+
${ /*
|
|
29
|
+
* The altitude control rides the SAME number the scene rides — its own copy,
|
|
30
|
+
* because it sits beside the ground rather than inside it — on the same
|
|
31
|
+
* curve. So the mark morphs exactly as long as the scene does, and where an
|
|
32
|
+
* engine cannot register the property, both cut together: one mechanism,
|
|
33
|
+
* and no way for the control and the picture to disagree about the change.
|
|
34
|
+
*/""}
|
|
35
|
+
.graview-altitude-control {
|
|
36
|
+
--graview-altitude: 0;
|
|
37
|
+
transition:
|
|
38
|
+
--graview-altitude 640ms cubic-bezier(0.33, 0, 0.2, 1),
|
|
39
|
+
color 240ms ease,
|
|
40
|
+
border-color 240ms ease;
|
|
41
|
+
}
|
|
42
|
+
.graview-altitude-mark * {
|
|
43
|
+
transform-box: fill-box;
|
|
44
|
+
transform-origin: center;
|
|
45
|
+
}
|
|
46
|
+
${ /* The ring of three kinds tightens to one ring around one node. */""}
|
|
47
|
+
.graview-altitude-mark-ring {
|
|
48
|
+
transform: scaleX(calc(1 - 0.48 * var(--graview-altitude)));
|
|
49
|
+
opacity: calc(0.55 + 0.4 * var(--graview-altitude));
|
|
50
|
+
}
|
|
51
|
+
.graview-altitude-mark-apex {
|
|
52
|
+
transform: translateY(calc(2.6px * var(--graview-altitude)));
|
|
53
|
+
}
|
|
54
|
+
${ /* The two wings gather into the center and give their ink to the apex. */""}
|
|
55
|
+
.graview-altitude-mark-wing {
|
|
56
|
+
opacity: calc(0.75 * (1 - var(--graview-altitude)));
|
|
57
|
+
}
|
|
58
|
+
.graview-altitude-mark-wing[data-side="left"] {
|
|
59
|
+
transform: translate(calc(4.4px * var(--graview-altitude)), calc(-0.8px * var(--graview-altitude)));
|
|
60
|
+
}
|
|
61
|
+
.graview-altitude-mark-wing[data-side="right"] {
|
|
62
|
+
transform: translate(calc(-4.4px * var(--graview-altitude)), calc(-0.8px * var(--graview-altitude)));
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
${ /* A card on the kinds plane.
|
|
66
|
+
*
|
|
67
|
+
* Title and count only at rest — a strip of ten cards each showing three
|
|
68
|
+
* truncated member names is ten unreadable things, and the members are not
|
|
69
|
+
* what you are asking the strip. Hovering lifts one and reveals the kind's
|
|
70
|
+
* own description, which the declaration has always carried and nothing has
|
|
71
|
+
* ever shown. */""}
|
|
72
|
+
.graview-kind-card {
|
|
73
|
+
height: 100%;
|
|
74
|
+
transition: transform 170ms cubic-bezier(0.22, 1, 0.36, 1), height 170ms ease,
|
|
75
|
+
box-shadow 170ms ease;
|
|
76
|
+
${ /* IN THE STACK NOTHING HANGS BELOW A CARD. The iso block rests eighteen
|
|
77
|
+
pixels low there, invisible, ready to rise — and an invisible box that
|
|
78
|
+
pokes under the bottom row still made the stage scroll by nine pixels
|
|
79
|
+
with nowhere to scroll. Clipped (not hidden: no scroll container, no
|
|
80
|
+
scrollable overflow), and let out again from altitude, where the plate
|
|
81
|
+
floats above the card and the block stands up out of it. */""}
|
|
82
|
+
overflow: clip;
|
|
83
|
+
}
|
|
84
|
+
.graview-kind-card:hover,
|
|
85
|
+
.graview-kind-card:focus-within {
|
|
86
|
+
height: auto;
|
|
87
|
+
transform: translateY(-4px) scale(1.05);
|
|
88
|
+
box-shadow: var(--graview-lift-high);
|
|
89
|
+
position: relative;
|
|
90
|
+
z-index: ${SCENE_LAYERS.lines};
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
${ /* The district-open control and its roster: altitude-only chrome. Inside
|
|
94
|
+
the stack expanding dissolves a card, so the control does not exist
|
|
95
|
+
there. A full fingertip even though the glyph is small — the audit holds
|
|
96
|
+
every control to 24px. */""}
|
|
97
|
+
.graview-kind-open { display: none; }
|
|
98
|
+
${ /* The roster reads as a LIST, one member a row — chips wrapping at their
|
|
99
|
+
own widths read as spilled tiles, and a district's population is a roll
|
|
100
|
+
call, not a mosaic. */""}
|
|
101
|
+
|
|
102
|
+
${ /* A DRIVE-IN: a dark screen standing on the plot, and the showings under
|
|
103
|
+
it as a marquee of real buttons. Only from altitude; the same list the
|
|
104
|
+
places tabs carry, drawn where the pictures live. */""}
|
|
105
|
+
.graview-drive-in {
|
|
106
|
+
${ /* Its own block under the nameplate, never a row inside the pill: the
|
|
107
|
+
pill is one line of name and count, and a marquee flattened into it
|
|
108
|
+
read as "12 • shown above The month The week". On a box the pill sits
|
|
109
|
+
on the roof at the top of the card, so the marquee hangs under it; on
|
|
110
|
+
a landmark the pill floats above the card, so the marquee takes the
|
|
111
|
+
card's own top edge. */""}
|
|
112
|
+
position: absolute;
|
|
113
|
+
left: 50%;
|
|
114
|
+
top: 42px;
|
|
115
|
+
transform: translateX(-50%);
|
|
116
|
+
z-index: ${SCENE_LAYERS.lines};
|
|
117
|
+
display: grid;
|
|
118
|
+
justify-items: center;
|
|
119
|
+
gap: 4px;
|
|
120
|
+
animation: graview-settle 240ms ease backwards;
|
|
121
|
+
}
|
|
122
|
+
[data-graview-landmark] .graview-drive-in {
|
|
123
|
+
top: 4px;
|
|
124
|
+
}
|
|
125
|
+
${ /* THE SHOWINGS, BY NAME (FR-118): a column of names hanging off the
|
|
126
|
+
signpost's post, each whole and wrapped rather than cut, the one showing
|
|
127
|
+
now marked by the post's rule in the accent. Words on the ground, haloed
|
|
128
|
+
in the ground's color like the district's own name — no capsules, no
|
|
129
|
+
pictures drawn too small to read. */""}
|
|
130
|
+
.graview-drive-in-marquee {
|
|
131
|
+
display: grid;
|
|
132
|
+
gap: ${MARQUEE_GAP}px;
|
|
133
|
+
width: ${MARQUEE_WIDTH}px;
|
|
134
|
+
justify-items: stretch;
|
|
135
|
+
}
|
|
136
|
+
.graview-drive-in-thumb {
|
|
137
|
+
position: relative;
|
|
138
|
+
display: block;
|
|
139
|
+
box-sizing: border-box;
|
|
140
|
+
min-height: max(1.5rem, 24px);
|
|
141
|
+
padding: 3px 6px 3px 10px;
|
|
142
|
+
border-left: 2px solid var(--graview-edge-bright, var(--graview-edge));
|
|
143
|
+
color: var(--graview-ink);
|
|
144
|
+
font: inherit;
|
|
145
|
+
text-align: left;
|
|
146
|
+
}
|
|
147
|
+
.graview-drive-in-thumb[data-graview-pressed] {
|
|
148
|
+
border-left-color: var(--graview-accent);
|
|
149
|
+
color: var(--graview-accent);
|
|
150
|
+
}
|
|
151
|
+
${ /* The press: the whole name, laid over it. */""}
|
|
152
|
+
.graview-drive-in-thumb-press {
|
|
153
|
+
position: absolute;
|
|
154
|
+
inset: 0;
|
|
155
|
+
min-height: max(1.5rem, 24px);
|
|
156
|
+
margin: 0;
|
|
157
|
+
padding: 0;
|
|
158
|
+
border: none;
|
|
159
|
+
border-radius: 0 4px 4px 0;
|
|
160
|
+
background: transparent;
|
|
161
|
+
box-shadow: none;
|
|
162
|
+
cursor: pointer;
|
|
163
|
+
}
|
|
164
|
+
.graview-drive-in-thumb-press:hover {
|
|
165
|
+
background: color-mix(in srgb, var(--graview-accent) 8%, transparent);
|
|
166
|
+
}
|
|
167
|
+
.graview-drive-in-thumb-press:focus-visible {
|
|
168
|
+
outline: 2px solid var(--graview-accent);
|
|
169
|
+
outline-offset: 1px;
|
|
170
|
+
}
|
|
171
|
+
.graview-drive-in-thumb-title {
|
|
172
|
+
display: block;
|
|
173
|
+
font-size: 0.8125rem;
|
|
174
|
+
font-weight: 500;
|
|
175
|
+
line-height: 1.25;
|
|
176
|
+
overflow-wrap: anywhere;
|
|
177
|
+
text-shadow: 0 0 3px var(--graview-ground), 0 0 6px var(--graview-ground);
|
|
178
|
+
}
|
|
179
|
+
.graview-drive-in-thumb[data-graview-pressed] .graview-drive-in-thumb-title {
|
|
180
|
+
font-weight: 600;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
${ /* THE OTHERS: people and their agents in the city, each a small figure in
|
|
184
|
+
the scene's own line vocabulary with a name under it. They move by a
|
|
185
|
+
transition on transform — one number, the layout tween's curve — so a
|
|
186
|
+
quiet city runs nothing. This tab's own seat is not drawn here: the
|
|
187
|
+
ask field is where it speaks. */""}
|
|
188
|
+
.graview-occupants {
|
|
189
|
+
position: absolute;
|
|
190
|
+
inset: 0;
|
|
191
|
+
pointer-events: none;
|
|
192
|
+
z-index: ${SCENE_LAYERS.occupants};
|
|
193
|
+
}
|
|
194
|
+
.graview-figure {
|
|
195
|
+
position: absolute;
|
|
196
|
+
left: 0;
|
|
197
|
+
top: 0;
|
|
198
|
+
width: 0;
|
|
199
|
+
height: 0;
|
|
200
|
+
pointer-events: none;
|
|
201
|
+
transition: transform 420ms cubic-bezier(0.33, 0, 0.2, 1);
|
|
202
|
+
will-change: transform;
|
|
203
|
+
}
|
|
204
|
+
.graview-figure-body {
|
|
205
|
+
position: absolute;
|
|
206
|
+
left: -16px;
|
|
207
|
+
top: -38px;
|
|
208
|
+
width: 32px;
|
|
209
|
+
height: 38px;
|
|
210
|
+
min-height: max(1.5rem, 24px);
|
|
211
|
+
padding: 0;
|
|
212
|
+
border: 0;
|
|
213
|
+
background: transparent;
|
|
214
|
+
color: hsl(var(--graview-hue, 200) 50% 48%);
|
|
215
|
+
cursor: pointer;
|
|
216
|
+
pointer-events: auto;
|
|
217
|
+
border-radius: 6px;
|
|
218
|
+
}
|
|
219
|
+
.graview-figure-body:focus-visible {
|
|
220
|
+
outline: 2px solid var(--graview-accent);
|
|
221
|
+
outline-offset: 2px;
|
|
222
|
+
}
|
|
223
|
+
.graview-figure-body svg {
|
|
224
|
+
display: block;
|
|
225
|
+
width: 32px;
|
|
226
|
+
height: 38px;
|
|
227
|
+
overflow: visible;
|
|
228
|
+
}
|
|
229
|
+
.graview-figure[data-graview-mode="following"] .graview-figure-body {
|
|
230
|
+
color: var(--graview-accent);
|
|
231
|
+
}
|
|
232
|
+
.graview-figure[data-graview-mode="refused"] .graview-figure-body {
|
|
233
|
+
color: var(--graview-warn);
|
|
234
|
+
}
|
|
235
|
+
.graview-figure-name {
|
|
236
|
+
position: absolute;
|
|
237
|
+
left: 50%;
|
|
238
|
+
top: 2px;
|
|
239
|
+
transform: translateX(-50%);
|
|
240
|
+
white-space: nowrap;
|
|
241
|
+
font-size: 0.75rem;
|
|
242
|
+
letter-spacing: 0.08em;
|
|
243
|
+
text-transform: uppercase;
|
|
244
|
+
color: var(--graview-ink-muted);
|
|
245
|
+
pointer-events: none;
|
|
246
|
+
}
|
|
247
|
+
${ /* ANOTHER PERSON, on your map: a head and shoulders in their own hue, at
|
|
248
|
+
the plot their stop names or in the audience row of the showing they are
|
|
249
|
+
watching. Press to follow them; their name is under them like a robot's. */""}
|
|
250
|
+
.graview-figure[data-graview-person] .graview-figure-body {
|
|
251
|
+
left: -11px;
|
|
252
|
+
top: -24px;
|
|
253
|
+
width: 22px;
|
|
254
|
+
height: 24px;
|
|
255
|
+
min-height: 0;
|
|
256
|
+
}
|
|
257
|
+
.graview-figure[data-graview-person] .graview-figure-body svg {
|
|
258
|
+
width: 22px;
|
|
259
|
+
height: 24px;
|
|
260
|
+
}
|
|
261
|
+
.graview-figure[data-graview-person][data-graview-followed] .graview-figure-body {
|
|
262
|
+
color: var(--graview-accent);
|
|
263
|
+
}
|
|
264
|
+
${ /* Their robot, beside them, captioned as theirs. */""}
|
|
265
|
+
.graview-figure[data-graview-theirs] .graview-figure-body {
|
|
266
|
+
opacity: 0.85;
|
|
267
|
+
}
|
|
268
|
+
${ /* More than a row can hold, and the anonymous: a number where they stand. */""}
|
|
269
|
+
.graview-figure-count {
|
|
270
|
+
position: absolute;
|
|
271
|
+
transform: translate(-50%, -100%);
|
|
272
|
+
padding: 1px 7px;
|
|
273
|
+
border-radius: 999px;
|
|
274
|
+
border: 1px solid var(--graview-edge);
|
|
275
|
+
background: var(--graview-float);
|
|
276
|
+
color: var(--graview-ink-muted);
|
|
277
|
+
font-size: 0.75rem;
|
|
278
|
+
white-space: nowrap;
|
|
279
|
+
pointer-events: auto;
|
|
280
|
+
}
|
|
281
|
+
${ /* What somebody else is pointing at, outlined in their color. */""}
|
|
282
|
+
.graview-presence-over {
|
|
283
|
+
position: absolute;
|
|
284
|
+
border: 2px solid hsl(var(--graview-hue, 200) 55% 52%);
|
|
285
|
+
border-radius: 8px;
|
|
286
|
+
pointer-events: none;
|
|
287
|
+
opacity: 0.75;
|
|
288
|
+
transition: left 200ms ease, top 200ms ease, width 200ms ease, height 200ms ease;
|
|
289
|
+
}
|
|
290
|
+
${ /* Off the visible ground: an indicator at the border, pointing at it. */""}
|
|
291
|
+
.graview-figure-edge {
|
|
292
|
+
position: absolute;
|
|
293
|
+
min-height: max(1.5rem, 24px);
|
|
294
|
+
padding: 3px 8px;
|
|
295
|
+
border-radius: 999px;
|
|
296
|
+
border: 1px solid var(--graview-edge);
|
|
297
|
+
background: var(--graview-float);
|
|
298
|
+
color: var(--graview-ink-muted);
|
|
299
|
+
font-size: 0.75rem;
|
|
300
|
+
white-space: nowrap;
|
|
301
|
+
pointer-events: auto;
|
|
302
|
+
cursor: pointer;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.graview-kind-members {
|
|
306
|
+
display: flex;
|
|
307
|
+
flex-direction: column;
|
|
308
|
+
align-items: stretch;
|
|
309
|
+
gap: 3px;
|
|
310
|
+
margin-top: 7px;
|
|
311
|
+
animation: graview-settle 240ms ease backwards;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
${ /* The way into the archive, on the card that fed it: quiet, but a real
|
|
315
|
+
control at a real size. */""}
|
|
316
|
+
.graview-kind-past {
|
|
317
|
+
display: inline-flex;
|
|
318
|
+
align-items: center;
|
|
319
|
+
flex: 0 0 auto;
|
|
320
|
+
${ /* The same floor as the disclosure beside it — see .graview-kind-open. */""}
|
|
321
|
+
min-height: max(1.5rem, 24px);
|
|
322
|
+
padding: 1px 8px;
|
|
323
|
+
margin: -3px 0;
|
|
324
|
+
border-radius: 999px;
|
|
325
|
+
border: 1px dashed var(--graview-edge);
|
|
326
|
+
background: none;
|
|
327
|
+
box-shadow: none;
|
|
328
|
+
color: var(--graview-ink-faint);
|
|
329
|
+
cursor: pointer;
|
|
330
|
+
font-size: 0.75rem;
|
|
331
|
+
white-space: nowrap;
|
|
332
|
+
}
|
|
333
|
+
.graview-kind-past:hover {
|
|
334
|
+
color: var(--graview-accent);
|
|
335
|
+
border-color: var(--graview-accent-dim);
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
${ /* A SEARCH OVER THE CITY. The districts the words found are lit and say how
|
|
339
|
+
many; the rest recede — the same dimming a selection's reach has always
|
|
340
|
+
used, so a search reads as "where the thing is", not as a new mode. The
|
|
341
|
+
count is the way in: a real control, the words carried down. */""}
|
|
342
|
+
.graview-kind-card[data-graview-emphasis="dimmed"] {
|
|
343
|
+
opacity: 0.42;
|
|
344
|
+
transition: opacity 160ms ease;
|
|
345
|
+
}
|
|
346
|
+
.graview-kind-card[data-graview-emphasis="lit"] {
|
|
347
|
+
z-index: ${SCENE_LAYERS.stage};
|
|
348
|
+
}
|
|
349
|
+
.graview-kind-card[data-graview-emphasis="lit"] .graview-kind-face {
|
|
350
|
+
border-color: var(--graview-accent) !important;
|
|
351
|
+
box-shadow: 0 0 0 1px var(--graview-accent-dim);
|
|
352
|
+
}
|
|
353
|
+
.graview-kind-hits {
|
|
354
|
+
display: inline-flex;
|
|
355
|
+
align-items: center;
|
|
356
|
+
flex: 0 0 auto;
|
|
357
|
+
min-height: max(1.5rem, 24px);
|
|
358
|
+
padding: 1px 8px;
|
|
359
|
+
margin: -3px 0;
|
|
360
|
+
border-radius: 999px;
|
|
361
|
+
border: 1px solid var(--graview-accent);
|
|
362
|
+
background: none;
|
|
363
|
+
box-shadow: none;
|
|
364
|
+
color: var(--graview-accent);
|
|
365
|
+
cursor: pointer;
|
|
366
|
+
font-size: 0.75rem;
|
|
367
|
+
font-variant-numeric: tabular-nums;
|
|
368
|
+
white-space: nowrap;
|
|
369
|
+
}
|
|
370
|
+
@media (prefers-reduced-motion: reduce) {
|
|
371
|
+
.graview-kind-card[data-graview-emphasis="dimmed"] { transition: none; }
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
${ /* A district STANDS: an isometric block — roof, two shaded walls — whose
|
|
375
|
+
height is its population. Always in the tree, faded and settled by the
|
|
376
|
+
altitude number: rising, each block grows up out of its card while the
|
|
377
|
+
card flies to its ring stop — a morph, not a cut. At altitude zero it is
|
|
378
|
+
fully transparent and costs nothing. */""}
|
|
379
|
+
.graview-kind-block {
|
|
380
|
+
display: block;
|
|
381
|
+
${ /* Architecture, not a control: clicks fall through to the card, and an
|
|
382
|
+
invisible in-stack block must never sit over a neighbor's tuck. */""}
|
|
383
|
+
pointer-events: none;
|
|
384
|
+
position: absolute;
|
|
385
|
+
left: 8%;
|
|
386
|
+
bottom: 2px;
|
|
387
|
+
width: 84%;
|
|
388
|
+
height: auto;
|
|
389
|
+
${ /* Under a marquee the block keeps out of its band: the drawing scales down inside the box. */""}
|
|
390
|
+
max-height: calc(100% - var(--graview-marquee-room, 0px));
|
|
391
|
+
opacity: var(--graview-altitude);
|
|
392
|
+
transform: translateY(calc((1 - var(--graview-altitude)) * 18px));
|
|
393
|
+
filter: drop-shadow(${scheme === "light" ? "10px 7px 14px rgba(20,30,32,0.28)" : "12px 8px 18px rgba(0,0,0,0.6)"});
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
${ /* WHERE THE KIND HAS ITS OWN DRAWING, the drawing is the building.
|
|
397
|
+
Same footprint as the block, same ground line, same cast shadow — the
|
|
398
|
+
difference is that the district is now a person, a plot or a vehicle
|
|
399
|
+
rather than one more box. Size carries the population the box's height
|
|
400
|
+
used to: the rise the card computed, in a channel a drawing can use.
|
|
401
|
+
|
|
402
|
+
Stroke weight is set HERE rather than in the art, because the art is
|
|
403
|
+
drawn to read at twenty pixels and a 1.4-unit stroke on a 24-unit box
|
|
404
|
+
becomes a six-pixel marker line at a hundred. Thinned to a drafting
|
|
405
|
+
line, which is what a blueprint of a thing looks like. */""}
|
|
406
|
+
.graview-kind-landmark {
|
|
407
|
+
display: block;
|
|
408
|
+
left: 50%;
|
|
409
|
+
${ /* The block's own two pixels of ground clearance, kept: at altitude zero
|
|
410
|
+
every block is pushed eighteen pixels down as part of the morph, and
|
|
411
|
+
without them the drawing hangs two pixels past the bottom of the scene
|
|
412
|
+
and gives the whole page a scrollbar's worth of overflow. */""}
|
|
413
|
+
bottom: 2px;
|
|
414
|
+
aspect-ratio: 1;
|
|
415
|
+
${ /* Sized by the card's HEIGHT, not its width: a district card is wider
|
|
416
|
+
than it is tall, and a square drawing at 96% of the width stood a third
|
|
417
|
+
of itself above the card and back through the nameplate. Population is
|
|
418
|
+
in the drawing's size either way — the same rise the box's height
|
|
419
|
+
carried, 10 for a district of one and 46 for the largest. */""}
|
|
420
|
+
height: calc((100% - var(--graview-marquee-room, 0px)) * (0.72 + var(--graview-rise, 24) * 0.008));
|
|
421
|
+
width: auto;
|
|
422
|
+
${ /* AND IT KEEPS UP WITH THE WORDS. The card is laid out in pixels off the
|
|
423
|
+
stage and the nameplate is sized in rem, so a reader on Largest doubled
|
|
424
|
+
every name in the city while every drawing under one stayed exactly the
|
|
425
|
+
size it was — a postage stamp under a headline. A floor in em ties the
|
|
426
|
+
drawing to the same number the names follow; at the browser's own size
|
|
427
|
+
it is below what the card already gives and nothing moves.
|
|
428
|
+
|
|
429
|
+
Capped at the card, because a floor alone overflowed it: the drawings
|
|
430
|
+
grew past the box they stand in and were sliced off at the bottom
|
|
431
|
+
edge — a plot that reads as a V rather than a bed. The card's own
|
|
432
|
+
height is what the picture can actually show, and the CARD is the thing
|
|
433
|
+
that still does not follow the reader's size (see below).
|
|
434
|
+
|
|
435
|
+
(No back ticks in here: this whole stylesheet is a template literal,
|
|
436
|
+
and one of them ends it.) */""}
|
|
437
|
+
min-height: min(5em, calc(96% - var(--graview-marquee-room, 0px)));
|
|
438
|
+
${ /* The morph is a GROWTH from the ground line, not a drop: a block slides
|
|
439
|
+
eighteen pixels down at altitude zero and grows up out of the card, and
|
|
440
|
+
a drawing given the same treatment hangs below the card it belongs to —
|
|
441
|
+
two pixels past the bottom of the scene on the lowest row, which is a
|
|
442
|
+
scrollbar on every ground-level screen in the app. Scaling from the
|
|
443
|
+
drawing's own feet is the same reading and costs nothing below. */""}
|
|
444
|
+
transform-origin: bottom center;
|
|
445
|
+
transform: translateX(-50%) scale(calc(0.55 + var(--graview-altitude) * 0.45));
|
|
446
|
+
${ /* A cast shadow belongs to a solid; on a line drawing it is a blurred
|
|
447
|
+
second copy of every stroke. The drawing keeps a hint of one so it
|
|
448
|
+
still stands on the lattice rather than floating over it. */""}
|
|
449
|
+
filter: drop-shadow(${scheme === "light" ? "6px 5px 7px rgba(20,30,32,0.16)" : "7px 6px 9px rgba(0,0,0,0.45)"});
|
|
450
|
+
}
|
|
451
|
+
${ /* The nameplate floats ABOVE a drawing rather than standing on it. On a box
|
|
452
|
+
the pill sits on the roof, which is what a label does over a building; on
|
|
453
|
+
a figure the same 2% put it across the head. */""}
|
|
454
|
+
|
|
455
|
+
.graview-kind-landmark [data-graview-figure] {
|
|
456
|
+
width: 100% !important;
|
|
457
|
+
height: 100% !important;
|
|
458
|
+
color: hsl(var(--graview-hue, 200) ${scheme === "light" ? "42% 44%" : "45% 62%"}) !important;
|
|
459
|
+
}
|
|
460
|
+
.graview-kind-landmark svg {
|
|
461
|
+
width: 100%;
|
|
462
|
+
height: 100%;
|
|
463
|
+
stroke-width: 0.85;
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
${ /* From altitude the card's face becomes the district's NAMEPLATE: an
|
|
467
|
+
upright pill standing on the roof, the way a label floats over a building
|
|
468
|
+
in any city view — the block carries the architecture, the pill carries
|
|
469
|
+
the words. Inline styles drew the in-stack card, so the pill overrides
|
|
470
|
+
must outrank them. */""}
|
|
471
|
+
.graview-kind-face {
|
|
472
|
+
transition: border-radius 640ms cubic-bezier(0.33, 0, 0.2, 1),
|
|
473
|
+
padding 640ms cubic-bezier(0.33, 0, 0.2, 1),
|
|
474
|
+
box-shadow 640ms ease;
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
${ /* THE SEAT'S MARK on what it just wrote: its own glyph, in its own hue, at
|
|
478
|
+
the thing's top-right corner. It arrives with the change and fades with
|
|
479
|
+
it. */""}
|
|
480
|
+
.graview-seat-marks {
|
|
481
|
+
position: absolute;
|
|
482
|
+
inset: 0;
|
|
483
|
+
pointer-events: none;
|
|
484
|
+
z-index: ${SCENE_LAYERS.seatMarks};
|
|
485
|
+
}
|
|
486
|
+
.graview-seat-mark {
|
|
487
|
+
position: absolute;
|
|
488
|
+
display: grid;
|
|
489
|
+
place-items: center;
|
|
490
|
+
width: 16px;
|
|
491
|
+
height: 16px;
|
|
492
|
+
margin: -8px 0 0 -8px;
|
|
493
|
+
border-radius: 999px;
|
|
494
|
+
border: 1px solid var(--graview-edge);
|
|
495
|
+
background: var(--graview-float);
|
|
496
|
+
color: oklch(0.62 0.16 var(--graview-hue, 250));
|
|
497
|
+
font-size: 0.6875rem;
|
|
498
|
+
line-height: 1;
|
|
499
|
+
box-shadow: var(--graview-lift-low);
|
|
500
|
+
animation: graview-seat-mark 4000ms ease-out forwards;
|
|
501
|
+
}
|
|
502
|
+
${ /* A QUESTION THE SEAT ASKED, standing at the node it is about: it says
|
|
503
|
+
itself and waits, because a dot nobody can read is a question nobody
|
|
504
|
+
answers. It does not fade — an unanswered question is still open. */""}
|
|
505
|
+
.graview-seat-asking {
|
|
506
|
+
position: absolute;
|
|
507
|
+
transform: translate(-50%, -100%);
|
|
508
|
+
display: inline-flex;
|
|
509
|
+
align-items: center;
|
|
510
|
+
gap: 6px;
|
|
511
|
+
max-width: 260px;
|
|
512
|
+
padding: 3px 9px 3px 6px;
|
|
513
|
+
border-radius: 999px;
|
|
514
|
+
border: 1px solid var(--graview-accent);
|
|
515
|
+
background: var(--graview-float);
|
|
516
|
+
color: var(--graview-ink);
|
|
517
|
+
font-size: 0.75rem;
|
|
518
|
+
line-height: 1.3;
|
|
519
|
+
box-shadow: var(--graview-lift-low);
|
|
520
|
+
pointer-events: auto;
|
|
521
|
+
}
|
|
522
|
+
.graview-seat-asking > [aria-hidden] {
|
|
523
|
+
display: grid;
|
|
524
|
+
place-items: center;
|
|
525
|
+
width: 14px;
|
|
526
|
+
height: 14px;
|
|
527
|
+
border-radius: 999px;
|
|
528
|
+
background: var(--graview-accent);
|
|
529
|
+
color: var(--graview-panel);
|
|
530
|
+
font-size: 0.6875rem;
|
|
531
|
+
}
|
|
532
|
+
.graview-seat-asking-said {
|
|
533
|
+
overflow: hidden;
|
|
534
|
+
text-overflow: ellipsis;
|
|
535
|
+
white-space: nowrap;
|
|
536
|
+
}
|
|
537
|
+
|
|
538
|
+
@keyframes graview-seat-mark {
|
|
539
|
+
0% { opacity: 0; transform: translateY(3px) scale(0.8); }
|
|
540
|
+
8% { opacity: 1; transform: none; }
|
|
541
|
+
80% { opacity: 1; }
|
|
542
|
+
100% { opacity: 0; }
|
|
543
|
+
}
|
|
544
|
+
@media (prefers-reduced-motion: reduce) {
|
|
545
|
+
.graview-figure { transition: none; }
|
|
546
|
+
}
|
|
547
|
+
|
|
23
548
|
[data-graview-altitude] .graview-kind-card {
|
|
24
549
|
overflow: visible;
|
|
25
550
|
}
|
|
@@ -688,6 +1213,19 @@ ${ /* AND NOT FROM ALTITUDE, where a district is a village on a plot and its
|
|
|
688
1213
|
[data-graview-stage="dom"] [data-graview-view] > [data-graview-natural] > * {
|
|
689
1214
|
pointer-events: auto;
|
|
690
1215
|
}
|
|
1216
|
+
${ /* THE RECORD IN FOCUS KEEPS TO ITS BOX (FR-141). Whatever draws it — the
|
|
1217
|
+
framework's record, a declared page at its head, a worker view — is held
|
|
1218
|
+
to the box the layout gave it: no taller than the box, scrolling inside
|
|
1219
|
+
when it is taller, from its top. A view centered on a box it outgrew
|
|
1220
|
+
spilled under the bar and over the cards it is tied to. A frame that
|
|
1221
|
+
scrolls its own body (a Panel) keeps doing so; the kind tag astride the
|
|
1222
|
+
frame's edge is not held. */""}
|
|
1223
|
+
[data-graview-record-focus] > :not(.graview-kind-tag) {
|
|
1224
|
+
min-height: 0;
|
|
1225
|
+
max-height: 100%;
|
|
1226
|
+
overflow-y: auto;
|
|
1227
|
+
flex-shrink: 1;
|
|
1228
|
+
}
|
|
691
1229
|
[data-graview-view][data-graview-selected] {
|
|
692
1230
|
filter: drop-shadow(0 0 14px var(--graview-accent-dim));
|
|
693
1231
|
}
|
package/dist/scene-css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scene-css.js","sourceRoot":"","sources":["../src/scene-css.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAoC,MAAM,YAAY,CAAC;AACtG,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C;;;;;;;;;;;;;GAaG;AAEH,MAAM,IAAI,GAAG,CAAC,CAAU,EAAU,EAAE,CAAC,GAAG,CAAC,CAAC,UAAU,KAAK,CAAC,CAAC,SAAS,GAAG,CAAC;AACxE,MAAM,IAAI,GAAG,CAAC,CAAU,EAAU,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,CAAC;AAE/D,SAAS,UAAU,CAAC,MAAc;IAChC,MAAM,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO;;;;
|
|
1
|
+
{"version":3,"file":"scene-css.js","sourceRoot":"","sources":["../src/scene-css.ts"],"names":[],"mappings":"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"}
|