fragment-tools 0.2.12 → 0.2.13

package/src/cli/prompts.js

@@ -1,3 +1,4 @@
+import { styleText } from 'node:util';
 import { ConfirmPrompt, SelectPrompt, TextPrompt } from '@clack/core';
 import isUnicodeSupported from 'is-unicode-supported';
 import * as color from 'kleur/colors';
@@ -23,6 +24,7 @@ const S_BAR = s('│', '|');
 
 /**
  * @param {object} opts
+ * @param {string} opts.message
  * @param {string} opts.active
  * @param {string} opts.inactive
  * @param {boolean} opts.initialValue
@@ -67,9 +69,9 @@ export const confirm = (opts) => {
  * @param {string} [opts.placeholder]
  * @param {string} [opts.defaultValue]
  * @param {string} [opts.initialValue]
- * @param {string} [opts.initialValue]
- * @param {function} [opts.validate]
- * @returns {Promise<string|symbol>}
+ * @param {string} [opts.hint]
+ * @param {(value: string | undefined) => any} [opts.validate]
+ * @returns {Promise<string | symbol | undefined>}
  */
 export const text = (opts) => {
 	const { hint = '' } = opts;
@@ -82,24 +84,36 @@ export const text = (opts) => {
 		render() {
 			const title = `${opts.message}\n`;
 			const placeholder = opts.placeholder
-				? color.inverse(opts.placeholder[0]) +
-					color.dim(opts.placeholder.slice(1))
-				: color.inverse(color.hidden('_'));
-			const value = !this.value
-				? `${placeholder} ${color.dim(hint)}`.trim()
-				: this.valueWithCursor;
+				? styleText('inverse', opts.placeholder[0]) +
+					styleText('dim', opts.placeholder.slice(1))
+				: styleText(['inverse', 'hidden'], '_');
+			const userInput = !this.userInput
+				? `${placeholder} ${styleText('dim', hint)}`.trim()
+				: this.userInputWithCursor;
+			const value = this.value ?? '';
 
 			switch (this.state) {
-				case 'error':
-					return `${title.trim()}\n${value}\n  ${color.yellow(this.error)}\n`;
-				case 'submit':
-					return `${color.dim(`${title}`)} ${color.green(this.value || opts.placeholder)}\n`;
-				case 'cancel':
-					return `${title} ${color.strikethrough(
-						color.dim(this.value ?? placeholder),
-					)}\n`;
-				default:
-					return `${title} ${value}\n`;
+				case 'error': {
+					const errorText = this.error
+						? `  ${styleText('yellow', this.error)}`
+						: '';
+					return `${title.trim()}\n${userInput}\n${errorText}\n`;
+				}
+				case 'submit': {
+					const valueText = value
+						? `${styleText('green', value)}`
+						: '';
+					return `${styleText('dim', `${title}`)} ${valueText}\n`;
+				}
+				case 'cancel': {
+					const valueText = value
+						? ` ${styleText(['strikethrough', 'dim'], value)}`
+						: '';
+					return `${title}${valueText}${value.trim() ? `\n` : ''}`;
+				}
+				default: {
+					return `${title}${userInput}\n\n`;
+				}
 			}
 		},
 	}).prompt();
@@ -140,6 +154,22 @@ const limitOptions = (params) => {
 		});
 };
 
+/**
+ *
+ * @param {string} label
+ * @param {(text: string) => string} format
+ * @returns {string}
+ */
+const computeLabel = (label, format) => {
+	if (!label.includes('\n')) {
+		return format(label);
+	}
+	return label
+		.split('\n')
+		.map((line) => format(line))
+		.join('\n');
+};
+
 /**
  * @typedef {string|boolean|number} Value
  */
