zuljaman-banner-components 1.0.0

package/README.md

@@ -0,0 +1,242 @@
+# @zuljaman/banner-components
+
+Platform-agnostic banner components for Next.js and AWS Lambda platforms. This shared package consolidates banner components from both the Next.js app and AWS Lambda implementations, providing a single source of truth with enhanced features and TypeScript support.
+
+## Features
+
+- ✅ **Platform Agnostic**: Works with Next.js, AWS Lambda, and other React environments
+- ✅ **TypeScript Support**: Full TypeScript definitions with enhanced type safety
+- ✅ **Adapter Pattern**: Clean separation of platform-specific image handling
+- ✅ **Dynamic Font Sizing**: Automatic font size calculation based on content length
+- ✅ **Advanced Shadow Effects**: Gradient-based shadow system with randomization
+- ✅ **Multiple Styles**: Support for different banner styles and substyles
+- ✅ **Responsive Design**: Automatic scaling based on container dimensions
+- ✅ **Zero Dependencies**: Minimal external dependencies for maximum compatibility
+
+## Installation
+
+```bash
+npm install @zuljaman/banner-components
+```
+
+## Quick Start
+
+### Next.js Usage
+
+```typescript
+import { BannerVisor } from '@zuljaman/banner-components';
+import { ImageComponent } from '@zuljaman/banner-components/adapters/NextJSAdapter';
+
+function MyBannerComponent() {
+  return (
+    <BannerVisor
+      bannerStyle={1}
+      bannerSubstyle={1}
+      postType="POST"
+      copy1="Your primary text here"
+      copy2="Your secondary text here"
+      logoUrl="/path/to/logo.png"
+      backgroundImageUrl="/path/to/background.jpg"
+      ImageComponent={ImageComponent}
+    />
+  );
+}
+```
+
+### AWS Lambda / SSR Usage
+
+```typescript
+import { BannerVisor } from '@zuljaman/banner-components';
+import { ImageComponent } from '@zuljaman/banner-components/adapters/SSRAdapter';
+
+function MyBannerComponent() {
+  return (
+    <BannerVisor
+      bannerStyle={1}
+      bannerSubstyle={1}
+      postType="POST"
+      copy1="Your primary text here"
+      copy2="Your secondary text here"
+      logoUrl="/path/to/logo.png"
+      backgroundImageUrl="/path/to/background.jpg"
+      ImageComponent={ImageComponent}
+    />
+  );
+}
+```
+
+## Components
+
+### BannerVisor
+
+The main banner component that handles routing between different styles and substyles.
+
+**Props:**
+- `bannerStyle: number` - Style identifier (1-2)
+- `bannerSubstyle: number` - Substyle identifier (1-3)
+- `postType: PostType` - "POST" or "STORY" for different dimensions
+- `copy1?: string` - Primary text content
+- `copy2?: string` - Secondary text content
+- `logoUrl?: string` - URL for logo image
+- `backgroundImageUrl?: string` - URL for background image
+- `sizeMultiplier?: number` - Manual size scaling (optional)
+- `ImageComponent: React.ComponentType<ImageProps>` - Platform-specific image component
+
+### Style Components
+
+#### BannerStyle1
+Enhanced banner style with sophisticated layout and shadow effects.
+
+#### BannerStyle2
+Alternative banner style optimized for different content types.
+
+### Substyles
+
+Each style includes 3 substyles (BannerSubstyle1, BannerSubstyle2, BannerSubstyle3) with different layouts:
+- **Substyle 1**: Logo top-left, text bottom
+- **Substyle 2**: Logo top-left with side text, centered bottom text
+- **Substyle 3**: Logo and text side-by-side, bottom text
+
+## Platform Adapters
+
+### NextJSAdapter
+Uses Next.js optimized Image component with automatic optimization.
+
+```typescript
+import { ImageComponent } from '@zuljaman/banner-components/adapters/NextJSAdapter';
+```
+
+### SSRAdapter
+Uses standard HTML img tags for server-side rendering environments.
+
+```typescript
+import { ImageComponent } from '@zuljaman/banner-components/adapters/SSRAdapter';
+```
+
+## Utilities
+
+### Font Size Calculation
+
+```typescript
+import { calculateStyleFontSizes } from '@zuljaman/banner-components';
+
+const fontSizes = calculateStyleFontSizes("Primary text", "Secondary text", {
+  baseSizeRem1: 4.8,
+  baseSizeRem2: 4.8,
+  maxLengthThreshold: 40,
+  reductionFactor: 0.15
+});
+```
+
+### Shadow Effects
+
+```typescript
+import { createAbstractShadowStyle } from '@zuljaman/banner-components/styles';
+
+const shadowStyle = createAbstractShadowStyle({
+  direction: "bottom",
+  size: "70%",
+  intensity: 0.8
+});
+```
+
+## TypeScript Support
+
+Full TypeScript definitions are included:
+
+```typescript
+import type { 
+  BannerVisorProps,
+  BannerSubstyleProps,
+  PostType,
+  ImageProps,
+  StyleFontConfig
+} from '@zuljaman/banner-components';
+```
+
+## Constants
+
+```typescript
+import { 
+  DEFAULT_BANNER_WIDTH,
+  DEFAULT_BANNER_HEIGHT,
+  DEFAULT_STORY_WIDTH,
+  DEFAULT_STORY_HEIGHT,
+  STYLE_FONT_CONFIGS
+} from '@zuljaman/banner-components/constants';
+```
+
+## Migration Guide
+
+### From Next.js App
+
+Replace existing imports:
+
+```typescript
+// Before
+import { BannerVisor } from '@/components/BannerStyles';
+
+// After
+import { BannerVisor } from '@zuljaman/banner-components';
+import { ImageComponent } from '@zuljaman/banner-components/adapters/NextJSAdapter';
+
+// Pass ImageComponent as prop
+<BannerVisor {...props} ImageComponent={ImageComponent} />
+```
+
+### From AWS Lambda
+
+Replace existing imports:
+
+```typescript
+// Before
+import { BannerVisor } from '../components/BannerStyles/BannerVisor';
+
+// After
+import { BannerVisor } from '@zuljaman/banner-components';
+import { ImageComponent } from '@zuljaman/banner-components/adapters/SSRAdapter';
+
+// Pass ImageComponent as prop
+<BannerVisor {...props} ImageComponent={ImageComponent} />
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build the package
+npm run build
+
+# Watch for changes during development
+npm run dev
+
+# Clean build artifacts
+npm run clean
+```
+
+## License
+
+MIT
+
+## Contributing
+
+This package consolidates banner components from multiple Zuljaman projects. When contributing:
+
+1. Ensure changes maintain backward compatibility
+2. Update TypeScript definitions
+3. Test with both Next.js and AWS Lambda adapters
+4. Follow existing code patterns and styling
+
+## Architecture
+
+The package uses an adapter pattern to handle platform-specific image components while maintaining shared logic for:
+
+- Font size calculations
+- Shadow effect generation
+- Layout and styling
+- Type definitions
+- Constants and configurations
+
+This approach ensures 100% code reuse while supporting platform-specific optimizations.

