fragment-tools 0.2.2 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-tools",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "A web development environment for creative coding",
   "main": "index.js",
   "bin": {

package/src/client/app/components/Build.svelte

@@ -0,0 +1,64 @@
+<script>
+	import { onDestroy } from 'svelte';
+	import { sketchesManager } from '../state/sketches.svelte';
+	import { rendering } from '../state/rendering.svelte';
+	import { layout } from '../state/layout.svelte';
+	import LayoutBuild from '../ui/LayoutBuild.svelte';
+
+	console.log(`Made with Fragment. https://fragment.tools`);
+
+	let sketchKey = $derived(sketchesManager.keys[0]);
+	let sketch = $derived(sketchesManager.sketches[sketchKey]);
+	let buildConfig = $derived(sketch?.buildConfig ?? {});
+	let persistent = $derived(buildConfig.layout?.persistent ?? false);
+	let styles = $derived(buildConfig?.styles ?? '');
+
+	/** @type {HTMLHeadElement} */
+	let head;
+	/** @type {HTMLStyleElement} */
+	let style;
+
+	$effect(() => {
+		if (__BUILD__) {
+			layout.persistent = persistent;
+		} else if (persistent && layout.previewing) {
+			console.warn(`Layout is not preserved while previewing`);
+		}
+	});
+
+	$effect(() => {
+		rendering.override(sketch?.buildConfig);
+	});
+
+	$effect(() => {
+		if (styles !== '') {
+			head = document.getElementsByTagName('head')[0];
+
+			if (style) {
+				head.removeChild(style);
+			}
+
+			style = document.createElement('style');
+			style.setAttribute('type', 'text/css');
+			style.appendChild(document.createTextNode(styles));
+			head.appendChild(style);
+		}
+	});
+
+	onDestroy(() => {
+		if (style && head) {
+			head.removeChild(style);
+		}
+	});
+</script>
+
+{#if sketch}
+	{#if buildConfig.layout?.component}
+		{#await buildConfig.layout.component() then layoutModule}
+			{@const LayoutBuildCustom = layoutModule.default}
+			<LayoutBuildCustom {sketchKey} {buildConfig} {sketch} />
+		{/await}
+	{:else}
+		<LayoutBuild {sketchKey} {sketch} {buildConfig} />
+	{/if}
+{/if}

package/src/client/app/{ui → components}/Preview.svelte

@@ -1,7 +1,6 @@
 <script>
-	import { onDestroy, onMount } from 'svelte';
-
 	import { rendering } from '../state/rendering.svelte';
+	import { onDestroy } from 'svelte';
 	import Build from './Build.svelte';
 
 	const { resizing, width, height, pixelRatio, aspectRatio, scale, preset } =

package/src/client/app/modules/Params.svelte

@@ -148,6 +148,9 @@
 							// value(event, sketch.params);
 						}}
 						onchange={(v) => {
+							if (v?.currentTarget && v?.type === 'change') {
+								v = v.currentTarget.value;
+							}
 							sketch.updateProp(key, v);
 						}}
 					/>

package/src/client/app/state/Sketch.svelte.js

@@ -181,19 +181,20 @@ class Sketch {
 			params = {},
 			triggers = [],
 			group,
+			type,
 			folder,
 			displayName,
 		} = instanceProp;
 
-		if (value.isColor) {
+		if (value?.isColor) {
 			value = { r: value.r, g: value.g, b: value.b };
-		} else if (value.isVector2) {
+		} else if (value?.isVector2) {
 			value = { x: value.x, y: value.y };
-		} else if (value.isVector3) {
+		} else if (value?.isVector3) {
 			value = { x: value.x, y: value.y, z: value.z };
-		} else if (value.isVector4) {
+		} else if (value?.isVector4) {
 			value = { x: value.x, y: value.y, z: value.z, w: value.w };
-		} else if (value.isQuaternion) {
+		} else if (value?.isQuaternion) {
 			value = { x: value.x, y: value.y, z: value.z, w: value.w };
 		}
 
@@ -217,6 +218,7 @@ class Sketch {
 			__initialValue: initialValue,
 			__currentValue: value,
 			__hidden,
+			type,
 			params: structuredClone(params),
 			triggers,
 			group,
@@ -239,9 +241,7 @@ class Sketch {
 		}
 
 		if (instanceProp) {
-			if (isObject(instanceProp.value)) {
-				deepAssign(instanceProp.value, newValue);
-			} else {
+			if (!deepEqual(instanceProp.value, newValue)) {
 				instanceProp.value = newValue;
 			}
 
@@ -365,7 +365,7 @@ class Sketch {
 					!isFunction(instanceProp.value) &&
 					!deepEqual(instanceProp.value, prop.__currentValue)
 				) {
-					this.updateProp(key, structuredClone(instanceProp.value));
+					this.updateProp(key, instanceProp.value);
 				}
 
 				// sync displayName
@@ -440,34 +440,11 @@ class Sketch {
 					for (const paramKey in instanceProp.params) {
 						const instanceParam = instanceProp.params[paramKey];
 						const param = prop.params[paramKey];
-						let needsUpdate = false;
-
-						if (isObject(instanceParam)) {
-							Object.keys(instanceParam).forEach((key) => {
-								if (isObject(instanceParam[key])) {
-									Object.keys(instanceParam[key]).forEach(
-										(k) => {
-											if (
-												instanceParam[key][k] !==
-												param[key][k]
-											) {
-												needsUpdate = true;
-											}
-										},
-									);
-								} else if (instanceParam[key] !== param[key]) {
-									needsUpdate = true;
-								}
-							});
-						} else if (instanceParam !== param) {
-							needsUpdate = true;
-						}
+						let needsUpdate = !deepEqual(instanceParam, param);
 
 						if (needsUpdate) {
-							if (needsUpdate) {
-								prop.params[paramKey] =
-									structuredClone(instanceParam);
-							}
+							prop.params[paramKey] =
+								structuredClone(instanceParam);
 						}
 					}
 				}

package/src/client/app/state/layout.svelte.js

@@ -6,17 +6,22 @@ class Layout {
 	components = $state([]);
 	editing = $state(false);
 	previewing = $state(false);
+	persistent = $state(true);
 
 	getID() {
 		return COMPONENT_ID++;
 	}
 
 	constructor() {
-		this.key = 'layout';
+		this.key = __BUILD__ ? `layout${__START_TIME__}` : `layout`;
 
 		$effect.root(() => {
 			$effect(() => {
-				if (!this.previewing && !__BUILD__) {
+				const isPersistent = __BUILD__
+					? this.persistent
+					: !this.previewing;
+
+				if (isPersistent) {
 					this.persist($state.snapshot(this.components));
 				}
 			});
@@ -156,6 +161,7 @@ class Layout {
 			type: source.type,
 			name: source.name,
 			minimized: source.minimized,
+			headless: source.headless,
 			params: source.params,
 			children: [...source.children],
 		}));

package/src/client/app/state/rendering.svelte.js

@@ -361,7 +361,7 @@ export class Render {
 
 				if (needsUpdate) {
 					console.warn(
-						`Canvas ${attributeName} was changed from sketch to ${dimension}px to previous  ${rendering[attributeName]}`,
+						`Canvas ${attributeName} was changed from sketch from ${rendering[attributeName]}px to ${dimension}px.`,
 					);
 					rendering[attributeName] = dimension;
 
@@ -460,6 +460,8 @@ export class Render {
 		};
 
 		this.init = async () => {
+			if (this.errored) return;
+
 			clearError(this.sketch.key);
 			this.mountParams = this.renderer?.onMountPreview?.(this.params);
 			if (this.mountParams && this.mountParams.canvas !== this.canvas) {
@@ -599,7 +601,8 @@ export class Render {
 				sketch.beforeRecord.forEach((fn) => fn(params));
 			},
 			onTick: ({ time, deltaTime }) => {
-				this.loop(time);
+				this.time += deltaTime;
+				this.loop(this.time);
 			},
 			onComplete: (params) => {
 				sketch.afterRecord.forEach((fn) => fn(params));

package/src/client/app/state/utils.svelte.js

@@ -50,11 +50,22 @@ export function deepAssign(target, source) {
 }
 
 export function deepEqual(target, source) {
-	if (isObject(target) && isObject(target)) {
+	if (isObject(target) && isObject(source)) {
 		let isEqual = true;
-		for (const key in source) {
-			if (isEqual) {
-				isEqual = deepEqual(target[key], source[key]);
+
+		if (
+			Array.isArray(target) &&
+			Array.isArray(source) &&
+			target.length !== source.length
+		) {
+			isEqual = false;
+		}
+
+		if (isEqual) {
+			for (const key in source) {
+				if (isEqual) {
+					isEqual = deepEqual(target[key], source[key]);
+				}
 			}
 		}
 

package/src/client/app/ui/Field.svelte

@@ -21,6 +21,7 @@
 		[`${fieldTypes.COLOR}`]: ColorInput,
 		[`${fieldTypes.BUTTON}`]: ButtonInput,
 		[`${fieldTypes.DOWNLOAD}`]: ButtonInput,
+		[`${fieldTypes.IMPORT}`]: ImportInput,
 		[`${fieldTypes.IMAGE}`]: ImageInput,
 		[`${fieldTypes.INTERVAL}`]: IntervalInput,
 	};
@@ -35,10 +36,11 @@
 	import { inferFieldType } from '../utils/fields.utils.js';
 	import IconTriggers from '../components/IconTriggers.svelte';
 	import IconLocked from '../components/IconLocked.svelte';
+	import ImportInput from './fields/ImportInput.svelte';
 
 	let {
 		key,
-		value = null,
+		value,
 		initialValue = value,
 		context = null,
 		params = $bindable({}),

package/src/client/app/ui/FieldGroup.svelte

@@ -79,7 +79,8 @@
 		transition: opacity 0.1s ease;
 	}
 
-	.header__action:hover .header__icon {
+	:global(body:not(.fragment-dragging)) .header__action:hover .header__icon,
+	.header__action:focus-visible .header__icon {
 		opacity: 1;
 	}
 
@@ -98,7 +99,9 @@
 		transition: opacity 0.1s ease;
 	}
 
-	.header__action:hover .field-group__name,
+	:global(body:not(.fragment-dragging))
+		.header__action:hover
+		.field-group__name,
 	.header__action:focus-visible .field-group__name {
 		opacity: 1;
 	}

package/src/client/app/ui/FieldSection.svelte

@@ -48,7 +48,7 @@
 		grid-template-columns: 1fr;
 	}
 
-	.field__section:hover .field__label,
+	:global(body:not(.fragment-dragging)) .field__section:hover .field__label,
 	.field__section:focus-within .field__label {
 		opacity: 1;
 	}
@@ -102,9 +102,9 @@
 	}
 
 	.field__label:focus-visible {
-		outline: 0;
-		box-shadow: 0 0 0 2px var(--color-text);
-		border-radius: 2px;
+		outline: 2px var(--color-active) solid;
+		outline-offset: 2px;
+		border-radius: 1px;
 	}
 
 	.field__section.secondary {

package/src/client/app/ui/Layout.svelte

@@ -1,7 +1,7 @@
 <script>
 	import Root from './LayoutRoot.svelte';
 	import Column from './LayoutColumn.svelte';
-	import Build from './Build.svelte';
+	import Build from '../components/Build.svelte';
 	import Row from './LayoutRow.svelte';
 	import ModuleRenderer from './ModuleRenderer.svelte';
 	import { layout } from '../state/layout.svelte.js';

package/src/client/app/ui/LayoutBuild.svelte

@@ -0,0 +1,54 @@
+<script>
+	import Monitor from '../modules/Monitor.svelte';
+	import Params from '../modules/Params.svelte';
+	import FloatingParams from './FloatingParams.svelte';
+	import Column from './LayoutColumn.svelte';
+	import Row from './LayoutRow.svelte';
+
+	let { buildConfig = {}, sketch, sketchKey } = $props();
+
+	let gui = $derived(buildConfig.gui ?? {});
+	let layout = $derived(buildConfig.layout ?? {});
+	let headless = $derived(layout.headless ?? false);
+	let resizable = $derived(layout.resizable ?? false);
+
+	let guiOutput = $derived(gui.output ?? true);
+	let guiAlign = $derived(gui.align ?? 'right');
+	let guiHidden = $derived(gui?.hidden);
+	let guiSize = $derived(gui?.size ?? 0.25);
+	let guiMinimize = $derived(gui?.minimize);
+	let guiPosition = $derived(gui?.position);
+</script>
+
+{#if guiPosition === 'fixed'}
+	<Row>
+		{#if guiAlign === 'left'}
+			<Column size={guiSize} {resizable}>
+				<Params {headless} />
+			</Column>
+			<Column size={1 - guiSize} {resizable}>
+				<Monitor {headless} params={{ selected: sketchKey }} />
+			</Column>
+		{:else}
+			<Column size={1 - guiSize} {resizable}>
+				<Monitor {headless} params={{ selected: sketchKey }} />
+			</Column>
+			<Column size={guiSize} {resizable}>
+				<Params {headless} />
+			</Column>
+		{/if}
+	</Row>
+{:else}
+	<Row>
+		<Monitor {headless} {sketchKey} params={{ selected: sketchKey }} />
+		{#if gui}
+			<FloatingParams
+				output={guiOutput}
+				align={guiAlign}
+				size={guiSize}
+				hidden={guiHidden}
+				minimize={guiMinimize}
+			/>
+		{/if}
+	</Row>
+{/if}

package/src/client/app/ui/LayoutColumn.svelte

@@ -1,9 +1,9 @@
 <script>
 	import LayoutComponent from './LayoutComponent.svelte';
 
-	let { size = 1, children } = $props();
+	let { size = 1, children, resizable = true } = $props();
 </script>
 
-<LayoutComponent {size} type="column">
+<LayoutComponent type="column" {size} {resizable}>
 	{@render children?.()}
 </LayoutComponent>

package/src/client/app/ui/LayoutComponent.svelte

@@ -4,10 +4,16 @@
 	import Toolbar from './LayoutToolbar.svelte';
 	import Resizer from './LayoutResizer.svelte';
 	import ModuleRenderer from './ModuleRenderer.svelte';
-	import Preview from './Preview.svelte';
+	import Preview from '../components/Preview.svelte';
 	import LayoutComponent from './LayoutComponent.svelte';
 
-	let { id = layout.getID(), size = 1, type = 'column', children } = $props();
+	let {
+		id = layout.getID(),
+		size = 1,
+		type = 'column',
+		children,
+		resizable = true,
+	} = $props();
 
 	let parent = getContext('parent');
 	let isColumn = $derived(type === 'column');
@@ -120,7 +126,7 @@
 			{/if}
 		{/each}
 	{:else}
-		{@render children()}
+		{@render children?.()}
 	{/if}
 	{#if layout.editing && (isRoot || (childComponents.length === 1 && childComponents[0].type === 'module') || childComponents.length === 0)}
 		<Toolbar
@@ -134,7 +140,11 @@
 	{/if}
 </div>
 {#if !isRoot}
-	<Resizer direction={isColumn ? 'vertical' : 'horizontal'} {current} />
+	<Resizer
+		direction={isColumn ? 'vertical' : 'horizontal'}
+		{current}
+		disabled={!resizable}
+	/>
 {/if}
 
 <style>

package/src/client/app/ui/LayoutResizer.svelte

@@ -11,7 +11,11 @@
 	import { layout } from '../state/layout.svelte.js';
 	import { clamp, map } from '../utils/math.utils.js';
 
-	let { direction = DIRECTIONS.HORIZONTAL, current } = $props();
+	let {
+		direction = DIRECTIONS.HORIZONTAL,
+		current,
+		disabled = false,
+	} = $props();
 
 	let visible = $state(false);
 	let isDragging = $state(false);
@@ -133,6 +137,7 @@
 	class="resizer resizer--{direction}"
 	class:dragging={isDragging}
 	class:editing={layout.editing}
+	class:disabled
 >
 	<div
 		class="resizer-hover"
@@ -150,6 +155,10 @@
 		position: relative;
 	}
 
+	.resizer.disabled {
+		pointer-events: none;
+	}
+
 	[class~='resizer']:last-of-type {
 		display: none;
 	}
@@ -177,7 +186,7 @@
 		opacity: 0.1;
 	}
 
-	.resizer .resizer-hover:hover:before {
+	:global(body:not(.fragment-dragging)) .resizer .resizer-hover:hover:before {
 		opacity: 0.25;
 	}
 

package/src/client/app/ui/LayoutRow.svelte

@@ -1,9 +1,9 @@
 <script>
 	import LayoutComponent from './LayoutComponent.svelte';
 
-	let { size = 1, children } = $props();
+	let { size = 1, children, resizable = true } = $props();
 </script>
 
-<LayoutComponent {size} type="row">
+<LayoutComponent type="row" {size} {resizable}>
 	{@render children?.()}
 </LayoutComponent>

package/src/client/app/ui/fields/ButtonInput.svelte

@@ -57,15 +57,15 @@
 		color: var(--color-text-input-disabled);
 	}
 
-	.button:hover {
+	:global(body:not(.fragment-dragging)) .button:hover {
 		color: var(--color-text);
 
 		box-shadow: inset 0 0 0 1px
 			var(--box-shadow-color-active, var(--color-active));
 	}
 
-	.button:active,
-	.button:focus-visible {
+	:global(body:not(.fragment-dragging)) .button:active,
+	:global(body:not(.fragment-dragging)) .button:focus-visible {
 		box-shadow: 0 0 0 2px
 			var(--box-shadow-color-active, var(--color-active));
 	}

package/src/client/app/ui/fields/ColorInput.svelte

@@ -3,19 +3,27 @@
 	import TextInput from './TextInput.svelte';
 	import Field from '../Field.svelte';
 
-	let { value, context = null, key = '', disabled = false, onchange } = $props();
+	let {
+		value,
+		context = null,
+		key = '',
+		disabled = false,
+		onchange,
+	} = $props();
 
 	let format = $derived(color.getColorFormat(value));
 	let hexValue = $derived(color.toHex(value, format));
 	let textValue = $state();
 	let alpha = $state(1);
-	let hasAlpha = $derived([
-		color.FORMATS.RGBA_STRING,
-		color.FORMATS.VEC4_STRING,
-		color.FORMATS.VEC4_ARRAY,
-		color.FORMATS.RGBA_OBJECT,
-		color.FORMATS.HSLA_STRING,
-	].includes(format));
+	let hasAlpha = $derived(
+		[
+			color.FORMATS.RGBA_STRING,
+			color.FORMATS.VEC4_STRING,
+			color.FORMATS.VEC4_ARRAY,
+			color.FORMATS.RGBA_OBJECT,
+			color.FORMATS.HSLA_STRING,
+		].includes(format),
+	);
 
 	$effect(() => {
 		if (hasAlpha) {
@@ -24,7 +32,7 @@
 		} else {
 			alpha = 1;
 		}
-	})
+	});
 
 	$effect(() => {
 		textValue = color.toString(value, format)?.toLowerCase();
@@ -36,10 +44,10 @@
 		if (format === newFormat) {
 			onchange(newColor);
 		} else {
-			const components = color.toComponents(newColor); 
+			const components = color.toComponents(newColor);
 			const [r, g, b] = components;
 
-			switch(format) {
+			switch (format) {
 				case color.FORMATS.RGB_OBJECT:
 					onchange({ r, g, b });
 					break;
@@ -47,7 +55,9 @@
 					onchange({ r, g, b, a: alpha });
 					break;
 				default:
-					onchange(color.componentsToFormat([r, g, b, alpha], format));
+					onchange(
+						color.componentsToFormat([r, g, b, alpha], format),
+					);
 			}
 		}
 	}
@@ -207,7 +217,7 @@
 		pointer-events: none;
 	}
 
-	.mirror:hover {
+	:global(body:not(.fragment-dragging)) .mirror:hover {
 		box-shadow: inset 0 0 0 1px var(--box-shadow-color, var(--color-active));
 	}
 

package/src/client/app/ui/fields/ImportInput.svelte

@@ -0,0 +1,52 @@
+<script>
+	import ButtonInput from './ButtonInput.svelte';
+
+	let {
+		value,
+		label = 'import',
+		disabled = false,
+		title = '',
+		accept,
+		readAs = 'readAsText',
+		children,
+	} = $props();
+
+	/** @type {HTMLInputElement}*/
+	let input;
+
+	let fileReader = new FileReader();
+	fileReader.onload = (event) => {
+		value(event);
+	};
+
+	function handleClick(event) {
+		event.preventDefault();
+		input.click();
+	}
+
+	function handleChange(event) {
+		if (event.target.files.length > 0) {
+			const readAsFn = fileReader[readAs];
+
+			if (!readAsFn) {
+				console.error(
+					`readAs: '${readAs}' is not a function of FileReader.`,
+				);
+				return;
+			}
+
+			readAsFn.call(fileReader, event.target.files[0]);
+		}
+	}
+</script>
+
+<ButtonInput onclick={handleClick} {disabled} {label} {title}>
+	{@render children?.()}
+</ButtonInput>
+<input
+	class="visually-hidden"
+	onchange={handleChange}
+	type="file"
+	bind:this={input}
+	{accept}
+/>

package/src/client/app/ui/fields/Input.svelte

@@ -53,11 +53,13 @@
 		box-shadow: inset 0 0 0 1px var(--color-border-input);
 	}
 
-	.input-container:not(.disabled):hover {
+	:global(body:not(.fragment-dragging))
+		.input-container:not(.disabled):hover {
 		box-shadow: inset 0 0 0 1px var(--color-active);
 	}
 
-	.input-container:not(.disabled):focus-within {
+	:global(body:not(.fragment-dragging))
+		.input-container:not(.disabled):focus-within {
 		box-shadow: 0 0 0 2px var(--color-active);
 	}
 

package/src/client/app/ui/fields/IntervalInput.svelte

@@ -21,7 +21,7 @@
 	/** @type {DOMRect}*/
 	let rect;
 	/** @type {boolean}*/
-	let isDragging = false;
+	let isDragging = $state(false);
 
 	let proximityIndex = -1;
 
@@ -30,7 +30,8 @@
 	 * @param {MouseEvent} event
 	 */
 	function handleMouseDown(event) {
-		document.body.style.userSelect = 'none';
+		document.body.classList.add('fragment-dragging');
+
 		document.addEventListener('mousemove', handleMouseMove);
 		document.addEventListener('mouseup', handleMouseUp);
 
@@ -85,7 +86,7 @@
 	}
 
 	function handleMouseUp() {
-		document.body.style.userSelect = null;
+		document.body.classList.remove('fragment-dragging');
 		document.removeEventListener('mousemove', handleMouseMove);
 		document.removeEventListener('mouseup', handleMouseUp);
 
@@ -119,9 +120,10 @@
 <div class="interval-input" class:disabled>
 	<FieldInputRow --grid-template-columns="1fr 0.5fr">
 		<div
-			class="range {isDragging ? 'dragging' : ''} "
+			class="range"
+			class:dragging={isDragging}
 			bind:this={node}
-			on:mousedown={handleMouseDown}
+			onmousedown={handleMouseDown}
 		>
 			<div class="handler" style="--position: {p1};" />
 			<div class="filler" style="--p1: {p1}; --p2: {p2};"></div>
@@ -189,7 +191,7 @@
 		container-type: size;
 	}
 
-	.range:hover {
+	:global(body:not(.fragment-dragging)) .range:hover {
 		box-shadow: inset 0 0 0 1px var(--color-active);
 	}
 

package/src/client/app/ui/fields/ProgressInput.svelte

@@ -16,10 +16,11 @@
 	let node;
 	let rect;
 
-	let isDragging = false;
+	let isDragging = $state(false);
 
 	// handlers
 	function handleMouseDown(event) {
+		document.body.classList.add('fragment-dragging');
 		document.addEventListener('mousemove', handleMouseMove);
 		document.addEventListener('mouseup', handleMouseUp);
 
@@ -48,6 +49,7 @@
 	}
 
 	function handleMouseUp() {
+		document.body.classList.remove('fragment-dragging');
 		document.removeEventListener('mousemove', handleMouseMove);
 		document.removeEventListener('mouseup', handleMouseUp);
 
@@ -59,10 +61,11 @@
 </script>
 
 <div
-	class="progress {isDragging ? 'dragging' : ''} "
+	class="progress"
 	bind:this={node}
 	onmousedown={handleMouseDown}
 	class:disabled
+	class:dragging={isDragging}
 >
 	<div class="fill" style="--progress: {progress}; --opacity: {opacity};" />
 </div>
@@ -80,7 +83,7 @@
 		container-type: size;
 	}
 
-	.progress:hover {
+	:global(body:not(.fragment-dragging)) .progress:hover {
 		box-shadow: inset 0 0 0 1px var(--color-active);
 	}
 

package/src/client/app/ui/fields/Select.svelte

@@ -1,4 +1,5 @@
 <script>
+	import { isObject } from '../../state/utils.svelte';
 	import SelectChevrons from '../SelectChevrons.svelte';
 
 	let {
@@ -10,55 +11,48 @@
 		onchange = () => {},
 	} = $props();
 
-	function toStringifiedValue(option, optionType = typeof option) {
-		if (option === null) {
-			return null;
-		} else if (option === undefined) {
-			return undefined;
-		} else if (optionType === 'object') {
-			return toStringifiedValue(option.value);
-		} else if (optionType === 'function') {
-			return option.name;
+	function toStringifiedValue(value) {
+		if (typeof value === 'function') {
+			return `${value.name}()`;
 		}
 
-		return option.toString();
+		return String(value);
 	}
 
-	let sanitizedOptions = $derived(
-		options.map((option) => {
-			let optionType = typeof option;
-			let disabled =
-				optionType === 'object' && typeof option.disabled === 'boolean'
-					? option.disabled
-					: false;
-			let value = optionType === 'object' ? option.value : option;
-
-			let stringValue = toStringifiedValue(option);
-
-			let label = option.label ?? stringValue;
-
-			return {
-				label,
-				value,
-				stringValue,
-				disabled,
-			};
-		}),
-	);
+	function createOption(option) {
+		let value =
+			isObject(option) && 'value' in option ? option.value : option;
+		let label = option?.label ?? toStringifiedValue(value);
+		let disabled = option?.disabled ?? false;
+		let stringValue = toStringifiedValue(value);
+
+		return {
+			label,
+			value,
+			stringValue,
+			disabled,
+		};
+	}
+
+	let sanitizedOptions = $derived.by(() => {
+		let opts = options.map((option, optionIndex) => {
+			return createOption(option, optionIndex);
+		});
+
+		return opts;
+	});
 
 	let sanitizedValue = $derived(
-		sanitizedOptions.find((opt) => opt.value === value),
+		sanitizedOptions.find((opt) => opt.value === value) ??
+			sanitizedOptions[0],
 	);
 
 	function handleChange(event) {
-		const index = sanitizedOptions.findIndex(
+		const sanitizedOption = sanitizedOptions.find(
 			(opt) => opt.stringValue === event.currentTarget.value,
 		);
 
-		const option = options[index];
-		const newValue = typeof option === 'object' ? option.value : option;
-
-		onchange(newValue);
+		onchange(sanitizedOption.value);
 	}
 </script>
 
@@ -84,9 +78,7 @@
 				>
 			{/each}
 		</select>
-		{#if sanitizedOptions.length > 1}
-			<SelectChevrons />
-		{/if}
+		<SelectChevrons />
 	</div>
 </div>
 
@@ -113,7 +105,9 @@
 		background-color: var(--color-background-input);
 	}
 
-	.select-input:not(.disabled) .container:hover {
+	:global(body:not(.fragment-dragging))
+		.select-input:not(.disabled)
+		.container:hover {
 		box-shadow: inset 0 0 0 1px var(--color-active);
 	}
 

package/src/client/app/utils/fields.utils.js

@@ -10,6 +10,7 @@ export const fieldTypes = {
 	COLOR: 'color',
 	BUTTON: 'button',
 	DOWNLOAD: 'download',
+	IMPORT: 'import',
 	IMAGE: 'image',
 	INTERVAL: 'interval',
 };

package/src/client/public/css/global.css

@@ -54,6 +54,20 @@ body {
 	overscroll-behavior: none;
 }
 
+body.fragment-dragging {
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+body.fragment-dragging input {
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+body.fragment-dragging * {
+	cursor: ew-resize !important;
+}
+
 #app {
 	position: fixed;
 	top: 0;

package/src/client/app/ui/Build.svelte

@@ -1,91 +0,0 @@
-<script>
-	import { onDestroy } from 'svelte';
-
-	import Monitor from '../modules/Monitor.svelte';
-	import Params from '../modules/Params.svelte';
-	import FloatingParams from './FloatingParams.svelte';
-	import Column from './LayoutColumn.svelte';
-	import Row from './LayoutRow.svelte';
-	import { sketchesManager } from '../state/sketches.svelte';
-	import { rendering } from '../state/rendering.svelte';
-
-	console.log(`Made with Fragment. https://fragment.tools`);
-
-	let sketchKey = $derived(sketchesManager.keys[0]);
-
-	let sketch = $derived(sketchesManager.sketches[sketchKey]);
-
-	let gui = $derived(sketch?.buildConfig?.gui);
-	let guiOutput = $derived(gui?.output);
-	let guiAlign = $derived(gui?.align ?? 'right');
-	let guiHidden = $derived(gui?.hidden);
-	let guiSize = $derived(gui?.size ?? 0.25);
-	let guiMinimize = $derived(gui?.minimize);
-	let guiPosition = $derived(gui?.position);
-	let styles = $derived(sketch?.buildConfig?.styles ?? '');
-
-	/** @type {HTMLHeadElement} */
-	let head;
-	/** @type {HTMLStyleElement} */
-	let style;
-
-	$effect(() => {
-		rendering.override(sketch?.buildConfig);
-	});
-
-	$effect(() => {
-		if (styles !== '') {
-			head = document.getElementsByTagName('head')[0];
-
-			if (style) {
-				head.removeChild(style);
-			}
-
-			style = document.createElement('style');
-			style.setAttribute('type', 'text/css');
-			style.appendChild(document.createTextNode(styles));
-			head.appendChild(style);
-		}
-	});
-
-	onDestroy(() => {
-		if (style && head) {
-			head.removeChild(style);
-		}
-	});
-</script>
-
-{#if sketch}
-	{#if guiPosition === 'fixed'}
-		<Row>
-			{#if guiAlign === 'left'}
-				<Column size={guiSize}>
-					<Params />
-				</Column>
-				<Column size={1 - guiSize}>
-					<Monitor params={{ selected: sketchKey }} />
-				</Column>
-			{:else}
-				<Column size={1 - guiSize}>
-					<Monitor params={{ selected: sketchKey }} />
-				</Column>
-				<Column size={guiSize}>
-					<Params />
-				</Column>
-			{/if}
-		</Row>
-	{:else}
-		<Row>
-			<Monitor headless {sketchKey} params={{ selected: sketchKey }} />
-			{#if gui}
-				<FloatingParams
-					output={guiOutput}
-					align={guiAlign}
-					size={guiSize}
-					hidden={guiHidden}
-					minimize={guiMinimize}
-				/>
-			{/if}
-		</Row>
-	{/if}
-{/if}