zuljaman-banner-components 1.0.6 → 1.0.8

package/dist/constants/characterLimits.js

@@ -0,0 +1,144 @@
+"use strict";
+/**
+ * Recommended character limits for optimal display in banner styles
+ * Based on maxLengthThreshold values used in font size calculations
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAvailableSubstyles = exports.getAvailableStyles = exports.exceedsLimit = exports.getBannerConfig = exports.BANNER_CONFIGURATIONS = exports.getCharacterLimits = exports.RECOMMENDED_CHARACTER_LIMITS = void 0;
+/**
+ * Recommended character limits for each style and substyle
+ * These numbers represent the optimal text length for best visual appearance
+ * Updated for 4 styles with 3 substyles each
+ */
+exports.RECOMMENDED_CHARACTER_LIMITS = {
+    1: {
+        1: { copy1: 40, copy2: 40, copyCount: 2 },
+        2: { copy1: 40, copy2: 40, copyCount: 2 },
+        3: { copy1: 40, copy2: 40, copyCount: 2 }
+    },
+    2: {
+        1: { copy1: 35, copy2: 35, copyCount: 2 },
+        2: { copy1: 35, copy2: 35, copyCount: 2 },
+        3: { copy1: 35, copy2: 35, copyCount: 2 }
+    },
+    3: {
+        1: { copy1: 40, copyCount: 1 },
+        2: { copy1: 40, copyCount: 1 },
+        3: { copy1: 40, copyCount: 1 }
+    },
+    4: {
+        1: { copy1: 35, copy2: 35, copyCount: 2 },
+        2: { copy1: 35, copy2: 35, copyCount: 2 },
+        3: { copy1: 35, copy2: 35, copyCount: 2 }
+    }
+};
+/**
+ * Get recommended character limits for a specific style and substyle
+ * @param styleNumber - Banner style number (1-4)
+ * @param substyleNumber - Banner substyle number (1-3)
+ * @returns Character limits object or null if not found
+ */
+const getCharacterLimits = (styleNumber, substyleNumber) => {
+    var _a;
+    return ((_a = exports.RECOMMENDED_CHARACTER_LIMITS[styleNumber]) === null || _a === void 0 ? void 0 : _a[substyleNumber]) || null;
+};
+exports.getCharacterLimits = getCharacterLimits;
+// Helper to create a single copy1-only config
+const createCopy1OnlyConfig = (characterLimit, isOptional = true) => ({
+    copy1: { supported: true, characterLimit, isOptional },
+    copy2: { supported: false },
+    fontSize_01: { supported: true },
+    fontSize_02: { supported: false },
+    logoUrl: { supported: true },
+    backgroundImageUrl: { supported: true },
+    overlayIntensityMultiplier: { supported: true },
+    shadowIntensityMultiplier: { supported: false },
+    logoSizeMultiplier: { supported: true },
+});
+// Helper to create a dual copy config
+const createDualCopyConfig = (characterLimit) => ({
+    copy1: { supported: true, characterLimit, isOptional: true },
+    copy2: { supported: true, characterLimit, isOptional: true },
+    fontSize_01: { supported: true },
+    fontSize_02: { supported: true },
+    logoUrl: { supported: true },
+    backgroundImageUrl: { supported: true },
+    overlayIntensityMultiplier: { supported: true },
+    shadowIntensityMultiplier: { supported: true },
+    logoSizeMultiplier: { supported: true },
+});
+/**
+ * Complete banner configuration for all style combinations
+ * Defines which props each style supports and their character limits
+ * Updated for 4 styles with 3 substyles each
+ */
+exports.BANNER_CONFIGURATIONS = {
+    // Style 1: Uses copy1 and copy2 (from old Style1/Substyle1)
+    1: {
+        1: createDualCopyConfig(40),
+        2: createDualCopyConfig(40),
+        3: createDualCopyConfig(40),
+    },
+    // Style 2: Uses copy1 and copy2 (from old Style1/Substyle2)
+    2: {
+        1: createDualCopyConfig(35),
+        2: createDualCopyConfig(35),
+        3: createDualCopyConfig(35),
+    },
+    // Style 3: Only copy1 (from old Style2/Substyle1)
+    3: {
+        1: createCopy1OnlyConfig(40),
+        2: createCopy1OnlyConfig(40),
+        3: createCopy1OnlyConfig(40),
+    },
+    // Style 4: All substyles use dual copy
+    4: {
+        1: createDualCopyConfig(35),
+        2: createDualCopyConfig(35),
+        3: createDualCopyConfig(35),
+    },
+};
+/**
+ * Get complete banner configuration for a specific style combination
+ * @param styleNumber - Banner style number (1-4)
+ * @param substyleNumber - Banner substyle number (1-3)
+ * @returns Complete banner configuration or null if not found
+ */
+const getBannerConfig = (styleNumber, substyleNumber) => {
+    var _a;
+    return ((_a = exports.BANNER_CONFIGURATIONS[styleNumber]) === null || _a === void 0 ? void 0 : _a[substyleNumber]) || null;
+};
+exports.getBannerConfig = getBannerConfig;
+/**
+ * Check if text exceeds recommended limits
+ * @param text - Text to check
+ * @param limit - Character limit
+ * @returns true if text exceeds limit
+ */
+const exceedsLimit = (text, limit) => {
+    if (!text)
+        return false;
+    // Count characters excluding spaces (same logic as font calculation)
+    return text.replace(/\s/g, "").length > limit;
+};
+exports.exceedsLimit = exceedsLimit;
+/**
+ * Get all available style numbers
+ * @returns Array of available style numbers
+ */
+const getAvailableStyles = () => {
+    return Object.keys(exports.BANNER_CONFIGURATIONS).map(Number).sort((a, b) => a - b);
+};
+exports.getAvailableStyles = getAvailableStyles;
+/**
+ * Get all available substyle numbers for a given style
+ * @param styleNumber - Banner style number
+ * @returns Array of available substyle numbers for that style
+ */
+const getAvailableSubstyles = (styleNumber) => {
+    const styleConfig = exports.BANNER_CONFIGURATIONS[styleNumber];
+    if (!styleConfig)
+        return [];
+    return Object.keys(styleConfig).map(Number).sort((a, b) => a - b);
+};
+exports.getAvailableSubstyles = getAvailableSubstyles;

