feat: unify phase one creation flow

src/components/unified-creation/UnifiedCreationPage.tsx

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+
+import type { UnifiedCreationSpec } from './unifiedCreationSpecs';
+
+type UnifiedCreationPageProps = {
+  spec: UnifiedCreationSpec;
+  children: ReactNode;
+};
+
+export function UnifiedCreationPage({
+  spec,
+  children,
+}: UnifiedCreationPageProps) {
+  return (
+    <div
+      className="unified-creation-page flex h-full min-h-0 flex-col"
+      data-play-id={spec.playId}
+      data-field-kinds={spec.fields.map((field) => field.kind).join(',')}
+      data-workspace-stage={spec.workspaceStage}
+      data-generation-stage={spec.generationStage}
+      data-result-stage={spec.resultStage}
+    >
+      <div className="sr-only" data-testid="unified-creation-spec">
+        <h1>{spec.title}</h1>
+        <ul>
+          {spec.fields.map((field) => (
+            <li
+              key={field.id}
+              data-testid="unified-creation-field"
+              data-field-id={field.id}
+              data-field-kind={field.kind}
+              data-required={field.required ? 'true' : 'false'}
+            >
+              {field.label}
+            </li>
+          ))}
+        </ul>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export default UnifiedCreationPage;