Scaffold Svelte frontend and browser test matrix

Establish the TypeScript 7, Oxlint, Vitest, and Playwright workspace with an isolated Svelte diagnostics compatibility boundary.

web/src/App.browser.test.ts

@@ -0,0 +1,12 @@
+import { expect, test } from 'vitest'
+import { render } from 'vitest-browser-svelte'
+
+import App from './App.svelte'
+
+test('renders the application shell', async () => {
+  const screen = await render(App)
+
+  await expect
+    .element(screen.getByRole('heading', { name: 'Remora' }))
+    .toBeVisible()
+})

web/src/App.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { applicationName } from './lib/application'
+</script>
+
+<svelte:head>
+  <title>{applicationName}</title>
+</svelte:head>
+
+<main>
+  <p>Durable transfer service</p>
+  <h1>{applicationName}</h1>
+</main>
+
+<style>
+  :global(*) {
+    box-sizing: border-box;
+  }
+
+  :global(body) {
+    margin: 0;
+    min-width: 20rem;
+    min-height: 100vh;
+    color: #14213d;
+    background: #f8f7f2;
+    font-family:
+      Inter,
+      ui-sans-serif,
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      sans-serif;
+  }
+
+  main {
+    display: grid;
+    min-height: 100vh;
+    place-content: center;
+    padding: 2rem;
+    text-align: center;
+  }
+
+  p {
+    margin: 0;
+    color: #52606d;
+    font-size: 0.875rem;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+  }
+
+  h1 {
+    margin: 0.5rem 0 0;
+    font-size: clamp(3rem, 12vw, 7rem);
+    letter-spacing: -0.06em;
+  }
+</style>

web/src/lib/application.ts

@@ -0,0 +1,5 @@
+export const applicationName = 'Remora'
+
+export function componentLabel(component: string): string {
+  return `${applicationName} ${component}`
+}

web/src/lib/application.unit.test.ts

@@ -0,0 +1,10 @@
+import { describe, expect, test } from 'vitest'
+
+import { applicationName, componentLabel } from './application'
+
+describe('application identity', () => {
+  test('labels components consistently', () => {
+    expect(applicationName).toBe('Remora')
+    expect(componentLabel('Worker')).toBe('Remora Worker')
+  })
+})

web/src/main.ts

@@ -0,0 +1,11 @@
+import { mount } from 'svelte'
+
+import App from './App.svelte'
+
+const target = document.querySelector<HTMLElement>('#app')
+
+if (target === null) {
+  throw new Error('missing application mount point')
+}
+
+mount(App, { target })