@papu1337/builder 0.0.5 → 1.0.1

package/dist/elements/banner/bannerElement.svelte

@@ -2,46 +2,102 @@
 	import type { BannerSettingsMap } from './settings';
 
 	let { settings }: { settings: BannerSettingsMap } = $props();
+
+	const hasImage = $derived(Boolean(settings.desktopImage || settings.mobileImage));
+	const layers = $derived(settings.layers ?? []);
+
+	const alignItems = $derived(
+		settings.textAlign === 'left'
+			? 'flex-start'
+			: settings.textAlign === 'right'
+				? 'flex-end'
+				: 'center'
+	);
+
+	const colorStyle = (color: string): string =>
+		/gradient\(/i.test(color)
+			? `background-image: ${color}; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;`
+			: `color: ${color};`;
 </script>
 
-<div
-	class="banner-wrapper"
-	style="background-color: {settings.backgroundColor}; min-height: {settings.minHeight}px;"
->
-	{#if settings.desktopImage}
-		<img src={settings.desktopImage} alt="Banner" class="banner-desktop" />
-	{/if}
-	{#if settings.mobileImage}
-		<img src={settings.mobileImage} alt="Banner mobile" class="banner-mobile" />
-	{/if}
-	{#if !settings.desktopImage && !settings.mobileImage}
-		<div class="banner-placeholder">
-			<span class="placeholder-icon">&#128444;</span>
-			<span class="placeholder-text">Upload desktop and/or mobile banner images</span>
+<div class="banner-root" style="margin-top: {settings.marginTop}px;">
+	<div class="banner-media">
+		{#if hasImage}
+			{#if settings.desktopImage}
+				<img
+					class="banner-img banner-desktop"
+					src={settings.desktopImage}
+					alt="Banner"
+					style="object-fit: {settings.objectFit};"
+				/>
+			{/if}
+			{#if settings.mobileImage}
+				<img
+					class="banner-img banner-mobile"
+					src={settings.mobileImage}
+					alt="Banner"
+					style="object-fit: {settings.objectFit};"
+				/>
+			{/if}
+		{:else}
+			<div class="banner-empty">Banner image</div>
+		{/if}
+
+		{#if settings.overlayColor && settings.overlayColor !== 'rgba(0,0,0,0)'}
+			<div class="banner-scrim" style="background: {settings.overlayColor};"></div>
+		{/if}
+	</div>
+
+	{#if layers.length > 0}
+		<div
+			class="banner-stack"
+			style="
+				top: {settings.verticalPosition}%;
+				align-items: {alignItems};
+				text-align: {settings.textAlign};
+				gap: {settings.gap}px;
+			"
+		>
+			{#each layers as layer, index (index)}
+				{#if layer.text}
+					<span
+						class="banner-layer-text"
+						style="
+							font-size: {layer.fontSize}px;
+							font-weight: {layer.fontWeight};
+							{colorStyle(layer.color)}
+						"
+					>
+						{layer.text}
+					</span>
+				{/if}
+			{/each}
 		</div>
 	{/if}
 </div>
 
 <style>
-	.banner-wrapper {
+	.banner-root {
+		position: relative;
+		width: 100%;
+	}
+
+	.banner-media {
 		position: relative;
 		width: 100%;
 		overflow: hidden;
 	}
 
-	.banner-desktop,
-	.banner-mobile {
+	.banner-img {
 		display: block;
 		width: 100%;
-		height: auto;
-		object-fit: cover;
 	}
 
 	.banner-mobile {
 		display: none;
 	}
 
-	@media (max-width: 768px) {
+	@container page (max-width: 767px) {
 		.banner-desktop {
 			display: none;
 		}
@@ -50,25 +106,37 @@
 		}
 	}
 
-	.banner-placeholder {
+	.banner-empty {
 		display: flex;
-		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		gap: 10px;
-		padding: 48px 24px;
-		border: 1.5px dashed rgba(255, 255, 255, 0.12);
-		background: rgba(255, 255, 255, 0.03);
+		min-height: 280px;
+		font-size: 0.85rem;
+		color: rgba(255, 255, 255, 0.5);
+		background: rgba(255, 255, 255, 0.04);
+		border: 1px dashed rgba(255, 255, 255, 0.15);
 	}
 
-	.placeholder-icon {
-		font-size: 2rem;
-		opacity: 0.3;
+	.banner-scrim {
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+	}
+
+	.banner-stack {
+		position: absolute;
+		left: 0;
+		right: 0;
+		transform: translateY(-50%);
+		display: flex;
+		flex-direction: column;
+		padding: 0 1.5rem;
+		pointer-events: none;
 	}
 
-	.placeholder-text {
-		font-size: 0.8rem;
-		color: rgba(255, 255, 255, 0.3);
-		text-align: center;
+	.banner-layer-text {
+		display: inline-block;
+		line-height: 1.1;
+		max-width: 100%;
 	}
 </style>

package/dist/elements/banner/settings.d.ts

@@ -1,8 +1,18 @@
-import { ColorSetting, NumberSetting, UploadSetting, Settings, type InferSettingsMapType } from '../../settings';
+import { UploadSetting, NumberSetting, SelectSetting, SegmentSetting, ColorSetting, TranslatableSetting, RepeaterSetting, Settings, type InferSettingsMapType } from '../../settings';
 export declare const bannerSettings: Settings<{
+    marginTop: NumberSetting;
+    objectFit: SelectSetting;
     desktopImage: UploadSetting;
     mobileImage: UploadSetting;
-    backgroundColor: ColorSetting;
-    minHeight: NumberSetting;
+    overlayColor: ColorSetting;
+    verticalPosition: NumberSetting;
+    textAlign: SegmentSetting;
+    gap: NumberSetting;
+    layers: RepeaterSetting<{
+        text: TranslatableSetting;
+        color: ColorSetting;
+        fontSize: NumberSetting;
+        fontWeight: SelectSetting;
+    }>;
 }>;
 export type BannerSettingsMap = InferSettingsMapType<typeof bannerSettings>;

package/dist/elements/banner/settings.js

@@ -1,5 +1,61 @@
-import { ColorSetting, NumberSetting, UploadSetting, Settings } from '../../settings';
+import { UploadSetting, NumberSetting, SelectSetting, SegmentSetting, ColorSetting, TranslatableSetting, RepeaterSetting, Settings } from '../../settings';
+const FONT_WEIGHTS = [
+    { label: 'Light', value: '300' },
+    { label: 'Regular', value: '400' },
+    { label: 'Medium', value: '500' },
+    { label: 'Semi Bold', value: '600' },
+    { label: 'Bold', value: '700' },
+    { label: 'Extra Bold', value: '800' },
+    { label: 'Black', value: '900' }
+];
+const LAYER_SEEDS = [
+    { text: 'Cashback', color: '#FFFFFF', fontSize: 34, fontWeight: '700' },
+    { text: 'Get 15% Back', color: '#E8C75C', fontSize: 46, fontWeight: '800' },
+    { text: 'Every Eligible Ticket Gets Covered', color: '#FFFFFF', fontSize: 16, fontWeight: '500' }
+];
+const layerFactory = (index) => {
+    const seed = LAYER_SEEDS[index] ?? {
+        text: 'New text',
+        color: '#FFFFFF',
+        fontSize: 24,
+        fontWeight: '700'
+    };
+    return new Settings('Text layer', {
+        text: new TranslatableSetting({ title: 'Text', defaultValue: { en: seed.text } }),
+        color: new ColorSetting({
+            title: 'Color',
+            defaultValue: seed.color,
+            extra: { allowGradient: true }
+        }),
+        fontSize: new NumberSetting({
+            title: 'Font Size',
+            defaultValue: seed.fontSize,
+            extra: { min: 8, max: 120, step: 1 }
+        }),
+        fontWeight: new SelectSetting({
+            title: 'Font Weight',
+            defaultValue: seed.fontWeight,
+            extra: { options: FONT_WEIGHTS }
+        })
+    });
+};
 export const bannerSettings = new Settings('Banner', {
+    marginTop: new NumberSetting({
+        title: 'Margin Top',
+        defaultValue: 0,
+        extra: { min: 0, max: 200 }
+    }),
+    objectFit: new SelectSetting({
+        title: 'Fit',
+        defaultValue: 'cover',
+        extra: {
+            options: [
+                { label: 'Cover', value: 'cover' },
+                { label: 'Contain', value: 'contain' },
+                { label: 'Fill', value: 'fill' }
+            ]
+        }
+    }),
     desktopImage: new UploadSetting({
         title: 'Desktop Image',
         defaultValue: ''
@@ -8,13 +64,37 @@ export const bannerSettings = new Settings('Banner', {
         title: 'Mobile Image',
         defaultValue: ''
     }),
-    backgroundColor: new ColorSetting({
-        title: 'Background Color',
-        defaultValue: '#10202D'
+    overlayColor: new ColorSetting({
+        title: 'Overlay',
+        defaultValue: 'rgba(0,0,0,0)',
+        extra: { allowGradient: true }
+    }),
+    verticalPosition: new NumberSetting({
+        title: 'Vertical Position',
+        defaultValue: 50,
+        extra: { min: 0, max: 100, step: 1 }
+    }),
+    textAlign: new SegmentSetting({
+        title: 'Align',
+        defaultValue: 'center',
+        extra: {
+            options: [
+                { label: 'Left', value: 'left', icon: 'align-left' },
+                { label: 'Center', value: 'center', icon: 'align-center' },
+                { label: 'Right', value: 'right', icon: 'align-right' }
+            ]
+        }
+    }),
+    gap: new NumberSetting({
+        title: 'Gap',
+        defaultValue: 8,
+        extra: { min: 0, max: 80, step: 1 }
     }),
-    minHeight: new NumberSetting({
-        title: 'Min Height (px)',
-        defaultValue: 400,
-        extra: { min: 100, max: 1000, step: 10 }
+    layers: new RepeaterSetting({
+        title: 'Text Layers',
+        itemLabel: 'Text layer',
+        addButtonText: '+ Add text',
+        factory: layerFactory,
+        count: 3
     })
 });

package/dist/elements/button/buttonElement.svelte

@@ -2,45 +2,51 @@
 	import type { ButtonSettingsMap } from './settings';
 
 	let { settings }: { settings: ButtonSettingsMap } = $props();
+
+	const isGradient = $derived(/gradient\(/i.test(settings.background));
+	const backgroundStyle = $derived(
+		isGradient ? `background-image: ${settings.background};` : `background: ${settings.background};`
+	);
 </script>
 
-<div class="button-wrapper" style="margin-top: {settings.marginTop}px;">
+<div class="button-wrap" style="margin-top: {settings.marginTop}px;">
 	<a
-		href={settings.link}
-		class="cta-button"
+		href={settings.link || undefined}
+		class="button-element"
 		style="
-			background: {settings.backgroundColor};
-			color: {settings.textColor};
-			border-radius: {settings.borderRadius}px;
-			padding: {settings.paddingY}px {settings.paddingX}px;
-			font-size: {settings.fontSize}px;
+			{backgroundStyle}
+			color: {settings.typography.color};
+			border-radius: {settings.border.borderRadius}px;
+			border: {settings.border.borderWidth}px solid {settings.border.borderColor};
+			font-size: {settings.typography.fontSize}px;
+			font-weight: {settings.typography.fontWeight};
+			font-family: {settings.typography.fontFamily};
 		"
 	>
-		{settings.text}
+		{settings.typography.text}
 	</a>
 </div>
 
 <style>
-	.button-wrapper {
+	.button-wrap {
 		display: flex;
 		justify-content: center;
 		width: 100%;
-		max-width: 750px;
-		margin: 0 auto;
 	}
 
-	.cta-button {
-		display: inline-block;
-		font-weight: 700;
-		border: none;
-		cursor: pointer;
-		letter-spacing: 0.02em;
+	.button-element {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.75rem 2rem;
 		text-decoration: none;
 		text-align: center;
-		transition: opacity 0.2s ease;
+		letter-spacing: 0.02em;
+		cursor: pointer;
+		transition: filter 0.2s ease;
 	}
 
-	.cta-button:hover {
-		opacity: 0.9;
+	.button-element:hover {
+		filter: brightness(1.05);
 	}
 </style>

package/dist/elements/button/settings.d.ts

@@ -1,17 +1,19 @@
 import { ColorSetting, NumberSetting, TextSetting, Settings, type InferSettingsMapType } from '../../settings';
 export declare const buttonSettings: Settings<{
-    text: TextSetting;
+    marginTop: NumberSetting;
     link: TextSetting;
-    style: Settings<{
-        backgroundColor: ColorSetting;
-        textColor: ColorSetting;
+    background: ColorSetting;
+    typography: Settings<{
+        text: import("../../settings").TranslatableSetting;
+        color: ColorSetting;
         fontSize: NumberSetting;
-        borderRadius: NumberSetting;
+        fontFamily: TextSetting;
+        fontWeight: import("../../settings").SelectSetting;
     }>;
-    layout: Settings<{
-        marginTop: NumberSetting;
-        paddingX: NumberSetting;
-        paddingY: NumberSetting;
+    border: Settings<{
+        borderWidth: NumberSetting;
+        borderColor: ColorSetting;
+        borderRadius: NumberSetting;
     }>;
 }>;
 export type ButtonSettingsMap = InferSettingsMapType<typeof buttonSettings>;

package/dist/elements/button/settings.js

@@ -1,47 +1,26 @@
-import { ColorSetting, NumberSetting, TextSetting, Settings } from '../../settings';
+import { ColorSetting, NumberSetting, TextSetting, Settings, TypographySettings, BorderSettings } from '../../settings';
 export const buttonSettings = new Settings('Button', {
-    text: new TextSetting({
-        title: 'Button Text',
-        defaultValue: 'READY TO BUILD'
+    marginTop: new NumberSetting({
+        title: 'Margin Top',
+        defaultValue: 16,
+        extra: { min: 0, max: 200 }
     }),
     link: new TextSetting({
         title: 'Link URL',
-        defaultValue: '/crypto-sportsbook'
+        defaultValue: ''
     }),
-    style: new Settings('Style', {
-        backgroundColor: new ColorSetting({
-            title: 'Background Color',
-            defaultValue: '#2EA043'
-        }),
-        textColor: new ColorSetting({
-            title: 'Text Color',
-            defaultValue: '#ffffff'
-        }),
-        fontSize: new NumberSetting({
-            title: 'Font Size',
-            defaultValue: 16,
-            extra: { min: 10, max: 48, step: 1 }
-        }),
-        borderRadius: new NumberSetting({
-            title: 'Border Radius',
-            defaultValue: 12,
-            extra: { min: 0, max: 50, step: 1 }
-        })
+    background: new ColorSetting({
+        title: 'Background',
+        defaultValue: '#E8C75C',
+        extra: { allowGradient: true }
     }),
-    layout: new Settings('Layout', {
-        marginTop: new NumberSetting({
-            title: 'Margin Top',
-            defaultValue: 0
-        }),
-        paddingX: new NumberSetting({
-            title: 'Padding Horizontal',
-            defaultValue: 46,
-            extra: { min: 0, step: 1 }
-        }),
-        paddingY: new NumberSetting({
-            title: 'Padding Vertical',
-            defaultValue: 16,
-            extra: { min: 0, step: 1 }
-        })
+    typography: TypographySettings({
+        text: 'Bet Now',
+        color: '#29220B',
+        fontSize: 16,
+        fontWeight: '700'
+    }),
+    border: BorderSettings({
+        borderRadius: 12
     })
 });

package/dist/elements/globalSettings.js

@@ -2,7 +2,8 @@ import { ColorSetting, NumberSetting, Settings } from '../settings';
 export const globalSettings = new Settings('Global', {
     background: new ColorSetting({
         title: 'Background',
-        defaultValue: '#ffffff'
+        defaultValue: 'linear-gradient(160deg, #1B4D7A, #081A30)',
+        extra: { allowGradient: true }
     }),
     paddingTop: new NumberSetting({
         title: 'Padding Top',
@@ -14,7 +15,7 @@ export const globalSettings = new Settings('Global', {
     }),
     paddingBottom: new NumberSetting({
         title: 'Padding Bottom',
-        defaultValue: 22,
+        defaultValue: 24,
         extra: {
             min: 0,
             max: 100
@@ -22,7 +23,7 @@ export const globalSettings = new Settings('Global', {
     }),
     paddingLeft: new NumberSetting({
         title: 'Padding Left',
-        defaultValue: 0,
+        defaultValue: 16,
         extra: {
             min: 0,
             max: 100
@@ -30,7 +31,7 @@ export const globalSettings = new Settings('Global', {
     }),
     paddingRight: new NumberSetting({
         title: 'Padding Right',
-        defaultValue: 0,
+        defaultValue: 16,
         extra: {
             min: 0,
             max: 100