@morlay/dsh-client-ui-primitives 0.0.2-alpha.7 → 0.0.2-alpha.8
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 +29 -3
- package/dist/client.cjs +1062 -406
- package/dist/client.d.cts +328 -3
- package/dist/client.d.mts +328 -3
- package/package.json +5 -4
- package/src/client/index.ts +1 -0
- package/src/client/settings-form/SettingsForm.styles.ts +57 -0
- package/src/client/settings-form/SettingsForm.tsx +72 -0
- package/src/client/settings-form/fields.styles.ts +157 -0
- package/src/client/settings-form/fields.tsx +193 -0
- package/src/client/settings-form/form-model.ts +421 -0
- package/src/client/settings-form/index.ts +19 -0
- package/src/client/theme.generated.ts +748 -731
package/dist/client.cjs
CHANGED
|
@@ -17,8 +17,9 @@ window.__ModuleLoader__.load({
|
|
|
17
17
|
};
|
|
18
18
|
//#endregion
|
|
19
19
|
let react = require("react");
|
|
20
|
-
let
|
|
20
|
+
let _deepseek_ai_dsh_client_store = require("@deepseek-ai/dsh-client-store");
|
|
21
21
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
22
|
+
let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
|
|
22
23
|
//#region src/client/styling/toolkit.ts
|
|
23
24
|
function isUndefined(value) {
|
|
24
25
|
return value === void 0;
|
|
@@ -323,530 +324,542 @@ window.__ModuleLoader__.load({
|
|
|
323
324
|
//#endregion
|
|
324
325
|
//#region src/client/theme.generated.ts
|
|
325
326
|
/**
|
|
326
|
-
* 官方主题的 `--dsw-*` token 全集（
|
|
327
|
+
* 官方主题的 `--dsw-*` token 全集（373 个），由 packages/client/ui-primitives/scripts/gen-design-tokens.mts 生成，勿手改。
|
|
327
328
|
*
|
|
328
329
|
* 叶子是该变量的**默认值**（官方 light 主题里首次出现的定义）：既是类型推导的来源，也可作 fallback。
|
|
329
330
|
* `"$"` 键出现在「自身也是 token 的分支」上（命名体系里有 40 个短名同时是长名前缀的 token）。
|
|
330
331
|
* 消费时只需树形状——`Token.vars()` 生成 `var(--dsw-…)`，不重新定义变量。
|
|
331
332
|
* 漂移、往返与默认值完整性由 src/__tests__/design-tokens.spec.ts 守卫。 */
|
|
332
333
|
const designTokens = {
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
334
|
+
alias: {
|
|
335
|
+
bg: {
|
|
336
|
+
base: "var(--dsw-static-neutral-bluish-00)",
|
|
337
|
+
document: { preview: "var(--dsw-static-neutral-bluish-750)" },
|
|
338
|
+
layer: {
|
|
338
339
|
"1": "var(--dsw-static-neutral-bluish-00)",
|
|
339
340
|
"2": "var(--dsw-static-neutral-bluish-00)",
|
|
340
341
|
"3": "var(--dsw-static-neutral-bluish-00)"
|
|
341
342
|
},
|
|
342
|
-
|
|
343
|
+
mask: {
|
|
343
344
|
"1": "rgba(0, 0, 0, 0.24)",
|
|
344
345
|
"2": "rgba(0, 0, 0, 0.12)",
|
|
345
346
|
"3": "rgba(0, 0, 0, 0.48)",
|
|
346
|
-
|
|
347
|
-
|
|
347
|
+
drop: "rgba(255, 255, 255, 0.7)",
|
|
348
|
+
photo: "rgba(0, 0, 0, 0.88)"
|
|
348
349
|
},
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
350
|
+
module: { platform: "var(--dsw-static-neutral-bluish-60)" },
|
|
351
|
+
multi: { select: "var(--dsw-static-neutral-bluish-60)" },
|
|
352
|
+
overlay: "var(--dsw-static-neutral-bluish-150)",
|
|
353
|
+
skeleton: "rgba(0, 0, 0, 0.04)"
|
|
353
354
|
},
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
355
|
+
border: {
|
|
356
|
+
inverted: "rgba(0, 0, 0, 0)",
|
|
357
|
+
inverted2: "rgba(0, 0, 0, 0)",
|
|
358
|
+
l1: "rgba(0, 0, 0, 0.04)",
|
|
359
|
+
l2: {
|
|
360
|
+
$: "rgba(0, 0, 0, 0.1)",
|
|
361
|
+
darkmode: { thin: "rgba(0, 0, 0, 0.1)" }
|
|
361
362
|
},
|
|
362
|
-
|
|
363
|
-
|
|
363
|
+
l3: "rgba(0, 0, 0, 0.12)",
|
|
364
|
+
l4: "rgba(0, 0, 0, 0.16)"
|
|
364
365
|
},
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
366
|
+
brand: {
|
|
367
|
+
primary: {
|
|
368
|
+
$: "var(--dsw-static-neutral-bluish-1000)",
|
|
369
|
+
invert: "var(--dsw-static-neutral-bluish-1000)",
|
|
370
|
+
new: { colorprimary: { new: { color: "rgb(65, 118, 230)" } } }
|
|
370
371
|
},
|
|
371
|
-
|
|
372
|
+
text: "var(--dsw-static-neutral-bluish-1000)"
|
|
372
373
|
},
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
374
|
+
button: {
|
|
375
|
+
contrast: { fill: "var(--dsw-static-neutral-bluish-700)" },
|
|
376
|
+
elevated: { fill: "var(--dsw-static-neutral-bluish-00)" },
|
|
377
|
+
floating: {
|
|
378
|
+
fill: "var(--dsw-static-neutral-bluish-00)",
|
|
379
|
+
hover: "var(--dsw-static-neutral-bluish-75)"
|
|
379
380
|
},
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
381
|
+
ghost: { active: {
|
|
382
|
+
border: "var(--dsw-static-neutral-bluish-500)",
|
|
383
|
+
fill: "var(--dsw-static-neutral-bluish-100)",
|
|
384
|
+
hover: "var(--dsw-static-neutral-bluish-150)"
|
|
384
385
|
} },
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
386
|
+
info: {
|
|
387
|
+
fill: "var(--dsw-static-deepseek-500)",
|
|
388
|
+
hover: "var(--dsw-static-deepseek-400)"
|
|
388
389
|
},
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
390
|
+
primary: {
|
|
391
|
+
dimmed: "var(--dsw-static-neutral-bluish-100)",
|
|
392
|
+
fill: "var(--dsw-alias-brand-primary)",
|
|
393
|
+
hover: "var(--dsw-static-neutral-bluish-750)"
|
|
393
394
|
},
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
395
|
+
tool: { bar: {
|
|
396
|
+
fill: {
|
|
397
|
+
$: "rgba(84, 85, 87, 0.5)",
|
|
398
|
+
invisible: "rgba(31, 31, 31, 0.36)"
|
|
398
399
|
},
|
|
399
|
-
|
|
400
|
+
hover: "rgba(84, 85, 87, 0.6)"
|
|
400
401
|
} }
|
|
401
402
|
},
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
403
|
+
code: { diff: {
|
|
404
|
+
added: "var(--dsw-static-green-500-a08)",
|
|
405
|
+
deleted: "var(--dsw-static-red-600-a08)"
|
|
406
|
+
} },
|
|
407
|
+
file: { diff: {
|
|
408
|
+
added: {
|
|
409
|
+
bg: "rgb(230, 244, 231)",
|
|
410
|
+
gutter: "rgb(237, 247, 237)",
|
|
411
|
+
marker: "rgb(1, 162, 65)"
|
|
412
|
+
},
|
|
413
|
+
deleted: {
|
|
414
|
+
bg: "rgb(252, 230, 226)",
|
|
415
|
+
gutter: "rgb(253, 236, 233)",
|
|
416
|
+
marker: "rgb(186, 39, 35)"
|
|
417
|
+
}
|
|
405
418
|
} },
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
419
|
+
interactive: { bg: {
|
|
420
|
+
active: "rgba(38, 49, 72, 0.1)",
|
|
421
|
+
hover: {
|
|
422
|
+
$: "rgba(38, 49, 72, 0.06)",
|
|
423
|
+
accent: "rgba(38, 49, 72, 0.14)",
|
|
424
|
+
danger: "rgba(236, 19, 19, 0.05)",
|
|
425
|
+
solid: "var(--dsw-static-neutral-bluish-75)"
|
|
413
426
|
}
|
|
414
427
|
} },
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
428
|
+
label: {
|
|
429
|
+
caption: "var(--dsw-static-neutral-bluish-400)",
|
|
430
|
+
dimmed: "var(--dsw-static-neutral-bluish-200)",
|
|
431
|
+
document: { preview: "var(--dsw-static-neutral-bluish-200)" },
|
|
432
|
+
primary: {
|
|
433
|
+
$: "var(--dsw-static-neutral-bluish-1000)",
|
|
434
|
+
bluish: "var(--dsw-static-blue-900)",
|
|
435
|
+
dimmed: "var(--dsw-static-neutral-bluish-950)",
|
|
436
|
+
foreground: "var(--dsw-static-neutral-bluish-00)",
|
|
437
|
+
inverted: "var(--dsw-static-neutral-bluish-00)"
|
|
425
438
|
},
|
|
426
|
-
|
|
427
|
-
|
|
439
|
+
secondary: "var(--dsw-static-neutral-bluish-700)",
|
|
440
|
+
tertiary: "var(--dsw-static-neutral-bluish-600)"
|
|
428
441
|
},
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
442
|
+
link: "var(--dsw-static-deepseek-500)",
|
|
443
|
+
markdown: {
|
|
444
|
+
citation: "var(--dsw-static-neutral-bluish-100)",
|
|
445
|
+
code: {
|
|
446
|
+
block: {
|
|
447
|
+
$: "var(--dsw-static-neutral-bluish-50)",
|
|
448
|
+
banner: "var(--dsw-static-neutral-bluish-50)"
|
|
436
449
|
},
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
450
|
+
segment: {
|
|
451
|
+
selected: "var(--dsw-static-neutral-bluish-00)",
|
|
452
|
+
unselected: "var(--dsw-static-neutral-bluish-75)"
|
|
440
453
|
}
|
|
441
454
|
},
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
455
|
+
inline: { code: "var(--dsw-static-neutral-50)" },
|
|
456
|
+
placeholder: "var(--dsw-static-neutral-bluish-60)",
|
|
457
|
+
tag: "var(--dsw-static-neutral-bluish-75)"
|
|
445
458
|
},
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
459
|
+
scrollbar: {
|
|
460
|
+
bg: {
|
|
461
|
+
l1: "var(--dsw-static-neutral-200)",
|
|
462
|
+
l2: "var(--dsw-static-neutral-200)"
|
|
450
463
|
},
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
464
|
+
hover: {
|
|
465
|
+
l1: "var(--dsw-static-neutral-300)",
|
|
466
|
+
l2: "var(--dsw-static-neutral-300)"
|
|
454
467
|
}
|
|
455
468
|
},
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
469
|
+
state: {
|
|
470
|
+
business: {
|
|
471
|
+
primary: "var(--dsw-static-deepseek-500)",
|
|
472
|
+
tertiary: "var(--dsw-static-deepseek-100)"
|
|
460
473
|
},
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
474
|
+
error: {
|
|
475
|
+
primary: "var(--dsw-static-red-600)",
|
|
476
|
+
secondary: "var(--dsw-static-red-400)"
|
|
464
477
|
},
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
478
|
+
idle: { primary: "var(--dsw-static-neutral-300)" },
|
|
479
|
+
success: {
|
|
480
|
+
primary: "var(--dsw-static-green-500)",
|
|
481
|
+
secondary: "var(--dsw-static-green-400)",
|
|
482
|
+
tertiary: "var(--dsw-static-green-100)"
|
|
470
483
|
},
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
484
|
+
warn: {
|
|
485
|
+
label: "var(--dsw-static-amber-600)",
|
|
486
|
+
primary: "var(--dsw-static-amber-500)",
|
|
487
|
+
secondary: "var(--dsw-static-amber-400)",
|
|
488
|
+
tertiary: "var(--dsw-static-amber-100)"
|
|
476
489
|
}
|
|
477
490
|
},
|
|
478
|
-
|
|
479
|
-
|
|
491
|
+
toast: { bg: "var(--dsw-static-neutral-bluish-800)" },
|
|
492
|
+
tooltip: { bg: "var(--dsw-static-neutral-bluish-850)" }
|
|
480
493
|
},
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
494
|
+
corner: { shape: "superellipse(1.5)" },
|
|
495
|
+
elevation: {
|
|
496
|
+
panel: "var(--dsw-elevation-stroke), 0 3px 8px 0 rgba(0, 0, 0, 0.03), 0 0 16px 0 rgba(0, 0, 0, 0.02)",
|
|
497
|
+
prominent: "var(--dsw-elevation-stroke), 0 3px 8px 0 rgba(0, 0, 0, 0.04), 0 0 20px 0 rgba(0, 0, 0, 0.05)",
|
|
498
|
+
soft: "var(--dsw-elevation-stroke), 0 4px 16px 0 rgba(0, 0, 0, 0.03), 0 0 24px 0 rgba(0, 0, 0, 0.03)",
|
|
499
|
+
stroke: {
|
|
500
|
+
$: "0 0 0 0.5px var(--dsw-elevation-stroke-color)",
|
|
501
|
+
color: "var(--dsw-alias-border-l4)"
|
|
489
502
|
}
|
|
490
503
|
},
|
|
491
|
-
|
|
492
|
-
|
|
504
|
+
font: {
|
|
505
|
+
base: {
|
|
493
506
|
"16": {
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
507
|
+
$: "16px/24px var(--dsw-font-family)",
|
|
508
|
+
font: {
|
|
509
|
+
family: "var(--dsw-font-family)",
|
|
510
|
+
size: "16px",
|
|
511
|
+
style: "normal",
|
|
512
|
+
weight: "400"
|
|
500
513
|
},
|
|
501
|
-
|
|
514
|
+
line: { height: "24px" }
|
|
502
515
|
},
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
516
|
+
strong: { "16": {
|
|
517
|
+
$: "500 16px/24px var(--dsw-font-family)",
|
|
518
|
+
font: {
|
|
519
|
+
family: "var(--dsw-font-family)",
|
|
520
|
+
size: "16px",
|
|
521
|
+
style: "normal",
|
|
522
|
+
weight: "500"
|
|
510
523
|
},
|
|
511
|
-
|
|
524
|
+
line: { height: "24px" }
|
|
512
525
|
} }
|
|
513
526
|
},
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
527
|
+
family: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',\n 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif",
|
|
528
|
+
l: { "20": {
|
|
529
|
+
$: "500 20px/28px var(--dsw-font-family)",
|
|
530
|
+
font: {
|
|
531
|
+
family: "var(--dsw-font-family)",
|
|
532
|
+
size: "20px",
|
|
533
|
+
style: "normal",
|
|
534
|
+
weight: "500"
|
|
522
535
|
},
|
|
523
|
-
|
|
536
|
+
line: { height: "28px" }
|
|
524
537
|
} },
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
538
|
+
m: { "18": {
|
|
539
|
+
$: "500 16px/28px var(--dsw-font-family)",
|
|
540
|
+
font: {
|
|
541
|
+
family: "var(--dsw-font-family)",
|
|
542
|
+
size: "16px",
|
|
543
|
+
style: "normal",
|
|
544
|
+
weight: "500"
|
|
532
545
|
},
|
|
533
|
-
|
|
546
|
+
line: { height: "28px" }
|
|
534
547
|
} },
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
548
|
+
markdown: {
|
|
549
|
+
base: {
|
|
550
|
+
$: "var(--dsh-content-font-size, 14px) / calc(24px + var(--dsh-content-font-delta)) var(--dsw-font-family)",
|
|
551
|
+
font: {
|
|
552
|
+
family: "var(--dsw-font-family)",
|
|
553
|
+
size: "var(--dsh-content-font-size, 14px)",
|
|
554
|
+
style: "normal",
|
|
555
|
+
weight: "400"
|
|
543
556
|
},
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
557
|
+
italic: {
|
|
558
|
+
$: "italic var(--dsh-content-font-size, 14px) / calc(24px + var(--dsh-content-font-delta)) var(--dsw-font-family)",
|
|
559
|
+
font: {
|
|
560
|
+
family: "var(--dsw-font-family)",
|
|
561
|
+
size: "var(--dsh-content-font-size, 14px)",
|
|
562
|
+
style: "italic",
|
|
563
|
+
weight: "400"
|
|
551
564
|
},
|
|
552
|
-
|
|
565
|
+
line: { height: "calc(24px + var(--dsh-content-font-delta))" }
|
|
553
566
|
},
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
567
|
+
line: { height: "calc(24px + var(--dsh-content-font-delta))" },
|
|
568
|
+
strong: {
|
|
569
|
+
$: "600 var(--dsh-content-font-size, 14px) / calc(24px + var(--dsh-content-font-delta)) var(--dsw-font-family)",
|
|
570
|
+
font: {
|
|
571
|
+
family: "var(--dsw-font-family)",
|
|
572
|
+
size: "var(--dsh-content-font-size, 14px)",
|
|
573
|
+
style: "normal",
|
|
574
|
+
weight: "600"
|
|
562
575
|
},
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
576
|
+
italic: {
|
|
577
|
+
$: "italic 600 var(--dsh-content-font-size, 14px) / calc(24px + var(--dsh-content-font-delta)) var(--dsw-font-family)",
|
|
578
|
+
font: {
|
|
579
|
+
family: "var(--dsw-font-family)",
|
|
580
|
+
size: "var(--dsh-content-font-size, 14px)",
|
|
581
|
+
style: "italic",
|
|
582
|
+
weight: "600"
|
|
570
583
|
},
|
|
571
|
-
|
|
584
|
+
line: { height: "calc(24px + var(--dsh-content-font-delta))" }
|
|
572
585
|
},
|
|
573
|
-
|
|
586
|
+
line: { height: "calc(24px + var(--dsh-content-font-delta))" }
|
|
574
587
|
}
|
|
575
588
|
},
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
589
|
+
code: {
|
|
590
|
+
$: "12px/19px var(--ds-font-family-code)",
|
|
591
|
+
block: {
|
|
592
|
+
$: "11px/19px var(--ds-font-family-code)",
|
|
593
|
+
font: {
|
|
594
|
+
family: "var(--ds-font-family-code)",
|
|
595
|
+
size: "11px",
|
|
596
|
+
style: "normal",
|
|
597
|
+
weight: "400"
|
|
585
598
|
},
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
599
|
+
line: { height: "19px" },
|
|
600
|
+
small: {
|
|
601
|
+
$: "11px/16px var(--ds-font-family-code)",
|
|
602
|
+
font: {
|
|
603
|
+
family: "var(--ds-font-family-code)",
|
|
604
|
+
size: "11px",
|
|
605
|
+
style: "normal",
|
|
606
|
+
weight: "400"
|
|
594
607
|
},
|
|
595
|
-
|
|
608
|
+
line: { height: "16px" }
|
|
596
609
|
}
|
|
597
610
|
},
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
611
|
+
font: {
|
|
612
|
+
family: "var(--ds-font-family-code)",
|
|
613
|
+
size: "12px",
|
|
614
|
+
style: "normal",
|
|
615
|
+
weight: "400"
|
|
603
616
|
},
|
|
604
|
-
|
|
617
|
+
line: { height: "19px" }
|
|
605
618
|
},
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
619
|
+
h1: {
|
|
620
|
+
$: "700 calc(21px + var(--dsh-content-font-delta)) / calc(30px + var(--dsh-content-font-delta)) var(--dsw-font-family)",
|
|
621
|
+
font: {
|
|
622
|
+
family: "var(--dsw-font-family)",
|
|
623
|
+
size: "calc(21px + var(--dsh-content-font-delta))",
|
|
624
|
+
style: "normal",
|
|
625
|
+
weight: "700"
|
|
613
626
|
},
|
|
614
|
-
|
|
627
|
+
line: { height: "calc(30px + var(--dsh-content-font-delta))" }
|
|
615
628
|
},
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
629
|
+
h2: {
|
|
630
|
+
$: "700 calc(19px + var(--dsh-content-font-delta)) / calc(28px + var(--dsh-content-font-delta)) var(--dsw-font-family)",
|
|
631
|
+
font: {
|
|
632
|
+
family: "var(--dsw-font-family)",
|
|
633
|
+
size: "calc(19px + var(--dsh-content-font-delta))",
|
|
634
|
+
style: "normal",
|
|
635
|
+
weight: "700"
|
|
623
636
|
},
|
|
624
|
-
|
|
637
|
+
line: { height: "calc(28px + var(--dsh-content-font-delta))" }
|
|
625
638
|
},
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
639
|
+
h3: {
|
|
640
|
+
$: "700 calc(18px + var(--dsh-content-font-delta)) / calc(26px + var(--dsh-content-font-delta)) var(--dsw-font-family)",
|
|
641
|
+
font: {
|
|
642
|
+
family: "var(--dsw-font-family)",
|
|
643
|
+
size: "calc(18px + var(--dsh-content-font-delta))",
|
|
644
|
+
style: "normal",
|
|
645
|
+
weight: "700"
|
|
633
646
|
},
|
|
634
|
-
|
|
647
|
+
line: { height: "calc(26px + var(--dsh-content-font-delta))" }
|
|
635
648
|
},
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
649
|
+
h4: {
|
|
650
|
+
$: "600 var(--dsh-content-font-size, 14px) / calc(24px + var(--dsh-content-font-delta)) var(--dsw-font-family)",
|
|
651
|
+
font: {
|
|
652
|
+
family: "var(--dsw-font-family)",
|
|
653
|
+
size: "var(--dsh-content-font-size, 14px)",
|
|
654
|
+
style: "normal",
|
|
655
|
+
weight: "600"
|
|
643
656
|
},
|
|
644
|
-
|
|
657
|
+
line: { height: "calc(24px + var(--dsh-content-font-delta))" }
|
|
645
658
|
},
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
659
|
+
small: {
|
|
660
|
+
$: "12px/20px var(--dsw-font-family)",
|
|
661
|
+
font: {
|
|
662
|
+
family: "var(--dsw-font-family)",
|
|
663
|
+
size: "12px",
|
|
664
|
+
style: "normal",
|
|
665
|
+
weight: "400"
|
|
653
666
|
},
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
667
|
+
italic: {
|
|
668
|
+
$: "italic 12px/20px var(--dsw-font-family)",
|
|
669
|
+
font: {
|
|
670
|
+
family: "var(--dsw-font-family)",
|
|
671
|
+
size: "12px",
|
|
672
|
+
style: "italic",
|
|
673
|
+
weight: "400"
|
|
661
674
|
},
|
|
662
|
-
|
|
675
|
+
line: { height: "20px" }
|
|
663
676
|
},
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
677
|
+
line: { height: "20px" },
|
|
678
|
+
strong: {
|
|
679
|
+
$: "600 12px/20px var(--dsw-font-family)",
|
|
680
|
+
font: {
|
|
681
|
+
family: "var(--dsw-font-family)",
|
|
682
|
+
size: "12px",
|
|
683
|
+
style: "normal",
|
|
684
|
+
weight: "600"
|
|
672
685
|
},
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
686
|
+
italic: {
|
|
687
|
+
$: "italic 600 12px/20px var(--dsw-font-family)",
|
|
688
|
+
font: {
|
|
689
|
+
family: "var(--dsw-font-family)",
|
|
690
|
+
size: "12px",
|
|
691
|
+
style: "italic",
|
|
692
|
+
weight: "600"
|
|
680
693
|
},
|
|
681
|
-
|
|
694
|
+
line: { height: "20px" }
|
|
682
695
|
},
|
|
683
|
-
|
|
696
|
+
line: { height: "20px" }
|
|
684
697
|
}
|
|
685
698
|
},
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
699
|
+
table: {
|
|
700
|
+
$: "var(--dsh-content-font-size-secondary, 13px)/calc(22px + var(--dsh-content-font-delta-secondary, 0px)) var(--dsw-font-family)",
|
|
701
|
+
font: {
|
|
702
|
+
family: "var(--dsw-font-family)",
|
|
703
|
+
size: "var(--dsh-content-font-size-secondary, 13px)",
|
|
704
|
+
style: "normal",
|
|
705
|
+
weight: "400"
|
|
693
706
|
},
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
707
|
+
head: {
|
|
708
|
+
$: "500 var(--dsh-content-font-size-secondary, 13px)/calc(22px + var(--dsh-content-font-delta-secondary, 0px)) var(--dsw-font-family)",
|
|
709
|
+
font: {
|
|
710
|
+
family: "var(--dsw-font-family)",
|
|
711
|
+
size: "var(--dsh-content-font-size-secondary, 13px)",
|
|
712
|
+
style: "normal",
|
|
713
|
+
weight: "500"
|
|
701
714
|
},
|
|
702
|
-
|
|
715
|
+
line: { height: "calc(22px + var(--dsh-content-font-delta-secondary, 0px))" }
|
|
703
716
|
},
|
|
704
|
-
|
|
717
|
+
line: { height: "calc(22px + var(--dsh-content-font-delta-secondary, 0px))" }
|
|
705
718
|
}
|
|
706
719
|
},
|
|
707
|
-
|
|
720
|
+
s: {
|
|
708
721
|
"14": {
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
722
|
+
$: "14px/22px var(--dsw-font-family)",
|
|
723
|
+
font: {
|
|
724
|
+
family: "var(--dsw-font-family)",
|
|
725
|
+
size: "14px",
|
|
726
|
+
style: "normal",
|
|
727
|
+
weight: "400"
|
|
715
728
|
},
|
|
716
|
-
|
|
729
|
+
line: { height: "22px" }
|
|
717
730
|
},
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
731
|
+
strong: { "14": {
|
|
732
|
+
$: "500 14px/22px var(--dsw-font-family)",
|
|
733
|
+
font: {
|
|
734
|
+
family: "var(--dsw-font-family)",
|
|
735
|
+
size: "14px",
|
|
736
|
+
style: "normal",
|
|
737
|
+
weight: "500"
|
|
725
738
|
},
|
|
726
|
-
|
|
739
|
+
line: { height: "22px" }
|
|
727
740
|
} }
|
|
728
741
|
},
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
742
|
+
xl: { "24": {
|
|
743
|
+
$: "600 24px/32px var(--dsw-font-family)",
|
|
744
|
+
font: {
|
|
745
|
+
family: "var(--dsw-font-family)",
|
|
746
|
+
size: "24px",
|
|
747
|
+
style: "normal",
|
|
748
|
+
weight: "600"
|
|
736
749
|
},
|
|
737
|
-
|
|
750
|
+
line: { height: "32px" }
|
|
738
751
|
} },
|
|
739
|
-
|
|
752
|
+
xs: {
|
|
740
753
|
"13": {
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
754
|
+
$: "13px/20px var(--dsw-font-family)",
|
|
755
|
+
font: {
|
|
756
|
+
family: "var(--dsw-font-family)",
|
|
757
|
+
size: "13px",
|
|
758
|
+
style: "normal",
|
|
759
|
+
weight: "400"
|
|
747
760
|
},
|
|
748
|
-
|
|
761
|
+
line: { height: "20px" }
|
|
749
762
|
},
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
763
|
+
strong: { "13": {
|
|
764
|
+
$: "500 13px/20px var(--dsw-font-family)",
|
|
765
|
+
font: {
|
|
766
|
+
family: "var(--dsw-font-family)",
|
|
767
|
+
size: "13px",
|
|
768
|
+
style: "normal",
|
|
769
|
+
weight: "500"
|
|
757
770
|
},
|
|
758
|
-
|
|
771
|
+
line: { height: "20px" }
|
|
759
772
|
} }
|
|
760
773
|
},
|
|
761
|
-
|
|
774
|
+
xxs: {
|
|
762
775
|
"12": {
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
776
|
+
$: "12px/18px var(--dsw-font-family)",
|
|
777
|
+
font: {
|
|
778
|
+
family: "var(--dsw-font-family)",
|
|
779
|
+
size: "12px",
|
|
780
|
+
style: "normal",
|
|
781
|
+
weight: "400"
|
|
769
782
|
},
|
|
770
|
-
|
|
783
|
+
line: { height: "18px" }
|
|
771
784
|
},
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
785
|
+
strong: { "12": {
|
|
786
|
+
$: "500 12px/18px var(--dsw-font-family)",
|
|
787
|
+
font: {
|
|
788
|
+
family: "var(--dsw-font-family)",
|
|
789
|
+
size: "12px",
|
|
790
|
+
style: "normal",
|
|
791
|
+
weight: "500"
|
|
779
792
|
},
|
|
780
|
-
|
|
793
|
+
line: { height: "18px" }
|
|
781
794
|
} }
|
|
782
795
|
},
|
|
783
|
-
|
|
796
|
+
xxxs: {
|
|
784
797
|
"11": {
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
798
|
+
$: "11px/14px var(--dsw-font-family)",
|
|
799
|
+
font: {
|
|
800
|
+
family: "var(--dsw-font-family)",
|
|
801
|
+
size: "11px",
|
|
802
|
+
style: "normal",
|
|
803
|
+
weight: "400"
|
|
791
804
|
},
|
|
792
|
-
|
|
805
|
+
line: { height: "14px" }
|
|
793
806
|
},
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
807
|
+
strong: { "11": {
|
|
808
|
+
$: "500 11px/14px var(--dsw-font-family)",
|
|
809
|
+
font: {
|
|
810
|
+
family: "var(--dsw-font-family)",
|
|
811
|
+
size: "11px",
|
|
812
|
+
style: "normal",
|
|
813
|
+
weight: "500"
|
|
801
814
|
},
|
|
802
|
-
|
|
815
|
+
line: { height: "14px" }
|
|
803
816
|
} }
|
|
804
817
|
}
|
|
805
818
|
},
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
819
|
+
linear: {
|
|
820
|
+
gradient: { think: "linear-gradient(180deg, #fff 20.19%, rgba(255, 255, 255, 0) 100%)" },
|
|
821
|
+
think: { select: "linear-gradient(180deg, #f5f6f7 20.19%, rgba(245, 246, 247, 0) 100%)" }
|
|
809
822
|
},
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
823
|
+
mask: { blur: "blur(2px)" },
|
|
824
|
+
menu: { backdrop: { filter: "blur(40px) saturate(150%)" } },
|
|
825
|
+
shadow: {
|
|
826
|
+
lv1: {
|
|
827
|
+
$: "0 2px 4px 0 rgba(0, 0, 0, 0.05)",
|
|
828
|
+
blur: "0 4px 12px 0 rgba(0, 0, 0, 0.02)"
|
|
816
829
|
},
|
|
817
|
-
|
|
818
|
-
|
|
830
|
+
lv2: "0 4px 12px 0 rgba(0, 0, 0, 0.02), 0 2px 8px 0 rgba(0, 0, 0, 0.04)",
|
|
831
|
+
lv3: "0 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 4px 0 rgba(0, 0, 0, 0.02), 0 12px 32px 0 rgba(0, 0, 0, 0.08)"
|
|
819
832
|
},
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
833
|
+
specific: {
|
|
834
|
+
bubble: {
|
|
835
|
+
$: "var(--dsw-static-deepseek-50)",
|
|
836
|
+
highlight: "var(--dsw-static-deepseek-200)"
|
|
824
837
|
},
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
838
|
+
input: { major: "var(--dsw-static-neutral-bluish-00)" },
|
|
839
|
+
login: { input: "var(--dsw-static-neutral-bluish-50)" },
|
|
840
|
+
menu: "rgba(248, 249, 250, 0.58)",
|
|
841
|
+
selector: "var(--dsw-static-neutral-bluish-60)",
|
|
842
|
+
sidebar: {
|
|
843
|
+
fill: "var(--dsw-static-neutral-bluish-50)",
|
|
844
|
+
nav: { item: {
|
|
845
|
+
active: {
|
|
846
|
+
$: "var(--dsw-static-neutral-bluish-100)",
|
|
847
|
+
accent: "var(--dsw-static-deepseek-100)"
|
|
835
848
|
},
|
|
836
|
-
|
|
849
|
+
hover: "var(--dsw-static-neutral-bluish-75)"
|
|
837
850
|
} }
|
|
838
851
|
},
|
|
839
|
-
|
|
852
|
+
tip: "var(--dsw-static-neutral-bluish-60)"
|
|
840
853
|
},
|
|
841
|
-
|
|
842
|
-
|
|
854
|
+
static: {
|
|
855
|
+
amber: {
|
|
843
856
|
"100": "rgb(254, 245, 231)",
|
|
844
857
|
"400": "rgb(247, 173, 49)",
|
|
845
858
|
"500": "rgb(245, 158, 11)",
|
|
846
859
|
"600": "rgb(221, 134, 41)",
|
|
847
860
|
"900": "rgb(39, 36, 31)"
|
|
848
861
|
},
|
|
849
|
-
|
|
862
|
+
blue: {
|
|
850
863
|
"50": "rgb(239, 246, 255)",
|
|
851
864
|
"75": "rgb(229, 240, 255)",
|
|
852
865
|
"100": "rgb(219, 234, 254)",
|
|
@@ -860,7 +873,7 @@ window.__ModuleLoader__.load({
|
|
|
860
873
|
"950": "rgb(23, 37, 84)",
|
|
861
874
|
"50p": "rgb(234, 243, 255)"
|
|
862
875
|
},
|
|
863
|
-
|
|
876
|
+
deepseek: {
|
|
864
877
|
"50": "rgb(237, 243, 254)",
|
|
865
878
|
"100": "rgb(228, 237, 253)",
|
|
866
879
|
"200": "rgb(211, 226, 255)",
|
|
@@ -869,21 +882,21 @@ window.__ModuleLoader__.load({
|
|
|
869
882
|
"450": "rgb(86, 134, 254)",
|
|
870
883
|
"500": "rgb(65, 118, 230)",
|
|
871
884
|
"600": "rgb(72, 104, 178)",
|
|
872
|
-
"700": {
|
|
885
|
+
"700": { delete: "rgb(47, 76, 143)" },
|
|
873
886
|
"800": "rgb(52, 65, 91)",
|
|
874
887
|
"900": "rgb(40, 49, 66)"
|
|
875
888
|
},
|
|
876
|
-
|
|
889
|
+
green: {
|
|
877
890
|
"100": "rgb(230, 250, 237)",
|
|
878
891
|
"400": "rgb(78, 209, 126)",
|
|
879
892
|
"500": {
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
893
|
+
$: "rgb(34, 197, 94)",
|
|
894
|
+
a08: "rgb(34 197 94 / 8%)",
|
|
895
|
+
a12: "rgb(34 197 94 / 12%)"
|
|
883
896
|
},
|
|
884
897
|
"900": "rgb(35, 60, 44)"
|
|
885
898
|
},
|
|
886
|
-
|
|
899
|
+
neutral: {
|
|
887
900
|
"50": "rgb(250, 250, 250)",
|
|
888
901
|
"100": "rgb(245, 245, 245)",
|
|
889
902
|
"150": "rgb(237, 237, 237)",
|
|
@@ -900,7 +913,7 @@ window.__ModuleLoader__.load({
|
|
|
900
913
|
"900": "rgb(15, 15, 15)",
|
|
901
914
|
"1000": "rgb(0, 0, 0)",
|
|
902
915
|
"00": "rgb(255, 255, 255)",
|
|
903
|
-
|
|
916
|
+
bluish: {
|
|
904
917
|
"50": "rgb(249, 250, 251)",
|
|
905
918
|
"60": "rgb(245, 246, 247)",
|
|
906
919
|
"75": "rgb(241, 243, 245)",
|
|
@@ -922,17 +935,17 @@ window.__ModuleLoader__.load({
|
|
|
922
935
|
"00": "rgb(255, 255, 255)"
|
|
923
936
|
}
|
|
924
937
|
},
|
|
925
|
-
|
|
938
|
+
red: {
|
|
926
939
|
"50": "rgb(254, 242, 242)",
|
|
927
940
|
"100": "rgb(254, 226, 226)",
|
|
928
941
|
"400": {
|
|
929
|
-
|
|
930
|
-
|
|
942
|
+
$: "rgb(242, 90, 90)",
|
|
943
|
+
a12: "rgb(242 90 90 / 12%)"
|
|
931
944
|
},
|
|
932
945
|
"500": "rgb(239, 68, 68)",
|
|
933
946
|
"600": {
|
|
934
|
-
|
|
935
|
-
|
|
947
|
+
$: "rgb(236, 19, 19)",
|
|
948
|
+
a08: "rgb(236 19 19 / 8%)"
|
|
936
949
|
},
|
|
937
950
|
"900": "rgb(87, 12, 12)"
|
|
938
951
|
}
|
|
@@ -953,6 +966,643 @@ window.__ModuleLoader__.load({
|
|
|
953
966
|
};
|
|
954
967
|
}
|
|
955
968
|
//#endregion
|
|
969
|
+
//#region src/client/settings-form/form-model.ts
|
|
970
|
+
/**
|
|
971
|
+
* The staged form model behind a plugin's settings page.
|
|
972
|
+
*
|
|
973
|
+
* A card stages what the user types and writes it only when they save. Each
|
|
974
|
+
* settings write is a durable, revision-fenced document mutation, so a control
|
|
975
|
+
* that committed as it settled turned one edit into a write the user never
|
|
976
|
+
* asked for and could not preview; staged text makes what is on screen exactly
|
|
977
|
+
* what a save would store.
|
|
978
|
+
*
|
|
979
|
+
* A field shows its effective value — the user layer over the composition
|
|
980
|
+
* layer over the schema default — and whether the user layer carries it. That
|
|
981
|
+
* presence, not a value comparison, is what marks a field overridden: an
|
|
982
|
+
* override equal to the composition default is still an override.
|
|
983
|
+
*/
|
|
984
|
+
/**
|
|
985
|
+
* A whole-number field. An empty draft clears the field; any other draft that
|
|
986
|
+
* is not a finite number blocks the save.
|
|
987
|
+
* @param field - field name inside the namespace section.
|
|
988
|
+
* @returns the field's conversion spec.
|
|
989
|
+
*/
|
|
990
|
+
function settingsNumberField(field) {
|
|
991
|
+
return {
|
|
992
|
+
field,
|
|
993
|
+
format: (value) => typeof value === "number" ? String(value) : "",
|
|
994
|
+
parse: (text) => {
|
|
995
|
+
const trimmed = text.trim();
|
|
996
|
+
if (trimmed === "") return { kind: "clear" };
|
|
997
|
+
const parsed = Number(trimmed);
|
|
998
|
+
return Number.isFinite(parsed) ? {
|
|
999
|
+
kind: "set",
|
|
1000
|
+
value: parsed
|
|
1001
|
+
} : void 0;
|
|
1002
|
+
}
|
|
1003
|
+
};
|
|
1004
|
+
}
|
|
1005
|
+
/**
|
|
1006
|
+
* A free-text field. An empty draft clears the field, so emptying the control
|
|
1007
|
+
* and saving is the same gesture as resetting it.
|
|
1008
|
+
* @param field - field name inside the namespace section.
|
|
1009
|
+
* @returns the field's conversion spec.
|
|
1010
|
+
*/
|
|
1011
|
+
function settingsTextField(field) {
|
|
1012
|
+
return {
|
|
1013
|
+
field,
|
|
1014
|
+
format: (value) => typeof value === "string" ? value : "",
|
|
1015
|
+
parse: (text) => {
|
|
1016
|
+
const trimmed = text.trim();
|
|
1017
|
+
return trimmed === "" ? { kind: "clear" } : {
|
|
1018
|
+
kind: "set",
|
|
1019
|
+
value: trimmed
|
|
1020
|
+
};
|
|
1021
|
+
}
|
|
1022
|
+
};
|
|
1023
|
+
}
|
|
1024
|
+
/**
|
|
1025
|
+
* Stages one card's edits over one settings namespace and writes them on save.
|
|
1026
|
+
*
|
|
1027
|
+
* The form publishes through a snapshot store because slot components read
|
|
1028
|
+
* through a snapshot selector, while both the scope and the local drafts
|
|
1029
|
+
* change underneath; every projection is rebuilt from the two together.
|
|
1030
|
+
*/
|
|
1031
|
+
var SettingsFormModel = class {
|
|
1032
|
+
scope;
|
|
1033
|
+
specs;
|
|
1034
|
+
secretSpecs;
|
|
1035
|
+
staged = /* @__PURE__ */ new Map();
|
|
1036
|
+
listeners = /* @__PURE__ */ new Set();
|
|
1037
|
+
baseline;
|
|
1038
|
+
unsubscribe;
|
|
1039
|
+
saving = false;
|
|
1040
|
+
failed = false;
|
|
1041
|
+
/**
|
|
1042
|
+
* @param scope - the shared configuration form for this card's namespace.
|
|
1043
|
+
* @param specs - the section fields this card edits.
|
|
1044
|
+
* @param secrets - the card's write-only controls, written outside the section.
|
|
1045
|
+
*/
|
|
1046
|
+
constructor(scope, specs, secrets = []) {
|
|
1047
|
+
this.scope = scope;
|
|
1048
|
+
this.specs = new Map(specs.map((spec) => [spec.field, spec]));
|
|
1049
|
+
this.secretSpecs = new Map(secrets.map((spec) => [spec.field, spec]));
|
|
1050
|
+
this.unsubscribe = scope.subscribe(() => {
|
|
1051
|
+
this.publish();
|
|
1052
|
+
});
|
|
1053
|
+
}
|
|
1054
|
+
/**
|
|
1055
|
+
* Publish a projection of this form, rebuilt whenever the scope or a draft changes.
|
|
1056
|
+
* @param project - build the card's state from the form's current reads.
|
|
1057
|
+
* @returns the store the card's component reads through its bound selector.
|
|
1058
|
+
*/
|
|
1059
|
+
bind(project) {
|
|
1060
|
+
const store = (0, _deepseek_ai_dsh_client_store.createSnapshotStore)(project());
|
|
1061
|
+
this.listeners.add(() => {
|
|
1062
|
+
store.set(project());
|
|
1063
|
+
});
|
|
1064
|
+
return store;
|
|
1065
|
+
}
|
|
1066
|
+
/**
|
|
1067
|
+
* Read the card-level state: what the Host serves, and what a save would do.
|
|
1068
|
+
* @returns the form state every card shares.
|
|
1069
|
+
*/
|
|
1070
|
+
shell() {
|
|
1071
|
+
const snapshot = this.scope.getSnapshot();
|
|
1072
|
+
const plan = this.plan();
|
|
1073
|
+
return {
|
|
1074
|
+
available: snapshot.status === "ready",
|
|
1075
|
+
writable: snapshot.writable,
|
|
1076
|
+
dirty: plan.length > 0,
|
|
1077
|
+
invalid: plan.some((item) => item.run === void 0 && item.op === void 0),
|
|
1078
|
+
saving: this.saving,
|
|
1079
|
+
failed: this.failed
|
|
1080
|
+
};
|
|
1081
|
+
}
|
|
1082
|
+
/**
|
|
1083
|
+
* Read one control's state.
|
|
1084
|
+
* @param field - field name of a section field or of a write-only control.
|
|
1085
|
+
* @returns the draft text, whether a save would leave an override, and whether it is invalid.
|
|
1086
|
+
*/
|
|
1087
|
+
field(field) {
|
|
1088
|
+
const staged = this.staged.get(field);
|
|
1089
|
+
if (this.secretSpecs.has(field)) return {
|
|
1090
|
+
text: staged?.text ?? "",
|
|
1091
|
+
overridden: false,
|
|
1092
|
+
invalid: false
|
|
1093
|
+
};
|
|
1094
|
+
const spec = this.spec(field);
|
|
1095
|
+
if (staged === void 0) return {
|
|
1096
|
+
text: spec.format(this.sectionValue(field)),
|
|
1097
|
+
overridden: this.stored(field),
|
|
1098
|
+
invalid: false
|
|
1099
|
+
};
|
|
1100
|
+
const write = staged.clear ? { kind: "clear" } : spec.parse(staged.text);
|
|
1101
|
+
return {
|
|
1102
|
+
text: staged.text,
|
|
1103
|
+
overridden: write?.kind === "set",
|
|
1104
|
+
invalid: write === void 0
|
|
1105
|
+
};
|
|
1106
|
+
}
|
|
1107
|
+
/**
|
|
1108
|
+
* Build the edit, reset, save, and discard actions bound to this form.
|
|
1109
|
+
* @returns the actions a card's slot entry injects.
|
|
1110
|
+
*/
|
|
1111
|
+
actions() {
|
|
1112
|
+
return {
|
|
1113
|
+
edit: (field, text) => {
|
|
1114
|
+
this.stage(field, {
|
|
1115
|
+
text,
|
|
1116
|
+
clear: false
|
|
1117
|
+
});
|
|
1118
|
+
},
|
|
1119
|
+
resetField: (field) => {
|
|
1120
|
+
this.stage(field, {
|
|
1121
|
+
text: this.spec(field).format(this.baseValue(field)),
|
|
1122
|
+
clear: true
|
|
1123
|
+
});
|
|
1124
|
+
},
|
|
1125
|
+
save: () => {
|
|
1126
|
+
this.save();
|
|
1127
|
+
},
|
|
1128
|
+
discard: () => {
|
|
1129
|
+
if (this.staged.size === 0 && !this.failed) return;
|
|
1130
|
+
this.staged.clear();
|
|
1131
|
+
this.baseline = void 0;
|
|
1132
|
+
this.failed = false;
|
|
1133
|
+
this.publish();
|
|
1134
|
+
}
|
|
1135
|
+
};
|
|
1136
|
+
}
|
|
1137
|
+
/**
|
|
1138
|
+
* Write every staged edit, then re-seed from what the Host accepted.
|
|
1139
|
+
*
|
|
1140
|
+
* The Host is the only authority on whether a value was accepted — its
|
|
1141
|
+
* validators own the constraints no schema can express — so the outcome is
|
|
1142
|
+
* read back from the section rather than predicted here. A save that did not
|
|
1143
|
+
* land keeps its drafts, so the user can correct them instead of retyping.
|
|
1144
|
+
* @returns settlement after every write and the read-back.
|
|
1145
|
+
*/
|
|
1146
|
+
async save() {
|
|
1147
|
+
const plan = this.plan();
|
|
1148
|
+
if (!plan.length || this.saving || !this.scope.getSnapshot().writable || plan.some((item) => item.run === void 0 && item.op === void 0)) return;
|
|
1149
|
+
this.saving = true;
|
|
1150
|
+
this.failed = false;
|
|
1151
|
+
this.publish();
|
|
1152
|
+
try {
|
|
1153
|
+
const ops = plan.flatMap((item) => item.op === void 0 ? [] : [item.op]);
|
|
1154
|
+
let landed = !ops.length || await this.scope.mutate(ops, this.baseline?.revision);
|
|
1155
|
+
if (!landed) {
|
|
1156
|
+
this.failed = true;
|
|
1157
|
+
return;
|
|
1158
|
+
}
|
|
1159
|
+
for (const item of plan) if (item.run) landed = await item.run() && landed;
|
|
1160
|
+
if (landed) {
|
|
1161
|
+
this.staged.clear();
|
|
1162
|
+
this.baseline = void 0;
|
|
1163
|
+
}
|
|
1164
|
+
this.failed = !landed;
|
|
1165
|
+
} catch {
|
|
1166
|
+
this.failed = true;
|
|
1167
|
+
} finally {
|
|
1168
|
+
this.saving = false;
|
|
1169
|
+
this.publish();
|
|
1170
|
+
}
|
|
1171
|
+
}
|
|
1172
|
+
/** Release the form's accepted-value subscription. */
|
|
1173
|
+
dispose() {
|
|
1174
|
+
this.unsubscribe();
|
|
1175
|
+
this.listeners.clear();
|
|
1176
|
+
}
|
|
1177
|
+
/**
|
|
1178
|
+
* Every staged edit a save would write. An entry whose draft is not a value
|
|
1179
|
+
* its field accepts carries no write: the form is still dirty, and the save
|
|
1180
|
+
* refuses rather than dropping the edit.
|
|
1181
|
+
* @returns the planned writes, in the order the fields were staged.
|
|
1182
|
+
*/
|
|
1183
|
+
plan() {
|
|
1184
|
+
const plan = [];
|
|
1185
|
+
for (const [field, staged] of this.staged) {
|
|
1186
|
+
const secret = this.secretSpecs.get(field);
|
|
1187
|
+
if (secret !== void 0) {
|
|
1188
|
+
const value = staged.text.trim();
|
|
1189
|
+
if (value !== "") plan.push({
|
|
1190
|
+
field,
|
|
1191
|
+
run: () => secret.write(value)
|
|
1192
|
+
});
|
|
1193
|
+
continue;
|
|
1194
|
+
}
|
|
1195
|
+
const spec = this.spec(field);
|
|
1196
|
+
if (staged.clear) {
|
|
1197
|
+
if (this.stored(field)) plan.push({
|
|
1198
|
+
field,
|
|
1199
|
+
op: {
|
|
1200
|
+
op: "unset",
|
|
1201
|
+
path: [field]
|
|
1202
|
+
}
|
|
1203
|
+
});
|
|
1204
|
+
continue;
|
|
1205
|
+
}
|
|
1206
|
+
if (staged.text === spec.format(this.sectionValue(field))) continue;
|
|
1207
|
+
const write = spec.parse(staged.text);
|
|
1208
|
+
if (write === void 0) plan.push({ field });
|
|
1209
|
+
else if (write.kind === "clear") plan.push({
|
|
1210
|
+
field,
|
|
1211
|
+
op: {
|
|
1212
|
+
op: "unset",
|
|
1213
|
+
path: [field]
|
|
1214
|
+
}
|
|
1215
|
+
});
|
|
1216
|
+
else plan.push({
|
|
1217
|
+
field,
|
|
1218
|
+
op: {
|
|
1219
|
+
op: "set",
|
|
1220
|
+
path: [field],
|
|
1221
|
+
value: write.value
|
|
1222
|
+
}
|
|
1223
|
+
});
|
|
1224
|
+
}
|
|
1225
|
+
return plan;
|
|
1226
|
+
}
|
|
1227
|
+
stage(field, edit) {
|
|
1228
|
+
this.baseline ??= this.scope.getSnapshot();
|
|
1229
|
+
this.staged.set(field, edit);
|
|
1230
|
+
this.failed = false;
|
|
1231
|
+
this.publish();
|
|
1232
|
+
}
|
|
1233
|
+
spec(field) {
|
|
1234
|
+
const spec = this.specs.get(field);
|
|
1235
|
+
if (spec === void 0) throw new Error(`plugin card has no field ${field}`);
|
|
1236
|
+
return spec;
|
|
1237
|
+
}
|
|
1238
|
+
snapshotOf() {
|
|
1239
|
+
return this.scope.getSnapshot();
|
|
1240
|
+
}
|
|
1241
|
+
sectionValue(field) {
|
|
1242
|
+
return this.snapshotOf().value?.[field];
|
|
1243
|
+
}
|
|
1244
|
+
baseValue(field) {
|
|
1245
|
+
return this.snapshotOf().base?.[field];
|
|
1246
|
+
}
|
|
1247
|
+
userLayer() {
|
|
1248
|
+
return this.snapshotOf().user;
|
|
1249
|
+
}
|
|
1250
|
+
stored(field) {
|
|
1251
|
+
const user = this.userLayer();
|
|
1252
|
+
return user !== void 0 && Object.hasOwn(user, field);
|
|
1253
|
+
}
|
|
1254
|
+
publish() {
|
|
1255
|
+
for (const listener of this.listeners) listener();
|
|
1256
|
+
}
|
|
1257
|
+
};
|
|
1258
|
+
//#endregion
|
|
1259
|
+
//#region src/client/settings-form/fields.styles.ts
|
|
1260
|
+
const helpButtonHoverBackground = "var(--dsw-alias-bg-layer-4)";
|
|
1261
|
+
const styles$1 = {
|
|
1262
|
+
field: {
|
|
1263
|
+
display: "flex",
|
|
1264
|
+
flexDirection: "column",
|
|
1265
|
+
gap: "6px",
|
|
1266
|
+
padding: "12px 0",
|
|
1267
|
+
"& + &": { borderTop: `0.5px solid ${String(dsw.alias.border.l2)}` }
|
|
1268
|
+
},
|
|
1269
|
+
head: {
|
|
1270
|
+
display: "flex",
|
|
1271
|
+
alignItems: "center",
|
|
1272
|
+
gap: "8px"
|
|
1273
|
+
},
|
|
1274
|
+
label: {
|
|
1275
|
+
flex: 1,
|
|
1276
|
+
minWidth: 0,
|
|
1277
|
+
fontSize: "13px",
|
|
1278
|
+
fontWeight: 500,
|
|
1279
|
+
lineHeight: 1.5,
|
|
1280
|
+
color: dsw.alias.label.primary
|
|
1281
|
+
},
|
|
1282
|
+
groupLabel: { flex: "0 1 auto" },
|
|
1283
|
+
labelGroup: {
|
|
1284
|
+
display: "flex",
|
|
1285
|
+
alignItems: "center",
|
|
1286
|
+
gap: "4px",
|
|
1287
|
+
flex: 1,
|
|
1288
|
+
minWidth: 0
|
|
1289
|
+
},
|
|
1290
|
+
helpButton: {
|
|
1291
|
+
display: "inline-flex",
|
|
1292
|
+
alignItems: "center",
|
|
1293
|
+
justifyContent: "center",
|
|
1294
|
+
flex: "none",
|
|
1295
|
+
width: "24px",
|
|
1296
|
+
height: "24px",
|
|
1297
|
+
padding: 0,
|
|
1298
|
+
border: 0,
|
|
1299
|
+
borderRadius: "6px",
|
|
1300
|
+
background: "none",
|
|
1301
|
+
color: dsw.alias.label.tertiary,
|
|
1302
|
+
cursor: "pointer",
|
|
1303
|
+
"&:hover": {
|
|
1304
|
+
background: helpButtonHoverBackground,
|
|
1305
|
+
color: dsw.alias.label.secondary
|
|
1306
|
+
},
|
|
1307
|
+
"&[aria-expanded='true']": {
|
|
1308
|
+
background: helpButtonHoverBackground,
|
|
1309
|
+
color: dsw.alias.label.secondary
|
|
1310
|
+
},
|
|
1311
|
+
"&:focus-visible": {
|
|
1312
|
+
outline: `2px solid ${String(dsw.alias.brand.primary)}`,
|
|
1313
|
+
outlineOffset: "1px"
|
|
1314
|
+
}
|
|
1315
|
+
},
|
|
1316
|
+
help: {
|
|
1317
|
+
padding: "10px 0 0",
|
|
1318
|
+
fontSize: "12px",
|
|
1319
|
+
lineHeight: 1.6,
|
|
1320
|
+
color: dsw.alias.label.secondary,
|
|
1321
|
+
"& > p": { margin: 0 },
|
|
1322
|
+
"& > p + p": { marginTop: "8px" }
|
|
1323
|
+
},
|
|
1324
|
+
badges: {
|
|
1325
|
+
display: "inline-flex",
|
|
1326
|
+
alignItems: "center",
|
|
1327
|
+
gap: "8px"
|
|
1328
|
+
},
|
|
1329
|
+
badge: {
|
|
1330
|
+
display: "inline-flex",
|
|
1331
|
+
alignItems: "center",
|
|
1332
|
+
borderRadius: "999px",
|
|
1333
|
+
cornerShape: "round",
|
|
1334
|
+
padding: "1px 8px",
|
|
1335
|
+
fontSize: "11px",
|
|
1336
|
+
lineHeight: "17px",
|
|
1337
|
+
fontWeight: 500,
|
|
1338
|
+
whiteSpace: "nowrap"
|
|
1339
|
+
},
|
|
1340
|
+
badgeNeutral: {
|
|
1341
|
+
background: dsw.alias.bg.module.platform,
|
|
1342
|
+
color: dsw.alias.label.secondary
|
|
1343
|
+
},
|
|
1344
|
+
badgeQuiet: { color: dsw.alias.label.tertiary },
|
|
1345
|
+
reset: {
|
|
1346
|
+
border: "none",
|
|
1347
|
+
background: "none",
|
|
1348
|
+
padding: 0,
|
|
1349
|
+
font: "inherit",
|
|
1350
|
+
fontSize: "12px",
|
|
1351
|
+
lineHeight: 1.5,
|
|
1352
|
+
color: dsw.alias.label.secondary,
|
|
1353
|
+
cursor: "pointer",
|
|
1354
|
+
"&:hover:not(:disabled)": { color: dsw.alias.label.primary },
|
|
1355
|
+
"&:disabled": { cursor: "default" }
|
|
1356
|
+
},
|
|
1357
|
+
input: {
|
|
1358
|
+
height: "34px",
|
|
1359
|
+
padding: "0 12px",
|
|
1360
|
+
border: `0.5px solid ${String(dsw.alias.border.l4)}`,
|
|
1361
|
+
borderRadius: "8px",
|
|
1362
|
+
background: dsw.alias.bg.layer["3"],
|
|
1363
|
+
font: "inherit",
|
|
1364
|
+
fontSize: "13px",
|
|
1365
|
+
lineHeight: 1.5,
|
|
1366
|
+
color: dsw.alias.label.primary,
|
|
1367
|
+
"&:focus-visible": {
|
|
1368
|
+
outline: "none",
|
|
1369
|
+
borderColor: dsw.alias.brand.primary
|
|
1370
|
+
},
|
|
1371
|
+
"&:disabled": {
|
|
1372
|
+
color: dsw.alias.label.tertiary,
|
|
1373
|
+
cursor: "default"
|
|
1374
|
+
},
|
|
1375
|
+
"&[aria-invalid='true']": { borderColor: dsw.alias.state.error.primary }
|
|
1376
|
+
},
|
|
1377
|
+
invalid: {
|
|
1378
|
+
margin: 0,
|
|
1379
|
+
fontSize: "12px",
|
|
1380
|
+
lineHeight: 1.5,
|
|
1381
|
+
color: dsw.alias.state.error.primary
|
|
1382
|
+
},
|
|
1383
|
+
hint: {
|
|
1384
|
+
margin: 0,
|
|
1385
|
+
fontSize: "12px",
|
|
1386
|
+
lineHeight: 1.5,
|
|
1387
|
+
color: dsw.alias.label.tertiary
|
|
1388
|
+
}
|
|
1389
|
+
};
|
|
1390
|
+
//#endregion
|
|
1391
|
+
//#region src/client/settings-form/fields.tsx
|
|
1392
|
+
const Field = styled("div")(styles$1.field);
|
|
1393
|
+
const Head = styled("div")(styles$1.head);
|
|
1394
|
+
const LabelGroup = styled("div")(styles$1.labelGroup);
|
|
1395
|
+
const GroupLabel = styled("label")(styles$1.label, styles$1.groupLabel);
|
|
1396
|
+
const HeadLabel = styled("label")(styles$1.label);
|
|
1397
|
+
const HelpButton = styled("button")(styles$1.helpButton);
|
|
1398
|
+
const Help = styled("div")(styles$1.help);
|
|
1399
|
+
const Badges = styled("span")(styles$1.badges);
|
|
1400
|
+
const NeutralBadge = styled("span")(styles$1.badge, styles$1.badgeNeutral);
|
|
1401
|
+
const QuietBadge = styled("span")(styles$1.badge, styles$1.badgeQuiet);
|
|
1402
|
+
const Reset = styled("button")(styles$1.reset);
|
|
1403
|
+
const Input = styled("input")(styles$1.input);
|
|
1404
|
+
const Invalid = styled("p")(styles$1.invalid);
|
|
1405
|
+
const Hint = styled("p")(styles$1.hint);
|
|
1406
|
+
/** 上游 icons 里的 IconInfoOutlineRegular（fill-only 几何，整份图标表不搬）。 */
|
|
1407
|
+
function InfoGlyph({ size }) {
|
|
1408
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
|
|
1409
|
+
width: size,
|
|
1410
|
+
height: size,
|
|
1411
|
+
viewBox: "0 0 14 14",
|
|
1412
|
+
fill: "none",
|
|
1413
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1414
|
+
"aria-hidden": "true",
|
|
1415
|
+
children: [
|
|
1416
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
1417
|
+
d: "M12.5757 7.00012C12.5757 3.92085 10.0794 1.42463 7.00012 1.42456C3.9208 1.42456 1.42456 3.9208 1.42456 7.00012C1.42463 10.0794 3.92085 12.5757 7.00012 12.5757C10.0793 12.5756 12.5756 10.0793 12.5757 7.00012ZM13.8002 7.00012C13.8001 10.7559 10.7559 13.8001 7.00012 13.8002C3.2443 13.8002 0.199291 10.7559 0.199219 7.00012C0.199219 3.24426 3.24426 0.199219 7.00012 0.199219C10.7559 0.199291 13.8002 3.2443 13.8002 7.00012Z",
|
|
1418
|
+
fill: "currentColor"
|
|
1419
|
+
}),
|
|
1420
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
1421
|
+
d: "M7.6127 3.18921V4.55986H6.38735V3.18921H7.6127Z",
|
|
1422
|
+
fill: "currentColor"
|
|
1423
|
+
}),
|
|
1424
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
1425
|
+
d: "M7.6127 5.68921V10.8109H6.38735V5.68921H7.6127Z",
|
|
1426
|
+
fill: "currentColor"
|
|
1427
|
+
})
|
|
1428
|
+
]
|
|
1429
|
+
});
|
|
1430
|
+
}
|
|
1431
|
+
/**
|
|
1432
|
+
* A staged value field. `numeric` only hints the keypad: which drafts a field
|
|
1433
|
+
* accepts is decided by its spec, so the control never silently rewrites what
|
|
1434
|
+
* the user typed.
|
|
1435
|
+
* @param props - the field's copy, its staged text, and the edit actions.
|
|
1436
|
+
* @returns the labelled control.
|
|
1437
|
+
*/
|
|
1438
|
+
function SettingsValueField(props) {
|
|
1439
|
+
const [helpOpen, setHelpOpen] = (0, react.useState)(false);
|
|
1440
|
+
const helpId = `${props.id}-help`;
|
|
1441
|
+
const messageId = `${props.id}-message`;
|
|
1442
|
+
const hasMessage = props.invalid || Boolean(props.hint);
|
|
1443
|
+
const description = [hasMessage ? messageId : "", helpOpen ? helpId : ""].filter(Boolean).join(" ");
|
|
1444
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Field, { children: [
|
|
1445
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Head, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LabelGroup, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupLabel, {
|
|
1446
|
+
htmlFor: props.id,
|
|
1447
|
+
children: props.label
|
|
1448
|
+
}), props.help !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HelpButton, {
|
|
1449
|
+
type: "button",
|
|
1450
|
+
"aria-label": props.help.label,
|
|
1451
|
+
"aria-expanded": helpOpen,
|
|
1452
|
+
"aria-controls": helpId,
|
|
1453
|
+
onClick: () => {
|
|
1454
|
+
setHelpOpen(!helpOpen);
|
|
1455
|
+
},
|
|
1456
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InfoGlyph, { size: 12 })
|
|
1457
|
+
}) : null] }), props.overridden ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Badges, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NeutralBadge, { children: props.overriddenLabel }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Reset, {
|
|
1458
|
+
type: "button",
|
|
1459
|
+
disabled: props.disabled,
|
|
1460
|
+
onClick: props.onReset,
|
|
1461
|
+
children: props.resetLabel
|
|
1462
|
+
})] }) : null] }),
|
|
1463
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, {
|
|
1464
|
+
id: props.id,
|
|
1465
|
+
type: "text",
|
|
1466
|
+
...props.numeric === true ? { inputMode: "numeric" } : {},
|
|
1467
|
+
...props.invalid ? { "aria-invalid": true } : {},
|
|
1468
|
+
"aria-describedby": description || void 0,
|
|
1469
|
+
value: props.text,
|
|
1470
|
+
placeholder: props.placeholder ?? "",
|
|
1471
|
+
disabled: props.disabled,
|
|
1472
|
+
onChange: (event) => {
|
|
1473
|
+
props.onEdit(event.target.value);
|
|
1474
|
+
}
|
|
1475
|
+
}),
|
|
1476
|
+
hasMessage ? props.invalid ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Invalid, {
|
|
1477
|
+
id: messageId,
|
|
1478
|
+
children: props.invalidLabel
|
|
1479
|
+
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Hint, {
|
|
1480
|
+
id: messageId,
|
|
1481
|
+
children: props.hint
|
|
1482
|
+
}) : null,
|
|
1483
|
+
props.help !== void 0 && helpOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Help, {
|
|
1484
|
+
id: helpId,
|
|
1485
|
+
role: "region",
|
|
1486
|
+
"aria-label": props.help.label,
|
|
1487
|
+
children: props.help.content
|
|
1488
|
+
}) : null
|
|
1489
|
+
] });
|
|
1490
|
+
}
|
|
1491
|
+
/**
|
|
1492
|
+
* A write-only credential control. The value never rides a response, so the
|
|
1493
|
+
* control reports only whether one is configured and starts blank; a blank
|
|
1494
|
+
* draft writes nothing, which keeps the stored key rather than clearing it.
|
|
1495
|
+
* @param props - the field's copy, its staged text, and the configured state.
|
|
1496
|
+
* @returns the labelled control.
|
|
1497
|
+
*/
|
|
1498
|
+
function SettingsSecretField(props) {
|
|
1499
|
+
const Badge = props.configured ? NeutralBadge : QuietBadge;
|
|
1500
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Field, { children: [
|
|
1501
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Head, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeadLabel, {
|
|
1502
|
+
htmlFor: props.id,
|
|
1503
|
+
children: props.label
|
|
1504
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badges, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, { children: props.stateLabel }) })] }),
|
|
1505
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, {
|
|
1506
|
+
id: props.id,
|
|
1507
|
+
type: "password",
|
|
1508
|
+
autoComplete: "off",
|
|
1509
|
+
value: props.text,
|
|
1510
|
+
disabled: props.disabled,
|
|
1511
|
+
onChange: (event) => {
|
|
1512
|
+
props.onEdit(event.target.value);
|
|
1513
|
+
}
|
|
1514
|
+
}),
|
|
1515
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Hint, { children: props.hint })
|
|
1516
|
+
] });
|
|
1517
|
+
}
|
|
1518
|
+
const styles = {
|
|
1519
|
+
form: {
|
|
1520
|
+
display: "flex",
|
|
1521
|
+
flexDirection: "column"
|
|
1522
|
+
},
|
|
1523
|
+
notice: {
|
|
1524
|
+
margin: "0 0 12px",
|
|
1525
|
+
fontSize: "12px",
|
|
1526
|
+
lineHeight: 1.5,
|
|
1527
|
+
color: dsw.alias.label.tertiary
|
|
1528
|
+
},
|
|
1529
|
+
footer: {
|
|
1530
|
+
display: "flex",
|
|
1531
|
+
alignItems: "center",
|
|
1532
|
+
gap: "8px",
|
|
1533
|
+
paddingTop: "16px"
|
|
1534
|
+
},
|
|
1535
|
+
failed: {
|
|
1536
|
+
flex: 1,
|
|
1537
|
+
minWidth: 0,
|
|
1538
|
+
margin: 0,
|
|
1539
|
+
fontSize: "12px",
|
|
1540
|
+
lineHeight: 1.5,
|
|
1541
|
+
color: "var(--dsw-alias-label-error)"
|
|
1542
|
+
},
|
|
1543
|
+
save: {
|
|
1544
|
+
appearance: "none",
|
|
1545
|
+
border: "1px solid transparent",
|
|
1546
|
+
borderRadius: "8px",
|
|
1547
|
+
padding: "5px 14px",
|
|
1548
|
+
font: "inherit",
|
|
1549
|
+
fontSize: "13px",
|
|
1550
|
+
lineHeight: 1.5,
|
|
1551
|
+
cursor: "pointer",
|
|
1552
|
+
background: dsw.alias.label.primary,
|
|
1553
|
+
color: dsw.alias.bg.layer["3"],
|
|
1554
|
+
"&:disabled": {
|
|
1555
|
+
opacity: .4,
|
|
1556
|
+
cursor: "default"
|
|
1557
|
+
},
|
|
1558
|
+
"&:focus-visible": {
|
|
1559
|
+
outline: `2px solid ${String(dsw.alias.brand.primary)}`,
|
|
1560
|
+
outlineOffset: "1px"
|
|
1561
|
+
}
|
|
1562
|
+
}
|
|
1563
|
+
};
|
|
1564
|
+
//#endregion
|
|
1565
|
+
//#region src/client/settings-form/SettingsForm.tsx
|
|
1566
|
+
const Form = styled("div")(styles.form);
|
|
1567
|
+
const Notice = styled("p")(styles.notice);
|
|
1568
|
+
const Footer = styled("div")(styles.footer);
|
|
1569
|
+
const Failed = styled("p")(styles.failed);
|
|
1570
|
+
const Save = styled("button")(styles.save);
|
|
1571
|
+
/**
|
|
1572
|
+
* Render one plugin's settings form.
|
|
1573
|
+
* @param props - the form's copy and state, its controls, and the save and discard actions.
|
|
1574
|
+
* @returns the form, or the unavailable line while the namespace is not served.
|
|
1575
|
+
*/
|
|
1576
|
+
function SettingsForm(props) {
|
|
1577
|
+
const { state, labels } = props;
|
|
1578
|
+
const discard = (0, react.useRef)(props.onDiscard);
|
|
1579
|
+
discard.current = props.onDiscard;
|
|
1580
|
+
(0, react.useEffect)(() => () => {
|
|
1581
|
+
discard.current();
|
|
1582
|
+
}, []);
|
|
1583
|
+
if (!state.available) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Notice, {
|
|
1584
|
+
role: "status",
|
|
1585
|
+
children: labels.unavailable
|
|
1586
|
+
});
|
|
1587
|
+
const blocked = !state.dirty || state.invalid || state.saving;
|
|
1588
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Form, { children: [
|
|
1589
|
+
!state.writable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Notice, {
|
|
1590
|
+
role: "status",
|
|
1591
|
+
children: labels.readOnly
|
|
1592
|
+
}) : null,
|
|
1593
|
+
props.children,
|
|
1594
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Footer, { children: [state.failed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Failed, {
|
|
1595
|
+
role: "status",
|
|
1596
|
+
children: labels.saveFailed
|
|
1597
|
+
}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Save, {
|
|
1598
|
+
type: "button",
|
|
1599
|
+
disabled: blocked,
|
|
1600
|
+
onClick: props.onSave,
|
|
1601
|
+
children: state.saving ? labels.saving : labels.save
|
|
1602
|
+
})] })
|
|
1603
|
+
] });
|
|
1604
|
+
}
|
|
1605
|
+
//#endregion
|
|
956
1606
|
//#region ../../../node_modules/.pnpm/mdast-util-to-string@4.0.0/node_modules/mdast-util-to-string/lib/index.js
|
|
957
1607
|
/**
|
|
958
1608
|
* @typedef {import('mdast').Nodes} Nodes
|
|
@@ -13752,6 +14402,10 @@ window.__ModuleLoader__.load({
|
|
|
13752
14402
|
function apply(_ctx) {}
|
|
13753
14403
|
//#endregion
|
|
13754
14404
|
exports.ReferenceMarkdown = ReferenceMarkdown;
|
|
14405
|
+
exports.SettingsForm = SettingsForm;
|
|
14406
|
+
exports.SettingsFormModel = SettingsFormModel;
|
|
14407
|
+
exports.SettingsSecretField = SettingsSecretField;
|
|
14408
|
+
exports.SettingsValueField = SettingsValueField;
|
|
13755
14409
|
exports.Styling = Styling;
|
|
13756
14410
|
exports.Token = Token;
|
|
13757
14411
|
exports.apply = apply;
|
|
@@ -13766,6 +14420,8 @@ window.__ModuleLoader__.load({
|
|
|
13766
14420
|
exports.parseReference = parseReference;
|
|
13767
14421
|
exports.parseReferenceToken = parseReferenceToken;
|
|
13768
14422
|
exports.referenceMentions = referenceMentions;
|
|
14423
|
+
exports.settingsNumberField = settingsNumberField;
|
|
14424
|
+
exports.settingsTextField = settingsTextField;
|
|
13769
14425
|
exports.styleOf = styleOf;
|
|
13770
14426
|
exports.styled = styled;
|
|
13771
14427
|
exports.styling = styling;
|