package/dist/constants/defaults.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Default copy configuration values
+ * Used when creating new copies in the playground and other contexts
+ */
+export declare const REM_TO_PIXELS = 16;
+export declare const DEFAULT_COPY_FONTSIZE = 1;
+export declare const DEFAULT_COPY_ALIGN: "center";
+export declare const DEFAULT_COPY_FONTWEIGHT: "normal";
+export declare const DEFAULT_COPY_TRANSLATE_X = 0;
+export declare const DEFAULT_COPY_TRANSLATE_Y = 0;
+export declare const DEFAULT_COPY_ROTATION = 0;
+export declare const DEFAULT_BASE_FONT_SIZE_REM = 6;
+export declare const DEFAULT_COPY_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit";
+export declare const DEFAULT_LOGO_TRANSLATE_X = 0;
+export declare const DEFAULT_LOGO_TRANSLATE_Y = 0;
+export declare const DEFAULT_LOGO_ROTATION = 0;
+export declare const DEFAULT_LOGO_WIDTH: undefined;
+export declare const DEFAULT_LOGO_SIZE_REM = 13.8;
+//# sourceMappingURL=defaults.d.ts.map

package/dist/constants/defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../src/constants/defaults.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,eAAO,MAAM,aAAa,KAAK,CAAC;AAGhC,eAAO,MAAM,qBAAqB,IAAM,CAAC;AACzC,eAAO,MAAM,kBAAkB,EAAG,QAAiB,CAAC;AACpD,eAAO,MAAM,uBAAuB,EAAG,QAAiB,CAAC;AACzD,eAAO,MAAM,wBAAwB,IAAI,CAAC;AAC1C,eAAO,MAAM,wBAAwB,IAAI,CAAC;AAC1C,eAAO,MAAM,qBAAqB,IAAI,CAAC;AAGvC,eAAO,MAAM,0BAA0B,IAAM,CAAC;AAG9C,eAAO,MAAM,iBAAiB,4DAA4D,CAAC;AAG3F,eAAO,MAAM,wBAAwB,IAAI,CAAC;AAC1C,eAAO,MAAM,wBAAwB,IAAI,CAAC;AAC1C,eAAO,MAAM,qBAAqB,IAAI,CAAC;AACvC,eAAO,MAAM,kBAAkB,WAAY,CAAC;AAG5C,eAAO,MAAM,qBAAqB,OAAO,CAAC"}

