@papu1337/builder 0.0.5 → 1.0.1

package/dist/builder/topbar/TopBar.svelte

@@ -0,0 +1,337 @@
+<script lang="ts">
+	import { languages, locale } from '../../hooks/useTranslation.svelte';
+	import { translateAll, translating } from '../../service';
+	import { viewport, setDevice, togglePreview } from '../viewport.svelte';
+
+	interface Props {
+		undo: () => void;
+		redo: () => void;
+		canUndo: () => boolean;
+		canRedo: () => boolean;
+		onExport: () => void;
+		onImport: (json: string) => void;
+		onSave?: () => void;
+	}
+
+	let { undo, redo, canUndo, canRedo, onExport, onImport, onSave }: Props = $props();
+
+	let pageName = $state('untitled-page');
+	let fileInput: HTMLInputElement;
+
+	async function onTranslate(): Promise<void> {
+		const result = await translateAll();
+		if (!result.hasSource) {
+			// eslint-disable-next-line no-alert
+			alert('Add English text to your layers first, then translate.');
+		}
+	}
+
+	function readFile(input: HTMLInputElement, cb: (text: string) => void): void {
+		const file = input.files?.[0];
+		if (!file) return;
+		const reader = new FileReader();
+		reader.onload = () => {
+			cb(reader.result as string);
+			input.value = '';
+		};
+		reader.readAsText(file);
+	}
+</script>
+
+<header class="topbar">
+	<div class="topbar__group topbar__group--bordered">
+		<span class="topbar__logo">B</span>
+		<div class="topbar__name-wrap">
+			<span class="topbar__eyebrow">Page</span>
+			<input class="topbar__name" bind:value={pageName} placeholder="untitled-page" maxlength="120" />
+		</div>
+	</div>
+
+	<div class="topbar__group topbar__group--bordered-left">
+		<button class="topbar__icon" title="Undo" onclick={undo} disabled={!canUndo()} aria-label="Undo">
+			<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7v6h6" /><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13" /></svg>
+		</button>
+		<button class="topbar__icon" title="Redo" onclick={redo} disabled={!canRedo()} aria-label="Redo">
+			<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 7v6h-6" /><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7" /></svg>
+		</button>
+	</div>
+
+	<div class="topbar__group topbar__group--bordered-left">
+		<input type="file" accept=".json" hidden bind:this={fileInput} onchange={(e) => readFile(e.currentTarget, onImport)} />
+		<button class="topbar__btn topbar__btn--ghost" title="Import page JSON" onclick={() => fileInput.click()}>Import</button>
+		<button class="topbar__btn topbar__btn--ghost" title="Export page JSON" onclick={onExport}>Export</button>
+	</div>
+
+	<div class="topbar__device">
+		<button class="topbar__device-btn" class:topbar__device-btn--active={viewport.device === 'desktop'} onclick={() => setDevice('desktop')}>
+			<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" /><path d="M8 21h8M12 17v4" /></svg>
+			Desktop
+		</button>
+		<button class="topbar__device-btn" class:topbar__device-btn--active={viewport.device === 'mobile'} onclick={() => setDevice('mobile')}>
+			<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" /><path d="M12 18h.01" /></svg>
+			Mobile
+		</button>
+	</div>
+
+	<div class="topbar__group topbar__group--right">
+		<div class="topbar__lang">
+			<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><line x1="2" y1="12" x2="22" y2="12" /><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" /></svg>
+			<select value={locale.current} onchange={(e) => (locale.current = e.currentTarget.value)}>
+				{#each languages as l (l.code)}
+					<option value={l.code}>{l.label}</option>
+				{/each}
+			</select>
+		</div>
+
+		<button class="topbar__translate" title="Translate every text layer from English" disabled={translating.active} onclick={onTranslate}>
+			{#if translating.active}
+				<svg class="topbar__spin" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
+				Translating…
+			{:else}
+				<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 8 6 6M4 14l6-6 2-3M2 5h12M7 2h1M22 22l-5-10-5 10M14 18h6" /></svg>
+				Translate
+			{/if}
+		</button>
+
+		<button class="topbar__icon" title={viewport.preview ? 'Exit preview' : 'Preview'} aria-label="Preview" onclick={togglePreview}>
+			<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" /><circle cx="12" cy="12" r="3" /></svg>
+		</button>
+
+		<button class="topbar__save" onclick={onSave ?? onExport}>Save</button>
+	</div>
+</header>
+
+<style>
+	.topbar {
+		height: 56px;
+		flex: none;
+		display: flex;
+		align-items: center;
+		gap: 14px;
+		padding: 0 14px;
+		background: var(--bg-surface);
+		border-bottom: 1px solid var(--border);
+	}
+
+	.topbar__group {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.topbar__group--bordered {
+		padding-right: 12px;
+		border-right: 1px solid var(--border);
+	}
+
+	.topbar__group--bordered-left {
+		gap: 4px;
+		padding-left: 10px;
+		border-left: 1px solid var(--border);
+	}
+
+	.topbar__group--right {
+		margin-left: auto;
+		gap: 10px;
+	}
+
+	.topbar__logo {
+		width: 30px;
+		height: 30px;
+		flex: none;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 8px;
+		background: var(--accent);
+		color: #fbf8f3;
+		font-weight: 800;
+		font-size: 15px;
+	}
+
+	.topbar__name-wrap {
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+	}
+
+	.topbar__eyebrow {
+		font-size: 9px;
+		font-weight: 600;
+		letter-spacing: 0.12em;
+		text-transform: uppercase;
+		color: var(--text-muted);
+	}
+
+	.topbar__name {
+		width: 190px;
+		height: 26px;
+		padding: 0 8px;
+		font: inherit;
+		font-size: 13px;
+		font-weight: 500;
+		color: var(--text-primary);
+		background: var(--bg-elevated);
+		border: 1px solid var(--border);
+		border-radius: 7px;
+		outline: none;
+	}
+
+	.topbar__name:focus {
+		border-color: var(--accent);
+	}
+
+	.topbar__btn {
+		display: flex;
+		align-items: center;
+		height: 32px;
+		padding: 0 11px;
+		border: 1px solid var(--border);
+		background: transparent;
+		border-radius: 8px;
+		cursor: pointer;
+		font: inherit;
+		font-size: 12.5px;
+		font-weight: 500;
+		color: var(--text-primary);
+		transition: background-color var(--transition);
+	}
+
+	.topbar__btn:hover {
+		background: var(--bg-elevated);
+	}
+
+	.topbar__btn--ghost {
+		border-color: transparent;
+	}
+
+	.topbar__icon {
+		width: 32px;
+		height: 32px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: none;
+		background: transparent;
+		border-radius: 7px;
+		cursor: pointer;
+		color: var(--text-primary);
+		transition: background-color var(--transition);
+	}
+
+	.topbar__icon:hover:not(:disabled) {
+		background: var(--bg-hover);
+	}
+
+	.topbar__icon:disabled {
+		color: var(--text-muted);
+		cursor: not-allowed;
+	}
+
+	.topbar__device {
+		margin: 0 auto;
+		display: flex;
+		align-items: center;
+		gap: 3px;
+		padding: 3px;
+		background: var(--bg-hover);
+		border-radius: 9px;
+	}
+
+	.topbar__device-btn {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		height: 28px;
+		padding: 0 13px;
+		border: none;
+		border-radius: 7px;
+		cursor: pointer;
+		font: inherit;
+		font-size: 12.5px;
+		font-weight: 500;
+		background: transparent;
+		color: var(--text-secondary);
+	}
+
+	.topbar__device-btn--active {
+		background: var(--bg-surface);
+		color: var(--text-primary);
+		box-shadow: var(--shadow-sm);
+	}
+
+	.topbar__lang {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		color: var(--text-secondary);
+	}
+
+	.topbar__lang select {
+		height: 32px;
+		padding: 0 8px;
+		font: inherit;
+		font-size: 12.5px;
+		color: var(--text-primary);
+		background: var(--bg-elevated);
+		border: 1px solid var(--border);
+		border-radius: 8px;
+		outline: none;
+		cursor: pointer;
+	}
+
+	.topbar__translate {
+		display: flex;
+		align-items: center;
+		gap: 7px;
+		height: 32px;
+		padding: 0 13px;
+		background: var(--accent-subtle);
+		border: 1px solid var(--accent-glow);
+		border-radius: 8px;
+		cursor: pointer;
+		font: inherit;
+		font-size: 12.5px;
+		font-weight: 600;
+		color: var(--accent);
+		transition: background-color var(--transition);
+	}
+
+	.topbar__translate:hover:not(:disabled) {
+		background: #e1efe3;
+	}
+
+	.topbar__translate:disabled {
+		cursor: not-allowed;
+		opacity: 0.7;
+	}
+
+	.topbar__spin {
+		animation: topbar-spin 0.7s linear infinite;
+	}
+
+	@keyframes topbar-spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.topbar__save {
+		height: 32px;
+		padding: 0 18px;
+		background: var(--accent);
+		border: none;
+		border-radius: 8px;
+		cursor: pointer;
+		font: inherit;
+		font-size: 13px;
+		font-weight: 600;
+		color: #fbf8f3;
+		box-shadow: var(--shadow-sm);
+		transition: background-color var(--transition);
+	}
+
+	.topbar__save:hover {
+		background: var(--accent-hover);
+	}
+</style>

package/dist/builder/topbar/TopBar.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    undo: () => void;
+    redo: () => void;
+    canUndo: () => boolean;
+    canRedo: () => boolean;
+    onExport: () => void;
+    onImport: (json: string) => void;
+    onSave?: () => void;
+}
+declare const TopBar: import("svelte").Component<Props, {}, "">;
+type TopBar = ReturnType<typeof TopBar>;
+export default TopBar;

package/dist/builder/topbar/styles.css

@@ -0,0 +1,123 @@
+.app-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 20px;
+	height: 56px;
+	background-color: var(--bg-surface, #ffffff);
+	border-bottom: 1px solid var(--border, #e5e7eb);
+	box-sizing: border-box;
+	font-family: sans-serif;
+}
+
+.logo {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.logo-icon {
+	background: var(--accent, #2563eb);
+	color: white;
+	width: 28px;
+	height: 28px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 6px;
+	font-weight: 800;
+	font-size: 14px;
+}
+
+.logo p {
+	font-weight: 600;
+	font-size: 16px;
+	color: var(--text-primary, #111827);
+	margin: 0;
+}
+input {
+	width: 100%;
+	max-width: 260px;
+	height: 40px;
+	border-radius: 6px;
+	border: 1px solid var(--border, #e5e7eb);
+	padding: 0 12px;
+	font-size: 14px;
+	color: var(--text-primary, #111827);
+	background-color: var(--bg-surface, #ffffff);
+	box-sizing: border-box;
+}
+.actions {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.button-group {
+	display: flex;
+	gap: 4px;
+}
+
+.divider {
+	width: 1px;
+	height: 20px;
+	background-color: var(--border, #e5e7eb);
+	margin: 0 4px;
+}
+
+.icon-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 36px;
+	height: 36px;
+	border-radius: 6px;
+	border: 1px solid transparent;
+	background: transparent;
+	color: var(--text-muted, #6b7280);
+	cursor: pointer;
+	transition: all 0.2s ease;
+}
+
+.icon-btn:hover {
+	background-color: var(--btn-hover, #f3f4f6);
+	color: var(--text-primary, #111827);
+}
+
+.icon-btn:active {
+	transform: scale(0.95);
+}
+
+.icon-btn:disabled {
+	opacity: 0.3;
+	cursor: not-allowed;
+}
+
+.lang-select-container {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	padding: 0 8px;
+	border-radius: 4px;
+	height: 32px;
+}
+
+.lang-select-container:hover {
+	background-color: rgba(0, 0, 0, 0.05);
+}
+
+.lang-icon {
+	color: #666;
+	pointer-events: none;
+}
+
+.lang-dropdown {
+	border: none;
+	background: transparent;
+	font-size: 13px;
+	font-weight: 500;
+	cursor: pointer;
+	outline: none;
+	color: #444;
+	padding-right: 4px;
+}

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

@@ -0,0 +1,9 @@
+export declare const DESKTOP_WIDTH = 1040;
+export declare const MOBILE_WIDTH = 390;
+export declare const viewport: {
+    device: "desktop" | "mobile";
+    preview: boolean;
+};
+export declare function setDevice(device: 'desktop' | 'mobile'): void;
+export declare function togglePreview(): void;
+export declare function frameWidth(): number;

package/dist/builder/viewport.svelte.js

@@ -0,0 +1,17 @@
+import { setSettingsDevice } from '../settings';
+export const DESKTOP_WIDTH = 1040;
+export const MOBILE_WIDTH = 390;
+export const viewport = $state({
+    device: 'desktop',
+    preview: false
+});
+export function setDevice(device) {
+    viewport.device = device;
+    setSettingsDevice(device);
+}
+export function togglePreview() {
+    viewport.preview = !viewport.preview;
+}
+export function frameWidth() {
+    return viewport.device === 'mobile' ? MOBILE_WIDTH : DESKTOP_WIDTH;
+}

package/dist/elements/_shared/Arrow.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	type Direction = 'up' | 'down' | 'left' | 'right';
+
+	let {
+		width = 19,
+		height = 17,
+		direction = 'down',
+		stroke = 'currentColor',
+		className = ''
+	}: {
+		width?: number;
+		height?: number;
+		direction?: Direction;
+		stroke?: string;
+		className?: string;
+	} = $props();
+</script>
+
+<svg
+	{width}
+	{height}
+	viewBox="0 0 19 17"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	class="arrow arrow-{direction} {className}"
+>
+	<path
+		d="M3 6L9.5 12L16 6"
+		{stroke}
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
+
+<style>
+	.arrow {
+		transition: transform 0.2s ease;
+	}
+	.arrow-up {
+		transform: rotate(180deg);
+	}
+	.arrow-left {
+		transform: rotate(90deg);
+	}
+	.arrow-right {
+		transform: rotate(-90deg);
+	}
+	.arrow-down {
+		transform: rotate(0deg);
+	}
+
+	@container page (min-width: 768px) {
+		.arrow.md-rotate-left {
+			transform: rotate(-90deg);
+		}
+	}
+</style>

package/dist/elements/_shared/Arrow.svelte.d.ts

@@ -0,0 +1,11 @@
+type Direction = 'up' | 'down' | 'left' | 'right';
+type $$ComponentProps = {
+    width?: number;
+    height?: number;
+    direction?: Direction;
+    stroke?: string;
+    className?: string;
+};
+declare const Arrow: import("svelte").Component<$$ComponentProps, {}, "">;
+type Arrow = ReturnType<typeof Arrow>;
+export default Arrow;

package/dist/elements/_shared/GradientBorder.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		backgroundGradient = 'linear-gradient(180deg, #EC491200, #B7350D 100%)',
+		width = '1px',
+		className = '',
+		children
+	}: {
+		backgroundGradient?: string;
+		width?: string;
+		className?: string;
+		children: Snippet;
+	} = $props();
+</script>
+
+<div class="lgb-wrapper {className}" style="padding: {width};">
+	<div
+		class="lgb-mask"
+		style="background: {backgroundGradient}; padding: {width}; border-radius: inherit;"
+	></div>
+	{@render children()}
+</div>
+
+<style>
+	.lgb-wrapper {
+		position: relative;
+	}
+
+	.lgb-mask {
+		display: none;
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+		z-index: 2;
+	}
+
+	@supports (
+		(-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)) and
+			(mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)) and
+			(-webkit-mask-composite: destination-out) and (mask-composite: exclude)
+	) {
+		.lgb-mask {
+			display: block;
+			mask:
+				linear-gradient(#fff 0 0) content-box,
+				linear-gradient(#fff 0 0);
+			-webkit-mask:
+				linear-gradient(#fff 0 0) content-box,
+				linear-gradient(#fff 0 0);
+			mask-composite: exclude;
+			-webkit-mask-composite: destination-out;
+		}
+	}
+</style>

package/dist/elements/_shared/GradientBorder.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    backgroundGradient?: string;
+    width?: string;
+    className?: string;
+    children: Snippet;
+};
+declare const GradientBorder: import("svelte").Component<$$ComponentProps, {}, "">;
+type GradientBorder = ReturnType<typeof GradientBorder>;
+export default GradientBorder;