fragment-tools 0.2.10 → 0.2.12

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "fragment-tools",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "description": "A web development environment for creative coding",
-  "main": "index.js",
+  "main": "./src/index.js",
   "bin": {
     "fragment": "bin/index.js"
   },
@@ -30,7 +30,6 @@
     "convert-length": "^1.0.1",
     "get-port": "^7.1.0",
     "gifenc": "^1.0.3",
-    "glslify": "^7.1.1",
     "is-unicode-supported": "^2.0.0",
     "kleur": "^4.1.4",
     "mediabunny": "^1.13.3",

package/src/cli/createConfig.js

@@ -1,5 +1,6 @@
 import path from 'node:path';
 import fs from 'node:fs';
+import url from 'node:url';
 import { defineConfig, loadConfigFromFile, mergeConfig } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 
@@ -8,30 +9,47 @@ import { __dirname, file } from './utils.js';
 import { log } from './log.js';
 import sketches from './plugins/sketches.js';
 
+/**
+ *
+ * @param {{ cwd: string, filepath: string | undefined }} params
+ * @returns {Promise<import('../types/config.js').Config>}
+ */
 export async function loadConfig({ cwd, filepath }) {
 	try {
-		let filename = `fragment.config.js`;
-		let configFile = filepath ? filepath : filename;
 		let configRoot = cwd;
-		let resolvedPath = path.resolve(cwd, configFile);
+		let filenames = [`fragment.config.js`, `fragment.config.ts`];
 
-		if (!fs.existsSync(resolvedPath)) {
-			if (filepath) {
-				log.error(`Config file not found: ${resolvedPath}`);
-			}
-			return {};
+		if (filepath) {
+			filenames = [filepath, ...filenames];
 		}
 
-		log.info(`Extending configuration from ${resolvedPath}`);
+		let filepaths = filenames.map((filename) => {
+			return path.resolve(configRoot, filename);
+		});
 
-		const { config } = await loadConfigFromFile(
-			{
-				command: 'build',
-				mode: 'dev',
-			},
-			configFile,
-			configRoot,
+		let resolvedIndex = filepaths.findIndex((filepath) =>
+			fs.existsSync(filepath),
 		);
+		/** @type {string|undefined} */
+		let resolvedPath = filepaths[resolvedIndex];
+
+		if (filepath && resolvedIndex !== 0) {
+			log.error(`Config file not found: ${filepath}`);
+		}
+
+		if (!resolvedPath) {
+			return {};
+		}
+
+		let configFile = path.relative(cwd, resolvedPath);
+
+		log.info(`Extending configuration from ${configFile}`);
+
+		const config = (
+			await import(
+				`${url.pathToFileURL(configFile).href}?ts=${Date.now()}`
+			)
+		).default;
 
 		return config;
 	} catch (error) {
@@ -43,9 +61,10 @@ export async function loadConfig({ cwd, filepath }) {
 /**
  * Create Vite config from entries
  * @param {string[]} entries
- * @param {options} options
+ * @param {object} [options]
  * @param {boolean} [options.dev=false]
  * @param {boolean} [options.build=false]
+ * @param {string} [configFilepath]
  * @param {string} [cwd=process.cwd()]
  * @returns {import('vite').UserConfig}
  */
@@ -63,8 +82,8 @@ export async function createConfig(
 	log.info(`Creating Vite configuration...`);
 
 	const config = await loadConfig({
-		filepath: configFilepath,
 		cwd,
+		filepath: configFilepath,
 	});
 
 	return mergeConfig(

package/src/cli/plugins/hot-shader-replacement.js

@@ -1,7 +1,6 @@
 import path from 'node:path';
 import fs from 'node:fs';
 import { readFile } from 'node:fs/promises';
-import glslify from 'glslify';
 import { log, dim, green, yellow } from '../log.js';
 
 /**
@@ -232,10 +231,6 @@ ${keyword}${shaderParts[1]}
 			shaderPath,
 		);
 
-		code = glslify(code, {
-			basedir: process.cwd(),
-		});
-
 		if (server) {
 			code = addShaderFilepath(code, shaderPath);
 		}

package/src/cli/run.js

@@ -26,17 +26,23 @@ import hotShaderReplacement from './plugins/hot-shader-replacement.js';
  */
 export async function run(entry, options = {}) {
 	let fragmentServer;
+	/** @type {import('node:fs').FSWatcher} */
+	let watcher;
 
 	const cwd = process.cwd();
 	const command = `run`;
 	const prefix = log.prefix(command);
+
+	const stop = () => {
+		fragmentServer?.close();
+		watcher?.close();
+	};
+
 	const exit = () => {
 		process.off('SIGTERM', exit);
 		process.off('exit', exit);
 
-		if (fragmentServer) {
-			fragmentServer.close();
-		}
+		stop();
 
 		console.log();
 	};
@@ -62,9 +68,10 @@ export async function run(entry, options = {}) {
 			);
 		}
 
+		const hasTSFiles = entries.some((entry) => entry.endsWith('ts'));
 		const tsConfigDirpath = path.join(cwd, FRAGMENT_DIRECTORY);
 		const tsConfigFilepath = path.join(tsConfigDirpath, 'tsconfig.json');
-		if (!fs.existsSync(tsConfigFilepath)) {
+		if (!fs.existsSync(tsConfigFilepath) && hasTSFiles) {
 			await createTsConfigFile(cwd);
 		}
 
@@ -106,6 +113,22 @@ export async function run(entry, options = {}) {
 				],
 			}),
 		);
+
+		watcher = fs.watch(cwd, (eventType, filename) => {
+			if (
+				['fragment.config.js', 'fragment.config.ts'].includes(
+					filename,
+				) ||
+				options.configFilepath?.includes(filename)
+			) {
+				log.warn(`${filename} has changed. Restarting...`);
+				console.log();
+				server.close();
+				stop();
+				run(entry, options);
+			}
+		});
+
 		await server.listen();
 
 		// line break after logs
@@ -130,8 +153,6 @@ export async function run(entry, options = {}) {
 
 		// line break before fragment logs
 		log.message();
-
-		return server;
 	} catch (error) {
 		// line break before error
 		log.message();

package/src/cli/templates/blank/index.ts

@@ -1,4 +1,4 @@
-import { Init, Resize, Update } from '@fragment/types';
+import type { Init, Resize, Update } from '@fragment/types';
 import { defineProps } from '@fragment/types/utils';
 
 export const props = defineProps({});

package/src/cli/templates/default/index.js

@@ -1,3 +1,5 @@
+let resolution = { x: 0, y: 0 };
+
 export const props = {};
 
 /**
@@ -24,8 +26,11 @@ export const init = ({ canvas, context, width, height }) => {};
  * @param {number} params.playcount
  */
 export const update = ({ context, width, height, pixelRatio }) => {
+	const w = width * pixelRatio;
+	const h = height * pixelRatio;
+
 	context.fillStyle = 'rgb(0, 255, 0)';
-	context.fillRect(0, 0, width * pixelRatio, height * pixelRatio);
+	context.fillRect(0, 0, w, h);
 };
 
 /**
@@ -35,6 +40,9 @@ export const update = ({ context, width, height, pixelRatio }) => {
  * @param {number} params.height
  * @param {number} params.pixelRatio
  */
-export const resize = ({ width, height }) => {};
+export const resize = ({ width, height, pixelRatio }) => {
+	resolution.x = width * pixelRatio;
+	resolution.y = height * pixelRatio;
+};
 
 export const rendering = '2d';

package/src/cli/templates/default/index.ts

@@ -1,4 +1,4 @@
-import { Init, Rendering, Resize, Update } from '@fragment/types';
+import type { Init, Rendering, Resize, Update } from '@fragment/types';
 import { defineProps } from '@fragment/types/utils';
 
 export const props = defineProps({});
@@ -11,8 +11,11 @@ export const update: Update<'2d'> = ({
 	height,
 	pixelRatio,
 }) => {
+	const w = width * pixelRatio;
+	const h = height * pixelRatio;
+
 	context.fillStyle = 'rgb(0, 255, 0)';
-	context.fillRect(0, 0, width * pixelRatio, height * pixelRatio);
+	context.fillRect(0, 0, w, h);
 };
 
 export const resize: Resize<'2d'> = ({}) => {};

package/src/cli/templates/fragment-gl/index.ts

@@ -1,4 +1,4 @@
-import { Init, Rendering, Update } from '@fragment/types';
+import type { Init, Rendering, Update } from '@fragment/types';
 
 import fragmentShader from './fragment.fs';
 

package/src/cli/templates/p5/index.ts

@@ -1,6 +1,6 @@
 import p5 from 'p5';
 
-import { Init, Rendering, Update } from '@fragment/types';
+import type { Init, Rendering, Update } from '@fragment/types';
 import { defineProps } from '@fragment/types/utils';
 
 export const props = defineProps({});

package/src/cli/templates/p5-webgl/index.ts

@@ -1,6 +1,6 @@
 import p5, { type Shader } from 'p5';
 
-import { Init, Rendering, Update } from '@fragment/types';
+import type { Init, Rendering, Update } from '@fragment/types';
 import { defineProps } from '@fragment/types/utils';
 
 import fragmentShader from './fragment.fs';

package/src/cli/templates/three-fragment/index.js

@@ -6,9 +6,11 @@ import fragmentShader from './fragment.fs';
 let scene;
 /** @type {THREE.OrthographicCamera} */
 let camera;
+/** @type {THREE.Vector2} */
+let resolution = new THREE.Vector2();
 
 let uniforms = {
-	uResolution: { value: new THREE.Vector2() },
+	uResolution: { value: resolution },
 	uTime: { value: 0 },
 };
 
@@ -87,8 +89,8 @@ export const update = ({ renderer, time, deltaTime }) => {
  * @param {number} params.pixelRatio
  */
 export const resize = ({ width, height, pixelRatio }) => {
-	uniforms.uResolution.value.x = width * pixelRatio;
-	uniforms.uResolution.value.y = height * pixelRatio;
+	resolution.x = width * pixelRatio;
+	resolution.y = height * pixelRatio;
 
 	camera.left = -width * 0.5;
 	camera.right = width * 0.5;

package/src/cli/templates/three-fragment/index.ts

@@ -1,13 +1,14 @@
 import * as THREE from 'three';
 
-import { Init, Rendering, Resize, Update } from '@fragment/types';
+import type { Init, Rendering, Resize, Update } from '@fragment/types';
 
 import fragmentShader from './fragment.fs';
 
 let scene: THREE.Scene;
 let camera: THREE.OrthographicCamera;
+let resolution = new THREE.Vector2();
 let uniforms = {
-	uResolution: { value: new THREE.Vector2() },
+	uResolution: { value: resolution },
 	uTime: { value: 0 },
 };
 
@@ -54,8 +55,8 @@ export const update: Update<'three'> = ({ renderer, time }) => {
 };
 
 export const resize: Resize<'three'> = ({ width, height, pixelRatio }) => {
-	uniforms.uResolution.value.x = width * pixelRatio;
-	uniforms.uResolution.value.y = height * pixelRatio;
+	resolution.x = width * pixelRatio;
+	resolution.y = height * pixelRatio;
 
 	camera.left = -width * 0.5;
 	camera.right = width * 0.5;

package/src/cli/templates/three-orthographic/index.js

@@ -4,6 +4,8 @@ import * as THREE from 'three';
 let scene;
 /** @type {THREE.OrthographicCamera} */
 let camera;
+/** @type {THREE.Vector2} */
+let resolution = new THREE.Vector2();
 
 /**
  * @param {object} params
@@ -49,7 +51,10 @@ export const update = ({ renderer, time, deltaTime }) => {
  * @param {number} params.height
  * @param {number} params.pixelRatio
  */
-export const resize = ({ width, height }) => {
+export const resize = ({ width, height, pixelRatio }) => {
+	resolution.x = width * pixelRatio;
+	resolution.y = height * pixelRatio;
+
 	camera.left = -width * 0.5;
 	camera.right = width * 0.5;
 	camera.top = height * 0.5;

package/src/cli/templates/three-orthographic/index.ts

@@ -1,9 +1,10 @@
 import * as THREE from 'three';
 
-import { Init, Rendering, Resize, Update } from '@fragment/types';
+import type { Init, Rendering, Resize, Update } from '@fragment/types';
 
 let scene: THREE.Scene;
 let camera: THREE.OrthographicCamera;
+let resolution = new THREE.Vector2();
 
 export const init: Init<'three'> = ({}) => {
 	scene = new THREE.Scene();
@@ -17,7 +18,10 @@ export const update: Update<'three'> = ({ renderer }) => {
 	renderer.render(scene, camera);
 };
 
-export const resize: Resize<'three'> = ({ width, height }) => {
+export const resize: Resize<'three'> = ({ width, height, pixelRatio }) => {
+	resolution.x = width * pixelRatio;
+	resolution.y = height * pixelRatio;
+
 	camera.left = -width * 0.5;
 	camera.right = width * 0.5;
 	camera.top = height * 0.5;

package/src/cli/templates/three-perspective/index.js

@@ -4,6 +4,8 @@ import * as THREE from 'three';
 let scene;
 /** @type {THREE.OrthographicCamera} */
 let camera;
+/** @type {THREE.Vector2} */
+let resolution = new THREE.Vector2();
 
 /**
  * @param {object} params
@@ -50,7 +52,10 @@ export const update = ({ renderer, time, deltaTime }) => {
  * @param {number} params.height
  * @param {number} params.pixelRatio
  */
-export const resize = ({ width, height }) => {
+export const resize = ({ width, height, pixelRatio }) => {
+	resolution.x = width * pixelRatio;
+	resolution.y = height * pixelRatio;
+
 	camera.aspect = width / height;
 	camera.updateProjectionMatrix();
 };

package/src/cli/templates/three-perspective/index.ts

@@ -1,9 +1,10 @@
 import * as THREE from 'three';
 
-import { Init, Rendering, Resize, Update } from '@fragment/types';
+import type { Init, Rendering, Resize, Update } from '@fragment/types';
 
 let scene: THREE.Scene;
 let camera: THREE.PerspectiveCamera;
+let resolution = new THREE.Vector2();
 
 export const init: Init<'three'> = ({}) => {
 	scene = new THREE.Scene();
@@ -18,7 +19,10 @@ export const update: Update<'three'> = ({ renderer }) => {
 	renderer.render(scene, camera);
 };
 
-export const resize: Resize<'three'> = ({ width, height }) => {
+export const resize: Resize<'three'> = ({ width, height, pixelRatio }) => {
+	resolution.x = width * pixelRatio;
+	resolution.y = height * pixelRatio;
+
 	camera.aspect = width / height;
 	camera.updateProjectionMatrix();
 };

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

@@ -151,6 +151,7 @@
 						{disabled}
 						bind:params={sketchProps[key].params}
 						bind:triggers={prop.triggers}
+						trackChanges
 						onclick={(event) => {
 							sketch.version++;
 							// value(event, sketch.params);

package/src/client/app/renderers/THREERenderer.js

@@ -14,7 +14,7 @@ import { clearError } from '../state/errors.svelte';
  * @typedef {object} PreviewThreeRenderer
  * @property {number} id
  * @property {THREE.Scene} scene
- * @property {THREE.renderer} renderer
+ * @property {THREE.WebGLrenderer} renderer
  * @property {rendered} boolean
  */
 
@@ -32,7 +32,7 @@ let previews = [];
  * @returns {MountParamsThreeRenderer}
  */
 export let onMountPreview = ({ id, canvas }) => {
-	let renderer = new WebGLRenderer({ antialias: true, canvas });
+	let renderer = new WebGLRenderer({ antialias: true });
 
 	const render = renderer.render;
 
@@ -125,6 +125,7 @@ export let onDestroyPreview = ({ id }) => {
 		const { renderer } = preview;
 		clearError(renderer.getContext().__uuid);
 		renderer.dispose();
+		renderer.forceContextLoss();
 		previews.splice(previewIndex, 1);
 	}
 };

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

@@ -481,7 +481,7 @@ class Sketch {
 		fieldgroups.forEach((fieldgroup) => {
 			const hasAllFieldsHidden = fieldgroup.children
 				.filter((child) => child.type === 'field')
-				.every((child) => this.props[child.key].__hidden());
+				.every((child) => this.props[child.key]?.__hidden());
 			const hasAllFieldgroupsHidden = fieldgroup.children
 				.filter((child) => child.type === 'fieldgroup')
 				.every((child) => child.hidden);

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

@@ -94,6 +94,10 @@ class Rendering {
 		this.estimateRefreshRate();
 	}
 
+	/**
+	 *
+	 * @param {string} renderingMode
+	 */
 	loadRenderer(renderingMode) {
 		if (__THREE_RENDERER__ && renderingMode === 'three') {
 			return import('../renderers/THREERenderer.js');
@@ -321,7 +325,8 @@ export class Render {
 		this.time = 0;
 		this.recording = false;
 
-		let resizeTimeout;
+		/** @type {number|null} */
+		let resizeTimeout = null;
 
 		$effect.pre(() => {
 			const { width, height, pixelRatio } = rendering;
@@ -330,7 +335,10 @@ export class Render {
 				if (resizeTimeout) clearTimeout(resizeTimeout);
 
 				resizeTimeout = setTimeout(() => {
-					clearTimeout(resizeTimeout);
+					if (resizeTimeout) {
+						clearTimeout(resizeTimeout);
+					}
+
 					resizeTimeout = null;
 
 					this.resize(width, height, pixelRatio);
@@ -399,6 +407,7 @@ export class Render {
 		this.then = performance.now();
 
 		this.playhead = 0;
+		this.playheadLast = 0;
 		this.playcount = 0;
 		this.frame = 0;
 
@@ -443,24 +452,23 @@ export class Render {
 				return;
 			}
 
-			let playhead = time / 1000 / duration;
-			playhead %= 1;
-			let playcount = 0;
+			let totalPlayhead = time / 1000 / duration;
+			let playhead = fps === 0 ? 0 : totalPlayhead % 1;
+
+			if (playhead < this.playheadLast) {
+				this.playcount++;
+			}
+			this.playheadLast = playhead;
+
 			if (isFinite(interval)) {
 				// round values for low framerates
 				playhead = Math.floor(playhead / interval) * interval;
 			}
-			if (isFinite(duration)) {
-				playcount = Math.floor(this.timeTotal / 1000 / duration);
-			}
-			if (fps === 0) {
-				playhead = 0;
-			}
+
 			const now = performance.now();
 			const deltaTime = now - this.thenLoop;
 
 			this.playhead = playhead;
-			this.playcount = playcount;
 			this.frame = Math.floor(map(playhead, 0, 1, 1, frameCount + 1));
 			if (
 				this.elapsed === 0 ||
@@ -499,6 +507,9 @@ export class Render {
 
 				this.raf = requestAnimationFrame(() => {
 					this.time = new Date().getTime() - rendering.today;
+					this.initialTime = this.time;
+					this.playheadLast = 0;
+					this.playcount = 0;
 					this.then = this.time;
 					this.thenLoop = performance.now();
 					this.update(this.time);
@@ -522,6 +533,14 @@ export class Render {
 		});
 	}
 
+	/**
+	 *
+	 * @param {Object} params
+	 * @param {HTMLElement} params.container
+	 * @param {HTMLCanvasElement} [params.canvas]
+	 * @param {string} params.context
+	 * @returns
+	 */
 	createCanvas({
 		container,
 		canvas = document.createElement('canvas'),
@@ -543,6 +562,10 @@ export class Render {
 		return canvas;
 	}
 
+	/**
+	 *
+	 * @param {HTMLCanvasElement} canvas
+	 */
 	destroyCanvas(canvas) {
 		if (canvas) {
 			this.observer.disconnect();
@@ -551,12 +574,11 @@ export class Render {
 			canvas.onmousemove = null;
 			canvas.onmouseup = null;
 			canvas.onclick = null;
-			canvas = null;
 		}
 	}
 
 	async screenshot({
-		filename = this.sketch.name ?? this.sketch.key,
+		filename = this.sketch.key,
 		pattern = this.sketch.filenamePattern,
 		exportDir = this.sketch.exportDir,
 	} = {}) {
@@ -616,6 +638,8 @@ export class Render {
 			onStart: (params) => {
 				this.time = 0;
 				this.elapsed = 0;
+				this.playcount = 0;
+				this.playheadLast = 0;
 				this.thenLoop = performance.now();
 
 				sketch.beforeRecord.forEach((fn) => fn(params));
@@ -686,6 +710,10 @@ export class Render {
 		}
 	}
 
+	/**
+	 *
+	 * @param {number} time
+	 */
 	update(time) {
 		if (!this.paused) {
 			const deltaTime = time - this.then;
@@ -705,6 +733,8 @@ export class Render {
 	invalidate() {
 		this.time = 0;
 		this.elapsed = 0;
+		this.playcount = 0;
+		this.playheadLast = 0;
 	}
 
 	dispose() {

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

@@ -4,6 +4,7 @@
 	import CheckboxInput from './fields/CheckboxInput.svelte';
 	import VectorInput from './fields/VectorInput.svelte';
 	import TextInput from './fields/TextInput.svelte';
+	import TextareaInput from './fields/TextareaInput.svelte';
 	import ColorInput from './fields/ColorInput.svelte';
 	import ListInput from './fields/ListInput.svelte';
 	import ButtonInput from './fields/ButtonInput.svelte';
@@ -17,6 +18,7 @@
 		[`${fieldTypes.VEC}`]: VectorInput,
 		[`${fieldTypes.CHECKBOX}`]: CheckboxInput,
 		[`${fieldTypes.TEXT}`]: TextInput,
+		[`${fieldTypes.TEXTAREA}`]: TextareaInput,
 		[`${fieldTypes.LIST}`]: ListInput,
 		[`${fieldTypes.COLOR}`]: ColorInput,
 		[`${fieldTypes.BUTTON}`]: ButtonInput,
@@ -52,6 +54,7 @@
 		onchange,
 		onclick = () => {},
 		children,
+		trackChanges = false,
 		triggers = $bindable([]),
 	} = $props();
 
@@ -63,10 +66,18 @@
 
 			onchange(value);
 		},
+		/**
+		 *
+		 * @param {MouseEvent} event
+		 */
 		button: (event) => {
 			value(event);
 			onclick(event);
 		},
+		/**
+		 *
+		 * @param {MouseEvent} event
+		 */
 		download: async (event) => {
 			try {
 				let [data, filename] = await value(event);
@@ -105,7 +116,12 @@
 				fieldType === fieldTypes.BUTTON),
 	);
 	let triggersActive = $derived(triggers.length > 0);
+	let changed = $derived(trackChanges && !deepEqual(value, initialValue));
 
+	/**
+	 *
+	 * @param {MouseEvent} event
+	 */
 	function toggleTriggers(event) {
 		event.preventDefault();
 
@@ -123,16 +139,15 @@
 		};
 	}
 
-	function hasChanged(current, next) {
-		const changed = !deepEqual(current, next);
-		return changed;
+	function restoreInitialValue() {
+		onchange(initialValue);
 	}
 </script>
 
 <div
 	class="field"
 	class:disabled
-	class:changed={!disabled && hasChanged(value, initialValue)}
+	class:changed={!disabled && changed}
 	style="--index: {index};"
 >
 	<FieldSection
@@ -166,6 +181,15 @@
 		<Component {value} {...fieldProps} {onchange} onclick={onTrigger} />
 		{@render children?.()}
 	</FieldSection>
+	{#if changed}
+		<button
+			class="field__changed"
+			onclick={restoreInitialValue}
+			title="Restore initial value"
+		>
+			<span class="visually-hidden">Restore initial value</span>
+		</button>
+	{/if}
 	{#if triggerable}
 		<FieldSection {key} visible={showTriggers} secondary>
 			<FieldTriggers
@@ -192,28 +216,45 @@
 		border-bottom: 1px solid var(--fragment-spacing-color);
 	}
 
-	.field.changed:before {
-		content: '';
-
+	.field__changed {
 		position: absolute;
 		top: 0px;
 		left: 0px;
 		bottom: 0px;
 		z-index: 1;
 
-		width: 4px;
+		width: 13px;
 		/* height: 4px; */
 		/* border-radius: 2px; */
 
-		--stripes-offset: calc(var(--index) * 1.9px);
+		background: transparent;
+		cursor: pointer;
+
+		&:before {
+			content: '';
+
+			position: absolute;
+			top: 0;
+			left: 0;
+
+			display: block;
+			width: 4px;
+			height: 100%;
+
+			--stripes-offset: calc(var(--index) * 1.9px);
+
+			background: repeating-linear-gradient(
+				45deg,
+				var(--fragment-accent-color) calc(0px + var(--stripes-offset)),
+				var(--fragment-accent-color) calc(2px + var(--stripes-offset)),
+				transparent calc(2px + var(--stripes-offset)),
+				transparent calc(4px + var(--stripes-offset))
+			);
+		}
 
-		background: repeating-linear-gradient(
-			45deg,
-			var(--fragment-accent-color) calc(0px + var(--stripes-offset)),
-			var(--fragment-accent-color) calc(2px + var(--stripes-offset)),
-			transparent calc(2px + var(--stripes-offset)),
-			transparent calc(4px + var(--stripes-offset))
-		);
+		&:hover:before {
+			width: 7px;
+		}
 	}
 
 	:global(.field__input .field) {
@@ -229,6 +270,7 @@
 	.field__actions {
 		display: flex;
 		align-items: center;
+		gap: var(--column-gap);
 	}
 
 	.field__action {

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

@@ -101,7 +101,7 @@
 		}}
 	/>
 {/if}
-<!-- {#if rendering.resizing === SIZES.PRESET}
+{#if rendering.resizing === SIZES.PRESET}
 	<Field key="preset">
 		<FieldInputRow --grid-template-columns="1fr 1fr">
 			<Select
@@ -123,18 +123,20 @@
 			/>
 		</FieldInputRow>
 	</Field>
-{/if} -->
-
+{/if}
 {#if rendering.resizing !== SIZES.PRESET}
 	<Field
 		key="pixelRatio"
 		value={Number(rendering.pixelRatio)}
-		onchange={(pixelRatio) => (rendering.pixelRatio = pixelRatio)}
+		onchange={(pixelRatio) => {
+			rendering.pixelRatio = pixelRatio;
+		}}
 		params={{
 			step: 0.1,
 		}}
 	/>
 {/if}
+
 <!-- {#if $sketchesCount > 1 && $monitors.length > 1}
 	<ParamsMultisampling />
 {/if} -->

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

@@ -69,6 +69,11 @@
 		} else if (render?.recording && !exports.recording) {
 			render.stopRecording();
 		}
+
+		if (exports.capturing) {
+			render.screenshot();
+			exports.capturing = false;
+		}
 	});
 
 	function checkForRefresh(event) {

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

@@ -0,0 +1,93 @@
+<script>
+	let {
+		label,
+		value = $bindable(),
+		height,
+		disabled = false,
+		oninput,
+		onchange,
+		onkeydown,
+		onfocus,
+		onblur,
+	} = $props();
+
+	$inspect(height);
+
+	/** @type {HTMLInputElement} */
+	let node;
+
+	function onKeyPress(event) {
+		if (event.key === 'Enter' && !event.shiftKey) {
+			node.blur();
+		}
+	}
+</script>
+
+<div
+	class="input-container"
+	class:disabled
+	style={height ? `--height: ${height}` : null}
+>
+	<textarea
+		class="input"
+		bind:this={node}
+		bind:value
+		{oninput}
+		{onchange}
+		{onkeydown}
+		{onfocus}
+		{onblur}
+		onkeypress={onKeyPress}
+		disabled={disabled ? 'disabled' : null}
+		autocomplete="off"
+		spellcheck="false"
+	></textarea>
+</div>
+
+<style>
+	.input-container {
+		position: relative;
+
+		display: flex;
+		width: 100%;
+		height: var(--height, var(--fragment-input-height));
+		margin: 2px 0;
+
+		border-radius: var(--fragment-input-border-radius);
+		background-color: var(--fragment-input-background-color);
+		box-shadow: inset 0 0 0 1px var(--fragment-input-border-color);
+	}
+
+	:global(body:not(.fragment-dragging))
+		.input-container:not(.disabled):hover {
+		box-shadow: inset 0 0 0 1px var(--fragment-accent-color);
+	}
+
+	:global(body:not(.fragment-dragging))
+		.input-container:not(.disabled):focus-within {
+		box-shadow: 0 0 0 2px var(--fragment-accent-color);
+	}
+
+	.input {
+		width: 100%;
+		height: 100%;
+		padding: var(--padding) var(--padding);
+
+		color: var(--fragment-input-text-color);
+		font-size: var(--fragment-input-font-size);
+		text-align: left;
+
+		background: transparent;
+		outline: 0;
+		resize: none;
+		border: none;
+	}
+
+	.input:disabled {
+		color: var(--fragment-input-disabled-text-color);
+	}
+
+	.input:focus {
+		color: var(--fragment-text-color);
+	}
+</style>

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

@@ -6,6 +6,7 @@ export const fieldTypes = {
 	VEC: 'vec',
 	CHECKBOX: 'checkbox',
 	TEXT: 'text',
+	TEXTAREA: 'textarea',
 	LIST: 'list',
 	COLOR: 'color',
 	BUTTON: 'button',
@@ -114,7 +115,7 @@ export function inferFieldType({ type, value, params, key }) {
  * @param {string} folder
  */
 export function parseFolder(folder) {
-	const regex = /(?<name>\w+)(?:\[(?<attributes>[^\]]+)\])?/g;
+	const regex = /(?<name>[\w ]+)(?:\[(?<attributes>[^\]]+)\])?/g;
 	const matches = [...folder.matchAll(regex)];
 
 	const results = matches.map((match) => {
@@ -124,7 +125,17 @@ export function parseFolder(folder) {
 				? Object.fromEntries(
 						match.groups.attributes
 							.split(', ')
-							.map((attr) => attr.split('=')),
+							.map((attr) =>
+								attr
+									.split('=')
+									.map((v) =>
+										v === 'false'
+											? false
+											: v === 'true'
+												? true
+												: v,
+									),
+							),
 					)
 				: {},
 		};

package/src/index.js

@@ -0,0 +1,12 @@
+/**
+ * @typedef {import('./types/config').Config} Config
+ */
+
+/**
+ * Type helper to make it easier to use fragment.config.js
+ * @param {Config} config
+ * @returns {Config}
+ */
+export function defineConfig(config = {}) {
+	return config;
+}

package/src/types/config.d.ts

@@ -0,0 +1,6 @@
+import { UserConfig } from 'vite';
+
+export interface Config {
+	vite?: UserConfig;
+	[key: string]: any;
+}

package/src/types/index.d.ts

@@ -1,5 +1,6 @@
 export type * from './renderers';
 export type * from './sketch';
+export type * from './config';
 export type * from './props';
 export type * from './helpers';
 export type * from './hooks';

package/src/types/props.d.ts

@@ -2,8 +2,9 @@ type BaseProp<Value, Params, Type> = {
 	value: Value;
 	params?: Params;
 	type?: Type;
+	disabled?: boolean;
 	hidden?: boolean;
-	displayName?: string;
+	displayName?: string | null;
 	folder?: string;
 	group?: string;
 	onChange?: PropOnChange<Value, Params>;
@@ -25,11 +26,37 @@ type NumberProp = BaseProp<
 	{ disabled?: boolean; step?: number } | { min: number; max: number },
 	'number'
 >;
-type VecProp = BaseProp<
+
+type VecArray =
 	| [number, number]
 	| [number, number, number]
-	| [number, number, number, number],
-	{ locked?: boolean },
+	| [number, number, number, number];
+
+type VecObject = Record<string, number> & { [key: number]: never };
+
+type VecValue = VecArray | VecObject;
+
+type VecArrayParams<V extends VecArray> = {
+	min: { [K in keyof V]: number };
+	max: { [K in keyof V]: number };
+	step?: { [K in keyof V]: number };
+};
+
+type VecObjectParams<V extends VecObject> = {
+	min: { [K in keyof V]: number };
+	max: { [K in keyof V]: number };
+	step?: { [K in keyof V]: number };
+};
+
+type VecParams<V extends VecValue> = V extends readonly number[]
+	? VecArrayParams<V>
+	: V extends Record<string, number>
+		? VecObjectParams<V>
+		: never;
+
+type VecProp<V extends VecValue = VecValue> = BaseProp<
+	V,
+	{ locked?: boolean } | VecParams<V>,
 	'vec'
 >;
 type CheckboxProp = BaseProp<boolean, never, 'checkbox'>;
@@ -50,7 +77,8 @@ type ImageProp = BaseProp<string, never, 'image'>;
 type Prop =
 	| SelectProp
 	| NumberProp
-	| VecProp
+	| VecProp<VecObject>
+	| VecProp<VecArray>
 	| CheckboxProp
 	| TextProp
 	| ListProp