@kilivi/payloadcms-theme-management 0.1.6 → 0.1.7

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.
Files changed (93) hide show
  1. package/README.md +97 -97
  2. package/dist/components/ServerThemeInjector.d.ts +1 -1
  3. package/dist/components/ServerThemeInjector.d.ts.map +1 -1
  4. package/dist/components/{ServerThemeInjector.jsx → ServerThemeInjector.js} +50 -37
  5. package/dist/components/ServerThemeInjector.js.map +1 -0
  6. package/dist/components/ThemePreview.js +318 -0
  7. package/dist/components/ThemePreview.js.map +1 -0
  8. package/dist/components/typographyPreviewUtils.js +12 -17
  9. package/dist/components/typographyPreviewUtils.js.map +1 -1
  10. package/dist/constants/themeFonts.js +94 -24
  11. package/dist/constants/themeFonts.js.map +1 -1
  12. package/dist/fields/ColorPickerField.js +332 -0
  13. package/dist/fields/ColorPickerField.js.map +1 -0
  14. package/dist/fields/RadiusField.js +174 -0
  15. package/dist/fields/RadiusField.js.map +1 -0
  16. package/dist/fields/ThemeColorPickerField.css +138 -138
  17. package/dist/fields/ThemeColorPickerField.js +163 -0
  18. package/dist/fields/ThemeColorPickerField.js.map +1 -0
  19. package/dist/fields/ThemePreviewField.js +558 -0
  20. package/dist/fields/ThemePreviewField.js.map +1 -0
  21. package/dist/fields/ThemeTokenSelectField.js +209 -0
  22. package/dist/fields/ThemeTokenSelectField.js.map +1 -0
  23. package/dist/fields/colorModeFields.js +167 -73
  24. package/dist/fields/colorModeFields.js.map +1 -1
  25. package/dist/fields/themeConfigurationField.d.ts +1 -1
  26. package/dist/fields/themeConfigurationField.d.ts.map +1 -1
  27. package/dist/fields/themeConfigurationField.js +227 -134
  28. package/dist/fields/themeConfigurationField.js.map +1 -1
  29. package/dist/index.d.ts +17 -16
  30. package/dist/index.d.ts.map +1 -1
  31. package/dist/index.js +52 -52
  32. package/dist/index.js.map +1 -1
  33. package/dist/payload-types.js +5 -5
  34. package/dist/payload-types.js.map +1 -1
  35. package/dist/plugin.d.ts +1 -2
  36. package/dist/plugin.d.ts.map +1 -1
  37. package/dist/plugin.js +2 -1
  38. package/dist/plugin.js.map +1 -1
  39. package/dist/presets.js +66 -65
  40. package/dist/presets.js.map +1 -1
  41. package/dist/providers/Theme/index.d.ts +1 -1
  42. package/dist/providers/Theme/index.d.ts.map +1 -1
  43. package/dist/providers/Theme/{index.jsx → index.js} +61 -31
  44. package/dist/providers/Theme/index.js.map +1 -0
  45. package/dist/providers/Theme/shared.d.ts +1 -1
  46. package/dist/providers/Theme/shared.d.ts.map +1 -1
  47. package/dist/providers/Theme/shared.js +34 -9
  48. package/dist/providers/Theme/shared.js.map +1 -1
  49. package/dist/providers/Theme/themeConfig.d.ts +1 -1
  50. package/dist/providers/Theme/themeConfig.d.ts.map +1 -1
  51. package/dist/providers/Theme/themeConfig.js +37 -36
  52. package/dist/providers/Theme/themeConfig.js.map +1 -1
  53. package/dist/providers/Theme/types.js +15 -13
  54. package/dist/providers/Theme/types.js.map +1 -1
  55. package/dist/server.d.ts +2 -2
  56. package/dist/server.d.ts.map +1 -1
  57. package/dist/server.js +3 -2
  58. package/dist/server.js.map +1 -1
  59. package/dist/src/--verbose/dist/fields/ThemeColorPickerField.scss +138 -0
  60. package/dist/src/dist/fields/ThemeColorPickerField.scss +138 -0
  61. package/dist/types.d.ts +2 -2
  62. package/dist/types.d.ts.map +1 -1
  63. package/dist/types.js +2 -1
  64. package/dist/types.js.map +1 -1
  65. package/dist/utils/resolveThemeConfiguration.d.ts +3 -3
  66. package/dist/utils/resolveThemeConfiguration.d.ts.map +1 -1
  67. package/dist/utils/resolveThemeConfiguration.js +53 -34
  68. package/dist/utils/resolveThemeConfiguration.js.map +1 -1
  69. package/dist/utils/themeAssets.d.ts +1 -1
  70. package/dist/utils/themeAssets.d.ts.map +1 -1
  71. package/dist/utils/themeAssets.js +4 -4
  72. package/dist/utils/themeAssets.js.map +1 -1
  73. package/dist/utils/themeColors.js +95 -41
  74. package/dist/utils/themeColors.js.map +1 -1
  75. package/dist/utils/themeUtils.d.ts +2 -2
  76. package/dist/utils/themeUtils.d.ts.map +1 -1
  77. package/dist/utils/themeUtils.js +38 -53
  78. package/dist/utils/themeUtils.js.map +1 -1
  79. package/package.json +13 -5
  80. package/dist/components/ServerThemeInjector.jsx.map +0 -1
  81. package/dist/components/ThemePreview.jsx +0 -231
  82. package/dist/components/ThemePreview.jsx.map +0 -1
  83. package/dist/fields/ColorPickerField.jsx +0 -205
  84. package/dist/fields/ColorPickerField.jsx.map +0 -1
  85. package/dist/fields/RadiusField.jsx +0 -123
  86. package/dist/fields/RadiusField.jsx.map +0 -1
  87. package/dist/fields/ThemeColorPickerField.jsx +0 -110
  88. package/dist/fields/ThemeColorPickerField.jsx.map +0 -1
  89. package/dist/fields/ThemePreviewField.jsx +0 -420
  90. package/dist/fields/ThemePreviewField.jsx.map +0 -1
  91. package/dist/fields/ThemeTokenSelectField.jsx +0 -151
  92. package/dist/fields/ThemeTokenSelectField.jsx.map +0 -1
  93. package/dist/providers/Theme/index.jsx.map +0 -1
