@papu1337/builder 0.0.4 → 1.0.1

package/dist/service/element.history.svelte.js

@@ -0,0 +1,36 @@
+const MAX_HISTORY = 50;
+let captureState;
+let restoreState;
+let undoStack = $state([]);
+let redoStack = $state([]);
+export function initHistory(capture, restore) {
+    captureState = capture;
+    restoreState = restore;
+}
+export function saveHistory() {
+    undoStack.push(captureState());
+    if (undoStack.length > MAX_HISTORY) {
+        undoStack.shift();
+    }
+    redoStack.length = 0;
+}
+export function undo() {
+    const snapshot = undoStack.pop();
+    if (!snapshot)
+        return;
+    redoStack.push(captureState());
+    restoreState(snapshot);
+}
+export function redo() {
+    const snapshot = redoStack.pop();
+    if (!snapshot)
+        return;
+    undoStack.push(captureState());
+    restoreState(snapshot);
+}
+export function canUndo() {
+    return undoStack.length > 0;
+}
+export function canRedo() {
+    return redoStack.length > 0;
+}

package/dist/service/element.io.svelte.d.ts

@@ -0,0 +1,4 @@
+export declare function exportState(): string;
+export declare function importState(json: string): void;
+export declare function exportTranslations(): string;
+export declare function importTranslations(json: string): void;

package/dist/service/element.io.svelte.js

