@papu1337/builder 0.0.3

package/dist/settings/components/UploadSettings.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+	import type { BaseSettingProps } from '../types';
+
+	let { title, value, onchange }: BaseSettingProps<string> = $props();
+
+	function handleFileChange(e: Event & { currentTarget: HTMLInputElement }) {
+		const file = e.currentTarget.files?.[0];
+
+		if (!file) return;
+
+		const reader = new FileReader();
+
+		reader.onload = () => {
+			const result = reader.result;
+			if (typeof result === 'string') {
+				onchange(result);
+			}
+		};
+
+		reader.readAsDataURL(file);
+	}
+</script>
+
+<div class="setting-item">
+	<label for={title}>{title}</label>
+
+	{#if value}
+		<div class="preview-container">
+			<img src={value} alt="Preview" class="preview-img" />
+			<div class="preview-overlay">
+				<label class="replace-btn">
+					&#8635; Replace
+					<input type="file" accept="image/*" onchange={handleFileChange} />
+				</label>
+				<button type="button" class="remove-btn" onclick={() => onchange('')}>&#10005;</button>
+			</div>
+		</div>
+	{:else}
+		<label class="upload-zone">
+			<div class="upload-inner">
+				<span class="upload-icon">&#8679;</span>
+				<span class="upload-text">Click to upload</span>
+				<span class="upload-hint">PNG, JPG, GIF, SVG</span>
+			</div>
+			<input type="file" accept="image/*" onchange={handleFileChange} />
+		</label>
+	{/if}
+</div>
+
+<style>
+	.setting-item {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		padding: 10px 0;
+	}
+
+	label:not(.upload-zone):not(.replace-btn) {
+		font-size: 0.75rem;
+		font-weight: 500;
+		color: var(--text-secondary);
+		text-transform: capitalize;
+	}
+
+	.upload-zone {
+		display: block;
+		cursor: pointer;
+		border: 1px dashed var(--border-light);
+		border-radius: var(--radius-md);
+		padding: 20px;
+		text-align: center;
+		transition:
+			border-color var(--transition),
+			background var(--transition);
+	}
+
+	.upload-zone:hover {
+		border-color: var(--accent);
+		background: var(--accent-subtle);
+	}
+
+	.upload-zone input[type='file'] {
+		display: none;
+	}
+
+	.upload-inner {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 4px;
+	}
+
+	.upload-icon {
+		font-size: 1.5rem;
+		color: var(--text-muted);
+	}
+
+	.upload-text {
+		font-size: 0.8rem;
+		font-weight: 500;
+		color: var(--text-secondary);
+	}
+
+	.upload-hint {
+		font-size: 0.7rem;
+		color: var(--text-muted);
+	}
+
+	.preview-container {
+		position: relative;
+		width: 100%;
+		height: 100px;
+		border-radius: var(--radius-md);
+		overflow: hidden;
+		border: 1px solid var(--border-light);
+	}
+
+	.preview-img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		display: block;
+	}
+
+	.preview-overlay {
+		position: absolute;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.55);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 8px;
+		opacity: 0;
+		transition: opacity var(--transition);
+	}
+
+	.preview-container:hover .preview-overlay {
+		opacity: 1;
+	}
+
+	.replace-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 5px;
+		padding: 6px 12px;
+		background: var(--accent);
+		color: #fff;
+		border-radius: var(--radius-sm);
+		font-size: 0.75rem;
+		font-weight: 500;
+		cursor: pointer;
+		font-family: var(--font);
+		transition: background var(--transition);
+	}
+
+	.replace-btn:hover {
+		background: var(--accent-hover);
+	}
+
+	.replace-btn input[type='file'] {
+		display: none;
+	}
+
+	.remove-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 28px;
+		height: 28px;
+		background: var(--danger-subtle);
+		color: var(--danger);
+		border: 1px solid rgba(240, 68, 68, 0.3);
+		border-radius: var(--radius-sm);
+		font-size: 0.75rem;
+		cursor: pointer;
+		transition:
+			background var(--transition),
+			color var(--transition);
+	}
+
+	.remove-btn:hover {
+		background: rgba(240, 68, 68, 0.25);
+		color: var(--danger-hover);
+	}
+</style>

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

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

package/dist/settings/groups.d.ts

@@ -0,0 +1,14 @@
+import { ColorSetting, NumberSetting, SelectSetting, TextSetting } from './implementation.svelte';
+type TypographyDefaults = {
+    color?: string;
+    fontSize?: number;
+    fontFamily?: string;
+    fontWeight?: string;
+};
+export declare function createTypographySettings(defaults?: TypographyDefaults): {
+    readonly color: ColorSetting;
+    readonly fontSize: NumberSetting;
+    readonly fontFamily: TextSetting;
+    readonly fontWeight: SelectSetting;
+};
+export {};

package/dist/settings/groups.js