package/dist/adapters/NextJSAdapter.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Next.js Image component adapter factory
+ * Provides optimized image rendering for Next.js applications
+ *
+ * Usage in Next.js applications:
+ * ```typescript
+ * import NextImage from 'next/image';
+ * import { createNextJSAdapter } from '@zuljaman/banner-components/adapters/NextJSAdapter';
+ *
+ * const ImageComponent = createNextJSAdapter(NextImage);
+ * ```
+ */
+import React from 'react';
+import type { ImageProps } from '../types';
+export declare const createNextJSAdapter: (NextImage: React.ComponentType<any>) => React.FC<ImageProps>;
+export declare const ImageComponent: React.FC<ImageProps>;
+//# sourceMappingURL=NextJSAdapter.d.ts.map

package/dist/adapters/NextJSAdapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NextJSAdapter.d.ts","sourceRoot":"","sources":["../../src/adapters/NextJSAdapter.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,eAAO,MAAM,mBAAmB,GAAI,WAAW,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,yBAMtE,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAE/C,CAAC"}

package/dist/adapters/NextJSAdapter.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const createNextJSAdapter = (NextImage) => {
+    const ImageComponent = ({ src, alt, ...props }) => (_jsx(NextImage, { src: src, alt: alt, ...props }));
+    return ImageComponent;
+};
+// For backward compatibility, export a basic component that will work in build
+export const ImageComponent = ({ src, alt, ...props }) => (_jsx("img", { src: src, alt: alt, ...props }));

