SpenceDiNicolantonio

export interface Options {
	bubble: boolean;
}

// When applied to an input, it will blur the input when the escape key is pressed
// By default it will prevent the default action of the escape key, which is useful
// for inputs in dialogs
export default function blurOnEscape(node: HTMLElement, options: Options = { bubble: false }) {
	const onKeydown = (event: KeyboardEvent) => {
		if (event.key !== 'Escape') return;

SpenceDiNicolantonio

<!-- This component disables CSS transitions until onMount fires, in order to avoid FOUC -->
<script lang="ts">
	import { tick } from 'svelte';

	// Adds 'mounted' class to body to signal that transitions should be enabled
	$effect(() => {
		tick().then(() => document.firstElementChild?.setAttribute('data-mounted', 'true'));
	});
</script>

SpenceDiNicolantonio

root = true

[*]
end_of_line = lf
insert_final_newline = true
indent_style = tab
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true

SpenceDiNicolantonio

export function logError(err: unknown, context?: string) {
	// Convert to Error if it's not one
	let error: Error;
	if (err instanceof Error) {
		error = err;
	} else {
		// Wrap string in Error, but pop first line of stack (which will be this line)
		error = new Error(String(err));
		error.stack = error.stack?.split('\n').slice(1).join('\n');
	}

SpenceDiNicolantonio

type ErrorName = 'Unknown Error' | 'Initialization Error';

export class ProjectError extends Error {
	name: ErrorName;
	data?: Record<string, unknown>;

	constructor({ name, message, data }: { name: ErrorName; message: string; data?: Record<string, unknown> }) {
		super();
		this.name = name;
		this.message = message;

SpenceDiNicolantonio

// !! This is yet untested
import type { Writable } from 'svelte/store';

export const toState = <T>(store: Writable<T>, initial: T | null = null) => {
	let value = $state<T | null>(initial);

	const stateful = {
		get: () => value,
		set: (newValue: T) => {
			store.set(newValue);

SpenceDiNicolantonio

<script lang="ts">
	import { dev } from '$app/environment';

	let hide = $state(false);
</script>

{#if dev}
	<aside
		ondblclick={() => (hide = true)}
		class:!hidden={hide}

SpenceDiNicolantonio

module.exports = {
	theme: {
		extend: {
			boxShadow: {
				'paper-xs': '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
				'paper-sm': '0 2px 4px rgba(0,0,0,0.14), 0 2px 4px rgba(0,0,0,0.24)',
				paper: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
				'paper-md': '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
				'paper-lg': '0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
				'paper-xl': '0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)',

SpenceDiNicolantonio

export default function preventDefault<T extends Event>(fn: (e: T) => void | Promise<void>) {
	return function (this: (e: T) => void, event: T) {
		event.preventDefault();
		fn.call(this, event);
	};
}

SpenceDiNicolantonio

import { linear } from 'svelte/easing';

type TickFunc = (t: number) => number | void;

export interface TailwindTransitionOptions {
	delay?: number;
	easing?: (t: number) => number;
	base?: string;
	from?: string;
	to?: string;