dsh-tiddlywiki 0.1.0 → 0.1.2
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 +21 -21
- package/README.md +203 -172
- package/cordis.patch.yml +13 -13
- package/lib/client.bundle.js +46 -1
- package/lib/client.js +46 -1
- package/lib/index.js +2152 -2152
- package/package.json +79 -63
- package/src/client/editor-popup.ts +121 -121
- package/src/client/index.ts +76 -76
- package/src/client/note-widget.ts +210 -210
- package/src/client/panel.ts +345 -304
- package/src/client/settings-page.ts +397 -397
- package/src/client/sidebar-entry.ts +148 -148
- package/src/client/state.ts +39 -39
- package/src/client/styles.ts +242 -235
- package/src/client/toast.ts +22 -22
- package/src/host/admin.ts +408 -408
- package/src/host/config.ts +86 -86
- package/src/host/git.ts +218 -218
- package/src/host/routes.ts +233 -233
- package/src/host/seed-notes.ts +62 -62
- package/src/host/tools.ts +254 -254
- package/src/host/tw-api.ts +157 -157
- package/src/host/wiki.ts +287 -287
- package/src/index.ts +331 -331
- package/src/sdk.ts +198 -198
package/src/client/styles.ts
CHANGED
|
@@ -1,235 +1,242 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Client stylesheet injection (design doc D5 — pure DOM, no React).
|
|
3
|
-
* All rules are `dsh-tw-*` scoped; the tag is stable per plugin so the HMR
|
|
4
|
-
* driver can identify it on rebuild.
|
|
5
|
-
*
|
|
6
|
-
* Theme: uses the live `--dsw-alias-*` design tokens (same family as the
|
|
7
|
-
* shutdown launcher) with fallbacks, so it follows light/dark automatically.
|
|
8
|
-
*
|
|
9
|
-
* @module dsh-tiddlywiki/client/styles
|
|
10
|
-
*/
|
|
11
|
-
|
|
12
|
-
export const STYLE_ID = 'dsh-tiddlywiki-styles'
|
|
13
|
-
|
|
14
|
-
const CSS_TEXT = `
|
|
15
|
-
/* ── sidebar entry ───────────────────────────────────────────── */
|
|
16
|
-
.dsh-tw-entry {
|
|
17
|
-
display: flex; align-items: center; gap: 8px; position: relative;
|
|
18
|
-
width: calc(100% - 8px); margin: 2px 4px; padding: 6px 10px;
|
|
19
|
-
border: none; border-radius: 8px; background: transparent;
|
|
20
|
-
color: var(--dsw-alias-label-secondary, inherit); font: inherit; font-size: 13px;
|
|
21
|
-
cursor: pointer; text-align: left;
|
|
22
|
-
}
|
|
23
|
-
.dsh-tw-entry:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, inherit); }
|
|
24
|
-
.dsh-tw-entry[data-active="true"] { background: var(--dsw-alias-interactive-bg-active, rgba(128,128,128,.18)); color: var(--dsw-alias-label-primary, inherit); font-weight: 500; }
|
|
25
|
-
.dsh-tw-entry svg { flex: none; }
|
|
26
|
-
.dsh-tw-entry .dsh-tw-entry-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
27
|
-
|
|
28
|
-
/* ── center-column panel (fixed overlay, JS-pinned to the column rect) ── */
|
|
29
|
-
.dsh-tw-view {
|
|
30
|
-
display: none; flex-direction: column; min-height: 0; box-sizing: border-box;
|
|
31
|
-
background: var(--dsw-alias-bg-layer-1, var(--dsw-bg, #fff));
|
|
32
|
-
}
|
|
33
|
-
html[data-dsh-tw-active] .dsh-tw-view { display: flex; }
|
|
34
|
-
/* Hide the conversation content the panel overlays (all three column gens). */
|
|
35
|
-
html[data-dsh-tw-active] [data-pane="conversation"] > :not([data-dsh-tw-view]),
|
|
36
|
-
html[data-dsh-tw-active] [class*="centerCol"] > :not([data-dsh-tw-view]),
|
|
37
|
-
html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view]) { display: none !important; }
|
|
38
|
-
|
|
39
|
-
.dsh-tw-panel-bar {
|
|
40
|
-
display: flex; align-items: center; gap: 8px; padding: 6px 10px;
|
|
41
|
-
border-bottom: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,.18));
|
|
42
|
-
background: var(--dsw-alias-bg-layer-1, transparent);
|
|
43
|
-
font-size: 12px; color: var(--dsw-alias-label-secondary, inherit);
|
|
44
|
-
flex: none;
|
|
45
|
-
}
|
|
46
|
-
.dsh-tw-panel-bar button {
|
|
47
|
-
border: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,.25));
|
|
48
|
-
background: transparent; color: inherit; font: inherit; font-size: 12px;
|
|
49
|
-
padding: 2px 8px; border-radius: 6px; cursor: pointer;
|
|
50
|
-
}
|
|
51
|
-
.dsh-tw-panel-bar button:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); }
|
|
52
|
-
.dsh-tw-panel-title { font-weight: 600; margin-right: auto; }
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
.dsh-tw-
|
|
61
|
-
.dsh-tw-
|
|
62
|
-
|
|
63
|
-
.dsh-tw-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
.dsh-tw-panel-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
.dsh-tw-note-
|
|
103
|
-
|
|
104
|
-
border
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
}
|
|
108
|
-
.dsh-tw-note-fields
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
.dsh-tw-note-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
transition:
|
|
124
|
-
}
|
|
125
|
-
.dsh-tw-note-
|
|
126
|
-
.dsh-tw-note-
|
|
127
|
-
.dsh-tw-note-
|
|
128
|
-
border: 1px solid var(--dsw-alias-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
}
|
|
133
|
-
.dsh-tw-note-
|
|
134
|
-
.dsh-tw-note-edit
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
display: flex;
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
border-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
.dsh-tw-editor-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
.dsh-tw-editor-
|
|
159
|
-
.dsh-tw-
|
|
160
|
-
border:
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
.dsh-tw-toast
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
.dsh-tw-settings
|
|
188
|
-
.dsh-tw-settings-
|
|
189
|
-
.dsh-tw-settings-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
.dsh-tw-settings-
|
|
194
|
-
.dsh-tw-settings-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
}
|
|
199
|
-
.dsh-tw-settings-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
.dsh-tw-settings-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
.dsh-tw-settings-
|
|
211
|
-
.dsh-tw-settings-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
}
|
|
216
|
-
.dsh-tw-settings-
|
|
217
|
-
.dsh-tw-settings-
|
|
218
|
-
.dsh-tw-settings-btn
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
.dsh-tw-settings-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
document
|
|
235
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Client stylesheet injection (design doc D5 — pure DOM, no React).
|
|
3
|
+
* All rules are `dsh-tw-*` scoped; the tag is stable per plugin so the HMR
|
|
4
|
+
* driver can identify it on rebuild.
|
|
5
|
+
*
|
|
6
|
+
* Theme: uses the live `--dsw-alias-*` design tokens (same family as the
|
|
7
|
+
* shutdown launcher) with fallbacks, so it follows light/dark automatically.
|
|
8
|
+
*
|
|
9
|
+
* @module dsh-tiddlywiki/client/styles
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
export const STYLE_ID = 'dsh-tiddlywiki-styles'
|
|
13
|
+
|
|
14
|
+
const CSS_TEXT = `
|
|
15
|
+
/* ── sidebar entry ───────────────────────────────────────────── */
|
|
16
|
+
.dsh-tw-entry {
|
|
17
|
+
display: flex; align-items: center; gap: 8px; position: relative;
|
|
18
|
+
width: calc(100% - 8px); margin: 2px 4px; padding: 6px 10px;
|
|
19
|
+
border: none; border-radius: 8px; background: transparent;
|
|
20
|
+
color: var(--dsw-alias-label-secondary, inherit); font: inherit; font-size: 13px;
|
|
21
|
+
cursor: pointer; text-align: left;
|
|
22
|
+
}
|
|
23
|
+
.dsh-tw-entry:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, inherit); }
|
|
24
|
+
.dsh-tw-entry[data-active="true"] { background: var(--dsw-alias-interactive-bg-active, rgba(128,128,128,.18)); color: var(--dsw-alias-label-primary, inherit); font-weight: 500; }
|
|
25
|
+
.dsh-tw-entry svg { flex: none; }
|
|
26
|
+
.dsh-tw-entry .dsh-tw-entry-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
27
|
+
|
|
28
|
+
/* ── center-column panel (fixed overlay, JS-pinned to the column rect) ── */
|
|
29
|
+
.dsh-tw-view {
|
|
30
|
+
display: none; flex-direction: column; min-height: 0; box-sizing: border-box;
|
|
31
|
+
background: var(--dsw-alias-bg-layer-1, var(--dsw-bg, #fff));
|
|
32
|
+
}
|
|
33
|
+
html[data-dsh-tw-active] .dsh-tw-view { display: flex; }
|
|
34
|
+
/* Hide the conversation content the panel overlays (all three column gens). */
|
|
35
|
+
html[data-dsh-tw-active] [data-pane="conversation"] > :not([data-dsh-tw-view]),
|
|
36
|
+
html[data-dsh-tw-active] [class*="centerCol"] > :not([data-dsh-tw-view]),
|
|
37
|
+
html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view]) { display: none !important; }
|
|
38
|
+
|
|
39
|
+
.dsh-tw-panel-bar {
|
|
40
|
+
display: flex; align-items: center; gap: 8px; padding: 6px 10px;
|
|
41
|
+
border-bottom: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,.18));
|
|
42
|
+
background: var(--dsw-alias-bg-layer-1, transparent);
|
|
43
|
+
font-size: 12px; color: var(--dsw-alias-label-secondary, inherit);
|
|
44
|
+
flex: none;
|
|
45
|
+
}
|
|
46
|
+
.dsh-tw-panel-bar button {
|
|
47
|
+
border: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,.25));
|
|
48
|
+
background: transparent; color: inherit; font: inherit; font-size: 12px;
|
|
49
|
+
padding: 2px 8px; border-radius: 6px; cursor: pointer;
|
|
50
|
+
}
|
|
51
|
+
.dsh-tw-panel-bar button:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); }
|
|
52
|
+
.dsh-tw-panel-title { font-weight: 600; margin-right: auto; }
|
|
53
|
+
/* dsh-better-sidebar coexistence: the floating toggle cluster (two 28px
|
|
54
|
+
buttons at the viewport's top-right) lives above the panel (z-index is
|
|
55
|
+
handled in JS — the panel stays below the host layer), so reserve the
|
|
56
|
+
cluster's width at the panel bar's right end — mirroring how
|
|
57
|
+
dsh-better-sidebar pads the DSH session header — and the panel's own
|
|
58
|
+
状态/重载 buttons never sit underneath it. */
|
|
59
|
+
.dsh-tw-view[data-sidebar-host] .dsh-tw-panel-bar { padding-right: 80px; }
|
|
60
|
+
.dsh-tw-status-chip { font-variant-numeric: tabular-nums; }
|
|
61
|
+
.dsh-tw-status-chip[data-state="running"] { color: var(--dsw-alias-state-success-primary, #3eaa5f); }
|
|
62
|
+
.dsh-tw-status-chip[data-state="starting"] { color: var(--dsw-alias-state-warning-primary, #d9822b); }
|
|
63
|
+
.dsh-tw-status-chip[data-state="failed"], .dsh-tw-status-chip[data-state="stopped"] { color: var(--dsw-alias-state-error-primary, #d13b3b); }
|
|
64
|
+
|
|
65
|
+
.dsh-tw-panel-frame { flex: 1; min-height: 0; border: 0; width: 100%; display: block; background: #fff; }
|
|
66
|
+
/* [hidden] must beat the author display rules above (UA hidden is overridden). */
|
|
67
|
+
.dsh-tw-panel-frame[hidden],
|
|
68
|
+
.dsh-tw-panel-error[hidden] { display: none !important; }
|
|
69
|
+
|
|
70
|
+
.dsh-tw-panel-error {
|
|
71
|
+
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
72
|
+
gap: 10px; color: var(--dsw-alias-label-secondary, #666); font-size: 13px; text-align: center; padding: 20px;
|
|
73
|
+
}
|
|
74
|
+
.dsh-tw-panel-error button {
|
|
75
|
+
border: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,.25)); background: transparent;
|
|
76
|
+
color: inherit; font: inherit; padding: 6px 14px; border-radius: 8px; cursor: pointer;
|
|
77
|
+
}
|
|
78
|
+
.dsh-tw-panel-error button:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); }
|
|
79
|
+
.dsh-tw-panel-error code { font-size: 11px; opacity: .8; max-width: 80%; overflow-wrap: anywhere; }
|
|
80
|
+
|
|
81
|
+
/* ── floating quick-note widget ────────────────────────────────
|
|
82
|
+
Positioned ABOVE the shutdown launcher FAB (fixed right:24 bottom:24,
|
|
83
|
+
z-index 900, 46px) and BELOW its confirm overlay (z-index 1000). */
|
|
84
|
+
.dsh-tw-note {
|
|
85
|
+
position: fixed; right: 24px; bottom: 88px; z-index: 950;
|
|
86
|
+
display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
|
|
87
|
+
font-family: inherit;
|
|
88
|
+
}
|
|
89
|
+
.dsh-tw-note-card {
|
|
90
|
+
width: 340px; max-width: calc(100vw - 40px);
|
|
91
|
+
background: var(--dsw-alias-bg-layer-2, #fff); color: var(--dsw-alias-label-primary, #222);
|
|
92
|
+
border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.15));
|
|
93
|
+
border-radius: 14px; box-shadow: var(--dsw-shadow-lv3, 0 8px 30px rgba(0,0,0,.22));
|
|
94
|
+
padding: 12px; display: flex; flex-direction: column; gap: 10px;
|
|
95
|
+
font-size: 13px;
|
|
96
|
+
}
|
|
97
|
+
.dsh-tw-note-card[hidden] { display: none; }
|
|
98
|
+
.dsh-tw-note-head {
|
|
99
|
+
display: flex; align-items: center; gap: 8px;
|
|
100
|
+
font-size: 12px; font-weight: 600; color: var(--dsw-alias-label-primary, #222);
|
|
101
|
+
}
|
|
102
|
+
.dsh-tw-note-head .dsh-tw-note-label { margin-right: auto; display: flex; align-items: center; gap: 6px; }
|
|
103
|
+
.dsh-tw-note-close {
|
|
104
|
+
border: none; background: transparent; color: var(--dsw-alias-label-secondary, #888);
|
|
105
|
+
font: inherit; font-size: 15px; line-height: 1; padding: 2px 6px; border-radius: 6px; cursor: pointer;
|
|
106
|
+
}
|
|
107
|
+
.dsh-tw-note-close:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, #222); }
|
|
108
|
+
.dsh-tw-note-fields { display: flex; gap: 8px; }
|
|
109
|
+
.dsh-tw-note-fields input {
|
|
110
|
+
flex: 1; min-width: 0; border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.18));
|
|
111
|
+
border-radius: 8px; padding: 6px 9px; font: inherit; font-size: 12px;
|
|
112
|
+
background: var(--dsw-alias-bg-layer-1, #fff); color: var(--dsw-alias-label-primary, inherit);
|
|
113
|
+
transition: border-color 120ms ease, box-shadow 120ms ease;
|
|
114
|
+
}
|
|
115
|
+
.dsh-tw-note-fields input:focus, .dsh-tw-note-text:focus {
|
|
116
|
+
outline: none; border-color: var(--dsw-alias-brand-primary, #3e63dd);
|
|
117
|
+
box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-brand-primary, #3e63dd) 25%, transparent);
|
|
118
|
+
}
|
|
119
|
+
.dsh-tw-note-text {
|
|
120
|
+
border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.18)); border-radius: 8px;
|
|
121
|
+
padding: 8px 9px; font: inherit; font-size: 13px; min-height: 120px; resize: vertical;
|
|
122
|
+
background: var(--dsw-alias-bg-layer-1, #fff); color: var(--dsw-alias-label-primary, inherit);
|
|
123
|
+
transition: border-color 120ms ease, box-shadow 120ms ease;
|
|
124
|
+
}
|
|
125
|
+
.dsh-tw-note-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
|
126
|
+
.dsh-tw-note-hint { font-size: 11px; color: var(--dsw-alias-label-dimmed, #999); }
|
|
127
|
+
.dsh-tw-note-save {
|
|
128
|
+
border: 1px solid transparent; background: var(--dsw-alias-brand-primary, #3e63dd); color: #fff;
|
|
129
|
+
font: inherit; font-size: 12px; padding: 6px 16px; border-radius: 8px; cursor: pointer;
|
|
130
|
+
transition: filter 120ms ease;
|
|
131
|
+
}
|
|
132
|
+
.dsh-tw-note-save:hover:not(:disabled) { filter: brightness(1.08); }
|
|
133
|
+
.dsh-tw-note-save:disabled { opacity: .55; cursor: default; }
|
|
134
|
+
.dsh-tw-note-edit {
|
|
135
|
+
border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.18));
|
|
136
|
+
background: var(--dsw-alias-bg-layer-2, #fff); color: var(--dsw-alias-label-primary, #222);
|
|
137
|
+
font: inherit; font-size: 12px; padding: 6px 10px; border-radius: 8px; cursor: pointer;
|
|
138
|
+
transition: filter 120ms ease;
|
|
139
|
+
}
|
|
140
|
+
.dsh-tw-note-edit:hover:not(:disabled) { filter: brightness(.96); }
|
|
141
|
+
.dsh-tw-note-edit:disabled { opacity: .55; cursor: default; }
|
|
142
|
+
/* ── Native-editor popup iframe (quick-note "在 TW 中编辑") ──────────────── */
|
|
143
|
+
.dsh-tw-editor-popup {
|
|
144
|
+
position: fixed; left: 0; right: 0; top: 0; bottom: 0; margin: auto;
|
|
145
|
+
width: min(880px, 92vw); height: min(640px, 86vh);
|
|
146
|
+
display: flex; flex-direction: column; overflow: hidden;
|
|
147
|
+
background: var(--dsw-alias-bg-layer-2, #fff); color: var(--dsw-alias-label-primary, #222);
|
|
148
|
+
border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.2));
|
|
149
|
+
border-radius: 12px; box-shadow: 0 14px 44px rgba(0,0,0,.3);
|
|
150
|
+
z-index: 980; font-family: inherit; font-size: 13px;
|
|
151
|
+
}
|
|
152
|
+
.dsh-tw-editor-bar {
|
|
153
|
+
display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
|
|
154
|
+
padding: 7px 8px 7px 14px; cursor: move; user-select: none;
|
|
155
|
+
background: var(--dsw-alias-bg-layer-1, #f4f5f7);
|
|
156
|
+
border-bottom: 1px solid var(--dsw-alias-border-l1, rgba(0,0,0,.1));
|
|
157
|
+
}
|
|
158
|
+
.dsh-tw-editor-title { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
159
|
+
.dsh-tw-editor-close {
|
|
160
|
+
border: none; background: transparent; cursor: pointer; font-size: 14px; line-height: 1;
|
|
161
|
+
color: var(--dsw-alias-label-dimmed, #888); padding: 5px 8px; border-radius: 6px;
|
|
162
|
+
}
|
|
163
|
+
.dsh-tw-editor-close:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, #222); }
|
|
164
|
+
.dsh-tw-editor-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: #fff; }
|
|
165
|
+
.dsh-tw-editor-resize { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; }
|
|
166
|
+
.dsh-tw-note-toggle {
|
|
167
|
+
border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.18));
|
|
168
|
+
background: var(--dsw-alias-bg-layer-2, #fff); color: var(--dsw-alias-label-primary, #222);
|
|
169
|
+
font: inherit; font-size: 13px; padding: 9px 16px; border-radius: 999px;
|
|
170
|
+
box-shadow: var(--dsw-shadow-lv3, 0 4px 16px rgba(0,0,0,.16)); cursor: pointer;
|
|
171
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
172
|
+
transition: background-color 120ms ease;
|
|
173
|
+
}
|
|
174
|
+
.dsh-tw-note-toggle:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.1)); }
|
|
175
|
+
|
|
176
|
+
/* ── toast ──────────────────────────────────────────────────── */
|
|
177
|
+
.dsh-tw-toast {
|
|
178
|
+
position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
|
|
179
|
+
background: var(--dsw-alias-bg-inverse, rgba(30,30,30,.92)); color: var(--dsw-alias-label-inverse, #fff);
|
|
180
|
+
font-size: 13px; padding: 8px 16px; border-radius: 999px; z-index: 10001;
|
|
181
|
+
opacity: 0; transition: opacity .2s ease; pointer-events: none;
|
|
182
|
+
max-width: 80vw; overflow-wrap: anywhere;
|
|
183
|
+
}
|
|
184
|
+
.dsh-tw-toast.dsh-tw-toast-show { opacity: 1; }
|
|
185
|
+
|
|
186
|
+
/* ── settings page (config panel §13) ────────────────────────── */
|
|
187
|
+
.dsh-tw-settings { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; min-width: 0; }
|
|
188
|
+
.dsh-tw-settings-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
|
189
|
+
.dsh-tw-settings-chip {
|
|
190
|
+
font-size: 12px; padding: 2px 10px; border-radius: 999px;
|
|
191
|
+
border: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,.25));
|
|
192
|
+
}
|
|
193
|
+
.dsh-tw-settings-chip[data-state="running"] { color: var(--dsw-alias-state-success-primary, #3eaa5f); }
|
|
194
|
+
.dsh-tw-settings-chip[data-state="starting"] { color: var(--dsw-alias-state-warning-primary, #d9822b); }
|
|
195
|
+
.dsh-tw-settings-chip[data-state="failed"], .dsh-tw-settings-chip[data-state="stopped"] { color: var(--dsw-alias-state-error-primary, #d13b3b); }
|
|
196
|
+
.dsh-tw-settings-section { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,.18)); }
|
|
197
|
+
.dsh-tw-settings-h { margin: 0; font-size: 13px; font-weight: 600; color: var(--dsw-alias-label-primary, #222); }
|
|
198
|
+
.dsh-tw-settings-field { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dsw-alias-label-secondary, inherit); }
|
|
199
|
+
.dsh-tw-settings-field-check { cursor: pointer; }
|
|
200
|
+
.dsh-tw-settings-label { flex: 0 0 170px; }
|
|
201
|
+
.dsh-tw-settings-input {
|
|
202
|
+
flex: 1; min-width: 0; font: inherit; font-size: 12px; padding: 4px 8px; border-radius: 6px;
|
|
203
|
+
border: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,.28));
|
|
204
|
+
background: var(--dsw-alias-bg-input, transparent); color: var(--dsw-alias-label-primary, #222);
|
|
205
|
+
}
|
|
206
|
+
.dsh-tw-settings-input:focus {
|
|
207
|
+
outline: none; border-color: var(--dsw-alias-brand-primary, #3e63dd);
|
|
208
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--dsw-alias-brand-primary, #3e63dd) 22%, transparent);
|
|
209
|
+
}
|
|
210
|
+
.dsh-tw-settings-list { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow: auto; }
|
|
211
|
+
.dsh-tw-settings-plugin { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 6px; font-size: 12px; }
|
|
212
|
+
.dsh-tw-settings-plugin:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.08)); }
|
|
213
|
+
.dsh-tw-settings-name { font-weight: 500; flex: 0 0 130px; color: var(--dsw-alias-label-primary, #222); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
214
|
+
.dsh-tw-settings-head { padding: 2px 4px 4px; font-size: 11px; }
|
|
215
|
+
.dsh-tw-settings-col { flex: 0 0 14px; text-align: center; color: var(--dsw-alias-label-dimmed, #999); }
|
|
216
|
+
.dsh-tw-settings-row.dsh-tw-settings-plugin input { flex: 0 0 auto; margin: 0; }
|
|
217
|
+
.dsh-tw-settings-muted { color: var(--dsw-alias-label-dimmed, #999); font-size: 12px; }
|
|
218
|
+
.dsh-tw-settings-btn {
|
|
219
|
+
align-self: flex-start; border: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,.28));
|
|
220
|
+
background: transparent; color: var(--dsw-alias-label-primary, #222);
|
|
221
|
+
font: inherit; font-size: 12px; padding: 4px 12px; border-radius: 7px; cursor: pointer;
|
|
222
|
+
}
|
|
223
|
+
.dsh-tw-settings-btn:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.1)); }
|
|
224
|
+
.dsh-tw-settings-btn:disabled { opacity: .55; cursor: default; }
|
|
225
|
+
.dsh-tw-settings-btn.dsh-tw-settings-primary {
|
|
226
|
+
background: var(--dsw-alias-brand-primary, #3e63dd); border-color: transparent; color: #fff;
|
|
227
|
+
}
|
|
228
|
+
.dsh-tw-settings-error { color: var(--dsw-alias-state-error-primary, #d13b3b); font-size: 12px; }
|
|
229
|
+
.dsh-tw-settings-search { flex: 0 0 auto; max-width: 220px; }
|
|
230
|
+
.dsh-tw-settings-check { accent-color: var(--dsw-alias-brand-primary, #3e63dd); }
|
|
231
|
+
`
|
|
232
|
+
|
|
233
|
+
export function injectStyles(): void {
|
|
234
|
+
if (typeof document === 'undefined') return
|
|
235
|
+
let el = document.getElementById(STYLE_ID)
|
|
236
|
+
if (el !== null) return
|
|
237
|
+
el = document.createElement('style')
|
|
238
|
+
el.id = STYLE_ID
|
|
239
|
+
el.dataset.plugin = 'dsh-tiddlywiki'
|
|
240
|
+
el.textContent = CSS_TEXT
|
|
241
|
+
document.head.append(el)
|
|
242
|
+
}
|
package/src/client/toast.ts
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* One-shot transient toast, shared by the quick-note widget and the settings
|
|
3
|
-
* page. Reuses a single body-level element (`.dsh-tw-toast`) with a show
|
|
4
|
-
* class; the element is created lazily and styled by styles.ts.
|
|
5
|
-
*
|
|
6
|
-
* @module dsh-tiddlywiki/client/toast
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
export function toast(message: string): void {
|
|
10
|
-
let el = document.querySelector<HTMLElement>('.dsh-tw-toast')
|
|
11
|
-
if (el === null) {
|
|
12
|
-
el = document.createElement('div')
|
|
13
|
-
el.className = 'dsh-tw-toast'
|
|
14
|
-
document.body.append(el)
|
|
15
|
-
}
|
|
16
|
-
el.textContent = message
|
|
17
|
-
el.classList.add('dsh-tw-toast-show')
|
|
18
|
-
clearTimeout((el as HTMLElement & { __twToastTimer?: number }).__twToastTimer)
|
|
19
|
-
;(el as HTMLElement & { __twToastTimer?: number }).__twToastTimer = window.setTimeout(() => {
|
|
20
|
-
el?.classList.remove('dsh-tw-toast-show')
|
|
21
|
-
}, 2_500)
|
|
22
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* One-shot transient toast, shared by the quick-note widget and the settings
|
|
3
|
+
* page. Reuses a single body-level element (`.dsh-tw-toast`) with a show
|
|
4
|
+
* class; the element is created lazily and styled by styles.ts.
|
|
5
|
+
*
|
|
6
|
+
* @module dsh-tiddlywiki/client/toast
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
export function toast(message: string): void {
|
|
10
|
+
let el = document.querySelector<HTMLElement>('.dsh-tw-toast')
|
|
11
|
+
if (el === null) {
|
|
12
|
+
el = document.createElement('div')
|
|
13
|
+
el.className = 'dsh-tw-toast'
|
|
14
|
+
document.body.append(el)
|
|
15
|
+
}
|
|
16
|
+
el.textContent = message
|
|
17
|
+
el.classList.add('dsh-tw-toast-show')
|
|
18
|
+
clearTimeout((el as HTMLElement & { __twToastTimer?: number }).__twToastTimer)
|
|
19
|
+
;(el as HTMLElement & { __twToastTimer?: number }).__twToastTimer = window.setTimeout(() => {
|
|
20
|
+
el?.classList.remove('dsh-tw-toast-show')
|
|
21
|
+
}, 2_500)
|
|
22
|
+
}
|