Create Instance creation UI

packages/web/.oxlintrc.json

@@ -30,6 +30,7 @@
     "typescript/strict-void-return": "off",
     "typescript/no-non-null-assertion": "off",
     "unicorn/filename-case": "off",
-    "unicorn/prefer-query-selector": "off"
+    "unicorn/prefer-query-selector": "off",
+    "promise/avoid-new": "off"
   }
 }

packages/web/package.json

@@ -56,6 +56,7 @@
     "vite": "^7.0.0"
   },
   "devDependencies": {
+    "@faker-js/faker": "^10.5.0",
     "@types/relay-runtime": "^20.1.1",
     "eslint-plugin-solid": "^0.14.5",
     "relay-compiler": "^21.0.1",

packages/web/src/app.css

@@ -121,8 +121,7 @@ input {
   border-color: var(--accent-soft);
 }
 
-.app-header a:focus-visible,
-.button:focus-visible {
+.app-header a:focus-visible {
   outline: 3px solid var(--accent-soft);
   outline-offset: 0.2rem;
 }
@@ -134,11 +133,11 @@ input {
   padding: clamp(2rem, 5vw, 4rem) var(--gutter);
 }
 
-.app-content > main:not(.auth-page) {
+.app-content > main:not(.form-page) {
   width: 100%;
 }
 
-.app-content > main:not(.auth-page) :is(h1, h2, p) {
+.app-content > main:not(.form-page) :is(h1, h2, p) {
   margin-top: 0;
 }
 
@@ -158,7 +157,7 @@ input {
   line-height: var(--leading-body);
 }
 
-.auth-page {
+.form-page {
   align-items: center;
   display: flex;
   justify-content: center;
@@ -172,7 +171,7 @@ input {
   box-shadow: var(--shadow-sm);
 }
 
-.auth-panel {
+.form-panel {
   max-width: 28rem;
   padding: clamp(1.5rem, 4vw, 2rem);
   width: 100%;
@@ -194,16 +193,35 @@ input {
   margin: 0;
 }
 
-.auth-panel form {
+.form-panel form {
   display: grid;
   gap: 1rem;
 }
 
 .field {
   display: grid;
+  gap: 0.5rem;
+}
+
+.field-heading {
+  align-items: baseline;
+  display: flex;
   font-size: 0.9rem;
   font-weight: 650;
-  gap: 0.75rem;
+  justify-content: space-between;
+}
+
+.field-status {
+  color: var(--ink-faint);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.field-status.required {
+  color: var(--accent-strong);
 }
 
 .field input {
@@ -228,6 +246,20 @@ input {
   outline: none;
 }
 
+.field input:read-only {
+  border-style: dashed;
+  color: var(--ink-soft);
+  cursor: default;
+  font-family: var(--font-mono);
+}
+
+.field-hint {
+  color: var(--ink-faint);
+  font-size: 0.78rem;
+  line-height: 1.45;
+  margin: 0;
+}
+
 .button {
   align-items: center;
   border: 0;
@@ -240,6 +272,11 @@ input {
   padding: 0.75rem 1.1rem;
 }
 
+.button:focus-visible {
+  outline: 3px solid var(--accent-soft);
+  outline-offset: 0.2rem;
+}
+
 .button.primary {
   background: var(--accent);
   color: var(--on-accent);
@@ -270,10 +307,6 @@ input {
   border-left: 3px solid var(--danger);
 }
 
-.notice.success {
-  border-left: 3px solid var(--accent);
-}
-
 @media (max-width: 600px) {
   .app-header-inner {
     padding: 0 1rem;
@@ -301,7 +334,7 @@ input {
     padding: 1.5rem 1rem 3rem;
   }
 
-  .auth-page {
+  .form-page {
     align-items: flex-start;
     min-height: auto;
   }

packages/web/src/app.tsx

@@ -23,7 +23,7 @@ import "./drfed.css";
 import "./app.css";
 import { RelayEnvironmentProvider } from "solid-relay";
 
-import { createRelayEnvironment } from "./RelayEnviroment";
+import { createRelayEnvironment } from "./RelayEnvironment";
 
 export default function App() {
   const environment = createRelayEnvironment();