@papu1337/builder 0.0.5 → 1.0.1

package/dist/elements/terms/termsElement.svelte

@@ -0,0 +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 activeMain = $state(false);
+	let activeSection = $state<number | null>(null);
+
+	$effect(() => {
+		activeMain = settings.openByDefault === 'true';
+	});
+
+	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>
+
+<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>
+			</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-root {
+		margin-left: auto;
+		margin-right: auto;
+		width: 100%;
+		max-width: 56rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	:global(.terms-border) {
+		overflow: hidden;
+		border-radius: 8px;
+	}
+
+	.terms-panel {
+		padding: 0 16px;
+		border-radius: inherit;
+	}
+
+	.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-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-toggle-icon:hover {
+		background: rgba(228, 246, 255, 0.2);
+	}
+
+	.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%;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		background: transparent;
+		border: none;
+		padding: 12px 0;
+		border-radius: 8px;
+		color: var(--terms-text-color, #fff);
+	}
+
+	.section-title {
+		text-align: left;
+		color: var(--terms-text-color, #b1cadf);
+		font-size: 0.95rem;
+		font-weight: 600;
+	}
+
+	.section-icon {
+		height: 30px;
+		min-width: 30px;
+		padding: 0;
+		margin: 0;
+		font: inherit;
+		appearance: none;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 100%;
+		background: transparent;
+		border: 1px solid transparent;
+		color: inherit;
+		cursor: pointer;
+		transition: background 0.2s ease, border 0.2s ease;
+	}
+
+	.section-icon--active {
+		background: #1a364c;
+		border-top: 0.5px solid rgba(94, 131, 161, 0.1);
+		backdrop-filter: blur(15px);
+	}
+
+	.section-body {
+		margin-top: 1px;
+		padding: 0 0 12px;
+		color: var(--terms-text-color, #fff);
+	}
+
+	.section-line {
+		margin: 0 0 4px;
+		font-size: 14px;
+		color: var(--terms-text-color, #b1cadf);
+		line-height: 1.5;
+	}
+</style>

package/dist/elements/terms/termsElement.svelte.d.ts

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

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

@@ -1,16 +1,13 @@
-import { ColorSetting, NumberSetting, TextSetting, SelectSetting, TranslatableSetting, Settings, type InferSettingsMapType } from '../../settings';
+import { Settings, NumberSetting, SegmentSetting, type InferSettingsMapType } from '../../settings';
 export declare const textSettings: Settings<{
-    text: TranslatableSetting;
-    style: Settings<{
-        color: ColorSetting;
+    marginTop: NumberSetting;
+    align: SegmentSetting;
+    typography: Settings<{
+        text: import("../../settings").TranslatableSetting;
+        color: import("../../settings").ColorSetting;
         fontSize: NumberSetting;
-        fontWeight: SelectSetting;
-        lineHeight: TextSetting;
-        align: SelectSetting;
-    }>;
-    layout: Settings<{
-        marginTop: NumberSetting;
-        marginBottom: NumberSetting;
+        fontFamily: import("../../settings").TextSetting;
+        fontWeight: import("../../settings").SelectSetting;
     }>;
 }>;
 export type TextSettingsMap = InferSettingsMapType<typeof textSettings>;

package/dist/elements/text/settings.js

@@ -1,56 +1,26 @@
-import { ColorSetting, NumberSetting, TextSetting, SelectSetting, TranslatableSetting, Settings } 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 }
     }),
-    style: new Settings('Style', {
-        color: new ColorSetting({
-            title: 'Text Color',
-            defaultValue: '#ffffff'
-        }),
-        fontSize: new NumberSetting({
-            title: 'Font Size',
-            defaultValue: 16,
-            extra: { min: 8, max: 96, step: 1 }
-        }),
-        fontWeight: new SelectSetting({
-            title: 'Font Weight',
-            defaultValue: '400',
-            extra: {
-                options: [
-                    { label: 'Normal', value: '400' },
-                    { label: 'Medium', value: '500' },
-                    { label: 'Semi Bold', value: '600' },
-                    { label: 'Bold', value: '700' },
-                    { label: 'Extra Bold', value: '800' }
-                ]
-            }
-        }),
-        lineHeight: new TextSetting({
-            title: 'Line Height',
-            defaultValue: '120%'
-        }),
-        align: new SelectSetting({
-            title: 'Text Align',
-            defaultValue: 'center',
-            extra: {
-                options: [
-                    { label: 'Left', value: 'left' },
-                    { label: 'Center', value: 'center' },
-                    { label: 'Right', value: 'right' }
-                ]
-            }
-        })
+    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' }
+            ]
+        }
     }),
-    layout: new Settings('Layout', {
-        marginTop: new NumberSetting({
-            title: 'Margin Top',
-            defaultValue: 0
-        }),
-        marginBottom: new NumberSetting({
-            title: 'Margin Bottom',
-            defaultValue: 0
-        })
+    typography: TypographySettings({
+        text: 'UEFA Champions League',
+        color: '#FFFFFF',
+        fontSize: 24,
+        fontWeight: '700',
+        colorGradient: true
     })
 });

package/dist/elements/text/textElement.svelte

@@ -2,36 +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"
-	style="margin-top: {settings.marginTop}px; margin-bottom: {settings.marginBottom}px;"
+<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}
+	"
 >
-	<p
-		class="text-element"
-		style="
-			color: {settings.color};
-			font-size: {settings.fontSize}px;
-			font-weight: {settings.fontWeight};
-			line-height: {settings.lineHeight};
-			text-align: {settings.align};
-		"
-	>
-		{settings.text}
-	</p>
-</div>
+	{settings.typography.text}
+</p>
 
 <style>
-	.text-wrapper {
+	.text-element {
+		margin: 0 auto;
 		width: 100%;
 		max-width: 750px;
-		margin-left: auto;
-		margin-right: auto;
-	}
-
-	.text-element {
-		margin: 0;
+		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,14 +1,14 @@
 import BannerElement from '../elements/banner/bannerElement.svelte';
-import BadgeElement from '../elements/badge/badgeElement.svelte';
 import TextElement from '../elements/text/textElement.svelte';
 import ButtonElement from '../elements/button/buttonElement.svelte';
-import AccordionElement from '../elements/accordion/accordionElement.svelte';
-import CtaCardElement from '../elements/ctaCard/ctaCardElement.svelte';
+import HowItWorksElement from '../elements/howItWorks/howItWorksElement.svelte';
+import StepsElement from '../elements/steps/stepsElement.svelte';
+import TermsElement from '../elements/terms/termsElement.svelte';
 export const componentRegistry = {
     banner: BannerElement,
-    badge: BadgeElement,
     text: TextElement,
     button: ButtonElement,
-    accordion: AccordionElement,
-    ctaCard: CtaCardElement
+    howItWorks: HowItWorksElement,
+    steps: StepsElement,
+    terms: TermsElement
 };