package/dist/constants/defaults.js

@@ -0,0 +1,27 @@
+"use strict";
+/**
+ * Default copy configuration values
+ * Used when creating new copies in the playground and other contexts
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_LOGO_SIZE_REM = exports.DEFAULT_LOGO_WIDTH = exports.DEFAULT_LOGO_ROTATION = exports.DEFAULT_LOGO_TRANSLATE_Y = exports.DEFAULT_LOGO_TRANSLATE_X = exports.DEFAULT_COPY_TEXT = exports.DEFAULT_BASE_FONT_SIZE_REM = exports.DEFAULT_COPY_ROTATION = exports.DEFAULT_COPY_TRANSLATE_Y = exports.DEFAULT_COPY_TRANSLATE_X = exports.DEFAULT_COPY_FONTWEIGHT = exports.DEFAULT_COPY_ALIGN = exports.DEFAULT_COPY_FONTSIZE = exports.REM_TO_PIXELS = void 0;
+// Conversion constants
+exports.REM_TO_PIXELS = 16; // 1rem = 16px
+// Default copy configuration values
+exports.DEFAULT_COPY_FONTSIZE = 1.0;
+exports.DEFAULT_COPY_ALIGN = 'center';
+exports.DEFAULT_COPY_FONTWEIGHT = 'normal';
+exports.DEFAULT_COPY_TRANSLATE_X = 0;
+exports.DEFAULT_COPY_TRANSLATE_Y = 0;
+exports.DEFAULT_COPY_ROTATION = 0;
+// Base font size in rem - this is the actual size when fontSize multiplier is 1.0
+exports.DEFAULT_BASE_FONT_SIZE_REM = 6.0;
+// Default lorem ipsum text for new copies
+exports.DEFAULT_COPY_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit";
+// Default logo configuration values
+exports.DEFAULT_LOGO_TRANSLATE_X = 0;
+exports.DEFAULT_LOGO_TRANSLATE_Y = 0;
+exports.DEFAULT_LOGO_ROTATION = 0;
+exports.DEFAULT_LOGO_WIDTH = undefined;
+// Base logo size in rem - used across all styles and substyles
+exports.DEFAULT_LOGO_SIZE_REM = 13.8; // 15% larger than original 12rem

package/dist/constants/index.d.ts

@@ -2,4 +2,6 @@
  * Constants exports
  */
 export * from './styleConfigs';
+export * from './characterLimits';
+export * from './defaults';
 //# sourceMappingURL=index.d.ts.map

package/dist/constants/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC"}

package/dist/constants/index.js

@@ -18,3 +18,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./styleConfigs"), exports);
+__exportStar(require("./characterLimits"), exports);
+__exportStar(require("./defaults"), exports);

