@papu1337/builder 0.0.4 → 1.0.1

package/dist/settings/repeater.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Component } from 'svelte';
+import { Settings } from './base.svelte';
+import type { SettingMap } from './types';
+export declare class RepeaterSetting<T extends SettingMap = SettingMap> {
+    readonly title: string;
+    readonly itemLabel: string;
+    readonly addButtonText: string;
+    readonly factory: (index: number) => Settings<T>;
+    readonly component: Component<Record<string, unknown>>;
+    items: Settings<T>[];
+    onItemsChange: ((oldItems: Settings<T>[]) => void) | null;
+    constructor(options: {
+        title: string;
+        itemLabel?: string;
+        addButtonText?: string;
+        factory: (index: number) => Settings<T>;
+        count?: number;
+    });
+    addItem(): void;
+    removeItem(index: number): void;
+    moveItem(from: number, to: number): void;
+    getProps(): Record<string, unknown>;
+    clone(): RepeaterSetting<T>;
+    resolvedValues(): unknown[];
+}
+export declare function isRepeaterSetting(entry: unknown): entry is RepeaterSetting;

package/dist/settings/repeater.svelte.js

@@ -0,0 +1,70 @@
+import { Settings } from './base.svelte';
+import RepeaterSettingUI from './components/RepeaterSettings.svelte';
+export class RepeaterSetting {
+    title;
+    itemLabel;
+    addButtonText;
+    factory;
+    component = RepeaterSettingUI;
+    items = $state([]);
+    onItemsChange = null;
+    constructor(options) {
+        this.title = options.title;
+        this.itemLabel = options.itemLabel ?? 'Item';
+        this.addButtonText = options.addButtonText ?? `+ Add ${this.itemLabel}`;
+        this.factory = options.factory;
+        const count = options.count ?? 0;
+        const initial = [];
+        for (let index = 0; index < count; index++)
+            initial.push(options.factory(index));
+        this.items = initial;
+    }
+    addItem() {
+        const oldItems = this.items;
+        this.items = [...this.items, this.factory(this.items.length)];
+        this.onItemsChange?.(oldItems);
+    }
+    removeItem(index) {
+        const oldItems = this.items;
+        this.items = this.items.filter((_, i) => i !== index);
+        this.onItemsChange?.(oldItems);
+    }
+    moveItem(from, to) {
+        if (to < 0 || to >= this.items.length)
+            return;
+        const oldItems = this.items;
+        const next = [...this.items];
+        const [moved] = next.splice(from, 1);
+        next.splice(to, 0, moved);
+        this.items = next;
+        this.onItemsChange?.(oldItems);
+    }
+    getProps() {
+        return {
+            title: this.title,
+            itemLabel: this.itemLabel,
+            addButtonText: this.addButtonText,
+            items: this.items,
+            onadd: () => this.addItem(),
+            onremove: (index) => this.removeItem(index),
+            onmove: (from, to) => this.moveItem(from, to)
+        };
+    }
+    clone() {
+        const cloned = new RepeaterSetting({
+            title: this.title,
+            itemLabel: this.itemLabel,
+            addButtonText: this.addButtonText,
+            factory: this.factory,
+            count: 0
+        });
+        cloned.items = this.items.map((item) => item.clone());
+        return cloned;
+    }
+    resolvedValues() {
+        return this.items.map((item) => item.values);
+    }
+}
+export function isRepeaterSetting(entry) {
+    return entry instanceof RepeaterSetting;
+}

package/dist/settings/types.d.ts

