@papu1337/builder 0.0.4 → 1.0.1

package/dist/builder/BuilderView.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+	import LeftBar from './leftbar/leftBar.svelte';
+	import TopBar from './topbar/TopBar.svelte';
+	import Canvas from './canvas/canvas.svelte';
+	import RightBar from './rightbar/rightBar.svelte';
+	import { viewport } from './viewport.svelte';
+	import {
+		addComponent,
+		components,
+		ComponentsInstance,
+		getGlobalSettings,
+		getSelectedComponent,
+		selectComponent,
+		undo,
+		redo,
+		canUndo,
+		canRedo,
+		deleteComponent,
+		handleDragAndDrop,
+		exportState,
+		importState,
+		mode,
+		setTranslator
+	} from '../service';
+
+	export interface BuilderViewProps {
+		data?: unknown;
+		save?: (state: unknown) => void | Promise<void>;
+		translate?: ((text: string, targetLang: string) => Promise<string>) | null;
+	}
+
+	let { data, save, translate = null }: BuilderViewProps = $props();
+
+	let loaded = false;
+	$effect(() => {
+		if (loaded || data === undefined || data === null) return;
+		loaded = true;
+		try {
+			importState(typeof data === 'string' ? data : JSON.stringify(data));
+		} catch (error) {
+			console.error('BuilderView: failed to load data', error);
+		}
+	});
+
+	$effect(() => {
+		setTranslator(translate);
+	});
+
+	function handleSave(): void {
+		void save?.(JSON.parse(exportState()));
+	}
+
+	function handleExport(): void {
+		const json = exportState();
+		const blob = new Blob([json], { type: 'application/json' });
+		const url = URL.createObjectURL(blob);
+		const anchor = document.createElement('a');
+		anchor.href = url;
+		anchor.download = 'builder-export.json';
+		anchor.click();
+		URL.revokeObjectURL(url);
+	}
+
+	function handleImport(json: string): void {
+		try {
+			importState(json);
+		} catch (error) {
+			console.error('BuilderView: failed to import', error);
+		}
+	}
+</script>
+
+<div class="builder-root">
+	<TopBar
+		{undo}
+		{redo}
+		{canUndo}
+		{canRedo}
+		onExport={handleExport}
+		onImport={handleImport}
+		onSave={save ? handleSave : undefined}
+	/>
+	<div class="builder-body">
+		{#if !viewport.preview}
+			<LeftBar {components} {addComponent} />
+		{/if}
+		<Canvas
+			{ComponentsInstance}
+			{selectComponent}
+			GlobalSettings={getGlobalSettings()}
+			{handleDragAndDrop}
+			{getSelectedComponent}
+			{mode}
+		/>
+		{#if !viewport.preview}
+			<RightBar
+				selectedComponent={getSelectedComponent()}
+				GlobalSettings={getGlobalSettings()}
+				{deleteComponent}
+			/>
+		{/if}
+	</div>
+</div>
+
+<style>
+	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+	:global(.builder-root) {
+		--bg-base: #eae2d3;
+		--bg-surface: #ffffff;
+		--bg-elevated: #fbf8f3;
+		--bg-hover: #f5f0e6;
+		--btn-hover: #f5f0e6;
+		--border: #eae2d3;
+		--border-light: #f5f0e6;
+		--text-primary: #1f1d18;
+		--text-secondary: #7a7261;
+		--text-muted: #a89e8a;
+		--accent: #2e6b37;
+		--accent-hover: #1f4f28;
+		--accent-active: #1f4f28;
+		--accent-glow: rgba(46, 107, 55, 0.15);
+		--accent-subtle: #eef5ee;
+		--danger: #a83226;
+		--danger-hover: #8f2a20;
+		--danger-subtle: rgba(168, 50, 38, 0.1);
+		--success: #2e6b37;
+		--success-subtle: rgba(46, 107, 55, 0.1);
+		--sidebar-width: 288px;
+		--radius-sm: 6px;
+		--radius-md: 8px;
+		--radius-lg: 14px;
+		--transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+		--font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
+		--font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
+		--shadow-sm: 0 1px 2px rgba(31, 29, 24, 0.06);
+		--shadow-md: 0 4px 12px rgba(31, 29, 24, 0.1);
+		--shadow-lg: 0 18px 40px rgba(31, 29, 24, 0.22);
+		font-family: var(--font);
+		color: var(--text-primary);
+		-webkit-font-smoothing: antialiased;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	:global(.builder-root *),
+	:global(.builder-root *::before),
+	:global(.builder-root *::after) {
+		box-sizing: border-box;
+	}
+
+	.builder-body {
+		flex: 1;
+		min-height: 0;
+		display: flex;
+	}
+</style>

package/dist/builder/BuilderView.svelte.d.ts

@@ -0,0 +1,8 @@
+export interface BuilderViewProps {
+    data?: unknown;
+    save?: (state: unknown) => void | Promise<void>;
+    translate?: ((text: string, targetLang: string) => Promise<string>) | null;
+}
+declare const BuilderView: import("svelte").Component<BuilderViewProps, {}, "">;
+type BuilderView = ReturnType<typeof BuilderView>;
+export default BuilderView;