package/dist/constants/styleConfigs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styleConfigs.d.ts","sourceRoot":"","sources":["../../src/constants/styleConfigs.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAa9D,CAAC;AAGF,eAAO,MAAM,oBAAoB,OAAO,CAAC;AACzC,eAAO,MAAM,qBAAqB,OAAO,CAAC;AAG1C,eAAO,MAAM,mBAAmB,OAAO,CAAC;AACxC,eAAO,MAAM,oBAAoB,OAAO,CAAC"}
+{"version":3,"file":"styleConfigs.d.ts","sourceRoot":"","sources":["../../src/constants/styleConfigs.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAmB9D,CAAC;AAGF,eAAO,MAAM,oBAAoB,OAAO,CAAC;AACzC,eAAO,MAAM,qBAAqB,OAAO,CAAC;AAG1C,eAAO,MAAM,mBAAmB,OAAO,CAAC;AACxC,eAAO,MAAM,oBAAoB,OAAO,CAAC"}

package/dist/constants/styleConfigs.js

@@ -7,16 +7,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DEFAULT_STORY_HEIGHT = exports.DEFAULT_STORY_WIDTH = exports.DEFAULT_BANNER_HEIGHT = exports.DEFAULT_BANNER_WIDTH = exports.STYLE_FONT_CONFIGS = void 0;
 exports.STYLE_FONT_CONFIGS = {
     1: {
-        baseSizeRem1: 2.5, // Base size for copy1 in rem
-        baseSizeRem2: 1.8, // Base size for copy2 in rem
-        maxLengthThreshold: 30,
-        reductionFactor: 0.05
+        baseSizeRem1: 4.8, // Base size for copy1 in rem (from old Style1/Substyle1)
+        baseSizeRem2: 4.8, // Base size for copy2 in rem
+        maxLengthThreshold: 40,
+        reductionFactor: 0.15
     },
     2: {
-        baseSizeRem1: 2.2, // Base size for copy1 in rem
-        baseSizeRem2: 1.6, // Base size for copy2 in rem
+        baseSizeRem1: 3.8, // Base size for copy1 in rem (from old Style1/Substyle2)
+        baseSizeRem2: 4.0, // Base size for copy2 in rem
         maxLengthThreshold: 35,
-        reductionFactor: 0.04
+        reductionFactor: 0.18
+    },
+    3: {
+        baseSizeRem1: 3.5, // Base size for copy1 in rem (from old Style2/Substyle1)
+        baseSizeRem2: 3.5, // Base size for copy2 in rem
+        maxLengthThreshold: 40,
+        reductionFactor: 0.15
     }
 };
 // Default banner dimensions

package/dist/index.d.ts

@@ -10,4 +10,12 @@ export * from './types';
 export * from './utils';
 export * from './styles';
 export * from './constants';
+export * from './styleConfig';
+export * from './components/styles/Style1/substyleConfig';
+export type { SubstyleConfig as Style2SubstyleConfig } from './components/styles/Style2/substyleConfig';
+export { STYLE2_SUBSTYLE_CONFIGS, getSubstyleConfig as getStyle2SubstyleConfig } from './components/styles/Style2/substyleConfig';
+export type { SubstyleConfig as Style3SubstyleConfig } from './components/styles/Style3/substyleConfig';
+export { STYLE3_SUBSTYLE_CONFIGS, getSubstyleConfig as getStyle3SubstyleConfig } from './components/styles/Style3/substyleConfig';
+export type { SubstyleConfig as Style4SubstyleConfig } from './components/styles/Style4/substyleConfig';
+export { STYLE4_SUBSTYLE_CONFIGS, getSubstyleConfig as getStyle4SubstyleConfig } from './components/styles/Style4/substyleConfig';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,cAAc,cAAc,CAAC;AAG7B,cAAc,YAAY,CAAC;AAG3B,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,UAAU,CAAC;AAGzB,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,cAAc,cAAc,CAAC;AAG7B,cAAc,YAAY,CAAC;AAG3B,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,UAAU,CAAC;AAGzB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,2CAA2C,CAAC;AAE1D,YAAY,EAAE,cAAc,IAAI,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACxG,OAAO,EACL,uBAAuB,EACvB,iBAAiB,IAAI,uBAAuB,EAC7C,MAAM,2CAA2C,CAAC;AAEnD,YAAY,EAAE,cAAc,IAAI,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACxG,OAAO,EACL,uBAAuB,EACvB,iBAAiB,IAAI,uBAAuB,EAC7C,MAAM,2CAA2C,CAAC;AAEnD,YAAY,EAAE,cAAc,IAAI,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACxG,OAAO,EACL,uBAAuB,EACvB,iBAAiB,IAAI,uBAAuB,EAC7C,MAAM,2CAA2C,CAAC"}

package/dist/index.js

@@ -20,6 +20,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStyle4SubstyleConfig = exports.STYLE4_SUBSTYLE_CONFIGS = exports.getStyle3SubstyleConfig = exports.STYLE3_SUBSTYLE_CONFIGS = exports.getStyle2SubstyleConfig = exports.STYLE2_SUBSTYLE_CONFIGS = void 0;
 // Core components
 __exportStar(require("./components"), exports);
 // Platform adapters
@@ -32,3 +33,14 @@ __exportStar(require("./utils"), exports);
 __exportStar(require("./styles"), exports);
 // Constants and configurations
 __exportStar(require("./constants"), exports);
+__exportStar(require("./styleConfig"), exports);
+__exportStar(require("./components/styles/Style1/substyleConfig"), exports);
+var substyleConfig_1 = require("./components/styles/Style2/substyleConfig");
+Object.defineProperty(exports, "STYLE2_SUBSTYLE_CONFIGS", { enumerable: true, get: function () { return substyleConfig_1.STYLE2_SUBSTYLE_CONFIGS; } });
+Object.defineProperty(exports, "getStyle2SubstyleConfig", { enumerable: true, get: function () { return substyleConfig_1.getSubstyleConfig; } });
+var substyleConfig_2 = require("./components/styles/Style3/substyleConfig");
+Object.defineProperty(exports, "STYLE3_SUBSTYLE_CONFIGS", { enumerable: true, get: function () { return substyleConfig_2.STYLE3_SUBSTYLE_CONFIGS; } });
+Object.defineProperty(exports, "getStyle3SubstyleConfig", { enumerable: true, get: function () { return substyleConfig_2.getSubstyleConfig; } });
+var substyleConfig_3 = require("./components/styles/Style4/substyleConfig");
+Object.defineProperty(exports, "STYLE4_SUBSTYLE_CONFIGS", { enumerable: true, get: function () { return substyleConfig_3.STYLE4_SUBSTYLE_CONFIGS; } });
+Object.defineProperty(exports, "getStyle4SubstyleConfig", { enumerable: true, get: function () { return substyleConfig_3.getSubstyleConfig; } });

package/dist/styleConfig.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Configuration for banner styles including recommended copy amounts and character limits
+ */
+/**
+ * Shadow configuration for a single shadow effect
+ */
+export interface ShadowSettings {
+    enabled: boolean;
+    size: number;
+    intensity: number;
+    direction: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+}
+/**
+ * Complete shadow configuration for a style
+ */
+export interface ShadowConfig {
+    textShadow: ShadowSettings;
+    logoShadow: ShadowSettings;
+}
+export interface StyleConfig {
+    recommendedCopyAmount: number;
+    maxLengthThreshold: number;
+    copy1CharLimit?: number;
+    copy2CharLimit?: number;
+    copy1FontWeight?: 'thin' | 'normal' | 'bold';
+    copy2FontWeight?: 'thin' | 'normal' | 'bold';
+    fontFamily?: string;
+    shadows?: ShadowConfig;
+    noiseEnabled?: boolean;
+}
+/**
+ * Style-specific configuration
+ * Each style has recommended copy amount and character limits
+ */
+export declare const STYLE_CONFIGS: Record<number, StyleConfig>;
+/**
+ * Get configuration for a specific style
+ */
+export declare const getStyleConfig: (styleNumber: number) => StyleConfig;
+//# sourceMappingURL=styleConfig.d.ts.map

package/dist/styleConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleConfig.d.ts","sourceRoot":"","sources":["../src/styleConfig.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;CAC5G;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,cAAc,CAAC;IAC3B,UAAU,EAAE,cAAc,CAAC;CAC5B;AAED,MAAM,WAAW,WAAW;IAC1B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC7C,eAAe,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAiGrD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,aAAa,MAAM,KAAG,WAEpD,CAAC"}

package/dist/styleConfig.js

@@ -0,0 +1,115 @@
+"use strict";
+/**
+ * Configuration for banner styles including recommended copy amounts and character limits
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStyleConfig = exports.STYLE_CONFIGS = void 0;
+/**
+ * Style-specific configuration
+ * Each style has recommended copy amount and character limits
+ */
+exports.STYLE_CONFIGS = {
+    1: {
+        recommendedCopyAmount: 2,
+        maxLengthThreshold: 40,
+        copy1CharLimit: 40,
+        copy2CharLimit: 40,
+        copy1FontWeight: 'bold',
+        copy2FontWeight: 'normal',
+        fontFamily: 'Roboto, sans-serif',
+        noiseEnabled: false, // Noise disabled for Style1
+        shadows: {
+            textShadow: {
+                enabled: true,
+                size: 70,
+                intensity: 0.85,
+                direction: 'bottom',
+            },
+            logoShadow: {
+                enabled: true,
+                size: 150,
+                intensity: 0.375, // 0.75 * 0.5 from original code
+                direction: 'top-left',
+            },
+        },
+    },
+    2: {
+        recommendedCopyAmount: 2,
+        maxLengthThreshold: 35,
+        copy1CharLimit: 35,
+        copy2CharLimit: 35,
+        copy1FontWeight: 'bold',
+        copy2FontWeight: 'normal',
+        fontFamily: 'Lato, "Lato Fallback", sans-serif',
+        noiseEnabled: false, // Noise disabled for Style2
+        shadows: {
+            textShadow: {
+                enabled: true,
+                size: 70,
+                intensity: 0.60,
+                direction: 'bottom',
+            },
+            logoShadow: {
+                enabled: true,
+                size: 150,
+                intensity: 0.375,
+                direction: 'top-left',
+            },
+        },
+    },
+    3: {
+        recommendedCopyAmount: 1,
+        maxLengthThreshold: 35,
+        copy1CharLimit: 35,
+        copy2CharLimit: 35,
+        copy1FontWeight: 'normal',
+        copy2FontWeight: 'normal',
+        fontFamily: '"Cormorant Garamond", serif',
+        noiseEnabled: true, // Noise enabled for Style3
+        shadows: {
+            textShadow: {
+                enabled: true,
+                size: 200,
+                intensity: 0.45,
+                direction: 'bottom',
+            },
+            logoShadow: {
+                enabled: true,
+                size: 150,
+                intensity: 0.375,
+                direction: 'top-left',
+            },
+        },
+    },
+    4: {
+        recommendedCopyAmount: 2,
+        maxLengthThreshold: 35,
+        copy1CharLimit: 35,
+        copy2CharLimit: 35,
+        copy1FontWeight: 'bold',
+        copy2FontWeight: 'bold',
+        fontFamily: '"Cormorant Garamond", serif',
+        noiseEnabled: false, // Noise disabled for Style4
+        shadows: {
+            textShadow: {
+                enabled: true,
+                size: 200,
+                intensity: 0.45,
+                direction: 'bottom',
+            },
+            logoShadow: {
+                enabled: true,
+                size: 150,
+                intensity: 0.375,
+                direction: 'top-left',
+            },
+        },
+    },
+};
+/**
+ * Get configuration for a specific style
+ */
+const getStyleConfig = (styleNumber) => {
+    return exports.STYLE_CONFIGS[styleNumber] || exports.STYLE_CONFIGS[1];
+};
+exports.getStyleConfig = getStyleConfig;

package/dist/styles/shadowUtils.js

@@ -61,7 +61,7 @@ intensity = 0.6, // Default 60% opacity at the edge
                 left: 0,
                 width: size, // Use size for corner dimensions
                 height: size,
-                background: `radial-gradient(circle at top left, ${rgbaColor}, ${transparent} 70.71%)`, // Fade out by sqrt(2)/2
+                background: `radial-gradient(circle at top left, ${rgbaColor}, ${transparent})`, // Smooth fade out
             };
             break;
         case "top-right":
