@lmzhen/dsh-evolution-settings-ui 0.14.1 → 0.15.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/lib/client.js +49 -30
- package/lib/types/client/styles.d.ts +0 -12
- package/lib/types/client/tokens.d.ts +25 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -32,7 +32,7 @@ The props type is spelled the way the renderer derives it — `Omit<ParamCardFac
|
|
|
32
32
|
|
|
33
33
|
## Styling
|
|
34
34
|
|
|
35
|
-
The design system's CSS is not exported to packages outside the platform repository, so this bundle carries its own stylesheet and injects it once behind a `<style data-plugin-css="…">` tag — the mechanism the platform's own client bundles use. Every rule reads a `--dsw-alias-*` design token, so light and dark follow the theme without a colour of our own, and the field metrics (12px padding, 6px gap, 13px label, 12px hint) copy the platform's settings fields.
|
|
35
|
+
The card draws from the FAMILY's scale, not from magic numbers: `src/client/tokens.ts` is generated from `packages/scripts/client-tokens.json` (identical bytes in the history panel, which shares it), and its type steps are relative to the surface that hosts the card — `calc(1em - 2px)` for a hint, `calc(1em + 2px)` for the title — so the card no longer resizes itself with the `--dsh-content-font-size*` setting, which is documented as affecting conversation content only and which the platform's own surfaces never read. Fields take the family's single focus ring (`outline: var(--evo-focus-ring)`), the same one the history panel draws, instead of a recoloured border. The design system's CSS is not exported to packages outside the platform repository, so this bundle carries its own stylesheet and injects it once behind a `<style data-plugin-css="…">` tag — the mechanism the platform's own client bundles use. Every rule reads a `--dsw-alias-*` design token, so light and dark follow the theme without a colour of our own, and the field metrics (12px padding, 6px gap, 13px label, 12px hint) copy the platform's settings fields.
|
|
36
36
|
|
|
37
37
|
## Copy and locale
|
|
38
38
|
|
package/lib/client.js
CHANGED
|
@@ -755,59 +755,78 @@ window.__ModuleLoader__.load({
|
|
|
755
755
|
}, face.renderSlot(CARD_SLOT, {}, { entryKey: section_.namespace }))));
|
|
756
756
|
}
|
|
757
757
|
//#endregion
|
|
758
|
+
//#region src/client/tokens.ts
|
|
759
|
+
/**
|
|
760
|
+
* The scale, declared on one element so it never leaks into the host shell.
|
|
761
|
+
* @param scope - the selector the custom properties are declared on.
|
|
762
|
+
* @returns the declaration block to put in the stylesheet.
|
|
763
|
+
*/
|
|
764
|
+
function tokenVars(scope) {
|
|
765
|
+
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}";
|
|
766
|
+
}
|
|
767
|
+
//#endregion
|
|
758
768
|
//#region src/client/styles.ts
|
|
759
769
|
/**
|
|
760
770
|
* The section's stylesheet.
|
|
761
771
|
*
|
|
762
772
|
* The platform's own client bundles compile CSS Modules into a string and inject
|
|
763
|
-
* it once behind a
|
|
773
|
+
* it once behind a `<style data-plugin-css="<pkg>/<file>">` tag; this bundle is
|
|
764
774
|
* built outside that pipeline, so it carries its own string and injects it the
|
|
765
|
-
* same way. Every
|
|
766
|
-
* the section follows the light and dark themes without owning a colour
|
|
767
|
-
*
|
|
768
|
-
*
|
|
775
|
+
* same way. Every colour reads the platform's design tokens (`--dsw-alias-*`), so
|
|
776
|
+
* the section follows the light and dark themes without owning a colour; every
|
|
777
|
+
* type step and geometry value reads the family scale (`./tokens.ts`, generated
|
|
778
|
+
* from `packages/scripts/client-tokens.json`), the same one the history panel
|
|
779
|
+
* draws from — before it existed this card rooted its type in
|
|
780
|
+
* `--dsh-content-font-size*` (the CONVERSATION content size, which the platform's
|
|
781
|
+
* own surfaces never read) and wrote its own paddings, so the family's two client
|
|
782
|
+
* faces drifted apart (W2/W5/W6).
|
|
783
|
+
*
|
|
784
|
+
* The field metrics (8px/10px input padding, 8px radius, 12px/6px paddings and
|
|
785
|
+
* gaps) follow the platform's own settings fields: `ui-primitives/Input.module.css`
|
|
786
|
+
* and `ui-settings-plugins/.../fields.module.css` both use an 8px field radius.
|
|
769
787
|
* @module @lmzhen/dsh-evolution-settings-ui/client
|
|
770
788
|
*/
|
|
771
789
|
/** Tag id that makes the injection idempotent. */
|
|
772
790
|
const CSS_TAG_ID = "@lmzhen/dsh-evolution-settings-ui/settings.css";
|
|
773
791
|
/** The stylesheet the section injects once. */
|
|
774
792
|
const CSS = [
|
|
793
|
+
tokenVars(".evolution-params"),
|
|
775
794
|
".evolution-params{display:flex;flex-direction:column}",
|
|
776
|
-
".evolution-params-title{margin:0 0
|
|
777
|
-
".evolution-params-subtitle{margin:0 0
|
|
778
|
-
".evolution-param-card{border
|
|
779
|
-
".evolution-param-head{display:flex;align-items:center;gap:
|
|
795
|
+
".evolution-params-title{margin:0 0 var(--evo-space-4);color:var(--dsw-alias-label-primary);font-size:var(--evo-type-lg);font-weight:600;line-height:var(--evo-leading-base)}",
|
|
796
|
+
".evolution-params-subtitle{margin:0 0 var(--evo-space-16);color:var(--dsw-alias-label-tertiary);font-size:var(--evo-type-xs);line-height:var(--evo-leading-base)}",
|
|
797
|
+
".evolution-param-card{border:var(--evo-hairline-width) solid var(--dsw-alias-border-l2);border-radius:var(--evo-radius-control);background:var(--dsw-alias-bg-layer-1);margin-bottom:var(--evo-space-12)}",
|
|
798
|
+
".evolution-param-head{display:flex;align-items:center;gap:var(--evo-space-8);width:100%;padding:var(--evo-space-12) var(--evo-space-14);background:none;border:0;text-align:left;cursor:pointer;color:inherit;font:inherit}",
|
|
780
799
|
".evolution-param-head:hover{background:var(--dsw-alias-interactive-bg-hover)}",
|
|
781
|
-
".evolution-param-card-title{flex:1;min-width:0;color:var(--dsw-alias-label-primary);font-size:var(--
|
|
782
|
-
".evolution-param-count{color:var(--dsw-alias-brand-primary);font-size:
|
|
783
|
-
".evolution-param-chevron{color:var(--dsw-alias-label-tertiary);font-size:
|
|
784
|
-
".evolution-param-body{padding:0
|
|
785
|
-
".evolution-param-field{display:flex;flex-direction:column;gap:
|
|
786
|
-
".evolution-param-field+.evolution-param-field{border-top
|
|
787
|
-
".evolution-param-label{display:flex;align-items:center;gap:
|
|
800
|
+
".evolution-param-card-title{flex:1;min-width:0;color:var(--dsw-alias-label-primary);font-size:var(--evo-type-sm);font-weight:500;line-height:var(--evo-leading-base)}",
|
|
801
|
+
".evolution-param-count{color:var(--dsw-alias-brand-primary);font-size:var(--evo-type-xs);line-height:var(--evo-leading-base)}",
|
|
802
|
+
".evolution-param-chevron{color:var(--dsw-alias-label-tertiary);font-size:var(--evo-type-xs);line-height:var(--evo-leading-base)}",
|
|
803
|
+
".evolution-param-body{padding:0 var(--evo-space-14) var(--evo-space-12);border-top:var(--evo-hairline-width) solid var(--dsw-alias-border-l2)}",
|
|
804
|
+
".evolution-param-field{display:flex;flex-direction:column;gap:var(--evo-space-6);padding:var(--evo-space-12) 0}",
|
|
805
|
+
".evolution-param-field+.evolution-param-field{border-top:var(--evo-hairline-width) solid var(--dsw-alias-border-l2)}",
|
|
806
|
+
".evolution-param-label{display:flex;align-items:center;gap:var(--evo-space-6);color:var(--dsw-alias-label-primary);font-size:var(--evo-type-body);font-weight:500;line-height:var(--evo-leading-base)}",
|
|
788
807
|
".evolution-param-unit{color:var(--dsw-alias-label-tertiary);font-weight:400}",
|
|
789
|
-
".evolution-param-hint{margin:0;color:var(--dsw-alias-label-tertiary);font-size:var(--
|
|
790
|
-
".evolution-param-value{color:var(--dsw-alias-label-secondary);font-size:
|
|
791
|
-
".evolution-param-input{width:100%;box-sizing:border-box;padding:
|
|
792
|
-
".evolution-param-input:focus{outline:
|
|
808
|
+
".evolution-param-hint{margin:0;color:var(--dsw-alias-label-tertiary);font-size:var(--evo-type-sm);line-height:var(--evo-leading-base)}",
|
|
809
|
+
".evolution-param-value{color:var(--dsw-alias-label-secondary);font-size:var(--evo-type-xs);line-height:var(--evo-leading-base)}",
|
|
810
|
+
".evolution-param-input{width:100%;box-sizing:border-box;padding:var(--evo-space-8) 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-size:var(--evo-type-body);line-height:var(--evo-leading-base)}",
|
|
811
|
+
".evolution-param-input:focus{outline:var(--evo-focus-ring);outline-offset:var(--evo-focus-offset)}",
|
|
793
812
|
".evolution-param-input:disabled{color:var(--dsw-alias-label-dimmed);cursor:default}",
|
|
794
|
-
".evolution-param-source{display:inline-flex;align-items:center;height:
|
|
813
|
+
".evolution-param-source{display:inline-flex;align-items:center;height:var(--evo-space-20);padding:0 var(--evo-space-6);border-radius:var(--evo-radius-chip);background:var(--dsw-alias-bg-layer-3);color:var(--dsw-alias-label-secondary);font-size:var(--evo-type-xs);line-height:var(--evo-space-20)}",
|
|
795
814
|
".evolution-param-source[data-user=\"true\"]{background:var(--dsw-alias-brand-primary);color:var(--dsw-alias-label-primary-foreground)}",
|
|
796
|
-
".evolution-param-actions{display:flex;justify-content:flex-end;gap:
|
|
797
|
-
".evolution-param-button{padding:
|
|
815
|
+
".evolution-param-actions{display:flex;justify-content:flex-end;gap:var(--evo-space-8);padding-top:var(--evo-space-12)}",
|
|
816
|
+
".evolution-param-button{padding:var(--evo-space-6) var(--evo-space-12);border:var(--evo-hairline-width) solid var(--dsw-alias-border-l2);border-radius:var(--evo-radius-control);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);font-size:var(--evo-type-sm);line-height:var(--evo-leading-base);cursor:pointer}",
|
|
798
817
|
".evolution-param-button:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}",
|
|
799
818
|
".evolution-param-button[data-primary=\"true\"]{background:var(--dsw-alias-button-primary-fill);color:var(--dsw-alias-label-primary-foreground);border-color:transparent}",
|
|
800
819
|
".evolution-param-button[data-primary=\"true\"]:hover:not(:disabled){background:var(--dsw-alias-button-primary-hover)}",
|
|
801
820
|
".evolution-param-button:disabled{color:var(--dsw-alias-label-dimmed);cursor:default}",
|
|
802
|
-
".evolution-param-select{width:100%;box-sizing:border-box;padding:
|
|
803
|
-
".evolution-param-select:focus{outline:
|
|
821
|
+
".evolution-param-select{width:100%;box-sizing:border-box;padding:var(--evo-space-8) 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-size:var(--evo-type-sm);line-height:var(--evo-leading-base)}",
|
|
822
|
+
".evolution-param-select:focus{outline:var(--evo-focus-ring);outline-offset:var(--evo-focus-offset)}",
|
|
804
823
|
".evolution-param-select:disabled{color:var(--dsw-alias-label-dimmed);cursor:default}",
|
|
805
|
-
".evolution-param-check{width:
|
|
824
|
+
".evolution-param-check{width:var(--evo-space-16);height:var(--evo-space-16);margin:0;accent-color:var(--dsw-alias-brand-primary);cursor:pointer}",
|
|
806
825
|
".evolution-param-check:disabled{cursor:default;opacity:.5}",
|
|
807
|
-
".evolution-param-footer{display:flex;justify-content:flex-end;gap:
|
|
808
|
-
".evolution-param-note{margin:0;color:var(--dsw-alias-label-tertiary);font-size:
|
|
809
|
-
".evolution-param-error{margin:0;color:var(--dsw-alias-state-error-primary);font-size:
|
|
810
|
-
].join("");
|
|
826
|
+
".evolution-param-footer{display:flex;justify-content:flex-end;gap:var(--evo-space-8);padding:var(--evo-space-12) 0 0;border-top:var(--evo-hairline-width) solid var(--dsw-alias-border-l2)}",
|
|
827
|
+
".evolution-param-note{margin:0;color:var(--dsw-alias-label-tertiary);font-size:var(--evo-type-xs);line-height:var(--evo-leading-base)}",
|
|
828
|
+
".evolution-param-error{margin:0;color:var(--dsw-alias-state-error-primary);font-size:var(--evo-type-xs);line-height:var(--evo-leading-base)}"
|
|
829
|
+
].join("\n");
|
|
811
830
|
/**
|
|
812
831
|
* Inject the stylesheet once per document.
|
|
813
832
|
* @param host - the document to inject into; defaults to the global one.
|
|
@@ -1,15 +1,3 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* The section's stylesheet.
|
|
3
|
-
*
|
|
4
|
-
* The platform's own client bundles compile CSS Modules into a string and inject
|
|
5
|
-
* it once behind a \`<style data-plugin-css="<pkg>/<file>">\` tag; this bundle is
|
|
6
|
-
* built outside that pipeline, so it carries its own string and injects it the
|
|
7
|
-
* same way. Every rule reads the platform's design tokens (\`--dsw-alias-*\`), so
|
|
8
|
-
* the section follows the light and dark themes without owning a colour, and the
|
|
9
|
-
* field metrics (12px/6px padding-gap, 13px label, 12px hint) match the ones the
|
|
10
|
-
* platform's own settings fields use.
|
|
11
|
-
* @module @lmzhen/dsh-evolution-settings-ui/client
|
|
12
|
-
*/
|
|
13
1
|
/** Tag id that makes the injection idempotent. */
|
|
14
2
|
export declare const CSS_TAG_ID = "@lmzhen/dsh-evolution-settings-ui/settings.css";
|
|
15
3
|
/** The stylesheet the section injects once. */
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The family client scale - GENERATED from packages/scripts/client-tokens.json. Do not edit.
|
|
3
|
+
*
|
|
4
|
+
* Both browser halves of the family carry this file with identical bytes, because the scale is one
|
|
5
|
+
* fact: `verify-client-tokens.mjs` (a gate step) fails when either copy drifts from the source. The
|
|
6
|
+
* scale cannot be shared at runtime - a browser half may not import evolution-core, since every
|
|
7
|
+
* `@deepseek-ai/*` specifier stays external in the client build and the platform module table has no
|
|
8
|
+
* row for it - so the values are generated into each package instead.
|
|
9
|
+
*
|
|
10
|
+
* Usage: put `tokenVars(...)` for your root class in the package stylesheet, then read
|
|
11
|
+
* `var(--evo-group-name)` in its rules.
|
|
12
|
+
* Regenerate with: node packages/scripts/gen-client-tokens.mjs packages
|
|
13
|
+
* @module @deepseek-ai/dsh-evolution-client-scale
|
|
14
|
+
*/
|
|
15
|
+
/** Every custom property of the scale, in the source order. */
|
|
16
|
+
export declare const TOKENS: Readonly<Record<string, string>>;
|
|
17
|
+
/** The declarations, without a selector. */
|
|
18
|
+
export declare const TOKEN_CSS: string;
|
|
19
|
+
/**
|
|
20
|
+
* The scale, declared on one element so it never leaks into the host shell.
|
|
21
|
+
* @param scope - the selector the custom properties are declared on.
|
|
22
|
+
* @returns the declaration block to put in the stylesheet.
|
|
23
|
+
*/
|
|
24
|
+
export declare function tokenVars(scope: string): string;
|
|
25
|
+
//# sourceMappingURL=tokens.d.ts.map
|
package/package.json
CHANGED