add Pattern editor basic layout.

src/components/PatternPreview.tsx

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+
+const PatternPreview: FC = () => {
+  return (
+    <div>
+      <canvas />
+    </div>
+  );
+};
+
+export default PatternPreview;

src/pages/PatternEditor.module.css

@@ -0,0 +1,10 @@
+@layer pages {
+  .pattern_editor_layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    min-width: 0;
+    align-items: stretch;
+    gap: calc(var(--spacing) * 4);
+  }
+}

src/pages/PatternEditor.tsx

@@ -1,7 +1,12 @@
 import { FC } from 'react';
+import styles from './PatternEditor.module.css';
 
 const PatternEditor: FC = () => {
-  return <div className="workspace"></div>;
+  return (
+    <div className="workspace vertical">
+      <div className={styles.pattern_editor_layout}></div>
+    </div>
+  );
 };
 
 export default PatternEditor;