fixes

.claude/settings.local.json

···
       "mcp__plugin_svelte_svelte__list-sections",
       "Bash(pkill:*)",
       "Bash(timeout 8 pnpm dev:*)",
-      "Bash(git checkout:*)"
+      "Bash(git checkout:*)",
+      "Bash(npx svelte-kit:*)"
     ]
   }
 }

src/lib/cards/FluidTextCard/EditingFluidTextCard.svelte

···
+<script lang="ts">
+	import type { Item } from '$lib/types';
+	import type { ContentComponentProps } from '../types';
+	import FluidTextCard from './FluidTextCard.svelte';
+
+	let { item = $bindable<Item>() }: ContentComponentProps = $props();
+
+	let isEditing = $state(false);
+	let inputElement: HTMLInputElement | null = $state(null);
+
+	function handleClick() {
+		if (isEditing) return;
+		isEditing = true;
+		requestAnimationFrame(() => {
+			inputElement?.focus();
+			inputElement?.select();
+		});
+	}
+
+	function handleBlur() {
+		isEditing = false;
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === 'Escape') {
+			isEditing = false;
+		}
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<div
+	class="relative h-full w-full cursor-text transition-colors duration-150 {isEditing ? 'ring-2 ring-white/30' : ''}"
+	onclick={handleClick}
+>
+	<FluidTextCard {item} />
+
+	{#if isEditing}
+		<!-- svelte-ignore a11y_autofocus -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<div
+			class="absolute inset-0 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm"
+			onclick={(e) => e.stopPropagation()}
+		>
+			<input
+				bind:this={inputElement}
+				bind:value={item.cardData.text}
+				onblur={handleBlur}
+				onkeydown={handleKeydown}
+				class="w-full max-w-md rounded-md border border-white/20 bg-white/10 px-4 py-3 text-center text-2xl font-bold text-white outline-none transition-colors focus:border-white/40 focus:bg-white/20"
+				placeholder="Enter text"
+				autofocus
+			/>
+		</div>
+	{/if}
+</div>

src/lib/cards/FluidTextCard/FluidTextCard.svelte

···
 				color.g *= 10.0;
 				color.b *= 10.0;
 				const x = Math.random();
-				const y = Math.random() < 0.5 ? 0.8 : 0.2;
-				const dx = 100 * (Math.random() - 0.5);
-				const dy = 1000 * (Math.random() - 0.5);
+				const y = Math.random() < 0.5 ? 0.95 : 0.05;
+				const dx = 300 * (Math.random() - 0.5);
+				const dy = 3000 * (Math.random() - 0.5);
 				splat(x, y, dx, dy, color);
 			}
 		}
 
 		function splatPointer(pointer: Pointer) {
-			const dx = pointer.deltaX * config.SPLAT_FORCE * 5;
-			const dy = pointer.deltaY * config.SPLAT_FORCE * 5;
+			const dx = pointer.deltaX * config.SPLAT_FORCE * 12;
+			const dy = pointer.deltaY * config.SPLAT_FORCE * 12;
 			splat(pointer.texcoordX, pointer.texcoordY, dx, dy, {
 				r: pointer.color[0],
 				g: pointer.color[1],
···
 				splat(
 					pointer.texcoordX,
 					pointer.texcoordY,
-					pointer.deltaX * config.SPLAT_FORCE * 5,
-					pointer.deltaY * config.SPLAT_FORCE * 5,
+					pointer.deltaX * config.SPLAT_FORCE * 12,
+					pointer.deltaY * config.SPLAT_FORCE * 12,
 					{
 						r: pointer.color[0],
 						g: pointer.color[1],

src/lib/cards/FluidTextCard/index.ts

···
 import type { CardDefinition } from '../types';
 import CreateFluidTextCardModal from './CreateFluidTextCardModal.svelte';
+import EditingFluidTextCard from './EditingFluidTextCard.svelte';
 import FluidTextCard from './FluidTextCard.svelte';
 import FluidTextCardSettings from './FluidTextCardSettings.svelte';
 
 export const FluidTextCardDefinition = {
 	type: 'fluid-text',
 	contentComponent: FluidTextCard,
+	editingContentComponent: EditingFluidTextCard,
 	createNew: (card) => {
 		card.cardType = 'fluid-text';
 		card.cardData = {