@@ -71,7 +71,7 @@ intensity = 0.6, // Default 60% opacity at the edge
                 right: 0,
                 width: size,
                 height: size,
-                background: `radial-gradient(circle at top right, ${rgbaColor}, ${transparent} 70.71%)`,
+                background: `radial-gradient(circle at top right, ${rgbaColor}, ${transparent})`,
             };
             break;
         case "bottom-left":
@@ -81,7 +81,7 @@ intensity = 0.6, // Default 60% opacity at the edge
                 left: 0,
                 width: size,
                 height: size,
-                background: `radial-gradient(circle at bottom left, ${rgbaColor}, ${transparent} 70.71%)`,
+                background: `radial-gradient(circle at bottom left, ${rgbaColor}, ${transparent})`,
             };
             break;
         case "bottom-right":
@@ -91,7 +91,7 @@ intensity = 0.6, // Default 60% opacity at the edge
                 right: 0,
                 width: size,
                 height: size,
-                background: `radial-gradient(circle at bottom right, ${rgbaColor}, ${transparent} 70.71%)`,
+                background: `radial-gradient(circle at bottom right, ${rgbaColor}, ${transparent})`,
             };
             break;
         case "bottom": // Default case

package/dist/types.d.ts

@@ -12,8 +12,27 @@ export interface BannerSubstyleProps {
     fontSize_01?: string;
     fontSize_02?: string;
     logoUrl?: string;
+    logoSizeMultiplier?: number;
+    overlayIntensityMultiplier?: number;
+    shadowIntensityMultiplier?: number;
     backgroundImageUrl?: string;
     postType?: PostType | string;
+    logoTranslateX?: number;
+    logoTranslateY?: number;
+    copy1TranslateX?: number;
+    copy1TranslateY?: number;
+    copy2TranslateX?: number;
+    copy2TranslateY?: number;
+    logoRotation?: number;
+    copy1Rotation?: number;
+    copy2Rotation?: number;
+    logoWidth?: number;
+    copy1Width?: number;
+    copy2Width?: number;
+    copy1Align?: 'left' | 'center' | 'right';
+    copy2Align?: 'left' | 'center' | 'right';
+    copy1FontWeight?: 'thin' | 'normal' | 'bold';
+    copy2FontWeight?: 'thin' | 'normal' | 'bold';
 }
 /**
  * Post type enumeration for different banner formats
@@ -77,18 +96,104 @@ export interface PostImage {
     bannerSubstyle?: number;
     logoUrl?: string;
 }
+/**
+ * Copy configuration for individual text elements
+ */
+export interface CopyConfig {
+    id: string;
+    styleSlot?: number;
+    text: string;
+    fontSize?: number;
+    align?: 'left' | 'center' | 'right';
+    fontWeight?: 'thin' | 'normal' | 'bold';
+    fontFamily?: string;
+    color?: string;
+    bgColor?: string;
+    hasBg?: boolean;
+    paddingX?: string;
+    paddingY?: string;
+    borderRadius?: string;
+    translateX?: number;
+    translateY?: number;
+    rotation?: number;
+    width?: number;
+    underline?: boolean;
+    italic?: boolean;
+    textBold?: boolean;
+    hidden?: boolean;
+}
 /**
  * Banner visor component props
  */
 export interface BannerVisorProps {
     postType: PostType;
-    bannerStyle: number;
+    bannerStyle?: number;
     bannerSubstyle: number;
+    bannerSubSubstyle?: number;
+    copies?: CopyConfig[];
+    draggableMode?: boolean;
+    disableAutoPositioning?: boolean;
+    useAbsolutePositioning?: boolean;
+    onCopyPositionChange?: (copyIndex: number, position: {
+        x: number;
+        y: number;
+    }) => void;
+    onCopyRotationChange?: (copyIndex: number, rotation: number) => void;
+    onCopyWidthChange?: (copyIndex: number, width: number) => void;
+    onLogoPositionChange?: (position: {
+        x: number;
+        y: number;
+    }) => void;
+    onLogoRotationChange?: (rotation: number) => void;
+    onLogoWidthChange?: (width: number) => void;
     copy1?: string;
     copy2?: string;
+    copy1FontSizeMultiplier?: number;
+    copy2FontSizeMultiplier?: number;
+    copy1TranslateX?: number;
+    copy1TranslateY?: number;
+    copy2TranslateX?: number;
+    copy2TranslateY?: number;
+    copy1Rotation?: number;
+    copy2Rotation?: number;
+    copy1Width?: number;
+    copy2Width?: number;
+    copy1Align?: 'left' | 'center' | 'right';
+    copy2Align?: 'left' | 'center' | 'right';
+    copy1FontWeight?: 'thin' | 'normal' | 'bold';
+    copy2FontWeight?: 'thin' | 'normal' | 'bold';
+    onCopy1PositionChange?: (position: {
+        x: number;
+        y: number;
+    }) => void;
+    onCopy2PositionChange?: (position: {
+        x: number;
+        y: number;
+    }) => void;
+    onCopy1RotationChange?: (rotation: number) => void;
+    onCopy2RotationChange?: (rotation: number) => void;
+    onCopy1WidthChange?: (width: number) => void;
+    onCopy2WidthChange?: (width: number) => void;
     logoUrl?: string;
     backgroundImageUrl?: string;
     sizeMultiplier?: number;
+    fontSizeMultiplier?: number;
+    logoSizeMultiplier?: number;
+    overlayIntensityMultiplier?: number;
+    shadowIntensityMultiplier?: number;
+    logoTranslateX?: number;
+    logoTranslateY?: number;
+    logoRotation?: number;
+    logoWidth?: number;
+    textShadowEnabled?: boolean;
+    textShadowSize?: number;
+    textShadowIntensity?: number;
+    logoShadowEnabled?: boolean;
+    logoShadowSize?: number;
+    logoShadowIntensity?: number;
+    noiseEnabled?: boolean;
+    noiseIntensity?: number;
+    fontFamily?: string;
 }
 /**
  * Platform adapter interface
@@ -96,4 +201,47 @@ export interface BannerVisorProps {
 export interface PlatformAdapter {
     ImageComponent: React.ComponentType<ImageProps>;
 }
+/**
+ * Custom style substyle configuration
+ */
+export interface CustomSubstyleConfig {
+    copies: CopyConfig[];
+    logoUrl?: string;
+    backgroundImageUrl?: string;
+    logoSizeMultiplier: number;
+    effectIntensityMultiplier: number;
+    textShadowEnabled: boolean;
+    textShadowSize: number;
+    textShadowIntensity: number;
+    logoShadowEnabled: boolean;
+    logoShadowSize: number;
+    logoShadowIntensity: number;
+    noiseEnabled: boolean;
+    noiseIntensity: number;
+    logoTranslateX: number;
+    logoTranslateY: number;
+    logoRotation: number;
+    logoWidth?: number;
+    fontFamily?: string;
+    baseBannerStyle: number;
+    baseBannerSubstyle: number;
+}
+/**
+ * Custom style with multiple substyles
+ */
+export interface CustomStyle {
+    id: string;
+    name: string;
+    substyles: Record<number, CustomSubstyleConfig>;
+    recommendedCopyAmount: number;
+    maxCharacterLength: number;
+    createdAt: string;
+    updatedAt: string;
+}
+/**
+ * Collection of custom styles stored in localStorage
+ */
+export interface CustomStylesCollection {
+    [styleName: string]: CustomStyle;
+}
 //# sourceMappingURL=types.d.ts.map