From e5d777c58d9c13dd46fc92ce64593795a779d95c Mon Sep 17 00:00:00 2001
From: Daniel Naab <daniel.naab@gsa.gov>
Date: Mon, 26 Feb 2024 11:40:57 -0600
Subject: [PATCH] Form edit initial wysiwyg (#51)

* Add clickable preview component to the form manager's edit page. Remaining work is to style it, so it's not possible to click on form elements, tab to them, or enter data.

* Preview UI has selectable patterns, to open the corresponding form element edit ui.

* In-progress work wiring up saving to the WSYIWYG ui
---
 .../src/components/AppFormManager.tsx         |   9 +-
 .../src/components/AppFormRouter.tsx          |  12 +-
 packages/design/src/Form/Form.stories.tsx     |   4 +-
 .../Form/PromptSegment/FormSummary/index.tsx  |  14 ---
 .../design/src/Form/PromptSegment/index.tsx   |  23 ----
 packages/design/src/Form/index.tsx            |  99 ++++++----------
 .../FormManager/DocumentImporter/index.tsx    |  17 ++-
 .../src/FormManager/FormEdit/ElementEdit.tsx  |   0
 .../FormManager/FormEdit/FormEdit.stories.tsx |   4 +-
 .../FormManager/FormEdit/FormElementEdit.tsx  |  52 ++++++++
 .../src/FormManager/FormEdit/Preview.tsx      |  79 +++++++++++++
 .../design/src/FormManager/FormEdit/index.tsx | 111 +++++++++++-------
 .../FormPreview/FormPreview.stories.tsx       |  21 ++--
 .../src/FormManager/FormPreview/index.tsx     |  70 ++++-------
 packages/design/src/FormManager/index.tsx     |   8 +-
 packages/design/src/FormRouter/index.tsx      |  10 +-
 .../config/{ => edit}/InputElementEdit.tsx    |   6 +-
 .../config/{ => edit}/SequenceElementEdit.tsx |   8 +-
 packages/design/src/config/edit/index.ts      |  32 +++++
 packages/design/src/config/index.ts           |  27 +----
 .../view}/FormSummary/FormSummary.stories.tsx |   2 +-
 .../view}/FormSummary/FormSummary.test.ts     |   0
 .../src/config/view/FormSummary/index.tsx     |  16 +++
 .../SubmissionConfirmation.stories.tsx        |   2 +-
 .../view}/SubmissionConfirmation/index.tsx    |  17 ++-
 .../view}/TextInput/TestInput.stories.tsx     |  13 +-
 .../view}/TextInput/TestInput.test.ts         |   0
 .../view}/TextInput/index.tsx                 |  23 ++--
 .../view}/additional-fields.tsx               |   0
 packages/design/src/config/view/index.tsx     |  12 ++
 packages/design/src/test-form.ts              |  17 ++-
 packages/documents/src/document.ts            |   2 +-
 packages/forms/src/config/elements/input.ts   |  11 +-
 .../forms/src/config/elements/sequence.ts     |   4 +-
 packages/forms/src/config/index.ts            |  10 +-
 packages/forms/src/element.ts                 |  11 ++
 packages/forms/src/index.ts                   |  33 ++++--
 packages/forms/src/{prompt.ts => pattern.ts}  |  60 ++++++----
 packages/forms/src/response.ts                |   3 +-
 packages/forms/src/session.ts                 |  29 +++++
 packages/forms/tests/two-field-form.test.ts   |   4 +-
 41 files changed, 550 insertions(+), 325 deletions(-)
 delete mode 100644 packages/design/src/Form/PromptSegment/FormSummary/index.tsx
 delete mode 100644 packages/design/src/Form/PromptSegment/index.tsx
 create mode 100644 packages/design/src/FormManager/FormEdit/ElementEdit.tsx
 create mode 100644 packages/design/src/FormManager/FormEdit/FormElementEdit.tsx
 create mode 100644 packages/design/src/FormManager/FormEdit/Preview.tsx
 rename packages/design/src/config/{ => edit}/InputElementEdit.tsx (93%)
 rename packages/design/src/config/{ => edit}/SequenceElementEdit.tsx (93%)
 create mode 100644 packages/design/src/config/edit/index.ts
 rename packages/design/src/{Form/PromptSegment => config/view}/FormSummary/FormSummary.stories.tsx (97%)
 rename packages/design/src/{Form/PromptSegment => config/view}/FormSummary/FormSummary.test.ts (100%)
 create mode 100644 packages/design/src/config/view/FormSummary/index.tsx
 rename packages/design/src/{Form/PromptSegment => config/view}/SubmissionConfirmation/SubmissionConfirmation.stories.tsx (94%)
 rename packages/design/src/{Form/PromptSegment => config/view}/SubmissionConfirmation/index.tsx (66%)
 rename packages/design/src/{Form/PromptSegment => config/view}/TextInput/TestInput.stories.tsx (79%)
 rename packages/design/src/{Form/PromptSegment => config/view}/TextInput/TestInput.test.ts (100%)
 rename packages/design/src/{Form/PromptSegment => config/view}/TextInput/index.tsx (62%)
 rename packages/design/src/{Form/PromptSegment => config/view}/additional-fields.tsx (100%)
 create mode 100644 packages/design/src/config/view/index.tsx
 rename packages/forms/src/{prompt.ts => pattern.ts} (63%)

diff --git a/apps/spotlight/src/components/AppFormManager.tsx b/apps/spotlight/src/components/AppFormManager.tsx
index ad669db0..610526f6 100644
--- a/apps/spotlight/src/components/AppFormManager.tsx
+++ b/apps/spotlight/src/components/AppFormManager.tsx
@@ -1,6 +1,10 @@
 import React from 'react';
 
-import { FormManager, defaultFormElementComponent } from '@atj/design';
+import {
+  FormManager,
+  defaultFormElementComponents,
+  defaultFormElementEditComponents,
+} from '@atj/design';
 
 import { getAppContext } from '../context';
 
