fix(create): style the starter contact form and 404 page to match the shell

Visual review of the packed starter found the two request-time pages
shipping raw UA-default form controls and link colors against the styled
shell. Both pages now carry a scoped StyleSheet on the design tokens.
contact.tsx keeps its logic in definePage render: the inner styled
element must NOT reuse the route tag — a module that self-registers its
route tag via defineElement makes the entry skip the page class
(entry-orchestrator #952 rule), which silently bypasses the definePage
render along with its request/actionData context.

Author: DevBot

packages/create/templates/app/routes/404.tsx

@@ -1,24 +1,43 @@
 /** @jsxImportSource @openelement/element */
-import { definePage } from '@openelement/app';
+import { defineElement, definePage } from '@openelement/app';
+import { StyleSheet } from '@openelement/element';
 
-/**
- * Styled 404 (#923): the request-time server renders this page with a 404
- * status for unmatched paths; SSG builds also emit it as static 404.html.
- */
-const NotFoundPage = definePage({
-  renderIntent: { mode: 'dynamic' },
-  head: { title: '404 — openElement' },
+export const tagName = 'not-found-page';
+
+const styles = new StyleSheet();
+styles.replaceSync(`
+  :host { display: block; }
+  h1 { font-family: var(--font-serif); font-size: 2.4rem; letter-spacing: -0.015em; margin: 0.75rem 0 0.5rem; font-weight: 700; }
+  p { color: var(--ink-2); line-height: 1.6; }
+  a { color: var(--brand); font-weight: 600; text-decoration: none; }
+  a:hover { text-decoration: underline; }
+`);
+
+defineElement(tagName, {
+  styles,
   render() {
     return (
-      <main>
+      <>
         <h1>404</h1>
         <p>The page you are looking for does not exist.</p>
         <p>
           <a href='/'>Back to the homepage</a>
         </p>
-      </main>
+      </>
     );
   },
 });
 
+/**
+ * Styled 404 (#923): the request-time server renders this page with a 404
+ * status for unmatched paths; SSG builds also emit it as static 404.html.
+ */
+const NotFoundPage = definePage({
+  renderIntent: { mode: 'dynamic' },
+  head: { title: '404 — openElement' },
+  render() {
+    return <not-found-page />;
+  },
+});
+
 export default NotFoundPage;

packages/create/templates/app/routes/contact.tsx

@@ -1,17 +1,68 @@
 /** @jsxImportSource @openelement/element */
 import {
+  defineElement,
   definePage,
   fail,
   type OpenElementActionFailure,
   redirect,
   useActionData,
 } from '@openelement/app';
+import { StyleSheet } from '@openelement/element';
 
 interface ContactActionData {
   error?: string;
   email?: string;
 }
 
+const styles = new StyleSheet();
+styles.replaceSync(`
+  :host { display: block; }
+  h1 { font-family: var(--font-serif); font-size: 2.4rem; letter-spacing: -0.015em; margin: 0.75rem 0 0.5rem; font-weight: 700; }
+  .sub { color: var(--ink-2); line-height: 1.6; max-width: 52ch; margin: 0 0 1.75rem; }
+  form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
+  input {
+    font: inherit; min-width: 16rem; padding: 0.55rem 0.8rem; color: var(--ink);
+    border: 1px solid var(--line); border-radius: 6px; background: #fff;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  }
+  input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px #8262db2e; }
+  button {
+    font: inherit; font-weight: 600; padding: 0.55rem 1.1rem; cursor: pointer;
+    border: 1px solid var(--brand); border-radius: 6px; background: var(--brand); color: #fff;
+    transition: opacity 0.15s ease;
+  }
+  button:hover { opacity: 0.88; }
+  #error { color: #c92a2a; margin: 1rem 0 0; }
+  #thanks { color: var(--brand); font-weight: 600; margin: 1rem 0 0; }
+`);
+
+defineElement('contact-form-view', {
+  styles,
+  render(props: { email?: string; error?: string; subscribed?: string }) {
+    return (
+      <>
+        <h1>Stay in the loop</h1>
+        <p class='sub'>
+          A request-time route: the plain form works without JavaScript, and morphs in place with
+          it.
+        </p>
+        <form method='post' data-open-enhance>
+          <input
+            id='email'
+            name='email'
+            type='text'
+            value={props.email ?? ''}
+            placeholder='you@example.com'
+          />
+          <button type='submit'>Subscribe</button>
+        </form>
+        {props.error ? <p id='error'>{props.error}</p> : null}
+        {props.subscribed ? <p id='thanks'>subscribed={props.subscribed}</p> : null}
+      </>
+    );
+  },
+});
+
 /**
  * A request-time route exercising the 0.42 WC Application Loop: plain HTML
  * form works without JavaScript (422 echo / 303 PRG), data-open-enhance
@@ -32,21 +83,11 @@ const ContactPage = definePage({
     const actionData = useActionData() as ContactActionData | undefined;
     const subscribed = request ? new URL(request.url).searchParams.get('subscribed') : undefined;
     return (
-      <main>
-        <h1>Stay in the loop</h1>
-        <form method='post' data-open-enhance>
-          <input
-            id='email'
-            name='email'
-            type='text'
-            value={actionData?.email ?? ''}
-            placeholder='you@example.com'
-          />
-          <button type='submit'>Subscribe</button>
-        </form>
-        {actionData?.error ? <p id='error'>{actionData.error}</p> : null}
-        {subscribed ? <p id='thanks'>subscribed={subscribed}</p> : null}
-      </main>
+      <contact-form-view
+        email={actionData?.email}
+        error={actionData?.error}
+        subscribed={subscribed ?? undefined}
+      />
     );
   },
 });