zuljaman-banner-components 1.0.5 → 1.0.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 (98) hide show
  1. package/dist/components/BannerRenderer.d.ts +48 -0
  2. package/dist/components/BannerRenderer.d.ts.map +1 -0
  3. package/dist/components/BannerRenderer.js +449 -0
  4. package/dist/components/BannerVisor.d.ts.map +1 -1
  5. package/dist/components/BannerVisor.js +132 -18
  6. package/dist/components/index.d.ts +1 -2
  7. package/dist/components/index.d.ts.map +1 -1
  8. package/dist/components/index.js +4 -2
  9. package/dist/components/shared/DraggableElement.d.ts +31 -0
  10. package/dist/components/shared/DraggableElement.d.ts.map +1 -0
  11. package/dist/components/shared/DraggableElement.js +367 -0
  12. package/dist/components/shared/index.d.ts +7 -0
  13. package/dist/components/shared/index.d.ts.map +1 -0
  14. package/dist/components/shared/index.js +9 -0
  15. package/dist/components/styles/Style1/substyleConfig.d.ts +20 -0
  16. package/dist/components/styles/Style1/substyleConfig.d.ts.map +1 -0
  17. package/dist/components/styles/Style1/substyleConfig.js +105 -0
  18. package/dist/components/styles/Style2/substyleConfig.d.ts +20 -0
  19. package/dist/components/styles/Style2/substyleConfig.d.ts.map +1 -0
  20. package/dist/components/styles/Style2/substyleConfig.js +133 -0
  21. package/dist/components/styles/Style3/substyleConfig.d.ts +20 -0
  22. package/dist/components/styles/Style3/substyleConfig.d.ts.map +1 -0
  23. package/dist/components/styles/Style3/substyleConfig.js +91 -0
  24. package/dist/components/styles/Style4/substyleConfig.d.ts +20 -0
  25. package/dist/components/styles/Style4/substyleConfig.d.ts.map +1 -0
  26. package/dist/components/styles/Style4/substyleConfig.js +112 -0
  27. package/dist/components/styles/types/substyleTypes.d.ts +68 -0
  28. package/dist/components/styles/types/substyleTypes.d.ts.map +1 -0
  29. package/dist/components/styles/types/substyleTypes.js +6 -0
  30. package/dist/components/styles/utils/calculations.d.ts +47 -0
  31. package/dist/components/styles/utils/calculations.d.ts.map +1 -0
  32. package/dist/components/styles/utils/calculations.js +69 -0
  33. package/dist/components/styles/utils/defaultsUtils.d.ts +54 -0
  34. package/dist/components/styles/utils/defaultsUtils.d.ts.map +1 -0
  35. package/dist/components/styles/utils/defaultsUtils.js +83 -0
  36. package/dist/components/styles/utils/fontSizeUtils.d.ts +32 -0
  37. package/dist/components/styles/utils/fontSizeUtils.d.ts.map +1 -0
  38. package/dist/components/styles/utils/fontSizeUtils.js +52 -0
  39. package/dist/components/styles/utils/positioningUtils.d.ts +38 -0
  40. package/dist/components/styles/utils/positioningUtils.d.ts.map +1 -0
  41. package/dist/components/styles/utils/positioningUtils.js +79 -0
  42. package/dist/components/styles/utils/substyleUtils.d.ts +14 -0
  43. package/dist/components/styles/utils/substyleUtils.d.ts.map +1 -0
  44. package/dist/components/styles/utils/substyleUtils.js +18 -0
  45. package/dist/components/styles/utils/transformUtils.d.ts +36 -0
  46. package/dist/components/styles/utils/transformUtils.d.ts.map +1 -0
  47. package/dist/components/styles/utils/transformUtils.js +53 -0
  48. package/dist/constants/characterLimits.d.ts +97 -0
  49. package/dist/constants/characterLimits.d.ts.map +1 -0
  50. package/dist/constants/characterLimits.js +144 -0
  51. package/dist/constants/defaults.d.ts +19 -0
  52. package/dist/constants/defaults.d.ts.map +1 -0
  53. package/dist/constants/defaults.js +27 -0
  54. package/dist/constants/index.d.ts +2 -0
  55. package/dist/constants/index.d.ts.map +1 -1
  56. package/dist/constants/index.js +2 -0
  57. package/dist/constants/styleConfigs.d.ts.map +1 -1
  58. package/dist/constants/styleConfigs.js +13 -7
  59. package/dist/index.d.ts +8 -0
  60. package/dist/index.d.ts.map +1 -1
  61. package/dist/index.js +12 -0
  62. package/dist/styleConfig.d.ts +40 -0
  63. package/dist/styleConfig.d.ts.map +1 -0
  64. package/dist/styleConfig.js +115 -0
  65. package/dist/styles/shadowUtils.js +4 -4
  66. package/dist/types.d.ts +149 -1
  67. package/dist/types.d.ts.map +1 -1
  68. package/package.json +10 -9
  69. package/dist/components/Style1/BannerStyle1.d.ts +0 -19
  70. package/dist/components/Style1/BannerStyle1.d.ts.map +0 -1
  71. package/dist/components/Style1/BannerStyle1.js +0 -27
  72. package/dist/components/Style1/substyles/BannerSubstyle1.d.ts +0 -12
  73. package/dist/components/Style1/substyles/BannerSubstyle1.d.ts.map +0 -1
  74. package/dist/components/Style1/substyles/BannerSubstyle1.js +0 -52
  75. package/dist/components/Style1/substyles/BannerSubstyle2.d.ts +0 -12
  76. package/dist/components/Style1/substyles/BannerSubstyle2.d.ts.map +0 -1
  77. package/dist/components/Style1/substyles/BannerSubstyle2.js +0 -52
  78. package/dist/components/Style1/substyles/BannerSubstyle3.d.ts +0 -12
  79. package/dist/components/Style1/substyles/BannerSubstyle3.d.ts.map +0 -1
  80. package/dist/components/Style1/substyles/BannerSubstyle3.js +0 -61
  81. package/dist/components/Style1/substyles/index.d.ts +0 -7
  82. package/dist/components/Style1/substyles/index.d.ts.map +0 -1
  83. package/dist/components/Style1/substyles/index.js +0 -22
  84. package/dist/components/Style2/BannerStyle2.d.ts +0 -19
  85. package/dist/components/Style2/BannerStyle2.d.ts.map +0 -1
  86. package/dist/components/Style2/BannerStyle2.js +0 -32
  87. package/dist/components/Style2/substyles/BannerSubstyle1.d.ts +0 -12
  88. package/dist/components/Style2/substyles/BannerSubstyle1.d.ts.map +0 -1
  89. package/dist/components/Style2/substyles/BannerSubstyle1.js +0 -31
  90. package/dist/components/Style2/substyles/BannerSubstyle2.d.ts +0 -12
  91. package/dist/components/Style2/substyles/BannerSubstyle2.d.ts.map +0 -1
  92. package/dist/components/Style2/substyles/BannerSubstyle2.js +0 -31
  93. package/dist/components/Style2/substyles/BannerSubstyle3.d.ts +0 -12
  94. package/dist/components/Style2/substyles/BannerSubstyle3.d.ts.map +0 -1
  95. package/dist/components/Style2/substyles/BannerSubstyle3.js +0 -31
  96. package/dist/components/Style2/substyles/index.d.ts +0 -7
  97. package/dist/components/Style2/substyles/index.d.ts.map +0 -1
  98. package/dist/components/Style2/substyles/index.js +0 -22
