@papu1337/builder 0.0.3

package/dist/elements/cards/cardsElement.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+	import type { CardsSettingsMap } from './settings';
+
+	let { settings }: { settings: CardsSettingsMap } = $props();
+
+	const rows = $derived(() => {
+		const all = settings.cards;
+		const chunks: (typeof all)[] = [];
+		for (let i = 0; i < all.length; i += 3) {
+			chunks.push(all.slice(i, i + 3));
+		}
+		return chunks;
+	});
+</script>
+
+<div class="cards-wrapper" style="margin-top: {settings.marginTop}px;">
+	{#each rows() as row}
+		<div class="cards-row">
+			{#each row as card, i}
+				{#if i > 0}
+					<div class="arrow" style="color: {settings.arrowColor};">
+						<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+							<path
+								d="M9 6l6 6-6 6"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg>
+					</div>
+				{/if}
+				<div
+					class="card"
+					style="background: {settings.backgroundColor}; border: 1px solid {settings.borderColor};"
+				>
+					<h3 class="card-title" style="color: {settings.titleColor};">
+						{card.title}
+					</h3>
+					<p class="card-content" style="color: {settings.contentColor};">
+						{card.content}
+					</p>
+				</div>
+			{/each}
+		</div>
+	{/each}
+
+	{#if settings.footerText}
+		<div
+			class="cards-footer"
+			style="background: {settings.footerBackground}; color: {settings.footerTextColor};"
+		>
+			<p>{settings.footerText}</p>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.cards-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		max-width: 750px;
+		width: 100%;
+		margin: 0 auto;
+	}
+
+	.cards-row {
+		display: flex;
+		align-items: stretch;
+		gap: 0;
+	}
+
+	.arrow {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		padding: 0 6px;
+	}
+
+	.card {
+		flex: 1;
+		max-width: calc(33.333% - 12px);
+		border-radius: 10px;
+		padding: 24px 20px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+		gap: 10px;
+	}
+
+	.card-title {
+		margin: 0;
+		font-size: 0.95rem;
+		font-weight: 800;
+		text-transform: uppercase;
+		letter-spacing: 0.03em;
+	}
+
+	.card-content {
+		margin: 0;
+		font-size: 0.85rem;
+		line-height: 1.5;
+	}
+
+	.cards-footer {
+		border-radius: 8px;
+		padding: 14px 20px;
+		text-align: center;
+	}
+
+	.cards-footer p {
+		margin: 0;
+		font-size: 0.85rem;
+		line-height: 1.5;
+		font-style: italic;
+	}
+
+	@media (max-width: 640px) {
+		.cards-row {
+			flex-direction: column;
+			gap: 12px;
+		}
+
+		.card {
+			max-width: 100%;
+		}
+
+		.arrow {
+			transform: rotate(90deg);
+			padding: 4px 0;
+		}
+	}
+</style>

package/dist/elements/cards/cardsElement.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { CardsSettingsMap } from './settings';
+type $$ComponentProps = {
+    settings: CardsSettingsMap;
+};
+declare const CardsElement: import("svelte").Component<$$ComponentProps, {}, "">;
+type CardsElement = ReturnType<typeof CardsElement>;
+export default CardsElement;

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

@@ -0,0 +1,14 @@
+import { ColorSetting, NumberSetting, TextSetting, ListSetting, Settings, type InferSettingsMapType } from '../../settings';
+export declare const cardsSettings: Settings<{
+    marginTop: NumberSetting;
+    cards: ListSetting;
+    footerText: TextSetting;
+    backgroundColor: ColorSetting;
+    borderColor: ColorSetting;
+    titleColor: ColorSetting;
+    contentColor: ColorSetting;
+    footerBackground: ColorSetting;
+    footerTextColor: ColorSetting;
+    arrowColor: ColorSetting;
+}>;
+export type CardsSettingsMap = InferSettingsMapType<typeof cardsSettings>;

package/dist/elements/cards/settings.js

@@ -0,0 +1,52 @@
+import { ColorSetting, NumberSetting, TextSetting, ListSetting, Settings } from '../../settings';
+export const cardsSettings = new Settings('Cards', {
+    marginTop: new NumberSetting({
+        title: 'Margin Top',
+        defaultValue: 0
+    }),
+    cards: new ListSetting({
+        title: 'Cards',
+        defaultValue: [
+            { title: 'CREATE YOUR TICKET', content: 'Pick 3+ positions from UEL & UECL matches' },
+            { title: 'PLACE YOUR BET', content: 'With Combo or Bet Builder ticket' },
+            { title: 'GET 50% FREEBET', content: 'In case you lose any position' }
+        ],
+        extra: {
+            addButtonText: '+ Add Card',
+            titlePlaceholder: 'Card title',
+            contentPlaceholder: 'Card description'
+        }
+    }),
+    footerText: new TextSetting({
+        title: 'Footer Text',
+        defaultValue: 'Example: Place a 3-leg combo for $200 and get 50% back as a $100 Freebet if your ticket loses.'
+    }),
+    backgroundColor: new ColorSetting({
+        title: 'Card Background',
+        defaultValue: 'rgba(22, 45, 63, 0.8)'
+    }),
+    borderColor: new ColorSetting({
+        title: 'Card Border Color',
+        defaultValue: 'rgba(177, 202, 223, 0.15)'
+    }),
+    titleColor: new ColorSetting({
+        title: 'Card Title Color',
+        defaultValue: '#ffffff'
+    }),
+    contentColor: new ColorSetting({
+        title: 'Card Content Color',
+        defaultValue: 'rgba(255, 255, 255, 0.7)'
+    }),
+    footerBackground: new ColorSetting({
+        title: 'Footer Background',
+        defaultValue: 'rgba(22, 45, 63, 0.6)'
+    }),
+    footerTextColor: new ColorSetting({
+        title: 'Footer Text Color',
+        defaultValue: 'rgba(255, 255, 255, 0.7)'
+    }),
+    arrowColor: new ColorSetting({
+        title: 'Arrow Color',
+        defaultValue: 'rgba(255, 255, 255, 0.4)'
+    })
+});

package/dist/elements/divider/dividerElement.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { DividerSettingsMap } from './settings';
+
+	let { settings }: { settings: DividerSettingsMap } = $props();
+</script>
+
+<div class="divider" style="color: {settings.textColor};">
+	<div class="divider-line" style="background: {settings.lineColor};"></div>
+	<span class="divider-text">{settings.text}</span>
+	<div class="divider-line" style="background: {settings.lineColor};"></div>
+</div>
+
+<style>
+	.divider {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 20px;
+		max-width: 750px;
+		width: 100%;
+		margin: 0 auto;
+	}
+
+	.divider-line {
+		flex: 1;
+		height: 1px;
+	}
+
+	.divider-text {
+		font-size: 14px;
+		font-weight: 800;
+		white-space: nowrap;
+	}
+</style>

package/dist/elements/divider/dividerElement.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { DividerSettingsMap } from './settings';
+type $$ComponentProps = {
+    settings: DividerSettingsMap;
+};
+declare const DividerElement: import("svelte").Component<$$ComponentProps, {}, "">;
+type DividerElement = ReturnType<typeof DividerElement>;
+export default DividerElement;

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

@@ -0,0 +1,7 @@
+import { ColorSetting, TextSetting, Settings, type InferSettingsMapType } from '../../settings';
+export declare const dividerSettings: Settings<{
+    text: TextSetting;
+    textColor: ColorSetting;
+    lineColor: ColorSetting;
+}>;
+export type DividerSettingsMap = InferSettingsMapType<typeof dividerSettings>;

package/dist/elements/divider/settings.js

@@ -0,0 +1,15 @@
+import { ColorSetting, TextSetting, Settings } from '../../settings';
+export const dividerSettings = new Settings('Divider', {
+    text: new TextSetting({
+        title: 'Text',
+        defaultValue: 'OR'
+    }),
+    textColor: new ColorSetting({
+        title: 'Text Color',
+        defaultValue: '#ffffff'
+    }),
+    lineColor: new ColorSetting({
+        title: 'Line Color',
+        defaultValue: 'rgba(255,255,255,0.2)'
+    })
+});

package/dist/elements/globalSettings.d.ts

@@ -0,0 +1,8 @@
+import { ColorSetting, NumberSetting, Settings } from '../settings';
+export declare const globalSettings: Settings<{
+    background: ColorSetting;
+    paddingTop: NumberSetting;
+    paddingBottom: NumberSetting;
+    paddingLeft: NumberSetting;
+    paddingRight: NumberSetting;
+}>;

package/dist/elements/globalSettings.js

@@ -0,0 +1,39 @@
+import { ColorSetting, NumberSetting, Settings } from '../settings';
+export const globalSettings = new Settings('Global', {
+    background: new ColorSetting({
+        title: 'Background',
+        defaultValue: '#ffffff'
+    }),
+    paddingTop: new NumberSetting({
+        title: 'Padding Top',
+        defaultValue: 0,
+        extra: {
+            min: 0,
+            max: 100
+        }
+    }),
+    paddingBottom: new NumberSetting({
+        title: 'Padding Bottom',
+        defaultValue: 22,
+        extra: {
+            min: 0,
+            max: 100
+        }
+    }),
+    paddingLeft: new NumberSetting({
+        title: 'Padding Left',
+        defaultValue: 0,
+        extra: {
+            min: 0,
+            max: 100
+        }
+    }),
+    paddingRight: new NumberSetting({
+        title: 'Padding Right',
+        defaultValue: 0,
+        extra: {
+            min: 0,
+            max: 100
+        }
+    })
+});

package/dist/elements/products/productsElement.svelte

@@ -0,0 +1,283 @@
+<script lang="ts">
+	import type { ProductsSettingsMap } from './settings';
+
+	let { settings }: { settings: ProductsSettingsMap } = $props();
+
+	interface Product {
+		_id: string;
+		title: string;
+		description: string;
+		thumbnail: string;
+		rating: number;
+		stock: number;
+		brand: string;
+		price: {
+			current: number;
+			currency: string;
+			beforeDiscount: number;
+			discountPercentage: number;
+		};
+		category: {
+			id: string;
+			name: string;
+			image: string;
+		};
+	}
+
+	let products = $state<Product[]>([]);
+	let loading = $state(false);
+	let error = $state('');
+
+	let lastUrl = $state('');
+
+	$effect(() => {
+		const url = settings.apiUrl;
+		if (!url || url === lastUrl) return;
+		lastUrl = url;
+		fetchProducts(url);
+	});
+
+	async function fetchProducts(url: string) {
+		loading = true;
+		error = '';
+		try {
+			const res = await fetch(url);
+			if (!res.ok) throw new Error(`HTTP ${res.status}`);
+			const data = await res.json();
+			products = data.products ?? data.data ?? (Array.isArray(data) ? data : []);
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to fetch';
+			products = [];
+		} finally {
+			loading = false;
+		}
+	}
+
+	function formatCurrency(amount: number, currency: string) {
+		return `${currency === 'USD' ? '$' : currency} ${amount}`;
+	}
+
+	function renderStars(rating: number): string {
+		const full = Math.floor(rating);
+		const half = rating - full >= 0.5 ? 1 : 0;
+		const empty = 5 - full - half;
+		return '★'.repeat(full) + (half ? '½' : '') + '☆'.repeat(empty);
+	}
+</script>
+
+<div class="products-wrapper" style="margin-top: {settings.marginTop}px;">
+	{#if !settings.apiUrl}
+		<div class="placeholder">
+			<span class="placeholder-icon">&#128722;</span>
+			<span class="placeholder-text">Enter an API URL in settings to load products</span>
+		</div>
+	{:else if loading}
+		<div class="placeholder">
+			<span class="placeholder-text">Loading products...</span>
+		</div>
+	{:else if error}
+		<div class="placeholder error">
+			<span class="placeholder-text">Error: {error}</span>
+		</div>
+	{:else if products.length === 0}
+		<div class="placeholder">
+			<span class="placeholder-text">No products found</span>
+		</div>
+	{:else}
+		<div class="products-grid" style="grid-template-columns: repeat({settings.columns}, 1fr);">
+			{#each products as product (product._id)}
+				<div
+					class="product-card"
+					style="background: {settings.cardBackground}; border: 1px solid {settings.cardBorder};"
+				>
+					<div class="product-image-wrap">
+						<img src={product.thumbnail} alt={product.title} class="product-image" />
+						{#if product.price.discountPercentage > 0}
+							<span
+								class="discount-badge"
+								style="background: {settings.discountBadgeBackground}; color: {settings.discountBadgeColor};"
+							>
+								-{product.price.discountPercentage}%
+							</span>
+						{/if}
+					</div>
+
+					<div class="product-info">
+						<span class="product-brand">{product.brand}</span>
+						<h4 class="product-title" style="color: {settings.titleColor};">
+							{product.title}
+						</h4>
+						<p class="product-desc" style="color: {settings.descriptionColor};">
+							{product.description.length > 80
+								? product.description.slice(0, 80) + '...'
+								: product.description}
+						</p>
+
+						<div class="product-rating" style="color: {settings.ratingColor};">
+							{renderStars(product.rating)}
+							<span class="rating-num">{product.rating.toFixed(1)}</span>
+						</div>
+
+						<div class="product-price">
+							<span class="current-price" style="color: {settings.priceColor};">
+								{formatCurrency(product.price.current, product.price.currency)}
+							</span>
+							{#if product.price.beforeDiscount > product.price.current}
+								<span class="old-price" style="color: {settings.oldPriceColor};">
+									{formatCurrency(product.price.beforeDiscount, product.price.currency)}
+								</span>
+							{/if}
+						</div>
+					</div>
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.products-wrapper {
+		max-width: 750px;
+		width: 100%;
+		margin: 0 auto;
+	}
+
+	.placeholder {
+		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);
+		border-radius: 8px;
+		background: rgba(255, 255, 255, 0.03);
+	}
+
+	.placeholder.error {
+		border-color: rgba(239, 68, 68, 0.3);
+	}
+
+	.placeholder-icon {
+		font-size: 2rem;
+		opacity: 0.3;
+	}
+
+	.placeholder-text {
+		font-size: 0.8rem;
+		color: rgba(255, 255, 255, 0.3);
+		text-align: center;
+	}
+
+	.products-grid {
+		display: grid;
+		gap: 14px;
+	}
+
+	.product-card {
+		border-radius: 10px;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.product-image-wrap {
+		position: relative;
+		width: 100%;
+		aspect-ratio: 4/3;
+		overflow: hidden;
+		background: rgba(0, 0, 0, 0.2);
+	}
+
+	.product-image {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.discount-badge {
+		position: absolute;
+		top: 8px;
+		right: 8px;
+		padding: 3px 8px;
+		border-radius: 6px;
+		font-size: 0.7rem;
+		font-weight: 700;
+	}
+
+	.product-info {
+		padding: 14px;
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+		flex: 1;
+	}
+
+	.product-brand {
+		font-size: 0.65rem;
+		text-transform: uppercase;
+		letter-spacing: 0.08em;
+		color: rgba(255, 255, 255, 0.35);
+		font-weight: 600;
+	}
+
+	.product-title {
+		margin: 0;
+		font-size: 0.85rem;
+		font-weight: 600;
+		line-height: 1.3;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+
+	.product-desc {
+		margin: 0;
+		font-size: 0.75rem;
+		line-height: 1.4;
+	}
+
+	.product-rating {
+		font-size: 0.75rem;
+		display: flex;
+		align-items: center;
+		gap: 4px;
+	}
+
+	.rating-num {
+		font-size: 0.7rem;
+		opacity: 0.6;
+		color: rgba(255, 255, 255, 0.5);
+	}
+
+	.product-price {
+		display: flex;
+		align-items: baseline;
+		gap: 8px;
+		margin-top: auto;
+		padding-top: 6px;
+	}
+
+	.current-price {
+		font-size: 1rem;
+		font-weight: 700;
+	}
+
+	.old-price {
+		font-size: 0.8rem;
+		text-decoration: line-through;
+	}
+
+	@media (max-width: 640px) {
+		.products-grid {
+			grid-template-columns: repeat(2, 1fr) !important;
+		}
+	}
+
+	@media (max-width: 400px) {
+		.products-grid {
+			grid-template-columns: 1fr !important;
+		}
+	}
+</style>

package/dist/elements/products/productsElement.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ProductsSettingsMap } from './settings';
+type $$ComponentProps = {
+    settings: ProductsSettingsMap;
+};
+declare const ProductsElement: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProductsElement = ReturnType<typeof ProductsElement>;
+export default ProductsElement;

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

@@ -0,0 +1,16 @@
+import { ColorSetting, NumberSetting, TextSetting, Settings, type InferSettingsMapType } from '../../settings';
+export declare const productsSettings: Settings<{
+    marginTop: NumberSetting;
+    apiUrl: TextSetting;
+    columns: NumberSetting;
+    cardBackground: ColorSetting;
+    cardBorder: ColorSetting;
+    titleColor: ColorSetting;
+    descriptionColor: ColorSetting;
+    priceColor: ColorSetting;
+    oldPriceColor: ColorSetting;
+    discountBadgeBackground: ColorSetting;
+    discountBadgeColor: ColorSetting;
+    ratingColor: ColorSetting;
+}>;
+export type ProductsSettingsMap = InferSettingsMapType<typeof productsSettings>;

package/dist/elements/products/settings.js

@@ -0,0 +1,56 @@
+import { ColorSetting, NumberSetting, TextSetting, Settings } from '../../settings';
+export const productsSettings = new Settings('Products', {
+    marginTop: new NumberSetting({
+        title: 'Margin Top',
+        defaultValue: 0
+    }),
+    apiUrl: new TextSetting({
+        title: 'API URL',
+        defaultValue: ''
+    }),
+    columns: new NumberSetting({
+        title: 'Columns',
+        defaultValue: 3,
+        extra: {
+            min: 1,
+            max: 4,
+            step: 1
+        }
+    }),
+    cardBackground: new ColorSetting({
+        title: 'Card Background',
+        defaultValue: '#162D3F'
+    }),
+    cardBorder: new ColorSetting({
+        title: 'Card Border',
+        defaultValue: 'rgba(177, 202, 223, 0.1)'
+    }),
+    titleColor: new ColorSetting({
+        title: 'Title Color',
+        defaultValue: '#ffffff'
+    }),
+    descriptionColor: new ColorSetting({
+        title: 'Description Color',
+        defaultValue: 'rgba(255, 255, 255, 0.6)'
+    }),
+    priceColor: new ColorSetting({
+        title: 'Price Color',
+        defaultValue: '#4ade80'
+    }),
+    oldPriceColor: new ColorSetting({
+        title: 'Old Price Color',
+        defaultValue: 'rgba(255, 255, 255, 0.35)'
+    }),
+    discountBadgeBackground: new ColorSetting({
+        title: 'Discount Badge Background',
+        defaultValue: '#ef4444'
+    }),
+    discountBadgeColor: new ColorSetting({
+        title: 'Discount Badge Text Color',
+        defaultValue: '#ffffff'
+    }),
+    ratingColor: new ColorSetting({
+        title: 'Rating Star Color',
+        defaultValue: '#f0c845'
+    })
+});