@@ -10,7 +14,8 @@ export default function () {
     <FormManager
       context={{
         config: ctx.formConfig,
-        components: defaultFormElementComponent,
+        components: defaultFormElementComponents,
+        editComponents: defaultFormElementEditComponents,
       }}
       formService={ctx.formService}
       baseUrl={ctx.baseUrl}
diff --git a/apps/spotlight/src/components/AppFormRouter.tsx b/apps/spotlight/src/components/AppFormRouter.tsx
index 9cff368f..4ea3c405 100644
--- a/apps/spotlight/src/components/AppFormRouter.tsx
+++ b/apps/spotlight/src/components/AppFormRouter.tsx
@@ -1,9 +1,17 @@
 import React from 'react';
 
-import { FormRouter } from '@atj/design';
+import { FormRouter, defaultFormElementComponents } from '@atj/design';
 import { getAppContext } from '../context';
 
 export default function AppFormRouter() {
   const ctx = getAppContext();
-  return <FormRouter config={ctx.formConfig} formService={ctx.formService} />;
+  return (
+    <FormRouter
+      context={{
+        config: ctx.formConfig,
+        components: defaultFormElementComponents,
+      }}
+      formService={ctx.formService}
+    />
+  );
 }
diff --git a/packages/design/src/Form/Form.stories.tsx b/packages/design/src/Form/Form.stories.tsx
index c99383db..1be46163 100644
--- a/packages/design/src/Form/Form.stories.tsx
+++ b/packages/design/src/Form/Form.stories.tsx
@@ -2,14 +2,14 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import Form from '.';
-import { createTestFormConfig, createTestSession } from '../test-form';
+import { createTestFormContext, createTestSession } from '../test-form';
 
 export default {
   title: 'Form',
   component: Form,
   decorators: [(Story, args) => <Story {...args} />],
   args: {
-    config: createTestFormConfig(),
+    context: createTestFormContext(),
     session: createTestSession(),
   },
   tags: ['autodocs'],
diff --git a/packages/design/src/Form/PromptSegment/FormSummary/index.tsx b/packages/design/src/Form/PromptSegment/FormSummary/index.tsx
deleted file mode 100644
index 4e5f6b2e..00000000
--- a/packages/design/src/Form/PromptSegment/FormSummary/index.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-
-import { FormSummaryPrompt } from '@atj/forms';
-
-export type TextSummaryProps = { prompt: FormSummaryPrompt };
-
-export default function FormSummary({ prompt }: TextSummaryProps) {
-  return (
-    <>
-      <legend className="usa-legend usa-legend--large">{prompt.title}</legend>
-      <p>{prompt.description}</p>
-    </>
-  );
-}
diff --git a/packages/design/src/Form/PromptSegment/index.tsx b/packages/design/src/Form/PromptSegment/index.tsx
deleted file mode 100644
index 237785b3..00000000
--- a/packages/design/src/Form/PromptSegment/index.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-
-import { type PromptPart } from '@atj/forms';
-import FormSummary from './FormSummary';
-import SubmissionConfirmation from './SubmissionConfirmation';
-import TextInput from './TextInput';
-
-export default function PromptSegment({
-  promptPart,
-}: {
-  promptPart: PromptPart;
-}) {
-  if (promptPart.type === 'form-summary') {
-    return <FormSummary prompt={promptPart} />;
-  } else if (promptPart.type === 'text') {
-    return <TextInput prompt={promptPart} />;
-  } else if (promptPart.type === 'submission-confirmation') {
-    return <SubmissionConfirmation prompt={promptPart} />;
-  } else {
-    const _exhaustiveCheck: never = promptPart; // eslint-disable-line @typescript-eslint/no-unused-vars
-    return (<></>) as never;
-  }
-}
diff --git a/packages/design/src/Form/index.tsx b/packages/design/src/Form/index.tsx
index 334cf531..c44d590c 100644
--- a/packages/design/src/Form/index.tsx
+++ b/packages/design/src/Form/index.tsx
@@ -8,11 +8,26 @@ import {
   type FormConfig,
   type FormSession,
   type Prompt,
+  type Pattern,
 } from '@atj/forms';
 
-import PromptSegment from './PromptSegment';
 import ActionBar from './ActionBar';
 
+export type FormUIContext = {
+  config: FormConfig;
+  components: ComponentForPattern;
+};
+
+export type ComponentForPattern<T extends Pattern = Pattern<unknown>> = Record<
+  string,
+  FormElementComponent<T>
+>;
+
+export type FormElementComponent<T extends Pattern = Pattern<unknown>> =
+  React.ComponentType<{
+    prompt: T;
+  }>;
+
 const usePrompt = (
   initialPrompt: Prompt,
   config: FormConfig,
@@ -45,16 +60,22 @@ const usePrompt = (
 };
 
 export default function Form({
-  config,
+  context,
   session,
   onSubmit,
 }: {
-  config: FormConfig;
+  context: FormUIContext;
   session: FormSession;
   onSubmit?: (data: Record<string, string>) => void;
 }) {
-  const initialPrompt = createPrompt(config, session, { validate: false });
-  const { prompt, updatePrompt } = usePrompt(initialPrompt, config, session);
+  const initialPrompt = createPrompt(context.config, session, {
+    validate: false,
+  });
+  const { prompt, updatePrompt } = usePrompt(
+    initialPrompt,
+    context.config,
+    session
+  );
 
   const formMethods = useForm<Record<string, string>>({});
 
@@ -65,10 +86,10 @@ export default function Form({
     updatePrompt(allFormData);
   }, [allFormData]);
   */
-
   return (
     <FormProvider {...formMethods}>
-      <form className="previewForm"
+      <form
+        className="previewForm"
         onSubmit={formMethods.handleSubmit(async data => {
           updatePrompt(data);
           if (onSubmit) {
@@ -80,9 +101,16 @@ export default function Form({
         })}
       >
         <fieldset className="usa-fieldset">
-          {prompt.parts.map((promptPart, index) => (
-            <PromptSegment key={index} promptPart={promptPart}></PromptSegment>
-          ))}
+          {prompt.parts
+            .map((pattern, index) => {
+              if (pattern.type === 'text') {
+                console.log('skipping', pattern.type);
+                return null;
+              }
+              const Component = context.components[pattern.type];
+              return <Component key={index} prompt={pattern} />;
+            })
+            .filter(a => a)}
           {/* Add submit button or other controls as needed */}
         </fieldset>
         <ActionBar actions={prompt.actions} />
@@ -90,54 +118,3 @@ export default function Form({
     </FormProvider>
   );
 }
-
-/*
-export const FormFieldsetUnwired = ({ fields }: { fields: Field[] }) => {
-  return (
-    <fieldset className="usa-fieldset">
-      <legend className="usa-legend usa-legend--large">
-        UD 105 - Unlawful Detainer Form
-      </legend>
-      {fields.map(field => {
-        // Use 'tag' for 'select' and 'textarea', 'type' for others
-        const fieldType =
-          field.tag === 'select' ||
-          field.tag === 'textarea' ||
-          field.tag === 'p' ||
-          field.tag === 'h2' ||
-          field.tag === 'h3' ||
-          field.tag === 'ul'
-            ? field.tag
-            : field.type;
-
-        switch (fieldType) {
-          case 'text':
-            return <TextField key={field.id} field={field} />;
-          case 'boolean':
-            return <BooleanField key={field.id} field={field} />;
-          case 'checkbox':
-            return <CheckBoxField key={field.id} field={field} />;
-          case 'select':
-            return <SelectField key={field.id} field={field} />;
-          case 'radio':
-            return <RadioField key={field.id} field={field} />;
-          case 'date':
-            return <DateField key={field.id} field={field} />;
-          case 'textarea':
-            return <TextareaField key={field.id} field={field} />;
-          case 'p':
-            return <ParagraphBlock key={field.id} field={field} />;
-          case 'h2':
-            return <Header3Block key={field.id} field={field} />;
-          case 'h3':
-            return <Header3Block key={field.id} field={field} />;
-          case 'ul':
-            return <UnorderedList key={field.id} field={field} />;
-          default:
-            return null;
-        }
-      })}
-    </fieldset>
-  );
-};
-*/
diff --git a/packages/design/src/FormManager/DocumentImporter/index.tsx b/packages/design/src/FormManager/DocumentImporter/index.tsx
index a2eb319c..ed61a5d0 100644
--- a/packages/design/src/FormManager/DocumentImporter/index.tsx
+++ b/packages/design/src/FormManager/DocumentImporter/index.tsx
@@ -4,24 +4,25 @@ import { useNavigate } from 'react-router-dom';
 import { addDocument, addDocumentFieldsToForm } from '@atj/documents';
 import { type FormService } from '@atj/form-service';
 import {
-  type FormConfig,
   type DocumentFieldMap,
   type FormDefinition,
+  createFormSession,
 } from '@atj/forms';
 
 import { onFileInputChangeGetFile } from '../FormList/PDFFileSelect/file-input';
 import Form from '../../Form';
+import { FormUIContext } from 'config';
 
 const DocumentImporter = ({
   baseUrl,
   formId,
-  config,
+  context,
   form,
   formService,
 }: {
   baseUrl: string;
   formId: string;
-  config: FormConfig;
+  context: FormUIContext;
   form: FormDefinition;
   formService: FormService;
 }) => {
@@ -70,7 +71,11 @@ const DocumentImporter = ({
   const PDFFileSelect = () => {
     return (
       <div className="usa-form-group">
-        <label className="usa-label" id="file-input-specific-hint" htmlFor="file-input-specific">
+        <label
+          className="usa-label"
+          id="file-input-specific-hint"
+          htmlFor="file-input-specific"
+        >
           Select a single PDF file
         </label>
         <div className="usa-file-input">
@@ -153,8 +158,8 @@ const DocumentImporter = ({
     return (
       <>
         <Form
-          config={config}
-          form={previewForm}
+          context={context}
+          session={createFormSession(previewForm)}
           onSubmit={data => {
             //handleFormSubmission(formId, data);
             console.log(formId, data);
diff --git a/packages/design/src/FormManager/FormEdit/ElementEdit.tsx b/packages/design/src/FormManager/FormEdit/ElementEdit.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/design/src/FormManager/FormEdit/FormEdit.stories.tsx b/packages/design/src/FormManager/FormEdit/FormEdit.stories.tsx
index 7ed8dffd..8307a939 100644
--- a/packages/design/src/FormManager/FormEdit/FormEdit.stories.tsx
+++ b/packages/design/src/FormManager/FormEdit/FormEdit.stories.tsx
@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { createTestFormService } from '@atj/form-service';
 
 import FormEdit from '.';
-import { createTestForm, createTestFormContext } from '../../test-form';
+import { createTestForm, createTestFormEditContext } from '../../test-form';
 
 export default {
   title: 'FormManager/FormEdit',
@@ -18,7 +18,7 @@ export default {
     ),
   ],
   args: {
-    context: createTestFormContext(),
+    context: createTestFormEditContext(),
     formId: 'test-form',
     formService: createTestFormService({
       'test-form': createTestForm(),
diff --git a/packages/design/src/FormManager/FormEdit/FormElementEdit.tsx b/packages/design/src/FormManager/FormEdit/FormElementEdit.tsx
new file mode 100644
index 00000000..a18d5553
--- /dev/null
+++ b/packages/design/src/FormManager/FormEdit/FormElementEdit.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import {
+  FormDefinition,
+  FormElement,
+  FormElementMap,
+  updateElement,
+} from '@atj/forms';
+import { FormEditUIContext } from '../../config';
+
+export const FormElementEdit = ({
+  context,
+  initialForm,
+  formElement,
+  onChange,
+}: {
+  context: FormEditUIContext;
+  initialForm: FormDefinition;
+  formElement: FormElement;
+  onChange: (form: FormDefinition) => void;
+}) => {
+  const methods = useForm<FormElementMap>({
+    defaultValues: {
+      [formElement.id]: formElement,
+    },
+  });
+  const SelectedEditComponent = context.editComponents[formElement.type];
+  return (
+    <FormProvider {...methods}>
+      <form
+        className="editForm"
+        onSubmit={methods.handleSubmit(formData => {
+          const updatedForm = updateElement(
+            context.config,
+            initialForm,
+            formElement.id,
+            formData
+          );
+          //onChange(updatedForm);
+        })}
+      >
+        <input className="usa-button" type="submit" value="Save" />
+        <SelectedEditComponent
+          context={context}
+          form={initialForm}
+          element={formElement}
+        />
+      </form>
+    </FormProvider>
+  );
+};
diff --git a/packages/design/src/FormManager/FormEdit/Preview.tsx b/packages/design/src/FormManager/FormEdit/Preview.tsx
new file mode 100644
index 00000000..100bcba4
--- /dev/null
+++ b/packages/design/src/FormManager/FormEdit/Preview.tsx
@@ -0,0 +1,79 @@
+import classNames from 'classnames';
+import React, { createContext, useContext } from 'react';
+
+import {
+  type FormDefinition,
+  type FormElementId,
+  type Pattern,
+  createFormSession,
+} from '@atj/forms';
+
+import Form, {
+  type ComponentForPattern,
+  type FormElementComponent,
+  type FormUIContext,
+} from '../../Form';
+
+type PreviewFormProps = {
+  uiContext: FormUIContext;
+  form: FormDefinition;
+};
+
+export const PreviewForm = ({ uiContext, form }: PreviewFormProps) => {
+  const previewUiContext: FormUIContext = {
+    config: uiContext.config,
+    // I think we want to hoist this definition up to a higher level, so we
+    // don't have to regenerate it every time we render the form.
+    components: createPreviewComponents(uiContext.components),
+  };
+  console.log('creating session');
+  const disposable = createFormSession(form); // nullSession instead?
+  return <Form context={previewUiContext} session={disposable}></Form>;
+};
+
+const createPreviewComponents = (
+  components: ComponentForPattern
+): ComponentForPattern => {
+  const previewComponents: ComponentForPattern = {};
+  // TODO: Create a configurable way to to defined preview components.
+  for (const [patternType, Component] of Object.entries(components)) {
+    if (patternType === 'sequence') {
+      previewComponents[patternType] = Component;
+    } else {
+      previewComponents[patternType] = createPatternPreviewComponent(Component);
+    }
+  }
+  return previewComponents;
+};
+
+type PreviewContextValue = {
+  selectedId?: FormElementId;
+  setSelectedId: (id: FormElementId) => void;
+};
+
+export const PreviewContext = createContext<PreviewContextValue>(
+  null as unknown as PreviewContextValue
+);
+
+const createPatternPreviewComponent = (Component: FormElementComponent) => {
+  return function PatternPreviewComponent({ prompt }: { prompt: Pattern }) {
+    const { selectedId, setSelectedId } = useContext(PreviewContext);
+    return (
+      <div
+        onClick={() => {
+          setSelectedId(prompt._elementId);
+        }}
+        className={classNames({
+          'bg-primary-lighter': selectedId === prompt._elementId,
+        })}
+        //onKeyDown={handleKeyDown}
+        role="button"
+        aria-pressed={selectedId === prompt._elementId}
+        aria-label="Select this pattern"
+        tabIndex={0}
+      >
+        <Component prompt={prompt} />
+      </div>
+    );
+  };
+};
diff --git a/packages/design/src/FormManager/FormEdit/index.tsx b/packages/design/src/FormManager/FormEdit/index.tsx
index 4f195b1a..f6bee9ce 100644
--- a/packages/design/src/FormManager/FormEdit/index.tsx
+++ b/packages/design/src/FormManager/FormEdit/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import { type FormService } from '@atj/form-service';
@@ -7,17 +7,21 @@ import {
   type FormElementMap,
   getRootFormElement,
   updateElements,
+  FormElementId,
+  getFormElement,
 } from '@atj/forms';
 
-import { type FormUIContext } from '../../config';
+import { type FormEditUIContext } from '../../config';
 import InnerPageTopNav from '../internalPageTopNav';
+import { PreviewContext, PreviewForm } from './Preview';
+import { FormElementEdit } from './FormElementEdit';
 
 export default function FormEdit({
   context,
   formId,
   formService,
 }: {
-  context: FormUIContext;
+  context: FormEditUIContext;
   formId: string;
   formService: FormService;
 }) {
@@ -28,11 +32,10 @@ export default function FormEdit({
   const form = result.data;
   return (
     <div className="editFormPage">
+      <InnerPageTopNav formId={formId} formService={formService} />
       <EditForm
         context={context}
-        formId={formId}
-        formService={formService}
-        form={form}
+        initialForm={form}
         onSave={form => formService.saveForm(formId, form)}
       />
     </div>
@@ -41,45 +44,73 @@ export default function FormEdit({
 
 const EditForm = ({
   context,
-  form,
+  initialForm,
   onSave,
-  formId,
-  formService,
 }: {
-  context: FormUIContext;
-  form: FormDefinition;
+  context: FormEditUIContext;
+  initialForm: FormDefinition;
   onSave: (form: FormDefinition) => void;
-  formId: string;
-  formService: FormService;
 }) => {
-  const methods = useForm<FormElementMap>({
-    defaultValues: form.elements,
-  });
-  const rootField = getRootFormElement(form);
-  const Component = context.components[rootField.type];
+  const [currentForm, setCurrentForm] = useState(initialForm);
+  const [selectedId, setSelectedId] = useState<FormElementId>();
+  const rootField = getRootFormElement(currentForm);
+  const formElement = getFormElement(currentForm, selectedId || rootField.id);
   return (
-    <FormProvider {...methods}>
-      <form
-        className="editForm"
-        onSubmit={methods.handleSubmit(data => {
-          const updatedForm = updateElements(context.config, form, data);
-          onSave(updatedForm);
-        })}
-      >
-        <InnerPageTopNav formId={formId} formService={formService} />
-        <h1>
-          <span>Edit form interface</span>
-          <span>
-            <ButtonBar />
-          </span>
-        </h1>
-        <h3 className="descriptionText text-normal">
-          Editing form {form.summary.title}
-        </h3>
-        <Component context={context} form={form} element={rootField} />
-        <ButtonBar />
-      </form>
-    </FormProvider>
+    <>
+      <ButtonBar />
+      <div className="grid-row">
+        <div className="grid-col-6">
+          <PreviewContext.Provider
+            value={{
+              selectedId,
+              setSelectedId: id => {
+                setSelectedId(id);
+              },
+            }}
+          >
+            <PreviewForm uiContext={context} form={currentForm} />
+          </PreviewContext.Provider>
+        </div>
+        <div className="grid-col-6">
+          <h2>Editing {selectedId}...</h2>
+          {formElement && (
+            <FormElementEdit
+              context={context}
+              initialForm={currentForm}
+              formElement={formElement}
+              onChange={function (form: FormDefinition): void {
+                setCurrentForm(form);
+              }}
+            />
+          )}
+          <hr />
+          {/*
+          <div className="editForm">
+            <FormProvider {...methods}>
+              <form
+                className="editForm"
+                onSubmit={methods.handleSubmit(data => {
+                  const updatedForm = updateElements(
+                    context.config,
+                    currentForm,
+                    data
+                  );
+                  setCurrentForm(updatedForm);
+                  onSave(updatedForm);
+                })}
+              >
+                <EditComponent
+                  context={context}
+                  form={currentForm}
+                  element={rootField}
+                />
+              </form>
+            </FormProvider>
+          </div>
+          */}
+        </div>
+      </div>
+    </>
   );
 };
 
diff --git a/packages/design/src/FormManager/FormPreview/FormPreview.stories.tsx b/packages/design/src/FormManager/FormPreview/FormPreview.stories.tsx
index 9c79a065..8921ae78 100644
--- a/packages/design/src/FormManager/FormPreview/FormPreview.stories.tsx
+++ b/packages/design/src/FormManager/FormPreview/FormPreview.stories.tsx
@@ -2,14 +2,12 @@ import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { createTestFormService } from '@atj/form-service';
-
-import { FormViewById } from '.';
-import { createTestForm, createTestFormConfig } from '../../test-form';
+import FormPreview from '.';
+import { createTestForm, createTestFormContext } from '../../test-form';
 
 export default {
-  title: 'FormManager/FormView',
-  component: FormViewById,
+  title: 'FormManager/FormPreview',
+  component: FormPreview,
   decorators: [
     (Story, args) => (
       <MemoryRouter initialEntries={['/']}>
@@ -18,13 +16,10 @@ export default {
     ),
   ],
   args: {
-    config: createTestFormConfig(),
-    formId: 'test-form',
-    formService: createTestFormService({
-      'test-form': createTestForm(),
-    }),
+    context: createTestFormContext(),
+    form: createTestForm(),
   },
   tags: ['autodocs'],
-} satisfies Meta<typeof FormViewById>;
+} satisfies Meta<typeof FormPreview>;
 
-export const FormViewTest = {} satisfies StoryObj<typeof FormViewById>;
+export const FormViewTest = {} satisfies StoryObj<typeof FormPreview>;
diff --git a/packages/design/src/FormManager/FormPreview/index.tsx b/packages/design/src/FormManager/FormPreview/index.tsx
index a31c5e8f..a9101172 100644
--- a/packages/design/src/FormManager/FormPreview/index.tsx
+++ b/packages/design/src/FormManager/FormPreview/index.tsx
@@ -1,57 +1,33 @@
 import React from 'react';
 
-import { type FormConfig, createFormSession } from '@atj/forms';
-import { type FormService } from '@atj/form-service';
+import { type FormDefinition, createFormSession } from '@atj/forms';
+import { FormService } from '@atj/form-service';
 
-import Form from '../../Form';
-import InnerPageTopNav from '../internalPageTopNav';
+import Form, { type FormUIContext } from '../../Form';
 
-export const FormViewById = ({
-  config,
-  formId,
+export default function FormPreview({
+  context,
+  form,
+}: {
+  context: FormUIContext;
+  form: FormDefinition;
+}) {
+  const session = createFormSession(form);
+  return <Form context={context} session={session} />;
+}
+
+export const FormPreviewById = ({
+  context,
   formService,
+  formId,
 }: {
-  config: FormConfig;
-  formId: string;
+  context: FormUIContext;
   formService: FormService;
+  formId: string;
 }) => {
-  // Fallback to hardcoded data if a magic ID is chosen.
-  const result = formService.getForm(formId);
-  if (!result.success) {
-    return 'null form retrieved from storage';
+  const form = formService.getForm(formId);
+  if (!form.success) {
+    return <div>Error loading form preview</div>;
   }
-  const form = result.data;
-  const session = createFormSession(form);
-  return (
-    <>
-    <InnerPageTopNav formId={formId} formService={formService} />
-    <Form
-      config={config}
-      session={session}
-      onSubmit={async data => {
-        const submission = await formService.submitForm(session, formId, data);
-        if (submission.success) {
-          submission.data.forEach(document => {
-            downloadPdfDocument(document.fileName, document.data);
-          });
-        } else {
-          console.error(submission.error);
-        }
-      }}
-    />
-    </>
-  );
-};
-
-
-export const downloadPdfDocument = (fileName: string, pdfData: Uint8Array) => {
-  const blob = new Blob([pdfData], { type: 'application/pdf' });
-  const url = URL.createObjectURL(blob);
-  const element = document.createElement('a');
-  element.setAttribute('href', url);
-  element.setAttribute('download', fileName);
-  element.style.display = 'none';
-  document.body.appendChild(element);
-  element.click();
-  document.body.removeChild(element);
+  return <FormPreview context={context} form={form.data} />;
 };
diff --git a/packages/design/src/FormManager/index.tsx b/packages/design/src/FormManager/index.tsx
index 075b42e3..4a570aa8 100644
--- a/packages/design/src/FormManager/index.tsx
+++ b/packages/design/src/FormManager/index.tsx
@@ -6,16 +6,16 @@ import { type FormService } from '@atj/form-service';
 import FormDelete from './FormDelete';
 import FormEdit from './FormEdit';
 import FormList from './FormList';
-import { FormViewById } from './FormPreview';
+import { FormPreviewById } from './FormPreview';
 import { FormDocumentImport } from './import-document';
-import { FormUIContext } from '../config';
+import { type FormEditUIContext } from '../config';
 
 export default function FormManager({
   context,
   baseUrl,
   formService,
 }: {
-  context: FormUIContext;
+  context: FormEditUIContext;
   baseUrl: string;
   formService: FormService;
 }) {
@@ -36,7 +36,7 @@ export default function FormManager({
               return <div>formId is undefined</div>;
             }
             return (
-              <FormViewById
+              <FormPreviewById
                 config={context.config}
                 formId={formId}
                 formService={formService}
diff --git a/packages/design/src/FormRouter/index.tsx b/packages/design/src/FormRouter/index.tsx
index 4846ef4f..39db9012 100644
--- a/packages/design/src/FormRouter/index.tsx
+++ b/packages/design/src/FormRouter/index.tsx
@@ -2,15 +2,15 @@ import React from 'react';
 import { useParams, HashRouter, Route, Routes } from 'react-router-dom';
 
 import { type FormService } from '@atj/form-service';
-import Form from '../Form';
-import { createFormSession, type FormConfig } from '@atj/forms';
+import Form, { type FormUIContext } from '../Form';
+import { createFormSession } from '@atj/forms';
 
 // Wrapper around Form that includes a client-side router for loading forms.
 export default function FormRouter({
-  config,
+  context,
   formService,
 }: {
-  config: FormConfig;
+  context: FormUIContext;
   formService: FormService;
 }) {
   return (
@@ -37,7 +37,7 @@ export default function FormRouter({
             const session = createFormSession(result.data);
             return (
               <Form
-                config={config}
+                context={context}
                 session={session}
                 onSubmit={async data => {
                   /*const newSession = applyPromptResponse(
diff --git a/packages/design/src/config/InputElementEdit.tsx b/packages/design/src/config/edit/InputElementEdit.tsx
similarity index 93%
rename from packages/design/src/config/InputElementEdit.tsx
rename to packages/design/src/config/edit/InputElementEdit.tsx
index 5b181e75..db5ec764 100644
--- a/packages/design/src/config/InputElementEdit.tsx
+++ b/packages/design/src/config/edit/InputElementEdit.tsx
@@ -3,9 +3,11 @@ import { useFormContext } from 'react-hook-form';
 
 import { type InputElement } from '@atj/forms/src/config/elements/input';
 
-import { type FormElementComponent } from '.';
+import { FormElementEditComponent } from '..';
 
-const InputElementEdit: FormElementComponent<InputElement> = ({ element }) => {
+const InputElementEdit: FormElementEditComponent<InputElement> = ({
+  element,
+}) => {
   const { register } = useFormContext();
   return (
     <div className="grid-row grid-gap">
diff --git a/packages/design/src/config/SequenceElementEdit.tsx b/packages/design/src/config/edit/SequenceElementEdit.tsx
similarity index 93%
rename from packages/design/src/config/SequenceElementEdit.tsx
rename to packages/design/src/config/edit/SequenceElementEdit.tsx
index 5388bf18..337c4665 100644
--- a/packages/design/src/config/SequenceElementEdit.tsx
+++ b/packages/design/src/config/edit/SequenceElementEdit.tsx
@@ -20,13 +20,13 @@ import { useFormContext } from 'react-hook-form';
 import { type FormDefinition, type FormElement } from '@atj/forms';
 import { type SequenceElement } from '@atj/forms/src/config/elements/sequence';
 
-import { type FormElementComponent, type FormUIContext } from '.';
+import { type FormElementEditComponent, type FormEditUIContext } from '.';
 
 interface ItemProps<T> {
   id: string;
   form: FormDefinition;
   element: FormElement<T>;
-  context: FormUIContext;
+  context: FormEditUIContext;
 }
 
 const SortableItem = <T,>({ id, form, element, context }: ItemProps<T>) => {
@@ -38,7 +38,7 @@ const SortableItem = <T,>({ id, form, element, context }: ItemProps<T>) => {
     transition,
   };
 
-  const Component = context.components[element.type];
+  const Component = context.editComponents[element.type];
 
   return (
     <li ref={setNodeRef} style={style}>
@@ -65,7 +65,7 @@ const SortableItem = <T,>({ id, form, element, context }: ItemProps<T>) => {
   );
 };
 
-const SequenceElementEdit: FormElementComponent<SequenceElement> = ({
+const SequenceElementEdit: FormElementEditComponent<SequenceElement> = ({
   context,
   form,
   element,
diff --git a/packages/design/src/config/edit/index.ts b/packages/design/src/config/edit/index.ts
new file mode 100644
index 00000000..49c9f040
--- /dev/null
+++ b/packages/design/src/config/edit/index.ts
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {
+  type FormConfig,
+  type FormDefinition,
+  type FormElement,
+} from '@atj/forms';
+
+import InputElementEdit from './InputElementEdit';
+import SequenceElementEdit from './SequenceElementEdit';
+import { type ComponentForPattern } from 'config/view';
+
+export type FormEditUIContext = {
+  config: FormConfig;
+  components: ComponentForPattern;
+  editComponents: EditComponentForFormElement;
+};
+
+export type FormElementEditComponent<T extends FormElement> =
+  React.ComponentType<{
+    context: FormEditUIContext;
+    form: FormDefinition;
+    element: T;
+  }>;
+
+export type EditComponentForFormElement<T extends FormElement = FormElement> =
+  Record<string, FormElementEditComponent<T>>;
+
+export const defaultFormElementEditComponents: EditComponentForFormElement = {
+  sequence: SequenceElementEdit,
+  input: InputElementEdit,
+};
diff --git a/packages/design/src/config/index.ts b/packages/design/src/config/index.ts
index 0e43e4c3..15d302a9 100644
--- a/packages/design/src/config/index.ts
+++ b/packages/design/src/config/index.ts
@@ -1,25 +1,2 @@
-import React from 'react';
-
-import { FormElement, type FormConfig, type FormDefinition } from '@atj/forms';
-
-import InputElementEdit from './InputElementEdit';
-import SequenceElementEdit from './SequenceElementEdit';
-
-export type FormUIContext = {
-  config: FormConfig;
-  components: ComponentForFormElement;
-};
-
-export type FormElementComponent<T extends FormElement> = React.ComponentType<{
-  context: FormUIContext;
-  form: FormDefinition;
-  element: T;
-}>;
-
-export type ComponentForFormElement<T extends FormElement = FormElement> =
-  Record<string, FormElementComponent<T>>;
-
-export const defaultFormElementComponent: ComponentForFormElement = {
-  sequence: SequenceElementEdit,
-  input: InputElementEdit,
-};
+export * from './edit';
+export * from './view';
diff --git a/packages/design/src/Form/PromptSegment/FormSummary/FormSummary.stories.tsx b/packages/design/src/config/view/FormSummary/FormSummary.stories.tsx
similarity index 97%
rename from packages/design/src/Form/PromptSegment/FormSummary/FormSummary.stories.tsx
rename to packages/design/src/config/view/FormSummary/FormSummary.stories.tsx
index c8017826..be379955 100644
--- a/packages/design/src/Form/PromptSegment/FormSummary/FormSummary.stories.tsx
+++ b/packages/design/src/config/view/FormSummary/FormSummary.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import FormSummary, { TextSummaryProps } from '.';
 
 export default {
-  title: 'prompts/FormSummary',
+  title: 'patterns/FormSummary',
   component: FormSummary,
   tags: ['autodocs'],
 } satisfies Meta<typeof FormSummary>;
diff --git a/packages/design/src/Form/PromptSegment/FormSummary/FormSummary.test.ts b/packages/design/src/config/view/FormSummary/FormSummary.test.ts
similarity index 100%
rename from packages/design/src/Form/PromptSegment/FormSummary/FormSummary.test.ts
rename to packages/design/src/config/view/FormSummary/FormSummary.test.ts
diff --git a/packages/design/src/config/view/FormSummary/index.tsx b/packages/design/src/config/view/FormSummary/index.tsx
new file mode 100644
index 00000000..27a61c4f
--- /dev/null
+++ b/packages/design/src/config/view/FormSummary/index.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Pattern, type FormSummaryPattern } from '@atj/forms';
+import { type FormElementComponent } from '../../../Form';
+
+const FormSummary: FormElementComponent<Pattern<FormSummaryPattern>> = ({
+  prompt,
+}) => {
+  return (
+    <>
+      <legend className="usa-legend usa-legend--large">{prompt.title}</legend>
+      <p>{prompt.description}</p>
+    </>
+  );
+};
+export default FormSummary;
diff --git a/packages/design/src/Form/PromptSegment/SubmissionConfirmation/SubmissionConfirmation.stories.tsx b/packages/design/src/config/view/SubmissionConfirmation/SubmissionConfirmation.stories.tsx
similarity index 94%
rename from packages/design/src/Form/PromptSegment/SubmissionConfirmation/SubmissionConfirmation.stories.tsx
rename to packages/design/src/config/view/SubmissionConfirmation/SubmissionConfirmation.stories.tsx
index 85ce0f60..b745e3d6 100644
--- a/packages/design/src/Form/PromptSegment/SubmissionConfirmation/SubmissionConfirmation.stories.tsx
+++ b/packages/design/src/config/view/SubmissionConfirmation/SubmissionConfirmation.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import SubmissionConfirmation, { type SubmissionConfirmationProps } from '.';
 
 export default {
-  title: 'prompts/SubmissionConfirmation',
+  title: 'patterns/SubmissionConfirmation',
   component: SubmissionConfirmation,
   tags: ['autodocs'],
 } satisfies Meta<typeof SubmissionConfirmation>;
diff --git a/packages/design/src/Form/PromptSegment/SubmissionConfirmation/index.tsx b/packages/design/src/config/view/SubmissionConfirmation/index.tsx
similarity index 66%
rename from packages/design/src/Form/PromptSegment/SubmissionConfirmation/index.tsx
rename to packages/design/src/config/view/SubmissionConfirmation/index.tsx
index 5e5dada9..effb7ff2 100644
--- a/packages/design/src/Form/PromptSegment/SubmissionConfirmation/index.tsx
+++ b/packages/design/src/config/view/SubmissionConfirmation/index.tsx
@@ -1,14 +1,11 @@
 import React from 'react';
 
-import { type SubmissionConfirmationPrompt } from '@atj/forms';
+import { Pattern, type SubmissionConfirmationPattern } from '@atj/forms';
+import { FormElementComponent } from '../../../Form';
 
-export type SubmissionConfirmationProps = {
-  prompt: SubmissionConfirmationPrompt;
-};
-
-export default function SubmissionConfirmation({
-  prompt,
-}: SubmissionConfirmationProps) {
+const SubmissionConfirmation: FormElementComponent<
+  Pattern<SubmissionConfirmationPattern>
+> = ({ prompt }) => {
   return (
     <>
       <legend className="usa-legend usa-legend--large">
@@ -34,4 +31,6 @@ export default function SubmissionConfirmation({
       </table>
     </>
   );
-}
+};
+
+export default SubmissionConfirmation;
diff --git a/packages/design/src/Form/PromptSegment/TextInput/TestInput.stories.tsx b/packages/design/src/config/view/TextInput/TestInput.stories.tsx
similarity index 79%
rename from packages/design/src/Form/PromptSegment/TextInput/TestInput.stories.tsx
rename to packages/design/src/config/view/TextInput/TestInput.stories.tsx
index 0704b410..63baff4c 100644
--- a/packages/design/src/Form/PromptSegment/TextInput/TestInput.stories.tsx
+++ b/packages/design/src/config/view/TextInput/TestInput.stories.tsx
@@ -3,9 +3,10 @@ import { FormProvider, useForm } from 'react-hook-form';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import TextInput, { TextInputProps } from '.';
+import { Pattern, TextInputPattern } from '@atj/forms';
 
 export default {
-  title: 'prompts/TextInput',
+  title: 'patterns/TextInput',
   component: TextInput,
   decorators: [
     (Story, args) => {
@@ -26,23 +27,25 @@ export default {
 export const Required = {
   args: {
     prompt: {
+      _elementId: '',
       type: 'text',
-      id: 'test-prompt',
+      inputId: 'test-prompt',
       value: '',
       label: 'Please enter your first name.',
       required: true,
-    },
+    } as Pattern<TextInputPattern>,
   } satisfies TextInputProps,
 } satisfies StoryObj<typeof TextInput>;
 
 export const NotRequired = {
   args: {
     prompt: {
+      _elementId: '',
       type: 'text',
-      id: 'test-prompt',
+      inputId: 'test-prompt',
       value: '',
       label: 'Please enter your first name.',
       required: false,
-    },
+    } as Pattern<TextInputPattern>,
   } satisfies TextInputProps,
 } satisfies StoryObj<typeof TextInput>;
diff --git a/packages/design/src/Form/PromptSegment/TextInput/TestInput.test.ts b/packages/design/src/config/view/TextInput/TestInput.test.ts
similarity index 100%
rename from packages/design/src/Form/PromptSegment/TextInput/TestInput.test.ts
rename to packages/design/src/config/view/TextInput/TestInput.test.ts
diff --git a/packages/design/src/Form/PromptSegment/TextInput/index.tsx b/packages/design/src/config/view/TextInput/index.tsx
similarity index 62%
rename from packages/design/src/Form/PromptSegment/TextInput/index.tsx
rename to packages/design/src/config/view/TextInput/index.tsx
index d7bd29cb..ee1ac4e0 100644
--- a/packages/design/src/Form/PromptSegment/TextInput/index.tsx
+++ b/packages/design/src/config/view/TextInput/index.tsx
@@ -2,14 +2,17 @@ import classNames from 'classnames';
 import React from 'react';
 import { useFormContext } from 'react-hook-form';
 
-import { type TextInputPrompt } from '@atj/forms';
+import { Pattern, type TextInputPattern } from '@atj/forms';
+import { type FormElementComponent } from '../../../Form';
 
-export type TextInputProps = { prompt: TextInputPrompt };
+export type TextInputProps = { prompt: Pattern<TextInputPattern> };
 
-export default function TextInput({ prompt }: TextInputProps) {
+const TextInput: FormElementComponent<Pattern<TextInputPattern>> = ({
+  prompt,
+}) => {
   const { register } = useFormContext();
   return (
-    <div className="usa-form-group" key={prompt.id}>
+    <div className="usa-form-group" key={prompt.inputId}>
       <div
         className={classNames('usa-form-group', {
           'usa-form-group--error': prompt.error,
@@ -26,7 +29,7 @@ export default function TextInput({ prompt }: TextInputProps) {
         {prompt.error && (
           <span
             className="usa-error-message"
-            id={`input-error-message-${prompt.id}`}
+            id={`input-error-message-${prompt.inputId}`}
             role="alert"
           >
             {prompt.error}
@@ -36,15 +39,17 @@ export default function TextInput({ prompt }: TextInputProps) {
           className={classNames('usa-input', {
             'usa-input--error': prompt.error,
           })}
-          id={`input-${prompt.id}`}
+          id={`input-${prompt.inputId}`}
           defaultValue={prompt.value}
-          {...register(prompt.id, {
+          {...register(prompt.inputId, {
             //required: prompt.required,
           })}
           type="text"
-          aria-describedby={`input-message-${prompt.id}`}
+          aria-describedby={`input-message-${prompt.inputId}`}
         />
       </div>
     </div>
   );
-}
+};
+
+export default TextInput;
diff --git a/packages/design/src/Form/PromptSegment/additional-fields.tsx b/packages/design/src/config/view/additional-fields.tsx
similarity index 100%
rename from packages/design/src/Form/PromptSegment/additional-fields.tsx
rename to packages/design/src/config/view/additional-fields.tsx
diff --git a/packages/design/src/config/view/index.tsx b/packages/design/src/config/view/index.tsx
new file mode 100644
index 00000000..86af50be
--- /dev/null
+++ b/packages/design/src/config/view/index.tsx
@@ -0,0 +1,12 @@
+import FormSummary from './FormSummary';
+import SubmissionConfirmation from './SubmissionConfirmation';
+import TextInput from './TextInput';
+
+import { type ComponentForPattern } from '../../Form';
+
+export const defaultFormElementComponents: ComponentForPattern = {
+  'form-summary': FormSummary,
+  sequence: SubmissionConfirmation,
+  'submission-confirmation': SubmissionConfirmation,
+  input: TextInput,
+};
diff --git a/packages/design/src/test-form.ts b/packages/design/src/test-form.ts
index fbd77103..3b2553a2 100644
--- a/packages/design/src/test-form.ts
+++ b/packages/design/src/test-form.ts
@@ -1,6 +1,9 @@
 import { createForm, createFormSession, defaultFormConfig } from '@atj/forms';
 
-import { defaultFormElementComponent } from './config';
+import {
+  defaultFormElementComponents,
+  defaultFormElementEditComponents,
+} from './config';
 
 export const createTestForm = () => {
   return createForm(
@@ -54,13 +57,21 @@ export const createTestFormConfig = () => {
 };
 
 export const createTestFormElementComponentMap = () => {
-  return defaultFormElementComponent;
+  return defaultFormElementComponents;
 };
 
 export const createTestFormContext = () => {
   return {
     config: defaultFormConfig,
-    components: defaultFormElementComponent,
+    components: defaultFormElementComponents,
+  };
+};
+
+export const createTestFormEditContext = () => {
+  return {
+    config: defaultFormConfig,
+    components: defaultFormElementComponents,
+    editComponents: defaultFormElementEditComponents,
   };
 };
 
diff --git a/packages/documents/src/document.ts b/packages/documents/src/document.ts
index 1f17eae6..fc305dd6 100644
--- a/packages/documents/src/document.ts
+++ b/packages/documents/src/document.ts
@@ -40,7 +40,7 @@ export const addDocumentFieldsToForm = (
   form: FormDefinition,
   fields: DocumentFieldMap
 ) => {
-  const elements: FormElement<any>[] = [];
+  const elements: FormElement[] = [];
   Object.entries(fields).map(([key, field]) => {
     if (field.type === 'CheckBox') {
       elements.push({
diff --git a/packages/forms/src/config/elements/input.ts b/packages/forms/src/config/elements/input.ts
index 4f128ae7..11df6ead 100644
--- a/packages/forms/src/config/elements/input.ts
+++ b/packages/forms/src/config/elements/input.ts
@@ -2,7 +2,7 @@ import * as z from 'zod';
 
 import { type FormElementConfig } from '..';
 import { type FormElement, validateElement } from '../../element';
-import { type PromptPart } from '../../prompt';
+import { type Pattern, type TextInputPattern } from '../../pattern';
 import { getFormSessionValue } from '../../session';
 import { safeZodParse } from '../../util/zod';
 
@@ -28,7 +28,7 @@ export const inputConfig: FormElementConfig<InputElement> = {
   getChildren() {
     return [];
   },
-  createPrompt(_, session, element, options): PromptPart[] {
+  createPrompt(_, session, element, options): Pattern[] {
     const extraAttributes: Record<string, any> = {};
     const sessionValue = getFormSessionValue(session, element.id);
     if (options.validate) {
@@ -39,13 +39,14 @@ export const inputConfig: FormElementConfig<InputElement> = {
     }
     return [
       {
-        type: 'text' as const,
-        id: element.id,
+        _elementId: element.id,
+        type: 'input',
+        inputId: element.id,
         value: sessionValue,
         label: element.data.text,
         required: element.data.required,
         ...extraAttributes,
-      },
+      } as Pattern<TextInputPattern>,
     ];
   },
 };
diff --git a/packages/forms/src/config/elements/sequence.ts b/packages/forms/src/config/elements/sequence.ts
index 9faa2bdf..0fc17e7d 100644
--- a/packages/forms/src/config/elements/sequence.ts
+++ b/packages/forms/src/config/elements/sequence.ts
@@ -2,7 +2,7 @@ import * as z from 'zod';
 
 import { type FormElementConfig } from '..';
 import { type FormElement, type FormElementId } from '../../element';
-import { type PromptPart, createPromptForElement } from '../../prompt';
+import { type Pattern, createPromptForElement } from '../../pattern';
 import { safeZodParse } from '../../util/zod';
 
 export type SequenceElement = FormElement<{
@@ -24,7 +24,7 @@ export const sequenceConfig: FormElementConfig<SequenceElement> = {
       (elementId: string) => elements[elementId]
     );
   },
-  createPrompt(config, session, element, options): PromptPart[] {
+  createPrompt(config, session, element, options): Pattern[] {
     return element.data.elements.flatMap((elementId: string) => {
       const element = session.form.elements[elementId];
       return createPromptForElement(config, session, element, options);
diff --git a/packages/forms/src/config/index.ts b/packages/forms/src/config/index.ts
index 3cf8bd49..e710daa3 100644
--- a/packages/forms/src/config/index.ts
+++ b/packages/forms/src/config/index.ts
@@ -3,21 +3,21 @@ import {
   type FormElementId,
   type ParseFormElementData,
 } from '../element';
-import { type CreatePrompt } from '../prompt';
+import { type CreatePrompt } from '../pattern';
 
 export { defaultFormConfig } from './config';
 
-export type FormElementConfig<ThisFormElement extends FormElement<any>> = {
+export type FormElementConfig<ThisFormElement extends FormElement> = {
   acceptsInput: boolean;
   initial: ThisFormElement['data'];
   parseData: ParseFormElementData<ThisFormElement>;
   getChildren: (
     element: ThisFormElement,
-    elements: Record<FormElementId, FormElement<any>>
-  ) => FormElement<any>[];
+    elements: Record<FormElementId, FormElement>
+  ) => FormElement[];
   createPrompt: CreatePrompt<ThisFormElement>;
 };
-export type FormConfig<T extends FormElement<any> = FormElement<any>> = {
+export type FormConfig<T extends FormElement = FormElement> = {
   elements: Record<string, FormElementConfig<T>>;
 };
 
diff --git a/packages/forms/src/element.ts b/packages/forms/src/element.ts
index 34eaaea0..1d706ee9 100644
--- a/packages/forms/src/element.ts
+++ b/packages/forms/src/element.ts
@@ -27,6 +27,10 @@ export type ParseFormElementData<T extends FormElement = FormElement> = (
   obj: string
 ) => Result<T['data']>;
 
+export const getFormElement: GetFormElement = (form, elementId) => {
+  return form.elements[elementId];
+};
+
 export const getFormElementMap = (elements: FormElement[]) => {
   return Object.fromEntries(
     elements.map(element => {
@@ -35,6 +39,13 @@ export const getFormElementMap = (elements: FormElement[]) => {
   );
 };
 
+export const getFormElements = (
+  form: FormDefinition,
+  elementIds: FormElementId[]
+) => {
+  return elementIds.map(elementId => getFormElement(form, elementId));
+};
+
 export const getFormElementConfig = (
   config: FormConfig,
   elementType: FormElement['type']
diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts
index 490c9c9d..90ec8e6a 100644
--- a/packages/forms/src/index.ts
+++ b/packages/forms/src/index.ts
@@ -13,7 +13,7 @@ import {
 export * from './config';
 export * from './documents';
 export * from './element';
-export * from './prompt';
+export * from './pattern';
 export * from './response';
 export * from './session';
 
@@ -50,7 +50,7 @@ type FormOutput = {
 export const createForm = (
   summary: FormSummary,
   initial: {
-    elements: FormElement<any>[];
+    elements: FormElement[];
     root: FormElementId;
   } = {
     elements: [
@@ -87,7 +87,7 @@ export const createFormSession = (form: FormDefinition): FormSession => {
     data: {
       errors: {},
       values: Object.fromEntries(
-        Object.values(form.elements).map(element => {
+        Object.values(form.elements).map((element, index) => {
           return [element.id, form.elements[element.id].data.initial];
         })
       ),
@@ -147,7 +147,7 @@ const addError = (
 
 export const addFormElements = (
   form: FormDefinition,
-  elements: FormElement<any>[],
+  elements: FormElement[],
   root?: FormElementId
 ) => {
   const formElementMap = getFormElementMap(elements);
@@ -160,7 +160,7 @@ export const addFormElements = (
 
 export const replaceFormElements = (
   form: FormDefinition,
-  elements: FormElement<any>[]
+  elements: FormElement[]
 ): FormDefinition => {
   return {
     ...form,
@@ -169,7 +169,7 @@ export const replaceFormElements = (
         acc[element.id] = element;
         return acc;
       },
-      {} as Record<FormElementId, FormElement<any>>
+      {} as Record<FormElementId, FormElement>
     ),
   };
 };
@@ -187,13 +187,32 @@ export const updateElements = (
   const children = resource.getChildren(root, newElements);
   targetElements[root.id] = root;
   children.forEach(child => (targetElements[child.id] = child));
-
   return {
     ...form,
     elements: targetElements,
   };
 };
 
+export const updateElement = (
+  config: FormConfig,
+  form: FormDefinition,
+  elementId: FormElementId,
+  data: FormElementMap
+): FormDefinition => {
+  if (form.elements[elementId] === undefined) {
+    console.error(`Element "${elementId}" does not exist on form.`);
+    return form;
+  }
+  const formElement = data[elementId];
+  return {
+    ...form,
+    elements: {
+      ...form.elements,
+      [elementId]: formElement,
+    },
+  };
+};
+
 export const addFormOutput = (form: FormDefinition, document: FormOutput) => {
   return {
     ...form,
diff --git a/packages/forms/src/prompt.ts b/packages/forms/src/pattern.ts
similarity index 63%
rename from packages/forms/src/prompt.ts
rename to packages/forms/src/pattern.ts
index f1250faa..0d6c52c6 100644
--- a/packages/forms/src/prompt.ts
+++ b/packages/forms/src/pattern.ts
@@ -1,34 +1,36 @@
-// For now, a prompt just returns an array of elements. This will likely need
-
-import { type FormConfig, type FormElement, getRootFormElement } from '..';
+import {
+  type FormConfig,
+  type FormElement,
+  type FormElementId,
+  getRootFormElement,
+} from '..';
 import { getFormElementConfig } from './element';
+import { type FormSession, nullSession, sessionIsComplete } from './session';
 
-import { type FormSession, sessionIsComplete } from './session';
-
-export type TextInputPrompt = {
-  type: 'text';
-  id: string;
+export type TextInputPattern = {
+  type: 'input';
+  inputId: string;
   value: string;
   label: string;
   required: boolean;
   error?: string;
 };
 
-export type FormSummaryPrompt = {
+export type FormSummaryPattern = {
   type: 'form-summary';
   title: string;
   description: string;
 };
 
-export type SubmissionConfirmationPrompt = {
+export type SubmissionConfirmationPattern = {
   type: 'submission-confirmation';
   table: { label: string; value: string }[];
 };
 
-export type PromptPart =
-  | FormSummaryPrompt
-  | TextInputPrompt
-  | SubmissionConfirmationPrompt;
+export type Pattern<T = {}> = {
+  _elementId: FormElementId;
+  type: string;
+} & T;
 
 export type SubmitAction = {
   type: 'submit';
@@ -38,7 +40,7 @@ export type PromptAction = SubmitAction;
 
 export type Prompt = {
   actions: PromptAction[];
-  parts: PromptPart[];
+  parts: Pattern[];
 };
 
 export const createPrompt = (
@@ -51,6 +53,7 @@ export const createPrompt = (
       actions: [],
       parts: [
         {
+          _elementId: 'submission-confirmation',
           type: 'submission-confirmation',
           table: Object.entries(session.data.values).map(
             ([elementId, value]) => {
@@ -60,16 +63,17 @@ export const createPrompt = (
               };
             }
           ),
-        },
+        } as Pattern<SubmissionConfirmationPattern>,
       ],
     };
   }
-  const parts: PromptPart[] = [
+  const parts: Pattern[] = [
     {
+      _elementId: 'form-summary',
       type: 'form-summary',
       title: session.form.summary.title,
       description: session.form.summary.description,
-    },
+    } as Pattern<FormSummaryPattern>,
   ];
   const root = getRootFormElement(session.form);
   parts.push(...createPromptForElement(config, session, root, options));
@@ -89,9 +93,9 @@ export type CreatePrompt<T> = (
   session: FormSession,
   element: T,
   options: { validate: boolean }
-) => PromptPart[];
+) => Pattern[];
 
-export const createPromptForElement: CreatePrompt<FormElement<any>> = (
+export const createPromptForElement: CreatePrompt<FormElement> = (
   config,
   session,
   element,
@@ -104,3 +108,19 @@ export const createPromptForElement: CreatePrompt<FormElement<any>> = (
 export const isPromptAction = (prompt: Prompt, action: string) => {
   return prompt.actions.find(a => a.type === action);
 };
+
+export const createNullPrompt = ({
+  config,
+  element,
+}: {
+  config: FormConfig;
+  element: FormElement;
+}): Prompt => {
+  const formElementConfig = getFormElementConfig(config, element.type);
+  return {
+    parts: formElementConfig.createPrompt(config, nullSession, element, {
+      validate: false,
+    }),
+    actions: [],
+  };
+};
diff --git a/packages/forms/src/response.ts b/packages/forms/src/response.ts
index 17d093e2..6e4aa4d5 100644
--- a/packages/forms/src/response.ts
+++ b/packages/forms/src/response.ts
@@ -7,9 +7,8 @@ import {
   getFormElementConfig,
   validateElement,
 } from '.';
-import { type PromptAction, createPrompt, isPromptAction } from './prompt';
+import { type PromptAction, createPrompt, isPromptAction } from './pattern';
 import { type FormSession, updateSession } from './session';
-import { isValid } from 'zod';
 
 export type PromptResponse = {
   action: PromptAction['type'];
diff --git a/packages/forms/src/session.ts b/packages/forms/src/session.ts
index 05a0c11e..f59a7596 100644
--- a/packages/forms/src/session.ts
+++ b/packages/forms/src/session.ts
@@ -4,6 +4,7 @@ import {
   getFormElementConfig,
   validateElement,
 } from '.';
+import { SequenceElement } from './config/elements/sequence';
 import {
   type FormElementId,
   type FormElementValue,
@@ -20,6 +21,34 @@ export type FormSession = {
   form: FormDefinition;
 };
 
+export const nullSession: FormSession = {
+  data: {
+    errors: {},
+    values: {
+      root: [],
+    },
+  },
+  form: {
+    elements: {
+      root: {
+        id: 'root',
+        type: 'sequence',
+        required: false,
+        default: {
+          elements: [],
+        },
+        data: {},
+      } as SequenceElement,
+    },
+    root: 'root',
+    summary: {
+      title: '',
+      description: '',
+    },
+    outputs: [],
+  },
+};
+
 export const createFormSession = (form: FormDefinition): FormSession => {
   return {
     data: {
diff --git a/packages/forms/tests/two-field-form.test.ts b/packages/forms/tests/two-field-form.test.ts
index e8f1a78a..4b0cf98e 100644
--- a/packages/forms/tests/two-field-form.test.ts
+++ b/packages/forms/tests/two-field-form.test.ts
@@ -1,10 +1,8 @@
 import { describe, expect, test } from 'vitest';
 
 import * as forms from '../src';
-import { createPrompt } from '../src';
-import { SequenceElement } from '../src/config/elements/sequence';
 
-const elements: forms.FormElement<any>[] = [
+const elements: forms.FormElement[] = [
   {
     type: 'sequence',
     id: 'root',