@@ -0,0 +1,35 @@
+import { ColorSetting, NumberSetting, SelectSetting, TextSetting } from './implementation.svelte';
+export function createTypographySettings(defaults) {
+    return {
+        color: new ColorSetting({
+            title: 'Color',
+            defaultValue: defaults?.color ?? '#000000'
+        }),
+        fontSize: new NumberSetting({
+            title: 'Font Size',
+            defaultValue: defaults?.fontSize ?? 16,
+            extra: { min: 8, max: 120, step: 1 }
+        }),
+        fontFamily: new TextSetting({
+            title: 'Font Family',
+            defaultValue: defaults?.fontFamily ?? 'Arial'
+        }),
+        fontWeight: new SelectSetting({
+            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' }
+                ]
+            }
+        })
+    };
+}

package/dist/settings/implementation.svelte.js

@@ -0,0 +1,41 @@
+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 ListSettingUI from './components/ListSettings.svelte';
+import UploadSettingUI from './components/UploadSettings.svelte';
+import TranslatableSettingUI from './components/TranslatableSettings.svelte';
+import { Setting } from './base.svelte';
+export class TextSetting extends Setting {
+    component = TextSettingUI;
+}
+export class NumberSetting extends Setting {
+    component = NumberSettingUI;
+}
+export class ColorSetting extends Setting {
+    component = ColorSettingUI;
+}
+export class ListSetting extends Setting {
+    component = ListSettingUI;
+}
+export class SelectSetting extends Setting {
+    component = SelectSettingUI;
+}
+export class UploadSetting extends Setting {
+    component = UploadSettingUI;
+}
+export class TranslatableSetting extends Setting {
+    component = TranslatableSettingUI;
+    isTranslatable = true;
+    getProps() {
+        return {
+            value: this.value,
+            title: this.title,
+            onchange: (v) => {
+                const oldValue = this.value;
+                this.value = v;
+                this.onValueChange?.(oldValue, v);
+            }
+        };
+    }
+}

package/dist/settings/index.d.ts

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

package/dist/settings/index.js

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

package/dist/settings/types.d.ts

@@ -0,0 +1,51 @@
+export type BaseSettingProps<V> = {
+    value: V;
+    title: string;
+    onchange: (value: V) => void;
+    onpreview?: (value: V) => void;
+};
+export interface SettingComponent {
+    readonly title: string;
+    readonly component: unknown;
+    value: unknown;
+    getProps(): Record<string, unknown>;
+}
+export interface SettingsGroupComponent {
+    readonly title: string;
+    readonly entries: SettingMap;
+    clone(): SettingsGroupComponent;
+}
+export type SettingMapEntry = SettingComponent | SettingsGroupComponent;
+export type SettingMap = Record<string, SettingMapEntry>;
+type ResolveValue<E> = E extends {
+    isTranslatable: true;
+} ? string : E extends {
+    value: infer V;
+} ? V : never;
+export type InferSettingsMapType<T> = T extends {
+    entries: infer E;
+} ? {
+    [K in keyof E]: ResolveValue<E[K]>;
+} : never;
+export type NumberExtra = {
+    min?: number;
+    max?: number;
+    step?: number;
+};
+export type ListItem = {
+    title: string;
+    content: string;
+};
+export type ListExtra = {
+    addButtonText?: string;
+    titlePlaceholder?: string;
+    contentPlaceholder?: string;
+};
+export type SelectOption = {
+    label: string;
+    value: string;
+};
+export type SelectExtra = {
+    options: SelectOption[];
+};
+export {};

package/dist/settings/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,86 @@
+{
+	"name": "@papu1337/builder",
+	"version": "0.0.3",
+	"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",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"lint:fix": "prettier --write . && eslint . --fix",
+		"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"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		},
+		"./renderer": {
+			"types": "./dist/renderer/index.d.ts",
+			"svelte": "./dist/renderer/index.js"
+		},
+		"./renderer/vanilla": {
+			"types": "./dist/renderer/types.d.ts",
+			"default": "./dist/renderer/renderer.vanilla.es.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@eslint/compat": "^2.0.2",
+		"@eslint/js": "^9.39.2",
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/kit": "^2.50.2",
+		"@sveltejs/package": "^2.5.7",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@tailwindcss/forms": "^0.5.11",
+		"@tailwindcss/typography": "^0.5.19",
+		"@tailwindcss/vite": "^4.1.18",
+		"@types/node": "^24",
+		"@vitest/browser-playwright": "^4.1.0",
+		"eslint": "^9.39.2",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.14.0",
+		"globals": "^17.3.0",
+		"playwright": "^1.58.2",
+		"prettier": "^3.8.1",
+		"prettier-plugin-svelte": "^3.4.1",
+		"prettier-plugin-tailwindcss": "^0.7.2",
+		"publint": "^0.3.17",
+		"svelte": "^5.51.0",
+		"svelte-check": "^4.4.2",
+		"tailwindcss": "^4.1.18",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.54.0",
+		"vite": "^7.3.1",
+		"vitest": "^4.1.0",
+		"vitest-browser-svelte": "^2.0.2"
+	},
+	"keywords": [
+		"svelte"
+	],
+	"dependencies": {
+		"svelte-dnd-action": "^0.9.69"
+	}
+}