web: add /kripke

apps/web/src/routes/kripke/+page.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+import Katex from "$lib/components/katex.svelte";
+import { type Formula, latexSymbols, prettyPrint } from "@cannorin/kripke";
+import FormulaInput from "./formula-input.svelte";
+
+let formula: Formula | undefined = $state(undefined);
+let math = $derived.by(() => {
+  if (formula) return prettyPrint(formula, { symbols: latexSymbols });
+  return "\\phantom{p}";
+});
+</script>
+
+<div class="flex flex-col min-h-screen items-center gap-12 lg:gap-16 py-8">
+  <Katex math={math} />
+
+  <FormulaInput bind:formula />
+</div>

apps/web/src/routes/kripke/formula-input.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+import { type Formula, tryParse } from "@cannorin/kripke";
+
+let {
+  formula = $bindable<Formula | undefined>(undefined),
+}: {
+  formula?: Formula | undefined;
+} = $props();
+
+let input = $state("");
+let error = $state(false);
+
+$effect(() => {
+  const fml = tryParse(input);
+  if (fml) {
+    formula = fml;
+    error = false;
+  } else if (input !== null && input.length > 0) error = true;
+});
+</script>
+
+<input
+  class={["rounded border border-foreground ring-0 focus:outline-none focus:ring-0 p-2", error && "border-primary"]}
+  type="text"
+  bind:value={input} />