@lmzhen/dsh-evolution-skill-history 0.14.1 → 0.15.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 +2 -2
- package/lib/client.js +486 -293
- package/lib/index.js +24 -8
- package/lib/types/client/Panel.d.ts +13 -19
- package/lib/types/client/api.d.ts +33 -2
- package/lib/types/client/atoms.d.ts +73 -0
- package/lib/types/client/chrome.d.ts +73 -0
- package/lib/types/client/document.d.ts +71 -0
- package/lib/types/client/styles.d.ts +0 -21
- package/lib/types/client/tokens.d.ts +25 -0
- package/package.json +7 -7
package/lib/client.js
CHANGED
|
@@ -85,7 +85,8 @@ window.__ModuleLoader__.load({
|
|
|
85
85
|
"undo.confirm": "确认回退",
|
|
86
86
|
"undo.no": "取消",
|
|
87
87
|
current: "当前",
|
|
88
|
-
"versions.count": "个版本",
|
|
88
|
+
"versions.count": "{n} 个版本",
|
|
89
|
+
"row.version": "v{n}",
|
|
89
90
|
"row.first": "初始版本",
|
|
90
91
|
"row.summary.missing": "（未生成摘要）",
|
|
91
92
|
"row.delta.up": "（+{n} 字符）",
|
|
@@ -94,7 +95,7 @@ window.__ModuleLoader__.load({
|
|
|
94
95
|
"diff.source": "源码",
|
|
95
96
|
"preview.show": "预览",
|
|
96
97
|
"preview.hide": "收起预览",
|
|
97
|
-
"preview.truncated": "
|
|
98
|
+
"preview.truncated": "正文过长：只显示前 {shown} 个字符（共 {total} 个）",
|
|
98
99
|
"path.unrecorded": "（路径未记录）",
|
|
99
100
|
"diff.rendered": "渲染",
|
|
100
101
|
"markdown.copy": "复制",
|
|
@@ -158,7 +159,8 @@ window.__ModuleLoader__.load({
|
|
|
158
159
|
"undo.confirm": "Confirm restore",
|
|
159
160
|
"undo.no": "Cancel",
|
|
160
161
|
current: "Current",
|
|
161
|
-
"versions.count": "versions",
|
|
162
|
+
"versions.count": "{n} versions",
|
|
163
|
+
"row.version": "v{n}",
|
|
162
164
|
"row.first": "First version",
|
|
163
165
|
"row.summary.missing": "(no summary generated)",
|
|
164
166
|
"row.delta.up": "(+{n} chars)",
|
|
@@ -167,7 +169,7 @@ window.__ModuleLoader__.load({
|
|
|
167
169
|
"diff.source": "Source",
|
|
168
170
|
"preview.show": "Preview",
|
|
169
171
|
"preview.hide": "Hide preview",
|
|
170
|
-
"preview.truncated": "the body is long
|
|
172
|
+
"preview.truncated": "the body is long: showing the first {shown} of {total} characters",
|
|
171
173
|
"path.unrecorded": "(path not recorded)",
|
|
172
174
|
"diff.rendered": "Rendered",
|
|
173
175
|
"markdown.copy": "Copy",
|
|
@@ -226,81 +228,356 @@ window.__ModuleLoader__.load({
|
|
|
226
228
|
});
|
|
227
229
|
}
|
|
228
230
|
//#endregion
|
|
231
|
+
//#region src/client/tokens.ts
|
|
232
|
+
/**
|
|
233
|
+
* The scale, declared on one element so it never leaks into the host shell.
|
|
234
|
+
* @param scope - the selector the custom properties are declared on.
|
|
235
|
+
* @returns the declaration block to put in the stylesheet.
|
|
236
|
+
*/
|
|
237
|
+
function tokenVars(scope) {
|
|
238
|
+
return scope + "{--evo-type-lg:calc(1em + 2px);--evo-type-body:1em;--evo-type-sm:calc(1em - 1px);--evo-type-xs:calc(1em - 2px);--evo-space-2:2px;--evo-space-4:4px;--evo-space-6:6px;--evo-space-8:8px;--evo-space-10:10px;--evo-space-12:12px;--evo-space-14:14px;--evo-space-16:16px;--evo-space-20:20px;--evo-radius-chip:4px;--evo-radius-control:8px;--evo-radius-surface:12px;--evo-radius-pill:999px;--evo-hairline-width:.5px;--evo-hairline-marker:2px;--evo-measure-read:80ch;--evo-leading-base:1.5;--evo-tone-quiet:var(--dsw-alias-label-secondary);--evo-tone-primary:var(--dsw-alias-brand-primary);--evo-tone-danger:var(--dsw-alias-state-error-primary);--evo-tone-success:var(--dsw-alias-state-success-primary);--evo-focus-ring:2px solid var(--dsw-alias-label-primary);--evo-focus-offset:-2px;--evo-cap-aside:280px;--evo-cap-block:260px}";
|
|
239
|
+
}
|
|
240
|
+
//#endregion
|
|
229
241
|
//#region src/client/styles.ts
|
|
230
242
|
/**
|
|
231
243
|
* The panel’s stylesheet, injected once behind a `<style data-plugin-css=…>` tag.
|
|
232
244
|
*
|
|
233
|
-
*
|
|
234
|
-
*
|
|
235
|
-
*
|
|
245
|
+
* TWO FACES, ONE SCALE. The TOOL face (`.evo-hist-*`) is the compact list and its controls; the
|
|
246
|
+
* READING face (`.evo-doc-*`, at the end) is a version rendered as a document. Each face owns its
|
|
247
|
+
* rules and they never overlap: the list may be dense and full of controls, a document may not. That
|
|
248
|
+
* is the whole reason for two prefixes — a rule that serves one face can no longer fight the other’s
|
|
249
|
+
* comfort, and a third face would be another block rather than an edit here (§15.2 L2b, W22).
|
|
236
250
|
*
|
|
237
|
-
*
|
|
238
|
-
*
|
|
251
|
+
* Every colour is a platform design token; every type step and every geometry value is a family scale
|
|
252
|
+
* token (`./tokens.ts`, generated from `packages/scripts/client-tokens.json`), so the two client
|
|
253
|
+
* halves of this family cannot drift apart.
|
|
254
|
+
*
|
|
255
|
+
* The metrics themselves are COPIED from the platform’s own components rather than invented:
|
|
256
|
+
*
|
|
257
|
+
* - the code block (`--dsw-font-markdown-code-block-small`, `0.5px` border, `12px` padding, radius
|
|
258
|
+
* `12px`, `max-height: 260px`) is the platform command card’s `<pre>` (client/ui-chat/…/GenericCommandCard.module.css);
|
|
239
259
|
* - hover / focus (`--dsw-alias-interactive-bg-hover`, a 2px inset focus ring) follow the platform
|
|
240
260
|
* sidebar row (client/ui-sidebar/…/SidebarRoot.module.css);
|
|
241
|
-
* - the
|
|
242
|
-
*
|
|
243
|
-
*
|
|
244
|
-
* platform’s
|
|
245
|
-
*
|
|
246
|
-
*
|
|
247
|
-
* own components write geometry the same way; what must never be a literal is TYPE and COLOUR, and
|
|
248
|
-
* every size and colour below is a token or a `calc()` over one.
|
|
261
|
+
* - the field radius (`8px`) is the platform’s own Input primitive (client/ui-primitives/Input.module.css);
|
|
262
|
+
* - the panel’s type steps come from the family scale, which is relative to the shell’s chrome size —
|
|
263
|
+
* NOT the setting behind `--dsh-content-font-size*` (that one says it affects conversation content
|
|
264
|
+
* only, and the platform’s own surfaces never read it). The step is relative, so the panel scales
|
|
265
|
+
* with the shell, not with the conversation: the dense list needs it — at the raw chrome size
|
|
266
|
+
* `dsh-evolution-maintenance` truncates in 264px.
|
|
249
267
|
* @module @lmzhen/dsh-evolution-skill-history/client
|
|
250
268
|
*/
|
|
251
269
|
/** Tag id that makes the injection idempotent. */
|
|
252
270
|
const CSS_TAG_ID = "@lmzhen/dsh-evolution-skill-history/panel.css";
|
|
253
271
|
/** The stylesheet the panel injects once. */
|
|
254
272
|
const CSS = [
|
|
255
|
-
".evo-hist-root
|
|
256
|
-
".evo-hist-
|
|
257
|
-
".evo-hist-
|
|
258
|
-
".evo-hist-search
|
|
259
|
-
".evo-hist-search input:
|
|
260
|
-
".evo-hist-
|
|
261
|
-
".evo-hist-
|
|
262
|
-
".evo-hist-
|
|
273
|
+
tokenVars(".evo-hist-root"),
|
|
274
|
+
".evo-hist-root{display:flex;height:100%;min-height:0;min-width:0;font-size:var(--evo-type-sm);color:var(--dsw-alias-label-primary)}",
|
|
275
|
+
".evo-hist-aside{display:flex;flex-direction:column;flex:0 0 var(--evo-cap-aside);width:var(--evo-cap-aside);min-height:0;border-right:var(--evo-hairline-width) solid var(--dsw-alias-border-l2)}",
|
|
276
|
+
".evo-hist-search{padding:var(--evo-space-12) var(--evo-space-12) var(--evo-space-4)}",
|
|
277
|
+
".evo-hist-search input{width:100%;box-sizing:border-box;padding:var(--evo-space-6) var(--evo-space-10);border:var(--evo-hairline-width) solid var(--dsw-alias-border-l2);border-radius:var(--evo-radius-control);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);font:inherit}",
|
|
278
|
+
".evo-hist-search input:focus-visible{outline:var(--evo-focus-ring);outline-offset:var(--evo-focus-offset)}",
|
|
279
|
+
".evo-hist-list{flex:1 1 auto;min-height:0;overflow-y:auto;padding:var(--evo-space-4) var(--evo-space-12) var(--evo-space-10)}",
|
|
280
|
+
".evo-hist-empty{padding:var(--evo-space-6) var(--evo-space-8);margin:0;color:var(--dsw-alias-label-tertiary)}",
|
|
281
|
+
".evo-hist-skill{display:block;width:100%;box-sizing:border-box;padding:var(--evo-space-6) var(--evo-space-8);border:0;border-radius:var(--evo-radius-control);background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;text-align:left;cursor:pointer}",
|
|
263
282
|
".evo-hist-skill:hover{background:var(--dsw-alias-interactive-bg-hover)}",
|
|
264
|
-
".evo-hist-skill:focus-visible{outline:
|
|
283
|
+
".evo-hist-skill:focus-visible{outline:var(--evo-focus-ring);outline-offset:var(--evo-focus-offset)}",
|
|
265
284
|
".evo-hist-skill[aria-current=\"true\"]{background:var(--dsw-alias-interactive-bg-active);color:var(--dsw-alias-label-primary);font-weight:500}",
|
|
266
|
-
".evo-hist-
|
|
267
|
-
".evo-hist-
|
|
268
|
-
".evo-hist-
|
|
269
|
-
".evo-hist-
|
|
270
|
-
".evo-hist-
|
|
271
|
-
".evo-hist-
|
|
272
|
-
".evo-hist-
|
|
273
|
-
".evo-hist-
|
|
274
|
-
".evo-hist-
|
|
275
|
-
".evo-hist-
|
|
276
|
-
".evo-hist-
|
|
277
|
-
".evo-hist-
|
|
278
|
-
".evo-hist-
|
|
285
|
+
".evo-hist-cell-line{display:flex;align-items:baseline;gap:var(--evo-space-6);min-width:0}",
|
|
286
|
+
".evo-hist-cell-meta{margin-top:var(--evo-space-2)}",
|
|
287
|
+
".evo-hist-cell{min-width:0;font-variant-numeric:tabular-nums}",
|
|
288
|
+
".evo-hist-slot-lead{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
|
|
289
|
+
".evo-hist-slot-meta{flex:none;white-space:nowrap}",
|
|
290
|
+
".evo-hist-slot-aside{flex:none;margin-left:auto;white-space:nowrap}",
|
|
291
|
+
".evo-hist-tone-primary{color:inherit}",
|
|
292
|
+
".evo-hist-tone-secondary{color:var(--dsw-alias-label-secondary)}",
|
|
293
|
+
".evo-hist-tone-tertiary{color:var(--dsw-alias-label-tertiary)}",
|
|
294
|
+
".evo-hist-main{flex:1 1 auto;min-width:0;min-height:0;overflow-y:auto;padding:var(--evo-space-12) var(--evo-space-12)}",
|
|
295
|
+
".evo-hist-head{display:flex;align-items:center;gap:var(--evo-space-10);margin:0 0 var(--evo-space-4)}",
|
|
296
|
+
".evo-hist-title{flex:1 1 auto;margin:0;font-size:var(--evo-type-lg);font-weight:600}",
|
|
297
|
+
".evo-hist-hint{margin:0 0 var(--evo-space-10);color:var(--dsw-alias-label-secondary);line-height:var(--evo-leading-base)}",
|
|
298
|
+
".evo-hist-note{display:flex;align-items:flex-start;gap:var(--evo-space-6);margin:0 0 var(--evo-space-10);color:var(--dsw-alias-label-secondary);line-height:var(--evo-leading-base)}",
|
|
299
|
+
".evo-hist-note-text{min-width:0;white-space:pre-wrap}",
|
|
300
|
+
".evo-hist-note[data-error=\"true\"]{color:var(--evo-tone-danger);background:var(--dsw-alias-bg-layer-2);border:var(--evo-hairline-width) solid var(--evo-tone-danger);border-radius:var(--evo-radius-control);padding:var(--evo-space-8) var(--evo-space-10)}",
|
|
301
|
+
".evo-hist-icon{flex:none;margin-top:.15em}",
|
|
302
|
+
".evo-hist-group{margin:var(--evo-space-16) 0 var(--evo-space-4);font-size:var(--evo-type-sm);font-weight:600;color:var(--dsw-alias-label-secondary)}",
|
|
303
|
+
".evo-hist-row{display:flex;align-items:flex-start;gap:var(--evo-space-8);padding:var(--evo-space-8) 0;border-top:var(--evo-hairline-width) solid var(--dsw-alias-border-l2);max-width:calc(var(--evo-measure-read) * 1.5);color:var(--dsw-alias-label-primary)}",
|
|
279
304
|
".evo-hist-row:first-of-type{border-top:0}",
|
|
280
305
|
".evo-hist-row-body{flex:1 1 auto;min-width:0}",
|
|
281
|
-
".evo-hist-row-title{display:flex;align-items:baseline;gap:
|
|
282
|
-
".evo-hist-row-
|
|
283
|
-
".evo-hist-
|
|
284
|
-
".evo-hist-
|
|
285
|
-
".evo-hist-
|
|
286
|
-
".evo-hist-button{
|
|
306
|
+
".evo-hist-row-title{display:flex;align-items:baseline;gap:var(--evo-space-8);min-width:0}",
|
|
307
|
+
".evo-hist-row-summary{margin-top:var(--evo-space-2);line-height:var(--evo-leading-base)}",
|
|
308
|
+
".evo-hist-actions{display:flex;flex:none;align-items:center;gap:var(--evo-space-6)}",
|
|
309
|
+
".evo-hist-chip{flex:none;padding:var(--evo-space-2) var(--evo-space-8);border-radius:var(--evo-radius-pill);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-secondary)}",
|
|
310
|
+
".evo-hist-button{display:inline-flex;flex:none;align-items:center;gap:var(--evo-space-2);font:inherit;padding:var(--evo-space-4) var(--evo-space-10);border:var(--evo-hairline-width) solid var(--dsw-alias-border-l2);border-radius:var(--evo-radius-control);background:transparent;color:var(--evo-tone-quiet);cursor:pointer}",
|
|
311
|
+
".evo-hist-button[data-kind=\"toggle\"],.evo-hist-button[data-kind=\"switch\"]{padding:var(--evo-space-2) var(--evo-space-4);border-color:transparent;color:var(--evo-tone-quiet)}",
|
|
312
|
+
".evo-hist-button[data-kind=\"switch\"][aria-pressed=\"true\"]{color:var(--dsw-alias-label-primary)}",
|
|
287
313
|
".evo-hist-button:hover{background:var(--dsw-alias-interactive-bg-hover)}",
|
|
288
|
-
".evo-hist-button:focus-visible{outline:
|
|
289
|
-
".evo-hist-button[data-tone=\"primary\"]{border-color:var(--
|
|
290
|
-
".evo-
|
|
291
|
-
".evo-
|
|
292
|
-
".evo-
|
|
293
|
-
".evo-hist-
|
|
294
|
-
".evo-
|
|
295
|
-
".evo-
|
|
296
|
-
".evo-
|
|
297
|
-
".evo-
|
|
298
|
-
".evo-
|
|
299
|
-
".evo-
|
|
300
|
-
".evo-
|
|
301
|
-
".evo-
|
|
314
|
+
".evo-hist-button:focus-visible{outline:var(--evo-focus-ring);outline-offset:var(--evo-focus-offset)}",
|
|
315
|
+
".evo-hist-button[data-tone=\"primary\"]{border-color:var(--evo-tone-primary);color:var(--evo-tone-primary)}",
|
|
316
|
+
".evo-doc-preview{margin:var(--evo-space-6) 0 var(--evo-space-2);max-width:var(--evo-measure-read);line-height:var(--evo-leading-base)}",
|
|
317
|
+
".evo-doc-diff{display:flex;flex-direction:column;gap:var(--evo-space-8)}",
|
|
318
|
+
".evo-doc-head{display:flex;align-items:center;gap:var(--evo-space-8);max-width:var(--evo-measure-read)}",
|
|
319
|
+
".evo-doc-head .evo-hist-note{flex:1 1 auto;margin:0}",
|
|
320
|
+
".evo-doc-toggle{display:flex;flex:none;align-items:center;gap:var(--evo-space-6)}",
|
|
321
|
+
".evo-doc-fact+.evo-doc-fact::before{content:\"·\";margin:0 var(--evo-space-6);color:var(--dsw-alias-label-tertiary)}",
|
|
322
|
+
".evo-doc-source{margin:var(--evo-space-6) 0 var(--evo-space-2);padding:var(--evo-space-12) var(--evo-space-16);max-height:var(--evo-cap-block);overflow:auto;border:var(--evo-hairline-width) solid var(--dsw-alias-border-l1);border-radius:var(--evo-radius-surface);background:var(--dsw-alias-markdown-code-block);color:var(--dsw-alias-label-primary);font:var(--dsw-font-markdown-code-block-small);white-space:pre-wrap}",
|
|
323
|
+
".evo-doc-render{display:flex;flex-direction:column;gap:var(--evo-space-8);margin:var(--evo-space-6) 0 var(--evo-space-2);max-width:var(--evo-measure-read)}",
|
|
324
|
+
".evo-doc-block{position:relative;padding:var(--evo-space-8) var(--evo-space-12) var(--evo-space-8) var(--evo-space-20);border:var(--evo-hairline-width) solid var(--dsw-alias-border-l2);border-left-width:var(--evo-hairline-marker);border-radius:var(--evo-radius-surface);background:var(--dsw-alias-markdown-code-block);overflow-x:auto}",
|
|
325
|
+
".evo-doc-del{border-left-color:var(--evo-tone-danger)}",
|
|
326
|
+
".evo-doc-add{border-left-color:var(--evo-tone-success)}",
|
|
327
|
+
".evo-doc-tag{position:absolute;left:var(--evo-space-8);top:var(--evo-space-8);color:var(--dsw-alias-label-tertiary)}",
|
|
328
|
+
".evo-doc-line-add{color:var(--evo-tone-success)}",
|
|
329
|
+
".evo-doc-line-del{color:var(--evo-tone-danger)}"
|
|
302
330
|
].join("\n");
|
|
303
331
|
//#endregion
|
|
332
|
+
//#region src/client/atoms.ts
|
|
333
|
+
/**
|
|
334
|
+
* The four atoms the panel's tool face is built from (G3, §15.2 L2a atoms).
|
|
335
|
+
*
|
|
336
|
+
* Why atoms at all: the row used to be assembled from five different elements that each wrote their
|
|
337
|
+
* own classes, so "what a control looks like" was spread over the stylesheet and a click target, a
|
|
338
|
+
* state chip, a refusal and a glyph had no vocabulary at all (W7/W9/W13/W14). Every interactive
|
|
339
|
+
* element now says what it IS — a control that acts, a control that only reveals more, a state, a
|
|
340
|
+
* notice — and the stylesheet answers once per kind.
|
|
341
|
+
*
|
|
342
|
+
* No words live here: an atom takes the copy its caller already resolved.
|
|
343
|
+
* @module @lmzhen/dsh-evolution-skill-history/client
|
|
344
|
+
*/
|
|
345
|
+
/** The stroked path of one glyph, in a 16x16 box. */
|
|
346
|
+
const PATHS = {
|
|
347
|
+
"chevron-right": ["M6.5 3.5L11 8l-4.5 4.5"],
|
|
348
|
+
"chevron-down": ["M3.5 6.5L8 11l4.5-4.5"],
|
|
349
|
+
alert: [
|
|
350
|
+
"M8 2.5l5.5 10.5h-11z",
|
|
351
|
+
"M8 6.6v3.1",
|
|
352
|
+
"M8 11.4h.01"
|
|
353
|
+
]
|
|
354
|
+
};
|
|
355
|
+
/**
|
|
356
|
+
* One drawn glyph.
|
|
357
|
+
* @param name - which glyph.
|
|
358
|
+
* @returns an inline SVG that takes the surrounding colour and type size.
|
|
359
|
+
*/
|
|
360
|
+
function icon(name) {
|
|
361
|
+
return (0, react.createElement)("svg", {
|
|
362
|
+
className: "evo-hist-icon",
|
|
363
|
+
viewBox: "0 0 16 16",
|
|
364
|
+
width: "1em",
|
|
365
|
+
height: "1em",
|
|
366
|
+
fill: "none",
|
|
367
|
+
stroke: "currentColor",
|
|
368
|
+
strokeWidth: 1.5,
|
|
369
|
+
strokeLinecap: "round",
|
|
370
|
+
strokeLinejoin: "round",
|
|
371
|
+
"aria-hidden": "true",
|
|
372
|
+
focusable: "false"
|
|
373
|
+
}, PATHS[name].map((d, index) => (0, react.createElement)("path", {
|
|
374
|
+
key: index,
|
|
375
|
+
d
|
|
376
|
+
})));
|
|
377
|
+
}
|
|
378
|
+
/**
|
|
379
|
+
* One control.
|
|
380
|
+
* @param props - what it is, how it speaks, and what it does.
|
|
381
|
+
* @returns the button element.
|
|
382
|
+
*/
|
|
383
|
+
function button(props) {
|
|
384
|
+
const { children, kind = "action", tone = "quiet", title, expanded, pressed, onClick } = props;
|
|
385
|
+
return (0, react.createElement)("button", {
|
|
386
|
+
key: props.key,
|
|
387
|
+
type: "button",
|
|
388
|
+
className: "evo-hist-button",
|
|
389
|
+
"data-kind": kind,
|
|
390
|
+
"data-tone": tone,
|
|
391
|
+
title,
|
|
392
|
+
"aria-expanded": expanded,
|
|
393
|
+
"aria-pressed": pressed,
|
|
394
|
+
onClick
|
|
395
|
+
}, kind === "toggle" ? icon(expanded === true ? "chevron-down" : "chevron-right") : null, children);
|
|
396
|
+
}
|
|
397
|
+
/**
|
|
398
|
+
* One state, spelled as a chip: never clickable, never in the primary colour (W9).
|
|
399
|
+
* @param props - the copy.
|
|
400
|
+
* @returns the chip element.
|
|
401
|
+
*/
|
|
402
|
+
function chip(props) {
|
|
403
|
+
return (0, react.createElement)("span", {
|
|
404
|
+
key: props.key,
|
|
405
|
+
className: "evo-hist-chip"
|
|
406
|
+
}, props.children);
|
|
407
|
+
}
|
|
408
|
+
/**
|
|
409
|
+
* One notice.
|
|
410
|
+
* @param props - the copy, and whether it reports a failure.
|
|
411
|
+
* @returns the note element.
|
|
412
|
+
*/
|
|
413
|
+
function note(props) {
|
|
414
|
+
return (0, react.createElement)("p", {
|
|
415
|
+
key: props.key,
|
|
416
|
+
className: "evo-hist-note",
|
|
417
|
+
"data-error": props.error === true ? "true" : void 0
|
|
418
|
+
}, props.error === true ? icon("alert") : null, (0, react.createElement)("span", { className: "evo-hist-note-text" }, props.children));
|
|
419
|
+
}
|
|
420
|
+
//#endregion
|
|
421
|
+
//#region src/client/chrome.ts
|
|
422
|
+
/**
|
|
423
|
+
* The TOOL face: the skill list, the version list, and the controls that act on a version.
|
|
424
|
+
*
|
|
425
|
+
* This file renders FACTS. What a row says, in which order and in which slot is decided in core
|
|
426
|
+
* (`skill-row-cells.ts`) and travels with the row, because a browser half cannot import core at
|
|
427
|
+
* runtime; the words come from the locale dictionary through the `Copy` seat. The renderer's only
|
|
428
|
+
* judgements are layout: a cell's slot decides its alignment, and the `aside` slot is the one the
|
|
429
|
+
* browser's ellipsis may never eat (W1).
|
|
430
|
+
*
|
|
431
|
+
* The reading face — a version rendered as a document, and the rendered diff — lives in
|
|
432
|
+
* `document.ts`; the two faces share the scale in `tokens.ts` and nothing else (§15.2 L2b).
|
|
433
|
+
* @module @lmzhen/dsh-evolution-skill-history/client
|
|
434
|
+
*/
|
|
435
|
+
/** The local time an ISO timestamp names, as the operator's own clock shows it. */
|
|
436
|
+
function localTime(at) {
|
|
437
|
+
const parsed = Date.parse(at);
|
|
438
|
+
if (Number.isNaN(parsed)) return at;
|
|
439
|
+
const date = new Date(parsed);
|
|
440
|
+
const pad = (value) => String(value).padStart(2, "0");
|
|
441
|
+
return String(date.getFullYear()) + "-" + pad(date.getMonth() + 1) + "-" + pad(date.getDate()) + " " + pad(date.getHours()) + ":" + pad(date.getMinutes());
|
|
442
|
+
}
|
|
443
|
+
/** The text one cell shows, resolved through the seat. */
|
|
444
|
+
function cellText(copy, cell) {
|
|
445
|
+
if (!("copy" in cell)) return cell.literal;
|
|
446
|
+
return cell.values === void 0 ? copy.t(cell.copy) : copy.format(cell.copy, cell.values);
|
|
447
|
+
}
|
|
448
|
+
/**
|
|
449
|
+
* One line of cells. The slot decides placement; the tone only changes the register.
|
|
450
|
+
* @param cells - the cells of this line, in reading order.
|
|
451
|
+
* @param copy - the dictionary seat.
|
|
452
|
+
* @param className - the line's own class.
|
|
453
|
+
* @param hover - hover text the host cannot express (the local clock), by cell key.
|
|
454
|
+
* @returns the line element.
|
|
455
|
+
*/
|
|
456
|
+
function cellLine(cells, copy, className, hover = {}) {
|
|
457
|
+
return (0, react.createElement)("div", { className }, cells.map((cell) => (0, react.createElement)("span", {
|
|
458
|
+
key: cell.key,
|
|
459
|
+
className: "evo-hist-cell evo-hist-slot-" + cell.slot + " evo-hist-tone-" + cell.tone,
|
|
460
|
+
title: hover[cell.key] ?? cell.note
|
|
461
|
+
}, cellText(copy, cell))));
|
|
462
|
+
}
|
|
463
|
+
/** The search field above the list. */
|
|
464
|
+
function searchField(copy, query, onQuery) {
|
|
465
|
+
return (0, react.createElement)("div", { className: "evo-hist-search" }, (0, react.createElement)("input", {
|
|
466
|
+
type: "search",
|
|
467
|
+
value: query,
|
|
468
|
+
placeholder: copy.t("search"),
|
|
469
|
+
"aria-label": copy.t("search"),
|
|
470
|
+
onChange: (event) => {
|
|
471
|
+
onQuery(event.target.value);
|
|
472
|
+
}
|
|
473
|
+
}));
|
|
474
|
+
}
|
|
475
|
+
/**
|
|
476
|
+
* One skill in the left column: its name and size, then what it is and when it last changed.
|
|
477
|
+
* @param copy - the dictionary seat.
|
|
478
|
+
* @param row - the skill's facts and cells.
|
|
479
|
+
* @param selected - whether this is the open skill.
|
|
480
|
+
* @param onOpen - what a click does.
|
|
481
|
+
* @returns the row.
|
|
482
|
+
*/
|
|
483
|
+
function skillLine(copy, row, selected, onOpen) {
|
|
484
|
+
return (0, react.createElement)("button", {
|
|
485
|
+
key: row.name,
|
|
486
|
+
type: "button",
|
|
487
|
+
className: "evo-hist-skill",
|
|
488
|
+
"aria-current": selected ? "true" : void 0,
|
|
489
|
+
onClick: onOpen
|
|
490
|
+
}, cellLine(row.cells.title, copy, "evo-hist-cell-line"), cellLine(row.cells.meta, copy, "evo-hist-cell-line evo-hist-cell-meta"));
|
|
491
|
+
}
|
|
492
|
+
/**
|
|
493
|
+
* One version row: what happened, when, how big — then the controls, then whatever is expanded.
|
|
494
|
+
*
|
|
495
|
+
* The write is the only control that can change anything, and it is the only one that ever takes the
|
|
496
|
+
* primary tone; a toggle that merely reveals more is borderless and carries a drawn chevron, so the
|
|
497
|
+
* two kinds cannot be mistaken for each other (W7/W14).
|
|
498
|
+
* @param props - the row, the copy, and the panel's callbacks.
|
|
499
|
+
* @returns the row.
|
|
500
|
+
*/
|
|
501
|
+
function versionRow(props) {
|
|
502
|
+
const { copy, row, confirming, open, expanded, onRestore, onCancel, onToggle } = props;
|
|
503
|
+
const actions = [];
|
|
504
|
+
if (row.undoable === false) actions.push(chip({
|
|
505
|
+
key: "current",
|
|
506
|
+
children: copy.t("current")
|
|
507
|
+
}));
|
|
508
|
+
if (row.undoable === true) {
|
|
509
|
+
if (confirming) actions.push(button({
|
|
510
|
+
key: "cancel",
|
|
511
|
+
onClick: onCancel,
|
|
512
|
+
children: copy.t("undo.no")
|
|
513
|
+
}));
|
|
514
|
+
actions.push(button({
|
|
515
|
+
key: "undo",
|
|
516
|
+
tone: confirming ? "primary" : "quiet",
|
|
517
|
+
onClick: onRestore,
|
|
518
|
+
children: confirming ? copy.t("undo.confirm") : copy.t("undo")
|
|
519
|
+
}));
|
|
520
|
+
}
|
|
521
|
+
if (row.undoable === true || row.charsDelta !== void 0) actions.push(button({
|
|
522
|
+
key: "diff",
|
|
523
|
+
kind: "toggle",
|
|
524
|
+
expanded: open === "diff",
|
|
525
|
+
onClick: () => {
|
|
526
|
+
onToggle("diff");
|
|
527
|
+
},
|
|
528
|
+
children: open === "diff" ? copy.t("diff.hide") : copy.t("diff.show")
|
|
529
|
+
}));
|
|
530
|
+
actions.push(button({
|
|
531
|
+
key: "preview",
|
|
532
|
+
kind: "toggle",
|
|
533
|
+
expanded: open === "preview",
|
|
534
|
+
onClick: () => {
|
|
535
|
+
onToggle("preview");
|
|
536
|
+
},
|
|
537
|
+
children: open === "preview" ? copy.t("preview.hide") : copy.t("preview.show")
|
|
538
|
+
}));
|
|
539
|
+
return (0, react.createElement)("div", {
|
|
540
|
+
key: String(row.v),
|
|
541
|
+
className: "evo-hist-row"
|
|
542
|
+
}, (0, react.createElement)("div", { className: "evo-hist-row-body" }, cellLine(row.cells.title, copy, "evo-hist-row-title", { time: localTime(row.at) }), row.cells.meta.length === 0 ? null : cellLine(row.cells.meta, copy, "evo-hist-row-summary"), expanded), (0, react.createElement)("div", { className: "evo-hist-actions" }, actions));
|
|
543
|
+
}
|
|
544
|
+
/**
|
|
545
|
+
* One group's heading, and the note that explains the group.
|
|
546
|
+
* @param title - the group's name, already resolved.
|
|
547
|
+
* @param noteText - the group's note, when it has one.
|
|
548
|
+
* @returns the heading and the note, for the caller to place in its own section.
|
|
549
|
+
*/
|
|
550
|
+
function groupHeading(title, noteText) {
|
|
551
|
+
return [(0, react.createElement)("h3", {
|
|
552
|
+
key: "title",
|
|
553
|
+
className: "evo-hist-group"
|
|
554
|
+
}, title), noteText === void 0 ? null : (0, react.createElement)("p", {
|
|
555
|
+
key: "note",
|
|
556
|
+
className: "evo-hist-hint"
|
|
557
|
+
}, noteText)];
|
|
558
|
+
}
|
|
559
|
+
/** What the list shows when it has nothing to show. */
|
|
560
|
+
function emptyState(text) {
|
|
561
|
+
return (0, react.createElement)("p", { className: "evo-hist-empty" }, text);
|
|
562
|
+
}
|
|
563
|
+
/** One notice about what just happened. */
|
|
564
|
+
function notice(text, error) {
|
|
565
|
+
if (text === void 0) return null;
|
|
566
|
+
return note({
|
|
567
|
+
error,
|
|
568
|
+
children: text
|
|
569
|
+
});
|
|
570
|
+
}
|
|
571
|
+
/** The pane's heading and its one control. */
|
|
572
|
+
function panelHead(copy, onRefresh) {
|
|
573
|
+
return (0, react.createElement)("div", { className: "evo-hist-head" }, (0, react.createElement)("h2", { className: "evo-hist-title" }, copy.t("title")), button({
|
|
574
|
+
key: "refresh",
|
|
575
|
+
title: copy.t("refresh"),
|
|
576
|
+
onClick: onRefresh,
|
|
577
|
+
children: copy.t("refresh")
|
|
578
|
+
}));
|
|
579
|
+
}
|
|
580
|
+
//#endregion
|
|
304
581
|
//#region src/client/markdown.ts
|
|
305
582
|
/**
|
|
306
583
|
* The one seam onto the platform's Markdown renderer.
|
|
@@ -395,105 +672,58 @@ window.__ModuleLoader__.load({
|
|
|
395
672
|
};
|
|
396
673
|
}
|
|
397
674
|
//#endregion
|
|
398
|
-
//#region src/client/
|
|
675
|
+
//#region src/client/document.ts
|
|
399
676
|
/**
|
|
400
|
-
* The
|
|
401
|
-
* and one action per body version (restore, behind an inline confirmation).
|
|
677
|
+
* The READING face: one version rendered as a document, and the rendered diff.
|
|
402
678
|
*
|
|
403
|
-
*
|
|
404
|
-
*
|
|
405
|
-
*
|
|
406
|
-
*
|
|
679
|
+
* This file is the only place that decides how a document reads (G4). The tool face (`chrome.ts`)
|
|
680
|
+
* picks versions and acts on them; here the rules are the reader's, and they follow the positioning
|
|
681
|
+
* ruling of §14.0: a document is read, not scanned — one measure, page-like spacing, no inner scroll
|
|
682
|
+
* (W18/W20/W21/W22). Nothing here is a control except the source/rendered choice, which belongs to
|
|
683
|
+
* the reader rather than to the panel's actions.
|
|
407
684
|
*
|
|
408
|
-
*
|
|
409
|
-
*
|
|
410
|
-
*
|
|
411
|
-
* discarded by its ticket; and the diff is fetched only when a row is expanded.
|
|
412
|
-
* @module @lmzhen/dsh-evolution-skill-history/client
|
|
413
|
-
*/
|
|
414
|
-
/** Cut a description to one line's worth of characters (the CSS ellipsises the rest). */
|
|
415
|
-
function oneLine(text) {
|
|
416
|
-
const firstLine = text.split("\n")[0] ?? "";
|
|
417
|
-
return firstLine.length > 120 ? firstLine.slice(0, 119) + "…" : firstLine;
|
|
418
|
-
}
|
|
419
|
-
/** The local time an ISO timestamp names, as the operator's own clock shows it. */
|
|
420
|
-
function localTime(at) {
|
|
421
|
-
const parsed = Date.parse(at);
|
|
422
|
-
if (Number.isNaN(parsed)) return at;
|
|
423
|
-
const date = new Date(parsed);
|
|
424
|
-
const pad = (value) => String(value).padStart(2, "0");
|
|
425
|
-
return String(date.getFullYear()) + "-" + pad(date.getMonth() + 1) + "-" + pad(date.getDate()) + " " + pad(date.getHours()) + ":" + pad(date.getMinutes());
|
|
426
|
-
}
|
|
427
|
-
/** The state word one skill row carries, from the facts the listing reported. */
|
|
428
|
-
function stateKey(skill) {
|
|
429
|
-
if (skill.protectionUnknown) return "state.unknown";
|
|
430
|
-
if (skill.protectedBy !== null) return "state.protected";
|
|
431
|
-
return skill.managed ? "state.managed" : "state.foreign";
|
|
432
|
-
}
|
|
433
|
-
/**
|
|
434
|
-
* The one clause an action word needs: what the recorded artifact IS. It rides the action word's
|
|
435
|
-
* `title` instead of widening the row (a parenthetical in the sentence pushed time and size aside).
|
|
436
|
-
* @param face - copy plus the data callbacks.
|
|
437
|
-
* @param row - the version row whose action is being named.
|
|
438
|
-
* @returns the clause, or undefined for the actions that need none.
|
|
439
|
-
*/
|
|
440
|
-
function actionNote(face, row) {
|
|
441
|
-
if (row.actionKind === "delete") return face.t("action.delete.note");
|
|
442
|
-
if (row.actionKind === "archive") return face.t("action.archive.note");
|
|
443
|
-
}
|
|
444
|
-
/**
|
|
445
|
-
* The lazy-read cache without one key.
|
|
685
|
+
* The text arrives already prepared: the host strips the frontmatter block through core's
|
|
686
|
+
* `displayBodyOf`, because a browser half cannot import core. The RENDERED DIFF keeps the whole text
|
|
687
|
+
* on purpose — a diff is about what CHANGED, and a metadata change is a change.
|
|
446
688
|
*
|
|
447
|
-
*
|
|
448
|
-
*
|
|
449
|
-
*
|
|
450
|
-
* @param current - the cache.
|
|
451
|
-
* @param key - the version whose entry is dropped.
|
|
452
|
-
* @returns a new cache without that key.
|
|
689
|
+
* It degrades rather than blanking: when the platform's renderer cannot be reached, the exact text is
|
|
690
|
+
* shown instead, and the reader can still read the version.
|
|
691
|
+
* @module @lmzhen/dsh-evolution-skill-history/client
|
|
453
692
|
*/
|
|
454
|
-
function without(current, key) {
|
|
455
|
-
const next = new Map(current);
|
|
456
|
-
next.delete(key);
|
|
457
|
-
return next;
|
|
458
|
-
}
|
|
459
|
-
/** The relative-time sentence for one row's bucket. */
|
|
460
|
-
function ageText(face, age) {
|
|
461
|
-
if (age.unit === "now") return face.t("time.now");
|
|
462
|
-
return age.n === 1 ? face.t("time." + age.unit + ".one") : face.format("time." + age.unit, { n: age.n });
|
|
463
|
-
}
|
|
464
|
-
/** The character delta of one row, or null when it is the first version. */
|
|
465
|
-
function deltaText(face, row) {
|
|
466
|
-
if (row.charsDelta === void 0 || row.charsDelta === 0) return null;
|
|
467
|
-
return row.charsDelta > 0 ? face.format("row.delta.up", { n: row.charsDelta }) : face.format("row.delta.down", { n: -row.charsDelta });
|
|
468
|
-
}
|
|
469
693
|
/** One `<pre>` rendering of a diff: added lines marked `+`, removed ones `-`. */
|
|
470
|
-
function
|
|
694
|
+
function sourceBlock(diff) {
|
|
471
695
|
const rows = [];
|
|
472
696
|
for (const hunk of diff.hunks) {
|
|
473
697
|
for (const [index, line] of hunk.oldText.split("\n").entries()) {
|
|
474
698
|
if (hunk.oldText === "" && line === "") continue;
|
|
475
699
|
rows.push((0, react.createElement)("div", {
|
|
476
700
|
key: "old-" + String(index),
|
|
477
|
-
className: "evo-
|
|
701
|
+
className: "evo-doc-line-del"
|
|
478
702
|
}, "- " + line));
|
|
479
703
|
}
|
|
480
704
|
for (const [index, line] of hunk.newText.split("\n").entries()) {
|
|
481
705
|
if (hunk.newText === "" && line === "") continue;
|
|
482
706
|
rows.push((0, react.createElement)("div", {
|
|
483
707
|
key: "new-" + String(index),
|
|
484
|
-
className: "evo-
|
|
708
|
+
className: "evo-doc-line-add"
|
|
485
709
|
}, "+ " + line));
|
|
486
710
|
}
|
|
487
711
|
}
|
|
488
|
-
return (0, react.createElement)("pre", { className: "evo-
|
|
712
|
+
return (0, react.createElement)("pre", { className: "evo-doc-source" }, rows.length === 0 ? "±" : rows);
|
|
713
|
+
}
|
|
714
|
+
/** One rendered side of a diff: an \u201cold\u201d or \u201cnew\u201d block under a tinted edge. */
|
|
715
|
+
function renderedSide(face, mark, side, text) {
|
|
716
|
+
const rendered = renderMarkdown(text, face.markdownWords);
|
|
717
|
+
if (!rendered.ok) return null;
|
|
718
|
+
return (0, react.createElement)("div", { className: "evo-doc-block evo-doc-" + side }, (0, react.createElement)("span", { className: "evo-doc-tag" }, mark), rendered.node);
|
|
489
719
|
}
|
|
490
720
|
/**
|
|
491
|
-
* The same diff, both sides rendered as Markdown and stacked: the removed text first, then the
|
|
492
|
-
*
|
|
493
|
-
*
|
|
494
|
-
* @param face -
|
|
721
|
+
* The same diff, both sides rendered as Markdown and stacked: the removed text first, then the added
|
|
722
|
+
* one. Block level on purpose — line-level interleaving of two rendered documents is a different (and
|
|
723
|
+
* much larger) problem, and the source view stays one click away for exact bytes.
|
|
724
|
+
* @param face - the dictionary seat and the renderer's words.
|
|
495
725
|
* @param diff - the windowed change the host reported.
|
|
496
|
-
* @returns the stacked blocks.
|
|
726
|
+
* @returns the stacked blocks, or null when the renderer is out.
|
|
497
727
|
*/
|
|
498
728
|
function renderedBlocks(face, diff) {
|
|
499
729
|
const blocks = [];
|
|
@@ -513,7 +743,7 @@ window.__ModuleLoader__.load({
|
|
|
513
743
|
}
|
|
514
744
|
/**
|
|
515
745
|
* One diff in the mode the reader asked for, degrading to the source view when the renderer is out.
|
|
516
|
-
* @param face -
|
|
746
|
+
* @param face - the dictionary seat and the renderer's words.
|
|
517
747
|
* @param diff - the windowed change the host reported.
|
|
518
748
|
* @param mode - source or rendered.
|
|
519
749
|
* @returns the element to draw.
|
|
@@ -521,119 +751,36 @@ window.__ModuleLoader__.load({
|
|
|
521
751
|
function diffView(face, diff, mode) {
|
|
522
752
|
if (mode === "rendered") {
|
|
523
753
|
const blocks = renderedBlocks(face, diff);
|
|
524
|
-
if (blocks !== null) return (0, react.createElement)("div", { className: "evo-
|
|
754
|
+
if (blocks !== null) return (0, react.createElement)("div", { className: "evo-doc-render" }, blocks);
|
|
525
755
|
}
|
|
526
|
-
return
|
|
527
|
-
}
|
|
528
|
-
/** One version row: what happened, when, how big, and what it is against. */
|
|
529
|
-
function versionRow(face, row, confirming, expanded, diff, body, restore, cancelRestore, toggle) {
|
|
530
|
-
const showing = (kind) => expanded !== void 0 && expanded.v === row.v && expanded.kind === kind;
|
|
531
|
-
const parts = [
|
|
532
|
-
(0, react.createElement)("span", {
|
|
533
|
-
key: "v",
|
|
534
|
-
className: "evo-hist-row-meta"
|
|
535
|
-
}, "v" + String(row.v)),
|
|
536
|
-
(0, react.createElement)("span", {
|
|
537
|
-
key: "action",
|
|
538
|
-
title: actionNote(face, row)
|
|
539
|
-
}, face.t("action." + row.actionKind)),
|
|
540
|
-
(0, react.createElement)("span", {
|
|
541
|
-
key: "time",
|
|
542
|
-
className: "evo-hist-row-meta",
|
|
543
|
-
title: localTime(row.at)
|
|
544
|
-
}, ageText(face, row.age))
|
|
545
|
-
];
|
|
546
|
-
if (row.path !== void 0) parts.push((0, react.createElement)("span", {
|
|
547
|
-
key: "path",
|
|
548
|
-
className: "evo-hist-row-meta",
|
|
549
|
-
title: row.path
|
|
550
|
-
}, row.path));
|
|
551
|
-
else if (row.actionKind === "support-write" || row.actionKind === "support-remove") parts.push((0, react.createElement)("span", {
|
|
552
|
-
key: "path",
|
|
553
|
-
className: "evo-hist-row-meta"
|
|
554
|
-
}, face.t("path.unrecorded")));
|
|
555
|
-
const delta = deltaText(face, row);
|
|
556
|
-
if (delta !== null) parts.push((0, react.createElement)("span", {
|
|
557
|
-
key: "delta",
|
|
558
|
-
className: "evo-hist-row-meta"
|
|
559
|
-
}, delta));
|
|
560
|
-
const actions = [];
|
|
561
|
-
if (row.undoable === false) actions.push((0, react.createElement)("span", {
|
|
562
|
-
key: "current",
|
|
563
|
-
className: "evo-hist-capsule"
|
|
564
|
-
}, face.t("current")));
|
|
565
|
-
if (row.undoable === true) {
|
|
566
|
-
if (confirming === row.v) actions.push((0, react.createElement)("button", {
|
|
567
|
-
key: "cancel",
|
|
568
|
-
type: "button",
|
|
569
|
-
className: "evo-hist-button",
|
|
570
|
-
onClick: () => {
|
|
571
|
-
cancelRestore();
|
|
572
|
-
}
|
|
573
|
-
}, face.t("undo.no")));
|
|
574
|
-
actions.push((0, react.createElement)("button", {
|
|
575
|
-
key: "undo",
|
|
576
|
-
type: "button",
|
|
577
|
-
className: "evo-hist-button",
|
|
578
|
-
"data-tone": confirming === row.v ? "primary" : void 0,
|
|
579
|
-
onClick: () => {
|
|
580
|
-
restore(row.v);
|
|
581
|
-
}
|
|
582
|
-
}, confirming === row.v ? face.t("undo.confirm") : face.t("undo")));
|
|
583
|
-
}
|
|
584
|
-
if (row.undoable === true || row.charsDelta !== void 0) actions.push((0, react.createElement)("button", {
|
|
585
|
-
key: "diff",
|
|
586
|
-
type: "button",
|
|
587
|
-
className: "evo-hist-button",
|
|
588
|
-
onClick: () => {
|
|
589
|
-
toggle(row.v, "diff");
|
|
590
|
-
}
|
|
591
|
-
}, showing("diff") ? face.t("diff.hide") : face.t("diff.show")));
|
|
592
|
-
actions.push((0, react.createElement)("button", {
|
|
593
|
-
key: "preview",
|
|
594
|
-
type: "button",
|
|
595
|
-
className: "evo-hist-button",
|
|
596
|
-
onClick: () => {
|
|
597
|
-
toggle(row.v, "preview");
|
|
598
|
-
}
|
|
599
|
-
}, showing("preview") ? face.t("preview.hide") : face.t("preview.show")));
|
|
600
|
-
return (0, react.createElement)("div", {
|
|
601
|
-
key: String(row.v),
|
|
602
|
-
className: "evo-hist-row"
|
|
603
|
-
}, (0, react.createElement)("div", { className: "evo-hist-row-body" }, (0, react.createElement)("div", { className: "evo-hist-row-title" }, parts), row.summary === void 0 || row.summary === "" ? null : (0, react.createElement)("div", { className: "evo-hist-row-summary" }, row.summary), showing("diff") && diff !== void 0 ? (0, react.createElement)(DiffBody, {
|
|
604
|
-
face,
|
|
605
|
-
diff
|
|
606
|
-
}) : null, showing("preview") && body !== void 0 ? (0, react.createElement)(BodyView, {
|
|
607
|
-
face,
|
|
608
|
-
body
|
|
609
|
-
}) : null), (0, react.createElement)("div", { className: "evo-hist-actions" }, actions));
|
|
610
|
-
}
|
|
611
|
-
/** One rendered side of a diff: an "old" or "new" block under a tinted edge. */
|
|
612
|
-
function renderedSide(face, mark, side, text) {
|
|
613
|
-
const rendered = renderMarkdown(text, face.markdownWords);
|
|
614
|
-
if (!rendered.ok) return null;
|
|
615
|
-
return (0, react.createElement)("div", { className: "evo-hist-render-block evo-hist-render-" + side }, (0, react.createElement)("span", { className: "evo-hist-render-tag" }, mark), rendered.node);
|
|
756
|
+
return sourceBlock(diff);
|
|
616
757
|
}
|
|
617
758
|
/**
|
|
618
759
|
* One version read as a document: the platform renderer when it is there, plain text when it is not.
|
|
619
|
-
*
|
|
760
|
+
*
|
|
761
|
+
* The document is the page, not a card inside it: no border, no surface of its own and no inner
|
|
762
|
+
* scroll, so the pane's own scrollbar is the only one a reader meets (W20/W21). A body the host
|
|
763
|
+
* bounded says how much it is not showing, with both numbers (W23).
|
|
620
764
|
* @param props - the face and the body state to draw.
|
|
621
765
|
* @returns the element.
|
|
622
766
|
*/
|
|
623
|
-
function
|
|
767
|
+
function PreviewBody(props) {
|
|
624
768
|
const { face, body } = props;
|
|
625
|
-
if (body.kind === "loading") return (
|
|
626
|
-
if (body.kind === "failed") return (
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
}
|
|
630
|
-
const rendered = renderMarkdown(body.body.
|
|
631
|
-
return (0, react.createElement)("div", { className: "evo-
|
|
769
|
+
if (body.kind === "loading") return note({ children: face.t("diff.loading") });
|
|
770
|
+
if (body.kind === "failed") return note({
|
|
771
|
+
error: true,
|
|
772
|
+
children: body.message
|
|
773
|
+
});
|
|
774
|
+
const rendered = renderMarkdown(body.body.display, face.markdownWords);
|
|
775
|
+
return (0, react.createElement)("div", { className: "evo-doc-preview" }, body.body.truncated ? note({ children: face.format("preview.truncated", {
|
|
776
|
+
shown: body.body.display.length,
|
|
777
|
+
total: body.body.chars
|
|
778
|
+
}) }) : null, rendered.ok ? rendered.node : (0, react.createElement)("pre", { className: "evo-doc-source" }, body.body.display));
|
|
632
779
|
}
|
|
633
780
|
/**
|
|
634
781
|
* The expanded body of one row: the diff, a loading line, or the refusal.
|
|
635
782
|
*
|
|
636
|
-
* The source/rendered
|
|
783
|
+
* The source/rendered choice is LOCAL to this view: which row is open is the panel's business, but
|
|
637
784
|
* how one open diff is displayed is not, so the state does not climb into the parent.
|
|
638
785
|
* @param props - the face and the diff state to draw.
|
|
639
786
|
* @returns the element.
|
|
@@ -641,36 +788,61 @@ window.__ModuleLoader__.load({
|
|
|
641
788
|
function DiffBody(props) {
|
|
642
789
|
const { face, diff } = props;
|
|
643
790
|
const [mode, setMode] = (0, react.useState)("source");
|
|
644
|
-
if (diff.kind === "loading") return (
|
|
645
|
-
if (diff.kind === "failed") return (
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
}
|
|
791
|
+
if (diff.kind === "loading") return note({ children: face.t("diff.loading") });
|
|
792
|
+
if (diff.kind === "failed") return note({
|
|
793
|
+
error: true,
|
|
794
|
+
children: diff.message
|
|
795
|
+
});
|
|
649
796
|
const against = diff.diff.against === null ? face.t("diff.first") : face.format("diff.against", { n: diff.diff.against });
|
|
650
|
-
const toggle = (0, react.createElement)("div", { className: "evo-
|
|
797
|
+
const toggle = (0, react.createElement)("div", { className: "evo-doc-toggle" }, button({
|
|
651
798
|
key: "source",
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
"data-tone": mode === "source" ? "primary" : void 0,
|
|
799
|
+
kind: "switch",
|
|
800
|
+
pressed: mode === "source",
|
|
655
801
|
onClick: () => {
|
|
656
802
|
setMode("source");
|
|
657
|
-
}
|
|
658
|
-
|
|
803
|
+
},
|
|
804
|
+
children: face.t("diff.source")
|
|
805
|
+
}), button({
|
|
659
806
|
key: "rendered",
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
"data-tone": mode === "rendered" ? "primary" : void 0,
|
|
807
|
+
kind: "switch",
|
|
808
|
+
pressed: mode === "rendered",
|
|
663
809
|
onClick: () => {
|
|
664
810
|
setMode("rendered");
|
|
665
|
-
}
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
811
|
+
},
|
|
812
|
+
children: face.t("diff.rendered")
|
|
813
|
+
}));
|
|
814
|
+
return (0, react.createElement)("div", { className: "evo-doc-diff" }, (0, react.createElement)("div", { className: "evo-doc-head" }, note({ children: [
|
|
815
|
+
(0, react.createElement)("span", {
|
|
816
|
+
key: "against",
|
|
817
|
+
className: "evo-doc-fact"
|
|
818
|
+
}, against),
|
|
819
|
+
(0, react.createElement)("span", {
|
|
820
|
+
key: "added",
|
|
821
|
+
className: "evo-doc-fact"
|
|
822
|
+
}, face.format("diff.added", { n: diff.diff.linesAdded })),
|
|
823
|
+
(0, react.createElement)("span", {
|
|
824
|
+
key: "removed",
|
|
825
|
+
className: "evo-doc-fact"
|
|
826
|
+
}, face.format("diff.removed", { n: diff.diff.linesRemoved })),
|
|
827
|
+
diff.diff.truncated ? (0, react.createElement)("span", {
|
|
828
|
+
key: "truncated",
|
|
829
|
+
className: "evo-doc-fact"
|
|
830
|
+
}, face.t("diff.truncated")) : null
|
|
831
|
+
] }), toggle), diffView(face, diff.diff, mode));
|
|
673
832
|
}
|
|
833
|
+
//#endregion
|
|
834
|
+
//#region src/client/Panel.ts
|
|
835
|
+
/**
|
|
836
|
+
* The panel: one read, one open skill, one open row — and the faces that draw them.
|
|
837
|
+
*
|
|
838
|
+
* Everything a PERSON reads is decided elsewhere: what a row says is core's (`skill-row-cells.ts`,
|
|
839
|
+
* shipped with the row), the words are the dictionary's, the tool face is `chrome.ts` and the reading
|
|
840
|
+
* face is `document.ts`. What is left here is the STATE — which skill is open, which row is expanded,
|
|
841
|
+
* which reads are in flight — and the two rules that only a state machine can hold: a read takes a
|
|
842
|
+
* ticket so a slow reply cannot land on another skill, and a write reports its own result instead of
|
|
843
|
+
* being erased by the read that follows it.
|
|
844
|
+
* @module @lmzhen/dsh-evolution-skill-history/client
|
|
845
|
+
*/
|
|
674
846
|
/**
|
|
675
847
|
* The panel body.
|
|
676
848
|
* @param face - copy plus the data callbacks.
|
|
@@ -729,7 +901,7 @@ window.__ModuleLoader__.load({
|
|
|
729
901
|
}
|
|
730
902
|
showVersions(name);
|
|
731
903
|
};
|
|
732
|
-
/** What the refresh
|
|
904
|
+
/** What the refresh control does: both reads again, and the sentence stays. */
|
|
733
905
|
const refresh = () => {
|
|
734
906
|
reloadSkills();
|
|
735
907
|
if (selected !== void 0) showVersions(selected);
|
|
@@ -818,44 +990,65 @@ window.__ModuleLoader__.load({
|
|
|
818
990
|
const needle = query.trim().toLowerCase();
|
|
819
991
|
const visible = (0, react.useMemo)(() => needle === "" ? skills : skills.filter((skill) => skill.name.toLowerCase().includes(needle) || skill.description.toLowerCase().includes(needle)), [skills, needle]);
|
|
820
992
|
const loaded = payload !== void 0;
|
|
821
|
-
/** Drop the pending confirmation: the
|
|
993
|
+
/** Drop the pending confirmation: the control that opened it must not be the only way out. */
|
|
822
994
|
const cancelRestore = () => {
|
|
823
995
|
setPending(void 0);
|
|
824
996
|
};
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
expanded
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
return (0, react.createElement)("div", { className: "evo-hist-root" }, (0, react.createElement)("aside", { className: "evo-hist-aside" }, (0, react.createElement)("div", { className: "evo-hist-search" }, (0, react.createElement)("input", {
|
|
835
|
-
type: "search",
|
|
836
|
-
value: query,
|
|
837
|
-
placeholder: face.t("search"),
|
|
838
|
-
"aria-label": face.t("search"),
|
|
839
|
-
onChange: (event) => {
|
|
840
|
-
setQuery(event.target.value);
|
|
841
|
-
}
|
|
842
|
-
})), (0, react.createElement)("div", { className: "evo-hist-list" }, skills.length === 0 ? (0, react.createElement)("p", { className: "evo-hist-empty" }, face.t("empty.skills")) : visible.length === 0 ? (0, react.createElement)("p", { className: "evo-hist-empty" }, face.t("search.none")) : visible.map((skill) => (0, react.createElement)("button", {
|
|
843
|
-
key: skill.name,
|
|
844
|
-
type: "button",
|
|
845
|
-
className: "evo-hist-skill",
|
|
846
|
-
title: skill.name,
|
|
847
|
-
"aria-current": skill.name === selected ? "true" : void 0,
|
|
848
|
-
onClick: () => {
|
|
849
|
-
open(skill.name);
|
|
997
|
+
/** What one row shows when it is the open one. */
|
|
998
|
+
const expandedOf = (row) => {
|
|
999
|
+
if (expanded === void 0 || expanded.v !== row.v) return null;
|
|
1000
|
+
if (expanded.kind === "diff") {
|
|
1001
|
+
const state = diffs.get(row.v);
|
|
1002
|
+
return state === void 0 ? null : (0, react.createElement)(DiffBody, {
|
|
1003
|
+
face,
|
|
1004
|
+
diff: state
|
|
1005
|
+
});
|
|
850
1006
|
}
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
1007
|
+
const state = bodies.get(row.v);
|
|
1008
|
+
return state === void 0 ? null : (0, react.createElement)(PreviewBody, {
|
|
1009
|
+
face,
|
|
1010
|
+
body: state
|
|
1011
|
+
});
|
|
1012
|
+
};
|
|
1013
|
+
/** One group: a heading, an optional note, and its rows. */
|
|
1014
|
+
const group = (title, entries, noteText2) => {
|
|
1015
|
+
if (entries.length === 0) return null;
|
|
1016
|
+
return (0, react.createElement)("section", { key: title }, ...groupHeading(title, noteText2), ...entries.map((row) => versionRow({
|
|
1017
|
+
copy: face,
|
|
1018
|
+
row,
|
|
1019
|
+
confirming: pending === row.v,
|
|
1020
|
+
open: expanded !== void 0 && expanded.v === row.v ? expanded.kind : void 0,
|
|
1021
|
+
expanded: expandedOf(row),
|
|
1022
|
+
onRestore: () => {
|
|
1023
|
+
restore(row.v);
|
|
1024
|
+
},
|
|
1025
|
+
onCancel: cancelRestore,
|
|
1026
|
+
onToggle: (kind) => {
|
|
1027
|
+
toggle(row.v, kind);
|
|
1028
|
+
}
|
|
1029
|
+
})));
|
|
1030
|
+
};
|
|
1031
|
+
return (0, react.createElement)("div", { className: "evo-hist-root" }, (0, react.createElement)("aside", { className: "evo-hist-aside" }, searchField(face, query, setQuery), (0, react.createElement)("div", { className: "evo-hist-list" }, skills.length === 0 ? emptyState(face.t("empty.skills")) : visible.length === 0 ? emptyState(face.t("search.none")) : visible.map((skill) => skillLine(face, skill, skill.name === selected, () => {
|
|
1032
|
+
open(skill.name);
|
|
1033
|
+
})))), (0, react.createElement)("div", { className: "evo-hist-main" }, panelHead(face, refresh), notice(noteText, noteError), selected === void 0 ? [emptyState(face.t(skills.length === 0 ? "empty.skills" : "empty.pick")), (0, react.createElement)("p", {
|
|
1034
|
+
key: "hint",
|
|
1035
|
+
className: "evo-hist-hint"
|
|
1036
|
+
}, face.t("hint"))] : loaded ? null : emptyState(face.t("loading")), loaded ? (0, react.createElement)("div", null, group(face.t("group.content"), payload.content, void 0), group(face.t("group.support"), payload.support, face.t("group.support.note")), payload.content.length === 0 && payload.support.length === 0 ? (0, react.createElement)("p", { className: "evo-hist-hint" }, face.t("empty.versions")) : null) : null));
|
|
1037
|
+
}
|
|
1038
|
+
/**
|
|
1039
|
+
* The lazy-read cache without one key.
|
|
1040
|
+
*
|
|
1041
|
+
* A read that a later toggle superseded must leave nothing behind: `loading` is not an answer, and
|
|
1042
|
+
* the cache also serves as the \u201cdo not read twice\u201d guard, so an abandoned entry would refuse every
|
|
1043
|
+
* later read of that row and leave it saying \u201cloading\u201d until the page is reloaded.
|
|
1044
|
+
* @param current - the cache.
|
|
1045
|
+
* @param key - the version whose entry is dropped.
|
|
1046
|
+
* @returns a new cache without that key.
|
|
1047
|
+
*/
|
|
1048
|
+
function without(current, key) {
|
|
1049
|
+
const next = new Map(current);
|
|
1050
|
+
next.delete(key);
|
|
1051
|
+
return next;
|
|
859
1052
|
}
|
|
860
1053
|
//#endregion
|
|
861
1054
|
//#region src/client/seam.ts
|