@papu1337/builder 0.0.5 → 1.0.1

package/dist/settings/components/SegmentSettings.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import type { BaseSettingProps, SegmentExtra } from '../types';
+
+	let { title, value, onchange, options }: BaseSettingProps<string> & SegmentExtra = $props();
+</script>
+
+<div class="setting-item">
+	<div class="label-row">
+		<label for={title}>{title}</label>
+	</div>
+	<div class="segment">
+		{#each options as opt (opt.value)}
+			<button
+				type="button"
+				class="segment__btn"
+				class:segment__btn--active={value === opt.value}
+				title={opt.label}
+				aria-label={opt.label}
+				onclick={() => onchange(opt.value)}
+			>
+				{#if opt.icon === 'align-left'}
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="15" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="15" y2="18" /></svg>
+				{:else if opt.icon === 'align-center'}
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="6" x2="18" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="6" y1="18" x2="18" y2="18" /></svg>
+				{:else if opt.icon === 'align-right'}
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="9" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="9" y1="18" x2="21" y2="18" /></svg>
+				{:else}
+					{opt.label}
+				{/if}
+			</button>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.setting-item {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		padding: 12px 0;
+	}
+
+	.label-row {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	label {
+		font-size: 0.8rem;
+		font-weight: 500;
+		color: var(--text-secondary);
+	}
+
+	.segment {
+		display: flex;
+		gap: 3px;
+		padding: 3px;
+		background: var(--bg-elevated);
+		border: 1px solid var(--border-light);
+		border-radius: var(--radius-md);
+	}
+
+	.segment__btn {
+		flex: 1;
+		height: 32px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: none;
+		background: transparent;
+		border-radius: 6px;
+		cursor: pointer;
+		color: var(--text-secondary);
+		font: inherit;
+		font-size: 0.8rem;
+		transition: background var(--transition), color var(--transition);
+	}
+
+	.segment__btn--active {
+		background: var(--bg-surface);
+		color: var(--accent);
+		box-shadow: var(--shadow-sm);
+	}
+</style>

package/dist/settings/components/SegmentSettings.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { BaseSettingProps, SegmentExtra } from '../types';
+type $$ComponentProps = BaseSettingProps<string> & SegmentExtra;
+declare const SegmentSettings: import("svelte").Component<$$ComponentProps, {}, "">;
+type SegmentSettings = ReturnType<typeof SegmentSettings>;
+export default SegmentSettings;

package/dist/settings/components/SelectSettings.svelte

@@ -33,17 +33,16 @@
 		font-size: 0.8rem;
 		font-weight: 500;
 		color: var(--text-secondary);
-		text-transform: capitalize;
 	}
 
 	select {
 		width: 100%;
-		padding: 10px 12px;
+		padding: 9px 11px;
 		background: var(--bg-elevated);
 		border: 1px solid var(--border-light);
 		border-radius: var(--radius-md);
 		color: var(--text-primary);
-		font-size: 0.85rem;
+		font-size: 0.8rem;
 		font-family: var(--font);
 		outline: none;
 		cursor: pointer;

package/dist/settings/components/SettingsGroup.svelte

@@ -7,88 +7,33 @@
 		children: Snippet;
 	}
 
-	let { title, defaultOpen = false, children }: SettingsGroupProps = $props();
-	// svelte-ignore state_referenced_locally
-	let isOpen = $state(defaultOpen);
+	let { title, children }: SettingsGroupProps = $props();
 </script>
 
-<div class="settings-group" class:open={isOpen}>
-	<button class="group-header" onclick={() => (isOpen = !isOpen)}>
-		<span class="group-title">{title}</span>
-		<svg
-			class="chevron"
-			class:rotated={isOpen}
-			width="14"
-			height="14"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			stroke-width="2"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		>
-			<polyline points="6 9 12 15 18 9" />
-		</svg>
-	</button>
-
-	{#if isOpen}
-		<div class="group-body">
-			{@render children()}
-		</div>
-	{/if}
+<div class="settings-group">
+	<div class="group-legend">{title}</div>
+	<div class="group-body">
+		{@render children()}
+	</div>
 </div>
 
 <style>
 	.settings-group {
-		border: 1px solid var(--border-light);
-		border-radius: var(--radius-sm);
-		overflow: hidden;
-		margin-bottom: 8px;
-		background: var(--bg-surface);
-	}
-
-	.settings-group.open {
-		border-color: var(--border);
-	}
-
-	.group-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		width: 100%;
-		padding: 12px 14px;
-		background: var(--bg-elevated);
-		border: none;
-		cursor: pointer;
-		font-family: inherit;
-		transition: background var(--transition);
-		user-select: none;
-	}
-
-	.group-header:hover {
-		background: var(--bg-hover, rgba(255, 255, 255, 0.06));
+		padding: 14px 0 2px;
+		margin-top: 6px;
+		border-top: 1px solid var(--border-light);
 	}
 
-	.group-title {
-		font-size: 0.78rem;
+	.group-legend {
+		font-size: 0.72rem;
 		font-weight: 600;
-		letter-spacing: 0.06em;
+		letter-spacing: 0.1em;
 		text-transform: uppercase;
-		color: var(--text-secondary);
-	}
-
-	.chevron {
 		color: var(--text-muted);
-		transition: transform 0.2s ease;
-		flex-shrink: 0;
-	}
-
-	.chevron.rotated {
-		transform: rotate(180deg);
 	}
 
 	.group-body {
-		padding: 6px 14px 10px;
-		border-top: 1px solid var(--border-light);
+		display: flex;
+		flex-direction: column;
 	}
 </style>

package/dist/settings/components/SettingsRenderer.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+	import { Settings } from '../base.svelte';
+	import SettingsGroup from './SettingsGroup.svelte';
+	import Self from './SettingsRenderer.svelte';
+
+	interface FieldLike {
+		component: Component<Record<string, unknown>>;
+		getProps(): Record<string, unknown>;
+	}
+
+	let { entries, defaultOpen = false }: { entries: Record<string, unknown>; defaultOpen?: boolean } =
+		$props();
+</script>
+
+{#each Object.entries(entries) as [key, entry] (key)}
+	{#if entry instanceof Settings}
+		<SettingsGroup title={entry.title} {defaultOpen}>
+			<Self entries={entry.entries} />
+		</SettingsGroup>
+	{:else}
+		{@const field = entry as FieldLike}
+		{@const props = field.getProps()}
+		{@const Field = field.component}
+		<div class="setting-item" class:setting-item--override={Boolean(props.overridden)}>
+			<Field {...props} />
+			{#if props.overridden}
+				<button
+					class="setting-reset"
+					type="button"
+					title="Reset to desktop value"
+					onclick={props.onreset as () => void}
+					aria-label="Reset to desktop value"
+				>
+					<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7v6h6" /><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13" /></svg>
+				</button>
+			{/if}
+		</div>
+	{/if}
+{/each}
+
+<style>
+	.setting-item {
+		position: relative;
+	}
+
+	.setting-item--override :global(input),
+	.setting-item--override :global(select),
+	.setting-item--override :global(.color-row),
+	.setting-item--override :global(.segment),
+	.setting-item--override :global(.number-box) {
+		border-color: var(--accent);
+	}
+
+	.setting-reset {
+		position: absolute;
+		top: 12px;
+		right: 0;
+		width: 20px;
+		height: 18px;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0;
+		border: none;
+		background: transparent;
+		color: var(--text-muted);
+		cursor: pointer;
+		border-radius: 4px;
+	}
+
+	.setting-reset:hover {
+		color: var(--accent);
+		background: var(--accent-subtle);
+	}
+</style>

package/dist/settings/components/SettingsRenderer.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Component } from 'svelte';
+type $$ComponentProps = {
+    entries: Record<string, unknown>;
+    defaultOpen?: boolean;
+};
+declare const SettingsRenderer: Component<$$ComponentProps, {}, "">;
+type SettingsRenderer = ReturnType<typeof SettingsRenderer>;
+export default SettingsRenderer;

package/dist/settings/components/TextSettings.svelte

@@ -34,17 +34,16 @@
 		font-size: 0.8rem;
 		font-weight: 500;
 		color: var(--text-secondary);
-		text-transform: capitalize;
 	}
 
 	input[type='text'] {
 		width: 100%;
-		padding: 10px 12px;
+		padding: 9px 11px;
 		background: var(--bg-elevated);
 		border: 1px solid var(--border-light);
 		border-radius: var(--radius-md);
 		color: var(--text-primary);
-		font-size: 0.85rem;
+		font-size: 0.8rem;
 		font-family: var(--font);
 		outline: none;
 		transition:

package/dist/settings/components/TranslatableSettings.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { languages, locale } from '../../../hooks/useTranslation.svelte.js';
+	import { languages, locale } from '../../hooks/useTranslation.svelte.js';
 
 	interface Props {
 		value: Record<string, string>;
@@ -94,7 +94,6 @@
 		font-size: 0.8rem;
 		font-weight: 500;
 		color: var(--text-secondary);
-		text-transform: capitalize;
 		pointer-events: none;
 	}
 
@@ -126,11 +125,11 @@
 	.single-input input {
 		width: 100%;
 		box-sizing: border-box;
-		padding: 10px 12px;
+		padding: 9px 11px;
 		background: var(--bg-elevated);
 		border: 1px solid var(--border-light);
 		border-radius: var(--radius-md);
-		font-size: 0.85rem;
+		font-size: 0.8rem;
 		color: var(--text-primary);
 		font-family: inherit;
 		outline: none;

package/dist/settings/components/UploadSettings.svelte

@@ -59,7 +59,6 @@
 		font-size: 0.8rem;
 		font-weight: 500;
 		color: var(--text-secondary);
-		text-transform: capitalize;
 	}
 
 	.upload-zone {
@@ -96,7 +95,7 @@
 	}
 
 	.upload-text {
-		font-size: 0.8rem;
+		font-size: 0.72rem;
 		font-weight: 500;
 		color: var(--text-secondary);
 	}
@@ -146,7 +145,7 @@
 		background: var(--accent);
 		color: #fff;
 		border-radius: var(--radius-md);
-		font-size: 0.8rem;
+		font-size: 0.72rem;
 		font-weight: 500;
 		cursor: pointer;
 		font-family: var(--font);

package/dist/settings/groups.d.ts

@@ -1,14 +1,30 @@
-import { ColorSetting, NumberSetting, SelectSetting, TextSetting } from './implementation.svelte';
+import { Settings } from "./base.svelte";
+import { ColorSetting, NumberSetting, SelectSetting, TextSetting, TranslatableSetting } from "./implementation.svelte";
 type TypographyDefaults = {
+    title?: string;
     color?: string;
     fontSize?: number;
     fontFamily?: string;
     fontWeight?: string;
+    text?: string;
+    colorGradient?: boolean;
 };
-export declare function createTypographySettings(defaults?: TypographyDefaults): {
-    readonly color: ColorSetting;
-    readonly fontSize: NumberSetting;
-    readonly fontFamily: TextSetting;
-    readonly fontWeight: SelectSetting;
-};
+export declare function TypographySettings(defaults?: TypographyDefaults): Settings<{
+    text: TranslatableSetting;
+    color: ColorSetting;
+    fontSize: NumberSetting;
+    fontFamily: TextSetting;
+    fontWeight: SelectSetting;
+}>;
+interface BorderDefaults {
+    title?: string;
+    borderWidth?: number;
+    borderColor?: string;
+    borderRadius?: number;
+}
+export declare const BorderSettings: (defaults?: BorderDefaults) => Settings<{
+    borderWidth: NumberSetting;
+    borderColor: ColorSetting;
+    borderRadius: NumberSetting;
+}>;
 export {};

package/dist/settings/groups.js

@@ -1,35 +1,59 @@
-import { ColorSetting, NumberSetting, SelectSetting, TextSetting } from './implementation.svelte';
-export function createTypographySettings(defaults) {
-    return {
+import { Settings } from "./base.svelte";
+import { ColorSetting, NumberSetting, SelectSetting, TextSetting, TranslatableSetting, } from "./implementation.svelte";
+export function TypographySettings(defaults) {
+    return new Settings(defaults?.title ?? "Typography", {
+        text: new TranslatableSetting({
+            title: "Text",
+            defaultValue: { en: defaults?.text ?? "Enter Text" },
+        }),
         color: new ColorSetting({
-            title: 'Color',
-            defaultValue: defaults?.color ?? '#000000'
+            title: "Color",
+            defaultValue: defaults?.color ?? "#000000",
+            extra: { allowGradient: defaults?.colorGradient ?? false },
         }),
         fontSize: new NumberSetting({
-            title: 'Font Size',
+            title: "Font Size",
             defaultValue: defaults?.fontSize ?? 16,
-            extra: { min: 8, max: 120, step: 1 }
+            extra: { min: 8, max: 120, step: 1 },
         }),
         fontFamily: new TextSetting({
-            title: 'Font Family',
-            defaultValue: defaults?.fontFamily ?? 'Arial'
+            title: "Font Family",
+            defaultValue: defaults?.fontFamily ?? "Arial",
         }),
         fontWeight: new SelectSetting({
-            title: 'Font Weight',
-            defaultValue: defaults?.fontWeight ?? '400',
+            title: "Font Weight",
+            defaultValue: defaults?.fontWeight ?? "400",
             extra: {
                 options: [
-                    { label: 'Thin', value: '100' },
-                    { label: 'Extra Light', value: '200' },
-                    { 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' }
-                ]
-            }
-        })
-    };
+                    { label: "Thin", value: "100" },
+                    { label: "Extra Light", value: "200" },
+                    { 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" },
+                ],
+            },
+        }),
+    });
 }
+export const BorderSettings = (defaults) => {
+    return new Settings(defaults?.title ?? "Border", {
+        borderWidth: new NumberSetting({
+            title: "Border Width",
+            defaultValue: defaults?.borderWidth ?? 0,
+            extra: { min: 0, max: 24, step: 1 },
+        }),
+        borderColor: new ColorSetting({
+            title: "Border Color",
+            defaultValue: defaults?.borderColor ?? "#000000",
+        }),
+        borderRadius: new NumberSetting({
+            title: "Border Radius",
+            defaultValue: defaults?.borderRadius ?? 0,
+            extra: { min: 0, max: 24, step: 1 },
+        }),
+    });
+};

package/dist/settings/implementation.svelte.js

@@ -2,6 +2,7 @@ import TextSettingUI from './components/TextSettings.svelte';
 import NumberSettingUI from './components/NumberSettings.svelte';
 import ColorSettingUI from './components/ColorSettings.svelte';
 import SelectSettingUI from './components/SelectSettings.svelte';
+import SegmentSettingUI from './components/SegmentSettings.svelte';
 import ListSettingUI from './components/ListSettings.svelte';
 import UploadSettingUI from './components/UploadSettings.svelte';
 import TranslatableSettingUI from './components/TranslatableSettings.svelte';
@@ -21,6 +22,9 @@ export class ListSetting extends Setting {
 export class SelectSetting extends Setting {
     component = SelectSettingUI;
 }
+export class SegmentSetting extends Setting {
+    component = SegmentSettingUI;
+}
 export class UploadSetting extends Setting {
     component = UploadSettingUI;
 }

package/dist/settings/index.d.ts

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

package/dist/settings/index.js

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

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

@@ -0,0 +1,4 @@
+export declare const settingsMode: {
+    device: "desktop" | "mobile";
+};
+export declare function setSettingsDevice(device: 'desktop' | 'mobile'): void;

package/dist/settings/mode.svelte.js

@@ -0,0 +1,4 @@
+export const settingsMode = $state({ device: 'desktop' });
+export function setSettingsDevice(device) {
+    settingsMode.device = device;
+}

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;
+}