@tollbooth-dpyc/web 1.7.1 → 1.8.1
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 +42 -0
- package/dist/client.d.ts +3 -2
- package/dist/client.js +21 -18
- package/dist/config.d.ts +4 -1
- package/dist/config.js +1 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.js +5 -0
- package/dist/react/CouponsPanel.js +1 -1
- package/dist/react/NostrProfilePanel.js +1 -1
- package/dist/react/NpubGate.js +2 -2
- package/dist/react/SessionKeyClaim.js +2 -2
- package/dist/react/SignInLinks.js +1 -1
- package/dist/react/SignInSteps.js +1 -1
- package/dist/react/UsageSummary.js +1 -1
- package/dist/react/index.d.ts +2 -0
- package/dist/react/index.js +2 -0
- package/dist/react/useTour.d.ts +46 -0
- package/dist/react/useTour.js +128 -0
- package/dist/toolResult.d.ts +11 -0
- package/dist/toolResult.js +27 -0
- package/dist/tour/idle.d.ts +19 -0
- package/dist/tour/idle.js +24 -0
- package/dist/tour/lint.d.ts +18 -0
- package/dist/tour/lint.js +47 -0
- package/dist/tour/run.d.ts +47 -0
- package/dist/tour/run.js +163 -0
- package/dist/tour/state.d.ts +34 -0
- package/dist/tour/state.js +54 -0
- package/dist/tour/tours.d.ts +28 -0
- package/dist/tour/tours.js +54 -0
- package/dist/tour/types.d.ts +35 -0
- package/dist/tour/types.js +10 -0
- package/dist/tourPrefs.d.ts +21 -0
- package/dist/tourPrefs.js +70 -0
- package/package.json +7 -2
- package/tour.css +103 -0
package/tour.css
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* The guided tour's popover, in the site's own tokens.
|
|
3
|
+
*
|
|
4
|
+
* driver.js draws it; these rules give it the site's surface, ink and line
|
|
5
|
+
* through the --tb-* variables theme.css defines, and the structure the
|
|
6
|
+
* tour adds: the "Stop the tutorial" link under the buttons, and the Yes/No
|
|
7
|
+
* pair on the offer. Colours are the site's; a site may restyle `.tb-tour`
|
|
8
|
+
* further (the title's font, say) in its own stylesheet.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
@import "driver.js/dist/driver.css";
|
|
12
|
+
|
|
13
|
+
.driver-popover.tb-tour {
|
|
14
|
+
font-family: inherit;
|
|
15
|
+
color: var(--tb-ink);
|
|
16
|
+
background-color: var(--tb-surface);
|
|
17
|
+
border: 1px solid var(--tb-line);
|
|
18
|
+
border-radius: 10px;
|
|
19
|
+
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
|
|
20
|
+
max-width: min(320px, calc(100vw - 24px));
|
|
21
|
+
padding: 14px 16px 12px;
|
|
22
|
+
}
|
|
23
|
+
.tb-tour .driver-popover-title {
|
|
24
|
+
font-size: 17px;
|
|
25
|
+
font-weight: 600;
|
|
26
|
+
line-height: 1.3;
|
|
27
|
+
color: var(--tb-ink);
|
|
28
|
+
}
|
|
29
|
+
.tb-tour .driver-popover-description {
|
|
30
|
+
margin-top: 6px;
|
|
31
|
+
font-size: 13.5px;
|
|
32
|
+
line-height: 1.45;
|
|
33
|
+
color: var(--tb-ink);
|
|
34
|
+
}
|
|
35
|
+
.tb-tour .driver-popover-close-btn {
|
|
36
|
+
top: 2px;
|
|
37
|
+
right: 2px;
|
|
38
|
+
width: 36px;
|
|
39
|
+
height: 36px;
|
|
40
|
+
color: var(--tb-muted);
|
|
41
|
+
}
|
|
42
|
+
.tb-tour .driver-popover-close-btn:hover,
|
|
43
|
+
.tb-tour .driver-popover-close-btn:focus { color: var(--tb-ink); }
|
|
44
|
+
.tb-tour .driver-popover-footer { margin-top: 12px; gap: 8px; }
|
|
45
|
+
.tb-tour .driver-popover-progress-text {
|
|
46
|
+
font-size: 11px;
|
|
47
|
+
color: var(--tb-muted);
|
|
48
|
+
}
|
|
49
|
+
.tb-tour .driver-popover-footer-btn,
|
|
50
|
+
.tb-tour .tb-tour-yes,
|
|
51
|
+
.tb-tour .tb-tour-no {
|
|
52
|
+
font-family: inherit;
|
|
53
|
+
font-size: 12.5px;
|
|
54
|
+
font-weight: 500;
|
|
55
|
+
min-height: 36px;
|
|
56
|
+
padding: 0 14px;
|
|
57
|
+
border-radius: 999px;
|
|
58
|
+
border: 1.5px solid var(--tb-line);
|
|
59
|
+
background-color: var(--tb-surface);
|
|
60
|
+
color: var(--tb-muted);
|
|
61
|
+
cursor: pointer;
|
|
62
|
+
}
|
|
63
|
+
.tb-tour .driver-popover-next-btn,
|
|
64
|
+
.tb-tour .tb-tour-yes {
|
|
65
|
+
border-color: var(--tb-accent);
|
|
66
|
+
background-color: var(--tb-accent);
|
|
67
|
+
color: var(--tb-on-accent);
|
|
68
|
+
}
|
|
69
|
+
.tb-tour .driver-popover-footer-btn:hover,
|
|
70
|
+
.tb-tour .driver-popover-footer-btn:focus,
|
|
71
|
+
.tb-tour .tb-tour-no:hover,
|
|
72
|
+
.tb-tour .tb-tour-no:focus { background-color: var(--tb-surface-2); }
|
|
73
|
+
.tb-tour .driver-popover-next-btn:hover,
|
|
74
|
+
.tb-tour .driver-popover-next-btn:focus,
|
|
75
|
+
.tb-tour .tb-tour-yes:hover,
|
|
76
|
+
.tb-tour .tb-tour-yes:focus { background-color: var(--tb-accent); }
|
|
77
|
+
.tb-tour .tb-tour-stop {
|
|
78
|
+
display: block;
|
|
79
|
+
margin-top: 10px;
|
|
80
|
+
padding: 0;
|
|
81
|
+
border: 0;
|
|
82
|
+
background: none;
|
|
83
|
+
font-family: inherit;
|
|
84
|
+
font-size: 11.5px;
|
|
85
|
+
color: var(--tb-muted);
|
|
86
|
+
text-decoration: underline;
|
|
87
|
+
text-decoration-style: dotted;
|
|
88
|
+
text-underline-offset: 2px;
|
|
89
|
+
cursor: pointer;
|
|
90
|
+
}
|
|
91
|
+
.tb-tour .tb-tour-answer {
|
|
92
|
+
display: flex;
|
|
93
|
+
justify-content: flex-end;
|
|
94
|
+
gap: 8px;
|
|
95
|
+
margin-top: 14px;
|
|
96
|
+
}
|
|
97
|
+
/* The offer has no element to point at; it sits in the middle of the page. */
|
|
98
|
+
.tb-tour.tb-tour-offer .driver-popover-arrow { display: none; }
|
|
99
|
+
/* The arrow takes the surface colour on whichever side it points from. */
|
|
100
|
+
.tb-tour .driver-popover-arrow-side-left { border-left-color: var(--tb-surface); }
|
|
101
|
+
.tb-tour .driver-popover-arrow-side-right { border-right-color: var(--tb-surface); }
|
|
102
|
+
.tb-tour .driver-popover-arrow-side-top { border-top-color: var(--tb-surface); }
|
|
103
|
+
.tb-tour .driver-popover-arrow-side-bottom { border-bottom-color: var(--tb-surface); }
|