@papu1337/builder 0.0.3

package/dist/settings/components/ListSettings.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+	import type { BaseSettingProps } from '../types';
+
+	interface ListItem {
+		title: string;
+		content: string;
+	}
+
+	interface ListExtra {
+		addButtonText?: string;
+		titlePlaceholder?: string;
+		contentPlaceholder?: string;
+	}
+
+	let {
+		title,
+		value,
+		onchange,
+		addButtonText = '+ Add Section',
+		titlePlaceholder = 'Section title',
+		contentPlaceholder = 'Section content'
+	}: BaseSettingProps<ListItem[]> & ListExtra = $props();
+
+	function addItem() {
+		onchange([...value, { title: '', content: '' }]);
+	}
+
+	function removeItem(index: number) {
+		const updated = value.filter((_, i) => i !== index);
+		onchange(updated);
+	}
+
+	function updateItem(index: number, field: keyof ListItem, val: string) {
+		const updated = value.map((item, i) => (i === index ? { ...item, [field]: val } : item));
+		onchange(updated);
+	}
+</script>
+
+<div class="setting-item">
+	<label for={title}>{title}</label>
+	<div class="list-items">
+		{#each value as item, i}
+			<div class="list-entry">
+				<div class="entry-header">
+					<span class="entry-index">{i + 1}</span>
+					<button class="remove-btn" onclick={() => removeItem(i)} title="Remove">
+						&#10005;
+					</button>
+				</div>
+				<input
+					type="text"
+					placeholder={titlePlaceholder}
+					value={item.title}
+					onchange={(e) => updateItem(i, 'title', e.currentTarget.value)}
+				/>
+				<textarea
+					placeholder={contentPlaceholder}
+					rows="3"
+					onchange={(e) => updateItem(i, 'content', e.currentTarget.value)}>{item.content}</textarea
+				>
+			</div>
+		{/each}
+	</div>
+	<button class="add-btn" onclick={addItem}>
+		{addButtonText}
+	</button>
+</div>
+
+<style>
+	.setting-item {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		padding: 10px 0;
+	}
+
+	label {
+		font-size: 0.75rem;
+		font-weight: 500;
+		color: var(--text-secondary);
+		text-transform: capitalize;
+	}
+
+	.list-items {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.list-entry {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+		padding: 10px;
+		background: var(--bg-elevated);
+		border: 1px solid var(--border-light);
+		border-radius: var(--radius-sm);
+	}
+
+	.entry-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.entry-index {
+		font-size: 0.7rem;
+		font-weight: 600;
+		color: var(--text-muted);
+	}
+
+	.remove-btn {
+		background: none;
+		border: none;
+		color: var(--text-muted);
+		cursor: pointer;
+		font-size: 0.75rem;
+		padding: 2px 6px;
+		border-radius: 4px;
+		transition: all 0.15s;
+	}
+
+	.remove-btn:hover {
+		background: rgba(255, 80, 80, 0.15);
+		color: #ff5050;
+	}
+
+	input,
+	textarea {
+		width: 100%;
+		padding: 7px 10px;
+		background: var(--bg-base, #1a1a2e);
+		border: 1px solid var(--border-light);
+		border-radius: var(--radius-sm);
+		color: var(--text-primary);
+		font-size: 0.82rem;
+		font-family: var(--font);
+		outline: none;
+		resize: vertical;
+		transition:
+			border-color var(--transition),
+			box-shadow var(--transition);
+	}
+
+	input:focus,
+	textarea:focus {
+		border-color: var(--accent);
+		box-shadow: 0 0 0 3px var(--accent-glow);
+	}
+
+	.add-btn {
+		padding: 8px 12px;
+		background: var(--bg-elevated);
+		border: 1px dashed var(--border-light);
+		border-radius: var(--radius-sm);
+		color: var(--text-secondary);
+		font-size: 0.8rem;
+		cursor: pointer;
+		transition: all 0.15s;
+	}
+
+	.add-btn:hover {
+		border-color: var(--accent);
+		color: var(--accent);
+		background: rgba(var(--accent-rgb, 99, 102, 241), 0.08);
+	}
+</style>

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

@@ -0,0 +1,14 @@
+import type { BaseSettingProps } from '../types';
+interface ListItem {
+    title: string;
+    content: string;
+}
+interface ListExtra {
+    addButtonText?: string;
+    titlePlaceholder?: string;
+    contentPlaceholder?: string;
+}
+type $$ComponentProps = BaseSettingProps<ListItem[]> & ListExtra;
+declare const ListSettings: import("svelte").Component<$$ComponentProps, {}, "">;
+type ListSettings = ReturnType<typeof ListSettings>;
+export default ListSettings;

package/dist/settings/components/NumberSettings.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import type { BaseSettingProps, NumberExtra } from '../types';
+
+	let { title, value, onchange, min, max, step }: BaseSettingProps<number> & NumberExtra = $props();
+</script>
+
+<div class="setting-item">
+	<div class="label-row">
+		<label for={title}>{title}</label>
+	</div>
+	<input
+		type="number"
+		{value}
+		{min}
+		{max}
+		{step}
+		onchange={(e) => onchange(Number(e.currentTarget.value))}
+	/>
+</div>
+
+<style>
+	.setting-item {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+		padding: 10px 0;
+	}
+
+	.label-row {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	label {
+		font-size: 0.75rem;
+		font-weight: 500;
+		color: var(--text-secondary);
+		text-transform: capitalize;
+	}
+
+	input[type='number'] {
+		width: 100%;
+		padding: 7px 10px;
+		background: var(--bg-elevated);
+		border: 1px solid var(--border-light);
+		border-radius: var(--radius-sm);
+		color: var(--text-primary);
+		font-size: 0.82rem;
+		font-family: var(--font);
+		outline: none;
+		transition:
+			border-color var(--transition),
+			box-shadow var(--transition);
+	}
+
+	input[type='number']::-webkit-inner-spin-button,
+	input[type='number']::-webkit-outer-spin-button {
+		opacity: 0.4;
+		filter: invert(1);
+	}
+
+	input[type='number']:focus {
+		border-color: var(--accent);
+		box-shadow: 0 0 0 3px var(--accent-glow);
+	}
+</style>

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

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

package/dist/settings/components/SelectSettings.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import type { BaseSettingProps, SelectExtra } from '../types';
+
+	let { title, value, onchange, options }: BaseSettingProps<string> & SelectExtra = $props();
+</script>
+
+<div class="setting-item">
+	<div class="label-row">
+		<label for={title}>{title}</label>
+	</div>
+	<select {value} onchange={(e) => onchange(e.currentTarget.value)}>
+		{#each options as opt}
+			<option value={opt.value} selected={opt.value === value}>{opt.label}</option>
+		{/each}
+	</select>
+</div>
+
+<style>
+	.setting-item {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+		padding: 10px 0;
+	}
+
+	.label-row {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	label {
+		font-size: 0.75rem;
+		font-weight: 500;
+		color: var(--text-secondary);
+		text-transform: capitalize;
+	}
+
+	select {
+		width: 100%;
+		padding: 7px 10px;
+		background: var(--bg-elevated);
+		border: 1px solid var(--border-light);
+		border-radius: var(--radius-sm);
+		color: var(--text-primary);
+		font-size: 0.82rem;
+		font-family: var(--font);
+		outline: none;
+		cursor: pointer;
+		appearance: none;
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+		background-repeat: no-repeat;
+		background-position: right 10px center;
+		padding-right: 30px;
+		transition:
+			border-color var(--transition),
+			box-shadow var(--transition);
+	}
+
+	select:focus {
+		border-color: var(--accent);
+		box-shadow: 0 0 0 3px var(--accent-glow);
+	}
+</style>

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

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

package/dist/settings/components/SettingsGroup.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface SettingsGroupProps {
+		title: string;
+		defaultOpen?: boolean;
+		children: Snippet;
+	}
+
+	let { title, defaultOpen = false, children }: SettingsGroupProps = $props();
+	// svelte-ignore state_referenced_locally
+	let isOpen = $state(defaultOpen);
+</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>
+
+<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));
+	}
+
+	.group-title {
+		font-size: 0.72rem;
+		font-weight: 600;
+		letter-spacing: 0.06em;
+		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);
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface SettingsGroupProps {
+    title: string;
+    defaultOpen?: boolean;
+    children: Snippet;
+}
+declare const SettingsGroup: import("svelte").Component<SettingsGroupProps, {}, "">;
+type SettingsGroup = ReturnType<typeof SettingsGroup>;
+export default SettingsGroup;

package/dist/settings/components/TextSettings.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { BaseSettingProps } from '../types.js';
+
+	let { value, title, onchange }: BaseSettingProps<string> = $props();
+</script>
+
+<label for={title}>{title}</label>
+<input type="text" bind:value onchange={() => onchange(value)} />

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

@@ -0,0 +1,4 @@
+import type { BaseSettingProps } from '../types.js';
+declare const TextSettings: import("svelte").Component<BaseSettingProps<string>, {}, "">;
+type TextSettings = ReturnType<typeof TextSettings>;
+export default TextSettings;

package/dist/settings/components/TranslatableSettings.svelte

@@ -0,0 +1,208 @@
+<script lang="ts">
+	import { languages, locale } from '../../../hooks/useTranslation.svelte.js';
+
+	interface Props {
+		value: Record<string, string>;
+		title: string;
+		onchange: (value: Record<string, string>) => void;
+	}
+
+	let { value, title, onchange }: Props = $props();
+	let isExpanded = $state(false);
+
+	const sortedLanguages = $derived(() => {
+		const current = languages.find((l) => l.code === locale.current);
+		const rest = languages.filter((l) => l.code !== locale.current);
+		return current ? [current, ...rest] : languages;
+	});
+
+	function handleInput(code: string, text: string): void {
+		onchange({ ...value, [code]: text });
+	}
+</script>
+
+<div class="translatable-setting">
+	<button class="translatable-header" onclick={() => (isExpanded = !isExpanded)}>
+		<label>{title}</label>
+		<div class="header-right">
+			<span class="current-lang-badge">{locale.current.toUpperCase()}</span>
+			<svg
+				class="chevron"
+				class:rotated={isExpanded}
+				width="12"
+				height="12"
+				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>
+		</div>
+	</button>
+
+	{#if !isExpanded}
+		<div class="single-input">
+			<input
+				type="text"
+				value={value[locale.current] ?? ''}
+				onchange={(e) => handleInput(locale.current, (e.currentTarget as HTMLInputElement).value)}
+				placeholder="Enter {title.toLowerCase()}..."
+			/>
+		</div>
+	{:else}
+		<div class="lang-inputs">
+			{#each sortedLanguages() as lang}
+				{@const isActive = lang.code === locale.current}
+				<div class="lang-row" class:active={isActive}>
+					<span class="lang-badge" class:active={isActive}>{lang.code.toUpperCase()}</span>
+					<input
+						type="text"
+						value={value[lang.code] ?? ''}
+						onchange={(e) => handleInput(lang.code, (e.currentTarget as HTMLInputElement).value)}
+						placeholder={isActive ? `Enter ${title.toLowerCase()}...` : `${lang.label}...`}
+					/>
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.translatable-setting {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+		padding: 10px 0;
+	}
+
+	.translatable-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		background: none;
+		border: none;
+		padding: 0;
+		cursor: pointer;
+		font-family: inherit;
+		width: 100%;
+	}
+
+	.translatable-header label {
+		font-size: 0.75rem;
+		font-weight: 500;
+		color: var(--text-secondary);
+		text-transform: capitalize;
+		pointer-events: none;
+	}
+
+	.header-right {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	.current-lang-badge {
+		font-size: 0.65rem;
+		font-weight: 600;
+		color: var(--accent);
+		background: var(--accent-subtle);
+		padding: 1px 6px;
+		border-radius: 3px;
+		letter-spacing: 0.05em;
+	}
+
+	.chevron {
+		color: var(--text-muted);
+		transition: transform 0.2s ease;
+	}
+
+	.chevron.rotated {
+		transform: rotate(180deg);
+	}
+
+	.single-input input {
+		width: 100%;
+		box-sizing: border-box;
+		padding: 8px 10px;
+		background: var(--bg-elevated);
+		border: 1px solid var(--border-light);
+		border-radius: var(--radius-sm);
+		font-size: 0.78rem;
+		color: var(--text-primary);
+		font-family: inherit;
+		outline: none;
+		transition: border-color var(--transition);
+	}
+
+	.single-input input:focus {
+		border-color: var(--accent);
+		box-shadow: 0 0 0 3px var(--accent-glow);
+	}
+
+	.lang-inputs {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		border: 1px solid var(--border-light);
+		border-radius: var(--radius-sm);
+		padding: 6px;
+		background: var(--bg-elevated);
+	}
+
+	.lang-row {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.lang-row.active {
+		order: -1;
+	}
+
+	.lang-badge {
+		font-size: 0.6rem;
+		font-weight: 600;
+		letter-spacing: 0.05em;
+		color: var(--text-muted);
+		background: var(--bg-surface);
+		border: 1px solid var(--border-light);
+		padding: 2px 6px;
+		border-radius: 3px;
+		flex-shrink: 0;
+		min-width: 24px;
+		text-align: center;
+	}
+
+	.lang-badge.active {
+		color: var(--accent);
+		background: var(--accent-subtle);
+		border-color: var(--accent);
+	}
+
+	.lang-row input {
+		flex: 1;
+		min-width: 0;
+		padding: 6px 8px;
+		background: var(--bg-surface);
+		border: 1px solid var(--border-light);
+		border-radius: var(--radius-sm);
+		font-size: 0.75rem;
+		color: var(--text-primary);
+		font-family: inherit;
+		outline: none;
+		transition: border-color var(--transition);
+	}
+
+	.lang-row input:focus {
+		border-color: var(--accent);
+		box-shadow: 0 0 0 2px var(--accent-glow);
+	}
+
+	.lang-row input::placeholder {
+		color: var(--text-muted);
+		font-style: italic;
+	}
+</style>

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

@@ -0,0 +1,8 @@
+interface Props {
+    value: Record<string, string>;
+    title: string;
+    onchange: (value: Record<string, string>) => void;
+}
+declare const TranslatableSettings: import("svelte").Component<Props, {}, "">;
+type TranslatableSettings = ReturnType<typeof TranslatableSettings>;
+export default TranslatableSettings;