prepare Pattern overview part layout.

src/page-components/pattern-editor/PatternOverview.module.css

@@ -0,0 +1,19 @@
+@layer pages {
+  .pattern_overview {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: calc(var(--spacing));
+    padding: calc(var(--spacing) * 2) calc(var(--spacing));
+    border-radius: calc(var(--border-radius) * 2);
+    color: var(--color-on-surface);
+    background-color: var(--color-surface-container);
+  }
+  .attribute_row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+  }
+}

src/page-components/pattern-editor/PatternOverview.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import Switch from '../../components/Switch';
+import styles from './PatternOverview.module.css';
+import PulseList from './PulseList';
+
+const PatternOverview: FC = () => {
+  return (
+    <div className={styles.pattern_overview}>
+      <div className={styles.attribute_row}>
+        <label>Smooth Repeat</label>
+        <Switch />
+      </div>
+      <PulseList />
+    </div>
+  );
+};
+
+export default PatternOverview;

src/page-components/pattern-editor/PulseList.module.css

@@ -0,0 +1,20 @@
+@layer page {
+  .pulse_tools {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+  }
+  .pulses {
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    flex: 1;
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block-end: calc(var(--spacing));
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+}

src/page-components/pattern-editor/PulseList.tsx

@@ -0,0 +1,22 @@
+import { Icon } from '@iconify/react/dist/iconify.js';
+import { FC } from 'react';
+import { ScrollArea } from '../../components/ScrollArea';
+import styles from './PulseList.module.css';
+
+const PulseList: FC = () => {
+  return (
+    <>
+      <div className={styles.pulse_tools}>
+        <button className="text">
+          <Icon icon="material-symbols-light:add" />
+          <span>Add Pulse</span>
+        </button>
+      </div>
+      <div className={styles.pulses}>
+        <ScrollArea enableY></ScrollArea>
+      </div>
+    </>
+  );
+};
+
+export default PulseList;