package/dist/adapters/SSRAdapter.d.ts

@@ -0,0 +1,8 @@
+/**
+ * SSR (Server-Side Rendering) Image component adapter
+ * Provides standard img tag for AWS Lambda and non-Next.js environments
+ */
+import React from 'react';
+import type { ImageProps } from '../types';
+export declare const ImageComponent: React.FC<ImageProps>;
+//# sourceMappingURL=SSRAdapter.d.ts.map

package/dist/adapters/SSRAdapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SSRAdapter.d.ts","sourceRoot":"","sources":["../../src/adapters/SSRAdapter.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAE/C,CAAC"}

package/dist/adapters/SSRAdapter.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ImageComponent = ({ src, alt, ...props }) => (_jsx("img", { src: src, alt: alt, ...props }));

package/dist/adapters/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Platform adapters exports
+ */
+export { ImageComponent as NextJSImageComponent } from './NextJSAdapter';
+export { ImageComponent as SSRImageComponent } from './SSRAdapter';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/adapters/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,cAAc,IAAI,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAE,cAAc,IAAI,iBAAiB,EAAE,MAAM,cAAc,CAAC"}

package/dist/adapters/index.js

@@ -0,0 +1,5 @@
+/**
+ * Platform adapters exports
+ */
+export { ImageComponent as NextJSImageComponent } from './NextJSAdapter';
+export { ImageComponent as SSRImageComponent } from './SSRAdapter';

package/dist/components/BannerVisor.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Platform-agnostic BannerVisor component
+ * Extracted from Next.js app and adapted for cross-platform use
+ */
+import React from "react";
+import type { BannerVisorProps, ImageProps } from "../types";
+interface BannerVisorComponentProps extends BannerVisorProps {
+    ImageComponent: React.ComponentType<ImageProps>;
+}
+export declare const BannerVisor: React.FC<BannerVisorComponentProps>;
+export {};
+//# sourceMappingURL=BannerVisor.d.ts.map

package/dist/components/BannerVisor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerVisor.d.ts","sourceRoot":"","sources":["../../src/components/BannerVisor.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAY7D,UAAU,yBAA0B,SAAQ,gBAAgB;IAC1D,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;CACjD;AAUD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAuJ3D,CAAC"}

package/dist/components/BannerVisor.js