@@ -1,8 +1,7 @@
1
- import { borderRadiusPresets } from '@/providers/Theme/themeConfig';
2
- /**
3
- * Generates CSS custom properties from theme configuration
4
- */
5
- export function generateThemeCSS(config) {
1
+ import { borderRadiusPresets } from '../providers/Theme/themeConfig.js';
2
+ /**
3
+ * Generates CSS custom properties from theme configuration
4
+ */ export function generateThemeCSS(config) {
6
5
  const cssRules = [];
7
6
  const customization = config.customization;
8
7
  const themeSelector = config.theme ? `:root[data-theme='${config.theme}']` : ':root';
@@ -23,23 +22,21 @@ export function generateThemeCSS(config) {
23
22
  appendCustomCSS(cssRules, customization);
24
23
  return cssRules.join('\n');
25
24
  }
26
- /**
27
- * Determines if a color is light or dark
28
- */
29
- function isLightBackground(color) {
25
+ /**
26
+ * Determines if a color is light or dark
27
+ */ function isLightBackground(color) {
30
28
  // Simple heuristic: if it contains 'white', '#fff', or high RGB values, it's light
31
29
  const lightPatterns = [
32
30
  /white/i,
33
31
  /#f{3,6}/i,
34
32
  /rgb\s*\(\s*([2-9]\d{2}|1[5-9]\d|1\d{2}),/,
35
- /hsl\s*\([^)]*,\s*[^,)]*,\s*([7-9]\d|100)%\)/,
33
+ /hsl\s*\([^)]*,\s*[^,)]*,\s*([7-9]\d|100)%\)/
36
34
  ];
37
- return lightPatterns.some((pattern) => pattern.test(color));
35
+ return lightPatterns.some((pattern)=>pattern.test(color));
38
36
  }