@@ -3,6 +3,9 @@ export type BaseSettingProps<V> = {
     title: string;
     onchange: (value: V) => void;
     onpreview?: (value: V) => void;
+    isMobile?: boolean;
+    overridden?: boolean;
+    onreset?: () => void;
 };
 export interface SettingComponent {
     readonly title: string;
@@ -15,7 +18,15 @@ export interface SettingsGroupComponent {
     readonly entries: SettingMap;
     clone(): SettingsGroupComponent;
 }
-export type SettingMapEntry = SettingComponent | SettingsGroupComponent;
+export interface SettingRepeaterComponent {
+    readonly title: string;
+    readonly component: unknown;
+    readonly factory: (index: number) => unknown;
+    getProps(): Record<string, unknown>;
+    resolvedValues(): unknown[];
+    clone(): SettingRepeaterComponent;
+}
+export type SettingMapEntry = SettingComponent | SettingsGroupComponent | SettingRepeaterComponent;
 export type SettingMap = Record<string, SettingMapEntry>;
 type ResolveValue<E> = E extends {
     isTranslatable: true;
@@ -25,7 +36,11 @@ type ResolveValue<E> = E extends {
 export type InferSettingsMapType<T> = T extends {
     entries: infer E;
 } ? {
-    [K in keyof E]: ResolveValue<E[K]>;
+    [K in keyof E]: E[K] extends {
+        entries: unknown;
+    } ? InferSettingsMapType<E[K]> : E[K] extends {
+        factory: (...args: never[]) => infer S;
+    } ? InferSettingsMapType<S>[] : ResolveValue<E[K]>;
 } : never;
 export type NumberExtra = {
     min?: number;
@@ -48,4 +63,15 @@ export type SelectOption = {
 export type SelectExtra = {
     options: SelectOption[];
 };
+export type SegmentOption = {
+    label: string;
+    value: string;
+    icon?: string;
+};
+export type SegmentExtra = {
+    options: SegmentOption[];
+};
+export type ColorExtra = {
+    allowGradient?: boolean;
+};
 export {};

package/package.json

@@ -1,13 +1,14 @@
 {
 	"name": "@papu1337/builder",
-	"version": "0.0.4",
+	"version": "1.0.1",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync || echo ''",
 		"build:renderer": "vite build --config vite.config.renderer.ts",
-		"prepack": "svelte-kit sync && svelte-package && npm run build:renderer && publint",
+		"build:builder": "vite build --config vite.config.builder.ts",
+		"prepack": "svelte-kit sync && svelte-package && npm run build:renderer && npm run build:builder && publint",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check . && eslint .",
@@ -15,9 +16,9 @@
 		"format": "prettier --write .",
 		"test:unit": "vitest",
 		"test": "npm run test:unit -- --run",
-		"release": "npm run prepack && npm version patch && npm publish --access public",
-		"release:minor": "npm run prepack && npm version minor && npm publish --access public",
-		"release:major": "npm run prepack && npm version major && npm publish --access public"
+		"release": "npm run prepack && npm version patch --no-git-tag-version && npm publish --access public",
+		"release:minor": "npm run prepack && npm version minor --no-git-tag-version && npm publish --access public",
+		"release:major": "npm run prepack && npm version major --no-git-tag-version && npm publish --access public"
 	},
 	"files": [
 		"dist",
@@ -42,6 +43,11 @@
 		"./renderer/vanilla": {
 			"types": "./dist/renderer/types.d.ts",
 			"default": "./dist/renderer/renderer.vanilla.es.js"
+		},
+		"./builder": {
+			"types": "./dist/builder/index.d.ts",
+			"svelte": "./dist/builder/index.js",
+			"default": "./dist/builder/builder.vanilla.es.js"
 		}
 	},
 	"peerDependencies": {

package/dist/elements/auth/authElement.svelte

@@ -1,115 +0,0 @@
-<script lang="ts">
-	import type { AuthSettingsMap } from './settings';
-
-	let { settings }: { settings: AuthSettingsMap } = $props();
-</script>
-
-<div
-	class="auth-banner"
-	style="border-color: {settings.borderColor}; background: {settings.backgroundColor}; margin-top: {settings.marginTop}px; padding: {settings.padding}px;"
->
-	<div class="auth-left">
-		<div class="auth-icon" style="border-color: {settings.iconColor};">
-			<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
-				<path
-					d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"
-					fill={settings.iconColor}
-				/>
-			</svg>
-		</div>
-		<p class="auth-prompt" style="color: {settings.textColor};">
-			{settings.promptText}
-		</p>
-	</div>
-	<div class="auth-buttons">
-		<button
-			class="auth-btn login-btn"
-			style="background: {settings.loginButtonBackground}; color: {settings.loginButtonColor};"
-		>
-			{settings.loginButtonText}
-		</button>
-		<button
-			class="auth-btn signup-btn"
-			style="background: {settings.signupButtonBackground}; color: {settings.signupButtonColor};"
-		>
-			{settings.signupButtonText}
-		</button>
-	</div>
-</div>
-
-<style>
-	.auth-banner {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 20px;
-		border-radius: 10px;
-		border: 1.5px solid;
-		max-width: 750px;
-		width: 100%;
-		margin: 0 auto;
-	}
-
-	.auth-left {
-		display: flex;
-		align-items: center;
-		gap: 16px;
-		flex: 1;
-	}
-
-	.auth-icon {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 36px;
-		height: 36px;
-		border-radius: 50%;
-		border: 2px solid;
-		flex-shrink: 0;
-	}
-
-	.auth-prompt {
-		font-size: 0.95rem;
-		line-height: 1.4;
-		margin: 0;
-	}
-
-	.auth-buttons {
-		display: flex;
-		gap: 12px;
-		flex-shrink: 0;
-	}
-
-	.auth-btn {
-		height: 48px;
-		border-radius: 8px;
-		padding: 13px 32px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 14px;
-		font-weight: 600;
-		border: none;
-		cursor: pointer;
-		white-space: nowrap;
-	}
-
-	@media (max-width: 640px) {
-		.auth-banner {
-			flex-direction: column;
-			text-align: center;
-		}
-
-		.auth-left {
-			flex-direction: column;
-		}
-
-		.auth-buttons {
-			width: 100%;
-		}
-
-		.auth-btn {
-			flex: 1;
-		}
-	}
-</style>

package/dist/elements/auth/authElement.svelte.d.ts

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

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

@@ -1,25 +0,0 @@
-import { ColorSetting, NumberSetting, TextSetting, Settings, type InferSettingsMapType } from '../../settings';
-export declare const authSettings: Settings<{
-    layout: Settings<{
-        marginTop: NumberSetting;
-        padding: NumberSetting;
-    }>;
-    content: Settings<{
-        promptText: TextSetting;
-        loginButtonText: TextSetting;
-        signupButtonText: TextSetting;
-    }>;
-    colors: Settings<{
-        borderColor: ColorSetting;
-        backgroundColor: ColorSetting;
-        textColor: ColorSetting;
-        iconColor: ColorSetting;
-    }>;
-    buttons: Settings<{
-        loginButtonBackground: ColorSetting;
-        loginButtonColor: ColorSetting;
-        signupButtonBackground: ColorSetting;
-        signupButtonColor: ColorSetting;
-    }>;
-}>;
-export type AuthSettingsMap = InferSettingsMapType<typeof authSettings>;

package/dist/elements/auth/settings.js

@@ -1,63 +0,0 @@
-import { ColorSetting, NumberSetting, TextSetting, Settings } from '../../settings';
-export const authSettings = new Settings('Auth', {
-    layout: new Settings('Layout', {
-        marginTop: new NumberSetting({
-            title: 'Margin Top',
-            defaultValue: 0
-        }),
-        padding: new NumberSetting({
-            title: 'Padding',
-            defaultValue: 20
-        })
-    }),
-    content: new Settings('Content', {
-        promptText: new TextSetting({
-            title: 'Prompt Text',
-            defaultValue: 'Log in or sign up now to participate in the campaign!'
-        }),
-        loginButtonText: new TextSetting({
-            title: 'Login Button Text',
-            defaultValue: 'Log In'
-        }),
-        signupButtonText: new TextSetting({
-            title: 'Signup Button Text',
-            defaultValue: 'Sign Up'
-        })
-    }),
-    colors: new Settings('Colors', {
-        borderColor: new ColorSetting({
-            title: 'Border Color',
-            defaultValue: '#b8962a'
-        }),
-        backgroundColor: new ColorSetting({
-            title: 'Background Color',
-            defaultValue: '#1a2e3e'
-        }),
-        textColor: new ColorSetting({
-            title: 'Text Color',
-            defaultValue: '#ffffff'
-        }),
-        iconColor: new ColorSetting({
-            title: 'Icon Color',
-            defaultValue: '#ffffff'
-        })
-    }),
-    buttons: new Settings('Buttons', {
-        loginButtonBackground: new ColorSetting({
-            title: 'Login Button Background',
-            defaultValue: '#4a5568'
-        }),
-        loginButtonColor: new ColorSetting({
-            title: 'Login Button Text Color',
-            defaultValue: '#ffffff'
-        }),
-        signupButtonBackground: new ColorSetting({
-            title: 'Signup Button Background',
-            defaultValue: '#f0c845'
-        }),
-        signupButtonColor: new ColorSetting({
-            title: 'Signup Button Text Color',
-            defaultValue: '#000000'
-        })
-    })
-});

package/dist/elements/badge/badgeElement.svelte

@@ -1,48 +0,0 @@
-<script lang="ts">
-	import type { BadgeSettingsMap } from './settings';
-
-	let { settings }: { settings: BadgeSettingsMap } = $props();
-
-	const justifyMap: Record<string, string> = {
-		left: 'flex-start',
-		center: 'center',
-		right: 'flex-end'
-	};
-</script>
-
-<div
-	class="badge-wrapper"
-	style="justify-content: {justifyMap[settings.align] ??
-		'center'}; margin-top: {settings.marginTop}px;"
->
-	<span
-		class="badge"
-		style="
-			background: {settings.backgroundColor};
-			color: {settings.textColor};
-			border-radius: {settings.borderRadius}px;
-			padding: {settings.paddingY}px {settings.paddingX}px;
-			font-size: {settings.fontSize}px;
-		"
-	>
-		{settings.text}
-	</span>
-</div>
-
-<style>
-	.badge-wrapper {
-		display: flex;
-		max-width: 750px;
-		width: 100%;
-		margin: 0 auto;
-	}
-
-	.badge {
-		display: inline-block;
-		font-weight: 700;
-		text-transform: uppercase;
-		letter-spacing: 0.06em;
-		line-height: 1;
-		white-space: nowrap;
-	}
-</style>

package/dist/elements/badge/badgeElement.svelte.d.ts

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

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

@@ -1,13 +0,0 @@
-import { ColorSetting, NumberSetting, TextSetting, Settings, type InferSettingsMapType } from '../../settings';
-export declare const badgeSettings: Settings<{
-    marginTop: NumberSetting;
-    text: TextSetting;
-    backgroundColor: ColorSetting;
-    textColor: ColorSetting;
-    borderRadius: NumberSetting;
-    paddingX: NumberSetting;
-    paddingY: NumberSetting;
-    fontSize: NumberSetting;
-    align: TextSetting;
-}>;
-export type BadgeSettingsMap = InferSettingsMapType<typeof badgeSettings>;

package/dist/elements/badge/settings.js

@@ -1,57 +0,0 @@
-import { ColorSetting, NumberSetting, TextSetting, Settings } from '../../settings';
-export const badgeSettings = new Settings('Badge', {
-    marginTop: new NumberSetting({
-        title: 'Margin Top',
-        defaultValue: 0
-    }),
-    text: new TextSetting({
-        title: 'Badge Text',
-        defaultValue: 'NEW'
-    }),
-    backgroundColor: new ColorSetting({
-        title: 'Background Color',
-        defaultValue: '#f0c845'
-    }),
-    textColor: new ColorSetting({
-        title: 'Text Color',
-        defaultValue: '#000000'
-    }),
-    borderRadius: new NumberSetting({
-        title: 'Border Radius',
-        defaultValue: 20,
-        extra: {
-            min: 0,
-            max: 50,
-            step: 1
-        }
-    }),
-    paddingX: new NumberSetting({
-        title: 'Padding Horizontal',
-        defaultValue: 16,
-        extra: {
-            min: 0,
-            step: 1
-        }
-    }),
-    paddingY: new NumberSetting({
-        title: 'Padding Vertical',
-        defaultValue: 6,
-        extra: {
-            min: 0,
-            step: 1
-        }
-    }),
-    fontSize: new NumberSetting({
-        title: 'Font Size',
-        defaultValue: 12,
-        extra: {
-            min: 8,
-            max: 32,
-            step: 1
-        }
-    }),
-    align: new TextSetting({
-        title: 'Align (left / center / right)',
-        defaultValue: 'center'
-    })
-});

package/dist/elements/cards/cardsElement.svelte

@@ -1,136 +0,0 @@
-<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

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