@@ -0,0 +1,99 @@
+/**
+ * Platform-agnostic BannerVisor component
+ * Extracted from Next.js app and adapted for cross-platform use
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import clsx from "clsx";
+import { DEFAULT_BANNER_WIDTH, DEFAULT_BANNER_HEIGHT, DEFAULT_STORY_WIDTH, DEFAULT_STORY_HEIGHT, } from "../constants";
+// Import style components (will be created next)
+import { BannerStyle1 } from "./Style1/BannerStyle1";
+import { BannerStyle2 } from "./Style2/BannerStyle2";
+const NoImageComponent = () => {
+    return (_jsx("div", { className: "w-full grow flex items-center justify-center text-neutral-500", children: _jsx("p", { children: "No image selected" }) }));
+};
+export const BannerVisor = ({ bannerStyle = 1, // Default to style 1 if undefined
+backgroundImageUrl, copy1, copy2, bannerSubstyle, logoUrl, postType, sizeMultiplier: externalSizeMultiplier, ImageComponent, }) => {
+    const [internalSizeMultiplier, setInternalSizeMultiplier] = useState(1);
+    const containerRef = useRef(null);
+    // Use external size multiplier if provided, otherwise use internal
+    const sizeMultiplier = externalSizeMultiplier ?? internalSizeMultiplier;
+    const bannerContentProps = {
+        copy1,
+        copy2,
+        bannerSubstyle,
+        logoUrl,
+        backgroundImageUrl,
+        sizeMultiplier,
+        ImageComponent,
+    };
+    const hasBannerContent = copy1 || copy2 || logoUrl;
+    const renderBannerStyle = () => {
+        if (!hasBannerContent)
+            return null;
+        // Determine the style ID, defaulting to 1 if null or invalid
+        const effectiveBannerStyle = bannerStyle === null ? 1 : bannerStyle;
+        switch (effectiveBannerStyle) {
+            case 1:
+                return _jsx(BannerStyle1, { ...bannerContentProps });
+            case 2:
+                return _jsx(BannerStyle2, { ...bannerContentProps });
+            default:
+                // Default to BannerStyle1
+                return _jsx(BannerStyle1, { ...bannerContentProps });
+        }
+    };
+    useEffect(() => {
+        // Only use internal size calculation if no external multiplier is provided
+        if (externalSizeMultiplier !== undefined)
+            return;
+        const container = containerRef.current;
+        if (!container)
+            return;
+        // Determine target dimensions based on postType
+        const isStory = postType === "STORY";
+        const targetWidth = isStory ? DEFAULT_STORY_WIDTH : DEFAULT_BANNER_WIDTH;
+        const targetHeight = isStory ? DEFAULT_STORY_HEIGHT : DEFAULT_BANNER_HEIGHT;
+        const updateSize = () => {
+            const actualWidth = container.clientWidth;
+            const actualHeight = container.clientHeight;
+            if (actualWidth > 0 && actualHeight > 0) {
+                const widthRatio = actualWidth / targetWidth;
+                const heightRatio = actualHeight / targetHeight;
+                const newSizeMultiplier = Math.min(widthRatio, heightRatio);
+                // Update state only if the value has significantly changed
+                setInternalSizeMultiplier((prev) => Math.abs(prev - newSizeMultiplier) > 1e-6 ? newSizeMultiplier : prev);
+            }
+            else {
+                setInternalSizeMultiplier(1); // Reset if dimensions are zero
+            }
+        };
+        // Update size initially
+        updateSize();
+        const resizeObserver = new ResizeObserver(() => {
+            // Recalculate size on resize
+            updateSize();
+        });
+        resizeObserver.observe(container);
+        return () => {
+            if (container) {
+                resizeObserver.unobserve(container);
+            }
+        };
+        // Add postType to dependency array to recalculate when it changes
+    }, [postType, externalSizeMultiplier]);
+    return (_jsx("div", { className: "relative w-full h-full bg-black rounded-sm flex items-center justify-center overflow-hidden", ref: containerRef, children: hasBannerContent || backgroundImageUrl ? (_jsx("div", { className: clsx("relative flex items-center justify-center h-full"), children: _jsxs("div", { className: "relative", style: {
+                    transform: `scale(${sizeMultiplier})`,
+                    width: `${(postType === "STORY"
+                        ? DEFAULT_STORY_WIDTH
+                        : DEFAULT_BANNER_WIDTH) / 16}rem`,
+                    height: `${(postType === "STORY"
+                        ? DEFAULT_STORY_HEIGHT
+                        : DEFAULT_BANNER_HEIGHT) / 16}rem`,
+                }, children: [!hasBannerContent && backgroundImageUrl && (_jsx(ImageComponent, { src: backgroundImageUrl, alt: "Background", width: postType === "STORY"
+                            ? DEFAULT_STORY_WIDTH
+                            : DEFAULT_BANNER_WIDTH, height: postType === "STORY"
+                            ? DEFAULT_STORY_HEIGHT
+                            : DEFAULT_BANNER_HEIGHT, className: "object-cover w-full h-full absolute inset-0", style: { objectFit: "cover" } })), hasBannerContent && (_jsx("div", { className: "flex items-center justify-center overflow-hidden w-full h-full", children: renderBannerStyle() }))] }) })) : (_jsx(NoImageComponent, {})) }));
+};

package/dist/components/Style1/BannerStyle1.d.ts

@@ -0,0 +1,18 @@
+/**
+ * BannerStyle1 component - Platform-agnostic version
+ * Extracted from Next.js app implementation
+ */
+import React from "react";
+import type { ImageProps } from "../../types";
+interface BannerStyle1Props {
+    copy1?: string;
+    copy2?: string;
+    bannerSubstyle?: number;
+    logoUrl?: string;
+    sizeMultiplier?: number;
+    backgroundImageUrl?: string;
+    ImageComponent: React.ComponentType<ImageProps>;
+}
+export declare const BannerStyle1: React.FC<BannerStyle1Props>;
+export {};
+//# sourceMappingURL=BannerStyle1.d.ts.map