@@ -149,12 +179,13 @@ const limitOptions = (params) => {
  * @property {string} value
  * @property {string} [label]
  * @property {string} [hint]
+ * @property {boolean} [disabled]
  */
 
 /**
  * @param {object} opts
  * @param {string} opts.message
- * @param {Option<Value>[]} opts.options
+ * @param {import('@clack/core').SelectOptions<Value>} opts.options
  * @param {Value} [opts.initialValue]
  * @param {number} [opts.maxItems]
  * @returns {Promise<boolean|symbol>}
@@ -162,47 +193,69 @@ const limitOptions = (params) => {
 export const select = (opts) => {
 	/**
 	 *
-	 * @param {Option<Value>} option
-	 * @param {'inactive' | 'active' | 'selected' | 'cancelled'} state
+	 * @param {Option} option
+	 * @param {'inactive' | 'active' | 'selected' | 'cancelled' | 'disabled'} state
 	 * @returns {string}
 	 */
 	const opt = (option, state) => {
 		const label = option.label ?? String(option.value);
 		switch (state) {
+			case 'disabled':
+				return `${styleText('gray', S_RADIO_INACTIVE)} ${computeLabel(label, (text) => styleText('gray', text))}${
+					option.hint
+						? ` ${styleText('dim', `(${option.hint ?? 'disabled'})`)}`
+						: ''
+				}`;
 			case 'selected':
-				return `${label}`;
+				return `${computeLabel(label, (text) => text)}`;
 			case 'active':
-				return `${color.green(S_RADIO_ACTIVE)} ${label} ${
-					option.hint ? color.dim(`(${option.hint})`) : ''
+				return `${styleText('green', S_RADIO_ACTIVE)} ${label}${
+					option.hint
+						? ` ${styleText('dim', `(${option.hint})`)}`
+						: ''
 				}`;
 			case 'cancelled':
-				return `${color.strikethrough(color.dim(label))}`;
+				return `${computeLabel(label, (str) => styleText(['strikethrough', 'dim'], str))}`;
 			default:
-				return `${color.dim(S_RADIO_INACTIVE)} ${color.dim(label)}`;
+				return `${styleText('dim', S_RADIO_INACTIVE)} ${computeLabel(label, (text) => styleText('dim', text))}`;
 		}
 	};
 
 	return new SelectPrompt({
 		options: opts.options,
+		signal: opts.signal,
+		input: opts.input,
+		output: opts.output,
 		initialValue: opts.initialValue,
 		render() {
 			const title = `${opts.message}\n`;
 
 			switch (this.state) {
-				case 'submit':
-					return `${color.dim(title)} ${color.green(opt(this.options[this.cursor], 'selected'))}\n`;
-				case 'cancel':
-					return `${title} ${opt(
-						this.options[this.cursor],
-						'cancelled',
-					)}\n`;
+				case 'submit': {
+					return `${styleText('dim', title)} ${styleText('green', opt(this.options[this.cursor], 'selected'))}\n`;
+				}
+				case 'cancel': {
+					return `${title}${opt(this.options[this.cursor], 'cancelled')}`;
+				}
 				default: {
-					return `${title} ${limitOptions({
+					const titleLineCount = title.split('\n').length;
+					const footerLineCount = 1;
+					return `${title}${limitOptions({
+						output: opts.output,
 						cursor: this.cursor,
 						options: this.options,
 						maxItems: opts.maxItems,
+						columnPadding: 0,
+						rowPadding: titleLineCount + footerLineCount,
 						style: (item, active) =>
-							opt(item, active ? 'active' : 'inactive'),
+							opt(
+								item,
+								item.disabled
+									? 'disabled'
+									: active
+										? 'active'
+										: 'inactive',
+							),
 					}).join(`\n`)}\n`;
 				}
 			}

package/src/cli/run.js

@@ -7,7 +7,7 @@ import {
 	FRAGMENT_DIRECTORY,
 } from './createFragmentFile.js';
 import { getEntries } from './getEntries.js';
-import { log, magenta, bold, cyan, red } from './log.js';
+import { log, magenta, bold, cyan } from './log.js';
 import save from './plugins/save.js';
 import * as p from './prompts.js';
 import { prettifyTime } from './utils.js';

package/src/client/app/actions/resize.js

@@ -1,13 +1,20 @@
+/**
+ *
+ * @param {HTMLElement} node
+ * @param {() => void} callback
+ * @returns
+ */
 export function resize(node, callback) {
 	if (typeof callback !== 'function') return;
 
+	/** @type {ResizeObserver | null} */
 	let observer = new ResizeObserver(callback);
 
 	observer.observe(node);
 
 	return {
 		destroy: () => {
-			observer.disconnect();
+			observer?.disconnect();
 			observer = null;
 		},
 	};

package/src/client/app/attachments/draggable.js

@@ -0,0 +1,93 @@
+/**
+ *
+ * @param {object} options
+ * @param {Function} options.onDragStart
+ * @param {Function} options.onDrag
+ * @param {Function} options.onDragEnd
+ * @returns {import('svelte/attachments').Attachment} */
+export function draggable({ onDragStart, onDrag, onDragEnd } = {}) {
+	return (node) => {
+		let isDragging = false;
+		/** @type {MouseEvent | undefined} */
+		let eventStart;
+		/** @type {DOMRect | undefined} */
+		let rect;
+		let classNameDragging = 'fragment-dragging';
+
+		/**
+		 *
+		 * @param {MouseEvent} event
+		 */
+		function handleMouseDown(event) {
+			isDragging = true;
+			eventStart = event;
+
+			document.addEventListener('mousemove', handleMouseMove);
+			document.addEventListener('mouseup', handleMouseUp);
+
+			document.body.classList.add(classNameDragging);
+
+			rect = node.getBoundingClientRect();
+
+			const params = computeDrag(event);
+
+			onDragStart?.(event, params);
+			onDrag?.(event, params);
+		}
+
+		/**
+		 *
+		 * @param {MouseEvent} event
+		 */
+		function handleMouseMove(event) {
+			onDrag?.(event, computeDrag(event));
+		}
+
+		/**
+		 *
+		 * @param {MouseEvent} event
+		 */
+		function handleMouseUp(event) {
+			document.body.classList.remove(classNameDragging);
+			document.removeEventListener('mousemove', handleMouseMove);
+			document.removeEventListener('mouseup', handleMouseUp);
+
+			isDragging = false;
+
+			const params = computeDrag(event);
+			onDrag?.(event, params);
+			onDragEnd?.(event, params);
+		}
+
+		/**
+		 *
+		 * @param {MouseEvent} event
+		 */
+		function computeDrag(event) {
+			let distanceX = event.clientX - eventStart.clientX;
+			let distanceY = event.clientY - eventStart.clientY;
+
+			let distance = Math.sqrt(
+				distanceX * distanceX + distanceY * distanceY,
+			);
+
+			return {
+				distanceX,
+				distanceY,
+				distance,
+				isDragging,
+				rect,
+				node,
+			};
+		}
+
+		node.addEventListener('mousedown', handleMouseDown);
+
+		return () => {
+			node.removeEventListener('mousedown', handleMouseDown);
+
+			rect = undefined;
+			eventStart = undefined;
+		};
+	};
+}

package/src/client/app/client.js

@@ -1,9 +1,53 @@
+/**
+ * @typedef {Object} MessagePayload
+ * @property {string} event - The event name
+ * @property {any} [data] - Optional event data
+ */
+
+/**
+ * @typedef {Object} ShaderWarning
+ * @property {string} type - Warning type
+ * @property {string} importer - File that imported the shader
+ * @property {string} message - Warning message
+ * @property {Object} location - Location of the warning
+ * @property {string} location.lineText - The line of code with the warning
+ */
+
+/**
+ * @typedef {Object} ShaderUpdate
+ * @property {ShaderWarning[]} [warnings] - Array of shader warnings
+ */
+
+/**
+ * @typedef {Object} SketchUpdate
+ * @property {string} filepath
+ */
+
+/**
+ * @callback EventCallback
+ * @param {any} data - Event data
+ * @returns {void}
+ */
+
+/**
+ * @callback UnsubscribeFunction
+ * @returns {void}
+ */
+
 const socketProtocol = location.protocol === 'https:' ? 'wss' : 'ws';
 const socketHost = `${location.hostname}:${__FRAGMENT_PORT__}`;
 
-let socket,
-	listeners = {};
+/** @type {WebSocket | undefined} */
+let socket;
+/** @type {Record<string, EventCallback[]>} */
+let listeners = {};
+let opened = false;
 
+/**
+ * Handle incoming WebSocket message
+ * @param {MessagePayload} payload - The message payload
+ * @returns {void}
+ */
 function handleMessage(payload) {
 	const { event, data = {} } = payload;
 	const callbacks = listeners[event];
@@ -13,6 +57,12 @@ function handleMessage(payload) {
 	}
 }
 
+/**
+ * Subscribe to an event
+ * @param {string} event - The event name to listen for
+ * @param {EventCallback} cb - The callback function
+ * @returns {UnsubscribeFunction} Function to unsubscribe
+ */
 function on(event, cb) {
 	if (!listeners[event]) {
 		listeners[event] = [];
@@ -25,6 +75,12 @@ function on(event, cb) {
 	};
 }
 
+/**
+ * Unsubscribe from an event
+ * @param {string} event - The event name
+ * @param {EventCallback} cb - The callback function to remove
+ * @returns {void}
+ */
 function off(event, cb) {
 	const callbacks = listeners[event];
 
@@ -35,9 +91,14 @@ function off(event, cb) {
 	}
 }
 
-let opened = false;
+/**
+ * Emit an event to the server
+ * @param {string} event - The event name
+ * @param {any} data - The data to send
+ * @returns {void}
+ */
 function emit(event, data) {
-	if (opened) {
+	if (socket && opened) {
 		socket.send(
 			JSON.stringify({
 				event,
@@ -52,7 +113,7 @@ if (import.meta.hot) {
 
 	socket = new WebSocket(`${socketProtocol}://${socketHost}`);
 
-	socket.addEventListener('message', async (message) => {
+	socket.addEventListener('message', (message) => {
 		const { data } = message;
 
 		handleMessage(JSON.parse(data));
@@ -63,22 +124,33 @@ if (import.meta.hot) {
 		opened = true;
 	});
 
-	import.meta.hot.on('sketch-update', (data) => {
-		console.log(`[fragment] hmr update /${data.filepath}`);
-	});
+	import.meta.hot.on(
+		'sketch-update',
+		/** @param {SketchUpdate} sketchUpdate */
+		(sketchUpdate) => {
+			console.log(`[fragment] hmr update /${sketchUpdate.filepath}`);
+		},
+	);
 }
 
+/**
+ * Client API for WebSocket communication
+ * @type {{ on: typeof on, off: typeof off, emit: typeof emit }}
+ */
 export const client = { on, off, emit };
 
 client.on('shader-update', (shaderUpdates) => {
-	shaderUpdates.forEach(({ warnings = [] } = {}) => {
-		if (warnings.length > 0) {
-			warnings.forEach((warning) => {
-				const { location } = warning;
-				console.warn(
-					`[fragment-plugin-hsr] ${warning.type} ${warning.importer}\n\n  ${location.lineText}\n\n${warning.message}`,
-				);
-			});
-		}
-	});
+	shaderUpdates.forEach(
+		/** @param {ShaderUpdate} shaderUpdate */
+		({ warnings = [] } = {}) => {
+			if (warnings.length > 0) {
+				warnings.forEach((warning) => {
+					const { location } = warning;
+					console.warn(
+						`[fragment-plugin-hsr] ${warning.type} ${warning.importer}\n\n  ${location.lineText}\n\n${warning.message}`,
+					);
+				});
+			}
+		},
+	);
 });

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

@@ -0,0 +1,46 @@
+<script>
+	let { angle = 0 } = $props();
+</script>
+
+<svg
+	width="16"
+	height="16"
+	fill="none"
+	viewBox="0 0 24 24"
+	style="--angle: {angle}"
+>
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="1.5"
+		d="M18 8H6"
+	></path>
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="1.5"
+		d="M10 5L6 8L10 11"
+	></path>
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="1.5"
+		d="M6 16H18"
+	></path>
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="1.5"
+		d="M14 13L18 16L14 19"
+	></path>
+</svg>
+
+<style>
+	svg {
+		transform: rotate(var(--angle));
+	}
+</style>

package/src/client/app/hooks.js

@@ -2,18 +2,42 @@ import { rendering } from './state/rendering.svelte';
 import { sketchesManager } from './state/sketches.svelte';
 import { getContext } from './triggers/shared';
 
+/**
+ * Register a callback to be called before capturing
+ * @param {Function} listener - The callback function to execute before capture
+ * @param {string} [context] - The sketch context (defaults to current context)
+ * @returns {void}
+ */
 export const onBeforeCapture = (listener, context = getContext()) => {
 	sketchesManager.sketches[context]?.onBeforeCapture(listener);
 };
 
+/**
+ * Register a callback to be called after capturing
+ * @param {Function} listener - The callback function to execute after capture
+ * @param {string} [context] - The sketch context (defaults to current context)
+ * @returns {void}
+ */
 export const onAfterCapture = (listener, context = getContext()) => {
 	sketchesManager.sketches[context]?.onAfterCapture(listener);
 };
 
+/**
+ * Register a callback to be called before recording
+ * @param {Function} listener - The callback function to execute before recording
+ * @param {string} [context] - The sketch context (defaults to current context)
+ * @returns {void}
+ */
 export const onBeforeRecord = (listener, context = getContext()) => {
 	sketchesManager.sketches[context]?.onBeforeRecord(listener);
 };
 
+/**
+ * Register a callback to be called after recording
+ * @param {Function} listener - The callback function to execute after recording
+ * @param {string} [context] - The sketch context (defaults to current context)
+ * @returns {void}
+ */
 export const onAfterRecord = (listener, context = getContext()) => {
 	sketchesManager.sketches[context]?.onAfterRecord(listener);
 };
@@ -23,7 +47,7 @@ export const onAfterRecord = (listener, context = getContext()) => {
  * @param {object} options
  * @param {string} [options.filename]
  * @param {function} [options.pattern]
- * @param {exportDir} [options.pattern]
+ * @param {string} [options.exportDir]
  */
 export async function screenshot({ filename, pattern, exportDir } = {}) {
 	const context = getContext();