prepare Pattern Editor page header part.

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

@@ -9,5 +9,8 @@
     border-radius: calc(var(--border-radius) * 2);
     color: var(--color-light-on-surface);
     background-color: var(--color-surface-container);
+    .content {
+      max-width: 300px;
+    }
   }
 }

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

@@ -0,0 +1,19 @@
+import { Icon } from '@iconify/react/dist/iconify.js';
+import { FC } from 'react';
+import EditableContent from '../../components/EditableContent';
+import styles from './PatternHeader.module.css';
+
+const PatternHeader: FC = () => {
+  return (
+    <div className={styles.pattern_header}>
+      <EditableContent as="h3" placeholder="Unnamed Pattern" additionalClassName={styles.content} />
+      <div className="spacer" />
+      <button className="tonal">
+        <Icon icon="material-symbols-light:close" />
+        Close Edit
+      </button>
+    </div>
+  );
+};
+
+export default PatternHeader;