package/dist/components/Style1/BannerStyle1.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerStyle1.d.ts","sourceRoot":"","sources":["../../../src/components/Style1/BannerStyle1.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,UAAU,iBAAiB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiCpD,CAAC"}

package/dist/components/Style1/BannerStyle1.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BannerSubstyle1, BannerSubstyle2, BannerSubstyle3 } from "./substyles";
+import { calculateStyleFontSizes } from "../../utils";
+export const BannerStyle1 = ({ copy1, copy2, bannerSubstyle = 1, logoUrl, backgroundImageUrl, ImageComponent, }) => {
+    // Use the utility function to calculate font sizes with Style1 parameters
+    const fontSizes = calculateStyleFontSizes(copy1, copy2, {
+        baseSizeRem1: 4.8,
+        baseSizeRem2: 4.8,
+        maxLengthThreshold: 40,
+        reductionFactor: 0.15
+    });
+    const substyleProps = {
+        copy1,
+        fontSize_01: fontSizes.fontSize_01,
+        copy2,
+        fontSize_02: fontSizes.fontSize_02,
+        logoUrl,
+        backgroundImageUrl,
+        ImageComponent,
+    };
+    return (_jsxs("div", { className: "w-full h-full text-white", children: [bannerSubstyle === 1 && _jsx(BannerSubstyle1, { ...substyleProps }), bannerSubstyle === 2 && _jsx(BannerSubstyle2, { ...substyleProps }), bannerSubstyle === 3 && _jsx(BannerSubstyle3, { ...substyleProps })] }));
+};

package/dist/components/Style1/substyles/BannerSubstyle1.d.ts

@@ -0,0 +1,12 @@
+/**
+ * BannerSubstyle1 for Style1 - Platform-agnostic version
+ * Extracted from Next.js app implementation
+ */
+import React from "react";
+import type { BannerSubstyleProps, ImageProps } from "../../../types";
+interface BannerSubstyle1Props extends BannerSubstyleProps {
+    ImageComponent: React.ComponentType<ImageProps>;
+}
+export declare const BannerSubstyle1: React.FC<BannerSubstyle1Props>;
+export {};
+//# sourceMappingURL=BannerSubstyle1.d.ts.map

package/dist/components/Style1/substyles/BannerSubstyle1.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerSubstyle1.d.ts","sourceRoot":"","sources":["../../../../src/components/Style1/substyles/BannerSubstyle1.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEtE,UAAU,oBAAqB,SAAQ,mBAAmB;IACxD,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6G1D,CAAC"}

package/dist/components/Style1/substyles/BannerSubstyle1.js

