@vlian/framework 1.2.54 → 1.2.55
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/dist/analytics.umd.js +1 -1
- package/dist/index.umd.js +213 -60
- package/dist/index.umd.js.map +1 -1
- package/dist/kernel/manager/theme/ThemeManager.cjs +86 -0
- package/dist/kernel/manager/theme/ThemeManager.cjs.map +1 -0
- package/dist/kernel/manager/theme/ThemeManager.d.ts +16 -0
- package/dist/kernel/manager/theme/ThemeManager.js +76 -0
- package/dist/kernel/manager/theme/ThemeManager.js.map +1 -0
- package/dist/kernel/manager/theme/index.cjs +13 -0
- package/dist/kernel/manager/theme/index.cjs.map +1 -0
- package/dist/kernel/manager/theme/index.d.ts +1 -0
- package/dist/kernel/manager/theme/index.js +3 -0
- package/dist/kernel/manager/theme/index.js.map +1 -0
- package/dist/kernel/manager/theme/theme.dom.cjs +63 -0
- package/dist/kernel/manager/theme/theme.dom.cjs.map +1 -0
- package/dist/kernel/manager/theme/theme.dom.d.ts +3 -0
- package/dist/kernel/manager/theme/theme.dom.js +45 -0
- package/dist/kernel/manager/theme/theme.dom.js.map +1 -0
- package/dist/kernel/manager/theme/theme.persistence.cjs +59 -0
- package/dist/kernel/manager/theme/theme.persistence.cjs.map +1 -0
- package/dist/kernel/manager/theme/theme.persistence.d.ts +5 -0
- package/dist/kernel/manager/theme/theme.persistence.js +38 -0
- package/dist/kernel/manager/theme/theme.persistence.js.map +1 -0
- package/dist/kernel/manager/theme/theme.schema.cjs +124 -0
- package/dist/kernel/manager/theme/theme.schema.cjs.map +1 -0
- package/dist/kernel/manager/theme/theme.schema.d.ts +7 -0
- package/dist/kernel/manager/theme/theme.schema.js +97 -0
- package/dist/kernel/manager/theme/theme.schema.js.map +1 -0
- package/dist/kernel/manager/themeManager.cjs +2 -95
- package/dist/kernel/manager/themeManager.cjs.map +1 -1
- package/dist/kernel/manager/themeManager.d.ts +1 -15
- package/dist/kernel/manager/themeManager.js +1 -94
- package/dist/kernel/manager/themeManager.js.map +1 -1
- package/dist/state.umd.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
const VALID_THEME_MODES = new Set([
|
|
2
|
+
'light',
|
|
3
|
+
'dark',
|
|
4
|
+
'system'
|
|
5
|
+
]);
|
|
6
|
+
const TOKEN_NAME_PATTERN = /^[A-Za-z_][A-Za-z0-9_-]*$/;
|
|
7
|
+
function isPlainObject(value) {
|
|
8
|
+
return Object.prototype.toString.call(value) === '[object Object]';
|
|
9
|
+
}
|
|
10
|
+
function hasOwnProperty(value, key) {
|
|
11
|
+
return Object.prototype.hasOwnProperty.call(value, key);
|
|
12
|
+
}
|
|
13
|
+
export function cloneTheme(theme) {
|
|
14
|
+
return {
|
|
15
|
+
...theme,
|
|
16
|
+
...theme.tokens ? {
|
|
17
|
+
tokens: {
|
|
18
|
+
...theme.tokens
|
|
19
|
+
}
|
|
20
|
+
} : {}
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
export function sanitizeTokens(tokens) {
|
|
24
|
+
if (!isPlainObject(tokens)) {
|
|
25
|
+
return undefined;
|
|
26
|
+
}
|
|
27
|
+
const sanitizedTokens = {};
|
|
28
|
+
for (const [token, tokenValue] of Object.entries(tokens)){
|
|
29
|
+
if (!TOKEN_NAME_PATTERN.test(token)) {
|
|
30
|
+
continue;
|
|
31
|
+
}
|
|
32
|
+
if (typeof tokenValue === 'string' || typeof tokenValue === 'number') {
|
|
33
|
+
sanitizedTokens[token] = tokenValue;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
return Object.keys(sanitizedTokens).length > 0 ? sanitizedTokens : undefined;
|
|
37
|
+
}
|
|
38
|
+
export function normalizeTheme(value, fallback) {
|
|
39
|
+
const source = isPlainObject(value) ? value : {};
|
|
40
|
+
const mode = VALID_THEME_MODES.has(source.mode) ? source.mode : fallback.mode;
|
|
41
|
+
const primaryColor = typeof source.primaryColor === 'string' && source.primaryColor.trim() ? source.primaryColor : fallback.primaryColor;
|
|
42
|
+
const fallbackTokens = sanitizeTokens(fallback.tokens);
|
|
43
|
+
const incomingTokens = sanitizeTokens(source.tokens);
|
|
44
|
+
return {
|
|
45
|
+
mode,
|
|
46
|
+
...primaryColor ? {
|
|
47
|
+
primaryColor
|
|
48
|
+
} : {},
|
|
49
|
+
...incomingTokens || fallbackTokens ? {
|
|
50
|
+
tokens: {
|
|
51
|
+
...fallbackTokens || {},
|
|
52
|
+
...incomingTokens || {}
|
|
53
|
+
}
|
|
54
|
+
} : {}
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
export function mergeTheme(current, next) {
|
|
58
|
+
const mergedTheme = {
|
|
59
|
+
mode: hasOwnProperty(next, 'mode') && VALID_THEME_MODES.has(next.mode) ? next.mode : current.mode,
|
|
60
|
+
...hasOwnProperty(next, 'primaryColor') ? typeof next.primaryColor === 'string' && next.primaryColor.trim() ? {
|
|
61
|
+
primaryColor: next.primaryColor
|
|
62
|
+
} : {} : current.primaryColor ? {
|
|
63
|
+
primaryColor: current.primaryColor
|
|
64
|
+
} : {},
|
|
65
|
+
...hasOwnProperty(next, 'tokens') ? sanitizeTokens(next.tokens) ? {
|
|
66
|
+
tokens: sanitizeTokens(next.tokens)
|
|
67
|
+
} : {} : current.tokens ? {
|
|
68
|
+
tokens: {
|
|
69
|
+
...current.tokens
|
|
70
|
+
}
|
|
71
|
+
} : {}
|
|
72
|
+
};
|
|
73
|
+
return normalizeTheme(mergedTheme, DEFAULT_EMPTY_THEME);
|
|
74
|
+
}
|
|
75
|
+
const DEFAULT_EMPTY_THEME = {
|
|
76
|
+
mode: 'light'
|
|
77
|
+
};
|
|
78
|
+
export function isThemeEqual(left, right) {
|
|
79
|
+
if (left.mode !== right.mode || left.primaryColor !== right.primaryColor) {
|
|
80
|
+
return false;
|
|
81
|
+
}
|
|
82
|
+
const leftTokens = left.tokens || {};
|
|
83
|
+
const rightTokens = right.tokens || {};
|
|
84
|
+
const leftKeys = Object.keys(leftTokens);
|
|
85
|
+
const rightKeys = Object.keys(rightTokens);
|
|
86
|
+
if (leftKeys.length !== rightKeys.length) {
|
|
87
|
+
return false;
|
|
88
|
+
}
|
|
89
|
+
for (const key of leftKeys){
|
|
90
|
+
if (leftTokens[key] !== rightTokens[key]) {
|
|
91
|
+
return false;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
return true;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
//# sourceMappingURL=theme.schema.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/kernel/manager/theme/theme.schema.ts"],"sourcesContent":["import type { ThemeSnapshot } from '../../types';\n\nexport type ThemeListener = (next: ThemeSnapshot, prev: ThemeSnapshot) => void;\n\nconst VALID_THEME_MODES = new Set<ThemeSnapshot['mode']>(['light', 'dark', 'system']);\nconst TOKEN_NAME_PATTERN = /^[A-Za-z_][A-Za-z0-9_-]*$/;\n\nfunction isPlainObject(value: unknown): value is Record<string, unknown> {\n return Object.prototype.toString.call(value) === '[object Object]';\n}\n\nfunction hasOwnProperty<T extends object>(value: T, key: PropertyKey): boolean {\n return Object.prototype.hasOwnProperty.call(value, key);\n}\n\nexport function cloneTheme(theme: ThemeSnapshot): ThemeSnapshot {\n return {\n ...theme,\n ...(theme.tokens ? { tokens: { ...theme.tokens } } : {}),\n };\n}\n\nexport function sanitizeTokens(tokens: unknown): ThemeSnapshot['tokens'] {\n if (!isPlainObject(tokens)) {\n return undefined;\n }\n\n const sanitizedTokens: NonNullable<ThemeSnapshot['tokens']> = {};\n\n for (const [token, tokenValue] of Object.entries(tokens)) {\n if (!TOKEN_NAME_PATTERN.test(token)) {\n continue;\n }\n\n if (typeof tokenValue === 'string' || typeof tokenValue === 'number') {\n sanitizedTokens[token] = tokenValue;\n }\n }\n\n return Object.keys(sanitizedTokens).length > 0 ? sanitizedTokens : undefined;\n}\n\nexport function normalizeTheme(\n value: unknown,\n fallback: ThemeSnapshot\n): ThemeSnapshot {\n const source = isPlainObject(value) ? value : {};\n const mode = VALID_THEME_MODES.has(source.mode as ThemeSnapshot['mode'])\n ? (source.mode as ThemeSnapshot['mode'])\n : fallback.mode;\n const primaryColor = typeof source.primaryColor === 'string' && source.primaryColor.trim()\n ? source.primaryColor\n : fallback.primaryColor;\n const fallbackTokens = sanitizeTokens(fallback.tokens);\n const incomingTokens = sanitizeTokens(source.tokens);\n\n return {\n mode,\n ...(primaryColor ? { primaryColor } : {}),\n ...(incomingTokens || fallbackTokens\n ? { tokens: { ...(fallbackTokens || {}), ...(incomingTokens || {}) } }\n : {}),\n };\n}\n\nexport function mergeTheme(current: ThemeSnapshot, next: Partial<ThemeSnapshot>): ThemeSnapshot {\n const mergedTheme: ThemeSnapshot = {\n mode: hasOwnProperty(next, 'mode') && VALID_THEME_MODES.has(next.mode as ThemeSnapshot['mode'])\n ? (next.mode as ThemeSnapshot['mode'])\n : current.mode,\n ...(hasOwnProperty(next, 'primaryColor')\n ? (typeof next.primaryColor === 'string' && next.primaryColor.trim()\n ? { primaryColor: next.primaryColor }\n : {})\n : (current.primaryColor ? { primaryColor: current.primaryColor } : {})),\n ...(hasOwnProperty(next, 'tokens')\n ? (sanitizeTokens(next.tokens) ? { tokens: sanitizeTokens(next.tokens) } : {})\n : (current.tokens ? { tokens: { ...current.tokens } } : {})),\n };\n\n return normalizeTheme(mergedTheme, DEFAULT_EMPTY_THEME);\n}\n\nconst DEFAULT_EMPTY_THEME: ThemeSnapshot = { mode: 'light' };\n\nexport function isThemeEqual(left: ThemeSnapshot, right: ThemeSnapshot): boolean {\n if (left.mode !== right.mode || left.primaryColor !== right.primaryColor) {\n return false;\n }\n\n const leftTokens = left.tokens || {};\n const rightTokens = right.tokens || {};\n const leftKeys = Object.keys(leftTokens);\n const rightKeys = Object.keys(rightTokens);\n\n if (leftKeys.length !== rightKeys.length) {\n return false;\n }\n\n for (const key of leftKeys) {\n if (leftTokens[key] !== rightTokens[key]) {\n return false;\n }\n }\n\n return true;\n}\n"],"names":["VALID_THEME_MODES","Set","TOKEN_NAME_PATTERN","isPlainObject","value","Object","prototype","toString","call","hasOwnProperty","key","cloneTheme","theme","tokens","sanitizeTokens","undefined","sanitizedTokens","token","tokenValue","entries","test","keys","length","normalizeTheme","fallback","source","mode","has","primaryColor","trim","fallbackTokens","incomingTokens","mergeTheme","current","next","mergedTheme","DEFAULT_EMPTY_THEME","isThemeEqual","left","right","leftTokens","rightTokens","leftKeys","rightKeys"],"mappings":"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"}
|
|
@@ -5,102 +5,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
Object.defineProperty(exports, "ThemeManager", {
|
|
6
6
|
enumerable: true,
|
|
7
7
|
get: function() {
|
|
8
|
-
return ThemeManager;
|
|
8
|
+
return _theme.ThemeManager;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
-
const
|
|
12
|
-
function _define_property(obj, key, value) {
|
|
13
|
-
if (key in obj) {
|
|
14
|
-
Object.defineProperty(obj, key, {
|
|
15
|
-
value: value,
|
|
16
|
-
enumerable: true,
|
|
17
|
-
configurable: true,
|
|
18
|
-
writable: true
|
|
19
|
-
});
|
|
20
|
-
} else {
|
|
21
|
-
obj[key] = value;
|
|
22
|
-
}
|
|
23
|
-
return obj;
|
|
24
|
-
}
|
|
25
|
-
function applyThemeToDocument(theme) {
|
|
26
|
-
if (typeof document === 'undefined') {
|
|
27
|
-
return;
|
|
28
|
-
}
|
|
29
|
-
const root = document.documentElement;
|
|
30
|
-
root.classList.remove('light', 'dark');
|
|
31
|
-
const resolvedMode = theme.mode === 'system' ? typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' : theme.mode;
|
|
32
|
-
root.classList.add(resolvedMode);
|
|
33
|
-
if (theme.primaryColor) {
|
|
34
|
-
root.style.setProperty('--app-primary-color', theme.primaryColor);
|
|
35
|
-
}
|
|
36
|
-
if (theme.tokens) {
|
|
37
|
-
Object.entries(theme.tokens).forEach(([token, tokenValue])=>{
|
|
38
|
-
root.style.setProperty(`--${token}`, String(tokenValue));
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
let ThemeManager = class ThemeManager {
|
|
43
|
-
async initialize(context) {
|
|
44
|
-
this.config = context.config.theme;
|
|
45
|
-
this.theme = {
|
|
46
|
-
..._constants.DEFAULT_THEME,
|
|
47
|
-
...this.config.initial || {}
|
|
48
|
-
};
|
|
49
|
-
this.cache = context.cacheManager;
|
|
50
|
-
const { key = "vlian:kernel:theme" } = this.config.persistence || {};
|
|
51
|
-
const persisted = await this.cache.get(key, {
|
|
52
|
-
defaultValue: this.theme
|
|
53
|
-
});
|
|
54
|
-
if (persisted !== null) {
|
|
55
|
-
this.theme = {
|
|
56
|
-
...this.theme,
|
|
57
|
-
...persisted
|
|
58
|
-
};
|
|
59
|
-
} else {
|
|
60
|
-
await this.cache.set(key, persisted);
|
|
61
|
-
}
|
|
62
|
-
applyThemeToDocument(this.theme);
|
|
63
|
-
}
|
|
64
|
-
getTheme() {
|
|
65
|
-
return {
|
|
66
|
-
...this.theme
|
|
67
|
-
};
|
|
68
|
-
}
|
|
69
|
-
subscribe(listener) {
|
|
70
|
-
this.listeners.add(listener);
|
|
71
|
-
return ()=>{
|
|
72
|
-
this.listeners.delete(listener);
|
|
73
|
-
};
|
|
74
|
-
}
|
|
75
|
-
emit(next, prev) {
|
|
76
|
-
this.listeners.forEach((listener)=>{
|
|
77
|
-
listener({
|
|
78
|
-
...next
|
|
79
|
-
}, {
|
|
80
|
-
...prev
|
|
81
|
-
});
|
|
82
|
-
});
|
|
83
|
-
}
|
|
84
|
-
async setTheme(nextTheme) {
|
|
85
|
-
const prev = this.theme;
|
|
86
|
-
this.theme = {
|
|
87
|
-
...this.theme,
|
|
88
|
-
...nextTheme
|
|
89
|
-
};
|
|
90
|
-
applyThemeToDocument(this.theme);
|
|
91
|
-
const { key = "vlian:kernel:theme" } = this.config.persistence || {};
|
|
92
|
-
await this.cache?.set(key, this.theme);
|
|
93
|
-
this.emit(this.theme, prev);
|
|
94
|
-
}
|
|
95
|
-
getSnapshot() {
|
|
96
|
-
return this.getTheme();
|
|
97
|
-
}
|
|
98
|
-
constructor(){
|
|
99
|
-
_define_property(this, "theme", _constants.DEFAULT_THEME);
|
|
100
|
-
_define_property(this, "config", _constants.DEFAULT_CONFIG.theme);
|
|
101
|
-
_define_property(this, "listeners", new Set());
|
|
102
|
-
_define_property(this, "cache", undefined);
|
|
103
|
-
}
|
|
104
|
-
};
|
|
11
|
+
const _theme = require("./theme");
|
|
105
12
|
|
|
106
13
|
//# sourceMappingURL=themeManager.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/kernel/manager/themeManager.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../../../src/kernel/manager/themeManager.ts"],"sourcesContent":["export { ThemeManager } from './theme';\n"],"names":["ThemeManager"],"mappings":";;;;+BAASA;;;eAAAA,mBAAY;;;uBAAQ"}
|
|
@@ -1,15 +1 @@
|
|
|
1
|
-
|
|
2
|
-
type ThemeListener = (next: ThemeSnapshot, prev: ThemeSnapshot) => void;
|
|
3
|
-
export declare class ThemeManager implements KernelManager<ThemeSnapshot> {
|
|
4
|
-
private theme;
|
|
5
|
-
private config;
|
|
6
|
-
private listeners;
|
|
7
|
-
private cache;
|
|
8
|
-
initialize(context: KernelManagerContext): Promise<void>;
|
|
9
|
-
getTheme(): ThemeSnapshot;
|
|
10
|
-
subscribe(listener: ThemeListener): () => void;
|
|
11
|
-
private emit;
|
|
12
|
-
setTheme(nextTheme: ThemeSnapshot): Promise<void>;
|
|
13
|
-
getSnapshot(): ThemeSnapshot;
|
|
14
|
-
}
|
|
15
|
-
export {};
|
|
1
|
+
export { ThemeManager } from './theme';
|
|
@@ -1,96 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
if (key in obj) {
|
|
3
|
-
Object.defineProperty(obj, key, {
|
|
4
|
-
value: value,
|
|
5
|
-
enumerable: true,
|
|
6
|
-
configurable: true,
|
|
7
|
-
writable: true
|
|
8
|
-
});
|
|
9
|
-
} else {
|
|
10
|
-
obj[key] = value;
|
|
11
|
-
}
|
|
12
|
-
return obj;
|
|
13
|
-
}
|
|
14
|
-
import { DEFAULT_CONFIG, DEFAULT_THEME } from "../constants";
|
|
15
|
-
function applyThemeToDocument(theme) {
|
|
16
|
-
if (typeof document === 'undefined') {
|
|
17
|
-
return;
|
|
18
|
-
}
|
|
19
|
-
const root = document.documentElement;
|
|
20
|
-
root.classList.remove('light', 'dark');
|
|
21
|
-
const resolvedMode = theme.mode === 'system' ? typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' : theme.mode;
|
|
22
|
-
root.classList.add(resolvedMode);
|
|
23
|
-
if (theme.primaryColor) {
|
|
24
|
-
root.style.setProperty('--app-primary-color', theme.primaryColor);
|
|
25
|
-
}
|
|
26
|
-
if (theme.tokens) {
|
|
27
|
-
Object.entries(theme.tokens).forEach(([token, tokenValue])=>{
|
|
28
|
-
root.style.setProperty(`--${token}`, String(tokenValue));
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
export class ThemeManager {
|
|
33
|
-
async initialize(context) {
|
|
34
|
-
this.config = context.config.theme;
|
|
35
|
-
this.theme = {
|
|
36
|
-
...DEFAULT_THEME,
|
|
37
|
-
...this.config.initial || {}
|
|
38
|
-
};
|
|
39
|
-
this.cache = context.cacheManager;
|
|
40
|
-
const { key = "vlian:kernel:theme" } = this.config.persistence || {};
|
|
41
|
-
const persisted = await this.cache.get(key, {
|
|
42
|
-
defaultValue: this.theme
|
|
43
|
-
});
|
|
44
|
-
if (persisted !== null) {
|
|
45
|
-
this.theme = {
|
|
46
|
-
...this.theme,
|
|
47
|
-
...persisted
|
|
48
|
-
};
|
|
49
|
-
} else {
|
|
50
|
-
await this.cache.set(key, persisted);
|
|
51
|
-
}
|
|
52
|
-
applyThemeToDocument(this.theme);
|
|
53
|
-
}
|
|
54
|
-
getTheme() {
|
|
55
|
-
return {
|
|
56
|
-
...this.theme
|
|
57
|
-
};
|
|
58
|
-
}
|
|
59
|
-
subscribe(listener) {
|
|
60
|
-
this.listeners.add(listener);
|
|
61
|
-
return ()=>{
|
|
62
|
-
this.listeners.delete(listener);
|
|
63
|
-
};
|
|
64
|
-
}
|
|
65
|
-
emit(next, prev) {
|
|
66
|
-
this.listeners.forEach((listener)=>{
|
|
67
|
-
listener({
|
|
68
|
-
...next
|
|
69
|
-
}, {
|
|
70
|
-
...prev
|
|
71
|
-
});
|
|
72
|
-
});
|
|
73
|
-
}
|
|
74
|
-
async setTheme(nextTheme) {
|
|
75
|
-
const prev = this.theme;
|
|
76
|
-
this.theme = {
|
|
77
|
-
...this.theme,
|
|
78
|
-
...nextTheme
|
|
79
|
-
};
|
|
80
|
-
applyThemeToDocument(this.theme);
|
|
81
|
-
const { key = "vlian:kernel:theme" } = this.config.persistence || {};
|
|
82
|
-
await this.cache?.set(key, this.theme);
|
|
83
|
-
this.emit(this.theme, prev);
|
|
84
|
-
}
|
|
85
|
-
getSnapshot() {
|
|
86
|
-
return this.getTheme();
|
|
87
|
-
}
|
|
88
|
-
constructor(){
|
|
89
|
-
_define_property(this, "theme", DEFAULT_THEME);
|
|
90
|
-
_define_property(this, "config", DEFAULT_CONFIG.theme);
|
|
91
|
-
_define_property(this, "listeners", new Set());
|
|
92
|
-
_define_property(this, "cache", undefined);
|
|
93
|
-
}
|
|
94
|
-
}
|
|
1
|
+
export { ThemeManager } from "./theme";
|
|
95
2
|
|
|
96
3
|
//# sourceMappingURL=themeManager.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/kernel/manager/themeManager.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../../../src/kernel/manager/themeManager.ts"],"sourcesContent":["export { ThemeManager } from './theme';\n"],"names":["ThemeManager"],"mappings":"AAAA,SAASA,YAAY,QAAQ,UAAU"}
|
package/dist/state.umd.js
CHANGED