@papu1337/builder 0.0.4 → 1.0.1

package/dist/elements/terms/settings.js

@@ -1,39 +1,32 @@
-import { ColorSetting, NumberSetting, TextSetting, ListSetting, Settings } from '../../settings';
+import { Settings, NumberSetting, ColorSetting, SelectSetting, TranslatableSetting, RepeaterSetting } from '../../settings';
+const sectionFactory = () => new Settings('Section', {
+    title: new TranslatableSetting({ title: 'Title', defaultValue: { en: 'Eligibility' } }),
+    lines: new TranslatableSetting({
+        title: 'Lines (one per row)',
+        defaultValue: { en: 'Promotion is available to verified accounts only.' }
+    })
+});
 export const termsSettings = new Settings('Terms', {
-    marginTop: new NumberSetting({
-        title: 'Margin Top',
-        defaultValue: 0
-    }),
-    title: new TextSetting({
-        title: 'Title',
-        defaultValue: 'Terms & Conditions'
-    }),
-    sections: new ListSetting({
-        title: 'Sections',
-        defaultValue: [
-            { title: 'About the Promotion', content: 'Enter promotion details here.' },
-            { title: 'Bonus Game Rules and Prizes', content: 'Enter bonus game rules here.' }
-        ],
+    marginTop: new NumberSetting({ title: 'Margin Top', defaultValue: 0, extra: { min: 0, max: 200 } }),
+    title: new TranslatableSetting({ title: 'Title', defaultValue: { en: 'Terms and conditions' } }),
+    panelBgColor: new ColorSetting({ title: 'Panel Background', defaultValue: '#162D3F' }),
+    borderColor: new ColorSetting({ title: 'Border', defaultValue: 'rgba(177,202,223,0.05)' }),
+    textColor: new ColorSetting({ title: 'Text Color', defaultValue: '#B1CADF' }),
+    openByDefault: new SelectSetting({
+        title: 'Open by default',
+        defaultValue: 'true',
         extra: {
-            addButtonText: '+ Add Section',
-            titlePlaceholder: 'Section title',
-            contentPlaceholder: 'Section content'
+            options: [
+                { label: 'Closed', value: 'false' },
+                { label: 'Open', value: 'true' }
+            ]
         }
     }),
-    backgroundColor: new ColorSetting({
-        title: 'Background Color',
-        defaultValue: '#162D3F'
-    }),
-    borderColor: new ColorSetting({
-        title: 'Border Color',
-        defaultValue: 'rgba(177,202,223,0.1)'
-    }),
-    textColor: new ColorSetting({
-        title: 'Text Color',
-        defaultValue: '#ffffff'
-    }),
-    arrowBackground: new ColorSetting({
-        title: 'Arrow Background',
-        defaultValue: '#33475b'
+    sections: new RepeaterSetting({
+        title: 'Sections',
+        itemLabel: 'Section',
+        addButtonText: '+ Add section',
+        factory: sectionFactory,
+        count: 2
     })
 });

package/dist/elements/terms/termsElement.svelte

@@ -1,124 +1,209 @@
 <script lang="ts">
 	import type { TermsSettingsMap } from './settings';
+	import GradientBorder from '../_shared/GradientBorder.svelte';
+	import Arrow from '../_shared/Arrow.svelte';
 
 	let { settings }: { settings: TermsSettingsMap } = $props();
 
-	let expandedSet = $state<Set<number>>(new Set());
+	let activeMain = $state(false);
+	let activeSection = $state<number | null>(null);
 
-	function toggle(index: number) {
-		if (expandedSet.has(index)) {
-			expandedSet.delete(index);
-		} else {
-			expandedSet.add(index);
-		}
-		expandedSet = new Set(expandedSet);
-	}
-</script>
+	$effect(() => {
+		activeMain = settings.openByDefault === 'true';
+	});
 
-<div class="terms-wrapper" style="margin-top: {settings.marginTop}px;">
-	<div
-		class="terms-container"
-		style="background-color: {settings.backgroundColor}; border: 1px solid {settings.borderColor};"
-	>
-		<div class="terms-main-header" style="color: {settings.textColor};">
-			<span class="terms-main-title">{settings.title}</span>
-		</div>
+	const toggleMain = (): void => {
+		activeMain = !activeMain;
+	};
+
+	const toggleSection = (index: number): void => {
+		activeSection = activeSection === index ? null : index;
+	};
+
+	const linesOf = (raw: string): string[] => raw.split('\n').filter((line) => line.length > 0);
+</script>
 
-		{#each settings.sections as section, i}
-			<div class="terms-section" style="border-color: {settings.borderColor};">
-				<button class="terms-header" onclick={() => toggle(i)} style="color: {settings.textColor};">
-					<span class="terms-title">{section.title}</span>
-					<div
-						class="terms-arrow"
-						class:rotated={expandedSet.has(i)}
-						style="background: {settings.arrowBackground};"
-					>
-						<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-							<path d="M8 11L3 5.5h10L8 11z" fill="currentColor" />
-						</svg>
-					</div>
+<div
+	class="terms-root"
+	style="margin-top: {settings.marginTop}px; --terms-text-color: {settings.textColor};"
+>
+	<GradientBorder className="terms-border" backgroundGradient={settings.borderColor}>
+		<div class="terms-panel" style="background: {settings.panelBgColor};">
+			<div class="terms-toggle">
+				<span class="terms-toggle-label">{settings.title}</span>
+				<button
+					type="button"
+					class="terms-toggle-icon"
+					aria-label={activeMain ? 'Collapse terms' : 'Expand terms'}
+					onclick={toggleMain}
+				>
+					<Arrow stroke={settings.textColor} width={19} height={17} direction={activeMain ? 'up' : 'down'} />
 				</button>
-				{#if expandedSet.has(i)}
-					<div class="terms-content" style="color: {settings.textColor};">
-						<p>{section.content}</p>
-					</div>
-				{/if}
 			</div>
-		{/each}
-	</div>
+
+			{#if activeMain}
+				<div class="terms-list">
+					{#each settings.sections as section, index (index)}
+						<div class="terms-section">
+							<div class="section-toggle">
+								<span class="section-title">{section.title}</span>
+								<button
+									type="button"
+									class="section-icon"
+									class:section-icon--active={activeSection === index}
+									aria-label={activeSection === index ? 'Collapse section' : 'Expand section'}
+									onclick={() => toggleSection(index)}
+								>
+									<Arrow
+										stroke={settings.textColor}
+										width={19}
+										height={17}
+										direction={activeSection === index ? 'up' : 'down'}
+									/>
+								</button>
+							</div>
+							{#if activeSection === index}
+								<div class="section-body">
+									{#each linesOf(section.lines) as line, lineIndex (lineIndex)}
+										<p class="section-line">{line}</p>
+									{/each}
+								</div>
+							{/if}
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	</GradientBorder>
 </div>
 
 <style>
-	.terms-wrapper {
-		max-width: 750px;
+	.terms-root {
+		margin-left: auto;
+		margin-right: auto;
 		width: 100%;
-		margin: 0 auto;
+		max-width: 56rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
 	}
 
-	.terms-container {
-		border-radius: 8px;
+	:global(.terms-border) {
 		overflow: hidden;
+		border-radius: 8px;
 	}
 
-	.terms-main-header {
-		padding: 18px 20px;
-		border-bottom: 1px solid rgba(177, 202, 223, 0.1);
+	.terms-panel {
+		padding: 0 16px;
+		border-radius: inherit;
 	}
 
-	.terms-main-title {
-		font-size: 1.15rem;
-		font-weight: 600;
+	.terms-toggle {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		background: transparent;
+		border: none;
+		padding: 12px 0;
+		border-radius: 8px;
+		color: var(--terms-text-color, #b1cadf);
 	}
 
-	.terms-section {
-		border-top: 1px solid;
+	.terms-toggle-label {
+		font-size: 1.125rem;
+		font-weight: 800;
+		line-height: 125%;
+		color: var(--terms-text-color, #b1cadf);
+	}
+
+	.terms-toggle-icon {
+		min-width: 30px;
+		min-height: 30px;
+		padding: 0;
+		margin: 0;
+		font: inherit;
+		color: inherit;
+		appearance: none;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 9999px;
+		background: rgba(228, 246, 255, 0.1);
+		border: 1px solid rgba(177, 202, 223, 0.1);
+		cursor: pointer;
+		transition: background 0.15s ease;
 	}
 
-	.terms-section:first-of-type {
-		border-top: none;
+	.terms-toggle-icon:hover {
+		background: rgba(228, 246, 255, 0.2);
 	}
 
-	.terms-header {
-		display: flex;
+	.terms-list {
+		margin-top: 1px;
+		padding: 1rem 0;
+		color: var(--terms-text-color, #fff);
+		border-radius: 0 0 8px 8px;
+	}
+
+	.terms-section {
+		overflow: hidden;
+		border-top: 1px solid rgba(177, 202, 223, 0.2);
+	}
+
+	.section-toggle {
 		width: 100%;
-		align-items: center;
+		display: flex;
 		justify-content: space-between;
-		padding: 16px 20px;
-		background: none;
+		align-items: center;
+		background: transparent;
 		border: none;
-		cursor: pointer;
+		padding: 12px 0;
+		border-radius: 8px;
+		color: var(--terms-text-color, #fff);
 	}
 
-	.terms-title {
-		font-size: 1rem;
-		font-weight: 500;
-		text-align: start;
+	.section-title {
+		text-align: left;
+		color: var(--terms-text-color, #b1cadf);
+		font-size: 0.95rem;
+		font-weight: 600;
 	}
 
-	.terms-arrow {
+	.section-icon {
+		height: 30px;
+		min-width: 30px;
+		padding: 0;
+		margin: 0;
+		font: inherit;
+		appearance: none;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 30px;
-		height: 30px;
-		border-radius: 50%;
-		padding: 4px;
-		transition: transform 0.2s ease;
-		flex-shrink: 0;
+		border-radius: 100%;
+		background: transparent;
+		border: 1px solid transparent;
+		color: inherit;
+		cursor: pointer;
+		transition: background 0.2s ease, border 0.2s ease;
 	}
 
-	.terms-arrow.rotated {
-		transform: rotate(180deg);
+	.section-icon--active {
+		background: #1a364c;
+		border-top: 0.5px solid rgba(94, 131, 161, 0.1);
+		backdrop-filter: blur(15px);
 	}
 
-	.terms-content {
-		padding: 0 20px 20px;
-		font-size: 0.875rem;
-		line-height: 1.6;
-		opacity: 0.8;
+	.section-body {
+		margin-top: 1px;
+		padding: 0 0 12px;
+		color: var(--terms-text-color, #fff);
 	}
 
-	.terms-content p {
-		margin: 0;
+	.section-line {
+		margin: 0 0 4px;
+		font-size: 14px;
+		color: var(--terms-text-color, #b1cadf);
+		line-height: 1.5;
 	}
 </style>

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

@@ -1,9 +1,11 @@
-import { TranslatableSetting, Settings, type InferSettingsMapType } from '../../settings';
+import { Settings, NumberSetting, SegmentSetting, type InferSettingsMapType } from '../../settings';
 export declare const textSettings: Settings<{
-    text: TranslatableSetting;
+    marginTop: NumberSetting;
+    align: SegmentSetting;
     typography: Settings<{
+        text: import("../../settings").TranslatableSetting;
         color: import("../../settings").ColorSetting;
-        fontSize: import("../../settings").NumberSetting;
+        fontSize: NumberSetting;
         fontFamily: import("../../settings").TextSetting;
         fontWeight: import("../../settings").SelectSetting;
     }>;

package/dist/elements/text/settings.js

@@ -1,12 +1,26 @@
-import { TranslatableSetting, Settings, createTypographySettings } from '../../settings';
+import { Settings, NumberSetting, SegmentSetting, TypographySettings } from '../../settings';
 export const textSettings = new Settings('Text', {
-    text: new TranslatableSetting({
-        title: 'Text',
-        defaultValue: { en: 'Enter your text here' }
+    marginTop: new NumberSetting({
+        title: 'Margin Top',
+        defaultValue: 0,
+        extra: { min: 0, max: 200 }
     }),
-    typography: new Settings('Typography', {
-        ...createTypographySettings({
-            fontFamily: 'Arial'
-        })
+    align: 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' }
+            ]
+        }
+    }),
+    typography: TypographySettings({
+        text: 'UEFA Champions League',
+        color: '#FFFFFF',
+        fontSize: 24,
+        fontWeight: '700',
+        colorGradient: true
     })
 });

package/dist/elements/text/textElement.svelte

@@ -2,31 +2,36 @@
 	import type { TextSettingsMap } from './settings';
 
 	let { settings }: { settings: TextSettingsMap } = $props();
+
+	const isGradient = $derived(/gradient\(/i.test(settings.typography.color));
+
+	const colorStyle = $derived(
+		isGradient
+			? `background-image: ${settings.typography.color}; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;`
+			: `color: ${settings.typography.color};`
+	);
 </script>
 
-<div class="text-wrapper">
-	<p
-		class="text-element"
-		style="
-			font-size: {settings.fontSize}px;
-			font-weight: {settings.fontWeight};
-			line-height: {settings.lineHeight};
-			letter-spacing: {settings.letterSpacing}px;
-		"
-	>
-		{settings.text}
-	</p>
-</div>
+<p
+	class="text-element"
+	style="
+		margin-top: {settings.marginTop}px;
+		text-align: {settings.align};
+		font-size: {settings.typography.fontSize}px;
+		font-weight: {settings.typography.fontWeight};
+		font-family: {settings.typography.fontFamily};
+		{colorStyle}
+	"
+>
+	{settings.typography.text}
+</p>
 
 <style>
-	.text-wrapper {
-		width: 100%;
-		margin-left: auto;
-		margin-right: auto;
-	}
-
 	.text-element {
-		margin: 0;
+		margin: 0 auto;
+		width: 100%;
+		max-width: 750px;
+		line-height: 1.4;
 		word-wrap: break-word;
 		white-space: pre-wrap;
 	}

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useTranslation.svelte';

package/dist/hooks/index.js

@@ -0,0 +1 @@
+export * from './useTranslation.svelte';

package/dist/hooks/useTranslation.svelte.d.ts

@@ -0,0 +1,9 @@
+export declare const languages: {
+    code: string;
+    label: string;
+}[];
+export type LanguageCode = (typeof languages)[number]['code'];
+export declare const locale: {
+    current: LanguageCode;
+};
+export declare function resolve(translations: Record<string, string>): string;

package/dist/hooks/useTranslation.svelte.js

@@ -0,0 +1,10 @@
+export const languages = [
+    { code: 'en', label: 'English' },
+    { code: 'es', label: 'Español' },
+    { code: 'fr', label: 'Français' },
+    { code: 'de', label: 'Deutsch' }
+];
+export const locale = $state({ current: 'en' });
+export function resolve(translations) {
+    return translations[locale.current] ?? translations['en'] ?? '';
+}

package/dist/index.d.ts

@@ -1,3 +1,6 @@
 export * from './settings/base.svelte';
+export * from './settings/mode.svelte';
 export * from './settings/implementation.svelte';
+export * from './settings/repeater.svelte';
+export * from './settings/groups';
 export * from './settings/types';

package/dist/index.js

@@ -1,3 +1,6 @@
 export * from './settings/base.svelte';
+export * from './settings/mode.svelte';
 export * from './settings/implementation.svelte';
+export * from './settings/repeater.svelte';
+export * from './settings/groups';
 export * from './settings/types';

package/dist/renderer/BuilderRenderer.svelte

@@ -3,7 +3,26 @@
 	import { componentRegistry } from './registry.js';
 	import { resolveSettings } from './resolve.js';
 
-	let { data, locale = 'en', containerClass = '', containerStyle = '' }: RendererProps = $props();
+	let {
+		data,
+		locale = 'en',
+		containerClass = '',
+		containerStyle = '',
+		mobileBreakpoint = 768
+	}: RendererProps = $props();
+
+	let isMobile = $state(false);
+
+	$effect(() => {
+		if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return;
+		const query = window.matchMedia(`(max-width: ${mobileBreakpoint}px)`);
+		const update = () => {
+			isMobile = query.matches;
+		};
+		update();
+		query.addEventListener('change', update);
+		return () => query.removeEventListener('change', update);
+	});
 
 	const globalStyle = $derived(() => {
 		const g = data.global;
@@ -13,6 +32,11 @@
 			`padding-bottom: ${g.paddingBottom ?? 0}px`,
 			`padding-left: ${g.paddingLeft ?? 0}px`,
 			`padding-right: ${g.paddingRight ?? 0}px`,
+			'display: flex',
+			'flex-direction: column',
+			'align-items: stretch',
+			'container-type: inline-size',
+			'container-name: page',
 			containerStyle
 		]
 			.filter(Boolean)
@@ -23,7 +47,11 @@
 		data.components
 			.map((entry) => ({
 				component: componentRegistry[entry.name],
-				settings: resolveSettings(entry.settings, locale),
+				settings: resolveSettings(
+					entry.settings,
+					locale,
+					isMobile ? entry.mobileSettings : undefined
+				),
 				name: entry.name
 			}))
 			.filter((c) => c.component !== undefined)

package/dist/renderer/registry.js

@@ -1,20 +1,14 @@
+import BannerElement from '../elements/banner/bannerElement.svelte';
 import TextElement from '../elements/text/textElement.svelte';
 import ButtonElement from '../elements/button/buttonElement.svelte';
-import AuthElement from '../elements/auth/authElement.svelte';
-import BannerElement from '../elements/banner/bannerElement.svelte';
-import BadgeElement from '../elements/badge/badgeElement.svelte';
-import CardsElement from '../elements/cards/cardsElement.svelte';
-import DividerElement from '../elements/divider/dividerElement.svelte';
+import HowItWorksElement from '../elements/howItWorks/howItWorksElement.svelte';
+import StepsElement from '../elements/steps/stepsElement.svelte';
 import TermsElement from '../elements/terms/termsElement.svelte';
-import ProductsElement from '../elements/products/productsElement.svelte';
 export const componentRegistry = {
+    banner: BannerElement,
     text: TextElement,
     button: ButtonElement,
-    auth: AuthElement,
-    banner: BannerElement,
-    badge: BadgeElement,
-    cards: CardsElement,
-    divider: DividerElement,
-    terms: TermsElement,
-    products: ProductsElement
+    howItWorks: HowItWorksElement,
+    steps: StepsElement,
+    terms: TermsElement
 };