From afce1ad391644ca8143e9115ef753674e07df590 Mon Sep 17 00:00:00 2001
From: Chris Whited <cmwhited1990@gmail.com>
Date: Tue, 3 Jun 2025 12:48:36 -1000
Subject: [PATCH 1/2] feat(typesync | create app form): switch to use
 @tanstack/react-form. component cleanup

---
 .../SchemaBuilder/SchemaBrowser.tsx           |   6 +-
 .../SchemaBuilder/TypeCombobox.tsx            |  38 +-
 .../App/CreateAppForm/useCreateAppForm.tsx    |  24 +
 .../SchemaPreview.tsx                         |   4 +-
 .../App/{SchemaBuilder => Schema}/utils.ts    |  26 +-
 .../App/SchemaBuilder/SchemaBuilder.tsx       | 237 --------
 .../src/Components/App/SchemaBuilder/types.ts |  21 -
 .../FormComponents/ErrorMessages.tsx          |  17 +
 .../src/Components/FormComponents/Input.tsx   |  52 ++
 .../Components/FormComponents/RadioGroup.tsx  |  37 ++
 .../FormComponents/SubmitButton.tsx           |  53 ++
 .../Components/FormComponents/TextArea.tsx    |  44 ++
 .../src/Components/FormComponents/index.ts    |   5 +
 apps/typesync/client/src/context/form.ts      |   8 +
 apps/typesync/client/src/generated/gql.ts     |   3 +-
 apps/typesync/client/src/generated/graphql.ts |   2 +-
 apps/typesync/client/src/routes/__root.tsx    |   4 +-
 .../client/src/routes/apps/$appId/details.tsx |  17 +-
 .../client/src/routes/apps/create.tsx         | 548 ++++++++++--------
 apps/typesync/package.json                    |   3 +-
 apps/typesync/tsconfig.client.json            |   9 +-
 pnpm-lock.yaml                                |  99 ++--
 22 files changed, 660 insertions(+), 597 deletions(-)
 rename apps/typesync/client/src/Components/App/{ => CreateAppForm}/SchemaBuilder/SchemaBrowser.tsx (96%)
 rename apps/typesync/client/src/Components/App/{ => CreateAppForm}/SchemaBuilder/TypeCombobox.tsx (80%)
 create mode 100644 apps/typesync/client/src/Components/App/CreateAppForm/useCreateAppForm.tsx
 rename apps/typesync/client/src/Components/App/{SchemaBuilder => Schema}/SchemaPreview.tsx (97%)
 rename apps/typesync/client/src/Components/App/{SchemaBuilder => Schema}/utils.ts (84%)
 delete mode 100644 apps/typesync/client/src/Components/App/SchemaBuilder/SchemaBuilder.tsx
 delete mode 100644 apps/typesync/client/src/Components/App/SchemaBuilder/types.ts
 create mode 100644 apps/typesync/client/src/Components/FormComponents/ErrorMessages.tsx
 create mode 100644 apps/typesync/client/src/Components/FormComponents/Input.tsx
 create mode 100644 apps/typesync/client/src/Components/FormComponents/RadioGroup.tsx
 create mode 100644 apps/typesync/client/src/Components/FormComponents/SubmitButton.tsx
 create mode 100644 apps/typesync/client/src/Components/FormComponents/TextArea.tsx
 create mode 100644 apps/typesync/client/src/Components/FormComponents/index.ts
 create mode 100644 apps/typesync/client/src/context/form.ts

diff --git a/apps/typesync/client/src/Components/App/SchemaBuilder/SchemaBrowser.tsx b/apps/typesync/client/src/Components/App/CreateAppForm/SchemaBuilder/SchemaBrowser.tsx
similarity index 96%
rename from apps/typesync/client/src/Components/App/SchemaBuilder/SchemaBrowser.tsx
rename to apps/typesync/client/src/Components/App/CreateAppForm/SchemaBuilder/SchemaBrowser.tsx
index 837c332f..ddc2b118 100644
--- a/apps/typesync/client/src/Components/App/SchemaBuilder/SchemaBrowser.tsx
+++ b/apps/typesync/client/src/Components/App/CreateAppForm/SchemaBuilder/SchemaBrowser.tsx
@@ -6,9 +6,9 @@ import { useQuery } from '@tanstack/react-query';
 import { Array as EffectArray, Order, pipe } from 'effect';
 import { useState } from 'react';
 
-import type { SchemaBrowserTypesQuery } from '../../../generated/graphql';
-import { schemaBrowserQueryOptions } from '../../../hooks/useSchemaBrowserQuery';
-import { Loading } from '../../Loading';
+import type { SchemaBrowserTypesQuery } from '../../../../generated/graphql';
+import { schemaBrowserQueryOptions } from '../../../../hooks/useSchemaBrowserQuery';
+import { Loading } from '../../../Loading';
 
 export type SchemaBrowserType = NonNullable<SchemaBrowserTypesQuery['space']>['types'][number];
 type ExtendedSchemaBrowserType = SchemaBrowserType & { slug: string };