@@ -0,0 +1,232 @@
+import { Setting, Settings } from "../settings/base.svelte";
+import { RepeaterSetting } from "../settings/repeater.svelte";
+import { saveHistory } from "./element.history.svelte";
+import { elements } from "./element.reader.svelte";
+import { ComponentsInstance, GLOBAL_KEY, cloneEntry, trackSettings, } from "./element.action.svelte";
+import { languages } from "../hooks/useTranslation.svelte";
+function collectValues(settings) {
+    const result = {};
+    for (const key in settings.entries) {
+        const item = settings.entries[key];
+        if (item instanceof Settings) {
+            result[key] = collectValues(item);
+        }
+        else if (item instanceof RepeaterSetting) {
+            result[key] = item.items.map((child) => collectValues(child));
+        }
+        else {
+            result[key] = item.value;
+        }
+    }
+    return result;
+}
+function applyValues(settings, values) {
+    for (const key in settings.entries) {
+        const item = settings.entries[key];
+        if (item instanceof Settings) {
+            const nested = values[key];
+            if (nested && typeof nested === "object" && !Array.isArray(nested)) {
+                applyValues(item, nested);
+            }
+        }
+        else if (item instanceof RepeaterSetting) {
+            const list = values[key];
+            if (Array.isArray(list)) {
+                item.items = list.map((entryValues, index) => {
+                    const created = item.factory(index);
+                    if (entryValues && typeof entryValues === "object") {
+                        applyValues(created, entryValues);
+                    }
+                    return created;
+                });
+            }
+        }
+        else if (key in values) {
+            const setting = item;
+            if (setting.isTranslatable && typeof values[key] === "string") {
+                setting.value = { en: values[key] };
+            }
+            else {
+                setting.value = values[key];
+            }
+        }
+    }
+}
+function collectMobile(settings) {
+    const result = {};
+    for (const key in settings.entries) {
+        const item = settings.entries[key];
+        if (item instanceof Settings) {
+            const nested = collectMobile(item);
+            if (Object.keys(nested).length > 0)
+                result[key] = nested;
+        }
+        else if (item instanceof RepeaterSetting) {
+            const arr = item.items.map((child) => collectMobile(child));
+            if (arr.some((entry) => Object.keys(entry).length > 0))
+                result[key] = arr;
+        }
+        else {
+            const setting = item;
+            if (setting.mobileValue !== undefined)
+                result[key] = setting.mobileValue;
+        }
+    }
+    return result;
+}
+function applyMobile(settings, values) {
+    for (const key in settings.entries) {
+        const item = settings.entries[key];
+        if (item instanceof Settings) {
+            const nested = values[key];
+            if (nested && typeof nested === "object" && !Array.isArray(nested)) {
+                applyMobile(item, nested);
+            }
+        }
+        else if (item instanceof RepeaterSetting) {
+            const arr = values[key];
+            if (Array.isArray(arr)) {
+                item.items.forEach((child, index) => {
+                    const nested = arr[index];
+                    if (nested && typeof nested === "object") {
+                        applyMobile(child, nested);
+                    }
+                });
+            }
+        }
+        else if (key in values) {
+            item.mobileValue = values[key];
+        }
+    }
+}
+export function exportState() {
+    const globalEntry = ComponentsInstance.get(GLOBAL_KEY);
+    const globalSettings = globalEntry ? collectValues(globalEntry.settings) : {};
+    const exported = [];
+    for (const [id, entry] of ComponentsInstance) {
+        if (id === GLOBAL_KEY)
+            continue;
+        const mobileSettings = collectMobile(entry.settings);
+        exported.push({
+            name: `${entry.name}`,
+            settings: collectValues(entry.settings),
+            ...(Object.keys(mobileSettings).length > 0 ? { mobileSettings } : {}),
+        });
+    }
+    const state = { global: globalSettings, components: exported };
+    return JSON.stringify(state, null, 2);
+}
+export function importState(json) {
+    const state = JSON.parse(json);
+    saveHistory();
+    const globalEntry = ComponentsInstance.get(GLOBAL_KEY);
+    if (globalEntry && state.global) {
+        applyValues(globalEntry.settings, state.global);
+        trackSettings(globalEntry);
+    }
+    for (const id of [...ComponentsInstance.keys()]) {
+        if (id !== GLOBAL_KEY)
+            ComponentsInstance.delete(id);
+    }
+    for (const item of state.components) {
+        const template = elements.find((e) => e.name === item.name);
+        if (!template)
+            continue;
+        const instance = cloneEntry(template);
+        instance.id = `${template.name}-${crypto.randomUUID()}`;
+        applyValues(instance.settings, item.settings);
+        if (item.mobileSettings)
+            applyMobile(instance.settings, item.mobileSettings);
+        ComponentsInstance.set(instance.id, instance);
+        trackSettings(instance);
+    }
+}
+export function exportTranslations() {
+    const dictionary = {};
+    const collectCompTrans = (settings) => {
+        const result = {};
+        const walk = (s) => {
+            for (const key in s.entries) {
+                const item = s.entries[key];
+                if (item instanceof Settings) {
+                    walk(item);
+                }
+                else if (item instanceof RepeaterSetting) {
+                    item.items.forEach(walk);
+                }
+                else {
+                    const setting = item;
+                    if (setting.isTranslatable) {
+                        const val = setting.value;
+                        const langs = {};
+                        for (const lang of languages) {
+                            langs[lang.code] =
+                                val[lang.code] || (lang.code === "en" ? val["en"] : "");
+                        }
+                        result[key] = langs;
+                    }
+                }
+            }
+        };
+        walk(settings);
+        return result;
+    };
+    const globalEntry = ComponentsInstance.get(GLOBAL_KEY);
+    if (globalEntry) {
+        const tr = collectCompTrans(globalEntry.settings);
+        if (Object.keys(tr).length > 0)
+            dictionary[`Global-1`] = tr;
+    }
+    const counts = {};
+    for (const [id, entry] of ComponentsInstance) {
+        if (id === GLOBAL_KEY)
+            continue;
+        counts[entry.name] = (counts[entry.name] || 0) + 1;
+        const compId = `${entry.name}-${counts[entry.name]}`;
+        const tr = collectCompTrans(entry.settings);
+        if (Object.keys(tr).length > 0)
+            dictionary[compId] = tr;
+    }
+    return JSON.stringify(dictionary, null, 2);
+}
+export function importTranslations(json) {
+    const dictionary = JSON.parse(json);
+    saveHistory();
+    const applyCompTrans = (settings, compTrans) => {
+        const walk = (s) => {
+            for (const key in s.entries) {
+                const item = s.entries[key];
+                if (item instanceof Settings) {
+                    walk(item);
+                }
+                else if (item instanceof RepeaterSetting) {
+                    item.items.forEach(walk);
+                }
+                else {
+                    const setting = item;
+                    if (setting.isTranslatable && compTrans[key]) {
+                        const val = setting.value;
+                        setting.value = { ...val, ...compTrans[key] };
+                    }
+                }
+            }
+        };
+        walk(settings);
+    };
+    const globalEntry = ComponentsInstance.get(GLOBAL_KEY);
+    if (globalEntry && dictionary[`Global-1`]) {
+        applyCompTrans(globalEntry.settings, dictionary[`Global-1`]);
+        trackSettings(globalEntry);
+    }
+    const counts = {};
+    for (const [id, entry] of ComponentsInstance) {
+        if (id !== GLOBAL_KEY) {
+            counts[entry.name] = (counts[entry.name] || 0) + 1;
+            const compId = `${entry.name}-${counts[entry.name]}`;
+            if (dictionary[compId]) {
+                applyCompTrans(entry.settings, dictionary[compId]);
+                trackSettings(entry);
+            }
+        }
+    }
+}

