@lmzhen/dsh-evolution-skill-history 0.14.1 → 0.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/lib/client.js +468 -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,355 @@ 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}",
|
|
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-10) 0 var(--evo-space-2);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-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}",
|
|
322
|
+
".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)}",
|
|
323
|
+
".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}",
|
|
324
|
+
".evo-doc-del{border-left-color:var(--evo-tone-danger)}",
|
|
325
|
+
".evo-doc-add{border-left-color:var(--evo-tone-success)}",
|
|
326
|
+
".evo-doc-tag{position:absolute;left:var(--evo-space-8);top:var(--evo-space-8);color:var(--dsw-alias-label-tertiary)}",
|
|
327
|
+
".evo-doc-line-add{color:var(--evo-tone-success)}",
|
|
328
|
+
".evo-doc-line-del{color:var(--evo-tone-danger)}"
|
|
302
329
|
].join("\n");
|
|
303
330
|
//#endregion
|
|
331
|
+
//#region src/client/atoms.ts
|
|
332
|
+
/**
|
|
333
|
+
* The four atoms the panel's tool face is built from (G3, §15.2 L2a atoms).
|
|
334
|
+
*
|
|
335
|
+
* Why atoms at all: the row used to be assembled from five different elements that each wrote their
|
|
336
|
+
* own classes, so "what a control looks like" was spread over the stylesheet and a click target, a
|
|
337
|
+
* state chip, a refusal and a glyph had no vocabulary at all (W7/W9/W13/W14). Every interactive
|
|
338
|
+
* element now says what it IS — a control that acts, a control that only reveals more, a state, a
|
|
339
|
+
* notice — and the stylesheet answers once per kind.
|
|
340
|
+
*
|
|
341
|
+
* No words live here: an atom takes the copy its caller already resolved.
|
|
342
|
+
* @module @lmzhen/dsh-evolution-skill-history/client
|
|
343
|
+
*/
|
|
344
|
+
/** The stroked path of one glyph, in a 16x16 box. */
|
|
345
|
+
const PATHS = {
|
|
346
|
+
"chevron-right": ["M6.5 3.5L11 8l-4.5 4.5"],
|
|
347
|
+
"chevron-down": ["M3.5 6.5L8 11l4.5-4.5"],
|
|
348
|
+
alert: [
|
|
349
|
+
"M8 2.5l5.5 10.5h-11z",
|
|
350
|
+
"M8 6.6v3.1",
|
|
351
|
+
"M8 11.4h.01"
|
|
352
|
+
]
|
|
353
|
+
};
|
|
354
|
+
/**
|
|
355
|
+
* One drawn glyph.
|
|
356
|
+
* @param name - which glyph.
|
|
357
|
+
* @returns an inline SVG that takes the surrounding colour and type size.
|
|
358
|
+
*/
|
|
359
|
+
function icon(name) {
|
|
360
|
+
return (0, react.createElement)("svg", {
|
|
361
|
+
className: "evo-hist-icon",
|
|
362
|
+
viewBox: "0 0 16 16",
|
|
363
|
+
width: "1em",
|
|
364
|
+
height: "1em",
|
|
365
|
+
fill: "none",
|
|
366
|
+
stroke: "currentColor",
|
|
367
|
+
strokeWidth: 1.5,
|
|
368
|
+
strokeLinecap: "round",
|
|
369
|
+
strokeLinejoin: "round",
|
|
370
|
+
"aria-hidden": "true",
|
|
371
|
+
focusable: "false"
|
|
372
|
+
}, PATHS[name].map((d, index) => (0, react.createElement)("path", {
|
|
373
|
+
key: index,
|
|
374
|
+
d
|
|
375
|
+
})));
|
|
376
|
+
}
|
|
377
|
+
/**
|
|
378
|
+
* One control.
|
|
379
|
+
* @param props - what it is, how it speaks, and what it does.
|
|
380
|
+
* @returns the button element.
|
|
381
|
+
*/
|
|
382
|
+
function button(props) {
|
|
383
|
+
const { children, kind = "action", tone = "quiet", title, expanded, pressed, onClick } = props;
|
|
384
|
+
return (0, react.createElement)("button", {
|
|
385
|
+
key: props.key,
|
|
386
|
+
type: "button",
|
|
387
|
+
className: "evo-hist-button",
|
|
388
|
+
"data-kind": kind,
|
|
389
|
+
"data-tone": tone,
|
|
390
|
+
title,
|
|
391
|
+
"aria-expanded": expanded,
|
|
392
|
+
"aria-pressed": pressed,
|
|
393
|
+
onClick
|
|
394
|
+
}, kind === "toggle" ? icon(expanded === true ? "chevron-down" : "chevron-right") : null, children);
|
|
395
|
+
}
|
|
396
|
+
/**
|
|
397
|
+
* One state, spelled as a chip: never clickable, never in the primary colour (W9).
|
|
398
|
+
* @param props - the copy.
|
|
399
|
+
* @returns the chip element.
|
|
400
|
+
*/
|
|
401
|
+
function chip(props) {
|
|
402
|
+
return (0, react.createElement)("span", {
|
|
403
|
+
key: props.key,
|
|
404
|
+
className: "evo-hist-chip"
|
|
405
|
+
}, props.children);
|
|
406
|
+
}
|
|
407
|
+
/**
|
|
408
|
+
* One notice.
|
|
409
|
+
* @param props - the copy, and whether it reports a failure.
|
|
410
|
+
* @returns the note element.
|
|
411
|
+
*/
|
|
412
|
+
function note(props) {
|
|
413
|
+
return (0, react.createElement)("p", {
|
|
414
|
+
key: props.key,
|
|
415
|
+
className: "evo-hist-note",
|
|
416
|
+
"data-error": props.error === true ? "true" : void 0
|
|
417
|
+
}, props.error === true ? icon("alert") : null, (0, react.createElement)("span", { className: "evo-hist-note-text" }, props.children));
|
|
418
|
+
}
|
|
419
|
+
//#endregion
|
|
420
|
+
//#region src/client/chrome.ts
|
|
421
|
+
/**
|
|
422
|
+
* The TOOL face: the skill list, the version list, and the controls that act on a version.
|
|
423
|
+
*
|
|
424
|
+
* This file renders FACTS. What a row says, in which order and in which slot is decided in core
|
|
425
|
+
* (`skill-row-cells.ts`) and travels with the row, because a browser half cannot import core at
|
|
426
|
+
* runtime; the words come from the locale dictionary through the `Copy` seat. The renderer's only
|
|
427
|
+
* judgements are layout: a cell's slot decides its alignment, and the `aside` slot is the one the
|
|
428
|
+
* browser's ellipsis may never eat (W1).
|
|
429
|
+
*
|
|
430
|
+
* The reading face — a version rendered as a document, and the rendered diff — lives in
|
|
431
|
+
* `document.ts`; the two faces share the scale in `tokens.ts` and nothing else (§15.2 L2b).
|
|
432
|
+
* @module @lmzhen/dsh-evolution-skill-history/client
|
|
433
|
+
*/
|
|
434
|
+
/** The local time an ISO timestamp names, as the operator's own clock shows it. */
|
|
435
|
+
function localTime(at) {
|
|
436
|
+
const parsed = Date.parse(at);
|
|
437
|
+
if (Number.isNaN(parsed)) return at;
|
|
438
|
+
const date = new Date(parsed);
|
|
439
|
+
const pad = (value) => String(value).padStart(2, "0");
|
|
440
|
+
return String(date.getFullYear()) + "-" + pad(date.getMonth() + 1) + "-" + pad(date.getDate()) + " " + pad(date.getHours()) + ":" + pad(date.getMinutes());
|
|
441
|
+
}
|
|
442
|
+
/** The text one cell shows, resolved through the seat. */
|
|
443
|
+
function cellText(copy, cell) {
|
|
444
|
+
if (!("copy" in cell)) return cell.literal;
|
|
445
|
+
return cell.values === void 0 ? copy.t(cell.copy) : copy.format(cell.copy, cell.values);
|
|
446
|
+
}
|
|
447
|
+
/**
|
|
448
|
+
* One line of cells. The slot decides placement; the tone only changes the register.
|
|
449
|
+
* @param cells - the cells of this line, in reading order.
|
|
450
|
+
* @param copy - the dictionary seat.
|
|
451
|
+
* @param className - the line's own class.
|
|
452
|
+
* @param hover - hover text the host cannot express (the local clock), by cell key.
|
|
453
|
+
* @returns the line element.
|
|
454
|
+
*/
|
|
455
|
+
function cellLine(cells, copy, className, hover = {}) {
|
|
456
|
+
return (0, react.createElement)("div", { className }, cells.map((cell) => (0, react.createElement)("span", {
|
|
457
|
+
key: cell.key,
|
|
458
|
+
className: "evo-hist-cell evo-hist-slot-" + cell.slot + " evo-hist-tone-" + cell.tone,
|
|
459
|
+
title: hover[cell.key] ?? cell.note
|
|
460
|
+
}, cellText(copy, cell))));
|
|
461
|
+
}
|
|
462
|
+
/** The search field above the list. */
|
|
463
|
+
function searchField(copy, query, onQuery) {
|
|
464
|
+
return (0, react.createElement)("div", { className: "evo-hist-search" }, (0, react.createElement)("input", {
|
|
465
|
+
type: "search",
|
|
466
|
+
value: query,
|
|
467
|
+
placeholder: copy.t("search"),
|
|
468
|
+
"aria-label": copy.t("search"),
|
|
469
|
+
onChange: (event) => {
|
|
470
|
+
onQuery(event.target.value);
|
|
471
|
+
}
|
|
472
|
+
}));
|
|
473
|
+
}
|
|
474
|
+
/**
|
|
475
|
+
* One skill in the left column: its name and size, then what it is and when it last changed.
|
|
476
|
+
* @param copy - the dictionary seat.
|
|
477
|
+
* @param row - the skill's facts and cells.
|
|
478
|
+
* @param selected - whether this is the open skill.
|
|
479
|
+
* @param onOpen - what a click does.
|
|
480
|
+
* @returns the row.
|
|
481
|
+
*/
|
|
482
|
+
function skillLine(copy, row, selected, onOpen) {
|
|
483
|
+
return (0, react.createElement)("button", {
|
|
484
|
+
key: row.name,
|
|
485
|
+
type: "button",
|
|
486
|
+
className: "evo-hist-skill",
|
|
487
|
+
"aria-current": selected ? "true" : void 0,
|
|
488
|
+
onClick: onOpen
|
|
489
|
+
}, cellLine(row.cells.title, copy, "evo-hist-cell-line"), cellLine(row.cells.meta, copy, "evo-hist-cell-line evo-hist-cell-meta"));
|
|
490
|
+
}
|
|
491
|
+
/**
|
|
492
|
+
* One version row: what happened, when, how big — then the controls, then whatever is expanded.
|
|
493
|
+
*
|
|
494
|
+
* The write is the only control that can change anything, and it is the only one that ever takes the
|
|
495
|
+
* primary tone; a toggle that merely reveals more is borderless and carries a drawn chevron, so the
|
|
496
|
+
* two kinds cannot be mistaken for each other (W7/W14).
|
|
497
|
+
* @param props - the row, the copy, and the panel's callbacks.
|
|
498
|
+
* @returns the row.
|
|
499
|
+
*/
|
|
500
|
+
function versionRow(props) {
|
|
501
|
+
const { copy, row, confirming, open, expanded, onRestore, onCancel, onToggle } = props;
|
|
502
|
+
const actions = [];
|
|
503
|
+
if (row.undoable === false) actions.push(chip({
|
|
504
|
+
key: "current",
|
|
505
|
+
children: copy.t("current")
|
|
506
|
+
}));
|
|
507
|
+
if (row.undoable === true) {
|
|
508
|
+
if (confirming) actions.push(button({
|
|
509
|
+
key: "cancel",
|
|
510
|
+
onClick: onCancel,
|
|
511
|
+
children: copy.t("undo.no")
|
|
512
|
+
}));
|
|
513
|
+
actions.push(button({
|
|
514
|
+
key: "undo",
|
|
515
|
+
tone: confirming ? "primary" : "quiet",
|
|
516
|
+
onClick: onRestore,
|
|
517
|
+
children: confirming ? copy.t("undo.confirm") : copy.t("undo")
|
|
518
|
+
}));
|
|
519
|
+
}
|
|
520
|
+
if (row.undoable === true || row.charsDelta !== void 0) actions.push(button({
|
|
521
|
+
key: "diff",
|
|
522
|
+
kind: "toggle",
|
|
523
|
+
expanded: open === "diff",
|
|
524
|
+
onClick: () => {
|
|
525
|
+
onToggle("diff");
|
|
526
|
+
},
|
|
527
|
+
children: open === "diff" ? copy.t("diff.hide") : copy.t("diff.show")
|
|
528
|
+
}));
|
|
529
|
+
actions.push(button({
|
|
530
|
+
key: "preview",
|
|
531
|
+
kind: "toggle",
|
|
532
|
+
expanded: open === "preview",
|
|
533
|
+
onClick: () => {
|
|
534
|
+
onToggle("preview");
|
|
535
|
+
},
|
|
536
|
+
children: open === "preview" ? copy.t("preview.hide") : copy.t("preview.show")
|
|
537
|
+
}));
|
|
538
|
+
return (0, react.createElement)("div", {
|
|
539
|
+
key: String(row.v),
|
|
540
|
+
className: "evo-hist-row"
|
|
541
|
+
}, (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));
|
|
542
|
+
}
|
|
543
|
+
/**
|
|
544
|
+
* One group's heading, and the note that explains the group.
|
|
545
|
+
* @param title - the group's name, already resolved.
|
|
546
|
+
* @param noteText - the group's note, when it has one.
|
|
547
|
+
* @returns the heading and the note, for the caller to place in its own section.
|
|
548
|
+
*/
|
|
549
|
+
function groupHeading(title, noteText) {
|
|
550
|
+
return [(0, react.createElement)("h3", {
|
|
551
|
+
key: "title",
|
|
552
|
+
className: "evo-hist-group"
|
|
553
|
+
}, title), noteText === void 0 ? null : (0, react.createElement)("p", {
|
|
554
|
+
key: "note",
|
|
555
|
+
className: "evo-hist-hint"
|
|
556
|
+
}, noteText)];
|
|
557
|
+
}
|
|
558
|
+
/** What the list shows when it has nothing to show. */
|
|
559
|
+
function emptyState(text) {
|
|
560
|
+
return (0, react.createElement)("p", { className: "evo-hist-empty" }, text);
|
|
561
|
+
}
|
|
562
|
+
/** One notice about what just happened. */
|
|
563
|
+
function notice(text, error) {
|
|
564
|
+
if (text === void 0) return null;
|
|
565
|
+
return note({
|
|
566
|
+
error,
|
|
567
|
+
children: text
|
|
568
|
+
});
|
|
569
|
+
}
|
|
570
|
+
/** The pane's heading and its one control. */
|
|
571
|
+
function panelHead(copy, onRefresh) {
|
|
572
|
+
return (0, react.createElement)("div", { className: "evo-hist-head" }, (0, react.createElement)("h2", { className: "evo-hist-title" }, copy.t("title")), button({
|
|
573
|
+
key: "refresh",
|
|
574
|
+
title: copy.t("refresh"),
|
|
575
|
+
onClick: onRefresh,
|
|
576
|
+
children: copy.t("refresh")
|
|
577
|
+
}));
|
|
578
|
+
}
|
|
579
|
+
//#endregion
|
|
304
580
|
//#region src/client/markdown.ts
|
|
305
581
|
/**
|
|
306
582
|
* The one seam onto the platform's Markdown renderer.
|
|
@@ -395,105 +671,58 @@ window.__ModuleLoader__.load({
|
|
|
395
671
|
};
|
|
396
672
|
}
|
|
397
673
|
//#endregion
|
|
398
|
-
//#region src/client/
|
|
674
|
+
//#region src/client/document.ts
|
|
399
675
|
/**
|
|
400
|
-
* The
|
|
401
|
-
* and one action per body version (restore, behind an inline confirmation).
|
|
676
|
+
* The READING face: one version rendered as a document, and the rendered diff.
|
|
402
677
|
*
|
|
403
|
-
*
|
|
404
|
-
*
|
|
405
|
-
*
|
|
406
|
-
*
|
|
678
|
+
* This file is the only place that decides how a document reads (G4). The tool face (`chrome.ts`)
|
|
679
|
+
* picks versions and acts on them; here the rules are the reader's, and they follow the positioning
|
|
680
|
+
* ruling of §14.0: a document is read, not scanned — one measure, page-like spacing, no inner scroll
|
|
681
|
+
* (W18/W20/W21/W22). Nothing here is a control except the source/rendered choice, which belongs to
|
|
682
|
+
* the reader rather than to the panel's actions.
|
|
407
683
|
*
|
|
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.
|
|
684
|
+
* The text arrives already prepared: the host strips the frontmatter block through core's
|
|
685
|
+
* `displayBodyOf`, because a browser half cannot import core. The RENDERED DIFF keeps the whole text
|
|
686
|
+
* on purpose — a diff is about what CHANGED, and a metadata change is a change.
|
|
446
687
|
*
|
|
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.
|
|
688
|
+
* It degrades rather than blanking: when the platform's renderer cannot be reached, the exact text is
|
|
689
|
+
* shown instead, and the reader can still read the version.
|
|
690
|
+
* @module @lmzhen/dsh-evolution-skill-history/client
|
|
453
691
|
*/
|
|
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
692
|
/** One `<pre>` rendering of a diff: added lines marked `+`, removed ones `-`. */
|
|
470
|
-
function
|
|
693
|
+
function sourceBlock(diff) {
|
|
471
694
|
const rows = [];
|
|
472
695
|
for (const hunk of diff.hunks) {
|
|
473
696
|
for (const [index, line] of hunk.oldText.split("\n").entries()) {
|
|
474
697
|
if (hunk.oldText === "" && line === "") continue;
|
|
475
698
|
rows.push((0, react.createElement)("div", {
|
|
476
699
|
key: "old-" + String(index),
|
|
477
|
-
className: "evo-
|
|
700
|
+
className: "evo-doc-line-del"
|
|
478
701
|
}, "- " + line));
|
|
479
702
|
}
|
|
480
703
|
for (const [index, line] of hunk.newText.split("\n").entries()) {
|
|
481
704
|
if (hunk.newText === "" && line === "") continue;
|
|
482
705
|
rows.push((0, react.createElement)("div", {
|
|
483
706
|
key: "new-" + String(index),
|
|
484
|
-
className: "evo-
|
|
707
|
+
className: "evo-doc-line-add"
|
|
485
708
|
}, "+ " + line));
|
|
486
709
|
}
|
|
487
710
|
}
|
|
488
|
-
return (0, react.createElement)("pre", { className: "evo-
|
|
711
|
+
return (0, react.createElement)("pre", { className: "evo-doc-source" }, rows.length === 0 ? "±" : rows);
|
|
712
|
+
}
|
|
713
|
+
/** One rendered side of a diff: an \u201cold\u201d or \u201cnew\u201d block under a tinted edge. */
|
|
714
|
+
function renderedSide(face, mark, side, text) {
|
|
715
|
+
const rendered = renderMarkdown(text, face.markdownWords);
|
|
716
|
+
if (!rendered.ok) return null;
|
|
717
|
+
return (0, react.createElement)("div", { className: "evo-doc-block evo-doc-" + side }, (0, react.createElement)("span", { className: "evo-doc-tag" }, mark), rendered.node);
|
|
489
718
|
}
|
|
490
719
|
/**
|
|
491
|
-
* The same diff, both sides rendered as Markdown and stacked: the removed text first, then the
|
|
492
|
-
*
|
|
493
|
-
*
|
|
494
|
-
* @param face -
|
|
720
|
+
* The same diff, both sides rendered as Markdown and stacked: the removed text first, then the added
|
|
721
|
+
* one. Block level on purpose — line-level interleaving of two rendered documents is a different (and
|
|
722
|
+
* much larger) problem, and the source view stays one click away for exact bytes.
|
|
723
|
+
* @param face - the dictionary seat and the renderer's words.
|
|
495
724
|
* @param diff - the windowed change the host reported.
|
|
496
|
-
* @returns the stacked blocks.
|
|
725
|
+
* @returns the stacked blocks, or null when the renderer is out.
|
|
497
726
|
*/
|
|
498
727
|
function renderedBlocks(face, diff) {
|
|
499
728
|
const blocks = [];
|
|
@@ -513,7 +742,7 @@ window.__ModuleLoader__.load({
|
|
|
513
742
|
}
|
|
514
743
|
/**
|
|
515
744
|
* One diff in the mode the reader asked for, degrading to the source view when the renderer is out.
|
|
516
|
-
* @param face -
|
|
745
|
+
* @param face - the dictionary seat and the renderer's words.
|
|
517
746
|
* @param diff - the windowed change the host reported.
|
|
518
747
|
* @param mode - source or rendered.
|
|
519
748
|
* @returns the element to draw.
|
|
@@ -521,119 +750,36 @@ window.__ModuleLoader__.load({
|
|
|
521
750
|
function diffView(face, diff, mode) {
|
|
522
751
|
if (mode === "rendered") {
|
|
523
752
|
const blocks = renderedBlocks(face, diff);
|
|
524
|
-
if (blocks !== null) return (0, react.createElement)("div", { className: "evo-
|
|
753
|
+
if (blocks !== null) return (0, react.createElement)("div", { className: "evo-doc-render" }, blocks);
|
|
525
754
|
}
|
|
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);
|
|
755
|
+
return sourceBlock(diff);
|
|
616
756
|
}
|
|
617
757
|
/**
|
|
618
758
|
* One version read as a document: the platform renderer when it is there, plain text when it is not.
|
|
619
|
-
*
|
|
759
|
+
*
|
|
760
|
+
* The document is the page, not a card inside it: no border, no surface of its own and no inner
|
|
761
|
+
* scroll, so the pane's own scrollbar is the only one a reader meets (W20/W21). A body the host
|
|
762
|
+
* bounded says how much it is not showing, with both numbers (W23).
|
|
620
763
|
* @param props - the face and the body state to draw.
|
|
621
764
|
* @returns the element.
|
|
622
765
|
*/
|
|
623
|
-
function
|
|
766
|
+
function PreviewBody(props) {
|
|
624
767
|
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-
|
|
768
|
+
if (body.kind === "loading") return note({ children: face.t("diff.loading") });
|
|
769
|
+
if (body.kind === "failed") return note({
|
|
770
|
+
error: true,
|
|
771
|
+
children: body.message
|
|
772
|
+
});
|
|
773
|
+
const rendered = renderMarkdown(body.body.display, face.markdownWords);
|
|
774
|
+
return (0, react.createElement)("div", { className: "evo-doc-preview" }, body.body.truncated ? note({ children: face.format("preview.truncated", {
|
|
775
|
+
shown: body.body.display.length,
|
|
776
|
+
total: body.body.chars
|
|
777
|
+
}) }) : null, rendered.ok ? rendered.node : (0, react.createElement)("pre", { className: "evo-doc-source" }, body.body.display));
|
|
632
778
|
}
|
|
633
779
|
/**
|
|
634
780
|
* The expanded body of one row: the diff, a loading line, or the refusal.
|
|
635
781
|
*
|
|
636
|
-
* The source/rendered
|
|
782
|
+
* The source/rendered choice is LOCAL to this view: which row is open is the panel's business, but
|
|
637
783
|
* how one open diff is displayed is not, so the state does not climb into the parent.
|
|
638
784
|
* @param props - the face and the diff state to draw.
|
|
639
785
|
* @returns the element.
|
|
@@ -641,36 +787,44 @@ window.__ModuleLoader__.load({
|
|
|
641
787
|
function DiffBody(props) {
|
|
642
788
|
const { face, diff } = props;
|
|
643
789
|
const [mode, setMode] = (0, react.useState)("source");
|
|
644
|
-
if (diff.kind === "loading") return (
|
|
645
|
-
if (diff.kind === "failed") return (
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
}
|
|
790
|
+
if (diff.kind === "loading") return note({ children: face.t("diff.loading") });
|
|
791
|
+
if (diff.kind === "failed") return note({
|
|
792
|
+
error: true,
|
|
793
|
+
children: diff.message
|
|
794
|
+
});
|
|
649
795
|
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-
|
|
796
|
+
const toggle = (0, react.createElement)("div", { className: "evo-doc-toggle" }, button({
|
|
651
797
|
key: "source",
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
"data-tone": mode === "source" ? "primary" : void 0,
|
|
798
|
+
kind: "switch",
|
|
799
|
+
pressed: mode === "source",
|
|
655
800
|
onClick: () => {
|
|
656
801
|
setMode("source");
|
|
657
|
-
}
|
|
658
|
-
|
|
802
|
+
},
|
|
803
|
+
children: face.t("diff.source")
|
|
804
|
+
}), button({
|
|
659
805
|
key: "rendered",
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
"data-tone": mode === "rendered" ? "primary" : void 0,
|
|
806
|
+
kind: "switch",
|
|
807
|
+
pressed: mode === "rendered",
|
|
663
808
|
onClick: () => {
|
|
664
809
|
setMode("rendered");
|
|
665
|
-
}
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
/** One group: a heading, an optional note, and its rows. */
|
|
670
|
-
function group(face, title, entries, noteText, state) {
|
|
671
|
-
if (entries.length === 0) return null;
|
|
672
|
-
return (0, react.createElement)("section", { key: title }, (0, react.createElement)("h3", { className: "evo-hist-group" }, title), noteText === void 0 ? null : (0, react.createElement)("p", { className: "evo-hist-hint" }, noteText), ...entries.map((entry) => versionRow(face, entry, state.confirming, state.expanded, state.diffs.get(entry.v), state.bodies.get(entry.v), state.restore, state.cancelRestore, state.toggle)));
|
|
810
|
+
},
|
|
811
|
+
children: face.t("diff.rendered")
|
|
812
|
+
}));
|
|
813
|
+
return (0, react.createElement)("div", { className: "evo-doc-diff" }, (0, react.createElement)("div", { className: "evo-doc-head" }, note({ children: against + " · " + face.format("diff.added", { n: diff.diff.linesAdded }) + " · " + face.format("diff.removed", { n: diff.diff.linesRemoved }) + (diff.diff.truncated ? " · " + face.t("diff.truncated") : "") }), toggle), diffView(face, diff.diff, mode));
|
|
673
814
|
}
|
|
815
|
+
//#endregion
|
|
816
|
+
//#region src/client/Panel.ts
|
|
817
|
+
/**
|
|
818
|
+
* The panel: one read, one open skill, one open row — and the faces that draw them.
|
|
819
|
+
*
|
|
820
|
+
* Everything a PERSON reads is decided elsewhere: what a row says is core's (`skill-row-cells.ts`,
|
|
821
|
+
* shipped with the row), the words are the dictionary's, the tool face is `chrome.ts` and the reading
|
|
822
|
+
* face is `document.ts`. What is left here is the STATE — which skill is open, which row is expanded,
|
|
823
|
+
* which reads are in flight — and the two rules that only a state machine can hold: a read takes a
|
|
824
|
+
* ticket so a slow reply cannot land on another skill, and a write reports its own result instead of
|
|
825
|
+
* being erased by the read that follows it.
|
|
826
|
+
* @module @lmzhen/dsh-evolution-skill-history/client
|
|
827
|
+
*/
|
|
674
828
|
/**
|
|
675
829
|
* The panel body.
|
|
676
830
|
* @param face - copy plus the data callbacks.
|
|
@@ -729,7 +883,7 @@ window.__ModuleLoader__.load({
|
|
|
729
883
|
}
|
|
730
884
|
showVersions(name);
|
|
731
885
|
};
|
|
732
|
-
/** What the refresh
|
|
886
|
+
/** What the refresh control does: both reads again, and the sentence stays. */
|
|
733
887
|
const refresh = () => {
|
|
734
888
|
reloadSkills();
|
|
735
889
|
if (selected !== void 0) showVersions(selected);
|
|
@@ -818,44 +972,65 @@ window.__ModuleLoader__.load({
|
|
|
818
972
|
const needle = query.trim().toLowerCase();
|
|
819
973
|
const visible = (0, react.useMemo)(() => needle === "" ? skills : skills.filter((skill) => skill.name.toLowerCase().includes(needle) || skill.description.toLowerCase().includes(needle)), [skills, needle]);
|
|
820
974
|
const loaded = payload !== void 0;
|
|
821
|
-
/** Drop the pending confirmation: the
|
|
975
|
+
/** Drop the pending confirmation: the control that opened it must not be the only way out. */
|
|
822
976
|
const cancelRestore = () => {
|
|
823
977
|
setPending(void 0);
|
|
824
978
|
};
|
|
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);
|
|
979
|
+
/** What one row shows when it is the open one. */
|
|
980
|
+
const expandedOf = (row) => {
|
|
981
|
+
if (expanded === void 0 || expanded.v !== row.v) return null;
|
|
982
|
+
if (expanded.kind === "diff") {
|
|
983
|
+
const state = diffs.get(row.v);
|
|
984
|
+
return state === void 0 ? null : (0, react.createElement)(DiffBody, {
|
|
985
|
+
face,
|
|
986
|
+
diff: state
|
|
987
|
+
});
|
|
850
988
|
}
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
989
|
+
const state = bodies.get(row.v);
|
|
990
|
+
return state === void 0 ? null : (0, react.createElement)(PreviewBody, {
|
|
991
|
+
face,
|
|
992
|
+
body: state
|
|
993
|
+
});
|
|
994
|
+
};
|
|
995
|
+
/** One group: a heading, an optional note, and its rows. */
|
|
996
|
+
const group = (title, entries, noteText2) => {
|
|
997
|
+
if (entries.length === 0) return null;
|
|
998
|
+
return (0, react.createElement)("section", { key: title }, ...groupHeading(title, noteText2), ...entries.map((row) => versionRow({
|
|
999
|
+
copy: face,
|
|
1000
|
+
row,
|
|
1001
|
+
confirming: pending === row.v,
|
|
1002
|
+
open: expanded !== void 0 && expanded.v === row.v ? expanded.kind : void 0,
|
|
1003
|
+
expanded: expandedOf(row),
|
|
1004
|
+
onRestore: () => {
|
|
1005
|
+
restore(row.v);
|
|
1006
|
+
},
|
|
1007
|
+
onCancel: cancelRestore,
|
|
1008
|
+
onToggle: (kind) => {
|
|
1009
|
+
toggle(row.v, kind);
|
|
1010
|
+
}
|
|
1011
|
+
})));
|
|
1012
|
+
};
|
|
1013
|
+
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, () => {
|
|
1014
|
+
open(skill.name);
|
|
1015
|
+
})))), (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", {
|
|
1016
|
+
key: "hint",
|
|
1017
|
+
className: "evo-hist-hint"
|
|
1018
|
+
}, 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));
|
|
1019
|
+
}
|
|
1020
|
+
/**
|
|
1021
|
+
* The lazy-read cache without one key.
|
|
1022
|
+
*
|
|
1023
|
+
* A read that a later toggle superseded must leave nothing behind: `loading` is not an answer, and
|
|
1024
|
+
* the cache also serves as the \u201cdo not read twice\u201d guard, so an abandoned entry would refuse every
|
|
1025
|
+
* later read of that row and leave it saying \u201cloading\u201d until the page is reloaded.
|
|
1026
|
+
* @param current - the cache.
|
|
1027
|
+
* @param key - the version whose entry is dropped.
|
|
1028
|
+
* @returns a new cache without that key.
|
|
1029
|
+
*/
|
|
1030
|
+
function without(current, key) {
|
|
1031
|
+
const next = new Map(current);
|
|
1032
|
+
next.delete(key);
|
|
1033
|
+
return next;
|
|
859
1034
|
}
|
|
860
1035
|
//#endregion
|
|
861
1036
|
//#region src/client/seam.ts
|