diff --git a/apps/typesync/client/src/Components/App/SchemaBuilder/TypeCombobox.tsx b/apps/typesync/client/src/Components/App/CreateAppForm/SchemaBuilder/TypeCombobox.tsx
similarity index 80%
rename from apps/typesync/client/src/Components/App/SchemaBuilder/TypeCombobox.tsx
rename to apps/typesync/client/src/Components/App/CreateAppForm/SchemaBuilder/TypeCombobox.tsx
index 2b574fb1..a0211b04 100644
--- a/apps/typesync/client/src/Components/App/SchemaBuilder/TypeCombobox.tsx
+++ b/apps/typesync/client/src/Components/App/CreateAppForm/SchemaBuilder/TypeCombobox.tsx
@@ -3,10 +3,9 @@
 import { Label, Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/react';
 import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/16/solid';
 import { Array as EffectArray, String as EffectString, Schema, pipe } from 'effect';
-import type { UseFormSetValue } from 'react-hook-form';
 
-import type { InsertAppSchema } from '../../../schema.js';
-import { classnames } from '../../../utils/classnames.js';
+import { useFieldContext } from '../../../../context/form.js';
+import { classnames } from '../../../../utils/classnames.js';
 
 class TypeOption extends Schema.Class<TypeOption>('/hypergraph/typesync/models/TypeOption')({
   id: Schema.NonEmptyTrimmedString,
@@ -27,20 +26,12 @@ const typeOptions: Array<TypeOption> = [
 ];
 
 export function TypeCombobox({
-  typePropertyIdx,
-  typeIdx,
-  value,
-  onTypeSelected,
+  id,
+  name,
   schemaTypes = [],
 }: Readonly<{
-  /** the index of this type selection field in the properties array. Types.AppSchemaForm.types[idx].properties[typeInputIdx] */
-  typePropertyIdx: number;
-  /** the index of the type within the schema array Types.AppSchemaForm.types[typeIdx] */
-  typeIdx: number;
-  /** the current value */
-  value: string;
-  /** set the value in the form when the user selects a value */
-  onTypeSelected: UseFormSetValue<InsertAppSchema>;
+  id: string;
+  name: string;
   /**
    * A list of types within the defined schema that the user can use as a relation
    * This allows the user to specify the property as a relationship to a type in the schema
@@ -49,6 +40,8 @@ export function TypeCombobox({
    */
   schemaTypes?: Array<string> | undefined;
 }>) {
+  const field = useFieldContext<string>();
+
   const relationTypeOptions = pipe(
     schemaTypes,
     EffectArray.filter((_type) => EffectString.isNonEmpty(_type)),
@@ -60,23 +53,20 @@ export function TypeCombobox({
   return (
     <Listbox
       as="div"
-      id={`types.${typeIdx}.properties.${typePropertyIdx}.type_name`}
-      name={`types.${typeIdx}.properties.${typePropertyIdx}.type_name`}
-      value={value}
+      id={id}
+      name={name}
+      value={field.state.value}
+      onBlur={field.handleBlur}
       onChange={(value) => {
         if (value) {
-          onTypeSelected(`types.${typeIdx}.properties.${typePropertyIdx}.type_name`, value, {
-            shouldDirty: true,
-            shouldTouch: true,
-            shouldValidate: true,
-          });
+          field.handleChange(value);
         }
       }}
     >
       <Label className="sr-only">Prop type</Label>
       <div className="relative">
         <ListboxButton className="grid w-full cursor-default grid-cols-1 rounded-md bg-slate-900 py-1.5 pr-2 pl-3 text-left text-white outline-1 -outline-offset-1 outline-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
-          <span className="col-start-1 row-start-1 truncate pr-6">{value}</span>
+          <span className="col-start-1 row-start-1 truncate pr-6">{field.state.value}</span>
           <ChevronUpDownIcon
             aria-hidden="true"
             className="col-start-1 row-start-1 size-5 self-center justify-self-end text-gray-300 sm:size-4"
diff --git a/apps/typesync/client/src/Components/App/CreateAppForm/useCreateAppForm.tsx b/apps/typesync/client/src/Components/App/CreateAppForm/useCreateAppForm.tsx
new file mode 100644
index 00000000..dc51dd1c
--- /dev/null
+++ b/apps/typesync/client/src/Components/App/CreateAppForm/useCreateAppForm.tsx
@@ -0,0 +1,24 @@
+import { createFormHook } from '@tanstack/react-form';
+
+import { fieldContext, formContext } from '../../../context/form.js';
+import {
+  FormComponentRadioGroup,
+  FormComponentTextArea,
+  FormComponentTextField,
+  SubmitButton,
+} from '../../FormComponents/index.js';
+import { TypeCombobox } from './SchemaBuilder/TypeCombobox.js';
+
+export const { useAppForm } = createFormHook({
+  fieldComponents: {
+    FormComponentTextField,
+    FormComponentTextArea,
+    FormComponentRadioGroup,
+    TypeCombobox,
+  },
+  formComponents: {
+    SubmitButton,
+  },
+  fieldContext,
+  formContext,
+});
diff --git a/apps/typesync/client/src/Components/App/SchemaBuilder/SchemaPreview.tsx b/apps/typesync/client/src/Components/App/Schema/SchemaPreview.tsx
similarity index 97%
rename from apps/typesync/client/src/Components/App/SchemaBuilder/SchemaPreview.tsx
rename to apps/typesync/client/src/Components/App/Schema/SchemaPreview.tsx
index 7983681c..75816085 100644
--- a/apps/typesync/client/src/Components/App/SchemaBuilder/SchemaPreview.tsx
+++ b/apps/typesync/client/src/Components/App/Schema/SchemaPreview.tsx
@@ -4,8 +4,8 @@ import { useQuery } from '@tanstack/react-query';
 import type { CSSProperties } from 'react';
 import { type ThemedToken, codeToTokens } from 'shiki';
 
+import type { AppSchema } from '../../../schema.js';
 import { classnames } from '../../../utils/classnames.js';
-import type * as Types from './types.js';
 import * as Utils from './utils.js';
 
 enum FontStyle {
@@ -20,7 +20,7 @@ enum FontStyle {
 type CodeChunk = ThemedToken;
 type CodeLine = { chunks: Array<CodeChunk>; style: 'added' | 'deleted' | null };
 
-export function SchemaPreview({ schema }: Readonly<{ schema: Types.AppSchemaForm }>) {
+export function SchemaPreview({ schema }: Readonly<{ schema: AppSchema }>) {
   const { code, hash } = Utils.buildAppSchemaFormCode(schema);
   const { data } = useQuery({
     queryKey: ['App', 'schema', 'preview', hash] as const,
diff --git a/apps/typesync/client/src/Components/App/SchemaBuilder/utils.ts b/apps/typesync/client/src/Components/App/Schema/utils.ts
similarity index 84%
rename from apps/typesync/client/src/Components/App/SchemaBuilder/utils.ts
rename to apps/typesync/client/src/Components/App/Schema/utils.ts
index d14c89ff..5e1b2d97 100644
--- a/apps/typesync/client/src/Components/App/SchemaBuilder/utils.ts
+++ b/apps/typesync/client/src/Components/App/Schema/utils.ts
@@ -1,33 +1,33 @@
-import type { AppSchemaField, AppSchemaForm } from './types.js';
+import type { AppSchema } from '../../../schema.js';
 
 function fieldToEntityString({
   name,
-  typeName,
+  type_name,
   nullable = false,
   optional = false,
   description,
-}: AppSchemaField): string {
+}: AppSchema['types'][number]['properties'][number]): string {
   // Add JSDoc comment if description exists
   const jsDoc = description ? `  /** ${description} */\n` : '';
 
   // Convert type to Entity type
   const entityType = (() => {
     switch (true) {
-      case typeName === 'Text':
+      case type_name === 'Text':
         return 'Type.Text';
-      case typeName === 'Number':
+      case type_name === 'Number':
         return 'Type.Number';
-      case typeName === 'Boolean':
+      case type_name === 'Boolean':
         return 'Type.Boolean';
-      case typeName === 'Date':
+      case type_name === 'Date':
         return 'Type.Date';
-      case typeName === 'Url':
+      case type_name === 'Url':
         return 'Type.Url';
-      case typeName === 'Point':
+      case type_name === 'Point':
         return 'Type.Point';
-      case typeName.startsWith('Relation'):
+      case type_name.startsWith('Relation'):
         // renders the type as `Type.Relation(Entity)`
-        return `Type.${typeName}`;
+        return `Type.${type_name}`;
       default:
         // how to handle complex types
         return 'Type.Text';
@@ -46,7 +46,7 @@ function fieldToEntityString({
 
 function typeDefinitionToString(type: {
   name: string;
-  properties: Readonly<Array<AppSchemaField>>;
+  properties: ReadonlyArray<AppSchema['types'][number]['properties'][number]>;
 }): string | null {
   if (!type.name) {
     return null;
@@ -97,7 +97,7 @@ ${fieldStrings.join(',\n')}
  * @param schema the app schema being built by the user
  * @returns a typescript string representation of the schema as well as a 20bit hash to pass to the useQuery hook
  */
-export function buildAppSchemaFormCode(schema: AppSchemaForm): Readonly<{ code: string; hash: string }> {
+export function buildAppSchemaFormCode(schema: AppSchema): Readonly<{ code: string; hash: string }> {
   const fileCommentStatement = '// src/schema.ts';
   const importStatement = `import { Entity, Type } from '@graphprotocol/hypergraph';\nimport * as Schema from 'effect/Schema';`;
   const typeDefinitions = schema.types
diff --git a/apps/typesync/client/src/Components/App/SchemaBuilder/SchemaBuilder.tsx b/apps/typesync/client/src/Components/App/SchemaBuilder/SchemaBuilder.tsx
deleted file mode 100644
index a78dbe22..00000000
--- a/apps/typesync/client/src/Components/App/SchemaBuilder/SchemaBuilder.tsx
+++ /dev/null
@@ -1,237 +0,0 @@
-'use client';
-
-import { Input } from '@headlessui/react';
-import { ExclamationCircleIcon, PlusIcon } from '@heroicons/react/16/solid';
-import { TrashIcon } from '@heroicons/react/24/outline';
-import { Array as EffectArray, pipe } from 'effect';
-import {
-  type Control,
-  type UseFormRegister,
-  type UseFormSetValue,
-  useFieldArray,
-  useFormContext,
-  useWatch,
-} from 'react-hook-form';
-
-import type { InsertAppSchema } from '../../../schema.js';
-import { SchemaBrowser } from './SchemaBrowser.js';
-import { TypeCombobox } from './TypeCombobox.js';
-
-export function SchemaBuilder() {
-  const { control, register, formState, setValue } = useFormContext<InsertAppSchema>();
-  const typesArray = useFieldArray({
-    control,
-    name: 'types',
-    rules: {
-      minLength: 1,
-    },
-  });
-
-  const schema = useWatch<InsertAppSchema>({
-    control,
-    exact: true,
-  });
-  const schemaTypes = pipe(
-    schema.types ?? [],
-    EffectArray.filter((_type) => _type.name != null),
-    EffectArray.map((_type) => _type.name || ''),
-  );
-
-  return (
-    <div className="grid grid-cols-2 lg:grid-cols-7 gap-x-4 pb-16">
-      <div className="lg:col-span-4 flex flex-col gap-y-4">
-        <div className="border-b border-gray-200 dark:border-white/20 pb-5">
-          <h3 className="text-base font-semibold text-gray-900 dark:text-white">Schema</h3>
-          <p className="mt-2 max-w-4xl text-sm text-gray-500 dark:text-gray-200">
-            Build your app schema by adding types, properties belonging to those types, etc. View already existing
-            schemas, types and properties to add to your schema.
-          </p>
-        </div>
-        {typesArray.fields.map((_type, idx) => (
-          <div
-            key={_type.id}
-            className="border-l-2 border-indigo-600 dark:border-indigo-400 pl-2 py-2 flex flex-col gap-y-4"
-          >
-            <div className="flex items-center justify-between gap-x-3">
-              <div className="flex-1 shrink-0">
-                <div className="flex justify-between">
-                  <label
-                    htmlFor={`types.${idx}.name`}
-                    className="block text-sm/6 font-medium text-gray-900 dark:text-white"
-                  >
-                    Type Name*
-                  </label>
-                  <span id={`types-${idx}-name-required`} className="text-sm/6 text-gray-500">
-                    Required
-                  </span>
-                </div>
-                <div className="mt-2 grid grid-cols-1">
-                  <div
-                    data-state={formState.errors?.types?.[idx]?.name?.message ? 'invalid' : undefined}
-                    className="col-start-1 row-start-1 flex items-center rounded-md bg-white dark:bg-white/5 pl-3 outline -outline-offset-1 outline-gray-300 dark:outline-white/10 data-[state=invalid]:outline-red-300 dark:data-[state=invalid]:outline-red-600 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600 dark:focus-within:outline-indigo-500 data-[state=invalid]:focus-within:outline-red-600 dark:data-[state=invalid]:focus-within:outline-red-400"
-                  >
-                    <Input
-                      id={`types.${idx}.name`}
-                      type="text"
-                      {...register(`types.${idx}.name` as const, { required: true })}
-                      data-state={formState.errors?.types?.[idx]?.name?.message ? 'invalid' : undefined}
-                      aria-invalid={formState.errors?.types?.[idx]?.name?.message ? 'true' : undefined}
-                      aria-describedby={
-                        formState.errors?.types?.[idx]?.name?.message
-                          ? `types-${idx}-name-invalid`
-                          : `types-${idx}-name-required`
-                      }
-                      className="block min-w-0 grow py-1.5 pl-1 pr-3 data-[state=invalid]:pr-10 text-base text-gray-900 dark:text-white data-[state=invalid]:text-red-900 dark:data-[state=invalid]:text-red-700 placeholder:text-gray-400 dark:placeholder:text-gray-500 data-[state=invalid]:placeholder:text-red-700 dark:data-[state=invalid]:placeholder:text-red-400 focus:outline sm:text-sm/6 focus-visible:outline-none"
-                    />
-                  </div>
-                  {formState.errors?.types?.[idx]?.name?.message ? (
-                    <ExclamationCircleIcon
-                      aria-hidden="true"
-                      className="pointer-events-none col-start-1 row-start-1 mr-3 size-5 self-center justify-self-end text-red-500 sm:size-4"
-                    />
-                  ) : null}
-                </div>
-                {formState.errors?.types?.[idx]?.name?.message ? (
-                  <p id={`types-${idx}-name-invalid`} className="mt-2 text-sm text-red-600">
-                    {formState.errors?.types?.[idx]?.name?.message}
-                  </p>
-                ) : null}
-              </div>
-              <button
-                type="button"
-                className="min-w-fit rounded-md bg-transparent p-2 shadow-xs hover:bg-gray-100 dark:hover:bg-white/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 cursor-pointer mt-6 text-red-700 dark:text-red-400 disabled:text-gray-400 disabled:cursor-not-allowed disabled:hover:bg-transparent"
-                onClick={() => typesArray.remove(idx)}
-                disabled={(schema.types ?? []).length === 1}
-              >
-                <TrashIcon aria-hidden="true" className="size-5" />
-              </button>
-            </div>
-            <PropsInput
-              control={control}
-              register={register}
-              typeIndex={idx}
-              setValue={setValue}
-              schemaTypes={EffectArray.filter(schemaTypes, (_typeName) => {
-                // filter out this type
-                const schemaTypeNameAtIdx = schema.types?.[idx]?.name;
-                return schemaTypeNameAtIdx != null && schemaTypeNameAtIdx !== _typeName;
-              })}
-            />
-          </div>
-        ))}
-        <div className="w-full flex items-center justify-end border-t border-gray-500 dark:border-gray-400 mt-3">
-          <button
-            type="button"
-            className="inline-flex items-center gap-x-1.5 text-sm/6 font-semibold text-gray-900 dark:text-white cursor-pointer hover:bg-gray-100 dark:hover:bg-white/10 rounded-md px-2 py-1.5"
-            onClick={() =>
-              typesArray.append({
-                name: '',
-                properties: [{ name: '', type_name: 'Text' }],
-              })
-            }
-          >
-            <PlusIcon aria-hidden="true" className="-ml-0.5 size-5" />
-            Add Type
-          </button>
-        </div>
-      </div>
-      <div className="flex flex-col gap-y-4 lg:col-span-3">
-        <SchemaBrowser
-          typeSelected={(type) => {
-            if (type.properties.length === 0) {
-              // type is root type and not schema, add as property
-              return;
-            }
-            typesArray.append({
-              name: type.name || '',
-              properties: type.properties.map((prop) => ({
-                name: prop.name || '',
-                type_name: prop.valueType?.name ?? 'Text',
-                description: null,
-                optional: null,
-                nullable: null,
-              })),
-            });
-          }}
-        />
-      </div>
-    </div>
-  );
-}
-
-function PropsInput(
-  props: Readonly<{
-    control: Control<InsertAppSchema>;
-    register: UseFormRegister<InsertAppSchema>;
-    typeIndex: number;
-    setValue: UseFormSetValue<InsertAppSchema>;
-    /**
-     * A list of types within the defined schema that the user can use as a relation
-     * This allows the user to specify the property as a relationship to a type in the schema
-     *
-     * @default []
-     */
-    schemaTypes?: Array<string>;
-  }>,
-) {
-  const typePropertiesArray = useFieldArray({
-    control: props.control,
-    name: `types.${props.typeIndex}.properties` as const,
-  });
-  // this is annoying, but the control register is not picking up changes in the <Combobox> headless-ui type.
-  // so, instead, grabbing the value and use the onChange to set in the form.
-  // @todo FIX THIS
-  const typeProperties = useWatch<InsertAppSchema>({
-    control: props.control,
-    exact: true,
-  });
-  const thisType = typeProperties.types?.[props.typeIndex];
-
-  return (
-    <div className="flex flex-col gap-y-1 pl-2 ml-1 border-l border-indigo-300">
-      <h4 className="text-xl text-gray-800 dark:text-gray-200">Properties</h4>
-      <div className="w-full flex flex-col gap-y-2">
-        {typePropertiesArray.fields.map((_field, idx) => (
-          <div key={_field.id} className="grid grid-cols-11 gap-2">
-            <div className="col-span-5 flex items-center rounded-md bg-white dark:bg-white/5 pl-3 outline -outline-offset-1 outline-gray-300 dark:outline-white/10 data-[state=invalid]:outline-red-300 dark:data-[state=invalid]:outline-red-600 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600 dark:focus-within:outline-indigo-500 data-[state=invalid]:focus-within:outline-red-600 dark:data-[state=invalid]:focus-within:outline-red-400">
-              <Input
-                id={`types.${props.typeIndex}.properties.${idx}.name`}
-                type="text"
-                {...props.register(`types.${props.typeIndex}.properties.${idx}.name` as const, { required: true })}
-                className="block min-w-0 grow py-1.5 pl-1 pr-3 data-[state=invalid]:pr-10 text-base text-gray-900 dark:text-white data-[state=invalid]:text-red-900 dark:data-[state=invalid]:text-red-700 placeholder:text-gray-400 dark:placeholder:text-gray-500 data-[state=invalid]:placeholder:text-red-700 dark:data-[state=invalid]:placeholder:text-red-400 focus:outline sm:text-sm/6 focus-visible:outline-none"
-              />
-            </div>
-            <div className="col-span-5">
-              <TypeCombobox
-                typeIdx={props.typeIndex}
-                typePropertyIdx={idx}
-                value={thisType?.properties?.[idx]?.type_name || 'Text'}
-                onTypeSelected={props.setValue}
-                schemaTypes={props.schemaTypes}
-              />
-            </div>
-            <div className="col-span-1 flex items-center justify-end">
-              <button
-                type="button"
-                className="min-w-fit rounded-md bg-transparent p-2 text-white shadow-xs hover:bg-gray-100 dark:hover:bg-white/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 cursor-pointer"
-                onClick={() => typePropertiesArray.remove(idx)}
-              >
-                <TrashIcon aria-hidden="true" className="size-5 text-red-700 dark:text-red-400" />
-              </button>
-            </div>
-          </div>
-        ))}
-      </div>
-      <div className="w-full flex items-center justify-end mt-1">
-        <button
-          type="button"
-          className="inline-flex items-center gap-x-1.5 text-sm/4 font-semibold text-gray-900 dark:text-white cursor-pointer hover:bg-gray-100 dark:hover:bg-white/10 rounded-md px-2 py-1.5"
-          onClick={() => typePropertiesArray.append({ name: '', type_name: 'Text' })}
-        >
-          <PlusIcon aria-hidden="true" className="-ml-0.5 size-4" />
-          Add Property
-        </button>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/typesync/client/src/Components/App/SchemaBuilder/types.ts b/apps/typesync/client/src/Components/App/SchemaBuilder/types.ts
deleted file mode 100644
index 4f0b7d9e..00000000
--- a/apps/typesync/client/src/Components/App/SchemaBuilder/types.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as Schema from 'effect/Schema';
-
-export const AppSchemaField = Schema.Struct({
-  name: Schema.NonEmptyTrimmedString,
-  typeName: Schema.NonEmptyTrimmedString,
-  nullable: Schema.NullOr(Schema.Boolean).pipe(Schema.optional),
-  optional: Schema.NullOr(Schema.Boolean).pipe(Schema.optional),
-  description: Schema.NullOr(Schema.String).pipe(Schema.optional),
-});
-export type AppSchemaField = typeof AppSchemaField.Type;
-export const AppSchemaType = Schema.Struct({
-  name: Schema.NonEmptyTrimmedString,
-  properties: Schema.Array(AppSchemaField).pipe(Schema.minItems(1)),
-});
-export const AppSchemaForm = Schema.Struct({
-  types: Schema.Array(AppSchemaType).pipe(Schema.minItems(1)),
-});
-export type AppSchemaForm = typeof AppSchemaForm.Type;
-
-// biome-ignore lint/suspicious/noExplicitAny: <explanation>
-export type AppSchemaTypeUnknown = any;
diff --git a/apps/typesync/client/src/Components/FormComponents/ErrorMessages.tsx b/apps/typesync/client/src/Components/FormComponents/ErrorMessages.tsx
new file mode 100644
index 00000000..ac2b1b53
--- /dev/null
+++ b/apps/typesync/client/src/Components/FormComponents/ErrorMessages.tsx
@@ -0,0 +1,17 @@
+export function ErrorMessages({
+  id,
+  errors,
+}: Readonly<{ id: string | undefined; errors: Array<string | { message: string }> }>) {
+  return (
+    <div id={id} className="mt-2 flex flex-col gap-y-1 w-full">
+      {errors.map((error) => (
+        <div
+          key={typeof error === 'string' ? error : error.message}
+          className="text-sm text-red-600 dark:text-red-500 w-full"
+        >
+          {typeof error === 'string' ? error : error.message}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/typesync/client/src/Components/FormComponents/Input.tsx b/apps/typesync/client/src/Components/FormComponents/Input.tsx
new file mode 100644
index 00000000..ff4c6aa8
--- /dev/null
+++ b/apps/typesync/client/src/Components/FormComponents/Input.tsx
@@ -0,0 +1,52 @@
+import { Input, type InputProps } from '@headlessui/react';
+import { useStore } from '@tanstack/react-form';
+
+import { useFieldContext } from '../../context/form.js';
+import { classnames } from '../../utils/classnames.js';
+import { ErrorMessages } from './ErrorMessages.js';
+
+export type FormComponentInputProps = Omit<InputProps, 'id'> & {
+  id: string;
+  label?: React.ReactNode;
+  hint?: React.ReactNode;
+};
+export function FormComponentTextField({ id, label, hint, ...rest }: Readonly<FormComponentInputProps>) {
+  const field = useFieldContext<string>();
+  const errors = useStore(field.store, (state) => state.meta.errors);
+  const touched = useStore(field.store, (state) => state.meta.isTouched);
+  const hasErrors = errors.length > 0 && touched;
+
+  return (
+    <div>
+      {label != null ? (
+        <label htmlFor={rest.name} className="block text-sm/6 font-medium text-gray-900 dark:text-white">
+          {label}
+          {rest.required ? '*' : ''}
+        </label>
+      ) : null}
+      <div className={classnames('grid grid-cols-1', label != null ? 'mt-2' : 'mt-0')}>
+        <div
+          data-state={hasErrors ? 'invalid' : undefined}
+          className="col-start-1 row-start-1 flex items-center rounded-md bg-white dark:bg-white/5 pl-3 outline -outline-offset-1 outline-gray-300 dark:outline-white/10 data-[state=invalid]:outline-red-300 dark:data-[state=invalid]:outline-red-600 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600 dark:focus-within:outline-indigo-500 data-[state=invalid]:focus-within:outline-red-600 dark:data-[state=invalid]:focus-within:outline-red-400"
+        >
+          <Input
+            {...rest}
+            value={field.state.value}
+            onBlur={field.handleBlur}
+            onChange={(e) => field.handleChange(e.target.value)}
+            data-state={hasErrors ? 'invalid' : undefined}
+            aria-invalid={hasErrors ? 'true' : undefined}
+            aria-describedby={hasErrors ? `${id}-invalid` : hint != null ? `${id}-hint` : undefined}
+            className="block min-w-0 grow py-1.5 pl-1 pr-3 data-[state=invalid]:pr-10 text-base text-gray-900 dark:text-white data-[state=invalid]:text-red-900 dark:data-[state=invalid]:text-red-700 placeholder:text-gray-400 dark:placeholder:text-gray-500 data-[state=invalid]:placeholder:text-red-700 dark:data-[state=invalid]:placeholder:text-red-400 focus:outline sm:text-sm/6 focus-visible:outline-none"
+          />
+        </div>
+        {hasErrors ? <ErrorMessages id={`${id}-invalid`} errors={errors} /> : null}
+        {hint != null && !hasErrors ? (
+          <p id={`${id}-hint`} className="mt-3 text-sm/6 text-gray-400">
+            {hint}
+          </p>
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/typesync/client/src/Components/FormComponents/RadioGroup.tsx b/apps/typesync/client/src/Components/FormComponents/RadioGroup.tsx
new file mode 100644
index 00000000..30a4c9f9
--- /dev/null
+++ b/apps/typesync/client/src/Components/FormComponents/RadioGroup.tsx
@@ -0,0 +1,37 @@
+import { Radio, RadioGroup, type RadioGroupProps, type RadioProps } from '@headlessui/react';
+
+import { useFieldContext } from '../../context/form.js';
+
+export type FormComponentRadioGroupProps = Omit<RadioGroupProps, 'id'> & {
+  id: string;
+  label: React.ReactNode;
+  options: ReadonlyArray<RadioProps>;
+};
+export function FormComponentRadioGroup({ id, label, options, ...rest }: Readonly<FormComponentRadioGroupProps>) {
+  const field = useFieldContext<string>();
+
+  return (
+    <fieldset>
+      <legend className="text-sm/6 font-semibold text-gray-900 dark:text-white">{label}</legend>
+      <RadioGroup
+        id={id}
+        {...rest}
+        value={field.state.value}
+        onBlur={field.handleBlur}
+        onChange={(value) => field.handleChange(value)}
+        className="mt-6 grid grid-cols-1 gap-y-6 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 sm:gap-x-4"
+      >
+        {options.map((opt, idx) => {
+          const radioOptKey = `RadioGroup__Opt[${opt.id || idx}]`;
+          return (
+            <Radio
+              key={radioOptKey}
+              {...opt}
+              className="group relative flex cursor-pointer rounded-lg border border-gray-300 dark:border-white/10 bg-white dark:bg-slate-700 p-4 shadow-xs focus:outline-hidden data-focus:border-indigo-600 dark:data-focus:border-indigo-500 data-focus:ring-2 data-focus:ring-indigo-600 dark:data-focus:ring-indigo-500"
+            />
+          );
+        })}
+      </RadioGroup>
+    </fieldset>
+  );
+}
diff --git a/apps/typesync/client/src/Components/FormComponents/SubmitButton.tsx b/apps/typesync/client/src/Components/FormComponents/SubmitButton.tsx
new file mode 100644
index 00000000..008fccd1
--- /dev/null
+++ b/apps/typesync/client/src/Components/FormComponents/SubmitButton.tsx
@@ -0,0 +1,53 @@
+import { CheckIcon, ExclamationCircleIcon } from '@heroicons/react/16/solid';
+
+import { useFormContext } from '../../context/form.js';
+import { classnames } from '../../utils/classnames.js';
+import { Loading } from '../Loading.js';
+
+export function SubmitButton({
+  status,
+  children,
+}: Readonly<{ status: 'idle' | 'error' | 'success' | 'submitting'; children: React.ReactNode }>) {
+  const form = useFormContext();
+
+  return (
+    <form.Subscribe
+      selector={(state) => ({
+        canSubmit: state.canSubmit,
+        isSubmitting: state.isSubmitting,
+        valid: state.isValid && state.errors.length === 0,
+        dirty: state.isDirty,
+      })}
+    >
+      {({ canSubmit, isSubmitting, valid, dirty }) => (
+        <button
+          type="submit"
+          disabled={!canSubmit || !valid || !dirty || isSubmitting}
+          data-state={status}
+          className={classnames(
+            'rounded-md bg-indigo-600 dark:bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 dark:hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:focus-visible:outline-indigo-500 inline-flex items-center gap-x-2 cursor-pointer',
+            'disabled:bg-gray-400 disabled:text-gray-900 disabled:hover:bg-gray-400 disabled:focus-visible:outline-gray-400 disabled:cursor-not-allowed',
+            'data-[state=error]:bg-red-600 data-[state=error]:hover:bg-red-500 data-[state=error]:focus-visible:bg-red-500 data-[state=success]:focus-visible:bg-green-500',
+            'data-[state=success]:bg-green-600 data-[state=success]:hover:bg-green-500',
+          )}
+        >
+          {status === 'submitting' ? (
+            <Loading />
+          ) : status === 'success' ? (
+            <>
+              <CheckIcon className="size-5 text-white" aria-hidden="true" />
+              {children}
+            </>
+          ) : status === 'error' ? (
+            <>
+              <ExclamationCircleIcon className="size-5 text-white" aria-hidden="true" />
+              Error
+            </>
+          ) : (
+            children
+          )}
+        </button>
+      )}
+    </form.Subscribe>
+  );
+}
diff --git a/apps/typesync/client/src/Components/FormComponents/TextArea.tsx b/apps/typesync/client/src/Components/FormComponents/TextArea.tsx
new file mode 100644
index 00000000..79373a5c
--- /dev/null
+++ b/apps/typesync/client/src/Components/FormComponents/TextArea.tsx
@@ -0,0 +1,44 @@
+import { Textarea, type TextareaProps } from '@headlessui/react';
+import { useStore } from '@tanstack/react-form';
+
+import { useFieldContext } from '../../context/form.js';
+import { ErrorMessages } from './ErrorMessages.js';
+
+export type FormComponentTextAreaProps = Omit<TextareaProps, 'id'> & {
+  id: string;
+  label: React.ReactNode;
+  hint?: React.ReactNode;
+};
+export function FormComponentTextArea({ id, label, hint, ...rest }: Readonly<FormComponentTextAreaProps>) {
+  const field = useFieldContext<string>();
+  const errors = useStore(field.store, (state) => state.meta.errors);
+  const hasErrors = errors.length > 0;
+
+  return (
+    <div>
+      <label htmlFor={rest.name} className="block text-sm/6 font-medium text-gray-900 dark:text-white">
+        {label}
+        {rest.required ? '*' : ''}
+      </label>
+      <div className="mt-2">
+        <Textarea
+          {...rest}
+          value={field.state.value}
+          onBlur={field.handleBlur}
+          onChange={(e) => field.handleChange(e.target.value)}
+          data-state={hasErrors ? 'invalid' : undefined}
+          aria-invalid={hasErrors ? 'true' : undefined}
+          aria-describedby={hasErrors ? `${id}-invalid` : hint != null ? `${id}-hint` : undefined}
+          rows={rest.rows || 3}
+          className="block w-full rounded-md bg-white dark:bg-white/5 px-3 py-1.5 text-base text-gray-900 dark:text-white outline -outline-offset-1 outline-gray-300 dark:outline-white/10 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 dark:focus:outline-indigo-500 sm:text-sm/6"
+        />
+      </div>
+      {hasErrors ? <ErrorMessages id={`${id}-invalid`} errors={errors} /> : null}
+      {hint != null && !hasErrors ? (
+        <p id={`${id}-hint`} className="mt-3 text-sm/6 text-gray-400">
+          {hint}
+        </p>
+      ) : null}
+    </div>
+  );
+}
diff --git a/apps/typesync/client/src/Components/FormComponents/index.ts b/apps/typesync/client/src/Components/FormComponents/index.ts
new file mode 100644
index 00000000..78a86067
--- /dev/null
+++ b/apps/typesync/client/src/Components/FormComponents/index.ts
@@ -0,0 +1,5 @@
+export * from './ErrorMessages.js';
+export * from './Input.js';
+export * from './RadioGroup.js';
+export * from './SubmitButton.js';
+export * from './TextArea.js';
diff --git a/apps/typesync/client/src/context/form.ts b/apps/typesync/client/src/context/form.ts
new file mode 100644
index 00000000..587bf75b
--- /dev/null
+++ b/apps/typesync/client/src/context/form.ts
@@ -0,0 +1,8 @@
+import { type AnyFieldApi, type AnyFormApi, createFormHookContexts } from '@tanstack/react-form';
+
+const context = createFormHookContexts();
+
+export const fieldContext: React.Context<AnyFieldApi> = context.fieldContext;
+export const useFieldContext = context.useFieldContext;
+export const formContext: React.Context<AnyFormApi> = context.formContext;
+export const useFormContext = context.useFormContext;
diff --git a/apps/typesync/client/src/generated/gql.ts b/apps/typesync/client/src/generated/gql.ts
index d16c3ef5..1a3d2ea5 100644
--- a/apps/typesync/client/src/generated/gql.ts
+++ b/apps/typesync/client/src/generated/gql.ts
@@ -1,6 +1,7 @@
 /* eslint-disable */
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
 import * as types from './graphql';
-import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
 
 /**
  * Map of all GraphQL operations in the project.
diff --git a/apps/typesync/client/src/generated/graphql.ts b/apps/typesync/client/src/generated/graphql.ts
index 36216c4d..1e08fdfc 100644
--- a/apps/typesync/client/src/generated/graphql.ts
+++ b/apps/typesync/client/src/generated/graphql.ts
@@ -1,5 +1,5 @@
 /* eslint-disable */
-import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
diff --git a/apps/typesync/client/src/routes/__root.tsx b/apps/typesync/client/src/routes/__root.tsx
index ee819eab..1be82d9b 100644
--- a/apps/typesync/client/src/routes/__root.tsx
+++ b/apps/typesync/client/src/routes/__root.tsx
@@ -32,8 +32,8 @@ function Layout() {
 
   return (
     <div>
-      <div className="fixed inset-y-0 z-50 flex w-72 flex-col h-full">
-        <div className="flex grow flex-col gap-y-5 overflow-y-auto bg-white dark:bg-slate-900 pb-4 h-full">
+      <div className="fixed inset-y-0 z-50 flex w-72 flex-col h-full bg-white dark:bg-slate-900">
+        <div className="flex grow flex-col gap-y-5 overflow-y-auto pb-4 h-full">
           <Link
             to="/"
             className="flex h-16 shrink-0 items-center justify-center text-xl border-b border-gray-200 dark:border-slate-800 bg-white dark:bg-slate-950 cursor-pointer"
diff --git a/apps/typesync/client/src/routes/apps/$appId/details.tsx b/apps/typesync/client/src/routes/apps/$appId/details.tsx
index e43fe4cf..f4dea83d 100644
--- a/apps/typesync/client/src/routes/apps/$appId/details.tsx
+++ b/apps/typesync/client/src/routes/apps/$appId/details.tsx
@@ -16,7 +16,7 @@ import { formatDistanceToNow } from 'date-fns/formatDistanceToNow';
 import * as Schema from 'effect/Schema';
 import { useEffect, useState } from 'react';
 
-import { SchemaPreview } from '../../../Components/App/SchemaBuilder/SchemaPreview.js';
+import { SchemaPreview } from '../../../Components/App/Schema/SchemaPreview.js';
 import { AppStatusBadge } from '../../../Components/App/StatusBadge.js';
 import { Loading } from '../../../Components/Loading.js';
 import { appEventsQueryOptions, appQueryOptions } from '../../../hooks/useAppQuery.js';
@@ -163,20 +163,7 @@ function AppDetailsPage() {
             </dl>
           </TabPanel>
           <TabPanel>
-            <SchemaPreview
-              schema={{
-                types: app.types.map((type) => ({
-                  name: type.name,
-                  properties: type.properties.map((prop) => ({
-                    name: prop.name,
-                    typeName: prop.type_name,
-                    description: prop.description,
-                    nullable: prop.nullable,
-                    optional: prop.optional,
-                  })),
-                })),
-              }}
-            />
+            <SchemaPreview schema={app} />
           </TabPanel>
           <TabPanel>
             <div className="flow-root w-full max-w-5xl mx-auto">
diff --git a/apps/typesync/client/src/routes/apps/create.tsx b/apps/typesync/client/src/routes/apps/create.tsx
index 762fe015..071360cd 100644
--- a/apps/typesync/client/src/routes/apps/create.tsx
+++ b/apps/typesync/client/src/routes/apps/create.tsx
@@ -1,25 +1,27 @@
 'use client';
 
-import { Radio, RadioGroup } from '@headlessui/react';
-import { CheckIcon, ExclamationCircleIcon } from '@heroicons/react/16/solid';
-import { CheckCircleIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/20/solid';
-import { effectTsResolver } from '@hookform/resolvers/effect-ts';
+import { CheckCircleIcon, ChevronLeftIcon, ChevronRightIcon, PlusIcon } from '@heroicons/react/20/solid';
+import { TrashIcon } from '@heroicons/react/24/outline';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { useStore } from '@tanstack/react-form';
 import { Link, createFileRoute } from '@tanstack/react-router';
-import * as Schema from 'effect/Schema';
+import { Array as EffectArray, String as EffectString, Schema, pipe } from 'effect';
 import { useState } from 'react';
-import { FormProvider, useForm, useWatch } from 'react-hook-form';
 
-import { SchemaBuilder } from '../../Components/App/SchemaBuilder/SchemaBuilder.js';
-import { Loading } from '../../Components/Loading.js';
-import { appsQueryOptions, useAppsSuspenseQuery, useCreateAppMutation } from '../../hooks/useAppQuery.js';
+import { useAppForm } from '../../Components/App/CreateAppForm/useCreateAppForm.js';
+import { appsQueryOptions, useCreateAppMutation } from '../../hooks/useAppQuery.js';
 import { cwdQueryOptions, useCWDSuspenseQuery } from '../../hooks/useCWDQuery.js';
 import reactLogo from '../../images/react_logo.png';
 import viteLogo from '../../images/vitejs_logo.png';
 import { type App, InsertAppSchema } from '../../schema.js';
 
-// biome-ignore lint/suspicious/noExplicitAny: appears to be an issue with the effectTsResolver
-type HookformEffectSchema = any;
+const defaultValues: InsertAppSchema = {
+  name: '',
+  description: '',
+  template: 'vite_react',
+  directory: '',
+  types: [{ name: '', properties: [{ name: '', type_name: 'Text' }] }],
+};
 
 const CreateAppFormTab = Schema.Literal('app_details', 'schema', 'generate');
 type CreateAppFormTab = typeof CreateAppFormTab.Type;
@@ -46,7 +48,7 @@ function CreateAppPage() {
   const ctx = Route.useRouteContext();
   const navigate = Route.useNavigate();
 
-  const { mutate, isPending, isSuccess, isError } = useCreateAppMutation({
+  const { mutateAsync, isPending, isError, isSuccess } = useCreateAppMutation({
     async onSuccess(data) {
       // add the created app to the apps query dataset
       ctx.queryClient.setQueryData<Readonly<Array<App>>, readonly ['Space', 'Apps']>(
@@ -60,6 +62,9 @@ function CreateAppPage() {
       );
       // once the app is created, navigate to the app details page
       setTimeout(async () => {
+        // reset the form
+        createAppForm.reset(undefined, { keepDefaultValues: true });
+        // navigate user to the created app details page
         await navigate({ to: '/apps/$appId/details', params: { appId: `${data.id}` }, search: { tab: 'details' } });
       }, 1_500);
     },
@@ -68,44 +73,24 @@ function CreateAppPage() {
     },
   });
 
-  const { data: apps } = useAppsSuspenseQuery();
   const { data: cwd } = useCWDSuspenseQuery();
 
   const [selectedFormStep, setSelectedFormStep] = useState<'app_details' | 'schema' | 'generate'>('app_details');
-  const [appNameNotUnique, setAppNameNotUnique] = useState(false);
 
-  const methods = useForm<InsertAppSchema>({
-    resolver: effectTsResolver(InsertAppSchema as HookformEffectSchema),
-    mode: 'all',
-    defaultValues: {
-      name: '',
-      description: '',
-      directory: '',
-      // @todo add more templates
-      template: 'vite_react',
-      types: [{ name: '', properties: [{ name: '', type_name: 'Text' }] }],
+  const createAppForm = useAppForm({
+    defaultValues,
+    validators: {
+      onChangeAsyncDebounceMs: 100,
+      onChange: Schema.standardSchemaV1(InsertAppSchema),
+    },
+    async onSubmit({ formApi, value }) {
+      await mutateAsync(value);
     },
-    shouldFocusError: true,
-  });
-  const { control, formState, handleSubmit, register } = methods;
-
-  const onSubmit = (app: InsertAppSchema) => {
-    // check if the user already has an app with the submitted name
-    const existing = apps.find((_app) => _app.name.toLowerCase() === app.name.toLowerCase());
-    if (existing) {
-      setAppNameNotUnique(true);
-      return;
-    }
-
-    mutate(app);
-  };
-
-  const schema = useWatch<InsertAppSchema>({
-    control,
-    exact: true,
   });
-  const appNameInvalid =
-    (formState.errors.name?.message != null || appNameNotUnique) && formState.dirtyFields.name === true;
+  const formattedAppName = useStore(createAppForm.store, (state) =>
+    pipe(state.values.name, EffectString.toLowerCase, EffectString.replaceAll(/\s/g, '-')),
+  );
+  const appTypes = useStore(createAppForm.store, (state) => EffectArray.map(state.values.types, (_type) => _type.name));
 
   return (
     <TabsPrimitive.Root
@@ -116,230 +101,317 @@ function CreateAppPage() {
         }
       }}
     >
-      <FormProvider<InsertAppSchema> {...methods}>
-        <form noValidate aria-disabled={isPending ? 'true' : undefined} onSubmit={handleSubmit(onSubmit)}>
-          <TabsPrimitive.Content value="app_details">
+      <form
+        noValidate
+        aria-disabled={isPending ? 'true' : undefined}
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          void createAppForm.handleSubmit();
+        }}
+      >
+        <TabsPrimitive.Content value="app_details">
+          <div className="space-y-12">
             <div className="space-y-12">
               <div className="border-b border-gray-900/10 dark:border-white/10 pb-12">
                 <h2 className="text-base/7 font-semibold text-gray-900 dark:text-white">Create New App</h2>
 
                 <div className="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                   <div className="sm:col-span-4">
-                    <label htmlFor="name" className="block text-sm/6 font-medium text-gray-900 dark:text-white">
-                      App Name*
-                    </label>
-                    <div className="mt-2 grid grid-cols-1">
-                      <div
-                        data-state={appNameInvalid ? 'invalid' : undefined}
-                        className="col-start-1 row-start-1 flex items-center rounded-md bg-white dark:bg-white/5 pl-3 outline -outline-offset-1 outline-gray-300 dark:outline-white/10 data-[state=invalid]:outline-red-300 dark:data-[state=invalid]:outline-red-600 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600 dark:focus-within:outline-indigo-500 data-[state=invalid]:focus-within:outline-red-600 dark:data-[state=invalid]:focus-within:outline-red-400"
-                      >
-                        <input
+                    <createAppForm.AppField name="name">
+                      {(field) => (
+                        <field.FormComponentTextField
                           id="name"
-                          type="text"
-                          {...register('name')}
-                          placeholder="Event tracker..."
-                          data-state={appNameInvalid ? 'invalid' : undefined}
-                          aria-invalid={appNameInvalid ? 'true' : undefined}
-                          aria-describedby={appNameInvalid ? 'name-invalid' : undefined}
-                          className="block min-w-0 grow py-1.5 pl-1 pr-3 data-[state=invalid]:pr-10 text-base text-gray-900 dark:text-white data-[state=invalid]:text-red-900 dark:data-[state=invalid]:text-red-700 placeholder:text-gray-400 dark:placeholder:text-gray-500 data-[state=invalid]:placeholder:text-red-700 dark:data-[state=invalid]:placeholder:text-red-400 focus:outline sm:text-sm/6 focus-visible:outline-none"
-                        />
-                      </div>
-                      {appNameInvalid ? (
-                        <ExclamationCircleIcon
-                          aria-hidden="true"
-                          className="pointer-events-none col-start-1 row-start-1 mr-3 size-5 self-center justify-self-end text-red-500 sm:size-4"
+                          name="name"
+                          required
+                          label="App name"
+                          hint="App name must be unique"
                         />
-                      ) : null}
-                    </div>
-                    {appNameInvalid ? (
-                      <p id="name-invalid" className="mt-2 text-sm text-red-600">
-                        {appNameNotUnique ? 'App names must be unique' : 'App name is required.'}
-                      </p>
-                    ) : null}
+                      )}
+                    </createAppForm.AppField>
                   </div>
 
                   <div className="col-span-full">
-                    <label htmlFor="description" className="block text-sm/6 font-medium text-gray-900 dark:text-white">
-                      App description
-                    </label>
-                    <div className="mt-2">
-                      <textarea
-                        id="description"
-                        {...register('description')}
-                        rows={3}
-                        className="block w-full rounded-md bg-white dark:bg-white/5 px-3 py-1.5 text-base text-gray-900 dark:text-white outline -outline-offset-1 outline-gray-300 dark:outline-white/10 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 dark:focus:outline-indigo-500 sm:text-sm/6"
-                      />
-                    </div>
-                    <p className="mt-3 text-sm/6 text-gray-400">
-                      Write a few sentences describing your application, what it's purpose is, etc.
-                    </p>
+                    <createAppForm.AppField name="description">
+                      {(field) => (
+                        <field.FormComponentTextArea
+                          id="description"
+                          name="description"
+                          label="Description"
+                          hint="Write a few sentences describing your application, what it's purpose is, etc."
+                        />
+                      )}
+                    </createAppForm.AppField>
                   </div>
                 </div>
               </div>
             </div>
-          </TabsPrimitive.Content>
-          <TabsPrimitive.Content value="schema">
-            <SchemaBuilder />
-          </TabsPrimitive.Content>
-          <TabsPrimitive.Content value="generate">
-            <div className="space-y-12">
-              <div className="border-b border-gray-900/10 dark:border-white/10 pb-12">
-                <h2 className="text-base/7 font-semibold text-gray-900 dark:text-white">
-                  Select a template and choose where to generate the app
-                </h2>
-                <div className="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
-                  <div className="sm:col-span-4">
-                    <label htmlFor="name" className="block text-sm/6 font-medium text-gray-900 dark:text-white">
-                      Directory*
-                    </label>
-                    <div className="mt-2 grid grid-cols-1">
+          </div>
+        </TabsPrimitive.Content>
+        <TabsPrimitive.Content value="schema" className="pb-10">
+          <div className="w-full flex flex-col gap-y-4 pb-10">
+            <div className="border-b border-gray-200 dark:border-white/20 pb-5">
+              <h3 className="text-base font-semibold text-gray-900 dark:text-white">Schema</h3>
+              <p className="mt-2 max-w-4xl text-sm text-gray-500 dark:text-gray-200">
+                Build your app schema by adding types, properties belonging to those types, etc. View already existing
+                schemas, types and properties to add to your schema.
+              </p>
+            </div>
+            <createAppForm.AppField name="types" mode="array">
+              {(field) => (
+                <div>
+                  {field.state.value.map((_type, idx) => {
+                    const typeEntryKey = `createAppForm__type[${idx}]`;
+                    return (
                       <div
-                        data-state={formState.errors.directory != null ? 'invalid' : undefined}
-                        className="col-start-1 row-start-1 flex items-center rounded-md bg-white dark:bg-white/5 pl-3 outline -outline-offset-1 outline-gray-300 dark:outline-white/10 data-[state=invalid]:outline-red-300 dark:data-[state=invalid]:outline-red-600 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600 dark:focus-within:outline-indigo-500 data-[state=invalid]:focus-within:outline-red-600 dark:data-[state=invalid]:focus-within:outline-red-400"
+                        key={typeEntryKey}
+                        className="border-l-2 border-indigo-600 dark:border-indigo-400 pl-2 py-2 flex flex-col gap-y-4"
                       >
-                        <input
-                          id="directory"
-                          type="text"
-                          {...register('directory')}
-                          placeholder={`./${schema.name?.trim().toLowerCase().replaceAll(/\s/g, '-') || ''}`}
-                          data-state={formState.errors.directory != null ? 'invalid' : undefined}
-                          aria-invalid={formState.errors.directory != null ? 'true' : undefined}
-                          aria-describedby={
-                            formState.errors.directory != null ? 'directory-invalid' : 'directory-help-text'
-                          }
-                          className="block min-w-0 grow py-1.5 pl-1 pr-3 data-[state=invalid]:pr-10 text-base text-gray-900 dark:text-white data-[state=invalid]:text-red-900 dark:data-[state=invalid]:text-red-600 placeholder:text-gray-400 dark:placeholder:text-gray-500 data-[state=invalid]:placeholder:text-red-700 dark:data-[state=invalid]:placeholder:text-red-400 focus:outline sm:text-sm/6 focus-visible:outline-none"
-                        />
-                      </div>
-                    </div>
-                    {formState.errors.directory?.message != null ? (
-                      <p id="directory-invalid" className="mt-2 text-sm text-red-600 dark:text-red-500">
-                        Entered directory is invalid
-                      </p>
-                    ) : (
-                      <div className="mt-3 flex flex-col gap-y-1.5">
-                        <p className="text-sm/6 text-gray-400" id="directory-help-text">
-                          Can be relative to your current working directory, or a full path
-                        </p>
-                        <p className="text-sm/6 text-gray-400">
-                          Current working directory:{' '}
-                          <code className="font-mono bg-gray-50 dark:bg-black dark:text-white p-1 rounded-sm">
-                            {cwd.cwd}
-                          </code>
-                        </p>
-                      </div>
-                    )}
-                  </div>
-                  <div className="col-span-full">
-                    <fieldset>
-                      <legend className="text-sm/6 font-semibold text-gray-900 dark:text-white">
-                        Select a template
-                      </legend>
-                      <RadioGroup
-                        id="template"
-                        {...register('template')}
-                        className="mt-6 grid grid-cols-1 gap-y-6 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 sm:gap-x-4"
-                      >
-                        <Radio
-                          key="vite_react"
-                          value="vite_react"
-                          aria-label="Vitejs + React"
-                          className="group relative flex cursor-pointer rounded-lg border border-gray-300 dark:border-white/10 bg-white dark:bg-slate-700 p-4 shadow-xs focus:outline-hidden data-focus:border-indigo-600 dark:data-focus:border-indigo-500 data-focus:ring-2 data-focus:ring-indigo-600 dark:data-focus:ring-indigo-500"
-                        >
-                          <div className="flex flex-1 w-full">
-                            <div className="flex flex-col gap-y-2 w-full">
-                              <span className="block text-sm font-medium text-gray-900 dark:text-white">
-                                Vite + React
-                              </span>
-                              <div className="flex items-center justify-between gap-x-4 w-fit">
-                                <img src={viteLogo} alt="" width={64} height={64} className="size-16" />
-                                <span className="text-gray-500 dark:text-gray-50">+</span>
-                                <img src={reactLogo} alt="" width={64} height={64} className="size-16" />
+                        <div className="flex items-center justify-between gap-x-3">
+                          <div className="flex-1 shrink-0">
+                            <createAppForm.AppField name={`types[${idx}].name` as const}>
+                              {(subfield) => (
+                                <subfield.FormComponentTextField
+                                  id={`types[${idx}].name` as const}
+                                  name={`types[${idx}].name` as const}
+                                  required
+                                  label="Type Name"
+                                />
+                              )}
+                            </createAppForm.AppField>
+                          </div>
+                          <button
+                            type="button"
+                            className="min-w-fit rounded-md bg-transparent p-2 shadow-xs hover:bg-gray-100 dark:hover:bg-white/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 cursor-pointer mt-6 text-red-700 dark:text-red-400 disabled:text-gray-400 disabled:cursor-not-allowed disabled:hover:bg-transparent"
+                            onClick={() => field.removeValue(idx)}
+                            disabled={field.state.value.length === 1}
+                          >
+                            <TrashIcon aria-hidden="true" className="size-5" />
+                          </button>
+                        </div>
+                        <createAppForm.AppField name={`types[${idx}].properties`} mode="array">
+                          {(propsField) => (
+                            <div className="flex flex-col gap-y-1 pl-2 ml-1 border-l border-indigo-300">
+                              <h4 className="text-xl text-gray-800 dark:text-gray-200">Properties</h4>
+                              <div className="w-full flex flex-col gap-y-2">
+                                {propsField.state.value.map((_prop, typePropIdx) => {
+                                  const typePropEntryKey = `createAppForm__type[${idx}]__prop[${typePropIdx}]`;
+                                  return (
+                                    <div key={typePropEntryKey} className="grid grid-cols-11 gap-2">
+                                      <div className="col-span-5">
+                                        <createAppForm.AppField
+                                          name={`types[${idx}].properties[${typePropIdx}].name` as const}
+                                        >
+                                          {(subPropField) => (
+                                            <subPropField.FormComponentTextField
+                                              id={`types[${idx}].properties[${typePropIdx}].name` as const}
+                                              name={`types[${idx}].properties[${typePropIdx}].name` as const}
+                                              required
+                                            />
+                                          )}
+                                        </createAppForm.AppField>
+                                      </div>
+                                      <div className="col-span-5">
+                                        <createAppForm.AppField
+                                          name={`types[${idx}].properties[${typePropIdx}].type_name` as const}
+                                        >
+                                          {(subPropField) => (
+                                            <subPropField.TypeCombobox
+                                              id={`types[${idx}].properties[${typePropIdx}].type_name` as const}
+                                              name={`types[${idx}].properties[${typePropIdx}].type_name` as const}
+                                              schemaTypes={EffectArray.filter(
+                                                appTypes,
+                                                (thisType) => thisType !== _type.name,
+                                              )}
+                                            />
+                                          )}
+                                        </createAppForm.AppField>
+                                      </div>
+                                      <div className="col-span-1 flex items-start justify-end h-full">
+                                        <button
+                                          type="button"
+                                          className="min-w-fit rounded-md bg-transparent p-2 text-white shadow-xs hover:bg-gray-100 dark:hover:bg-white/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 cursor-pointer"
+                                          onClick={() => propsField.removeValue(typePropIdx)}
+                                        >
+                                          <TrashIcon
+                                            aria-hidden="true"
+                                            className="size-5 text-red-700 dark:text-red-400"
+                                          />
+                                        </button>
+                                      </div>
+                                    </div>
+                                  );
+                                })}
+                                <div className="w-full flex items-center justify-end mt-1">
+                                  <button
+                                    type="button"
+                                    className="inline-flex items-center gap-x-1.5 text-sm/4 font-semibold text-gray-900 dark:text-white cursor-pointer hover:bg-gray-100 dark:hover:bg-white/10 rounded-md px-2 py-1.5"
+                                    onClick={() => propsField.pushValue({ name: '', type_name: 'Text' } as never)}
+                                  >
+                                    <PlusIcon aria-hidden="true" className="-ml-0.5 size-4" />
+                                    Add Property
+                                  </button>
+                                </div>
                               </div>
                             </div>
-                          </div>
-                          <CheckCircleIcon
-                            aria-hidden="true"
-                            className="size-5 text-indigo-600 dark:text-indigo-300 group-not-data-checked:invisible"
-                          />
-                          <span
-                            aria-hidden="true"
-                            className="pointer-events-none absolute -inset-px rounded-lg border-2 border-transparent group-data-checked:border-indigo-600 group-data-focus:border"
-                          />
-                        </Radio>
-                      </RadioGroup>
-                    </fieldset>
+                          )}
+                        </createAppForm.AppField>
+                      </div>
+                    );
+                  })}
+                  <div className="w-full flex items-center justify-end border-t border-gray-500 dark:border-gray-400 mt-4 pt-2">
+                    <button
+                      type="button"
+                      className="inline-flex items-center gap-x-1.5 text-sm/6 font-semibold text-gray-900 dark:text-white cursor-pointer hover:bg-gray-100 dark:hover:bg-white/10 rounded-md px-2 py-1.5"
+                      onClick={() =>
+                        field.pushValue({
+                          name: '',
+                          properties: [{ name: '', type_name: 'Text' }],
+                        } as never)
+                      }
+                    >
+                      <PlusIcon aria-hidden="true" className="-ml-0.5 size-5" />
+                      Add Type
+                    </button>
                   </div>
                 </div>
+              )}
+            </createAppForm.AppField>
+          </div>
+        </TabsPrimitive.Content>
+        <TabsPrimitive.Content value="generate">
+          <div className="space-y-12">
+            <div className="border-b border-gray-900/10 dark:border-white/10 pb-12">
+              <h2 className="text-base/7 font-semibold text-gray-900 dark:text-white">
+                Select a template and choose where to generate the app
+              </h2>
+              <div className="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+                <div className="sm:col-span-4">
+                  <createAppForm.AppField name="directory">
+                    {(field) => (
+                      <field.FormComponentTextField
+                        id="directory"
+                        name="directory"
+                        required
+                        label="Directory"
+                        placeholder={`./${formattedAppName}`}
+                        hint={
+                          <div className="mt-3 flex flex-col gap-y-1.5">
+                            <p className="text-sm/6 text-gray-400" id="directory-help-text">
+                              Can be relative to your current working directory, or a full path
+                            </p>
+                            <p className="text-sm/6 text-gray-400">
+                              Current working directory:{' '}
+                              <code className="font-mono bg-gray-50 dark:bg-black dark:text-white p-1 rounded-sm">
+                                {cwd.cwd}
+                              </code>
+                            </p>
+                          </div>
+                        }
+                      />
+                    )}
+                  </createAppForm.AppField>
+                </div>
+                <div className="col-span-full">
+                  <createAppForm.AppField name="template">
+                    {(field) => (
+                      <field.FormComponentRadioGroup
+                        id="template"
+                        name="template"
+                        label="Select a template"
+                        options={[
+                          {
+                            key: 'vite_react',
+                            value: 'vite_react',
+                            'aria-label': 'Vitejs + React',
+                            children: (
+                              <>
+                                <div className="flex flex-1 w-full">
+                                  <div className="flex flex-col gap-y-2 w-full">
+                                    <span className="block text-sm font-medium text-gray-900 dark:text-white">
+                                      Vite + React
+                                    </span>
+                                    <div className="flex items-center justify-between gap-x-4 w-fit">
+                                      <img src={viteLogo} alt="" width={64} height={64} className="size-16" />
+                                      <span className="text-gray-500 dark:text-gray-50">+</span>
+                                      <img src={reactLogo} alt="" width={64} height={64} className="size-16" />
+                                    </div>
+                                  </div>
+                                </div>
+                                <CheckCircleIcon
+                                  aria-hidden="true"
+                                  className="size-5 text-indigo-600 dark:text-indigo-300 group-not-data-checked:invisible"
+                                />
+                                <span
+                                  aria-hidden="true"
+                                  className="pointer-events-none absolute -inset-px rounded-lg border-2 border-transparent group-data-checked:border-indigo-600 group-data-focus:border"
+                                />
+                              </>
+                            ),
+                          },
+                        ]}
+                      />
+                    )}
+                  </createAppForm.AppField>
+                </div>
               </div>
             </div>
-          </TabsPrimitive.Content>
+          </div>
+        </TabsPrimitive.Content>
 
-          <TabsPrimitive.List className="mt-6 flex items-center justify-end gap-x-6">
-            <Link to="/" className="text-sm/6 font-semibold text-gray-900 dark:text-white">
-              Cancel
-            </Link>
-            {selectedFormStep === 'app_details' ? (
+        <TabsPrimitive.List className="mt-6 flex items-center justify-end gap-x-6">
+          <Link to="/" className="text-sm/6 font-semibold text-gray-900 dark:text-white">
+            Cancel
+          </Link>
+          {selectedFormStep === 'app_details' ? (
+            <TabsPrimitive.Trigger
+              key="forward__to__schema"
+              value="schema"
+              className="rounded-md bg-indigo-600 dark:bg-indigo-500 disabled:bg-gray-400 px-3 py-2 text-sm font-semibold text-white disabled:text-gray-900 shadow-xs hover:bg-indigo-500 dark:hover:bg-indigo-400 disabled:hover:bg-gray-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:focus-visible:outline-indigo-500 disabled:focus-visible:outline-gray-400 disabled:cursor-not-allowed inline-flex items-center gap-x-2 cursor-pointer"
+            >
+              Define Schema
+              <ChevronRightIcon className="size-5" aria-hidden="true" />
+            </TabsPrimitive.Trigger>
+          ) : selectedFormStep === 'schema' ? (
+            <div className="flex items-center gap-x-2">
               <TabsPrimitive.Trigger
-                value="schema"
-                disabled={appNameNotUnique}
+                key="back__to__app_details"
+                value="app_details"
+                className="rounded-md bg-white/10 px-3 py-2 text-sm font-semibold text-gray-900 dark:text-white shadow-xs hover:bg-gray-50 dark:hover:bg-white/20 ring-gray-300 dark:ring-white/30 ring-inset inline-flex items-center gap-x-1.5 cursor-pointer"
+              >
+                <ChevronLeftIcon className="size-5" aria-hidden="true" />
+                Back
+              </TabsPrimitive.Trigger>
+              <TabsPrimitive.Trigger
+                key="forward__to__generate"
+                value="generate"
                 className="rounded-md bg-indigo-600 dark:bg-indigo-500 disabled:bg-gray-400 px-3 py-2 text-sm font-semibold text-white disabled:text-gray-900 shadow-xs hover:bg-indigo-500 dark:hover:bg-indigo-400 disabled:hover:bg-gray-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:focus-visible:outline-indigo-500 disabled:focus-visible:outline-gray-400 disabled:cursor-not-allowed inline-flex items-center gap-x-2 cursor-pointer"
               >
-                Define Schema
+                Select template &amp; generate
                 <ChevronRightIcon className="size-5" aria-hidden="true" />
               </TabsPrimitive.Trigger>
-            ) : selectedFormStep === 'schema' ? (
-              <div className="flex items-center gap-x-2">
-                <TabsPrimitive.Trigger
-                  value="app_details"
-                  className="rounded-md bg-white/10 px-3 py-2 text-sm font-semibold text-gray-900 dark:text-white shadow-xs hover:bg-gray-50 dark:hover:bg-white/20 ring-gray-300 dark:ring-white/30 ring-inset inline-flex items-center gap-x-1.5 cursor-pointer"
-                >
-                  <ChevronLeftIcon className="size-5" aria-hidden="true" />
-                  Back
-                </TabsPrimitive.Trigger>
-                <TabsPrimitive.Trigger
-                  value="generate"
-                  className="rounded-md bg-indigo-600 dark:bg-indigo-500 disabled:bg-gray-400 px-3 py-2 text-sm font-semibold text-white disabled:text-gray-900 shadow-xs hover:bg-indigo-500 dark:hover:bg-indigo-400 disabled:hover:bg-gray-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:focus-visible:outline-indigo-500 disabled:focus-visible:outline-gray-400 disabled:cursor-not-allowed inline-flex items-center gap-x-2 cursor-pointer"
-                >
-                  Select template &amp; generate
-                  <ChevronRightIcon className="size-5" aria-hidden="true" />
-                </TabsPrimitive.Trigger>
-              </div>
-            ) : (
-              <div className="flex items-center gap-x-2">
-                <TabsPrimitive.Trigger
-                  value="schema"
-                  className="rounded-md bg-white/10 px-3 py-2 text-sm font-semibold text-gray-900 dark:text-white shadow-xs hover:bg-gray-50 dark:hover:bg-white/20 ring-gray-300 dark:ring-white/30 ring-inset inline-flex items-center gap-x-1.5 cursor-pointer"
-                >
-                  <ChevronLeftIcon className="size-5" aria-hidden="true" />
-                  Back
-                </TabsPrimitive.Trigger>
-                <button
-                  type="submit"
-                  disabled={appNameNotUnique || !formState.isValid || !formState.isDirty}
-                  data-state={isError ? 'error' : isSuccess ? 'success' : 'idle'}
-                  className="rounded-md bg-indigo-600 dark:bg-indigo-500 disabled:bg-gray-400 data-[state=error]:bg-red-600 data-[state=success]:bg-green-600 px-3 py-2 text-sm font-semibold text-white disabled:text-gray-900 shadow-xs hover:bg-indigo-500 dark:hover:bg-indigo-400 data-[state=error]:hover:bg-red-500 data-[state=success]:hover:bg-green-500 disabled:hover:bg-gray-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:focus-visible:outline-indigo-500 data-[state=error]:focus-visible:bg-red-500 data-[state=success]:focus-visible:bg-green-500 disabled:focus-visible:outline-gray-400 disabled:cursor-not-allowed inline-flex items-center gap-x-2 cursor-pointer"
+            </div>
+          ) : (
+            <div className="flex items-center gap-x-2">
+              <TabsPrimitive.Trigger
+                key="back__to__schema"
+                value="schema"
+                className="rounded-md bg-white/10 px-3 py-2 text-sm font-semibold text-gray-900 dark:text-white shadow-xs hover:bg-gray-50 dark:hover:bg-white/20 ring-gray-300 dark:ring-white/30 ring-inset inline-flex items-center gap-x-1.5 cursor-pointer"
+              >
+                <ChevronLeftIcon className="size-5" aria-hidden="true" />
+                Back
+              </TabsPrimitive.Trigger>
+              <createAppForm.AppForm>
+                <createAppForm.SubmitButton
+                  status={isPending ? 'submitting' : isError ? 'error' : isSuccess ? 'success' : 'idle'}
                 >
-                  {isPending ? (
-                    <Loading />
-                  ) : isSuccess ? (
-                    <>
-                      <CheckIcon className="size-5 text-white" aria-hidden="true" />
-                      Created!
-                    </>
-                  ) : isError ? (
-                    <>
-                      <ExclamationCircleIcon className="size-5 text-white" aria-hidden="true" />
-                      Error
-                    </>
-                  ) : (
-                    'Generate'
-                  )}
-                </button>
-              </div>
-            )}
-          </TabsPrimitive.List>
-        </form>
-      </FormProvider>
+                  Generate
+                </createAppForm.SubmitButton>
+              </createAppForm.AppForm>
+            </div>
+          )}
+        </TabsPrimitive.List>
+      </form>
     </TabsPrimitive.Root>
   );
 }
diff --git a/apps/typesync/package.json b/apps/typesync/package.json
index d185cac7..2f626867 100644
--- a/apps/typesync/package.json
+++ b/apps/typesync/package.json
@@ -55,10 +55,10 @@
     "@graphql-typed-document-node/core": "^3.2.0",
     "@headlessui/react": "^2.2.4",
     "@heroicons/react": "^2.2.0",
-    "@hookform/resolvers": "^5.0.1",
     "@phosphor-icons/react": "^2.1.10",
     "@radix-ui/react-tabs": "^1.1.12",
     "@tailwindcss/vite": "^4.1.8",
+    "@tanstack/react-form": "^1.12.1",
     "@tanstack/react-query": "^5.79.2",
     "@tanstack/react-query-devtools": "^5.79.2",
     "@tanstack/react-router": "^1.120.15",
@@ -72,7 +72,6 @@
     "open": "^10.1.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-hook-form": "^7.57.0",
     "shiki": "^3.4.2",
     "tailwindcss": "^4.1.8"
   }
diff --git a/apps/typesync/tsconfig.client.json b/apps/typesync/tsconfig.client.json
index 62f5412c..d14d399b 100644
--- a/apps/typesync/tsconfig.client.json
+++ b/apps/typesync/tsconfig.client.json
@@ -5,8 +5,15 @@
     "tsBuildInfoFile": ".tsbuildinfo/client.tsbuildinfo",
     "rootDir": "client",
     "noEmit": true,
+    "composite": false,
+    "declaration": false,
+    "declarationMap": false,
     "module": "ESNext",
     "moduleResolution": "bundler",
-    "types": ["vite/client"]
+    "types": ["vite/client"],
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8e1ea7f2..77ec998f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -167,7 +167,7 @@ importers:
         version: 7.1.2(graphql@16.11.0)
       isomorphic-ws:
         specifier: ^5.0.0
-        version: 5.0.0(ws@8.18.1(bufferutil@4.0.9)(utf-8-validate@5.0.10))
+        version: 5.0.0(ws@8.18.2(bufferutil@4.0.9)(utf-8-validate@5.0.10))
       lucide-react:
         specifier: ^0.508.0
         version: 0.508.0(react@19.1.0)
@@ -339,9 +339,6 @@ importers:
       '@heroicons/react':
         specifier: ^2.2.0
         version: 2.2.0(react@19.1.0)
-      '@hookform/resolvers':
-        specifier: ^5.0.1
-        version: 5.0.1(react-hook-form@7.57.0(react@19.1.0))
       '@phosphor-icons/react':
         specifier: ^2.1.10
         version: 2.1.10(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -351,6 +348,9 @@ importers:
       '@tailwindcss/vite':
         specifier: ^4.1.8
         version: 4.1.8(vite@6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(terser@5.39.1)(tsx@4.19.4)(yaml@2.7.0))
+      '@tanstack/react-form':
+        specifier: ^1.12.1
+        version: 1.12.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@tanstack/react-query':
         specifier: ^5.79.2
         version: 5.79.2(react@19.1.0)
@@ -390,9 +390,6 @@ importers:
       react-dom:
         specifier: ^19.1.0
         version: 19.1.0(react@19.1.0)
-      react-hook-form:
-        specifier: ^7.57.0
-        version: 7.57.0(react@19.1.0)
       shiki:
         specifier: ^3.4.2
         version: 3.4.2
@@ -2899,11 +2896,6 @@ packages:
     peerDependencies:
       react: '>= 16 || ^19.0.0-rc'
 
-  '@hookform/resolvers@5.0.1':
-    resolution: {integrity: sha512-u/+Jp83luQNx9AdyW2fIPGY6Y7NG68eN2ZW8FOJYL+M0i4s49+refdJdOp/A9n9HFQtQs3HIDHQvX3ZET2o7YA==}
-    peerDependencies:
-      react-hook-form: ^7.55.0
-
   '@img/sharp-darwin-arm64@0.34.1':
     resolution: {integrity: sha512-pn44xgBtgpEbZsu+lWf2KNb6OAf70X68k+yk69Ic2Xz11zHR/w24/U49XT7AeRwJ0Px+mhALhU5LPci1Aymk7A==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -4087,9 +4079,6 @@ packages:
   '@standard-schema/spec@1.0.0':
     resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
 
-  '@standard-schema/utils@0.3.0':
-    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
-
   '@svgr/babel-plugin-add-jsx-attribute@8.0.0':
     resolution: {integrity: sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==}
     engines: {node: '>=14'}
@@ -4433,6 +4422,9 @@ packages:
     peerDependencies:
       vite: ^5.2.0 || ^6
 
+  '@tanstack/form-core@1.12.1':
+    resolution: {integrity: sha512-cCR3udteesUakO0K7T+2GkL8F2HKp7+khJmdLbebz63XbKCuHqSuEtC+bz4cw+Ad6eZxV2hvTkmZxdn39F8XUw==}
+
   '@tanstack/history@1.115.0':
     resolution: {integrity: sha512-K7JJNrRVvyjAVnbXOH2XLRhFXDkeP54Kt2P4FR1Kl2KDGlIbkua5VqZQD2rot3qaDrpufyUa63nuLai1kOLTsQ==}
     engines: {node: '>=12'}
@@ -4446,6 +4438,18 @@ packages:
   '@tanstack/query-devtools@5.76.0':
     resolution: {integrity: sha512-1p92nqOBPYVqVDU0Ua5nzHenC6EGZNrLnB2OZphYw8CNA1exuvI97FVgIKON7Uug3uQqvH/QY8suUKpQo8qHNQ==}
 
+  '@tanstack/react-form@1.12.1':
+    resolution: {integrity: sha512-wcxqqM9mKcjy4ePUQNYZDpuK1dicGHGYbM21UujKNGY2maYk7eXPmZ2xeCYAOEl2rpCjgOf2MZHlfi3Exlaocg==}
+    peerDependencies:
+      '@tanstack/react-start': ^1.112.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+      vinxi: ^0.5.0
+    peerDependenciesMeta:
+      '@tanstack/react-start':
+        optional: true
+      vinxi:
+        optional: true
+
   '@tanstack/react-query-devtools@5.79.2':
     resolution: {integrity: sha512-yYhm7rnvG6p3n7yBIUWz+XtuWUROMVFJ/07+O5M6OPny9C05n0wPjTNFgRnnaHXORxGqZKwWSZR1gmceFMsE7Q==}
     peerDependencies:
@@ -4498,6 +4502,12 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  '@tanstack/react-store@0.7.1':
+    resolution: {integrity: sha512-qUTEKdId6QPWGiWyKAPf/gkN29scEsz6EUSJ0C3HgLMgaqTAyBsQ2sMCfGVcqb+kkhEXAdjleCgH6LAPD6f2sA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   '@tanstack/react-virtual@3.13.6':
     resolution: {integrity: sha512-WT7nWs8ximoQ0CDx/ngoFP7HbQF9Q2wQe4nh2NB+u2486eX3nZRE40P9g6ccCVq7ZfTSH5gFOuCoVH5DLNS/aA==}
     peerDependencies:
@@ -4625,6 +4635,9 @@ packages:
   '@tanstack/store@0.7.0':
     resolution: {integrity: sha512-CNIhdoUsmD2NolYuaIs8VfWM467RK6oIBAW4nPEKZhg1smZ+/CwtCdpURgp7nxSqOaV9oKkzdWD80+bC66F/Jg==}
 
+  '@tanstack/store@0.7.1':
+    resolution: {integrity: sha512-PjUQKXEXhLYj2X5/6c1Xn/0/qKY0IVFxTJweopRfF26xfjVyb14yALydJrHupDh3/d+1WKmfEgZPBVCmDkzzwg==}
+
   '@tanstack/virtual-core@3.13.6':
     resolution: {integrity: sha512-cnQUeWnhNP8tJ4WsGcYiX24Gjkc9ALstLbHcBj1t3E7EimN6n6kHH+DPV4PpDnuw00NApQp+ViojMj1GRdwYQg==}
 
@@ -6178,6 +6191,9 @@ packages:
   decimal.js@10.5.0:
     resolution: {integrity: sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==}
 
+  decode-formdata@0.9.0:
+    resolution: {integrity: sha512-q5uwOjR3Um5YD+ZWPOF/1sGHVW9A5rCrRwITQChRXlmPkxDFBqCm4jNTIVdGHNH9OnR+V9MoZVgRhsFb+ARbUw==}
+
   decode-named-character-reference@1.1.0:
     resolution: {integrity: sha512-Wy+JTSbFThEOXQIR2L6mxJvEs+veIzpmqD7ynWxMXGpnk3smkHQOp6forLdHsKpAMW9iJpaBBIxz285t1n1C3w==}
 
@@ -6318,6 +6334,9 @@ packages:
     engines: {node: '>= 4.0.0'}
     hasBin: true
 
+  devalue@5.1.1:
+    resolution: {integrity: sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==}
+
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
@@ -9665,12 +9684,6 @@ packages:
   react-fast-compare@3.2.2:
     resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
 
-  react-hook-form@7.57.0:
-    resolution: {integrity: sha512-RbEks3+cbvTP84l/VXGUZ+JMrKOS8ykQCRYdm5aYsxnDquL0vspsyNhGRO7pcH6hsZqWlPOjLye7rJqdtdAmlg==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      react: ^16.8.0 || ^17 || ^18 || ^19
-
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -15158,11 +15171,6 @@ snapshots:
     dependencies:
       react: 19.1.0
 
-  '@hookform/resolvers@5.0.1(react-hook-form@7.57.0(react@19.1.0))':
-    dependencies:
-      '@standard-schema/utils': 0.3.0
-      react-hook-form: 7.57.0(react@19.1.0)
-
   '@img/sharp-darwin-arm64@0.34.1':
     optionalDependencies:
       '@img/sharp-libvips-darwin-arm64': 1.1.0
@@ -16781,8 +16789,6 @@ snapshots:
 
   '@standard-schema/spec@1.0.0': {}
 
-  '@standard-schema/utils@0.3.0': {}
-
   '@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.27.1)':
     dependencies:
       '@babel/core': 7.27.1
@@ -17079,6 +17085,10 @@ snapshots:
       tailwindcss: 4.1.8
       vite: 6.3.5(@types/node@22.15.29)(jiti@2.4.2)(lightningcss@1.30.1)(terser@5.39.1)(tsx@4.19.4)(yaml@2.7.0)
 
+  '@tanstack/form-core@1.12.1':
+    dependencies:
+      '@tanstack/store': 0.7.1
+
   '@tanstack/history@1.115.0': {}
 
   '@tanstack/query-core@5.75.5': {}
@@ -17087,6 +17097,16 @@ snapshots:
 
   '@tanstack/query-devtools@5.76.0': {}
 
+  '@tanstack/react-form@1.12.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@tanstack/form-core': 1.12.1
+      '@tanstack/react-store': 0.7.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      decode-formdata: 0.9.0
+      devalue: 5.1.1
+      react: 19.1.0
+    transitivePeerDependencies:
+      - react-dom
+
   '@tanstack/react-query-devtools@5.79.2(@tanstack/react-query@5.79.2(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@tanstack/query-devtools': 5.76.0
@@ -17156,6 +17176,13 @@ snapshots:
       react-dom: 19.1.0(react@19.1.0)
       use-sync-external-store: 1.4.0(react@19.1.0)
 
+  '@tanstack/react-store@0.7.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@tanstack/store': 0.7.1
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      use-sync-external-store: 1.5.0(react@19.1.0)
+
   '@tanstack/react-virtual@3.13.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@tanstack/virtual-core': 3.13.6
@@ -17299,6 +17326,8 @@ snapshots:
 
   '@tanstack/store@0.7.0': {}
 
+  '@tanstack/store@0.7.1': {}
+
   '@tanstack/virtual-core@3.13.6': {}
 
   '@tanstack/virtual-core@3.13.9': {}
@@ -19564,6 +19593,8 @@ snapshots:
 
   decimal.js@10.5.0: {}
 
+  decode-formdata@0.9.0: {}
+
   decode-named-character-reference@1.1.0:
     dependencies:
       character-entities: 2.0.2
@@ -19679,6 +19710,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  devalue@5.1.1: {}
+
   devlop@1.1.0:
     dependencies:
       dequal: 2.0.3
@@ -21203,10 +21236,6 @@ snapshots:
     dependencies:
       ws: 7.5.10(bufferutil@4.0.9)(utf-8-validate@5.0.10)
 
-  isomorphic-ws@5.0.0(ws@8.18.1(bufferutil@4.0.9)(utf-8-validate@5.0.10)):
-    dependencies:
-      ws: 8.18.1(bufferutil@4.0.9)(utf-8-validate@5.0.10)
-
   isomorphic-ws@5.0.0(ws@8.18.2(bufferutil@4.0.9)(utf-8-validate@5.0.10)):
     dependencies:
       ws: 8.18.2(bufferutil@4.0.9)(utf-8-validate@5.0.10)
@@ -23639,10 +23668,6 @@ snapshots:
 
   react-fast-compare@3.2.2: {}
 
-  react-hook-form@7.57.0(react@19.1.0):
-    dependencies:
-      react: 19.1.0
-
   react-is@16.13.1: {}
 
   react-is@17.0.2: {}
@@ -25544,7 +25569,7 @@ snapshots:
       '@webassemblyjs/wasm-edit': 1.14.1
       '@webassemblyjs/wasm-parser': 1.14.1
       acorn: 8.14.0
-      browserslist: 4.24.2
+      browserslist: 4.24.5
       chrome-trace-event: 1.0.4
       enhanced-resolve: 5.18.1
       es-module-lexer: 1.7.0

From 24ab9f6bd107e32f979df84fa4b8b64defa2f9f1 Mon Sep 17 00:00:00 2001
From: Chris Whited <cmwhited1990@gmail.com>
Date: Tue, 3 Jun 2025 13:07:29 -1000
Subject: [PATCH 2/2] feat(typesync): handle light mode for TypeCombobox

---
 .../CreateAppForm/SchemaBuilder/TypeCombobox.tsx   | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/apps/typesync/client/src/Components/App/CreateAppForm/SchemaBuilder/TypeCombobox.tsx b/apps/typesync/client/src/Components/App/CreateAppForm/SchemaBuilder/TypeCombobox.tsx
index a0211b04..1c354a9b 100644
--- a/apps/typesync/client/src/Components/App/CreateAppForm/SchemaBuilder/TypeCombobox.tsx
+++ b/apps/typesync/client/src/Components/App/CreateAppForm/SchemaBuilder/TypeCombobox.tsx
@@ -65,23 +65,25 @@ export function TypeCombobox({
     >
       <Label className="sr-only">Prop type</Label>
       <div className="relative">
-        <ListboxButton className="grid w-full cursor-default grid-cols-1 rounded-md bg-slate-900 py-1.5 pr-2 pl-3 text-left text-white outline-1 -outline-offset-1 outline-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
-          <span className="col-start-1 row-start-1 truncate pr-6">{field.state.value}</span>
+        <ListboxButton className="grid w-full cursor-default grid-cols-1 rounded-md bg-white dakr:bg-slate-900 py-1.5 pr-2 pl-3 text-left text-white outline-1 -outline-offset-1 outline-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
+          <span className="col-start-1 row-start-1 truncate pr-6 text-gray-950 dark:text-white">
+            {field.state.value}
+          </span>
           <ChevronUpDownIcon
             aria-hidden="true"
-            className="col-start-1 row-start-1 size-5 self-center justify-self-end text-gray-300 sm:size-4"
+            className="col-start-1 row-start-1 size-5 self-center justify-self-end text-gray-300 dark:text-gray-50 sm:size-4"
           />
         </ListboxButton>
 
         <ListboxOptions
           transition
-          className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-slate-800 py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden data-leave:transition data-leave:duration-100 data-leave:ease-in data-closed:data-leave:opacity-0 sm:text-sm"
+          className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-gray-50 dark:bg-slate-800 py-1 text-base shadow-lg ring-1 ring-gray-200 dark:ring-black/5 focus:outline-hidden data-leave:transition data-leave:duration-100 data-leave:ease-in data-closed:data-leave:opacity-0 sm:text-sm"
         >
           {typeOptions.map((type) => (
             <ListboxOption
               key={type.id}
               value={type.name}
-              className="group relative cursor-default py-2 pr-9 pl-3 text-white select-none data-focus:bg-indigo-600 data-focus:text-white data-focus:outline-hidden"
+              className="group relative cursor-default py-2 pr-9 pl-3 text-gray-800 dark:text-white select-none data-focus:bg-indigo-600 data-focus:text-white data-focus:outline-hidden"
             >
               <span className="block truncate font-normal group-data-selected:font-semibold">{type.name}</span>
 
@@ -95,7 +97,7 @@ export function TypeCombobox({
               key={type.id}
               value={type.name}
               className={classnames(
-                'group relative cursor-default py-2 pr-9 pl-3 text-white select-none data-focus:bg-indigo-600 data-focus:text-white data-focus:outline-hidden',
+                'group relative cursor-default py-2 pr-9 pl-3 text-gray-800 dark:text-white select-none data-focus:bg-indigo-600 data-focus:text-white data-focus:outline-hidden',
                 idx === 0 ? 'border-t border-gray-400 dark:border-white/10' : '',
               )}
             >