package/dist/service/element.reader.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Settings, type SettingMap } from '../settings';
+import type { ElementEntry } from './types';
+export declare function discoverGlobalSettings(): Settings<SettingMap>;
+export declare const elements: ElementEntry[];

package/dist/service/element.reader.svelte.js

@@ -0,0 +1,51 @@
+import { Settings } from '../settings';
+const settingsModules = import.meta.glob('../elements/**/settings.ts', {
+    eager: true
+});
+const GlobalSettingModule = import.meta.glob('../elements/globalSettings.ts', {
+    eager: true
+});
+const componentModules = import.meta.glob('../elements/*/*.svelte', {
+    eager: true
+});
+function findSettings(mod) {
+    for (const value of Object.values(mod)) {
+        if (value instanceof Settings)
+            return value;
+    }
+}
+function extractFolderName(path) {
+    return path.split('/').at(-2);
+}
+function findComponentModule(folderName) {
+    const path = Object.keys(componentModules).find((p) => p.includes(`/elements/${folderName}/`));
+    return path ? componentModules[path] : undefined;
+}
+function discoverElements() {
+    const entries = [];
+    for (const [path, mod] of Object.entries(settingsModules)) {
+        const folderName = extractFolderName(path);
+        const settings = findSettings(mod);
+        const componentModule = findComponentModule(folderName);
+        if (settings && componentModule) {
+            entries.push({
+                id: crypto.randomUUID(),
+                name: folderName,
+                settings,
+                component: componentModule.default
+            });
+        }
+    }
+    return entries;
+}
+export function discoverGlobalSettings() {
+    const allEntries = {};
+    for (const mod of Object.values(GlobalSettingModule)) {
+        const settings = findSettings(mod);
+        if (settings) {
+            Object.assign(allEntries, settings.entries);
+        }
+    }
+    return new Settings('Global', allEntries);
+}
+export const elements = $state(discoverElements());

package/dist/service/element.translate.svelte.d.ts

@@ -0,0 +1,12 @@
+export declare const translating: {
+    active: boolean;
+};
+type Translator = (text: string, targetLang: string) => Promise<string>;
+export declare function setTranslator(fn: Translator | null): void;
+export interface TranslateResult {
+    hasSource: boolean;
+    translated: number;
+    failed: number;
+}
+export declare function translateAll(): Promise<TranslateResult>;
+export {};

package/dist/service/element.translate.svelte.js