@@ -0,0 +1,105 @@
1
+ "use strict";
2
+ /**
3
+ * Centralized configuration for Style1 substyles
4
+ * Defines positioning, sizing, and behavior for logo and copies in each substyle
5
+ */
6
+ Object.defineProperty(exports, "__esModule", { value: true });
7
+ exports.getSubstyleConfig = exports.STYLE1_SUBSTYLE_CONFIGS = void 0;
8
+ const substyleUtils_1 = require("../utils/substyleUtils");
9
+ /**
10
+ * Style1 substyle configurations
11
+ * All coordinates are in pixels from center (540, 540) of a 1080x1080 banner
12
+ * x: negative = left, positive = right
13
+ * y: negative = up, positive = down
14
+ */
15
+ exports.STYLE1_SUBSTYLE_CONFIGS = {
16
+ 1: {
17
+ logo: {
18
+ x: -475, // 6% from left (65px) = -475px from center
19
+ y: -486, // 5% from top (54px) = -486px from center
20
+ },
21
+ copy1: {
22
+ x: 0, // Centered horizontally
23
+ y: 432, // 10% from bottom (108px) = 432px from center
24
+ width: 950, // 88% of 1080px
25
+ alignment: 'center',
26
+ },
27
+ copy2: {
28
+ x: 0, // Centered horizontally
29
+ y: 432, // Start at same Y as copy1 (will be auto-positioned above)
30
+ width: 950, // 88% of 1080px
31
+ alignment: 'center',
32
+ },
33
+ autoPositioning: true,
34
+ autoPositioningConfig: {
35
+ anchorElement: 'copy1',
36
+ targetElement: 'copy2',
37
+ direction: 'up',
38
+ },
39
+ gapRem: 1.5,
40
+ fontSize: {
41
+ copy1: 1.0,
42
+ copy2: 0.80,
43
+ },
44
+ },
45
+ 2: {
46
+ logo: {
47
+ x: -475,
48
+ y: -486,
49
+ },
50
+ copy1: {
51
+ x: 0,
52
+ y: 432,
53
+ width: 950,
54
+ alignment: 'center',
55
+ },
56
+ copy2: {
57
+ x: -259, // 6% from left (65px), centered within 40% width (432px) = -259px from center
58
+ y: -486, // Start at same Y as logo (will be auto-positioned below)
59
+ width: 432, // 40% of 1080px
60
+ alignment: 'left',
61
+ },
62
+ autoPositioning: true,
63
+ autoPositioningConfig: {
64
+ anchorElement: 'logo',
65
+ targetElement: 'copy2',
66
+ direction: 'down',
67
+ },
68
+ gapRem: 1.5,
69
+ fontSize: {
70
+ copy1: 1.0,
71
+ copy2: 0.80,
72
+ },
73
+ },
74
+ 3: {
75
+ logo: {
76
+ x: -475,
77
+ y: -486,
78
+ },
79
+ copy1: {
80
+ x: 0,
81
+ y: 432,
82
+ width: 950,
83
+ alignment: 'center',
84
+ },
85
+ copy2: {
86
+ x: 259, // 6% from right (65px), centered within 40% width (432px) = 259px from center
87
+ y: -350, // Moved down from -432 to -350
88
+ width: 432, // 40% of 1080px
89
+ alignment: 'right',
90
+ },
91
+ fontSize: {
92
+ copy1: 1.0,
93
+ copy2: 0.80,
94
+ },
95
+ },
96
+ };
97
+ /**
98
+ * Get configuration for a specific substyle
99
+ * @param substyle - Substyle number (1, 2, or 3)
100
+ * @returns SubstyleConfig for the specified substyle
101
+ */
102
+ const getSubstyleConfig = (substyle) => {
103
+ return (0, substyleUtils_1.getSubstyleConfig)(exports.STYLE1_SUBSTYLE_CONFIGS, substyle);
104
+ };
105
+ exports.getSubstyleConfig = getSubstyleConfig;
@@ -0,0 +1,20 @@
1
+ /**
2
+ * Centralized configuration for Style2 substyles
3
+ * Defines positioning, sizing, and behavior for logo and copies in each substyle
4
+ */
5
+ import { SubstyleConfig } from '../types/substyleTypes';
6
+ export type { SubstyleConfig };
7
+ /**
8
+ * Style2 substyle configurations
9
+ * All coordinates are in pixels from center (540, 540) of a 1080x1080 banner
10
+ * x: negative = left, positive = right
11
+ * y: negative = up, positive = down
12
+ */
13
+ export declare const STYLE2_SUBSTYLE_CONFIGS: Record<number, SubstyleConfig>;
14
+ /**
15
+ * Get configuration for a specific substyle
16
+ * @param substyle - Substyle number (1, 2, or 3)
17
+ * @returns SubstyleConfig for the specified substyle
18
+ */
19
+ export declare const getSubstyleConfig: (substyle: number) => SubstyleConfig;
20
+ //# sourceMappingURL=substyleConfig.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"substyleConfig.d.ts","sourceRoot":"","sources":["../../../../src/components/styles/Style2/substyleConfig.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAIxD,YAAY,EAAE,cAAc,EAAE,CAAC;AAE/B;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CA6GlE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,UAAU,MAAM,KAAG,cAEpD,CAAC"}
@@ -0,0 +1,133 @@
1
+ "use strict";
2
+ /**
3
+ * Centralized configuration for Style2 substyles
4
+ * Defines positioning, sizing, and behavior for logo and copies in each substyle
5
+ */
6
+ Object.defineProperty(exports, "__esModule", { value: true });
7
+ exports.getSubstyleConfig = exports.STYLE2_SUBSTYLE_CONFIGS = void 0;
8
+ const substyleUtils_1 = require("../utils/substyleUtils");
9
+ /**
10
+ * Style2 substyle configurations
11
+ * All coordinates are in pixels from center (540, 540) of a 1080x1080 banner
12
+ * x: negative = left, positive = right
13
+ * y: negative = up, positive = down
14
+ */
15
+ exports.STYLE2_SUBSTYLE_CONFIGS = {
16
+ 1: {
17
+ logo: {
18
+ x: -110, // Centered horizontally (logo left edge offset for centerOrigin: false)
19
+ y: -486, // 5% from top (54px) = -486px from center
20
+ },
21
+ copy1: {
22
+ x: 0, // Centered horizontally
23
+ y: 432, // 10% from bottom (108px) = 432px from center
24
+ width: 950, // 88% of 1080px
25
+ alignment: 'center',
26
+ },
27
+ copy2: {
28
+ x: 259, // 6% from right (65px), centered within 40% width (432px) = 259px from center
29
+ y: 432, // Start at same Y as copy1 (will be auto-positioned above)
30
+ width: 432, // 40% of 1080px
31
+ alignment: 'center',
32
+ rotation: 3,
33
+ color: '#000000',
34
+ bgColor: '#FFFFFF',
35
+ hasBg: true,
36
+ paddingX: '1.25rem',
37
+ paddingY: '1rem',
38
+ borderRadius: '0.75rem',
39
+ },
40
+ autoPositioning: true,
41
+ autoPositioningConfig: {
42
+ anchorElement: 'copy1',
43
+ targetElement: 'copy2',
44
+ direction: 'up',
45
+ },
46
+ gapRem: 2,
47
+ fontSize: {
48
+ copy1: 1.0,
49
+ copy2: 0.40,
50
+ },
51
+ },
52
+ 2: {
53
+ logo: {
54
+ x: -110, // Centered horizontally (logo left edge offset for centerOrigin: false)
55
+ y: -486,
56
+ },
57
+ copy1: {
58
+ x: 0,
59
+ y: 432,
60
+ width: 950,
61
+ alignment: 'center',
62
+ },
63
+ copy2: {
64
+ x: -259, // 6% from left (65px), centered within 40% width (432px) = -259px from center
65
+ y: -486, // Start at same Y as logo (will be auto-positioned below)
66
+ width: 432,
67
+ alignment: 'center',
68
+ rotation: -3,
69
+ color: '#000000',
70
+ bgColor: '#FFFFFF',
71
+ hasBg: true,
72
+ paddingX: '1.25rem',
73
+ paddingY: '1rem',
74
+ borderRadius: '0.75rem',
75
+ },
76
+ autoPositioning: true,
77
+ autoPositioningConfig: {
78
+ anchorElement: 'logo',
79
+ targetElement: 'copy2',
80
+ direction: 'down',
81
+ },
82
+ gapRem: 2,
83
+ fontSize: {
84
+ copy1: 1.0,
85
+ copy2: 0.40,
86
+ },
87
+ },
88
+ 3: {
89
+ logo: {
90
+ x: -110, // Centered horizontally (logo left edge offset for centerOrigin: false)
91
+ y: -486,
92
+ },
93
+ copy1: {
94
+ x: 0,
95
+ y: 432,
96
+ width: 950,
97
+ alignment: 'center',
98
+ },
99
+ copy2: {
100
+ x: 259, // 6% from right (65px), centered within 40% width (432px) = 259px from center
101
+ y: -486, // Start at same Y as logo (will be auto-positioned below)
102
+ width: 432,
103
+ alignment: 'center',
104
+ rotation: 3,
105
+ color: '#000000',
106
+ bgColor: '#FFFFFF',
107
+ hasBg: true,
108
+ paddingX: '1.25rem',
109
+ paddingY: '1rem',
110
+ borderRadius: '0.75rem',
111
+ },
112
+ autoPositioning: true,
113
+ autoPositioningConfig: {
114
+ anchorElement: 'logo',
115
+ targetElement: 'copy2',
116
+ direction: 'down',
117
+ },
118
+ gapRem: 2,
119
+ fontSize: {
120
+ copy1: 1.0,
121
+ copy2: 0.40,
122
+ },
123
+ },
124
+ };
125
+ /**
126
+ * Get configuration for a specific substyle
127
+ * @param substyle - Substyle number (1, 2, or 3)
128
+ * @returns SubstyleConfig for the specified substyle
129
+ */
130
+ const getSubstyleConfig = (substyle) => {
131
+ return (0, substyleUtils_1.getSubstyleConfig)(exports.STYLE2_SUBSTYLE_CONFIGS, substyle);
132
+ };
133
+ exports.getSubstyleConfig = getSubstyleConfig;
@@ -0,0 +1,20 @@
1
+ /**
2
+ * Centralized configuration for Style3 substyles
3
+ * Defines positioning, sizing, and behavior for logo and copies in each substyle
4
+ */
5
+ import { SubstyleConfig } from '../types/substyleTypes';
6
+ export type { SubstyleConfig };
7
+ /**
8
+ * Style3 substyle configurations
9
+ * All coordinates are in pixels from center (540, 540) of a 1080x1080 banner
10
+ * x: negative = left, positive = right
11
+ * y: negative = up, positive = down
12
+ */
13
+ export declare const STYLE3_SUBSTYLE_CONFIGS: Record<number, SubstyleConfig>;
14
+ /**
15
+ * Get configuration for a specific substyle
16
+ * @param substyle - Substyle number (1, 2, or 3)
17
+ * @returns SubstyleConfig for the specified substyle
18
+ */
19
+ export declare const getSubstyleConfig: (substyle: number) => SubstyleConfig;
20
+ //# sourceMappingURL=substyleConfig.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"substyleConfig.d.ts","sourceRoot":"","sources":["../../../../src/components/styles/Style3/substyleConfig.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAIxD,YAAY,EAAE,cAAc,EAAE,CAAC;AAE/B;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAmElE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,UAAU,MAAM,KAAG,cAEpD,CAAC"}
@@ -0,0 +1,91 @@
1
+ "use strict";
2
+ /**
3
+ * Centralized configuration for Style3 substyles
4
+ * Defines positioning, sizing, and behavior for logo and copies in each substyle
5
+ */
6
+ Object.defineProperty(exports, "__esModule", { value: true });
7
+ exports.getSubstyleConfig = exports.STYLE3_SUBSTYLE_CONFIGS = void 0;
8
+ const substyleUtils_1 = require("../utils/substyleUtils");
9
+ /**
10
+ * Style3 substyle configurations
11
+ * All coordinates are in pixels from center (540, 540) of a 1080x1080 banner
12
+ * x: negative = left, positive = right
13
+ * y: negative = up, positive = down
14
+ */
15
+ exports.STYLE3_SUBSTYLE_CONFIGS = {
16
+ 1: {
17
+ logo: {
18
+ x: 14, // Centered with copy1 (124 - logoWidth/2)
19
+ y: -216, // 30% from top (324px) = -216px from center
20
+ },
21
+ copy1: {
22
+ x: 124, // 6% from right, centered within 65% width = 124px from center
23
+ y: -216, // Start at same Y as logo (will be auto-positioned below)
24
+ width: 702, // 65% of 1080px
25
+ alignment: 'center',
26
+ },
27
+ autoPositioning: true,
28
+ autoPositioningConfig: {
29
+ anchorElement: 'logo',
30
+ targetElement: 'copy1',
31
+ direction: 'down',
32
+ },
33
+ gapRem: 1.5,
34
+ fontSize: {
35
+ copy1: 0.60,
36
+ },
37
+ },
38
+ 2: {
39
+ logo: {
40
+ x: -110, // Centered horizontally (logo left edge offset for centerOrigin: false)
41
+ y: 380, // 15% from bottom (162px) = 378px from center
42
+ },
43
+ copy1: {
44
+ x: 0, // Centered horizontally
45
+ y: 380, // Start at same Y as logo (will be auto-positioned above)
46
+ width: 702, // 65% of 1080px
47
+ alignment: 'center',
48
+ },
49
+ autoPositioning: true,
50
+ autoPositioningConfig: {
51
+ anchorElement: 'logo',
52
+ targetElement: 'copy1',
53
+ direction: 'up',
54
+ },
55
+ gapRem: 1.5,
56
+ fontSize: {
57
+ copy1: 0.60,
58
+ },
59
+ },
60
+ 3: {
61
+ logo: {
62
+ x: 254, // 6% from right edge, logo left edge = 254px from center
63
+ y: 380, // 15% from bottom (162px) = 378px from center
64
+ },
65
+ copy1: {
66
+ x: 313, // 6% from right, centered within 30% width = 313px from center
67
+ y: 380, // Start at same Y as logo (will be auto-positioned above)
68
+ width: 324, // 30% of 1080px
69
+ alignment: 'left',
70
+ },
71
+ autoPositioning: true,
72
+ autoPositioningConfig: {
73
+ anchorElement: 'logo',
74
+ targetElement: 'copy1',
75
+ direction: 'up',
76
+ },
77
+ gapRem: 1.5,
78
+ fontSize: {
79
+ copy1: 0.60,
80
+ },
81
+ },
82
+ };
83
+ /**
84
+ * Get configuration for a specific substyle
85
+ * @param substyle - Substyle number (1, 2, or 3)
86
+ * @returns SubstyleConfig for the specified substyle
87
+ */
88
+ const getSubstyleConfig = (substyle) => {
89
+ return (0, substyleUtils_1.getSubstyleConfig)(exports.STYLE3_SUBSTYLE_CONFIGS, substyle);
90
+ };
91
+ exports.getSubstyleConfig = getSubstyleConfig;
@@ -0,0 +1,20 @@
1
+ /**
2
+ * Centralized configuration for Style4 substyles
3
+ * Defines positioning, sizing, and behavior for logo and copies in each substyle
4
+ */
5
+ import { SubstyleConfig } from '../types/substyleTypes';
6
+ export type { SubstyleConfig };
7
+ /**
8
+ * Style4 substyle configurations
9
+ * All coordinates are in pixels from center (540, 540) of a 1080x1080 banner
10
+ * x: negative = left, positive = right
11
+ * y: negative = up, positive = down
12
+ */
13
+ export declare const STYLE4_SUBSTYLE_CONFIGS: Record<number, SubstyleConfig>;
14
+ /**
15
+ * Get configuration for a specific substyle
16
+ * @param substyle - Substyle number (1, 2, or 3)
17
+ * @returns SubstyleConfig for the specified substyle
18
+ */
19
+ export declare const getSubstyleConfig: (substyle: number) => SubstyleConfig;
20
+ //# sourceMappingURL=substyleConfig.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"substyleConfig.d.ts","sourceRoot":"","sources":["../../../../src/components/styles/Style4/substyleConfig.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAIxD,YAAY,EAAE,cAAc,EAAE,CAAC;AAE/B;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAwFlE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,UAAU,MAAM,KAAG,cAEpD,CAAC"}
@@ -0,0 +1,112 @@
1
+ "use strict";
2
+ /**
3
+ * Centralized configuration for Style4 substyles
4
+ * Defines positioning, sizing, and behavior for logo and copies in each substyle
5
+ */
6
+ Object.defineProperty(exports, "__esModule", { value: true });
7
+ exports.getSubstyleConfig = exports.STYLE4_SUBSTYLE_CONFIGS = void 0;
8
+ const substyleUtils_1 = require("../utils/substyleUtils");
9
+ /**
10
+ * Style4 substyle configurations
11
+ * All coordinates are in pixels from center (540, 540) of a 1080x1080 banner
12
+ * x: negative = left, positive = right
13
+ * y: negative = up, positive = down
14
+ */
15
+ exports.STYLE4_SUBSTYLE_CONFIGS = {
16
+ 1: {
17
+ logo: {
18
+ x: -110, // Centered horizontally (logo left edge offset for centerOrigin: false)
19
+ y: 380, // 15% from bottom (162px) = 378px from center
20
+ },
21
+ copy1: {
22
+ x: 0, // Centered horizontally
23
+ y: -486, // Start at same Y as copy2 (will be auto-positioned below)
24
+ width: 972, // 90% of 1080px
25
+ alignment: 'center',
26
+ },
27
+ copy2: {
28
+ x: 0, // Centered horizontally
29
+ y: -486, // 5% from top (54px) = -486px from center
30
+ width: 950, // 88% of 1080px
31
+ alignment: 'center',
32
+ },
33
+ autoPositioning: true,
34
+ autoPositioningConfig: {
35
+ anchorElement: 'copy2',
36
+ targetElement: 'copy1',
37
+ direction: 'down',
38
+ },
39
+ gapRem: 0.15,
40
+ fontSize: {
41
+ copy1: 1.6,
42
+ copy2: 0.60,
43
+ },
44
+ },
45
+ 2: {
46
+ logo: {
47
+ x: -110, // Centered horizontally (logo left edge offset for centerOrigin: false)
48
+ y: 380, // 15% from bottom (162px) = 378px from center
49
+ },
50
+ copy1: {
51
+ x: 0, // Centered horizontally
52
+ y: -136, // 37.4% from top (404px) = -136px from center
53
+ width: 972, // 90% of 1080px
54
+ alignment: 'center',
55
+ },
56
+ copy2: {
57
+ x: 0, // Centered horizontally
58
+ y: -136, // Start at same Y as copy1 (will be auto-positioned below)
59
+ width: 950, // 88% of 1080px
60
+ alignment: 'center',
61
+ },
62
+ autoPositioning: true,
63
+ autoPositioningConfig: {
64
+ anchorElement: 'copy1',
65
+ targetElement: 'copy2',
66
+ direction: 'down',
67
+ },
68
+ gapRem: 1,
69
+ fontSize: {
70
+ copy1: 1.75,
71
+ copy2: 0.60,
72
+ },
73
+ },
74
+ 3: {
75
+ logo: {
76
+ x: -110, // Centered horizontally (logo left edge offset for centerOrigin: false)
77
+ y: 380, // 15% from bottom (162px) = 378px from center
78
+ },
79
+ copy1: {
80
+ x: 0, // Centered horizontally
81
+ y: -281, // 24% from top (259px) = -281px from center
82
+ width: 972, // 90% of 1080px
83
+ alignment: 'center',
84
+ },
85
+ copy2: {
86
+ x: 0, // Centered horizontally
87
+ y: -281, // Start at same Y as copy1 (will be auto-positioned below)
88
+ width: 950, // 88% of 1080px
89
+ alignment: 'center',
90
+ },
91
+ autoPositioning: true,
92
+ autoPositioningConfig: {
93
+ anchorElement: 'copy1',
94
+ targetElement: 'copy2',
95
+ direction: 'down',
96
+ },
97
+ gapRem: 1,
98
+ fontSize: {
99
+ copy1: 1.75,
100
+ copy2: 0.60,
101
+ },
102
+ },
103
+ };
104
+ /**
105
+ * Get configuration for a specific substyle
106
+ * @param substyle - Substyle number (1, 2, or 3)
107
+ * @returns SubstyleConfig for the specified substyle
108
+ */
109
+ const getSubstyleConfig = (substyle) => {
110
+ return (0, substyleUtils_1.getSubstyleConfig)(exports.STYLE4_SUBSTYLE_CONFIGS, substyle);
111
+ };
112
+ exports.getSubstyleConfig = getSubstyleConfig;
@@ -0,0 +1,68 @@
1
+ /**
2
+ * Shared type definitions for all substyle configurations
3
+ * Centralized location for style configuration interfaces
4
+ */
5
+ /**
6
+ * Logo positioning with absolute coordinates from center
7
+ */
8
+ export interface LogoConfig {
9
+ x: number;
10
+ y: number;
11
+ width?: number;
12
+ }
13
+ /**
14
+ * Copy element positioning and styling configuration with absolute coordinates
15
+ */
16
+ export interface CopyElementConfig {
17
+ x: number;
18
+ y: number;
19
+ width?: number;
20
+ alignment: 'left' | 'center' | 'right';
21
+ rotation?: number;
22
+ color?: string;
23
+ bgColor?: string;
24
+ hasBg?: boolean;
25
+ paddingX?: string;
26
+ paddingY?: string;
27
+ borderRadius?: string;
28
+ }
29
+ /**
30
+ * Auto-positioning configuration
31
+ * Defines how one element should be positioned relative to another
32
+ */
33
+ export interface AutoPositioningConfig {
34
+ /** Element that serves as the reference point (stays in place) */
35
+ anchorElement: 'logo' | 'copy1' | 'copy2';
36
+ /** Element that will be positioned relative to the anchor (moves) */
37
+ targetElement: 'copy1' | 'copy2';
38
+ /** Direction from anchor to target */
39
+ direction: 'up' | 'down' | 'left' | 'right';
40
+ }
41
+ /**
42
+ * Font size configuration for copies
43
+ */
44
+ export interface FontSizeConfig {
45
+ copy1: number;
46
+ copy2?: number;
47
+ }
48
+ /**
49
+ * Complete substyle configuration
50
+ * Defines all positioning, styling, and behavior for a specific substyle
51
+ */
52
+ export interface SubstyleConfig {
53
+ logo: LogoConfig;
54
+ copy1: CopyElementConfig;
55
+ copy2?: CopyElementConfig;
56
+ /** Enable automatic positioning of elements relative to each other */
57
+ autoPositioning?: boolean;
58
+ /** Configuration for automatic positioning (anchor, target, direction) */
59
+ autoPositioningConfig?: AutoPositioningConfig;
60
+ /** Gap in rem units between auto-positioned elements */
61
+ gapRem?: number;
62
+ fontSize: FontSizeConfig;
63
+ }
64
+ /**
65
+ * Collection of substyle configurations indexed by substyle number
66
+ */
67
+ export type SubstyleConfigs = Record<number, SubstyleConfig>;
68
+ //# sourceMappingURL=substyleTypes.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"substyleTypes.d.ts","sourceRoot":"","sources":["../../../../src/components/styles/types/substyleTypes.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC,kEAAkE;IAClE,aAAa,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAC1C,qEAAqE;IACrE,aAAa,EAAE,OAAO,GAAG,OAAO,CAAC;IACjC,sCAAsC;IACtC,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CAC7C;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,iBAAiB,CAAC;IACzB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,sEAAsE;IACtE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,0EAA0E;IAC1E,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,cAAc,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC"}
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+ /**
3
+ * Shared type definitions for all substyle configurations
4
+ * Centralized location for style configuration interfaces
5
+ */
6
+ Object.defineProperty(exports, "__esModule", { value: true });
@@ -0,0 +1,47 @@
1
+ /**
2
+ * Platform-agnostic calculation utilities
3
+ * Common mathematical operations and conversions used across all banner styles
4
+ */
5
+ /**
6
+ * Convert rem units to pixels
7
+ * @param rem - Value in rem units
8
+ * @returns Value in pixels
9
+ */
10
+ export declare const remToPixels: (rem: number) => number;
11
+ /**
12
+ * Convert percentage to pixels based on container size
13
+ * @param percent - Percentage value (0-100)
14
+ * @param containerSize - Container size in pixels
15
+ * @returns Value in pixels
16
+ */
17
+ export declare const percentToPixels: (percent: number, containerSize: number) => number;
18
+ /**
19
+ * Parse a percentage string to a number
20
+ * @param percentString - String like "50%" or "10.5%"
21
+ * @returns Numeric percentage value (e.g., 50, 10.5)
22
+ */
23
+ export declare const parsePercent: (percentString: string) => number;
24
+ /**
25
+ * Calculate the pixel position from a percentage string and container size
26
+ * @param percentString - String like "50%" or "10%"
27
+ * @param containerSize - Container size in pixels
28
+ * @returns Position in pixels
29
+ */
30
+ export declare const percentStringToPixels: (percentString: string, containerSize: number) => number;
31
+ /**
32
+ * Clamp a value between min and max
33
+ * @param value - Value to clamp
34
+ * @param min - Minimum value
35
+ * @param max - Maximum value
36
+ * @returns Clamped value
37
+ */
38
+ export declare const clamp: (value: number, min: number, max: number) => number;
39
+ /**
40
+ * Linear interpolation between two values
41
+ * @param start - Start value
42
+ * @param end - End value
43
+ * @param t - Interpolation factor (0-1)
44
+ * @returns Interpolated value
45
+ */
46
+ export declare const lerp: (start: number, end: number, t: number) => number;
47
+ //# sourceMappingURL=calculations.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"calculations.d.ts","sourceRoot":"","sources":["../../../../src/components/styles/utils/calculations.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,KAAG,MAEzC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,eAAe,GAAI,SAAS,MAAM,EAAE,eAAe,MAAM,KAAG,MAExE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAI,eAAe,MAAM,KAAG,MAEpD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,eAAe,MAAM,EAAE,eAAe,MAAM,KAAG,MAGpF,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,KAAK,GAAI,OAAO,MAAM,EAAE,KAAK,MAAM,EAAE,KAAK,MAAM,KAAG,MAE/D,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,IAAI,GAAI,OAAO,MAAM,EAAE,KAAK,MAAM,EAAE,GAAG,MAAM,KAAG,MAE5D,CAAC"}