@papu1337/builder 0.0.4 → 1.0.1

package/dist/settings/components/ColorSettings.svelte

@@ -1,21 +1,42 @@
 <script lang="ts">
-	import type { BaseSettingProps } from '../types';
+	import type { BaseSettingProps, ColorExtra } from '../types';
 
-	let { title, value, onchange, onpreview }: BaseSettingProps<string> = $props();
+	let { title, value, onchange, onpreview, allowGradient }: BaseSettingProps<string> & ColorExtra =
+		$props();
 
-	function handleTextInput(e: Event) {
-		const input = e.currentTarget as HTMLInputElement;
-		onchange(input.value);
+	const isGradientValue = (candidate: string): boolean => /gradient\(/i.test(candidate);
+	const gradient = $derived(isGradientValue(value));
+
+	const HEX_RE = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+
+	let from = $state('#E0AE5A');
+	let to = $state('#FFFFFF');
+	let angle = $state(90);
+
+	$effect(() => {
+		if (!isGradientValue(value)) return;
+		const hexes = value.match(/#[0-9a-fA-F]{3,8}/g);
+		const deg = value.match(/(-?\d+)deg/);
+		if (hexes?.[0]) from = hexes[0];
+		if (hexes?.[1]) to = hexes[1];
+		if (deg) angle = Number(deg[1]);
+	});
+
+	const build = (): string => `linear-gradient(${angle}deg, ${from}, ${to})`;
+
+	function setSolid(): void {
+		if (!gradient) return;
+		onchange(HEX_RE.test(from) ? from : '#FFFFFF');
 	}
 
-	function handlePickerInput(e: Event) {
-		const input = e.currentTarget as HTMLInputElement;
-		onpreview?.(input.value);
+	function setGradient(): void {
+		if (gradient) return;
+		if (HEX_RE.test(value)) from = value;
+		onchange(build());
 	}
 
-	function handlePickerChange(e: Event) {
-		const input = e.currentTarget as HTMLInputElement;
-		onchange(input.value);
+	function pickerValue(candidate: string): string {
+		return candidate.startsWith('#') && candidate.length <= 7 ? candidate : '#000000';
 	}
 </script>
 
@@ -23,35 +44,60 @@
 	<div class="label-row">
 		<label for={title}>{title}</label>
 	</div>
-	<div class="color-row">
-		<div class="swatch-wrapper">
-			<input
-				id="color-picker"
-				type="color"
-				value={value.startsWith('#') && value.length <= 7 ? value : '#000000'}
-				oninput={handlePickerInput}
-				onchange={handlePickerChange}
-			/>
-			<div class="swatch" style="background: {value}">
-				<div class="checker"></div>
-			</div>
+
+	{#if allowGradient}
+		<div class="mode">
+			<button type="button" class="mode__btn" class:mode__btn--active={!gradient} onclick={setSolid}>
+				Solid
+			</button>
+			<button type="button" class="mode__btn" class:mode__btn--active={gradient} onclick={setGradient}>
+				Gradient
+			</button>
 		</div>
-		<input
-			type="text"
-			class="color-text-input"
-			{value}
-			onchange={handleTextInput}
-			placeholder="rgba(0,0,0,0.5)"
-		/>
-	</div>
+	{/if}
+
+	{#if allowGradient && gradient}
+		<div class="preview" style="background-image: {value};"></div>
+		<div class="grad-row">
+			<span class="swatch-wrapper">
+				<input type="color" value={pickerValue(from)} oninput={(e) => { from = e.currentTarget.value; onpreview?.(build()); }} onchange={(e) => { from = e.currentTarget.value; onchange(build()); }} />
+				<span class="swatch" style="background: {from}"></span>
+			</span>
+			<span class="grad-lbl">From</span>
+			<span class="grad-val">{from}</span>
+		</div>
+		<div class="grad-row">
+			<span class="swatch-wrapper">
+				<input type="color" value={pickerValue(to)} oninput={(e) => { to = e.currentTarget.value; onpreview?.(build()); }} onchange={(e) => { to = e.currentTarget.value; onchange(build()); }} />
+				<span class="swatch" style="background: {to}"></span>
+			</span>
+			<span class="grad-lbl">To</span>
+			<span class="grad-val">{to}</span>
+		</div>
+		<div class="grad-row">
+			<span class="grad-lbl">Angle</span>
+			<input class="range" type="range" min="0" max="360" value={angle} oninput={(e) => { angle = Number(e.currentTarget.value); onpreview?.(build()); }} onchange={(e) => { angle = Number(e.currentTarget.value); onchange(build()); }} />
+			<span class="grad-val">{angle}&deg;</span>
+		</div>
+		<textarea class="custom" spellcheck="false" rows="2" placeholder="linear-gradient(90deg, #E0AE5A, #FFFFFF)" {value} onchange={(e) => onchange(e.currentTarget.value)}></textarea>
+	{:else}
+		<div class="color-row">
+			<span class="swatch-wrapper">
+				<input type="color" value={pickerValue(value)} oninput={(e) => onpreview?.(e.currentTarget.value)} onchange={(e) => onchange(e.currentTarget.value)} />
+				<span class="swatch" style="background: {value}"><span class="checker"></span></span>
+			</span>
+			<span class="hash">#</span>
+			<input type="text" class="color-text-input" value={value.replace(/^#/, '')} onchange={(e) => onchange(`#${e.currentTarget.value.replace(/^#/, '')}`)} placeholder="FFFFFF" />
+		</div>
+	{/if}
 </div>
 
 <style>
 	.setting-item {
 		display: flex;
 		flex-direction: column;
-		gap: 6px;
-		padding: 10px 0;
+		gap: 8px;
+		padding: 12px 0;
 	}
 
 	.label-row {
@@ -61,20 +107,48 @@
 	}
 
 	label {
-		font-size: 0.75rem;
+		font-size: 0.8rem;
 		font-weight: 500;
 		color: var(--text-secondary);
-		text-transform: capitalize;
+	}
+
+	.mode {
+		display: flex;
+		gap: 3px;
+		padding: 3px;
+		background: var(--bg-elevated);
+		border: 1px solid var(--border-light);
+		border-radius: var(--radius-md);
+	}
+
+	.mode__btn {
+		flex: 1;
+		height: 30px;
+		border: none;
+		background: transparent;
+		border-radius: 6px;
+		cursor: pointer;
+		font: inherit;
+		font-size: 0.8rem;
+		font-weight: 600;
+		color: var(--text-secondary);
+		transition: background var(--transition), color var(--transition);
+	}
+
+	.mode__btn--active {
+		background: var(--bg-surface);
+		color: var(--accent);
+		box-shadow: var(--shadow-sm);
 	}
 
 	.color-row {
 		display: flex;
 		align-items: center;
-		gap: 10px;
+		gap: 8px;
 		background: var(--bg-elevated);
 		border: 1px solid var(--border-light);
-		border-radius: var(--radius-sm);
-		padding: 6px 10px;
+		border-radius: var(--radius-md);
+		padding: 8px 12px;
 		transition: border-color var(--transition);
 	}
 
@@ -85,9 +159,9 @@
 
 	.swatch-wrapper {
 		position: relative;
-		width: 22px;
-		height: 22px;
-		border-radius: 4px;
+		width: 24px;
+		height: 24px;
+		border-radius: 6px;
 		overflow: hidden;
 		flex-shrink: 0;
 		border: 1px solid var(--border-light);
@@ -122,20 +196,75 @@
 		background-size: 8px 8px;
 	}
 
+	.hash {
+		font-family: var(--font-mono);
+		font-size: 0.8rem;
+		color: var(--text-muted);
+	}
+
 	.color-text-input {
 		flex: 1;
 		min-width: 0;
 		background: none;
 		border: none;
 		outline: none;
-		font-size: 0.78rem;
+		font-size: 0.8rem;
 		font-family: var(--font-mono);
-		color: var(--text-secondary);
+		color: var(--text-primary);
 		letter-spacing: 0.04em;
+		text-transform: uppercase;
 		padding: 0;
 	}
 
-	.color-text-input::placeholder {
-		color: var(--text-muted);
+	.preview {
+		height: 44px;
+		border-radius: var(--radius-md);
+		box-shadow: inset 0 0 0 1px var(--border);
+		background-size: cover;
+	}
+
+	.grad-row {
+		display: flex;
+		align-items: center;
+		gap: 9px;
+	}
+
+	.grad-lbl {
+		font-size: 0.75rem;
+		color: var(--text-secondary);
+		width: 38px;
+	}
+
+	.grad-val {
+		flex: 1;
+		text-align: right;
+		font-family: var(--font-mono);
+		font-size: 0.72rem;
+		text-transform: uppercase;
+		color: var(--text-secondary);
+	}
+
+	.range {
+		flex: 1;
+		accent-color: var(--accent);
+	}
+
+	.custom {
+		width: 100%;
+		resize: vertical;
+		min-height: 44px;
+		padding: 8px 10px;
+		font-family: var(--font-mono);
+		font-size: 0.7rem;
+		line-height: 1.4;
+		color: var(--text-primary);
+		background: var(--bg-elevated);
+		border: 1px solid var(--border-light);
+		border-radius: var(--radius-md);
+		outline: none;
+	}
+
+	.custom:focus {
+		border-color: var(--accent);
 	}
 </style>

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

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

package/dist/settings/components/ListSettings.svelte

@@ -70,15 +70,14 @@
 	.setting-item {
 		display: flex;
 		flex-direction: column;
-		gap: 8px;
-		padding: 10px 0;
+		gap: 10px;
+		padding: 12px 0;
 	}
 
 	label {
-		font-size: 0.75rem;
+		font-size: 0.8rem;
 		font-weight: 500;
 		color: var(--text-secondary);
-		text-transform: capitalize;
 	}
 
 	.list-items {
@@ -90,11 +89,11 @@
 	.list-entry {
 		display: flex;
 		flex-direction: column;
-		gap: 6px;
-		padding: 10px;
+		gap: 8px;
+		padding: 12px;
 		background: var(--bg-elevated);
 		border: 1px solid var(--border-light);
-		border-radius: var(--radius-sm);
+		border-radius: var(--radius-md);
 	}
 
 	.entry-header {
@@ -128,12 +127,12 @@
 	input,
 	textarea {
 		width: 100%;
-		padding: 7px 10px;
+		padding: 9px 11px;
 		background: var(--bg-base, #1a1a2e);
 		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;
 		resize: vertical;
@@ -149,10 +148,10 @@
 	}
 
 	.add-btn {
-		padding: 8px 12px;
+		padding: 9px 11px;
 		background: var(--bg-elevated);
 		border: 1px dashed var(--border-light);
-		border-radius: var(--radius-sm);
+		border-radius: var(--radius-md);
 		color: var(--text-secondary);
 		font-size: 0.8rem;
 		cursor: pointer;

package/dist/settings/components/NumberSettings.svelte

@@ -1,29 +1,60 @@
 <script lang="ts">
 	import type { BaseSettingProps, NumberExtra } from '../types';
 
-	let { title, value, onchange, min, max, step }: BaseSettingProps<number> & NumberExtra = $props();
+	let { title, value, onchange, onpreview, min, max, step }: BaseSettingProps<number> & NumberExtra =
+		$props();
+
+	const hasRange = $derived(min !== undefined && max !== undefined);
 </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))}
-	/>
+
+	{#if hasRange}
+		<div class="number-slider">
+			<input
+				class="range"
+				type="range"
+				{min}
+				{max}
+				step={step ?? 1}
+				{value}
+				oninput={(e) => onpreview?.(Number(e.currentTarget.value))}
+				onchange={(e) => onchange(Number(e.currentTarget.value))}
+			/>
+			<div class="number-box">
+				<input
+					type="number"
+					{min}
+					{max}
+					{step}
+					{value}
+					onchange={(e) => onchange(Number(e.currentTarget.value))}
+				/>
+				<span class="number-unit">px</span>
+			</div>
+		</div>
+	{:else}
+		<input
+			class="number-plain"
+			type="number"
+			{value}
+			{min}
+			{max}
+			{step}
+			onchange={(e) => onchange(Number(e.currentTarget.value))}
+		/>
+	{/if}
 </div>
 
 <style>
 	.setting-item {
 		display: flex;
 		flex-direction: column;
-		gap: 6px;
-		padding: 10px 0;
+		gap: 8px;
+		padding: 12px 0;
 	}
 
 	.label-row {
@@ -33,20 +64,92 @@
 	}
 
 	label {
-		font-size: 0.75rem;
+		font-size: 0.8rem;
 		font-weight: 500;
 		color: var(--text-secondary);
-		text-transform: capitalize;
 	}
 
-	input[type='number'] {
+	.number-slider {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+	}
+
+	.range {
+		flex: 1;
+		-webkit-appearance: none;
+		appearance: none;
+		height: 4px;
+		border-radius: 999px;
+		background: var(--bg-hover);
+		outline: none;
+		cursor: pointer;
+	}
+
+	.range::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 16px;
+		height: 16px;
+		border-radius: 50%;
+		background: var(--accent);
+		cursor: pointer;
+		border: 2px solid var(--bg-surface);
+		box-shadow: var(--shadow-sm);
+	}
+
+	.range::-moz-range-thumb {
+		width: 16px;
+		height: 16px;
+		border-radius: 50%;
+		background: var(--accent);
+		cursor: pointer;
+		border: 2px solid var(--bg-surface);
+	}
+
+	.number-box {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		width: 92px;
+		flex: none;
+		padding: 0 11px;
+		background: var(--bg-elevated);
+		border: 1px solid var(--border-light);
+		border-radius: var(--radius-md);
+		transition: border-color var(--transition);
+	}
+
+	.number-box:focus-within {
+		border-color: var(--accent);
+		box-shadow: 0 0 0 3px var(--accent-glow);
+	}
+
+	.number-box input {
 		width: 100%;
-		padding: 7px 10px;
+		height: 36px;
+		border: none;
+		background: transparent;
+		outline: none;
+		text-align: right;
+		font: inherit;
+		font-size: 0.8rem;
+		color: var(--text-primary);
+	}
+
+	.number-unit {
+		font-size: 0.75rem;
+		color: var(--text-muted);
+	}
+
+	.number-plain {
+		width: 100%;
+		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;
 		transition:
@@ -54,13 +157,7 @@
 			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 {
+	.number-plain:focus {
 		border-color: var(--accent);
 		box-shadow: 0 0 0 3px var(--accent-glow);
 	}

package/dist/settings/components/RepeaterSettings.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+	import type { Settings } from '../base.svelte';
+	import type { SettingMap } from '../types';
+	import SettingsRenderer from './SettingsRenderer.svelte';
+
+	interface RepeaterProps {
+		title: string;
+		itemLabel: string;
+		addButtonText: string;
+		items: Settings<SettingMap>[];
+		onadd: () => void;
+		onremove: (index: number) => void;
+		onmove: (from: number, to: number) => void;
+	}
+
+	let { title, itemLabel, addButtonText, items, onadd, onremove, onmove }: RepeaterProps = $props();
+</script>
+
+<div class="repeater">
+	<div class="repeater-title">{title}</div>
+
+	{#each items as item, index (index)}
+		<div class="repeater-item">
+			<div class="repeater-item-head">
+				<span class="repeater-item-label">{itemLabel} {index + 1}</span>
+				<div class="repeater-item-actions">
+					<button
+						type="button"
+						title="Move up"
+						disabled={index === 0}
+						onclick={() => onmove(index, index - 1)}
+					>
+						&#8593;
+					</button>
+					<button
+						type="button"
+						title="Move down"
+						disabled={index === items.length - 1}
+						onclick={() => onmove(index, index + 1)}
+					>
+						&#8595;
+					</button>
+					<button type="button" class="remove" title="Remove" onclick={() => onremove(index)}>
+						&#10005;
+					</button>
+				</div>
+			</div>
+			<div class="repeater-item-body">
+				<SettingsRenderer entries={item.entries} />
+			</div>
+		</div>
+	{/each}
+
+	<button type="button" class="repeater-add" onclick={onadd}>{addButtonText}</button>
+</div>
+
+<style>
+	.repeater {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+		padding: 12px 0;
+	}
+
+	.repeater-title {
+		font-size: 0.72rem;
+		font-weight: 600;
+		color: var(--text-secondary);
+	}
+
+	.repeater-item {
+		border: 1px solid var(--border-light);
+		border-radius: var(--radius-md);
+		background: var(--bg-surface);
+		overflow: hidden;
+	}
+
+	.repeater-item-head {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 8px 10px;
+		background: var(--bg-elevated);
+		border-bottom: 1px solid var(--border-light);
+	}
+
+	.repeater-item-label {
+		font-size: 0.72rem;
+		font-weight: 700;
+		letter-spacing: 0.06em;
+		text-transform: uppercase;
+		color: var(--text-secondary);
+	}
+
+	.repeater-item-actions {
+		display: flex;
+		gap: 4px;
+	}
+
+	.repeater-item-actions button {
+		width: 24px;
+		height: 22px;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		border: 1px solid var(--border-light);
+		background: var(--bg-surface);
+		border-radius: var(--radius-sm);
+		color: var(--text-secondary);
+		cursor: pointer;
+		font-size: 0.7rem;
+		line-height: 1;
+	}
+
+	.repeater-item-actions button:disabled {
+		opacity: 0.35;
+		cursor: not-allowed;
+	}
+
+	.repeater-item-actions .remove:hover:not(:disabled) {
+		color: #e5484d;
+		border-color: #e5484d;
+	}
+
+	.repeater-item-body {
+		padding: 4px 10px 10px;
+	}
+
+	.repeater-add {
+		height: 36px;
+		border: 1px dashed var(--border);
+		background: var(--bg-elevated);
+		border-radius: var(--radius-md);
+		color: var(--text-secondary);
+		font-size: 0.72rem;
+		font-weight: 600;
+		cursor: pointer;
+		transition: border-color var(--transition), color var(--transition);
+	}
+
+	.repeater-add:hover {
+		border-color: var(--accent);
+		color: var(--accent);
+	}
+</style>

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

@@ -0,0 +1,14 @@
+import type { Settings } from '../base.svelte';
+import type { SettingMap } from '../types';
+interface RepeaterProps {
+    title: string;
+    itemLabel: string;
+    addButtonText: string;
+    items: Settings<SettingMap>[];
+    onadd: () => void;
+    onremove: (index: number) => void;
+    onmove: (from: number, to: number) => void;
+}
+declare const RepeaterSettings: import("svelte").Component<RepeaterProps, {}, "">;
+type RepeaterSettings = ReturnType<typeof RepeaterSettings>;
+export default RepeaterSettings;