@@ -0,0 +1,44 @@
+/**
+ * BannerSubstyle1 for Style1 - Platform-agnostic version
+ * Extracted from Next.js app implementation
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { createAbstractShadowStyle } from "../../../styles/shadowUtils";
+export const BannerSubstyle1 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUrl, backgroundImageUrl, ImageComponent, }) => {
+    const { shadowStyle, logoShadowStyle } = useMemo(() => {
+        // --- Randomized Shadow Parameters ---
+        // Text Shadow (Bottom)
+        const baseTextSize = 70;
+        const textVariationSize = 20; // +/- 10%
+        const randomTextSize = Math.floor(baseTextSize + (Math.random() - 0.5) * textVariationSize);
+        const baseTextIntensity = 0.85;
+        const textVariationIntensity = 0.2; // +/- 0.1
+        const randomTextIntensity = baseTextIntensity + (Math.random() - 0.5) * textVariationIntensity;
+        // Logo Shadow (Top-Left)
+        const baseLogoSize = 150;
+        const logoVariationSize = 20; // +/- 10%
+        const randomLogoSize = Math.floor(baseLogoSize + (Math.random() - 0.5) * logoVariationSize);
+        const baseLogoIntensity = 0.75;
+        const logoVariationIntensity = 0.2; // +/- 0.1
+        const randomLogoIntensity = baseLogoIntensity + (Math.random() - 0.5) * logoVariationIntensity;
+        // --- Generate Styles with Random Values ---
+        const shadowStyle = createAbstractShadowStyle({
+            // direction: "bottom", // Default
+            size: `${randomTextSize}%`,
+            intensity: randomTextIntensity,
+        });
+        const logoShadowStyle = createAbstractShadowStyle({
+            direction: "top-left",
+            size: `${randomLogoSize}%`,
+            intensity: randomLogoIntensity,
+        });
+        return { shadowStyle, logoShadowStyle };
+    }, []); // Empty dependency array ensures this runs only once on mount
+    return (_jsxs("div", { className: "inset-0 flex flex-col items-start justify-between h-full text-center pb-20 relative isolate overflow-hidden gap-4", children: [backgroundImageUrl && (_jsx(ImageComponent, { src: backgroundImageUrl, alt: "Background", width: 1080, height: 1350, className: "object-cover absolute inset-0 w-full h-full -z-10", style: { objectFit: "cover" } })), _jsx("div", { style: shadowStyle, className: "relative z-10", "aria-hidden": "true" }), _jsx("div", { style: logoShadowStyle, className: "relative z-10", "aria-hidden": "true" }), _jsx("div", { className: "relative px-20 pt-20 z-20", children: _jsx("div", { className: "relative w-64 h-64", children: logoUrl && (_jsx(ImageComponent, { src: logoUrl, alt: "Logo", width: 256, height: 256, className: "object-contain absolute inset-0 w-full h-full", style: { objectFit: "contain" } })) }) }), _jsxs("div", { className: "w-full px-20 relative z-20", children: [_jsx("p", { style: {
+                            fontSize: fontSize_01,
+                        }, className: "leading-tight whitespace-pre-wrap", children: copy1 }), _jsx("p", { style: {
+                            fontSize: fontSize_02,
+                        }, className: "font-bold leading-tight whitespace-pre-wrap", children: copy2 })] })] }));
+};

package/dist/components/Style1/substyles/BannerSubstyle2.d.ts

@@ -0,0 +1,12 @@
+/**
+ * BannerSubstyle2 for Style1 - Platform-agnostic version
+ * Extracted from Next.js app implementation
+ */
+import React from "react";
+import type { BannerSubstyleProps, ImageProps } from "../../../types";
+interface BannerSubstyle2Props extends BannerSubstyleProps {
+    ImageComponent: React.ComponentType<ImageProps>;
+}
+export declare const BannerSubstyle2: React.FC<BannerSubstyle2Props>;
+export {};
+//# sourceMappingURL=BannerSubstyle2.d.ts.map

package/dist/components/Style1/substyles/BannerSubstyle2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerSubstyle2.d.ts","sourceRoot":"","sources":["../../../../src/components/Style1/substyles/BannerSubstyle2.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEtE,UAAU,oBAAqB,SAAQ,mBAAmB;IACxD,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA8G1D,CAAC"}

package/dist/components/Style1/substyles/BannerSubstyle2.js

