@papu1337/builder 0.0.4 → 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

@@ -19,8 +19,8 @@
 	.setting-item {
 		display: flex;
 		flex-direction: column;
-		gap: 6px;
-		padding: 10px 0;
+		gap: 8px;
+		padding: 12px 0;
 	}
 
 	.label-row {
@@ -30,20 +30,19 @@
 	}
 
 	label {
-		font-size: 0.75rem;
+		font-size: 0.8rem;
 		font-weight: 500;
 		color: var(--text-secondary);
-		text-transform: capitalize;
 	}
 
 	select {
 		width: 100%;
-		padding: 7px 10px;
+		padding: 9px 11px;
 		background: var(--bg-elevated);
 		border: 1px solid var(--border-light);
-		border-radius: var(--radius-sm);
+		border-radius: var(--radius-md);
 		color: var(--text-primary);
-		font-size: 0.82rem;
+		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: 10px 12px;
-		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 {
+	.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: 4px 12px 8px;
-		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

@@ -4,5 +4,55 @@
 	let { value, title, onchange }: BaseSettingProps<string> = $props();
 </script>
 
-<label for={title}>{title}</label>
-<input type="text" bind:value onchange={() => onchange(value)} />
+<div class="setting-item">
+	<div class="label-row">
+		<label for={title}>{title}</label>
+	</div>
+	<input
+		type="text"
+		id={title}
+		bind:value
+		onchange={() => onchange(value)}
+	/>
+</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);
+	}
+
+	input[type='text'] {
+		width: 100%;
+		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.8rem;
+		font-family: var(--font);
+		outline: none;
+		transition:
+			border-color var(--transition),
+			box-shadow var(--transition);
+	}
+
+	input[type='text']:focus {
+		border-color: var(--accent);
+		box-shadow: 0 0 0 3px var(--accent-glow);
+	}
+</style>

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>;
@@ -23,7 +23,7 @@
 
 <div class="translatable-setting">
 	<button class="translatable-header" onclick={() => (isExpanded = !isExpanded)}>
-		<label>{title}</label>
+		<span class="title-label">{title}</span>
 		<div class="header-right">
 			<span class="current-lang-badge">{locale.current.toUpperCase()}</span>
 			<svg
@@ -74,8 +74,8 @@
 	.translatable-setting {
 		display: flex;
 		flex-direction: column;
-		gap: 6px;
-		padding: 10px 0;
+		gap: 8px;
+		padding: 12px 0;
 	}
 
 	.translatable-header {
@@ -90,11 +90,10 @@
 		width: 100%;
 	}
 
-	.translatable-header label {
-		font-size: 0.75rem;
+	.translatable-header .title-label {
+		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: 8px 10px;
+		padding: 9px 11px;
 		background: var(--bg-elevated);
 		border: 1px solid var(--border-light);
-		border-radius: var(--radius-sm);
-		font-size: 0.78rem;
+		border-radius: var(--radius-md);
+		font-size: 0.8rem;
 		color: var(--text-primary);
 		font-family: inherit;
 		outline: none;
@@ -145,17 +144,17 @@
 	.lang-inputs {
 		display: flex;
 		flex-direction: column;
-		gap: 4px;
+		gap: 6px;
 		border: 1px solid var(--border-light);
-		border-radius: var(--radius-sm);
-		padding: 6px;
+		border-radius: var(--radius-md);
+		padding: 8px;
 		background: var(--bg-elevated);
 	}
 
 	.lang-row {
 		display: flex;
 		align-items: center;
-		gap: 8px;
+		gap: 10px;
 	}
 
 	.lang-row.active {
@@ -185,11 +184,11 @@
 	.lang-row input {
 		flex: 1;
 		min-width: 0;
-		padding: 6px 8px;
+		padding: 8px 10px;
 		background: var(--bg-surface);
 		border: 1px solid var(--border-light);
-		border-radius: var(--radius-sm);
-		font-size: 0.75rem;
+		border-radius: var(--radius-md);
+		font-size: 0.82rem;
 		color: var(--text-primary);
 		font-family: inherit;
 		outline: none;

package/dist/settings/components/UploadSettings.svelte

@@ -51,15 +51,14 @@
 	.setting-item {
 		display: flex;
 		flex-direction: column;
-		gap: 8px;
-		padding: 10px 0;
+		gap: 10px;
+		padding: 12px 0;
 	}
 
 	label:not(.upload-zone):not(.replace-btn) {
-		font-size: 0.75rem;
+		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);
 	}
@@ -142,11 +141,11 @@
 		display: inline-flex;
 		align-items: center;
 		gap: 5px;
-		padding: 6px 12px;
+		padding: 8px 14px;
 		background: var(--accent);
 		color: #fff;
-		border-radius: var(--radius-sm);
-		font-size: 0.75rem;
+		border-radius: var(--radius-md);
+		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;
+}