extract PatternPreview component styles.

src/components/PatternPreview.module.css

@@ -1,15 +1,10 @@
 @layer components {
   .pattern_preview {
-    flex-basis: 140px;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
     gap: calc(var(--spacing) * 2);
-    color: var(--color-on-surface);
-    background-color: var(--color-surface-container);
-    padding: calc(var(--spacing)) calc(var(--spacing) * 2);
-    border-radius: calc(var(--border-radius) * 2);
     .canvas_wrapper {
       flex: 1 0;
       canvas {

src/page-components/pattern-library/PatternDetail.tsx

@@ -15,7 +15,13 @@ const EmptyPromption: FC = () => {
 };
 
 const Detail: FC<{ pattern: Pattern }> = ({ pattern }) => {
-  return <div className={styles.pattern_detail}></div>;
+  return (
+    <div className={styles.pattern_detail}>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  );
 };
 
 const PatternDetail: FC = () => {

src/pages/PatternEditor.module.css

@@ -7,4 +7,11 @@
     align-items: stretch;
     gap: calc(var(--spacing) * 4);
   }
+  .pattern_preview {
+    flex-basis: 140px;
+    color: var(--color-on-surface);
+    background-color: var(--color-surface-container);
+    padding: calc(var(--spacing)) calc(var(--spacing) * 2);
+    border-radius: calc(var(--border-radius) * 2);
+  }
 }

src/pages/PatternEditor.tsx

@@ -13,8 +13,10 @@ const PatternEditor: FC = () => {
         <PatternOverview />
         <PulseAttributes />
       </div>
+      <div className={styles.pattern_preview}>
         <PatternPreview />
       </div>
+    </div>
   );
 };