@@ -0,0 +1,44 @@
+/**
+ * BannerSubstyle2 for Style1 - Platform-agnostic version
+ * Extracted from Next.js app implementation
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { createAbstractShadowStyle } from "../../../styles/shadowUtils";
+export const BannerSubstyle2 = ({ copy1, copy2, fontSize_01, fontSize_02, logoUrl, backgroundImageUrl, ImageComponent, }) => {
+    const { shadowStyle, logoShadowStyle } = useMemo(() => {
+        // --- Randomized Shadow Parameters ---
+        // Text Shadow (Bottom)
+        const baseTextSize = 70;
+        const textVariationSize = 20; // +/- 10%
+        const randomTextSize = Math.floor(baseTextSize + (Math.random() - 0.5) * textVariationSize);
+        const baseTextIntensity = 0.85;
+        const textVariationIntensity = 0.2; // +/- 0.1
+        const randomTextIntensity = baseTextIntensity + (Math.random() - 0.5) * textVariationIntensity;
+        // Logo Shadow (Top-Left)
+        const baseLogoSize = 250;
+        const logoVariationSize = 20; // +/- 10%
+        const randomLogoSize = Math.floor(baseLogoSize + (Math.random() - 0.5) * logoVariationSize);
+        const baseLogoIntensity = 0.65;
+        const logoVariationIntensity = 0.2; // +/- 0.1
+        const randomLogoIntensity = baseLogoIntensity + (Math.random() - 0.5) * logoVariationIntensity;
+        // --- Generate Styles with Random Values ---
+        const shadowStyle = createAbstractShadowStyle({
+            // direction: "bottom", // Default
+            size: `${randomTextSize}%`,
+            intensity: randomTextIntensity,
+        });
+        const logoShadowStyle = createAbstractShadowStyle({
+            direction: "top-left",
+            size: `${randomLogoSize}%`,
+            intensity: randomLogoIntensity,
+        });
+        return { shadowStyle, logoShadowStyle };
+    }, []); // Empty dependency array ensures this runs only once on mount
+    return (_jsxs("div", { className: "inset-0 flex flex-col items-start justify-between h-full pb-20 relative isolate overflow-hidden gap-4", children: [backgroundImageUrl && (_jsx(ImageComponent, { src: backgroundImageUrl, alt: "Background", width: 1080, height: 1350, className: "object-cover absolute inset-0 w-full h-full -z-10 opacity-75", style: { objectFit: 'cover' } })), _jsx("div", { style: shadowStyle, className: "relative z-10", "aria-hidden": "true" }), _jsxs("div", { className: "relative px-20 pt-20 z-20", children: [_jsx("div", { style: logoShadowStyle, className: "relative z-10", "aria-hidden": "true" }), _jsx("div", { className: "relative w-64 h-64", children: logoUrl && (_jsx(ImageComponent, { src: logoUrl, alt: "Logo", width: 256, height: 256, className: "object-contain absolute inset-0 w-full h-full", style: { objectFit: 'contain' } })) }), _jsx("p", { style: {
+                            fontSize: `calc(${fontSize_01} * 0.8)`,
+                        }, className: "w-1/2 mt-8 leading-tight whitespace-pre-wrap", children: copy1 })] }), _jsx("div", { className: "w-full px-20 relative z-20", children: _jsx("p", { style: {
+                        fontSize: fontSize_02,
+                    }, className: "font-bold text-center leading-tight whitespace-pre-wrap", children: copy2 }) })] }));
+};

package/dist/components/Style1/substyles/BannerSubstyle3.d.ts

@@ -0,0 +1,12 @@
+/**
+ * BannerSubstyle3 for Style1 - Platform-agnostic version
+ * Extracted from Next.js app implementation
+ */
+import React from "react";
+import type { BannerSubstyleProps, ImageProps } from "../../../types";
+interface BannerSubstyle3Props extends BannerSubstyleProps {
+    ImageComponent: React.ComponentType<ImageProps>;
+}
+export declare const BannerSubstyle3: React.FC<BannerSubstyle3Props>;
+export {};
+//# sourceMappingURL=BannerSubstyle3.d.ts.map

package/dist/components/Style1/substyles/BannerSubstyle3.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerSubstyle3.d.ts","sourceRoot":"","sources":["../../../../src/components/Style1/substyles/BannerSubstyle3.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEtE,UAAU,oBAAqB,SAAQ,mBAAmB;IACxD,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;CACjD;AAQD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6G1D,CAAC"}