@@ -0,0 +1,81 @@
+import { Setting, Settings } from '../settings/base.svelte';
+import { RepeaterSetting } from '../settings/repeater.svelte';
+import { languages } from '../hooks/useTranslation.svelte';
+import { ComponentsInstance } from './element.action.svelte';
+import { saveHistory } from './element.history.svelte';
+const SOURCE_LOCALE = 'en';
+const REQUEST_TIMEOUT_MS = 10000;
+export const translating = $state({ active: false });
+let translator = null;
+export function setTranslator(fn) {
+    translator = fn;
+}
+function collectTranslatable(settings, out) {
+    for (const key in settings.entries) {
+        const item = settings.entries[key];
+        if (item instanceof Settings) {
+            collectTranslatable(item, out);
+        }
+        else if (item instanceof RepeaterSetting) {
+            item.items.forEach((child) => collectTranslatable(child, out));
+        }
+        else {
+            const setting = item;
+            if (setting.isTranslatable)
+                out.push(setting);
+        }
+    }
+}
+async function translateText(text, target) {
+    if (translator)
+        return translator(text, target);
+    const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=${SOURCE_LOCALE}&tl=${encodeURIComponent(target)}&dt=t&q=${encodeURIComponent(text)}`;
+    const response = await fetch(url, { signal: AbortSignal.timeout(REQUEST_TIMEOUT_MS) });
+    if (!response.ok)
+        throw new Error(`Translation request failed (${response.status})`);
+    const data = await response.json();
+    if (!Array.isArray(data) || !Array.isArray(data[0])) {
+        throw new Error('Unexpected translation response');
+    }
+    return data[0]
+        .map((segment) => (Array.isArray(segment) ? String(segment[0] ?? '') : ''))
+        .join('');
+}
+export async function translateAll() {
+    const targets = languages.filter((lang) => lang.code !== SOURCE_LOCALE).map((lang) => lang.code);
+    const leaves = [];
+    for (const entry of ComponentsInstance.values())
+        collectTranslatable(entry.settings, leaves);
+    const jobs = [];
+    let hasSource = false;
+    for (const setting of leaves) {
+        const source = setting.value?.[SOURCE_LOCALE];
+        if (typeof source !== 'string' || !source.trim())
+            continue;
+        hasSource = true;
+        for (const target of targets)
+            jobs.push({ setting, target, text: source });
+    }
+    if (!hasSource)
+        return { hasSource: false, translated: 0, failed: 0 };
+    saveHistory();
+    translating.active = true;
+    let translated = 0;
+    let failed = 0;
+    try {
+        for (const job of jobs) {
+            try {
+                const result = await translateText(job.text, job.target);
+                job.setting.value = { ...job.setting.value, [job.target]: result };
+                translated++;
+            }
+            catch {
+                failed++;
+            }
+        }
+    }
+    finally {
+        translating.active = false;
+    }
+    return { hasSource: true, translated, failed };
+}

package/dist/service/index.d.ts

@@ -0,0 +1,5 @@
+export * from './element.reader.svelte';
+export * from './element.action.svelte';
+export * from './element.io.svelte';
+export * from './element.translate.svelte';
+export * from './types';

package/dist/service/index.js

@@ -0,0 +1,5 @@
+export * from './element.reader.svelte';
+export * from './element.action.svelte';
+export * from './element.io.svelte';
+export * from './element.translate.svelte';
+export * from './types';

package/dist/service/types.d.ts

@@ -0,0 +1,13 @@
+import { Settings, type SettingMap } from '../settings';
+import type { Component } from 'svelte';
+export type { ExportedEntry, ExportedState } from '../renderer/types';
+export interface ElementEntry {
+    id: string;
+    name: string;
+    settings: Settings<SettingMap>;
+    component: Component<Record<string, unknown>> | null;
+}
+export type SettingsModule = Record<string, unknown>;
+export type ComponentModule = {
+    default: Component<Record<string, unknown>>;
+};

package/dist/service/types.js

@@ -0,0 +1 @@
+import { Settings } from '../settings';

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

@@ -2,9 +2,11 @@ import type { Component } from 'svelte';
 import type { BaseSettingProps, SettingMap, SettingComponent } from './types.js';
 export declare abstract class Setting<V, E extends Record<string, unknown> = Record<string, unknown>> {
     value: V;
+    mobileValue: V | undefined;
     readonly title: string;
     readonly extra: E;
     readonly isTranslatable: boolean;
+    lastChangedMobile: boolean;
     onValueChange: ((oldValue: V, newValue: V) => void) | null;
     abstract readonly component: Component<BaseSettingProps<V> & E>;
     constructor(options: {
@@ -12,11 +14,14 @@ export declare abstract class Setting<V, E extends Record<string, unknown> = Rec
         defaultValue: V;
         extra?: E;
     });
+    get effectiveValue(): V;
+    private previewing;
     private previewOrigin;
+    private resetMobile;
     getProps(): BaseSettingProps<V> & E;
 }
 type SettingsValues<T extends SettingMap> = {
-    [K in keyof T]: T[K] extends SettingComponent ? T[K]['value'] : never;
+    [K in keyof T]: T[K] extends Settings<infer U> ? SettingsValues<U> : T[K] extends SettingComponent ? T[K]['value'] : never;
 };
 export type SettingsEntry = Setting<unknown, Record<string, unknown>> | Settings<SettingMap>;
 export declare function isSettingsGroup(entry: SettingsEntry): entry is Settings<SettingMap>;

package/dist/settings/base.svelte.js

@@ -1,31 +1,64 @@
-import { locale } from '../../hooks/useTranslation.svelte.js';
+import { locale } from '../hooks/useTranslation.svelte.js';
+import { settingsMode } from './mode.svelte.js';
 export class Setting {
     value = $state();
+    mobileValue = $state(undefined);
     title;
     extra;
     isTranslatable = false;
+    lastChangedMobile = false;
     onValueChange = null;
     constructor(options) {
         this.title = options.title;
         this.value = options.defaultValue;
         this.extra = (options.extra ?? {});
     }
-    previewOrigin = null;
+    get effectiveValue() {
+        return settingsMode.device === 'mobile' && this.mobileValue !== undefined
+            ? this.mobileValue
+            : this.value;
+    }
+    previewing = false;
+    previewOrigin = undefined;
+    resetMobile() {
+        const oldValue = this.mobileValue;
+        this.lastChangedMobile = true;
+        this.mobileValue = undefined;
+        this.onValueChange?.(oldValue, this.value);
+    }
     getProps() {
+        const mobile = settingsMode.device === 'mobile';
+        const current = mobile ? (this.mobileValue ?? this.value) : this.value;
         return {
-            value: this.value,
+            value: current,
             title: this.title,
+            isMobile: mobile,
+            overridden: mobile && this.mobileValue !== undefined,
+            onreset: mobile ? () => this.resetMobile() : undefined,
             onchange: (v) => {
-                const oldValue = this.previewOrigin ?? this.value;
-                this.previewOrigin = null;
-                this.value = v;
-                this.onValueChange?.(oldValue, v);
+                const rawOld = this.previewing
+                    ? this.previewOrigin
+                    : mobile
+                        ? this.mobileValue
+                        : this.value;
+                this.previewing = false;
+                this.previewOrigin = undefined;
+                this.lastChangedMobile = mobile;
+                if (mobile)
+                    this.mobileValue = v;
+                else
+                    this.value = v;
+                this.onValueChange?.(rawOld, v);
             },
             onpreview: (v) => {
-                if (this.previewOrigin === null) {
-                    this.previewOrigin = this.value;
+                if (!this.previewing) {
+                    this.previewing = true;
+                    this.previewOrigin = mobile ? this.mobileValue : this.value;
                 }
-                this.value = v;
+                if (mobile)
+                    this.mobileValue = v;
+                else
+                    this.value = v;
             },
             ...this.extra
         };
@@ -48,19 +81,27 @@ export class Settings {
             if (entry instanceof Settings) {
                 clonedEntries[key] = entry.clone();
             }
+            else if (typeof entry.clone === 'function') {
+                clonedEntries[key] = entry.clone();
+            }
             else {
                 const setting = entry;
-                const defaultValue = Array.isArray(setting.value)
-                    ? structuredClone(setting.value)
-                    : typeof setting.value === 'object' && setting.value !== null
-                        ? { ...setting.value }
-                        : setting.value;
+                const defaultValue = typeof setting.value === 'object' && setting.value !== null
+                    ? JSON.parse(JSON.stringify(setting.value))
+                    : setting.value;
                 const Ctor = setting.constructor;
-                clonedEntries[key] = new Ctor({
+                const clonedSetting = new Ctor({
                     title: setting.title,
                     defaultValue,
                     extra: setting.extra
                 });
+                if (setting.mobileValue !== undefined) {
+                    clonedSetting.mobileValue =
+                        typeof setting.mobileValue === 'object' && setting.mobileValue !== null
+                            ? JSON.parse(JSON.stringify(setting.mobileValue))
+                            : setting.mobileValue;
+                }
+                clonedEntries[key] = clonedSetting;
             }
         }
         return new Settings(this.title, clonedEntries);
@@ -70,19 +111,20 @@ export class Settings {
         for (const key in this.entries) {
             const entry = this.entries[key];
             if (entry instanceof Settings) {
-                const nested = entry.values;
-                for (const nk in nested) {
-                    result[nk] = nested[nk];
-                }
+                result[key] = entry.values;
+            }
+            else if (typeof entry.resolvedValues === 'function') {
+                result[key] = entry.resolvedValues();
             }
             else {
                 const setting = entry;
+                const effective = setting.effectiveValue;
                 if (setting.isTranslatable) {
-                    const map = setting.value;
+                    const map = effective;
                     result[key] = map[locale.current] ?? map['en'] ?? '';
                 }
                 else {
-                    result[key] = setting.value;
+                    result[key] = effective;
                 }
             }
         }