@widgetic/creator 0.3.71 → 0.3.73

package/dist/components/BrandKitPanel.svelte

@@ -0,0 +1,556 @@
+<script lang="ts">
+	import { writable } from 'svelte/store';
+	import { DropdownMenu, Portal } from '@widgetic/design-system';
+	import { FontInputController } from '@widgetic/editor';
+	import FileUrlSourceControl from './FileUrlSourceControl.svelte';
+	import HoverTooltip from './HoverTooltip.svelte';
+
+	interface FontModel {
+		family: string;
+		weight: string;
+		category: string;
+	}
+
+	interface Props {
+		class?: string;
+		style?: string;
+		part?: 'checks' | 'panel';
+		brandKitEnabled?: boolean;
+		librariesEnabled?: boolean;
+		showPresetLibraries?: boolean;
+		suspendPickers?: boolean;
+		primary?: string;
+		secondary?: string;
+		title?: string;
+		sub?: string;
+		fonts?: string[];
+		libraries?: string[];
+		libraryGitUrl?: string;
+		libraryFileName?: string;
+		libraryUploads?: { name: string; content: string; encoding: string }[];
+		fontUploads?: { name: string; content: string; encoding: string }[];
+		showLanguage?: boolean;
+		language?: string;
+	}
+
+	const maxFonts = 3;
+
+	let {
+		class: className = '',
+		style = '',
+		part = 'checks',
+		brandKitEnabled = $bindable(false),
+		librariesEnabled = $bindable(false),
+		showPresetLibraries = false,
+		suspendPickers = false,
+		primary = $bindable('#314F2F'),
+		secondary = $bindable('#7BA668'),
+		title = $bindable('#0F2010'),
+		sub = $bindable('#5C6B58'),
+		fonts = $bindable(['Inter']),
+		libraries = $bindable([] as string[]),
+		libraryGitUrl = $bindable(''),
+		libraryFileName = $bindable(''),
+		libraryUploads = $bindable([] as { name: string; content: string; encoding: string }[]),
+		fontUploads = $bindable([] as { name: string; content: string; encoding: string }[]),
+		showLanguage = false,
+		language = $bindable('svelte'),
+	}: Props = $props();
+
+	const libraryChoices = [
+		{ id: 'chart.js/auto', label: 'Chart.js' },
+		{ id: 'd3', label: 'D3' },
+		{ id: 'gsap', label: 'GSAP' },
+		{ id: 'three', label: 'Three.js' },
+	];
+
+	// FontInputController requires a store for its open-dropdown contract.
+	const openDropdowns = writable(new Set<string>());
+
+	let fontModels = $state<FontModel[]>(
+		(fonts.length ? fonts : ['Inter']).slice(0, maxFonts).map((family) => ({
+			family,
+			weight: '400',
+			category: 'sans-serif',
+		})),
+	);
+
+	function publishFonts() {
+		fonts = fontModels.map((model) => model.family);
+	}
+
+	function toggleDropdown(id: string) {
+		openDropdowns.update((current) => {
+			const next = new Set(current);
+			if (next.has(id)) next.delete(id);
+			else {
+				next.clear();
+				next.add(id);
+			}
+			return next;
+		});
+	}
+
+	function updateFont(index: number, next: { family?: string } | null) {
+		const family = next?.family?.trim() || 'Inter';
+		if (fontModels[index]?.family === family) return;
+		fontModels[index] = { family, weight: '400', category: 'sans-serif' };
+		publishFonts();
+	}
+
+	function addFont() {
+		if (fontModels.length >= maxFonts) return;
+		fontModels = [...fontModels, { family: 'Inter', weight: '400', category: 'sans-serif' }];
+		publishFonts();
+	}
+
+	function removeFont(index: number) {
+		if (fontModels.length <= 1) return;
+		fontModels = fontModels.filter((_, entryIndex) => entryIndex !== index);
+		publishFonts();
+	}
+
+	function toggleLibrary(id: string) {
+		const next = libraries.includes(id)
+			? libraries.filter((entry) => entry !== id)
+			: [...libraries, id];
+		libraries = next;
+		if (next.length > 0) librariesEnabled = true;
+	}
+
+	let iconFileName = $state('');
+	let iconUrl = $state('');
+
+	type SourceRow = { id: string; fileName: string; url: string; content: string; encoding: string };
+	const emptySource = (): SourceRow => ({
+		id: crypto.randomUUID(),
+		fileName: '',
+		url: '',
+		content: '',
+		encoding: 'utf8',
+	});
+	let libraryRows = $state<SourceRow[]>([emptySource()]);
+	let iconRows = $state<SourceRow[]>([emptySource()]);
+
+	function addSourceRow(kind: 'library' | 'icon') {
+		const rows = kind === 'library' ? libraryRows : iconRows;
+		if (rows.length >= 4) return;
+		const next = [emptySource(), ...rows];
+		if (kind === 'library') libraryRows = next;
+		else iconRows = next;
+	}
+
+	function removeSourceRow(kind: 'library' | 'icon', id: string) {
+		const rows = kind === 'library' ? libraryRows : iconRows;
+		const next = rows.filter((row) => row.id !== id);
+		const kept = next.length > 0 ? next : [emptySource()];
+		if (kind === 'library') libraryRows = kept;
+		else iconRows = kept;
+	}
+
+	let fontFileName = $state('');
+	let fontFileContent = $state('');
+	let fontFileEncoding = $state('base64');
+	let fontFileUrl = $state('');
+
+	function clearFontUpload() {
+		fontFileName = '';
+		fontFileContent = '';
+		fontFileEncoding = 'base64';
+		fontFileUrl = '';
+	}
+
+	$effect(() => {
+		libraryFileName = libraryRows[0]?.fileName || '';
+		libraryGitUrl = libraryRows[0]?.url || '';
+		iconFileName = iconRows[0]?.fileName || '';
+		iconUrl = iconRows[0]?.url || '';
+		libraryUploads = [...libraryRows, ...iconRows]
+			.filter((row) => row.fileName && row.content)
+			.map((row) => ({ name: row.fileName, content: row.content, encoding: row.encoding }));
+		fontUploads = fontFileName && fontFileContent
+			? [{ name: fontFileName, content: fontFileContent, encoding: fontFileEncoding || 'base64' }]
+			: [];
+	});
+
+	let brandPanelOpen = $state(false);
+	let brandPanelMaxHeight = $state(0);
+	let brandButtonEl = $state<HTMLLabelElement | null>(null);
+	let brandPopoverEl = $state<HTMLDivElement | null>(null);
+	let brandPanelTop = $state(0);
+	let brandPanelLeft = $state(0);
+
+	function placePopover(anchor: HTMLElement | null, panel: HTMLElement | null, width: number) {
+		if (!anchor) return { top: 0, left: 8 };
+		const rect = anchor.getBoundingClientRect();
+		const height = panel?.offsetHeight || 320;
+		const left = Math.max(8, Math.min(rect.left, window.innerWidth - width - 8));
+		const below = rect.bottom + 6;
+		const fitsBelow = below + height <= window.innerHeight - 8;
+		const top = fitsBelow ? below : Math.max(8, rect.top - height - 6);
+		return { top, left };
+	}
+
+	function closeFontPickers() {
+		openDropdowns.set(new Set());
+	}
+
+	function onBrandKitChange(event: Event) {
+		brandKitEnabled = (event.currentTarget as HTMLInputElement).checked;
+		closeFontPickers();
+		brandPanelOpen = brandKitEnabled;
+		if (!brandKitEnabled) brandPanelMaxHeight = 0;
+	}
+
+	function onLibrariesChange(event: Event) {
+		librariesEnabled = (event.currentTarget as HTMLInputElement).checked;
+	}
+
+	function componentExtension() {
+		return language === 'react' ? '.jsx' : '.svelte';
+	}
+
+	function sourceAccept(includeSvg: boolean) {
+		const extensions = ['.js', '.ts', componentExtension(), '.zip', '.tar', '.tgz', '.gz'];
+		if (includeSvg) extensions.unshift('.svg');
+		return extensions.join(',');
+	}
+
+	function uploadTooltip(includeSvg: boolean) {
+		return includeSvg ? 'Upload your icon library.' : 'Upload your custom library.';
+	}
+
+	function urlPlaceholder(includeSvg: boolean) {
+		const component = componentExtension();
+		return includeSvg
+			? `URL (git, archive, .svg, ${component})`
+			: `URL (git, archive, .js, .ts, ${component})`;
+	}
+
+	$effect(() => {
+		if (!brandPanelOpen) return;
+
+		function place() {
+			const brandPlace = placePopover(brandButtonEl, brandPopoverEl, 320);
+			brandPanelTop = brandPlace.top;
+			brandPanelLeft = brandPlace.left;
+			const openHeight = brandPopoverEl?.offsetHeight || 0;
+			if (openHeight > 0 && brandPanelMaxHeight === 0) brandPanelMaxHeight = openHeight;
+		}
+
+		function onPointerDown(event: PointerEvent) {
+			const target = event.target as HTMLElement | null;
+			if (!target) return;
+			if (brandButtonEl?.contains(target)) return;
+			if (target.closest('.generation-brand-kit-popover')) return;
+			if (target.closest('.font-input-popover')) return;
+			if (target.closest('#widgetic-font-picker-portal')) return;
+			closeFontPickers();
+			brandPanelOpen = false;
+			brandPanelMaxHeight = 0;
+		}
+
+		place();
+		const frame = requestAnimationFrame(place);
+		window.addEventListener('pointerdown', onPointerDown, true);
+		window.addEventListener('resize', place);
+		window.addEventListener('scroll', place, true);
+		return () => {
+			cancelAnimationFrame(frame);
+			window.removeEventListener('pointerdown', onPointerDown, true);
+			window.removeEventListener('resize', place);
+			window.removeEventListener('scroll', place, true);
+		};
+	});
+</script>
+
+{#if part === 'checks'}
+	<div class="generation-options-checks contents {className}" {style}>
+		<label
+			class="generation-brand-kit-toggle ml-auto flex h-10 shrink-0 cursor-pointer items-center gap-1.5 rounded-lg border px-2 text-sm {brandKitEnabled ? 'border-[#314F2F] bg-[#314F2F] text-white' : 'border-gray-300 bg-white text-gray-800'}"
+			bind:this={brandButtonEl}
+		>
+			<input
+				class="generation-option-check cursor-pointer"
+				type="checkbox"
+				checked={brandKitEnabled}
+				onchange={onBrandKitChange}
+			/>
+			Brand kit
+		</label>
+		<div class="generation-libraries-row flex w-full flex-col gap-2">
+			<div class="generation-libraries-checks flex flex-nowrap items-center gap-1">
+				{#if showLanguage}
+					<HoverTooltip class="inline-flex shrink-0" text="Select language">
+						<DropdownMenu.Root>
+							<DropdownMenu.Trigger
+								class="generation-language-select flex h-10 w-[4.75rem] shrink-0 cursor-pointer items-center justify-between gap-0.5 rounded-lg border border-gray-300 bg-white px-1.5 text-sm text-gray-900"
+							>
+								<span class="truncate">{language === 'react' ? 'React' : 'Svelte'}</span>
+								<svg class="h-3 w-3 shrink-0 text-gray-500" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+									<path d="M3 4.5 6 7.5 9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+								</svg>
+							</DropdownMenu.Trigger>
+							<DropdownMenu.Content class="w-[4.75rem] min-w-0">
+								<DropdownMenu.Item
+									class="cursor-pointer {language === 'svelte' ? 'bg-[#314F2F]/15 text-[#314F2F]' : ''}"
+									onSelect={() => (language = 'svelte')}
+								>Svelte</DropdownMenu.Item>
+								<DropdownMenu.Item
+									class="cursor-pointer {language === 'react' ? 'bg-[#314F2F]/15 text-[#314F2F]' : ''}"
+									onSelect={() => (language = 'react')}
+								>React</DropdownMenu.Item>
+							</DropdownMenu.Content>
+						</DropdownMenu.Root>
+					</HoverTooltip>
+				{/if}
+				<label class="generation-option-toggle flex h-10 shrink-0 cursor-pointer items-center gap-1.5 rounded-lg border px-2 text-sm {librariesEnabled ? 'border-[#314F2F] bg-[#314F2F] text-white' : 'border-gray-300 bg-white text-gray-800'}">
+					<input class="generation-option-check cursor-pointer" type="checkbox" checked={librariesEnabled} onchange={onLibrariesChange} />
+					Libraries
+				</label>
+				{#if librariesEnabled && showPresetLibraries}
+					{#each libraryChoices as choice (choice.id)}
+						<label class="generation-library flex items-center gap-1 text-xs text-gray-700">
+							<input
+								class="generation-library-check cursor-pointer"
+								type="checkbox"
+								checked={libraries.includes(choice.id)}
+								onchange={() => toggleLibrary(choice.id)}
+							/>
+							{choice.label}
+						</label>
+					{/each}
+				{/if}
+				{#if librariesEnabled}
+					<HoverTooltip class="inline-flex shrink-0" text="Add Library">
+						<button
+							type="button"
+							class="generation-library-add flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border border-gray-300 bg-white text-sm text-gray-800"
+							aria-label="Add Library"
+							onclick={() => addSourceRow('library')}
+						>+</button>
+					</HoverTooltip>
+				{/if}
+			</div>
+			{#if librariesEnabled}
+				{#each libraryRows as row (row.id)}
+					<div class="generation-source-row flex items-center gap-1">
+						<FileUrlSourceControl
+							class="min-w-0 flex-1"
+							bind:fileName={row.fileName}
+							bind:fileContent={row.content}
+							bind:fileEncoding={row.encoding}
+							bind:url={row.url}
+							fileLabel="Upload library"
+							fileTitle={uploadTooltip(false)}
+							urlPlaceholder={urlPlaceholder(false)}
+							accept={sourceAccept(false)}
+						/>
+						{#if libraryRows.length > 1}
+							<button
+								type="button"
+								class="generation-source-remove flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border border-gray-300 text-gray-500"
+								aria-label="Remove library"
+								onclick={() => removeSourceRow('library', row.id)}
+							>
+								<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+									<path d="M4 7h16" />
+									<path d="M9 7V5h6v2" />
+									<path d="M8 7l1 13h6l1-13" />
+								</svg>
+							</button>
+						{/if}
+					</div>
+				{/each}
+			{/if}
+		</div>
+	</div>
+	{#if brandPanelOpen}
+		<Portal
+			target="generation-brand-kit-portal"
+			class="generation-brand-kit-portal-root"
+			style="position: fixed; top: {brandPanelTop}px; left: {brandPanelLeft}px; width: 320px; height: auto;"
+		>
+			<div
+				class="generation-brand-kit-popover flex flex-col gap-3 overflow-y-auto rounded-lg border border-gray-200 bg-white p-3 shadow-lg"
+				style={brandPanelMaxHeight > 0 ? `max-height: ${brandPanelMaxHeight}px;` : ''}
+				bind:this={brandPopoverEl}
+			>
+				<p class="generation-options-note text-xs text-gray-500">Replaces the Widgetic palette for this generation.</p>
+				<section class="generation-color-palette flex flex-col gap-2">
+					<h3 class="generation-section-title text-xs font-semibold text-gray-800">Color palette</h3>
+					<div class="generation-brand-colors flex flex-wrap items-end gap-3">
+						<label class="generation-brand-color flex flex-col gap-1 text-xs text-gray-600">
+							Primary
+							<input class="generation-brand-color-input h-8 w-14 cursor-pointer border border-gray-200 bg-white" type="color" bind:value={primary} />
+						</label>
+						<label class="generation-brand-color flex flex-col gap-1 text-xs text-gray-600">
+							Secondary
+							<input class="generation-brand-color-input h-8 w-14 cursor-pointer border border-gray-200 bg-white" type="color" bind:value={secondary} />
+						</label>
+						<label class="generation-brand-color flex flex-col gap-1 text-xs text-gray-600">
+							Title
+							<input class="generation-brand-color-input h-8 w-14 cursor-pointer border border-gray-200 bg-white" type="color" bind:value={title} />
+						</label>
+						<label class="generation-brand-color flex flex-col gap-1 text-xs text-gray-600">
+							Sub
+							<input class="generation-brand-color-input h-8 w-14 cursor-pointer border border-gray-200 bg-white" type="color" bind:value={sub} />
+						</label>
+					</div>
+				</section>
+				<div class="generation-section-separator border-t border-gray-200"></div>
+				<section class="generation-brand-fonts flex flex-col gap-2">
+					<div class="generation-fonts-header flex items-center justify-between gap-2">
+						<h3 class="generation-section-title text-xs font-semibold text-gray-800">Fonts</h3>
+						{#if fontModels.length < maxFonts && !suspendPickers}
+							<button
+								type="button"
+								class="generation-brand-font-add h-7 cursor-pointer rounded-md border border-gray-300 px-2 text-xs text-gray-700"
+								onclick={addFont}
+							>
+								+ Font
+							</button>
+						{/if}
+					</div>
+					{#each fontModels as model, index (index)}
+						<div class="generation-brand-font-row flex items-start gap-2">
+							{#if suspendPickers}
+								<p class="generation-brand-font-name min-w-0 flex-1 py-2 text-sm text-gray-800">{model.family}</p>
+							{:else}
+								<div class="generation-brand-font-picker min-w-0 flex-1">
+									<FontInputController
+										label={index === 0 ? 'Font' : `Font ${index + 1}`}
+										controllerId="generation-brand-font-{index}"
+										value={model}
+										{openDropdowns}
+										{toggleDropdown}
+										hideTrashIcon={true}
+										hideRecentFromList={true}
+										onChange={(next) => updateFont(index, next)}
+									/>
+								</div>
+							{/if}
+							{#if fontModels.length > 1}
+								<button
+									type="button"
+									class="generation-brand-font-remove mt-1 flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border border-gray-300 text-gray-500"
+									aria-label="Remove font"
+									onclick={() => removeFont(index)}
+								>
+									<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+										<path d="M4 7h16" />
+										<path d="M9 7V5h6v2" />
+										<path d="M8 7l1 13h6l1-13" />
+									</svg>
+								</button>
+							{/if}
+						</div>
+					{/each}
+					<div class="generation-font-upload flex items-center gap-1">
+						<FileUrlSourceControl
+							class="min-w-0 flex-1"
+							bind:fileName={fontFileName}
+							bind:fileContent={fontFileContent}
+							bind:fileEncoding={fontFileEncoding}
+							bind:url={fontFileUrl}
+							fileLabel="Upload Fonts"
+							fileTitle="Upload a font file or an archive."
+							urlPlaceholder="URL (archive, .woff2, .ttf, .otf)"
+							accept=".woff,.woff2,.ttf,.otf,.eot,.zip,.tar,.tgz,.gz"
+						/>
+						{#if fontFileName || fontFileUrl}
+							<button
+								type="button"
+								class="generation-source-remove flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border border-gray-300 text-gray-500"
+								aria-label="Remove uploaded font"
+								onclick={clearFontUpload}
+							>
+								<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+									<path d="M4 7h16" />
+									<path d="M9 7V5h6v2" />
+									<path d="M8 7l1 13h6l1-13" />
+								</svg>
+							</button>
+						{/if}
+					</div>
+				</section>
+				<div class="generation-section-separator border-t border-gray-200"></div>
+				<section class="generation-brand-icons flex flex-col gap-2">
+					<div class="generation-icons-header flex items-center justify-between gap-2">
+						<h3 class="generation-section-title text-xs font-semibold text-gray-800">Icons</h3>
+						<HoverTooltip text="Add icon library">
+							<button
+								type="button"
+								class="generation-icon-add flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border border-gray-300 text-sm text-gray-700"
+								aria-label="Add icon library"
+								onclick={() => addSourceRow('icon')}
+							>+</button>
+						</HoverTooltip>
+					</div>
+					{#each iconRows as row (row.id)}
+						<div class="generation-source-row flex items-center gap-1">
+							<FileUrlSourceControl
+								class="min-w-0 flex-1"
+								bind:fileName={row.fileName}
+								bind:fileContent={row.content}
+								bind:fileEncoding={row.encoding}
+								bind:url={row.url}
+								fileLabel="Upload library"
+								fileTitle={uploadTooltip(true)}
+								urlPlaceholder={urlPlaceholder(true)}
+								accept={sourceAccept(true)}
+							/>
+							{#if iconRows.length > 1}
+								<button
+									type="button"
+									class="generation-source-remove flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border border-gray-300 text-gray-500"
+									aria-label="Remove icon library"
+									onclick={() => removeSourceRow('icon', row.id)}
+								>
+									<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+										<path d="M4 7h16" />
+										<path d="M9 7V5h6v2" />
+										<path d="M8 7l1 13h6l1-13" />
+									</svg>
+								</button>
+							{/if}
+						</div>
+					{/each}
+				</section>
+			</div>
+		</Portal>
+	{/if}
+{/if}
+
+<style>
+	.generation-options-checks input:focus,
+	.generation-options-checks input:focus-visible,
+	.generation-brand-kit-popover button:focus,
+	.generation-brand-kit-popover button:focus-visible,
+	.generation-brand-kit-popover input:focus,
+	.generation-brand-kit-popover input:focus-visible,
+	.generation-language-select:focus,
+	.generation-language-select:focus-visible {
+		outline: none;
+		box-shadow: none;
+	}
+
+	.generation-brand-kit-popover {
+		scrollbar-width: thin;
+		scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+	}
+
+	.generation-brand-kit-popover::-webkit-scrollbar {
+		width: 8px;
+		background: transparent;
+	}
+
+	.generation-brand-kit-popover::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	.generation-brand-kit-popover::-webkit-scrollbar-thumb {
+		background: rgba(0, 0, 0, 0.2);
+		border-radius: 4px;
+	}
+</style>

package/dist/components/BrandKitPanel.svelte.d.ts

@@ -0,0 +1,32 @@
+interface Props {
+    class?: string;
+    style?: string;
+    part?: 'checks' | 'panel';
+    brandKitEnabled?: boolean;
+    librariesEnabled?: boolean;
+    showPresetLibraries?: boolean;
+    suspendPickers?: boolean;
+    primary?: string;
+    secondary?: string;
+    title?: string;
+    sub?: string;
+    fonts?: string[];
+    libraries?: string[];
+    libraryGitUrl?: string;
+    libraryFileName?: string;
+    libraryUploads?: {
+        name: string;
+        content: string;
+        encoding: string;
+    }[];
+    fontUploads?: {
+        name: string;
+        content: string;
+        encoding: string;
+    }[];
+    showLanguage?: boolean;
+    language?: string;
+}
+declare const BrandKitPanel: import("svelte").Component<Props, {}, "brandKitEnabled" | "librariesEnabled" | "primary" | "secondary" | "title" | "sub" | "fonts" | "libraries" | "libraryGitUrl" | "libraryFileName" | "libraryUploads" | "fontUploads" | "language">;
+type BrandKitPanel = ReturnType<typeof BrandKitPanel>;
+export default BrandKitPanel;