README.md

@@ -1,44 +1,42 @@
-# Character Records Generator
+# sv
 
-A web-based character records tool for [Aurora Station](https://aurorastation.org/). Hosted at [c.ily.rs](https://c.ily.rs).
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
 
-Pick a template and fill in the form. Each section covers a different record. Blank fields are omitted from the output automatically, so no rush to finish everything.
+## Creating a project
 
-Characters save to your browser. You can also export to a file or generate a share link: the link itself encodes the full set of records, so functionally it's a save file.
+If you're seeing this, you've probably already done this step. Congrats!
-
-Share links let the recipient see a preview of your records, with the option to import the character into their own roster.
-
-This tool is entirely data-driven in XML, and it's already set up for template sharing. A visual template editor is coming soon, so anybody can create their own templates and share them between one another.
-
-For issues, your best chance of getting a reply is to make an issue here, or to ping @llywelwyn in Discord.
-
-Cheers.
-
-## Development
 
 ```sh
-npm install
+# create a new project
-npm run dev
+npx sv create my-app
 ```
 
-Build for production:
+To recreate this project with the same configuration:
+
+```sh
+# recreate this project
+npx sv@0.12.8 create --template minimal --types ts --no-install .
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
 
 ```sh
 npm run build
 ```
 
-Validate the data files:
+You can preview the production build with `npm run preview`.
 
-```sh
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
-npm run validate
-```
-
-Run tests:
-
-```sh
-npx vitest run
-```
-
-## Where did the old WPF app go?
-
-This used to be a WPF desktop app. The last version of that lives at [`03feee5`](https://github.com/Aurorastation/character-records-generator/tree/03feee572bc7085fd8f9c458490a5dcc642ce689).

data/templates/standard.xml

@@ -38,7 +38,8 @@
   <record type="medical">
     <preamble>The following information is protected by doctor-patient confidentiality laws. Do not release without patient's consent.</preamble>
     <field label="Opt-Outs" type="multi-select">
-      <option value="no-revive"     label="DO NOT RESUSCITATE" />
+      <option value="no-borg"       label="Do NOT BORGIFY" />
+      <option value="no-revive"     label="DO NOT REVIVE" />
       <option value="no-prosthetic" label="DO NOT GIVE PROSTHETICS" />
     </field>
     <field label="Postmortem Instructions"   type="textarea" />

package-lock.json

@@ -15,7 +15,8 @@
 				"zod": "^4.3.6"
 			},
 			"devDependencies": {
-				"@sveltejs/adapter-auto": "^7.0.1",
+				"@sveltejs/adapter-auto": "^7.0.0",
+				"@sveltejs/adapter-static": "^3.0.10",
 				"@sveltejs/kit": "^2.50.2",
 				"@sveltejs/vite-plugin-svelte": "^6.2.4",
 				"@tailwindcss/vite": "^4.2.2",
@@ -1111,6 +1112,16 @@
 				"@sveltejs/kit": "^2.0.0"
 			}
 		},
+		"node_modules/@sveltejs/adapter-static": {
+			"version": "3.0.10",
+			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-3.0.10.tgz",
+			"integrity": "sha512-7D9lYFWJmB7zxZyTE/qxjksvMqzMuYrrsyh1f4AlZqeZeACPRySjbC3aFiY55wb1tWUaKOQG9PVbm74JcN2Iew==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"@sveltejs/kit": "^2.0.0"
+			}
+		},
 		"node_modules/@sveltejs/kit": {
 			"version": "2.55.0",
 			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.55.0.tgz",

package.json

@@ -13,7 +13,8 @@
 		"validate": "scripts/validate-xml.sh"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^7.0.1",
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/adapter-static": "^3.0.10",
 		"@sveltejs/kit": "^2.50.2",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
 		"@tailwindcss/vite": "^4.2.2",

src/app.css

@@ -17,7 +17,6 @@
 	--text-muted: #737373;
 	--accent: #0066cc;
 	--accent-hover: #0052a3;
-	--error: #dc2626;
 }
 
 .dark {
@@ -29,7 +28,6 @@
 	--text-muted: #a3a3a3;
 	--accent: #4da6ff;
 	--accent-hover: #80bfff;
-	--error: #f87171;
 }
 
 body {
@@ -37,9 +35,3 @@ body {
 	color: var(--text);
 	font-family: system-ui, -apple-system, sans-serif;
 }
-
-.field-error input,
-.field-error select,
-.field-error textarea {
-	border-color: var(--error) !important;
-}

src/app.html

@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<title>Character Records</title>
+		<title>Aurora Records</title>
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">

src/lib/components/Header.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Sun, Moon, Trash2, Plus, Upload, CircleHelp } from 'lucide-svelte';
+	import { Sun, Moon, Trash2, Plus, Upload } from 'lucide-svelte';
 	import { theme } from '$lib/theme.svelte';
 	import { roster } from '$lib/state.svelte';
 	import { presets } from '$lib/presets';
@@ -8,13 +8,11 @@
 	import TemplatePicker from './TemplatePicker.svelte';
 	import ShareMenu from './ShareMenu.svelte';
 	import Modal from './Modal.svelte';
-	import HelpText from './HelpText.svelte';
 
 	let { onImport }: { onImport?: (json: string) => void } = $props();
 
 	let confirmDelete = $state(false);
 	let showPicker = $state(false);
-	let showHelp = $state(false);
 	let openDropdown = $state<'add' | 'share' | null>(null);
 	let fileInput: HTMLInputElement;
 
@@ -64,7 +62,7 @@
 
 <header class="border-b shrink-0" style="border-color: var(--border); background: var(--bg-card);">
 <div class="flex items-center gap-2 px-4 py-3 max-w-7xl mx-auto w-full">
-	<h1 class="font-bold whitespace-nowrap">Character Records</h1>
+	<h1 class="font-bold whitespace-nowrap">Aurora Records</h1>
 
 	{#if roster.characters.length > 0}
 		<CharacterSwitcher />
@@ -111,10 +109,6 @@
 			{#if roster.saveStatus === 'saving'}Saving...{:else if roster.saveStatus === 'saved'}Saved{/if}
 		</span>
 
-		<button onclick={() => { showHelp = true; }} class="flex items-center justify-center w-[30px] h-[30px] rounded hover:opacity-80" title="About">
-			<CircleHelp size={18} />
-		</button>
-
 		<button onclick={() => theme.toggle()} class="flex items-center justify-center w-[30px] h-[30px] rounded hover:opacity-80" title="Toggle theme">
 			{#if theme.dark}
 				<Sun size={18} />
@@ -153,19 +147,4 @@
 	</Modal>
 {/if}
 
-{#if showHelp}
-	<Modal onClose={() => { showHelp = false; }}>
-		<HelpText />
-		<div class="flex justify-end mt-4">
-			<button
-				onclick={() => { showHelp = false; }}
-				class="px-3 py-1 rounded text-sm border hover:opacity-80"
-				style="border-color: var(--border); color: var(--text);"
-			>
-				Got it
-			</button>
-		</div>
-	</Modal>
-{/if}
-
 <svelte:window onclick={() => { openDropdown = null; }} />

src/lib/components/HelpText.svelte

@@ -1,17 +0,0 @@
-<div class="text-sm flex flex-col gap-4" style="color: var(--text-muted);">
-	<p>
-		Pick a template and fill in the form. Each section covers a different record. Blank fields are omitted from the output automatically, so no rush to finish everything.
-	</p>
-	<p>
-		Characters save to your browser. You can also export to a file or generate a share link: the link itself encodes the full set of records, so functionally it's a save file.
-	</p>
-	<p>
-		Share links let the recipient see a preview of your records, with the option to import the character into their own roster.
-	</p>
-	<p>
-		This tool is entirely data-driven in XML, and it's already set up for template sharing. A visual template editor is coming soon, so anybody can create their own templates and share them between one another.
-	</p>
-	<p>
-		Cheers.
-	</p>
-</div>

src/lib/components/RecordCard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { slide } from 'svelte/transition';
 	import { ChevronDown } from 'lucide-svelte';
-	import type { FieldDef, RecordDef } from '$lib/types';
+	import type { RecordDef } from '$lib/types';
 	import DynamicField from './fields/DynamicField.svelte';
 	import { slugify } from '$lib/utils/slugify';
 
@@ -12,22 +12,15 @@
 	} = $props();
 
 	let expanded = $state(false);
-	let touched: Record<string, boolean> = $state({});
-
-	function isFieldEmpty(v: unknown): boolean {
-		if (v === undefined || v === null || v === '' || v === 0) return true;
-		if (Array.isArray(v) && v.length === 0) return true;
-		return false;
-	}
-
-	function isRequired(field: FieldDef): boolean {
-		if (field.type === 'separator') return false;
-		return !!field.required;
-	}
 
 	let dataFields = $derived(record.fields.filter((f) => f.type !== 'separator'));
 	let filled = $derived(
-		dataFields.filter((f) => !isFieldEmpty(data[slugify(f.label)])).length
+		dataFields.filter((f) => {
+			const v = data[slugify(f.label)];
+			if (v === undefined || v === null || v === '' || v === 0) return false;
+			if (Array.isArray(v) && v.length === 0) return false;
+			return true;
+		}).length
 	);
 </script>
 
@@ -62,26 +55,12 @@
 	{#if expanded}
 		<div transition:slide={{ duration: 150 }} class="px-4 pb-4 flex flex-col gap-4">
 			{#each record.fields as field}
-				{@const key = slugify(field.label)}
+				<DynamicField
-				{@const hasError = isRequired(field) && touched[key] && isFieldEmpty(data[key])}
+					{field}
-				<div
+					value={data[slugify(field.label)]}
-					class={hasError ? 'field-error' : ''}
+					{data}
-					onfocusout={(e) => {
+					onChange={(v) => onFieldChange(slugify(field.label), v)}
-						if (isRequired(field) && !(e.currentTarget as HTMLElement).contains(e.relatedTarget as Node)) {
+				/>
-							touched[key] = true;
-						}
-					}}
-				>
-					<DynamicField
-						{field}
-						value={data[key]}
-						{data}
-						onChange={(v) => onFieldChange(key, v)}
-					/>
-					{#if hasError}
-						<p class="text-xs mt-1" style="color: var(--error);">This field is required</p>
-					{/if}
-				</div>
 			{/each}
 		</div>
 	{/if}

src/lib/components/ShareMenu.svelte

@@ -36,12 +36,12 @@
 <span class="relative">
 	<button
 		onclick={(e) => { e.stopPropagation(); onToggle(); }}
-		class="flex items-center justify-center h-[30px] rounded border hover:opacity-80 {copied ? 'gap-1 px-2' : 'w-[30px]'}"
+		class="flex items-center justify-center w-[30px] h-[30px] rounded border hover:opacity-80"
 		style="border-color: var(--border);"
 		title="Share & export"
 	>
 		{#if copied}
-			<Check size={14} /> <span class="text-xs">Copied!</span>
+			<Check size={14} />
 		{:else}
 			<Share2 size={14} />
 		{/if}

src/lib/file.test.ts

@@ -22,7 +22,7 @@ describe('exportCharacter', () => {
 		expect(parsed.version).toBe(1);
 		expect(parsed.templateId).toBe('preset:standard');
 		expect(parsed.template).toBeDefined();
-		expect(parsed.template.name).toBe('General');
+		expect(parsed.template.name).toBe('Standard');
 		expect(parsed.data).toEqual({
 			name: 'Yury Zakharov',
 			species: 'human',

src/lib/output.test.ts

@@ -101,11 +101,6 @@ describe('formatFieldOutput', () => {
 		expect(formatFieldOutput(field, 'hharar', stubSpecies, 'tajara')).toBe('Ethnicity: Hharar');
 	});
 
-	it('formats custom subspecies with dynamic label', () => {
-		const field: FieldDef = { label: 'Subspecies', type: 'subspecies' };
-		expect(formatFieldOutput(field, 'asdfg', stubSpecies, 'tajara')).toBe('Ethnicity: asdfg');
-	});
-
 	it('returns null for empty subspecies', () => {
 		const field: FieldDef = { label: 'Subspecies', type: 'subspecies' };
 		expect(formatFieldOutput(field, '', stubSpecies, 'tajara')).toBeNull();

src/lib/output.ts

@@ -48,7 +48,7 @@ export function formatFieldOutput(
 			const sp = speciesData.find((s) => s.id === currentSpecies);
 			if (!sp) return null;
 			const sub = sp.subspecies.find((s) => s.id === value);
-			return sub ? `${sp.subspeciesLabel}: ${sub.name}` : `${sp.subspeciesLabel}: ${value}`;
+			return sub ? `${sp.subspeciesLabel}: ${sub.name}` : null;
 		}
 
 		case 'languages': {

src/lib/sharing.test.ts

@@ -41,7 +41,7 @@ describe('character URL encoding', () => {
 		const encoded = encodeCharacterURL(testCharacter);
 		const decoded = decodeCharacterURL(encoded);
 		expect(decoded.data).toEqual(testCharacter.data);
-		expect(decoded.template.name).toBe('General');
+		expect(decoded.template.name).toBe('Standard');
 	});
 
 	it('uses short encoding for preset templates', () => {

src/lib/utils/blank.test.ts

@@ -40,8 +40,8 @@ describe('isBlankCharacter', () => {
 		expect(isBlankCharacter(makeChar({ 'spoken-languages': [] }))).toBe(true);
 	});
 
-	it('returns false when languages has any value', () => {
+	it('returns true when languages is just the default', () => {
-		expect(isBlankCharacter(makeChar({ 'spoken-languages': ['Tau Ceti Basic'] }))).toBe(false);
+		expect(isBlankCharacter(makeChar({ 'spoken-languages': ['Tau Ceti Basic'] }))).toBe(true);
 	});
 
 	it('returns false when languages has custom values', () => {

src/routes/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import Header from '$lib/components/Header.svelte';
-	import HelpText from '$lib/components/HelpText.svelte';
 	import SchemaForm from '$lib/components/SchemaForm.svelte';
 	import OutputPanel from '$lib/components/OutputPanel.svelte';
 	import ImportModal from '$lib/components/ImportModal.svelte';
@@ -12,10 +11,8 @@
 
 	let importData = $state<string | null>(null);
 	let fileImportData = $state<{ template: any; data: Record<string, unknown> } | null>(null);
-	let importError = $state<string | null>(null);
 	let mobileView = $state<'edit' | 'preview' | 'split'>('split');
 	let showPicker = $state(false);
-	let emptyFileInput = $state<HTMLInputElement>();
 
 	function checkHash() {
 		const hash = window.location.hash.slice(1);
@@ -38,9 +35,8 @@
 	function handleFileImport(json: string) {
 		try {
 			fileImportData = parseCharacterFile(json);
-			importError = null;
 		} catch {
-			importError = 'Could not read that file. Check that it\u2019s a valid character export.';
+			// TODO: show error to user
 		}
 	}
 
@@ -48,28 +44,12 @@
 		fileImportData = null;
 	}
 
-	async function handleEmptyFileImport(e: Event) {
-		const input = e.target as HTMLInputElement;
-		const file = input.files?.[0];
-		if (!file) return;
-		const text = await file.text();
-		handleFileImport(text);
-		input.value = '';
-	}
-
 	const modes = ['edit', 'preview', 'split'] as const;
 </script>
 
 <div class="h-dvh flex flex-col overflow-hidden">
 	<Header onImport={handleFileImport} />
 
-	{#if importError}
-		<div class="px-4 py-2 text-sm flex items-center justify-center gap-2 border-b" style="background: color-mix(in srgb, var(--error) 8%, var(--bg)); color: var(--error); border-color: var(--border);">
-			<span>{importError}</span>
-			<button onclick={() => { importError = null; }} class="underline hover:opacity-80">Dismiss</button>
-		</div>
-	{/if}
-
 	{#if fileImportData}
 		<div class="flex-1 overflow-y-auto">
 			<ImportModal fileData={fileImportData} onClose={closeFileImport} />
@@ -129,40 +109,19 @@
 			{/if}
 		</main>
 	{:else}
-		<main class="flex-1 flex items-center justify-center p-6">
+		<main class="flex-1 flex flex-col items-center justify-center gap-4">
-			<div class="max-w-md w-full flex flex-col gap-6">
+			<p style="color: var(--text-muted);">No characters yet.</p>
-				<HelpText />
+			<button
-
+				onclick={() => {
-				<div class="flex gap-3">
+					if (presets.length === 1) roster.create(presets[0]);
-					<button
+					else showPicker = true;
-						onclick={() => {
+				}}
-							if (presets.length === 1) roster.create(presets[0]);
+				class="px-3 py-1 rounded text-sm border hover:opacity-80"
-							else showPicker = true;
+				style="border-color: var(--border);"
-						}}
+			>
-						class="flex-1 px-4 py-2 rounded text-sm font-medium hover:opacity-90"
+				Get Started
-						style="background: var(--accent); color: white;"
+			</button>
-					>
-						New Character
-					</button>
-					<button
-						onclick={() => emptyFileInput.click()}
-						class="px-4 py-2 rounded text-sm border hover:opacity-80"
-						style="border-color: var(--border); color: var(--text-muted);"
-					>
-						Import
-					</button>
-				</div>
-			</div>
 		</main>
-
-		<input
-			bind:this={emptyFileInput}
-			type="file"
-			accept=".json"
-			class="hidden"
-			onchange={handleEmptyFileImport}
-		/>
-
 		{#if showPicker}
 			<TemplatePicker onClose={() => { showPicker = false; }} />
 		{/if}

svelte.config.js

@@ -1,9 +1,11 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-static';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	kit: {
-		adapter: adapter()
+		adapter: adapter({
+			fallback: 'index.html'
+		})
 	}
 };