39
- /**
40
- * Generate theme styles for use in components
41
- */
42
- export function getThemeStyles(config) {
37
+ /**
38
+ * Generate theme styles for use in components
39
+ */ export function getThemeStyles(config) {
43
40
  const styles = {};
44
41
  const customization = config.customization;
45
42
  applyCustomizationStyleOverrides(styles, customization);
@@ -47,8 +44,7 @@ export function getThemeStyles(config) {
47
44
  return styles;
48
45
  }
49
46
  function applyCustomizationRootRules(rules, customization) {
50
- if (!customization)
51
- return;
47
+ if (!customization) return;
52
48
  if (customization.primaryColor) {
53
49
  rules.push(` --primary-custom: ${customization.primaryColor};`);
54
50
  }
@@ -65,13 +61,11 @@ function applyCustomizationRootRules(rules, customization) {
65
61
  }
66
62
  }
67
63
  function applyBorderRadiusRule(rules, config) {
68
- if (!config.borderRadius)
69
- return;
64
+ if (!config.borderRadius) return;
70
65
  const preset = borderRadiusPresets[config.borderRadius];
71
- if (!preset)
72
- return;
66
+ if (!preset) return;
73
67
  const cssEntries = Object.entries(preset.css);
74
- cssEntries.forEach(([property, value]) => {
68
+ cssEntries.forEach(([property, value])=>{
75
69
  rules.push(` ${property}: ${value};`);
76
70
  });
77
71
  const defaultRadius = preset.css['--radius-default'] ?? preset.css['--radius-medium'] ?? preset.css['--radius-large'];
@@ -80,13 +74,12 @@ function applyBorderRadiusRule(rules, config) {
80
74
  }
81
75
  }
82
76
  function applyFontScaleRules(rules, config) {
83
- if (!config.fontScale)
84
- return;
77
+ if (!config.fontScale) return;
85
78
  const scaleValues = {
86
79
  small: '0.9',
87
80
  medium: '1',
88
81
  large: '1.1',
89
- xl: '1.25',
82
+ xl: '1.25'
90
83
  };
91
84
  const scale = scaleValues[config.fontScale] ?? '1';
92
85
  rules.push(` --font-scale: ${scale};`);
@@ -99,54 +92,51 @@ function applyFontScaleRules(rules, config) {
99
92
  'text-xl': '1.25rem',
100
93
  'text-2xl': '1.5rem',
101
94
  'text-3xl': '1.875rem',
102
- 'text-4xl': '2.25rem',
95
+ 'text-4xl': '2.25rem'
103
96
  };
104
- Object.entries(baseSizes).forEach(([className, baseSize]) => {
97
+ Object.entries(baseSizes).forEach(([className, baseSize])=>{
105
98
  const scaledSize = parseFloat(baseSize) * parseFloat(scale);
106
99
  rules.push(` --${className}: ${scaledSize}rem;`);
107
100
  });
108
101
  }
109
102
  function applySpacingRule(rules, config) {
110
- if (!config.spacing)
111
- return;
103
+ if (!config.spacing) return;
112
104
  const spacingMultipliers = {
113
105
  compact: '0.75',
114
106
  medium: '1',
115
- spacious: '1.5',
107
+ spacious: '1.5'
116
108
  };
117
109
  const multiplier = spacingMultipliers[config.spacing] ?? '1';
118
110
  rules.push(` --spacing-scale: ${multiplier};`);
119
111
  rules.push(` --theme-spacing: ${multiplier};`);
120
112
  }
121
113
  function applyAnimationRule(rules, config) {
122
- if (!config.animationLevel)
123
- return;
114
+ if (!config.animationLevel) return;
124
115
  const animationSettings = {
125
116
  none: {
126
117
  duration: '0s',
127
118
  easing: 'linear',
128
- scale: '0',
119
+ scale: '0'
129
120
  },
130
121
  reduced: {
131
122
  duration: '0.1s',
132
123
  easing: 'ease-out',
133
- scale: '0.5',
124
+ scale: '0.5'
134
125
  },
135
126
  medium: {
136
127
  duration: '0.2s',
137
128
  easing: 'ease-out',
138
- scale: '1',
129
+ scale: '1'
139
130
  },
140
131
  full: {
141
132
  duration: '0.3s',
142
133
  easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
143
- scale: '1.2',
144
- },
134
+ scale: '1.2'
135
+ }
145
136
  };
146
137
  const level = config.animationLevel;
147
138
  const settings = animationSettings[level] ?? animationSettings.medium;
148
- if (!settings)
149
- return;
139
+ if (!settings) return;
150
140
  rules.push(` --animation-duration: ${settings.duration};`);
151
141
  rules.push(` --animation-easing: ${settings.easing};`);
152
142
  rules.push(` --animation-scale: ${settings.scale};`);
@@ -154,8 +144,7 @@ function applyAnimationRule(rules, config) {
154
144
  }
155
145
  function applyTypographyRules(rules, config) {
156
146
  const typography = config.typography;
157
- if (!typography)
158
- return;
147
+ if (!typography) return;
159
148
  if (typography.fontFamily) {
160
149
  rules.push(` --typography-fontFamily: ${typography.fontFamily};`);
161
150
  }
@@ -169,14 +158,14 @@ function applyTypographyRules(rules, config) {
169
158
  rules.push(` --typography-lineHeight: ${typography.lineHeight};`);
170
159
  }
171
160
  if (typography.fontWeights) {
172
- Object.entries(typography.fontWeights).forEach(([token, weight]) => {
161
+ Object.entries(typography.fontWeights).forEach(([token, weight])=>{
173
162
  if (weight) {
174
163
  rules.push(` --typography-fontWeights-${token}: ${weight};`);
175
164
  }
176
165
  });
177
166
  }
178
167
  if (typography.letterSpacing) {
179
- Object.entries(typography.letterSpacing).forEach(([token, value]) => {
168
+ Object.entries(typography.letterSpacing).forEach(([token, value])=>{
180
169
  if (value) {
181
170
  rules.push(` --typography-letterSpacing-${token}: ${value};`);
182
171
  }
@@ -184,8 +173,7 @@ function applyTypographyRules(rules, config) {
184
173
  }
185
174
  }
186
175
  function applyDarkModeOverrides(rules, config, customization, selector) {
187
- if (config.colorMode !== 'dark' && config.colorMode !== 'auto')
188
- return;
176
+ if (config.colorMode !== 'dark' && config.colorMode !== 'auto') return;
189
177
  rules.push('');
190
178
  rules.push('@media (prefers-color-scheme: dark) {');
191
179
  rules.push(` ${selector} {`);
@@ -201,8 +189,7 @@ function applyDarkModeOverrides(rules, config, customization, selector) {
201
189
  rules.push('}');
202
190
  }
203
191
  function applyReducedMotionOverride(rules, config) {
204
- if (config.animationLevel !== 'none')
205
- return;
192
+ if (config.animationLevel !== 'none') return;
206
193
  rules.push('');
207
194
  rules.push('@media (prefers-reduced-motion: reduce) {');
208
195
  rules.push(' *, *::before, *::after {');
@@ -214,15 +201,13 @@ function applyReducedMotionOverride(rules, config) {
214
201
  rules.push('}');
215
202
  }
216
203
  function appendCustomCSS(rules, customization) {
217
- if (!customization?.customCSS)
218
- return;
204
+ if (!customization?.customCSS) return;
219
205
  rules.push('');
220
206
  rules.push('/* Custom CSS */');
221
207
  rules.push(customization.customCSS);
222
208
  }
223
209
  function applyCustomizationStyleOverrides(styles, customization) {
224
- if (!customization)
225
- return;
210
+ if (!customization) return;
226
211
  if (customization.primaryColor) {
227
212
  styles['--primary'] = customization.primaryColor;
228
213
  }
@@ -239,8 +224,7 @@ function applyCustomizationStyleOverrides(styles, customization) {
239
224
  }
240
225
  }
241
226
  function applyTypographyStyleOverrides(styles, typography) {
242
- if (!typography)
243
- return;
227
+ if (!typography) return;
244
228
  if (typography.fontFamily) {
245
229
  styles['--font-family-base'] = typography.fontFamily;
246
230
  }
@@ -254,4 +238,5 @@ function applyTypographyStyleOverrides(styles, typography) {
254
238
  styles['--line-height-base'] = typography.lineHeight;
255
239
  }
256
240
  }
241
+
257
242
  //# sourceMappingURL=themeUtils.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"themeUtils.js","sourceRoot":"","sources":["../../src/utils/themeUtils.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"sources":["../../src/utils/themeUtils.ts"],"sourcesContent":["import type { SiteSetting } from '../payload-types.js'\r\nimport { borderRadiusPresets } from '../providers/Theme/themeConfig.js'\r\nimport type { ThemeTypographyPreset } from '../presets.js'\r\n\r\ntype ThemeTypographyConfiguration = {\r\n typography?: ThemeTypographyPreset | null\r\n}\r\n\r\ntype ThemeConfiguration = Omit<NonNullable<SiteSetting['themeConfiguration']>, 'typography'> &\r\n ThemeTypographyConfiguration\r\n\r\ninterface ThemeCustomization {\r\n primaryColor?: string | null\r\n accentColor?: string | null\r\n backgroundColor?: string | null\r\n textColor?: string | null\r\n customCSS?: string | null\r\n}\r\n\r\ntype ThemeConfigurationWithCustomization = ThemeConfiguration & {\r\n customization?: ThemeCustomization | null\r\n}\r\n/**\r\n * Generates CSS custom properties from theme configuration\r\n */\r\nexport function generateThemeCSS(config: ThemeConfiguration): string {\r\n const cssRules: string[] = []\r\n const customization = (config as ThemeConfigurationWithCustomization).customization\r\n const themeSelector = config.theme ? `:root[data-theme='${config.theme}']` : ':root'\r\n\r\n // Start root CSS rules\r\n cssRules.push(`${themeSelector} {`)\r\n applyCustomizationRootRules(cssRules, customization)\r\n applyBorderRadiusRule(cssRules, config)\r\n applyFontScaleRules(cssRules, config)\r\n applySpacingRule(cssRules, config)\r\n applyAnimationRule(cssRules, config)\r\n applyTypographyRules(cssRules, config)\r\n\r\n cssRules.push('}')\r\n\r\n // Color mode specific overrides\r\n applyDarkModeOverrides(cssRules, config, customization, themeSelector)\r\n\r\n // Animation level: none - respect prefers-reduced-motion\r\n applyReducedMotionOverride(cssRules, config)\r\n\r\n // Custom CSS\r\n appendCustomCSS(cssRules, customization)\r\n\r\n return cssRules.join('\\n')\r\n}\r\n\r\n/**\r\n * Determines if a color is light or dark\r\n */\r\nfunction isLightBackground(color: string): boolean {\r\n // Simple heuristic: if it contains 'white', '#fff', or high RGB values, it's light\r\n const lightPatterns = [\r\n /white/i,\r\n /#f{3,6}/i,\r\n /rgb\\s*\\(\\s*([2-9]\\d{2}|1[5-9]\\d|1\\d{2}),/,\r\n /hsl\\s*\\([^)]*,\\s*[^,)]*,\\s*([7-9]\\d|100)%\\)/,\r\n ]\r\n\r\n return lightPatterns.some((pattern) => pattern.test(color))\r\n}\r\n\r\n/**\r\n * Generate theme styles for use in components\r\n */\r\nexport function getThemeStyles(config: ThemeConfiguration) {\r\n const styles: Record<string, string> = {}\r\n const customization = (config as ThemeConfigurationWithCustomization).customization\r\n\r\n applyCustomizationStyleOverrides(styles, customization)\r\n applyTypographyStyleOverrides(styles, config.typography)\r\n\r\n return styles\r\n}\r\n\r\nfunction applyCustomizationRootRules(\r\n rules: string[],\r\n customization: ThemeCustomization | null | undefined,\r\n): void {\r\n if (!customization) return\r\n\r\n if (customization.primaryColor) {\r\n rules.push(` --primary-custom: ${customization.primaryColor};`)\r\n }\r\n\r\n if (customization.accentColor) {\r\n rules.push(` --accent-custom: ${customization.accentColor};`)\r\n }\r\n\r\n if (customization.backgroundColor) {\r\n rules.push(` --background: ${customization.backgroundColor};`)\r\n rules.push(` --card: ${customization.backgroundColor};`)\r\n rules.push(` --popover: ${customization.backgroundColor};`)\r\n }\r\n\r\n if (customization.textColor) {\r\n rules.push(` --foreground: ${customization.textColor};`)\r\n }\r\n}\r\n\r\nfunction applyBorderRadiusRule(rules: string[], config: ThemeConfiguration): void {\r\n if (!config.borderRadius) return\r\n\r\n const preset = borderRadiusPresets[config.borderRadius]\r\n if (!preset) return\r\n\r\n const cssEntries = Object.entries(preset.css)\r\n cssEntries.forEach(([property, value]) => {\r\n rules.push(` ${property}: ${value};`)\r\n })\r\n\r\n const defaultRadius =\r\n preset.css['--radius-default'] ?? preset.css['--radius-medium'] ?? preset.css['--radius-large']\r\n if (defaultRadius) {\r\n rules.push(` --radius: ${defaultRadius};`)\r\n }\r\n}\r\n\r\nfunction applyFontScaleRules(rules: string[], config: ThemeConfiguration): void {\r\n if (!config.fontScale) return\r\n\r\n const scaleValues: Record<string, string> = {\r\n small: '0.9',\r\n medium: '1',\r\n large: '1.1',\r\n xl: '1.25',\r\n }\r\n\r\n const scale = scaleValues[config.fontScale] ?? '1'\r\n rules.push(` --font-scale: ${scale};`)\r\n rules.push(` --theme-font-scale: ${scale};`)\r\n\r\n const baseSizes: Record<string, string> = {\r\n 'text-xs': '0.75rem',\r\n 'text-sm': '0.875rem',\r\n 'text-base': '1rem',\r\n 'text-lg': '1.125rem',\r\n 'text-xl': '1.25rem',\r\n 'text-2xl': '1.5rem',\r\n 'text-3xl': '1.875rem',\r\n 'text-4xl': '2.25rem',\r\n }\r\n\r\n Object.entries(baseSizes).forEach(([className, baseSize]) => {\r\n const scaledSize = parseFloat(baseSize) * parseFloat(scale)\r\n rules.push(` --${className}: ${scaledSize}rem;`)\r\n })\r\n}\r\n\r\nfunction applySpacingRule(rules: string[], config: ThemeConfiguration): void {\r\n if (!config.spacing) return\r\n\r\n const spacingMultipliers: Record<string, string> = {\r\n compact: '0.75',\r\n medium: '1',\r\n spacious: '1.5',\r\n }\r\n\r\n const multiplier = spacingMultipliers[config.spacing] ?? '1'\r\n rules.push(` --spacing-scale: ${multiplier};`)\r\n rules.push(` --theme-spacing: ${multiplier};`)\r\n}\r\n\r\nfunction applyAnimationRule(rules: string[], config: ThemeConfiguration): void {\r\n if (!config.animationLevel) return\r\n\r\n const animationSettings: Record<string, { duration: string; easing: string; scale: string }> = {\r\n none: {\r\n duration: '0s',\r\n easing: 'linear',\r\n scale: '0',\r\n },\r\n reduced: {\r\n duration: '0.1s',\r\n easing: 'ease-out',\r\n scale: '0.5',\r\n },\r\n medium: {\r\n duration: '0.2s',\r\n easing: 'ease-out',\r\n scale: '1',\r\n },\r\n full: {\r\n duration: '0.3s',\r\n easing: 'cubic-bezier(0.4, 0, 0.2, 1)',\r\n scale: '1.2',\r\n },\r\n }\r\n\r\n const level = config.animationLevel as keyof typeof animationSettings\r\n const settings = animationSettings[level] ?? animationSettings.medium\r\n if (!settings) return\r\n rules.push(` --animation-duration: ${settings.duration};`)\r\n rules.push(` --animation-easing: ${settings.easing};`)\r\n rules.push(` --animation-scale: ${settings.scale};`)\r\n rules.push(` --theme-animation-level: ${config.animationLevel};`)\r\n}\r\n\r\nfunction applyTypographyRules(rules: string[], config: ThemeConfiguration): void {\r\n const typography = config.typography\r\n if (!typography) return\r\n\r\n if (typography.fontFamily) {\r\n rules.push(` --typography-fontFamily: ${typography.fontFamily};`)\r\n }\r\n\r\n if (typography.headingFamily) {\r\n rules.push(` --typography-headingFamily: ${typography.headingFamily};`)\r\n }\r\n\r\n if (typography.baseFontSize) {\r\n rules.push(` --typography-baseFontSize: ${typography.baseFontSize};`)\r\n }\r\n\r\n if (typography.lineHeight) {\r\n rules.push(` --typography-lineHeight: ${typography.lineHeight};`)\r\n }\r\n\r\n if (typography.fontWeights) {\r\n Object.entries(typography.fontWeights).forEach(([token, weight]) => {\r\n if (weight) {\r\n rules.push(` --typography-fontWeights-${token}: ${weight};`)\r\n }\r\n })\r\n }\r\n\r\n if (typography.letterSpacing) {\r\n Object.entries(typography.letterSpacing).forEach(([token, value]) => {\r\n if (value) {\r\n rules.push(` --typography-letterSpacing-${token}: ${value};`)\r\n }\r\n })\r\n }\r\n}\r\n\r\nfunction applyDarkModeOverrides(\r\n rules: string[],\r\n config: ThemeConfiguration,\r\n customization: ThemeCustomization | null | undefined,\r\n selector: string,\r\n): void {\r\n if (config.colorMode !== 'dark' && config.colorMode !== 'auto') return\r\n\r\n rules.push('')\r\n rules.push('@media (prefers-color-scheme: dark) {')\r\n rules.push(` ${selector} {`)\r\n\r\n if (customization?.backgroundColor && isLightBackground(customization.backgroundColor)) {\r\n rules.push(` --background: hsl(224 71% 4%);`)\r\n rules.push(` --card: hsl(224 71% 4%);`)\r\n rules.push(` --popover: hsl(224 71% 4%);`)\r\n }\r\n\r\n if (customization?.textColor && !isLightBackground(customization.textColor)) {\r\n rules.push(` --foreground: hsl(213 31% 91%);`)\r\n }\r\n\r\n rules.push(' }')\r\n rules.push('}')\r\n}\r\n\r\nfunction applyReducedMotionOverride(rules: string[], config: ThemeConfiguration): void {\r\n if (config.animationLevel !== 'none') return\r\n\r\n rules.push('')\r\n rules.push('@media (prefers-reduced-motion: reduce) {')\r\n rules.push(' *, *::before, *::after {')\r\n rules.push(' animation-duration: 0.01ms !important;')\r\n rules.push(' animation-iteration-count: 1 !important;')\r\n rules.push(' transition-duration: 0.01ms !important;')\r\n rules.push(' scroll-behavior: auto !important;')\r\n rules.push(' }')\r\n rules.push('}')\r\n}\r\n\r\nfunction appendCustomCSS(\r\n rules: string[],\r\n customization: ThemeCustomization | null | undefined,\r\n): void {\r\n if (!customization?.customCSS) return\r\n\r\n rules.push('')\r\n rules.push('/* Custom CSS */')\r\n rules.push(customization.customCSS)\r\n}\r\n\r\nfunction applyCustomizationStyleOverrides(\r\n styles: Record<string, string>,\r\n customization: ThemeCustomization | null | undefined,\r\n): void {\r\n if (!customization) return\r\n\r\n if (customization.primaryColor) {\r\n styles['--primary'] = customization.primaryColor\r\n }\r\n\r\n if (customization.accentColor) {\r\n styles['--accent'] = customization.accentColor\r\n }\r\n\r\n if (customization.backgroundColor) {\r\n styles['--background'] = customization.backgroundColor\r\n styles['--card'] = customization.backgroundColor\r\n styles['--popover'] = customization.backgroundColor\r\n }\r\n\r\n if (customization.textColor) {\r\n styles['--foreground'] = customization.textColor\r\n }\r\n}\r\n\r\nfunction applyTypographyStyleOverrides(\r\n styles: Record<string, string>,\r\n typography: ThemeTypographyPreset | null | undefined,\r\n): void {\r\n if (!typography) return\r\n\r\n if (typography.fontFamily) {\r\n styles['--font-family-base'] = typography.fontFamily\r\n }\r\n\r\n if (typography.headingFamily) {\r\n styles['--font-family-heading'] = typography.headingFamily\r\n }\r\n\r\n if (typography.baseFontSize) {\r\n styles['--font-size-base'] = typography.baseFontSize\r\n }\r\n\r\n if (typography.lineHeight) {\r\n styles['--line-height-base'] = typography.lineHeight\r\n }\r\n}\r\n"],"names":["borderRadiusPresets","generateThemeCSS","config","cssRules","customization","themeSelector","theme","push","applyCustomizationRootRules","applyBorderRadiusRule","applyFontScaleRules","applySpacingRule","applyAnimationRule","applyTypographyRules","applyDarkModeOverrides","applyReducedMotionOverride","appendCustomCSS","join","isLightBackground","color","lightPatterns","some","pattern","test","getThemeStyles","styles","applyCustomizationStyleOverrides","applyTypographyStyleOverrides","typography","rules","primaryColor","accentColor","backgroundColor","textColor","borderRadius","preset","cssEntries","Object","entries","css","forEach","property","value","defaultRadius","fontScale","scaleValues","small","medium","large","xl","scale","baseSizes","className","baseSize","scaledSize","parseFloat","spacing","spacingMultipliers","compact","spacious","multiplier","animationLevel","animationSettings","none","duration","easing","reduced","full","level","settings","fontFamily","headingFamily","baseFontSize","lineHeight","fontWeights","token","weight","letterSpacing","selector","colorMode","customCSS"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kilivi/payloadcms-theme-management",
3
- "version": "0.1.6",
3
+ "version": "0.1.7",
4
4
  "description": "Theme configuration plugin for Payload CMS v3",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -10,6 +10,10 @@
10
10
  "import": "./dist/index.js",
11
11
  "types": "./dist/index.d.ts"
12
12
  },
13
+ "./server": {
14
+ "import": "./dist/server.js",
15
+ "types": "./dist/server.d.ts"
16
+ },
13
17
  "./components/*": {
14
18
  "import": "./dist/components/*.js",
15
19
  "types": "./dist/components/*.d.ts"
@@ -56,15 +60,19 @@
56
60
  "react": "^19.0.0",
57
61
  "react-dom": "^19.0.0",
58
62
  "typescript": "^5.5.3",
59
- "copyfiles": "^2.4.1"
63
+ "copyfiles": "^2.4.1",
64
+ "@swc/cli": "^0.1.65",
65
+ "@swc/core": "^1.6.3",
66
+ "rimraf": "^5.0.5"
60
67
  },
61
68
  "publishConfig": {
62
69
  "access": "public"
63
70
  },
64
71
  "scripts": {
65
- "build": "pnpm run clean && tsc && pnpm run copyfiles",
66
- "dev": "tsc --watch",
67
- "clean": "rm -rf dist tsconfig.tsbuildinfo",
72
+ "build": "pnpm run clean && pnpm run compile && pnpm run copyfiles",
73
+ "compile": "swc src -d dist --config-file .swcrc && tsc",
74
+ "dev": "swc src -d dist --config-file .swcrc --watch",
75
+ "clean": "rimraf dist tsconfig.tsbuildinfo",
68
76
  "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
69
77
  "lint": "eslint src",
70
78
  "lint:fix": "eslint --fix --ext .ts,.tsx src"
@@ -1 +0,0 @@
1
- {"version":3,"file":"ServerThemeInjector.jsx","sourceRoot":"","sources":["../../src/components/ServerThemeInjector.tsx"],"names":[],"mappings":"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"}
@@ -1,231 +0,0 @@
1
- 'use client';
2
- import { useField } from '@payloadcms/ui';
3
- import React, { useMemo } from 'react';
4
- import { themeIsValid } from '@/providers/Theme/types';
5
- import { defaultThemePresets } from '../presets';
6
- const DEFAULT_THEME_KEY = 'cool';
7
- const basePresetMap = defaultThemePresets.reduce((accumulator, preset) => {
8
- accumulator[preset.name] = preset;
9
- return accumulator;
10
- }, {});
11
- const fallbackPreset = basePresetMap[DEFAULT_THEME_KEY] ?? defaultThemePresets[0];
12
- const fallbackLightMode = fallbackPreset?.lightMode ?? {
13
- primary: '#3b82f6',
14
- accent: '#06b6d4',
15
- background: '#ffffff',
16
- foreground: '#1f2937',
17
- };
18
- export default function ThemePreview() {
19
- // Get individual field values using useField hooks
20
- const { value: selectedTheme } = useField({ path: 'themeConfiguration.theme' });
21
- const { value: primaryColor } = useField({
22
- path: 'themeConfiguration.customization.primaryColor',
23
- });
24
- const { value: accentColor } = useField({
25
- path: 'themeConfiguration.customization.accentColor',
26
- });
27
- const { value: backgroundColor } = useField({
28
- path: 'themeConfiguration.customization.backgroundColor',
29
- });
30
- const { value: textColor } = useField({
31
- path: 'themeConfiguration.customization.textColor',
32
- });
33
- // Determine current theme and if overrides are active
34
- const currentTheme = themeIsValid(selectedTheme)
35
- ? selectedTheme
36
- : (fallbackPreset?.name ?? 'cool');
37
- const hasOverrides = Boolean(primaryColor || accentColor || backgroundColor || textColor);
38
- const themeColors = useMemo(() => {
39
- const preset = basePresetMap[currentTheme] ?? fallbackPreset;
40
- const lightMode = preset?.lightMode ?? fallbackLightMode;
41
- return {
42
- primary: lightMode?.primary ?? fallbackLightMode.primary,
43
- accent: lightMode?.accent ??
44
- lightMode?.secondary ??
45
- fallbackLightMode.accent ??
46
- fallbackLightMode.primary,
47
- background: lightMode?.background ?? fallbackLightMode.background,
48
- text: lightMode?.foreground ?? fallbackLightMode.foreground,
49
- };
50
- }, [currentTheme]);
51
- const currentColors = useMemo(() => ({
52
- primary: primaryColor || themeColors.primary,
53
- accent: accentColor || themeColors.accent,
54
- background: backgroundColor || themeColors.background,
55
- text: textColor || themeColors.text,
56
- }), [primaryColor, accentColor, backgroundColor, textColor, themeColors]);
57
- return (<div className="theme-preview" style={{ marginTop: '20px' }}>
58
- <div style={{
59
- fontSize: '16px',
60
- fontWeight: '600',
61
- marginBottom: '16px',
62
- color: '#374151',
63
- }}>
64
- 🎨 Live Theme Preview
65
- </div>
66
-
67
- <div className="preview-container" style={{
68
- border: '2px solid #e5e7eb',
69
- borderRadius: '12px',
70
- overflow: 'hidden',
71
- backgroundColor: currentColors.background,
72
- color: currentColors.text,
73
- minHeight: '300px',
74
- }}>
75
- {/* Header */}
76
- <div style={{
77
- backgroundColor: currentColors.primary,
78
- color: currentColors.background,
79
- padding: '16px 24px',
80
- display: 'flex',
81
- justifyContent: 'space-between',
82
- alignItems: 'center',
83
- }}>
84
- <div style={{ fontSize: '20px', fontWeight: '700' }}>Your Website</div>
85
- <nav style={{ display: 'flex', gap: '24px', fontSize: '14px' }}>
86
- <span>Home</span>
87
- <span>About</span>
88
- <span>Services</span>
89
- <span>Contact</span>
90
- </nav>
91
- </div>
92
-
93
- {/* Content */}
94
- <div style={{ padding: '32px 24px' }}>
95
- <h1 style={{
96
- fontSize: '32px',
97
- fontWeight: '800',
98
- marginBottom: '16px',
99
- color: currentColors.text,
100
- }}>
101
- Welcome to Your Site
102
- </h1>
103
-
104
- <p style={{
105
- fontSize: '16px',
106
- lineHeight: '1.6',
107
- marginBottom: '24px',
108
- color: currentColors.text,
109
- opacity: 0.8,
110
- }}>
111
- This is how your content will look with the selected theme. The colors and styling will
112
- be applied across your entire website.
113
- </p>
114
-
115
- {/* Buttons */}
116
- <div style={{ display: 'flex', gap: '12px', marginBottom: '32px' }}>
117
- <button style={{
118
- backgroundColor: currentColors.primary,
119
- color: currentColors.background,
120
- border: 'none',
121
- padding: '12px 24px',
122
- borderRadius: '6px',
123
- fontSize: '14px',
124
- fontWeight: '600',
125
- cursor: 'pointer',
126
- }}>
127
- Primary Button
128
- </button>
129
- <button style={{
130
- backgroundColor: 'transparent',
131
- color: currentColors.primary,
132
- border: `2px solid ${currentColors.primary}`,
133
- padding: '10px 24px',
134
- borderRadius: '6px',
135
- fontSize: '14px',
136
- fontWeight: '600',
137
- cursor: 'pointer',
138
- }}>
139
- Secondary Button
140
- </button>
141
- </div>
142
-
143
- {/* Card */}
144
- <div style={{
145
- backgroundColor: currentColors.text,
146
- color: currentColors.background,
147
- padding: '24px',
148
- borderRadius: '8px',
149
- opacity: 0.05,
150
- marginBottom: '16px',
151
- }}/>
152
- <div style={{
153
- border: `1px solid ${currentColors.text}`,
154
- padding: '20px',
155
- borderRadius: '8px',
156
- opacity: 0.1,
157
- }}>
158
- <h3 style={{
159
- fontSize: '18px',
160
- fontWeight: '600',
161
- marginBottom: '12px',
162
- color: currentColors.text,
163
- }}>
164
- Sample Card
165
- </h3>
166
- <p style={{
167
- fontSize: '14px',
168
- color: currentColors.text,
169
- opacity: 0.7,
170
- }}>
171
- This shows how cards and content blocks will appear.
172
- </p>
173
- </div>
174
- </div>
175
-
176
- {/* Footer */}
177
- <div style={{
178
- backgroundColor: currentColors.accent,
179
- color: currentColors.background,
180
- padding: '16px 24px',
181
- textAlign: 'center',
182
- fontSize: '14px',
183
- marginTop: 'auto',
184
- }}>
185
- © 2025 Your Website. Powered by PayloadCMS.
186
- </div>
187
- </div>
188
-
189
- {/* Theme info */}
190
- <div style={{
191
- marginTop: '12px',
192
- fontSize: '12px',
193
- color: '#6b7280',
194
- display: 'grid',
195
- gridTemplateColumns: 'repeat(2, 1fr)',
196
- gap: '8px',
197
- }}>
198
- <div>
199
- <strong>Active Theme:</strong> {currentTheme}
200
- </div>
201
- <div>
202
- <strong>Primary:</strong> {currentColors.primary}
203
- </div>
204
- <div>
205
- <strong>Accent:</strong> {currentColors.accent}
206
- </div>
207
- <div>
208
- <strong>Background:</strong> {currentColors.background}
209
- </div>
210
- </div>
211
-
212
- {/* Customization indicator */}
213
- {hasOverrides && (<div style={{
214
- marginTop: '8px',
215
- padding: '8px 12px',
216
- backgroundColor: '#fef3c7',
217
- borderRadius: '6px',
218
- fontSize: '11px',
219
- color: '#92400e',
220
- display: 'flex',
221
- alignItems: 'center',
222
- gap: '6px',
223
- }}>
224
- <span>⚡</span>
225
- <span>
226
- <strong>Custom colors applied</strong> - overriding theme defaults
227
- </span>
228
- </div>)}
229
- </div>);
230
- }
231
- //# sourceMappingURL=ThemePreview.jsx.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ThemePreview.jsx","sourceRoot":"","sources":["../../src/components/ThemePreview.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAEhD,MAAM,iBAAiB,GAAG,MAAM,CAAA;AAChC,MAAM,aAAa,GAAG,mBAAmB,CAAC,MAAM,CAE9C,CAAC,WAAW,EAAE,MAAM,EAAE,EAAE;IACxB,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAA;IACjC,OAAO,WAAW,CAAA;AACpB,CAAC,EAAE,EAAE,CAAC,CAAA;AAEN,MAAM,cAAc,GAAG,aAAa,CAAC,iBAAiB,CAAC,IAAI,mBAAmB,CAAC,CAAC,CAAC,CAAA;AACjF,MAAM,iBAAiB,GAAG,cAAc,EAAE,SAAS,IAAI;IACrD,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,SAAS;IACjB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;CACtB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,YAAY;IAClC,mDAAmD;IACnD,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,QAAQ,CAAS,EAAE,IAAI,EAAE,0BAA0B,EAAE,CAAC,CAAA;IACvF,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,QAAQ,CAAS;QAC/C,IAAI,EAAE,+CAA+C;KACtD,CAAC,CAAA;IACF,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,QAAQ,CAAS;QAC9C,IAAI,EAAE,8CAA8C;KACrD,CAAC,CAAA;IACF,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,GAAG,QAAQ,CAAS;QAClD,IAAI,EAAE,kDAAkD;KACzD,CAAC,CAAA;IACF,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAS;QAC5C,IAAI,EAAE,4CAA4C;KACnD,CAAC,CAAA;IAEF,sDAAsD;IACtD,MAAM,YAAY,GAAG,YAAY,CAAC,aAAa,CAAC;QAC9C,CAAC,CAAC,aAAa;QACf,CAAC,CAAC,CAAC,cAAc,EAAE,IAAI,IAAI,MAAM,CAAC,CAAA;IACpC,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,IAAI,WAAW,IAAI,eAAe,IAAI,SAAS,CAAC,CAAA;IAEzF,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,MAAM,MAAM,GAAG,aAAa,CAAC,YAAY,CAAC,IAAI,cAAc,CAAA;QAC5D,MAAM,SAAS,GAAG,MAAM,EAAE,SAAS,IAAI,iBAAiB,CAAA;QAExD,OAAO;YACL,OAAO,EAAE,SAAS,EAAE,OAAO,IAAI,iBAAiB,CAAC,OAAO;YACxD,MAAM,EACJ,SAAS,EAAE,MAAM;gBACjB,SAAS,EAAE,SAAS;gBACpB,iBAAiB,CAAC,MAAM;gBACxB,iBAAiB,CAAC,OAAO;YAC3B,UAAU,EAAE,SAAS,EAAE,UAAU,IAAI,iBAAiB,CAAC,UAAU;YACjE,IAAI,EAAE,SAAS,EAAE,UAAU,IAAI,iBAAiB,CAAC,UAAU;SAC5D,CAAA;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,CAAC;QACL,OAAO,EAAE,YAAY,IAAI,WAAW,CAAC,OAAO;QAC5C,MAAM,EAAE,WAAW,IAAI,WAAW,CAAC,MAAM;QACzC,UAAU,EAAE,eAAe,IAAI,WAAW,CAAC,UAAU;QACrD,IAAI,EAAE,SAAS,IAAI,WAAW,CAAC,IAAI;KACpC,CAAC,EACF,CAAC,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,SAAS,EAAE,WAAW,CAAC,CACrE,CAAA;IAED,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAC1D;MAAA,CAAC,GAAG,CACF,KAAK,CAAC,CAAC;YACL,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,KAAK;YACjB,YAAY,EAAE,MAAM;YACpB,KAAK,EAAE,SAAS;SACjB,CAAC,CAEF;;MACF,EAAE,GAAG,CAEL;;MAAA,CAAC,GAAG,CACF,SAAS,CAAC,mBAAmB,CAC7B,KAAK,CAAC,CAAC;YACL,MAAM,EAAE,mBAAmB;YAC3B,YAAY,EAAE,MAAM;YACpB,QAAQ,EAAE,QAAQ;YAClB,eAAe,EAAE,aAAa,CAAC,UAAU;YACzC,KAAK,EAAE,aAAa,CAAC,IAAI;YACzB,SAAS,EAAE,OAAO;SACnB,CAAC,CAEF;QAAA,CAAC,YAAY,CACb;QAAA,CAAC,GAAG,CACF,KAAK,CAAC,CAAC;YACL,eAAe,EAAE,aAAa,CAAC,OAAO;YACtC,KAAK,EAAE,aAAa,CAAC,UAAU;YAC/B,OAAO,EAAE,WAAW;YACpB,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,eAAe;YAC/B,UAAU,EAAE,QAAQ;SACrB,CAAC,CAEF;UAAA,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,CAAC,YAAY,EAAE,GAAG,CACtE;UAAA,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAC7D;YAAA,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAChB;YAAA,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CACjB;YAAA,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CACpB;YAAA,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CACrB;UAAA,EAAE,GAAG,CACP;QAAA,EAAE,GAAG,CAEL;;QAAA,CAAC,aAAa,CACd;QAAA,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC,CACnC;UAAA,CAAC,EAAE,CACD,KAAK,CAAC,CAAC;YACL,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,KAAK;YACjB,YAAY,EAAE,MAAM;YACpB,KAAK,EAAE,aAAa,CAAC,IAAI;SAC1B,CAAC,CAEF;;UACF,EAAE,EAAE,CAEJ;;UAAA,CAAC,CAAC,CACA,KAAK,CAAC,CAAC;YACL,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,KAAK;YACjB,YAAY,EAAE,MAAM;YACpB,KAAK,EAAE,aAAa,CAAC,IAAI;YACzB,OAAO,EAAE,GAAG;SACb,CAAC,CAEF;;;UAEF,EAAE,CAAC,CAEH;;UAAA,CAAC,aAAa,CACd;UAAA,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC,CACjE;YAAA,CAAC,MAAM,CACL,KAAK,CAAC,CAAC;YACL,eAAe,EAAE,aAAa,CAAC,OAAO;YACtC,KAAK,EAAE,aAAa,CAAC,UAAU;YAC/B,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,WAAW;YACpB,YAAY,EAAE,KAAK;YACnB,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,KAAK;YACjB,MAAM,EAAE,SAAS;SAClB,CAAC,CAEF;;YACF,EAAE,MAAM,CACR;YAAA,CAAC,MAAM,CACL,KAAK,CAAC,CAAC;YACL,eAAe,EAAE,aAAa;YAC9B,KAAK,EAAE,aAAa,CAAC,OAAO;YAC5B,MAAM,EAAE,aAAa,aAAa,CAAC,OAAO,EAAE;YAC5C,OAAO,EAAE,WAAW;YACpB,YAAY,EAAE,KAAK;YACnB,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,KAAK;YACjB,MAAM,EAAE,SAAS;SAClB,CAAC,CAEF;;YACF,EAAE,MAAM,CACV;UAAA,EAAE,GAAG,CAEL;;UAAA,CAAC,UAAU,CACX;UAAA,CAAC,GAAG,CACF,KAAK,CAAC,CAAC;YACL,eAAe,EAAE,aAAa,CAAC,IAAI;YACnC,KAAK,EAAE,aAAa,CAAC,UAAU;YAC/B,OAAO,EAAE,MAAM;YACf,YAAY,EAAE,KAAK;YACnB,OAAO,EAAE,IAAI;YACb,YAAY,EAAE,MAAM;SACrB,CAAC,EAEJ;UAAA,CAAC,GAAG,CACF,KAAK,CAAC,CAAC;YACL,MAAM,EAAE,aAAa,aAAa,CAAC,IAAI,EAAE;YACzC,OAAO,EAAE,MAAM;YACf,YAAY,EAAE,KAAK;YACnB,OAAO,EAAE,GAAG;SACb,CAAC,CAEF;YAAA,CAAC,EAAE,CACD,KAAK,CAAC,CAAC;YACL,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,KAAK;YACjB,YAAY,EAAE,MAAM;YACpB,KAAK,EAAE,aAAa,CAAC,IAAI;SAC1B,CAAC,CAEF;;YACF,EAAE,EAAE,CACJ;YAAA,CAAC,CAAC,CACA,KAAK,CAAC,CAAC;YACL,QAAQ,EAAE,MAAM;YAChB,KAAK,EAAE,aAAa,CAAC,IAAI;YACzB,OAAO,EAAE,GAAG;SACb,CAAC,CAEF;;YACF,EAAE,CAAC,CACL;UAAA,EAAE,GAAG,CACP;QAAA,EAAE,GAAG,CAEL;;QAAA,CAAC,YAAY,CACb;QAAA,CAAC,GAAG,CACF,KAAK,CAAC,CAAC;YACL,eAAe,EAAE,aAAa,CAAC,MAAM;YACrC,KAAK,EAAE,aAAa,CAAC,UAAU;YAC/B,OAAO,EAAE,WAAW;YACpB,SAAS,EAAE,QAAQ;YACnB,QAAQ,EAAE,MAAM;YAChB,SAAS,EAAE,MAAM;SAClB,CAAC,CAEF;;QACF,EAAE,GAAG,CACP;MAAA,EAAE,GAAG,CAEL;;MAAA,CAAC,gBAAgB,CACjB;MAAA,CAAC,GAAG,CACF,KAAK,CAAC,CAAC;YACL,SAAS,EAAE,MAAM;YACjB,QAAQ,EAAE,MAAM;YAChB,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,MAAM;YACf,mBAAmB,EAAE,gBAAgB;YACrC,GAAG,EAAE,KAAK;SACX,CAAC,CAEF;QAAA,CAAC,GAAG,CACF;UAAA,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAE,CAAA,CAAC,YAAY,CAC9C;QAAA,EAAE,GAAG,CACL;QAAA,CAAC,GAAG,CACF;UAAA,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAE,CAAA,CAAC,aAAa,CAAC,OAAO,CAClD;QAAA,EAAE,GAAG,CACL;QAAA,CAAC,GAAG,CACF;UAAA,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAE,CAAA,CAAC,aAAa,CAAC,MAAM,CAChD;QAAA,EAAE,GAAG,CACL;QAAA,CAAC,GAAG,CACF;UAAA,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAE,CAAA,CAAC,aAAa,CAAC,UAAU,CACxD;QAAA,EAAE,GAAG,CACP;MAAA,EAAE,GAAG,CAEL;;MAAA,CAAC,6BAA6B,CAC9B;MAAA,CAAC,YAAY,IAAI,CACf,CAAC,GAAG,CACF,KAAK,CAAC,CAAC;gBACL,SAAS,EAAE,KAAK;gBAChB,OAAO,EAAE,UAAU;gBACnB,eAAe,EAAE,SAAS;gBAC1B,YAAY,EAAE,KAAK;gBACnB,QAAQ,EAAE,MAAM;gBAChB,KAAK,EAAE,SAAS;gBAChB,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,GAAG,EAAE,KAAK;aACX,CAAC,CAEF;UAAA,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CACb;UAAA,CAAC,IAAI,CACH;YAAA,CAAC,MAAM,CAAC,qBAAqB,EAAE,MAAM,CAAE;UACzC,EAAE,IAAI,CACR;QAAA,EAAE,GAAG,CAAC,CACP,CACH;IAAA,EAAE,GAAG,CAAC,CACP,CAAA;AACH,CAAC"}