refactor(editor): extract slider component (#12210)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a new slider component for line width selection, providing a more interactive and streamlined UI.
  - Added support for using the slider component across relevant panels.
- **Improvements**
  - Simplified the line width selection panel for easier use and improved maintainability.
  - Enhanced event handling to prevent dropdowns from closing when interacting with the panel.
- **Bug Fixes**
  - Improved event propagation control within the line styles panel.
- **Chores**
  - Updated package exports to include the new slider component.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/components/src/edgeless-line-styles-panel/line-styles-panel.ts

@@ -1,6 +1,7 @@
 import { LineWidth, StrokeStyle } from '@blocksuite/affine-model';
+import { WithDisposable } from '@blocksuite/global/lit';
 import { BanIcon, DashLineIcon, StraightLineIcon } from '@blocksuite/icons/lit';
-import { html, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -33,7 +34,13 @@ const LINE_STYLE_LIST = [
   },
 ];
 
-export class EdgelessLineStylesPanel extends LitElement {
+export class EdgelessLineStylesPanel extends WithDisposable(LitElement) {
+  static override styles = css`
+    edgeless-line-width-panel {
+      flex: 1;
+    }
+  `;
+
   select(detail: LineDetailType) {
     this.dispatchEvent(
       new CustomEvent('select', {
@@ -47,10 +54,9 @@ export class EdgelessLineStylesPanel extends LitElement {
 
   override render() {
     const { lineSize, lineStyle, lineStyles } = this;
-
     return html`
       <edgeless-line-width-panel
-        ?disabled="${lineStyle === StrokeStyle.None}"
+        .disabled=${lineStyle === StrokeStyle.None}
         .selectedSize=${lineSize}
         @select=${(e: CustomEvent<LineWidth>) => {
           e.stopPropagation();