From ef46cecbe3f3fcf6b00720f148e710a5d1fc56c0 Mon Sep 17 00:00:00 2001
From: Bobby Powers <bobbypowers@gmail.com>
Date: Thu, 29 Jan 2026 18:48:16 -0800
Subject: [PATCH 1/5] format

---
 src/diagram/ErrorDetails.tsx            |   4 +-
 src/diagram/LineChart.tsx               |  47 ++--
 src/diagram/ModelPropertiesDrawer.tsx   |   6 +-
 src/diagram/VariableDetails.tsx         |  11 +-
 src/diagram/components/Autocomplete.tsx | 260 +++++++++--------
 src/diagram/components/Button.tsx       | 109 ++++----
 src/diagram/components/Drawer.tsx       | 206 +++++++-------
 src/diagram/components/IconButton.tsx   |  86 +++---
 src/diagram/components/Snackbar.tsx     | 198 +++++++------
 src/diagram/components/SpeedDial.tsx    | 274 +++++++++---------
 src/diagram/components/SvgIcon.tsx      |  58 ++--
 src/diagram/components/Tabs.tsx         | 154 +++++------
 src/diagram/components/TextField.tsx    | 352 ++++++++++++------------
 src/diagram/components/icons.tsx        | 192 ++++++-------
 src/diagram/tests/chart-utils.test.ts   |   4 +-
 src/diagram/tests/drawer.test.tsx       |  53 +++-
 src/diagram/tests/snackbar.test.tsx     |  11 +-
 src/diagram/tests/speed-dial.test.tsx   |  89 ++----
 src/diagram/tests/text-field.test.tsx   |  22 +-
 src/engine2/tests/api.test.ts           |   5 +-
 src/server/tests/project-route.test.ts  |   7 +-
 21 files changed, 1040 insertions(+), 1108 deletions(-)

diff --git a/src/diagram/ErrorDetails.tsx b/src/diagram/ErrorDetails.tsx
index 0e02a532..f225a99a 100644
--- a/src/diagram/ErrorDetails.tsx
+++ b/src/diagram/ErrorDetails.tsx
@@ -30,9 +30,7 @@ export class ErrorDetails extends React.PureComponent<ErrorDetailsProps> {
         !modelErrors.isEmpty()
       )
     ) {
-      errors.push(
-        <div className={styles.list}>simulation error: {errorCodeDescription(simError.code)}</div>,
-      );
+      errors.push(<div className={styles.list}>simulation error: {errorCodeDescription(simError.code)}</div>);
     }
     if (!modelErrors.isEmpty()) {
       for (const err of modelErrors) {
diff --git a/src/diagram/LineChart.tsx b/src/diagram/LineChart.tsx
index 647241ef..1e9b08cf 100644
--- a/src/diagram/LineChart.tsx
+++ b/src/diagram/LineChart.tsx
@@ -128,7 +128,11 @@ export class LineChart extends React.PureComponent<LineChartProps, LineChartStat
     return { margin, plotWidth, plotHeight, xScale, yScale, yInvert, xTicks, yTicks, xMin, xMax };
   }
 
-  private buildPath(points: ReadonlyArray<{ x: number; y: number }>, xScale: (v: number) => number, yScale: (v: number) => number): string {
+  private buildPath(
+    points: ReadonlyArray<{ x: number; y: number }>,
+    xScale: (v: number) => number,
+    yScale: (v: number) => number,
+  ): string {
     const parts: string[] = [];
     let started = false;
     for (const p of points) {
@@ -320,13 +324,7 @@ export class LineChart extends React.PureComponent<LineChartProps, LineChartStat
                     stroke="#666"
                     strokeWidth={1}
                   />
-                  <text
-                    x={x}
-                    y={margin.top + plotHeight + 18}
-                    textAnchor="middle"
-                    fontSize={11}
-                    fill="#666"
-                  >
+                  <text x={x} y={margin.top + plotHeight + 18} textAnchor="middle" fontSize={11} fill="#666">
                     {formatTickLabel(tick)}
                   </text>
                 </g>
@@ -348,22 +346,8 @@ export class LineChart extends React.PureComponent<LineChartProps, LineChartStat
               const y = margin.top + yScale(tick);
               return (
                 <g key={i}>
-                  <line
-                    x1={margin.left - 5}
-                    y1={y}
-                    x2={margin.left}
-                    y2={y}
-                    stroke="#666"
-                    strokeWidth={1}
-                  />
-                  <text
-                    x={margin.left - 8}
-                    y={y}
-                    textAnchor="end"
-                    dominantBaseline="middle"
-                    fontSize={11}
-                    fill="#666"
-                  >
+                  <line x1={margin.left - 5} y1={y} x2={margin.left} y2={y} stroke="#666" strokeWidth={1} />
+                  <text x={margin.left - 8} y={y} textAnchor="end" dominantBaseline="middle" fontSize={11} fill="#666">
                     {formatTickLabel(tick)}
                   </text>
                 </g>
@@ -372,7 +356,11 @@ export class LineChart extends React.PureComponent<LineChartProps, LineChartStat
           </g>
 
           {/* Series lines */}
-          <g className="series-lines" clipPath={`url(#${this.clipId})`} transform={`translate(${margin.left},${margin.top})`}>
+          <g
+            className="series-lines"
+            clipPath={`url(#${this.clipId})`}
+            transform={`translate(${margin.left},${margin.top})`}
+          >
             {series.map((s, i) => (
               <path
                 key={i}
@@ -428,11 +416,10 @@ export class LineChart extends React.PureComponent<LineChartProps, LineChartStat
             <div className={styles.tooltipHeader}>{formatTickLabel(tooltip.dataX)}</div>
             {tooltip.seriesValues.map((sv, i) => (
               <div key={i} className={styles.tooltipRow}>
-                <span
-                  className={styles.tooltipSwatch}
-                  style={{ backgroundColor: sv.color }}
-                />
-                <span>{sv.name}: {fmt(sv.value)}</span>
+                <span className={styles.tooltipSwatch} style={{ backgroundColor: sv.color }} />
+                <span>
+                  {sv.name}: {fmt(sv.value)}
+                </span>
               </div>
             ))}
           </div>
diff --git a/src/diagram/ModelPropertiesDrawer.tsx b/src/diagram/ModelPropertiesDrawer.tsx
index 3056c306..a04b0eee 100644
--- a/src/diagram/ModelPropertiesDrawer.tsx
+++ b/src/diagram/ModelPropertiesDrawer.tsx
@@ -42,11 +42,7 @@ export class ModelPropertiesDrawer extends React.PureComponent<ModelPropertiesDr
   render() {
     const { modelName, open } = this.props;
     return (
-      <Drawer
-        open={open}
-        onOpen={this.handleOpen}
-        onClose={this.handleClose}
-      >
+      <Drawer open={open} onOpen={this.handleOpen} onClose={this.handleClose}>
         <div className={styles.content}>
           <div>
             <div className={styles.modelApp}>
diff --git a/src/diagram/VariableDetails.tsx b/src/diagram/VariableDetails.tsx
index faf54a7e..a6a53b9a 100644
--- a/src/diagram/VariableDetails.tsx
+++ b/src/diagram/VariableDetails.tsx
@@ -269,9 +269,7 @@ export class VariableDetails extends React.PureComponent<VariableDetailsProps, V
       const errorList: Array<React.ReactElement> = [];
       if (errors) {
         errors.forEach((error) => {
-          errorList.push(
-            <div className={styles.errorList}>error: {errorCodeDescription(error.code)}</div>,
-          );
+          errorList.push(<div className={styles.errorList}>error: {errorCodeDescription(error.code)}</div>);
         });
       }
       if (unitErrors) {
@@ -288,12 +286,7 @@ export class VariableDetails extends React.PureComponent<VariableDetailsProps, V
       chartOrErrors = errorList;
     } else {
       chartOrErrors = (
-        <LineChart
-          height={300}
-          series={chartSeries}
-          yDomain={[yMin, yMax]}
-          tooltipFormatter={this.formatValue}
-        />
+        <LineChart height={300} series={chartSeries} yDomain={[yMin, yMax]} tooltipFormatter={this.formatValue} />
       );
     }
 
diff --git a/src/diagram/components/Autocomplete.tsx b/src/diagram/components/Autocomplete.tsx
index e7b675a3..3af224e4 100644
--- a/src/diagram/components/Autocomplete.tsx
+++ b/src/diagram/components/Autocomplete.tsx
@@ -1,133 +1,127 @@
-// Copyright 2025 The Simlin Authors. All rights reserved.
-// Use of this source code is governed by the Apache License,
-// Version 2.0, that can be found in the LICENSE file.
-
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-
-import { useCombobox } from 'downshift';
-import clsx from 'clsx';
-
-import styles from './Autocomplete.module.css';
-
-interface AutocompleteProps {
-  key?: string;
-  value?: string | null;
-  defaultValue?: string;
-  onChange: (event: any, newValue: string | null) => void;
-  clearOnEscape?: boolean;
-  options: string[];
-  renderInput: (params: any) => React.ReactNode;
-}
-
-function itemToString(item: string | null): string {
-  return item || '';
-}
-
-export default function Autocomplete(props: AutocompleteProps) {
-  const { value, onChange, clearOnEscape, options, renderInput } = props;
-
-  const [inputValue, setInputValue] = React.useState(value || '');
-  const wrapperRef = React.useRef<HTMLDivElement>(null);
-  const [dropdownPosition, setDropdownPosition] = React.useState<{
-    top: number;
-    left: number;
-    width: number;
-  } | null>(null);
-
-  // Sync inputValue when value prop changes externally
-  React.useEffect(() => {
-    setInputValue(value || '');
-  }, [value]);
-
-  const filteredOptions = React.useMemo(() => {
-    if (!inputValue) return options;
-    const lower = inputValue.toLowerCase();
-    return options.filter((opt) => opt.toLowerCase().includes(lower));
-  }, [options, inputValue]);
-
-  const {
-    isOpen,
-    getInputProps,
-    getMenuProps,
-    getItemProps,
-    highlightedIndex,
-  } = useCombobox({
-    items: filteredOptions,
-    itemToString,
-    inputValue,
-    selectedItem: value || null,
-    onInputValueChange: ({ inputValue: newInputValue }) => {
-      setInputValue(newInputValue || '');
-    },
-    onSelectedItemChange: ({ selectedItem }) => {
-      onChange(null, selectedItem || null);
-    },
-    stateReducer: (state, actionAndChanges) => {
-      const { type, changes } = actionAndChanges;
-      if (clearOnEscape && type === useCombobox.stateChangeTypes.InputKeyDownEscape) {
-        return {
-          ...changes,
-          selectedItem: null,
-          inputValue: '',
-        };
-      }
-      return changes;
-    },
-  });
-
-  React.useEffect(() => {
-    if (isOpen && wrapperRef.current) {
-      const rect = wrapperRef.current.getBoundingClientRect();
-      setDropdownPosition({
-        top: rect.bottom + window.scrollY,
-        left: rect.left + window.scrollX,
-        width: rect.width,
-      });
-    }
-  }, [isOpen]);
-
-  const inputProps = getInputProps();
-  const params = {
-    InputProps: {
-      disableUnderline: false,
-      ref: wrapperRef,
-    },
-    inputProps,
-  };
-
-  const menuProps = getMenuProps();
-
-  const listbox =
-    isOpen && filteredOptions.length > 0 && dropdownPosition ? (
-      <ul
-        {...menuProps}
-        className={styles.listbox}
-        style={{
-          position: 'absolute',
-          top: dropdownPosition.top,
-          left: dropdownPosition.left,
-          width: dropdownPosition.width,
-        }}
-      >
-        {filteredOptions.map((item, index) => (
-          <li
-            key={item}
-            {...getItemProps({ item, index })}
-            className={clsx(styles.option, highlightedIndex === index && styles.optionHighlighted)}
-          >
-            {item}
-          </li>
-        ))}
-      </ul>
-    ) : (
-      <ul {...menuProps} style={{ display: 'none' }} />
-    );
-
-  return (
-    <div className={styles.wrapper}>
-      {renderInput(params)}
-      {ReactDOM.createPortal(listbox, document.body)}
-    </div>
-  );
-}
+// Copyright 2025 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+
+import { useCombobox } from 'downshift';
+import clsx from 'clsx';
+
+import styles from './Autocomplete.module.css';
+
+interface AutocompleteProps {
+  key?: string;
+  value?: string | null;
+  defaultValue?: string;
+  onChange: (event: any, newValue: string | null) => void;
+  clearOnEscape?: boolean;
+  options: string[];
+  renderInput: (params: any) => React.ReactNode;
+}
+
+function itemToString(item: string | null): string {
+  return item || '';
+}
+
+export default function Autocomplete(props: AutocompleteProps) {
+  const { value, onChange, clearOnEscape, options, renderInput } = props;
+
+  const [inputValue, setInputValue] = React.useState(value || '');
+  const wrapperRef = React.useRef<HTMLDivElement>(null);
+  const [dropdownPosition, setDropdownPosition] = React.useState<{
+    top: number;
+    left: number;
+    width: number;
+  } | null>(null);
+
+  // Sync inputValue when value prop changes externally
+  React.useEffect(() => {
+    setInputValue(value || '');
+  }, [value]);
+
+  const filteredOptions = React.useMemo(() => {
+    if (!inputValue) return options;
+    const lower = inputValue.toLowerCase();
+    return options.filter((opt) => opt.toLowerCase().includes(lower));
+  }, [options, inputValue]);
+
+  const { isOpen, getInputProps, getMenuProps, getItemProps, highlightedIndex } = useCombobox({
+    items: filteredOptions,
+    itemToString,
+    inputValue,
+    selectedItem: value || null,
+    onInputValueChange: ({ inputValue: newInputValue }) => {
+      setInputValue(newInputValue || '');
+    },
+    onSelectedItemChange: ({ selectedItem }) => {
+      onChange(null, selectedItem || null);
+    },
+    stateReducer: (state, actionAndChanges) => {
+      const { type, changes } = actionAndChanges;
+      if (clearOnEscape && type === useCombobox.stateChangeTypes.InputKeyDownEscape) {
+        return {
+          ...changes,
+          selectedItem: null,
+          inputValue: '',
+        };
+      }
+      return changes;
+    },
+  });
+
+  React.useEffect(() => {
+    if (isOpen && wrapperRef.current) {
+      const rect = wrapperRef.current.getBoundingClientRect();
+      setDropdownPosition({
+        top: rect.bottom + window.scrollY,
+        left: rect.left + window.scrollX,
+        width: rect.width,
+      });
+    }
+  }, [isOpen]);
+
+  const inputProps = getInputProps();
+  const params = {
+    InputProps: {
+      disableUnderline: false,
+      ref: wrapperRef,
+    },
+    inputProps,
+  };
+
+  const menuProps = getMenuProps();
+
+  const listbox =
+    isOpen && filteredOptions.length > 0 && dropdownPosition ? (
+      <ul
+        {...menuProps}
+        className={styles.listbox}
+        style={{
+          position: 'absolute',
+          top: dropdownPosition.top,
+          left: dropdownPosition.left,
+          width: dropdownPosition.width,
+        }}
+      >
+        {filteredOptions.map((item, index) => (
+          <li
+            key={item}
+            {...getItemProps({ item, index })}
+            className={clsx(styles.option, highlightedIndex === index && styles.optionHighlighted)}
+          >
+            {item}
+          </li>
+        ))}
+      </ul>
+    ) : (
+      <ul {...menuProps} style={{ display: 'none' }} />
+    );
+
+  return (
+    <div className={styles.wrapper}>
+      {renderInput(params)}
+      {ReactDOM.createPortal(listbox, document.body)}
+    </div>
+  );
+}
diff --git a/src/diagram/components/Button.tsx b/src/diagram/components/Button.tsx
index 7eb0a4d9..3282ef44 100644
--- a/src/diagram/components/Button.tsx
+++ b/src/diagram/components/Button.tsx
@@ -1,50 +1,59 @@
-// Copyright 2025 The Simlin Authors. All rights reserved.
-// Use of this source code is governed by the Apache License,
-// Version 2.0, that can be found in the LICENSE file.
-
-import * as React from 'react';
-
-import clsx from 'clsx';
-
-import styles from './Button.module.css';
-
-interface ButtonProps {
-  variant?: 'text' | 'contained';
-  color?: 'primary' | 'secondary';
-  size?: 'small' | 'medium' | 'large';
-  disabled?: boolean;
-  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  className?: string;
-  startIcon?: React.ReactNode;
-  children?: React.ReactNode;
-}
-
-export default class Button extends React.PureComponent<ButtonProps> {
-  render() {
-    const { variant = 'text', color = 'primary', size = 'medium', disabled, onClick, className, startIcon, children } = this.props;
-
-    const sizeClass = size === 'small' ? styles.sizeSmall : size === 'large' ? styles.sizeLarge : styles.sizeMedium;
-
-    let variantColorClass: string;
-    let disabledClass: string | undefined;
-    if (variant === 'contained') {
-      variantColorClass = color === 'secondary' ? styles.containedSecondary : styles.containedPrimary;
-      disabledClass = disabled ? styles.disabledContained : undefined;
-    } else {
-      variantColorClass = color === 'secondary' ? styles.textSecondary : styles.textPrimary;
-      disabledClass = disabled ? styles.disabledText : undefined;
-    }
-
-    return (
-      <button
-        className={clsx(styles.button, sizeClass, variantColorClass, disabledClass, className)}
-        disabled={disabled}
-        onClick={onClick}
-        type="button"
-      >
-        {startIcon && <span className={styles.startIcon}>{startIcon}</span>}
-        {children}
-      </button>
-    );
-  }
-}
+// Copyright 2025 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+
+import clsx from 'clsx';
+
+import styles from './Button.module.css';
+
+interface ButtonProps {
+  variant?: 'text' | 'contained';
+  color?: 'primary' | 'secondary';
+  size?: 'small' | 'medium' | 'large';
+  disabled?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  className?: string;
+  startIcon?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+export default class Button extends React.PureComponent<ButtonProps> {
+  render() {
+    const {
+      variant = 'text',
+      color = 'primary',
+      size = 'medium',
+      disabled,
+      onClick,
+      className,
+      startIcon,
+      children,
+    } = this.props;
+
+    const sizeClass = size === 'small' ? styles.sizeSmall : size === 'large' ? styles.sizeLarge : styles.sizeMedium;
+
+    let variantColorClass: string;
+    let disabledClass: string | undefined;
+    if (variant === 'contained') {
+      variantColorClass = color === 'secondary' ? styles.containedSecondary : styles.containedPrimary;
+      disabledClass = disabled ? styles.disabledContained : undefined;
+    } else {
+      variantColorClass = color === 'secondary' ? styles.textSecondary : styles.textPrimary;
+      disabledClass = disabled ? styles.disabledText : undefined;
+    }
+
+    return (
+      <button
+        className={clsx(styles.button, sizeClass, variantColorClass, disabledClass, className)}
+        disabled={disabled}
+        onClick={onClick}
+        type="button"
+      >
+        {startIcon && <span className={styles.startIcon}>{startIcon}</span>}
+        {children}
+      </button>
+    );
+  }
+}
diff --git a/src/diagram/components/Drawer.tsx b/src/diagram/components/Drawer.tsx
index 823798c9..4df9ca92 100644
--- a/src/diagram/components/Drawer.tsx
+++ b/src/diagram/components/Drawer.tsx
@@ -1,103 +1,103 @@
-// Copyright 2025 The Simlin Authors. All rights reserved.
-// Use of this source code is governed by the Apache License,
-// Version 2.0, that can be found in the LICENSE file.
-
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-
-import clsx from 'clsx';
-
-import styles from './Drawer.module.css';
-
-interface DrawerProps {
-  open: boolean;
-  onOpen?: () => void;
-  onClose: () => void;
-  children?: React.ReactNode;
-}
-
-export default class Drawer extends React.PureComponent<DrawerProps> {
-  private panelRef = React.createRef<HTMLDivElement>();
-  private previousActiveElement: Element | null = null;
-
-  componentDidMount() {
-    document.addEventListener('keydown', this.handleKeyDown);
-  }
-
-  componentDidUpdate(prevProps: DrawerProps) {
-    if (this.props.open && !prevProps.open) {
-      // Drawer just opened - save current focus and focus the panel
-      this.previousActiveElement = document.activeElement;
-      this.panelRef.current?.focus();
-    } else if (!this.props.open && prevProps.open) {
-      // Drawer just closed - restore focus
-      if (this.previousActiveElement instanceof HTMLElement) {
-        this.previousActiveElement.focus();
-      }
-      this.previousActiveElement = null;
-    }
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.handleKeyDown);
-  }
-
-  handleKeyDown = (event: KeyboardEvent) => {
-    if (event.key === 'Escape' && this.props.open) {
-      this.props.onClose();
-    }
-
-    // Focus trap: when Tab is pressed and drawer is open, keep focus within the panel
-    if (event.key === 'Tab' && this.props.open && this.panelRef.current) {
-      const panel = this.panelRef.current;
-      const focusableElements = panel.querySelectorAll<HTMLElement>(
-        'a, button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable]',
-      );
-
-      if (focusableElements.length === 0) {
-        event.preventDefault();
-        return;
-      }
-
-      const firstElement = focusableElements[0];
-      const lastElement = focusableElements[focusableElements.length - 1];
-
-      if (event.shiftKey && document.activeElement === firstElement) {
-        event.preventDefault();
-        lastElement.focus();
-      } else if (!event.shiftKey && document.activeElement === lastElement) {
-        event.preventDefault();
-        firstElement.focus();
-      }
-    }
-  };
-
-  handleBackdropClick = () => {
-    this.props.onClose();
-  };
-
-  render() {
-    const { open, children } = this.props;
-
-    const content = (
-      <>
-        <div
-          className={clsx(styles.backdrop, !open && styles.backdropHidden)}
-          onClick={this.handleBackdropClick}
-          aria-hidden="true"
-        />
-        <div
-          ref={this.panelRef}
-          className={clsx(styles.panel, !open && styles.panelHidden)}
-          role="dialog"
-          aria-modal="true"
-          tabIndex={-1}
-        >
-          {children}
-        </div>
-      </>
-    );
-
-    return ReactDOM.createPortal(content, document.body);
-  }
-}
+// Copyright 2025 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+
+import clsx from 'clsx';
+
+import styles from './Drawer.module.css';
+
+interface DrawerProps {
+  open: boolean;
+  onOpen?: () => void;
+  onClose: () => void;
+  children?: React.ReactNode;
+}
+
+export default class Drawer extends React.PureComponent<DrawerProps> {
+  private panelRef = React.createRef<HTMLDivElement>();
+  private previousActiveElement: Element | null = null;
+
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  componentDidUpdate(prevProps: DrawerProps) {
+    if (this.props.open && !prevProps.open) {
+      // Drawer just opened - save current focus and focus the panel
+      this.previousActiveElement = document.activeElement;
+      this.panelRef.current?.focus();
+    } else if (!this.props.open && prevProps.open) {
+      // Drawer just closed - restore focus
+      if (this.previousActiveElement instanceof HTMLElement) {
+        this.previousActiveElement.focus();
+      }
+      this.previousActiveElement = null;
+    }
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
+  }
+
+  handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape' && this.props.open) {
+      this.props.onClose();
+    }
+
+    // Focus trap: when Tab is pressed and drawer is open, keep focus within the panel
+    if (event.key === 'Tab' && this.props.open && this.panelRef.current) {
+      const panel = this.panelRef.current;
+      const focusableElements = panel.querySelectorAll<HTMLElement>(
+        'a, button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable]',
+      );
+
+      if (focusableElements.length === 0) {
+        event.preventDefault();
+        return;
+      }
+
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+
+      if (event.shiftKey && document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+      } else if (!event.shiftKey && document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    }
+  };
+
+  handleBackdropClick = () => {
+    this.props.onClose();
+  };
+
+  render() {
+    const { open, children } = this.props;
+
+    const content = (
+      <>
+        <div
+          className={clsx(styles.backdrop, !open && styles.backdropHidden)}
+          onClick={this.handleBackdropClick}
+          aria-hidden="true"
+        />
+        <div
+          ref={this.panelRef}
+          className={clsx(styles.panel, !open && styles.panelHidden)}
+          role="dialog"
+          aria-modal="true"
+          tabIndex={-1}
+        >
+          {children}
+        </div>
+      </>
+    );
+
+    return ReactDOM.createPortal(content, document.body);
+  }
+}
diff --git a/src/diagram/components/IconButton.tsx b/src/diagram/components/IconButton.tsx
index b125b973..1d98c6fc 100644
--- a/src/diagram/components/IconButton.tsx
+++ b/src/diagram/components/IconButton.tsx
@@ -1,43 +1,43 @@
-// Copyright 2025 The Simlin Authors. All rights reserved.
-// Use of this source code is governed by the Apache License,
-// Version 2.0, that can be found in the LICENSE file.
-
-import * as React from 'react';
-
-import clsx from 'clsx';
-
-import styles from './IconButton.module.css';
-
-interface IconButtonProps {
-  color?: 'default' | 'inherit';
-  disabled?: boolean;
-  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  className?: string;
-  'aria-label'?: string;
-  style?: React.CSSProperties;
-  children?: React.ReactNode;
-}
-
-export default class IconButton extends React.PureComponent<IconButtonProps> {
-  render() {
-    const { color, disabled, onClick, className, style, children, ...rest } = this.props;
-
-    return (
-      <button
-        className={clsx(
-          styles.iconButton,
-          color === 'inherit' && styles.colorInherit,
-          disabled && styles.disabled,
-          className,
-        )}
-        disabled={disabled}
-        onClick={onClick}
-        style={style}
-        type="button"
-        {...rest}
-      >
-        {children}
-      </button>
-    );
-  }
-}
+// Copyright 2025 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+
+import clsx from 'clsx';
+
+import styles from './IconButton.module.css';
+
+interface IconButtonProps {
+  color?: 'default' | 'inherit';
+  disabled?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  className?: string;
+  'aria-label'?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export default class IconButton extends React.PureComponent<IconButtonProps> {
+  render() {
+    const { color, disabled, onClick, className, style, children, ...rest } = this.props;
+
+    return (
+      <button
+        className={clsx(
+          styles.iconButton,
+          color === 'inherit' && styles.colorInherit,
+          disabled && styles.disabled,
+          className,
+        )}
+        disabled={disabled}
+        onClick={onClick}
+        style={style}
+        type="button"
+        {...rest}
+      >
+        {children}
+      </button>
+    );
+  }
+}
diff --git a/src/diagram/components/Snackbar.tsx b/src/diagram/components/Snackbar.tsx
index d3f81bad..3aac4ddd 100644
--- a/src/diagram/components/Snackbar.tsx
+++ b/src/diagram/components/Snackbar.tsx
@@ -1,101 +1,97 @@
-// Copyright 2025 The Simlin Authors. All rights reserved.
-// Use of this source code is governed by the Apache License,
-// Version 2.0, that can be found in the LICENSE file.
-
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-
-import clsx from 'clsx';
-
-import styles from './Snackbar.module.css';
-
-interface SnackbarProps {
-  anchorOrigin?: { vertical: string; horizontal: string };
-  open: boolean;
-  autoHideDuration?: number;
-  onClose?: () => void;
-  children?: React.ReactNode;
-}
-
-export default class Snackbar extends React.PureComponent<SnackbarProps> {
-  timerHandle: ReturnType<typeof setTimeout> | undefined;
-
-  componentDidMount() {
-    // Start timer if mounted with open={true}
-    if (this.props.open) {
-      this.startTimer();
-    }
-  }
-
-  componentDidUpdate(prevProps: SnackbarProps) {
-    // Only restart timer when open or autoHideDuration changes
-    const openChanged = this.props.open !== prevProps.open;
-    const durationChanged = this.props.autoHideDuration !== prevProps.autoHideDuration;
-
-    if (openChanged || durationChanged) {
-      this.clearTimer();
-      if (this.props.open) {
-        this.startTimer();
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    this.clearTimer();
-  }
-
-  startTimer() {
-    if (this.props.autoHideDuration && this.props.onClose) {
-      this.timerHandle = setTimeout(this.props.onClose, this.props.autoHideDuration);
-    }
-  }
-
-  clearTimer() {
-    if (this.timerHandle !== undefined) {
-      window.clearTimeout(this.timerHandle);
-      this.timerHandle = undefined;
-    }
-  }
-
-  render() {
-    const { open, children } = this.props;
-
-    const content = (
-      <div className={clsx(styles.snackbar, !open && styles.snackbarHidden)}>
-        {children}
-      </div>
-    );
-
-    return ReactDOM.createPortal(content, document.body);
-  }
-}
-
-interface SnackbarContentProps {
-  className?: string;
-  message?: React.ReactNode;
-  action?: React.ReactNode;
-  'aria-describedby'?: string;
-  [key: string]: unknown;
-}
-
-export class SnackbarContent extends React.PureComponent<SnackbarContentProps> {
-  render() {
-    const { className, message, action, 'aria-describedby': ariaDescribedby, ...rest } = this.props;
-
-    // filter out non-DOM props that may be spread from parent destructuring
-    const domRest: Record<string, unknown> = {};
-    for (const [key, val] of Object.entries(rest)) {
-      if (key === 'onClose' || key === 'variant') {
-        continue;
-      }
-      domRest[key] = val;
-    }
-
-    return (
-      <div className={clsx(styles.snackbarContent, className)} aria-describedby={ariaDescribedby} {...domRest}>
-        <div className={styles.snackbarContentMessage}>{message}</div>
-        {action && <div className={styles.snackbarContentAction}>{action}</div>}
-      </div>
-    );
-  }
-}
+// Copyright 2025 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+
+import clsx from 'clsx';
+
+import styles from './Snackbar.module.css';
+
+interface SnackbarProps {
+  anchorOrigin?: { vertical: string; horizontal: string };
+  open: boolean;
+  autoHideDuration?: number;
+  onClose?: () => void;
+  children?: React.ReactNode;
+}
+
+export default class Snackbar extends React.PureComponent<SnackbarProps> {
+  timerHandle: ReturnType<typeof setTimeout> | undefined;
+
+  componentDidMount() {
+    // Start timer if mounted with open={true}
+    if (this.props.open) {
+      this.startTimer();
+    }
+  }
+
+  componentDidUpdate(prevProps: SnackbarProps) {
+    // Only restart timer when open or autoHideDuration changes
+    const openChanged = this.props.open !== prevProps.open;
+    const durationChanged = this.props.autoHideDuration !== prevProps.autoHideDuration;
+
+    if (openChanged || durationChanged) {
+      this.clearTimer();
+      if (this.props.open) {
+        this.startTimer();
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    this.clearTimer();
+  }
+
+  startTimer() {
+    if (this.props.autoHideDuration && this.props.onClose) {
+      this.timerHandle = setTimeout(this.props.onClose, this.props.autoHideDuration);
+    }
+  }
+
+  clearTimer() {
+    if (this.timerHandle !== undefined) {
+      window.clearTimeout(this.timerHandle);
+      this.timerHandle = undefined;
+    }
+  }
+
+  render() {
+    const { open, children } = this.props;
+
+    const content = <div className={clsx(styles.snackbar, !open && styles.snackbarHidden)}>{children}</div>;
+
+    return ReactDOM.createPortal(content, document.body);
+  }
+}
+
+interface SnackbarContentProps {
+  className?: string;
+  message?: React.ReactNode;
+  action?: React.ReactNode;
+  'aria-describedby'?: string;
+  [key: string]: unknown;
+}
+
+export class SnackbarContent extends React.PureComponent<SnackbarContentProps> {
+  render() {
+    const { className, message, action, 'aria-describedby': ariaDescribedby, ...rest } = this.props;
+
+    // filter out non-DOM props that may be spread from parent destructuring
+    const domRest: Record<string, unknown> = {};
+    for (const [key, val] of Object.entries(rest)) {
+      if (key === 'onClose' || key === 'variant') {
+        continue;
+      }
+      domRest[key] = val;
+    }
+
+    return (
+      <div className={clsx(styles.snackbarContent, className)} aria-describedby={ariaDescribedby} {...domRest}>
+        <div className={styles.snackbarContentMessage}>{message}</div>
+        {action && <div className={styles.snackbarContentAction}>{action}</div>}
+      </div>
+    );
+  }
+}
diff --git a/src/diagram/components/SpeedDial.tsx b/src/diagram/components/SpeedDial.tsx
index 4bc5e4c2..85964e54 100644
--- a/src/diagram/components/SpeedDial.tsx
+++ b/src/diagram/components/SpeedDial.tsx
@@ -1,138 +1,136 @@
-// Copyright 2025 The Simlin Authors. All rights reserved.
-// Use of this source code is governed by the Apache License,
-// Version 2.0, that can be found in the LICENSE file.
-
-import * as React from 'react';
-
-import clsx from 'clsx';
-
-import styles from './SpeedDial.module.css';
-
-export type CloseReason = 'toggle' | 'blur' | 'mouseLeave' | 'escapeKeyDown' | 'actionClick';
-
-interface SpeedDialProps {
-  ariaLabel: string;
-  className?: string;
-  hidden?: boolean;
-  icon: React.ReactNode;
-  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  onClose?: (event: React.SyntheticEvent, reason: CloseReason) => void;
-  open: boolean;
-  children?: React.ReactNode;
-}
-
-export default class SpeedDial extends React.PureComponent<SpeedDialProps> {
-  handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {
-    this.props.onClose?.(event, 'mouseLeave');
-  };
-
-  handleBlur = (event: React.FocusEvent<HTMLButtonElement>) => {
-    this.props.onClose?.(event, 'blur');
-  };
-
-  handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (event.key === 'Escape') {
-      this.props.onClose?.(event, 'escapeKeyDown');
-    }
-  };
-
-  handleActionClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    this.props.onClose?.(event, 'actionClick');
-  };
-
-  render() {
-    const { ariaLabel, className, hidden, icon, onClick, open, children } = this.props;
-
-    const enrichedIcon = React.isValidElement<SpeedDialIconProps>(icon)
-      ? React.cloneElement(icon, { open })
-      : icon;
-
-    // Inject onActionClick into children so they can close the dial
-    const enrichedChildren = React.Children.map(children, (child) => {
-      if (React.isValidElement<SpeedDialActionProps>(child)) {
-        return React.cloneElement(child, {
-          _onActionClick: this.handleActionClick,
-        });
-      }
-      return child;
-    });
-
-    return (
-      <div
-        className={clsx(styles.speedDial, hidden && styles.speedDialHidden, className)}
-        onMouseLeave={this.handleMouseLeave}
-        onKeyDown={this.handleKeyDown}
-        role="presentation"
-      >
-        <button
-          className={styles.fab}
-          aria-label={ariaLabel}
-          aria-expanded={open}
-          onClick={onClick}
-          onBlur={this.handleBlur}
-          type="button"
-        >
-          {enrichedIcon}
-        </button>
-        {open && (
-          <div className={styles.actions} role="menu">
-            {enrichedChildren}
-          </div>
-        )}
-      </div>
-    );
-  }
-}
-
-interface SpeedDialActionProps {
-  icon: React.ReactNode;
-  title: string;
-  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  className?: string;
-  /** @internal Injected by SpeedDial parent via cloneElement */
-  _onActionClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-}
-
-export class SpeedDialAction extends React.PureComponent<SpeedDialActionProps> {
-  handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    const { onClick, _onActionClick } = this.props;
-
-    onClick?.(event);
-    _onActionClick?.(event);
-  };
-
-  render() {
-    const { icon, title, className } = this.props;
-    return (
-      <div className={styles.action} role="menuitem">
-        <button
-          className={clsx(styles.actionButton, styles.actionButtonOpen, className)}
-          onClick={this.handleClick}
-          aria-label={title}
-          type="button"
-        >
-          {icon}
-        </button>
-        <span className={clsx(styles.actionLabel, styles.actionLabelOpen)}>{title}</span>
-      </div>
-    );
-  }
-}
-
-interface SpeedDialIconProps {
-  icon: React.ReactNode;
-  openIcon?: React.ReactNode;
-  open?: boolean;
-}
-
-export class SpeedDialIcon extends React.PureComponent<SpeedDialIconProps> {
-  render() {
-    const { icon, openIcon, open } = this.props;
-
-    if (openIcon) {
-      return <span className={styles.iconWrapper}>{open ? openIcon : icon}</span>;
-    }
-
-    return <span className={clsx(styles.iconWrapper, open && styles.iconWrapperOpen)}>{icon}</span>;
-  }
-}
+// Copyright 2025 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+
+import clsx from 'clsx';
+
+import styles from './SpeedDial.module.css';
+
+export type CloseReason = 'toggle' | 'blur' | 'mouseLeave' | 'escapeKeyDown' | 'actionClick';
+
+interface SpeedDialProps {
+  ariaLabel: string;
+  className?: string;
+  hidden?: boolean;
+  icon: React.ReactNode;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onClose?: (event: React.SyntheticEvent, reason: CloseReason) => void;
+  open: boolean;
+  children?: React.ReactNode;
+}
+
+export default class SpeedDial extends React.PureComponent<SpeedDialProps> {
+  handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {
+    this.props.onClose?.(event, 'mouseLeave');
+  };
+
+  handleBlur = (event: React.FocusEvent<HTMLButtonElement>) => {
+    this.props.onClose?.(event, 'blur');
+  };
+
+  handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Escape') {
+      this.props.onClose?.(event, 'escapeKeyDown');
+    }
+  };
+
+  handleActionClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    this.props.onClose?.(event, 'actionClick');
+  };
+
+  render() {
+    const { ariaLabel, className, hidden, icon, onClick, open, children } = this.props;
+
+    const enrichedIcon = React.isValidElement<SpeedDialIconProps>(icon) ? React.cloneElement(icon, { open }) : icon;
+
+    // Inject onActionClick into children so they can close the dial
+    const enrichedChildren = React.Children.map(children, (child) => {
+      if (React.isValidElement<SpeedDialActionProps>(child)) {
+        return React.cloneElement(child, {
+          _onActionClick: this.handleActionClick,
+        });
+      }
+      return child;
+    });
+
+    return (
+      <div
+        className={clsx(styles.speedDial, hidden && styles.speedDialHidden, className)}
+        onMouseLeave={this.handleMouseLeave}
+        onKeyDown={this.handleKeyDown}
+        role="presentation"
+      >
+        <button
+          className={styles.fab}
+          aria-label={ariaLabel}
+          aria-expanded={open}
+          onClick={onClick}
+          onBlur={this.handleBlur}
+          type="button"
+        >
+          {enrichedIcon}
+        </button>
+        {open && (
+          <div className={styles.actions} role="menu">
+            {enrichedChildren}
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+interface SpeedDialActionProps {
+  icon: React.ReactNode;
+  title: string;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  className?: string;
+  /** @internal Injected by SpeedDial parent via cloneElement */
+  _onActionClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export class SpeedDialAction extends React.PureComponent<SpeedDialActionProps> {
+  handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    const { onClick, _onActionClick } = this.props;
+
+    onClick?.(event);
+    _onActionClick?.(event);
+  };
+
+  render() {
+    const { icon, title, className } = this.props;
+    return (
+      <div className={styles.action} role="menuitem">
+        <button
+          className={clsx(styles.actionButton, styles.actionButtonOpen, className)}
+          onClick={this.handleClick}
+          aria-label={title}
+          type="button"
+        >
+          {icon}
+        </button>
+        <span className={clsx(styles.actionLabel, styles.actionLabelOpen)}>{title}</span>
+      </div>
+    );
+  }
+}
+
+interface SpeedDialIconProps {
+  icon: React.ReactNode;
+  openIcon?: React.ReactNode;
+  open?: boolean;
+}
+
+export class SpeedDialIcon extends React.PureComponent<SpeedDialIconProps> {
+  render() {
+    const { icon, openIcon, open } = this.props;
+
+    if (openIcon) {
+      return <span className={styles.iconWrapper}>{open ? openIcon : icon}</span>;
+    }
+
+    return <span className={clsx(styles.iconWrapper, open && styles.iconWrapperOpen)}>{icon}</span>;
+  }
+}
diff --git a/src/diagram/components/SvgIcon.tsx b/src/diagram/components/SvgIcon.tsx
index dc9be632..39bdbcf9 100644
--- a/src/diagram/components/SvgIcon.tsx
+++ b/src/diagram/components/SvgIcon.tsx
@@ -1,32 +1,26 @@
-// Copyright 2025 The Simlin Authors. All rights reserved.
-// Use of this source code is governed by the Apache License,
-// Version 2.0, that can be found in the LICENSE file.
-
-import * as React from 'react';
-
-import clsx from 'clsx';
-
-import styles from './SvgIcon.module.css';
-
-export interface SvgIconProps extends Omit<React.SVGProps<SVGSVGElement>, 'ref'> {
-  viewBox?: string;
-  className?: string;
-  children?: React.ReactNode;
-}
-
-export default class SvgIcon extends React.PureComponent<SvgIconProps> {
-  render() {
-    const { viewBox = '0 0 24 24', className, children, ...rest } = this.props;
-    return (
-      <svg
-        className={clsx(styles.svgIcon, className)}
-        viewBox={viewBox}
-        focusable="false"
-        aria-hidden="true"
-        {...rest}
-      >
-        {children}
-      </svg>
-    );
-  }
-}
+// Copyright 2025 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+
+import clsx from 'clsx';
+
+import styles from './SvgIcon.module.css';
+
+export interface SvgIconProps extends Omit<React.SVGProps<SVGSVGElement>, 'ref'> {
+  viewBox?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export default class SvgIcon extends React.PureComponent<SvgIconProps> {
+  render() {
+    const { viewBox = '0 0 24 24', className, children, ...rest } = this.props;
+    return (
+      <svg className={clsx(styles.svgIcon, className)} viewBox={viewBox} focusable="false" aria-hidden="true" {...rest}>
+        {children}
+      </svg>
+    );
+  }
+}
diff --git a/src/diagram/components/Tabs.tsx b/src/diagram/components/Tabs.tsx
index d06bb082..7055a757 100644
--- a/src/diagram/components/Tabs.tsx
+++ b/src/diagram/components/Tabs.tsx
@@ -1,77 +1,77 @@
-// Copyright 2025 The Simlin Authors. All rights reserved.
-// Use of this source code is governed by the Apache License,
-// Version 2.0, that can be found in the LICENSE file.
-
-import * as React from 'react';
-
-import * as RadixTabs from '@radix-ui/react-tabs';
-import clsx from 'clsx';
-
-import styles from './Tabs.module.css';
-
-// Context for passing tab index from parent to child
-const TabIndexContext = React.createContext<string>('0');
-
-interface TabsProps {
-  className?: string;
-  variant?: 'fullWidth';
-  value: number;
-  indicatorColor?: string;
-  textColor?: string;
-  onChange: (event: React.SyntheticEvent, newValue: number) => void;
-  'aria-label'?: string;
-  children?: React.ReactNode;
-}
-
-interface TabProps {
-  label: string;
-}
-
-export class Tab extends React.PureComponent<TabProps> {
-  static contextType = TabIndexContext;
-  declare context: React.ContextType<typeof TabIndexContext>;
-
-  render() {
-    const { label } = this.props;
-    const tabValue = this.context;
-    return (
-      <RadixTabs.Trigger value={tabValue} className={styles.tab}>
-        {label}
-      </RadixTabs.Trigger>
-    );
-  }
-}
-
-export class Tabs extends React.PureComponent<TabsProps> {
-  handleValueChange = (newValue: string) => {
-    const syntheticEvent = {} as React.SyntheticEvent;
-    this.props.onChange(syntheticEvent, Number(newValue));
-  };
-
-  render() {
-    const { className, value, children, ...rest } = this.props;
-    const ariaLabel = rest['aria-label'];
-
-    // Count children (non-null) and wrap each with context provider
-    const childArray = React.Children.toArray(children).filter(Boolean);
-    const tabCount = childArray.length;
-
-    const enrichedChildren = childArray.map((child, index) => (
-      <TabIndexContext.Provider key={index} value={String(index)}>
-        {child}
-      </TabIndexContext.Provider>
-    ));
-
-    const indicatorLeft = tabCount > 0 ? `${(value / tabCount) * 100}%` : '0%';
-    const indicatorWidth = tabCount > 0 ? `${(1 / tabCount) * 100}%` : '0%';
-
-    return (
-      <RadixTabs.Root value={String(value)} onValueChange={this.handleValueChange}>
-        <RadixTabs.List className={clsx(styles.tabsList, className)} aria-label={ariaLabel}>
-          {enrichedChildren}
-          <div className={styles.indicator} style={{ left: indicatorLeft, width: indicatorWidth }} />
-        </RadixTabs.List>
-      </RadixTabs.Root>
-    );
-  }
-}
+// Copyright 2025 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+
+import * as RadixTabs from '@radix-ui/react-tabs';
+import clsx from 'clsx';
+
+import styles from './Tabs.module.css';
+
+// Context for passing tab index from parent to child
+const TabIndexContext = React.createContext<string>('0');
+
+interface TabsProps {
+  className?: string;
+  variant?: 'fullWidth';
+  value: number;
+  indicatorColor?: string;
+  textColor?: string;
+  onChange: (event: React.SyntheticEvent, newValue: number) => void;
+  'aria-label'?: string;
+  children?: React.ReactNode;
+}
+
+interface TabProps {
+  label: string;
+}
+
+export class Tab extends React.PureComponent<TabProps> {
+  static contextType = TabIndexContext;
+  declare context: React.ContextType<typeof TabIndexContext>;
+
+  render() {
+    const { label } = this.props;
+    const tabValue = this.context;
+    return (
+      <RadixTabs.Trigger value={tabValue} className={styles.tab}>
+        {label}
+      </RadixTabs.Trigger>
+    );
+  }
+}
+
+export class Tabs extends React.PureComponent<TabsProps> {
+  handleValueChange = (newValue: string) => {
+    const syntheticEvent = {} as React.SyntheticEvent;
+    this.props.onChange(syntheticEvent, Number(newValue));
+  };
+
+  render() {
+    const { className, value, children, ...rest } = this.props;
+    const ariaLabel = rest['aria-label'];
+
+    // Count children (non-null) and wrap each with context provider
+    const childArray = React.Children.toArray(children).filter(Boolean);
+    const tabCount = childArray.length;
+
+    const enrichedChildren = childArray.map((child, index) => (
+      <TabIndexContext.Provider key={index} value={String(index)}>
+        {child}
+      </TabIndexContext.Provider>
+    ));
+
+    const indicatorLeft = tabCount > 0 ? `${(value / tabCount) * 100}%` : '0%';
+    const indicatorWidth = tabCount > 0 ? `${(1 / tabCount) * 100}%` : '0%';
+
+    return (
+      <RadixTabs.Root value={String(value)} onValueChange={this.handleValueChange}>
+        <RadixTabs.List className={clsx(styles.tabsList, className)} aria-label={ariaLabel}>
+          {enrichedChildren}
+          <div className={styles.indicator} style={{ left: indicatorLeft, width: indicatorWidth }} />
+        </RadixTabs.List>
+      </RadixTabs.Root>
+    );
+  }
+}
diff --git a/src/diagram/components/TextField.tsx b/src/diagram/components/TextField.tsx
index aaa2b526..0ce204be 100644
--- a/src/diagram/components/TextField.tsx
+++ b/src/diagram/components/TextField.tsx
@@ -1,176 +1,176 @@
-// Copyright 2025 The Simlin Authors. All rights reserved.
-// Use of this source code is governed by the Apache License,
-// Version 2.0, that can be found in the LICENSE file.
-
-import * as React from 'react';
-
-import clsx from 'clsx';
-
-import styles from './TextField.module.css';
-
-let textFieldIdCounter = 0;
-
-interface TextFieldProps {
-  id?: string;
-  variant?: 'outlined' | 'standard';
-  label?: string;
-  value?: string | number;
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  type?: string;
-  margin?: 'none' | 'normal';
-  fullWidth?: boolean;
-  error?: boolean;
-  placeholder?: string;
-  className?: string;
-  InputProps?: {
-    disableUnderline?: boolean;
-    ref?: React.Ref<HTMLDivElement>;
-  };
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
-}
-
-interface TextFieldState {
-  isFocused: boolean;
-  generatedId: string;
-}
-
-export default class TextField extends React.PureComponent<TextFieldProps, TextFieldState> {
-  constructor(props: TextFieldProps) {
-    super(props);
-    this.state = {
-      isFocused: false,
-      generatedId: `textfield-${++textFieldIdCounter}`,
-    };
-  }
-
-  handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
-    this.setState({ isFocused: true });
-    // Chain with any external handler from inputProps
-    this.props.inputProps?.onFocus?.(event);
-  };
-
-  handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
-    this.setState({ isFocused: false });
-    // Chain with any external handler from inputProps
-    this.props.inputProps?.onBlur?.(event);
-  };
-
-  render() {
-    const {
-      id,
-      variant = 'outlined',
-      label,
-      value,
-      onChange,
-      type,
-      margin,
-      fullWidth,
-      error,
-      placeholder,
-      className,
-      InputProps,
-      inputProps,
-      ...rest
-    } = this.props;
-    const { isFocused, generatedId } = this.state;
-
-    const inputId = id || generatedId;
-    const hasValue = value !== undefined && value !== null && value !== '';
-    const shouldShrink = isFocused || hasValue;
-
-    // Extract onFocus/onBlur from inputProps since we chain them in our handlers
-    const { onFocus: _onFocus, onBlur: _onBlur, ...restInputProps } = inputProps || {};
-
-    const rootClasses = clsx(
-      styles.root,
-      fullWidth && styles.fullWidth,
-      margin === 'normal' && styles.marginNormal,
-      className,
-    );
-
-    if (variant === 'standard') {
-      const disableUnderline = InputProps?.disableUnderline;
-      const wrapperRef = InputProps?.ref;
-
-      const wrapperClasses = clsx(
-        styles.standardWrapper,
-        disableUnderline && styles.standardNoUnderline,
-        isFocused && !disableUnderline && styles.standardFocused,
-        error && !disableUnderline && styles.standardError,
-      );
-
-      const labelClasses = label
-        ? clsx(
-            styles.standardLabel,
-            shouldShrink && styles.standardLabelShrunk,
-            isFocused && styles.standardLabelFocused,
-            error && styles.standardLabelError,
-          )
-        : undefined;
-
-      return (
-        <div className={rootClasses}>
-          <div className={wrapperClasses} ref={wrapperRef}>
-            {label && (
-              <label htmlFor={inputId} className={labelClasses}>
-                {label}
-              </label>
-            )}
-            <input
-              id={inputId}
-              className={styles.standardInput}
-              value={value}
-              onChange={onChange}
-              type={type}
-              placeholder={placeholder}
-              onFocus={this.handleFocus}
-              onBlur={this.handleBlur}
-              {...restInputProps}
-              {...rest}
-            />
-          </div>
-        </div>
-      );
-    }
-
-    // outlined variant
-    const wrapperClasses = clsx(
-      styles.outlinedWrapper,
-      isFocused && styles.outlinedFocused,
-      error && styles.outlinedError,
-    );
-
-    const labelClasses = label
-      ? clsx(
-          styles.outlinedLabel,
-          shouldShrink && styles.outlinedLabelShrunk,
-          isFocused && styles.outlinedLabelFocused,
-          error && styles.outlinedLabelError,
-        )
-      : undefined;
-
-    return (
-      <div className={rootClasses}>
-        <div className={wrapperClasses}>
-          {label && (
-            <label htmlFor={inputId} className={labelClasses}>
-              {label}
-            </label>
-          )}
-          <input
-            id={inputId}
-            className={styles.outlinedInput}
-            value={value}
-            onChange={onChange}
-            type={type}
-            placeholder={placeholder}
-            onFocus={this.handleFocus}
-            onBlur={this.handleBlur}
-            {...restInputProps}
-            {...rest}
-          />
-        </div>
-      </div>
-    );
-  }
-}
+// Copyright 2025 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+
+import clsx from 'clsx';
+
+import styles from './TextField.module.css';
+
+let textFieldIdCounter = 0;
+
+interface TextFieldProps {
+  id?: string;
+  variant?: 'outlined' | 'standard';
+  label?: string;
+  value?: string | number;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  type?: string;
+  margin?: 'none' | 'normal';
+  fullWidth?: boolean;
+  error?: boolean;
+  placeholder?: string;
+  className?: string;
+  InputProps?: {
+    disableUnderline?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+  };
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+}
+
+interface TextFieldState {
+  isFocused: boolean;
+  generatedId: string;
+}
+
+export default class TextField extends React.PureComponent<TextFieldProps, TextFieldState> {
+  constructor(props: TextFieldProps) {
+    super(props);
+    this.state = {
+      isFocused: false,
+      generatedId: `textfield-${++textFieldIdCounter}`,
+    };
+  }
+
+  handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
+    this.setState({ isFocused: true });
+    // Chain with any external handler from inputProps
+    this.props.inputProps?.onFocus?.(event);
+  };
+
+  handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    this.setState({ isFocused: false });
+    // Chain with any external handler from inputProps
+    this.props.inputProps?.onBlur?.(event);
+  };
+
+  render() {
+    const {
+      id,
+      variant = 'outlined',
+      label,
+      value,
+      onChange,
+      type,
+      margin,
+      fullWidth,
+      error,
+      placeholder,
+      className,
+      InputProps,
+      inputProps,
+      ...rest
+    } = this.props;
+    const { isFocused, generatedId } = this.state;
+
+    const inputId = id || generatedId;
+    const hasValue = value !== undefined && value !== null && value !== '';
+    const shouldShrink = isFocused || hasValue;
+
+    // Extract onFocus/onBlur from inputProps since we chain them in our handlers
+    const { onFocus: _onFocus, onBlur: _onBlur, ...restInputProps } = inputProps || {};
+
+    const rootClasses = clsx(
+      styles.root,
+      fullWidth && styles.fullWidth,
+      margin === 'normal' && styles.marginNormal,
+      className,
+    );
+
+    if (variant === 'standard') {
+      const disableUnderline = InputProps?.disableUnderline;
+      const wrapperRef = InputProps?.ref;
+
+      const wrapperClasses = clsx(
+        styles.standardWrapper,
+        disableUnderline && styles.standardNoUnderline,
+        isFocused && !disableUnderline && styles.standardFocused,
+        error && !disableUnderline && styles.standardError,
+      );
+
+      const labelClasses = label
+        ? clsx(
+            styles.standardLabel,
+            shouldShrink && styles.standardLabelShrunk,
+            isFocused && styles.standardLabelFocused,
+            error && styles.standardLabelError,
+          )
+        : undefined;
+
+      return (
+        <div className={rootClasses}>
+          <div className={wrapperClasses} ref={wrapperRef}>
+            {label && (
+              <label htmlFor={inputId} className={labelClasses}>
+                {label}
+              </label>
+            )}
+            <input
+              id={inputId}
+              className={styles.standardInput}
+              value={value}
+              onChange={onChange}
+              type={type}
+              placeholder={placeholder}
+              onFocus={this.handleFocus}
+              onBlur={this.handleBlur}
+              {...restInputProps}
+              {...rest}
+            />
+          </div>
+        </div>
+      );
+    }
+
+    // outlined variant
+    const wrapperClasses = clsx(
+      styles.outlinedWrapper,
+      isFocused && styles.outlinedFocused,
+      error && styles.outlinedError,
+    );
+
+    const labelClasses = label
+      ? clsx(
+          styles.outlinedLabel,
+          shouldShrink && styles.outlinedLabelShrunk,
+          isFocused && styles.outlinedLabelFocused,
+          error && styles.outlinedLabelError,
+        )
+      : undefined;
+
+    return (
+      <div className={rootClasses}>
+        <div className={wrapperClasses}>
+          {label && (
+            <label htmlFor={inputId} className={labelClasses}>
+              {label}
+            </label>
+          )}
+          <input
+            id={inputId}
+            className={styles.outlinedInput}
+            value={value}
+            onChange={onChange}
+            type={type}
+            placeholder={placeholder}
+            onFocus={this.handleFocus}
+            onBlur={this.handleBlur}
+            {...restInputProps}
+            {...rest}
+          />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/diagram/components/icons.tsx b/src/diagram/components/icons.tsx
index 3342fedc..8891aec3 100644
--- a/src/diagram/components/icons.tsx
+++ b/src/diagram/components/icons.tsx
@@ -1,96 +1,96 @@
-// Copyright 2025 The Simlin Authors. All rights reserved.
-// Use of this source code is governed by the Apache License,
-// Version 2.0, that can be found in the LICENSE file.
-
-import * as React from 'react';
-
-import SvgIcon, { type SvgIconProps } from './SvgIcon';
-
-type IconProps = SvgIconProps;
-
-export const ClearIcon = (props: IconProps) => (
-  <SvgIcon {...props}>
-    <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
-  </SvgIcon>
-);
-
-export const CloseIcon = ClearIcon;
-
-export const EditIcon = (props: IconProps) => (
-  <SvgIcon {...props}>
-    <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z" />
-  </SvgIcon>
-);
-
-export const MenuIcon = (props: IconProps) => (
-  <SvgIcon {...props}>
-    <path d="M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z" />
-  </SvgIcon>
-);
-
-export const ArrowBackIcon = (props: IconProps) => (
-  <SvgIcon {...props}>
-    <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z" />
-  </SvgIcon>
-);
-
-export const CloudDownloadIcon = (props: IconProps) => (
-  <SvgIcon {...props}>
-    <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96M17 13l-5 5-5-5h3V9h4v4z" />
-  </SvgIcon>
-);
-
-export const RedoIcon = (props: IconProps) => (
-  <SvgIcon {...props}>
-    <path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7z" />
-  </SvgIcon>
-);
-
-export const UndoIcon = (props: IconProps) => (
-  <SvgIcon {...props}>
-    <path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8" />
-  </SvgIcon>
-);
-
-export const AddIcon = (props: IconProps) => (
-  <SvgIcon {...props}>
-    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z" />
-  </SvgIcon>
-);
-
-export const RemoveIcon = (props: IconProps) => (
-  <SvgIcon {...props}>
-    <path d="M19 13H5v-2h14z" />
-  </SvgIcon>
-);
-
-export const PhotoCameraIcon = (props: IconProps) => (
-  <SvgIcon {...props}>
-    <path d="M9 2 7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5" />
-    <circle cx="12" cy="12" r="3.2" />
-  </SvgIcon>
-);
-
-export const CheckCircleIcon = (props: IconProps) => (
-  <SvgIcon {...props}>
-    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z" />
-  </SvgIcon>
-);
-
-export const ErrorIcon = (props: IconProps) => (
-  <SvgIcon {...props}>
-    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-2h2zm0-4h-2V7h2z" />
-  </SvgIcon>
-);
-
-export const InfoIcon = (props: IconProps) => (
-  <SvgIcon {...props}>
-    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z" />
-  </SvgIcon>
-);
-
-export const WarningIcon = (props: IconProps) => (
-  <SvgIcon {...props}>
-    <path d="M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z" />
-  </SvgIcon>
-);
+// Copyright 2025 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+
+import SvgIcon, { type SvgIconProps } from './SvgIcon';
+
+type IconProps = SvgIconProps;
+
+export const ClearIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+  </SvgIcon>
+);
+
+export const CloseIcon = ClearIcon;
+
+export const EditIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z" />
+  </SvgIcon>
+);
+
+export const MenuIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z" />
+  </SvgIcon>
+);
+
+export const ArrowBackIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z" />
+  </SvgIcon>
+);
+
+export const CloudDownloadIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96M17 13l-5 5-5-5h3V9h4v4z" />
+  </SvgIcon>
+);
+
+export const RedoIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7z" />
+  </SvgIcon>
+);
+
+export const UndoIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8" />
+  </SvgIcon>
+);
+
+export const AddIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z" />
+  </SvgIcon>
+);
+
+export const RemoveIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M19 13H5v-2h14z" />
+  </SvgIcon>
+);
+
+export const PhotoCameraIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M9 2 7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5" />
+    <circle cx="12" cy="12" r="3.2" />
+  </SvgIcon>
+);
+
+export const CheckCircleIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z" />
+  </SvgIcon>
+);
+
+export const ErrorIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-2h2zm0-4h-2V7h2z" />
+  </SvgIcon>
+);
+
+export const InfoIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z" />
+  </SvgIcon>
+);
+
+export const WarningIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z" />
+  </SvgIcon>
+);
diff --git a/src/diagram/tests/chart-utils.test.ts b/src/diagram/tests/chart-utils.test.ts
index a2751740..4de4895e 100644
--- a/src/diagram/tests/chart-utils.test.ts
+++ b/src/diagram/tests/chart-utils.test.ts
@@ -218,8 +218,8 @@ describe('formatTickLabel', () => {
   });
 
   test('strips trailing zeros', () => {
-    expect(formatTickLabel(1.10)).toBe('1.1');
-    expect(formatTickLabel(2.00)).toBe('2');
+    expect(formatTickLabel(1.1)).toBe('1.1');
+    expect(formatTickLabel(2.0)).toBe('2');
   });
 
   test('handles large numbers', () => {
diff --git a/src/diagram/tests/drawer.test.tsx b/src/diagram/tests/drawer.test.tsx
index 8199a39d..397bf7d3 100644
--- a/src/diagram/tests/drawer.test.tsx
+++ b/src/diagram/tests/drawer.test.tsx
@@ -7,10 +7,7 @@ import { render, fireEvent, waitFor, act } from '@testing-library/react';
 import Drawer from '../components/Drawer';
 
 // Controlled wrapper for Drawer to test open/close behavior
-class ControlledDrawer extends React.Component<
-  { children?: React.ReactNode },
-  { open: boolean; closeCount: number }
-> {
+class ControlledDrawer extends React.Component<{ children?: React.ReactNode }, { open: boolean; closeCount: number }> {
   state = { open: false, closeCount: 0 };
 
   setOpen = (open: boolean) => {
@@ -71,7 +68,11 @@ describe('Drawer', () => {
 
   test('calls onClose when backdrop is clicked', () => {
     const ref = React.createRef<ControlledDrawer>();
-    render(<ControlledDrawer ref={ref}><div>Content</div></ControlledDrawer>);
+    render(
+      <ControlledDrawer ref={ref}>
+        <div>Content</div>
+      </ControlledDrawer>,
+    );
 
     // Open the drawer first
     act(() => {
@@ -87,7 +88,11 @@ describe('Drawer', () => {
 
   test('calls onClose when Escape key is pressed', () => {
     const ref = React.createRef<ControlledDrawer>();
-    render(<ControlledDrawer ref={ref}><div>Content</div></ControlledDrawer>);
+    render(
+      <ControlledDrawer ref={ref}>
+        <div>Content</div>
+      </ControlledDrawer>,
+    );
 
     // Open the drawer first
     act(() => {
@@ -102,7 +107,11 @@ describe('Drawer', () => {
 
   test('does not call onClose when Escape key is pressed while closed', () => {
     const ref = React.createRef<ControlledDrawer>();
-    render(<ControlledDrawer ref={ref}><div>Content</div></ControlledDrawer>);
+    render(
+      <ControlledDrawer ref={ref}>
+        <div>Content</div>
+      </ControlledDrawer>,
+    );
 
     fireEvent.keyDown(document, { key: 'Escape' });
 
@@ -111,7 +120,11 @@ describe('Drawer', () => {
 
   test('focuses the panel when opened', async () => {
     const ref = React.createRef<ControlledDrawer>();
-    render(<ControlledDrawer ref={ref}><div>Content</div></ControlledDrawer>);
+    render(
+      <ControlledDrawer ref={ref}>
+        <div>Content</div>
+      </ControlledDrawer>,
+    );
 
     act(() => {
       ref.current!.setOpen(true);
@@ -131,7 +144,9 @@ describe('Drawer', () => {
     render(
       <>
         <button ref={buttonRef}>Outside Button</button>
-        <ControlledDrawer ref={ref}><div>Content</div></ControlledDrawer>
+        <ControlledDrawer ref={ref}>
+          <div>Content</div>
+        </ControlledDrawer>
       </>,
     );
 
@@ -218,7 +233,9 @@ describe('Drawer focus trap', () => {
   test('focus trap includes anchor elements', () => {
     render(
       <Drawer open={true} onClose={() => {}}>
-        <a href="#test" data-testid="link">Link</a>
+        <a href="#test" data-testid="link">
+          Link
+        </a>
         <a data-testid="anchor-no-href">Anchor without href</a>
       </Drawer>,
     );
@@ -235,7 +252,9 @@ describe('Drawer focus trap', () => {
     render(
       <Drawer open={true} onClose={() => {}}>
         <input type="text" data-testid="input" />
-        <select data-testid="select"><option>Option</option></select>
+        <select data-testid="select">
+          <option>Option</option>
+        </select>
         <textarea data-testid="textarea" />
       </Drawer>,
     );
@@ -250,7 +269,9 @@ describe('Drawer focus trap', () => {
   test('focus trap includes elements with contenteditable', () => {
     render(
       <Drawer open={true} onClose={() => {}}>
-        <div contentEditable suppressContentEditableWarning data-testid="editable">Editable</div>
+        <div contentEditable suppressContentEditableWarning data-testid="editable">
+          Editable
+        </div>
       </Drawer>,
     );
 
@@ -264,8 +285,12 @@ describe('Drawer focus trap', () => {
   test('focus trap includes elements with tabindex', () => {
     render(
       <Drawer open={true} onClose={() => {}}>
-        <div tabIndex={0} data-testid="focusable-div">Focusable div</div>
-        <div tabIndex={-1} data-testid="not-focusable-div">Not focusable via Tab</div>
+        <div tabIndex={0} data-testid="focusable-div">
+          Focusable div
+        </div>
+        <div tabIndex={-1} data-testid="not-focusable-div">
+          Not focusable via Tab
+        </div>
       </Drawer>,
     );
 
diff --git a/src/diagram/tests/snackbar.test.tsx b/src/diagram/tests/snackbar.test.tsx
index df2b59b4..b516ccfc 100644
--- a/src/diagram/tests/snackbar.test.tsx
+++ b/src/diagram/tests/snackbar.test.tsx
@@ -7,10 +7,7 @@ import { render, act } from '@testing-library/react';
 import Snackbar, { SnackbarContent } from '../components/Snackbar';
 
 // Controlled wrapper to test open/close transitions
-class ControlledSnackbar extends React.Component<
-  { autoHideDuration?: number },
-  { open: boolean; closeCount: number }
-> {
+class ControlledSnackbar extends React.Component<{ autoHideDuration?: number }, { open: boolean; closeCount: number }> {
   state = { open: false, closeCount: 0 };
 
   setOpen = (open: boolean) => {
@@ -23,11 +20,7 @@ class ControlledSnackbar extends React.Component<
 
   render() {
     return (
-      <Snackbar
-        open={this.state.open}
-        autoHideDuration={this.props.autoHideDuration}
-        onClose={this.handleClose}
-      >
+      <Snackbar open={this.state.open} autoHideDuration={this.props.autoHideDuration} onClose={this.handleClose}>
         <SnackbarContent message="Test message" />
       </Snackbar>
     );
diff --git a/src/diagram/tests/speed-dial.test.tsx b/src/diagram/tests/speed-dial.test.tsx
index c0694edb..10e675ad 100644
--- a/src/diagram/tests/speed-dial.test.tsx
+++ b/src/diagram/tests/speed-dial.test.tsx
@@ -42,13 +42,7 @@ class ControlledSpeedDial extends React.Component<
 
 describe('SpeedDial', () => {
   test('renders FAB button with aria-label', () => {
-    render(
-      <SpeedDial
-        ariaLabel="Test SpeedDial"
-        open={false}
-        icon={<span>+</span>}
-      />,
-    );
+    render(<SpeedDial ariaLabel="Test SpeedDial" open={false} icon={<span>+</span>} />);
 
     const fab = screen.getByRole('button', { name: 'Test SpeedDial' });
     expect(fab).not.toBeNull();
@@ -56,12 +50,7 @@ describe('SpeedDial', () => {
 
   test('renders when hidden prop is true (visibility controlled by CSS)', () => {
     const { container } = render(
-      <SpeedDial
-        ariaLabel="Test SpeedDial"
-        open={false}
-        hidden={true}
-        icon={<span>+</span>}
-      />,
+      <SpeedDial ariaLabel="Test SpeedDial" open={false} hidden={true} icon={<span>+</span>} />,
     );
 
     // Element is still rendered (visibility controlled by CSS)
@@ -74,11 +63,7 @@ describe('SpeedDial', () => {
 
   test('renders actions when open', () => {
     render(
-      <SpeedDial
-        ariaLabel="Test SpeedDial"
-        open={true}
-        icon={<span>+</span>}
-      >
+      <SpeedDial ariaLabel="Test SpeedDial" open={true} icon={<span>+</span>}>
         <SpeedDialAction icon={<span>A</span>} title="Action A" />
         <SpeedDialAction icon={<span>B</span>} title="Action B" />
       </SpeedDial>,
@@ -90,11 +75,7 @@ describe('SpeedDial', () => {
 
   test('does not render actions when closed', () => {
     render(
-      <SpeedDial
-        ariaLabel="Test SpeedDial"
-        open={false}
-        icon={<span>+</span>}
-      >
+      <SpeedDial ariaLabel="Test SpeedDial" open={false} icon={<span>+</span>}>
         <SpeedDialAction icon={<span>A</span>} title="Action A" />
       </SpeedDial>,
     );
@@ -105,14 +86,7 @@ describe('SpeedDial', () => {
 
   test('calls onClick when FAB is clicked', () => {
     const onClick = jest.fn();
-    render(
-      <SpeedDial
-        ariaLabel="Test SpeedDial"
-        open={false}
-        onClick={onClick}
-        icon={<span>+</span>}
-      />,
-    );
+    render(<SpeedDial ariaLabel="Test SpeedDial" open={false} onClick={onClick} icon={<span>+</span>} />);
 
     const fab = screen.getByRole('button', { name: 'Test SpeedDial' });
     fireEvent.click(fab);
@@ -163,24 +137,12 @@ describe('SpeedDial', () => {
   });
 
   test('sets aria-expanded based on open state', () => {
-    const { rerender } = render(
-      <SpeedDial
-        ariaLabel="Test SpeedDial"
-        open={false}
-        icon={<span>+</span>}
-      />,
-    );
+    const { rerender } = render(<SpeedDial ariaLabel="Test SpeedDial" open={false} icon={<span>+</span>} />);
 
     let fab = screen.getByRole('button', { name: 'Test SpeedDial' });
     expect(fab.getAttribute('aria-expanded')).toBe('false');
 
-    rerender(
-      <SpeedDial
-        ariaLabel="Test SpeedDial"
-        open={true}
-        icon={<span>+</span>}
-      />,
-    );
+    rerender(<SpeedDial ariaLabel="Test SpeedDial" open={true} icon={<span>+</span>} />);
 
     fab = screen.getByRole('button', { name: 'Test SpeedDial' });
     expect(fab.getAttribute('aria-expanded')).toBe('true');
@@ -188,12 +150,7 @@ describe('SpeedDial', () => {
 
   test('applies custom className', () => {
     const { container } = render(
-      <SpeedDial
-        ariaLabel="Test SpeedDial"
-        open={false}
-        icon={<span>+</span>}
-        className="custom-class"
-      />,
+      <SpeedDial ariaLabel="Test SpeedDial" open={false} icon={<span>+</span>} className="custom-class" />,
     );
 
     const speedDial = container.firstChild as HTMLElement;
@@ -275,7 +232,12 @@ describe('SpeedDialIcon', () => {
       <SpeedDial
         ariaLabel="Test"
         open={false}
-        icon={<SpeedDialIcon icon={<span data-testid="closed-icon">+</span>} openIcon={<span data-testid="open-icon">x</span>} />}
+        icon={
+          <SpeedDialIcon
+            icon={<span data-testid="closed-icon">+</span>}
+            openIcon={<span data-testid="open-icon">x</span>}
+          />
+        }
       />,
     );
 
@@ -288,7 +250,12 @@ describe('SpeedDialIcon', () => {
       <SpeedDial
         ariaLabel="Test"
         open={true}
-        icon={<SpeedDialIcon icon={<span data-testid="closed-icon">+</span>} openIcon={<span data-testid="open-icon">x</span>} />}
+        icon={
+          <SpeedDialIcon
+            icon={<span data-testid="closed-icon">+</span>}
+            openIcon={<span data-testid="open-icon">x</span>}
+          />
+        }
       />,
     );
 
@@ -298,11 +265,7 @@ describe('SpeedDialIcon', () => {
 
   test('renders icon wrapper consistently when no openIcon provided', () => {
     const { rerender } = render(
-      <SpeedDial
-        ariaLabel="Test"
-        open={false}
-        icon={<SpeedDialIcon icon={<span data-testid="the-icon">+</span>} />}
-      />,
+      <SpeedDial ariaLabel="Test" open={false} icon={<SpeedDialIcon icon={<span data-testid="the-icon">+</span>} />} />,
     );
 
     // Icon is present when closed
@@ -310,11 +273,7 @@ describe('SpeedDialIcon', () => {
     expect(icon).not.toBeNull();
 
     rerender(
-      <SpeedDial
-        ariaLabel="Test"
-        open={true}
-        icon={<SpeedDialIcon icon={<span data-testid="the-icon">+</span>} />}
-      />,
+      <SpeedDial ariaLabel="Test" open={true} icon={<SpeedDialIcon icon={<span data-testid="the-icon">+</span>} />} />,
     );
 
     // Icon is still present when open (rotation is CSS-based)
@@ -330,9 +289,7 @@ describe('SpeedDialIcon', () => {
       </span>
     );
 
-    render(
-      <SpeedDial ariaLabel="Test" open={true} icon={<CustomIcon />} />,
-    );
+    render(<SpeedDial ariaLabel="Test" open={true} icon={<CustomIcon />} />);
 
     const icon = screen.getByTestId('custom-icon');
     expect(icon.getAttribute('data-open')).toBe('true');
diff --git a/src/diagram/tests/text-field.test.tsx b/src/diagram/tests/text-field.test.tsx
index 7796994c..e25291f5 100644
--- a/src/diagram/tests/text-field.test.tsx
+++ b/src/diagram/tests/text-field.test.tsx
@@ -25,13 +25,7 @@ describe('TextField', () => {
 
   test('chains inputProps.onFocus with internal focus handler', () => {
     const externalOnFocus = jest.fn();
-    render(
-      <TextField
-        label="Test"
-        inputProps={{ onFocus: externalOnFocus }}
-        data-testid="text-field"
-      />,
-    );
+    render(<TextField label="Test" inputProps={{ onFocus: externalOnFocus }} data-testid="text-field" />);
 
     const input = screen.getByTestId('text-field');
     fireEvent.focus(input);
@@ -42,13 +36,7 @@ describe('TextField', () => {
 
   test('chains inputProps.onBlur with internal blur handler', () => {
     const externalOnBlur = jest.fn();
-    render(
-      <TextField
-        label="Test"
-        inputProps={{ onBlur: externalOnBlur }}
-        data-testid="text-field"
-      />,
-    );
+    render(<TextField label="Test" inputProps={{ onBlur: externalOnBlur }} data-testid="text-field" />);
 
     const input = screen.getByTestId('text-field');
     fireEvent.focus(input);
@@ -90,11 +78,7 @@ describe('TextField', () => {
   });
 
   test('passes through other inputProps correctly', () => {
-    render(
-      <TextField
-        inputProps={{ 'data-testid': 'custom-input', maxLength: 10 }}
-      />,
-    );
+    render(<TextField inputProps={{ 'data-testid': 'custom-input', maxLength: 10 }} />);
 
     const input = screen.getByTestId('custom-input');
     expect(input.getAttribute('maxLength')).toBe('10');
diff --git a/src/engine2/tests/api.test.ts b/src/engine2/tests/api.test.ts
index 6e6782f6..4f762454 100644
--- a/src/engine2/tests/api.test.ts
+++ b/src/engine2/tests/api.test.ts
@@ -1090,7 +1090,10 @@ describe('High-Level API', () => {
             name: 'main',
             stocks: [],
             flows: [],
-            auxiliaries: [{ name: 'a', equation: '1' }, { name: 'b', equation: 'a' }],
+            auxiliaries: [
+              { name: 'a', equation: '1' },
+              { name: 'b', equation: 'a' },
+            ],
             views: [
               {
                 elements: [
diff --git a/src/server/tests/project-route.test.ts b/src/server/tests/project-route.test.ts
index 9c91fc5a..8dc728e2 100644
--- a/src/server/tests/project-route.test.ts
+++ b/src/server/tests/project-route.test.ts
@@ -8,7 +8,12 @@ import { createProjectRouteHandler, ProjectRecord, ProjectRouteHandlerDeps } fro
 import { getAuthenticatedUser, isResourceOwner, AuthenticatedUser } from '../auth-helpers';
 
 // Mock project factory
-function createMockProject(opts: { id: string; isPublic: boolean; ownerId?: string; fileId?: string | undefined }): ProjectRecord {
+function createMockProject(opts: {
+  id: string;
+  isPublic: boolean;
+  ownerId?: string;
+  fileId?: string | undefined;
+}): ProjectRecord {
   const ownerId = opts.ownerId ?? opts.id.split('/')[0];
   return {
     getId: () => opts.id,

From 4b0f2367bf323e0c50076cce3091f8f9df1622af Mon Sep 17 00:00:00 2001
From: Bobby Powers <bobbypowers@gmail.com>
Date: Thu, 29 Jan 2026 20:15:49 -0800
Subject: [PATCH 2/5] app: remove MUI dependency, use diagram components

This completes the migration of src/app away from Material UI to our own
component library in @system-dynamics/diagram. The change:

- Adds Radix UI primitives (@radix-ui/react-accordion, checkbox, dialog,
  dropdown-menu) to diagram package for accessible interactive components
- Creates replacement components: Avatar, Paper, TextLink, InputAdornment,
  AppBar, Toolbar, ImageList, Card/CardContent/CardActions, Checkbox,
  FormControlLabel, Menu/MenuItem, Accordion, Dialog
- Extends existing TextField and Button components with missing props
- Adds new icons: AccountCircle, ExpandMore, Apple, Email, Check
- Creates reset.css as a lightweight CssBaseline replacement
- Creates typography.module.css for heading/text utility classes
- Removes @emotion/react, @emotion/styled, @mui/material, @mui/icons-material
  from app dependencies

The components follow MUI's API patterns for easier migration while being
implemented with simpler native HTML/CSS or Radix primitives. This reduces
bundle size and removes the heavy MUI dependency from the app.
---
 src/app/App.tsx                               |  16 +-
 src/app/Home.module.css                       |   7 +
 src/app/Home.tsx                              |  63 +-
 src/app/Login.tsx                             | 101 +--
 src/app/NewProject.module.css                 |  20 +
 src/app/NewProject.tsx                        |  62 +-
 src/app/NewUser.tsx                           |  24 +-
 src/app/index-component.tsx                   |   8 +-
 src/app/package.json                          |   4 -
 src/app/typography.module.css                 |  52 ++
 src/diagram/components/Accordion.module.css   |  97 +++
 src/diagram/components/Accordion.tsx          |  79 +++
 src/diagram/components/AppBar.module.css      |  31 +
 src/diagram/components/AppBar.tsx             |  24 +
 src/diagram/components/Avatar.module.css      |  25 +
 src/diagram/components/Avatar.tsx             |  22 +
 src/diagram/components/Button.module.css      |  52 ++
 src/diagram/components/Button.tsx             |  46 +-
 src/diagram/components/Card.module.css        |  31 +
 src/diagram/components/Card.tsx               |  56 ++
 src/diagram/components/Checkbox.module.css    |  46 ++
 src/diagram/components/Checkbox.tsx           |  37 ++
 src/diagram/components/Dialog.module.css      |  80 +++
 src/diagram/components/Dialog.tsx             | 110 ++++
 .../components/FormControlLabel.module.css    |  12 +
 src/diagram/components/FormControlLabel.tsx   |  22 +
 src/diagram/components/ImageList.module.css   |  12 +
 src/diagram/components/ImageList.tsx          |  45 ++
 .../components/InputAdornment.module.css      |  16 +
 src/diagram/components/InputAdornment.tsx     |  24 +
 src/diagram/components/Menu.module.css        |  45 ++
 src/diagram/components/Menu.tsx               |  80 +++
 src/diagram/components/Paper.module.css       |  24 +
 src/diagram/components/Paper.tsx              |  23 +
 src/diagram/components/TextField.module.css   |  25 +
 src/diagram/components/TextField.tsx          |  80 ++-
 src/diagram/components/TextLink.module.css    |  20 +
 src/diagram/components/TextLink.tsx           |  36 ++
 src/diagram/components/Toolbar.module.css     |  22 +
 src/diagram/components/Toolbar.tsx            |  21 +
 src/diagram/components/icons.tsx              |  30 +
 src/diagram/index.ts                          |  33 +
 src/diagram/package.json                      |   6 +-
 src/diagram/reset.css                         |  66 ++
 yarn.lock                                     | 577 +++++++++---------
 45 files changed, 1840 insertions(+), 472 deletions(-)
 create mode 100644 src/app/typography.module.css
 create mode 100644 src/diagram/components/Accordion.module.css
 create mode 100644 src/diagram/components/Accordion.tsx
 create mode 100644 src/diagram/components/AppBar.module.css
 create mode 100644 src/diagram/components/AppBar.tsx
 create mode 100644 src/diagram/components/Avatar.module.css
 create mode 100644 src/diagram/components/Avatar.tsx
 create mode 100644 src/diagram/components/Card.module.css
 create mode 100644 src/diagram/components/Card.tsx
 create mode 100644 src/diagram/components/Checkbox.module.css
 create mode 100644 src/diagram/components/Checkbox.tsx
 create mode 100644 src/diagram/components/Dialog.module.css
 create mode 100644 src/diagram/components/Dialog.tsx
 create mode 100644 src/diagram/components/FormControlLabel.module.css
 create mode 100644 src/diagram/components/FormControlLabel.tsx
 create mode 100644 src/diagram/components/ImageList.module.css
 create mode 100644 src/diagram/components/ImageList.tsx
 create mode 100644 src/diagram/components/InputAdornment.module.css
 create mode 100644 src/diagram/components/InputAdornment.tsx
 create mode 100644 src/diagram/components/Menu.module.css
 create mode 100644 src/diagram/components/Menu.tsx
 create mode 100644 src/diagram/components/Paper.module.css
 create mode 100644 src/diagram/components/Paper.tsx
 create mode 100644 src/diagram/components/TextLink.module.css
 create mode 100644 src/diagram/components/TextLink.tsx
 create mode 100644 src/diagram/components/Toolbar.module.css
 create mode 100644 src/diagram/components/Toolbar.tsx
 create mode 100644 src/diagram/reset.css

diff --git a/src/app/App.tsx b/src/app/App.tsx
index be144e2d..c130ca95 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -14,8 +14,6 @@ import {
 } from '@firebase/auth';
 
 import { useLocation, Route, RouteComponentProps, Switch, Redirect } from 'wouter';
-import { createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
 
 import { defined } from '@system-dynamics/core/common';
 import { HostedWebEditor } from '@system-dynamics/diagram/HostedWebEditor';
@@ -40,13 +38,6 @@ interface EditorMatchParams {
   readonly [paramName: string | number]: string | undefined;
 }
 
-const theme = createTheme({
-  palette: {
-    /* primary: purple,
-     * secondary: green, */
-  },
-});
-
 class UserInfoSingleton {
   private resultPromise?: Promise<[User | undefined, number]>;
   private result?: [User | undefined, number];
@@ -253,7 +244,6 @@ class InnerApp extends React.PureComponent<{}, AppState> {
 
     return (
       <React.Fragment>
-        <CssBaseline />
         <Switch>
           <div className={styles.inner}>
             <Route path="/" component={this.home} />
@@ -270,11 +260,7 @@ export class App extends React.PureComponent {
   render(): React.JSX.Element {
     return (
       <React.StrictMode>
-        <StyledEngineProvider injectFirst>
-          <ThemeProvider theme={theme}>
-            <InnerApp />
-          </ThemeProvider>
-        </StyledEngineProvider>
+        <InnerApp />
       </React.StrictMode>
     );
   }
diff --git a/src/app/Home.module.css b/src/app/Home.module.css
index 7753730f..99c1476a 100644
--- a/src/app/Home.module.css
+++ b/src/app/Home.module.css
@@ -66,3 +66,10 @@
 
 .newProjectForm {
 }
+
+.centeredFlex {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/app/Home.tsx b/src/app/Home.tsx
index c0e20ac4..b54263d2 100644
--- a/src/app/Home.tsx
+++ b/src/app/Home.tsx
@@ -6,28 +6,29 @@ import * as React from 'react';
 
 import { Link } from 'wouter';
 import clsx from 'clsx';
-import AppBar from '@mui/material/AppBar';
-import Button from '@mui/material/Button';
-import Grid from '@mui/material/Grid';
-import ImageList from '@mui/material/ImageList';
-import ImageListItem from '@mui/material/ImageListItem';
-import IconButton from '@mui/material/IconButton';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import Paper from '@mui/material/Paper';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import Avatar from '@mui/material/Avatar';
 import { List } from 'immutable';
-import { PopoverOrigin } from '@mui/material/Popover';
-import AccountCircle from '@mui/icons-material/AccountCircle';
-import MenuIcon from '@mui/icons-material/Menu';
+
+import {
+  AppBar,
+  Button,
+  ImageList,
+  ImageListItem,
+  IconButton,
+  Menu,
+  MenuItem,
+  Paper,
+  Toolbar,
+  Avatar,
+  AccountCircleIcon,
+  MenuIcon,
+} from '@system-dynamics/diagram';
 
 import { NewProject } from './NewProject';
 import { Project } from './Project';
 import { User } from './User';
 
 import styles from './Home.module.css';
+import typography from './typography.module.css';
 
 interface HomeState {
   anchorEl?: HTMLElement;
@@ -40,9 +41,9 @@ interface HomeProps {
   onNewProjectDone?: () => void;
 }
 
-const AnchorOrigin: PopoverOrigin = {
-  vertical: 'bottom',
-  horizontal: 'right',
+const AnchorOrigin = {
+  vertical: 'bottom' as const,
+  horizontal: 'right' as const,
 };
 
 class Home extends React.Component<HomeProps, HomeState> {
@@ -97,11 +98,11 @@ class Home extends React.Component<HomeProps, HomeState> {
   newProjectForm() {
     return (
       <div className={styles.newProjectForm}>
-        <Grid container direction="row" justifyContent="center" alignItems="center">
-          <Grid item>
+        <div className={styles.centeredFlex}>
+          <div>
             <NewProject user={this.props.user} onProjectCreated={this.handleProjectCreated} />
-          </Grid>
-        </Grid>
+          </div>
+        </div>
       </div>
     );
   }
@@ -118,10 +119,8 @@ class Home extends React.Component<HomeProps, HomeState> {
                   <div className={styles.preview}>
                     <img src={`/api/preview/${project.id}`} alt="model preview" className={styles.previewImg} />
                   </div>
-                  <Typography variant="h5" component="h3">
-                    {project.displayName}
-                  </Typography>
-                  <Typography component="p">{project.description}&nbsp;</Typography>
+                  <h3 className={typography.heading5}>{project.displayName}</h3>
+                  <p>{project.description}&nbsp;</p>
                 </Paper>
               </Link>
             </ImageListItem>
@@ -139,7 +138,7 @@ class Home extends React.Component<HomeProps, HomeState> {
     const account = photoUrl ? (
       <Avatar alt={this.props.user.displayName} src={photoUrl} className={styles.avatar} />
     ) : (
-      <AccountCircle />
+      <AccountCircleIcon />
     );
 
     const content = this.props.isNewProject ? this.newProjectForm() : this.projects();
@@ -151,15 +150,11 @@ class Home extends React.Component<HomeProps, HomeState> {
             <IconButton className={styles.menuButton} color="inherit" aria-label="Menu">
               <MenuIcon />
             </IconButton>
-            <Typography variant="h6" color="inherit" className={styles.flex}>
+            <h6 className={clsx(typography.heading6, typography.colorInherit, styles.flex)}>
               <Link to="/" className={styles.modelLink}>
                 Simlin
               </Link>
-              {/*&nbsp;*/}
-              {/*<span className={classes.sdTitle}>*/}
-              {/*  System Dynamics*/}
-              {/*</span>*/}
-            </Typography>
+            </h6>
             <div>
               <Link to="/new" className={styles.modelLink}>
                 <Button variant="outlined" className={styles.newProjectButton}>
@@ -178,7 +173,7 @@ class Home extends React.Component<HomeProps, HomeState> {
               </IconButton>
               <Menu
                 id="menu-appbar"
-                anchorEl={anchorEl}
+                anchorEl={anchorEl ?? null}
                 anchorOrigin={AnchorOrigin}
                 transformOrigin={AnchorOrigin}
                 open={open}
diff --git a/src/app/Login.tsx b/src/app/Login.tsx
index 1d2cc940..605eff14 100644
--- a/src/app/Login.tsx
+++ b/src/app/Login.tsx
@@ -16,19 +16,22 @@ import {
   signInWithEmailAndPassword,
 } from '@firebase/auth';
 import clsx from 'clsx';
-import AppleIcon from '@mui/icons-material/Apple';
-import EmailIcon from '@mui/icons-material/Email';
-import Button from '@mui/material/Button';
-import SvgIcon from '@mui/material/SvgIcon';
-import Card from '@mui/material/Card';
-import CardActions from '@mui/material/CardActions';
-import CardContent from '@mui/material/CardContent';
-import Link from '@mui/material/Link';
-import Typography from '@mui/material/Typography';
-import TextField from '@mui/material/TextField';
 
+import {
+  AppleIcon,
+  EmailIcon,
+  Button,
+  SvgIcon,
+  Card,
+  CardActions,
+  CardContent,
+  TextLink,
+  TextField,
+} from '@system-dynamics/diagram';
 import { ModelIcon } from '@system-dynamics/diagram/ModelIcon';
 
+import typography from './typography.module.css';
+
 import styles from './Login.module.css';
 
 type EmailLoginStates = 'showEmail' | 'showPassword' | 'showSignup' | 'showProviderRedirect' | 'showRecover';
@@ -220,12 +223,14 @@ export class Login extends React.Component<LoginProps, LoginState> {
       switch (this.state.emailLoginFlow) {
         case 'showEmail':
           loginUI = (
-            <Card variant="outlined" sx={{ minWidth: 275, maxWidth: 360, width: '100%' }} className={styles.emailForm}>
+            <Card
+              variant="outlined"
+              style={{ minWidth: 275, maxWidth: 360, width: '100%' }}
+              className={styles.emailForm}
+            >
               <form onSubmit={this.onNullSubmit}>
                 <CardContent>
-                  <Typography variant="h6" component="div">
-                    Sign in with email
-                  </Typography>
+                  <h6 className={typography.heading6}>Sign in with email</h6>
                   <TextField
                     label="Email"
                     value={this.state.email}
@@ -240,7 +245,7 @@ export class Login extends React.Component<LoginProps, LoginState> {
                   />
                 </CardContent>
                 <CardActions>
-                  <Button sx={{ marginLeft: 'auto' }} onClick={this.onEmailCancel}>
+                  <Button style={{ marginLeft: 'auto' }} onClick={this.onEmailCancel}>
                     Cancel
                   </Button>
                   <Button type="submit" variant="contained" onClick={this.onSubmitEmail}>
@@ -253,12 +258,14 @@ export class Login extends React.Component<LoginProps, LoginState> {
           break;
         case 'showPassword':
           loginUI = (
-            <Card variant="outlined" sx={{ minWidth: 275, maxWidth: 360, width: '100%' }} className={styles.emailForm}>
+            <Card
+              variant="outlined"
+              style={{ minWidth: 275, maxWidth: 360, width: '100%' }}
+              className={styles.emailForm}
+            >
               <form onSubmit={this.onNullSubmit}>
                 <CardContent>
-                  <Typography variant="h6" component="div">
-                    Sign in
-                  </Typography>
+                  <h6 className={typography.heading6}>Sign in</h6>
                   <TextField
                     label="Email"
                     value={this.state.email}
@@ -285,11 +292,11 @@ export class Login extends React.Component<LoginProps, LoginState> {
                   />
                 </CardContent>
                 <CardActions>
-                  <Typography sx={{ marginRight: 'auto' }} variant="body2">
-                    <Link sx={{ cursor: 'help' }} underline="hover" onClick={this.onEmailHelp}>
+                  <span className={typography.body2} style={{ marginRight: 'auto' }}>
+                    <TextLink style={{ cursor: 'help' }} underline="hover" onClick={this.onEmailHelp}>
                       Trouble signing in?
-                    </Link>
-                  </Typography>
+                    </TextLink>
+                  </span>
                   <Button type="submit" variant="contained" onClick={this.onEmailLogin}>
                     Sign in
                   </Button>
@@ -300,12 +307,14 @@ export class Login extends React.Component<LoginProps, LoginState> {
           break;
         case 'showSignup':
           loginUI = (
-            <Card variant="outlined" sx={{ minWidth: 275, maxWidth: 360, width: '100%' }} className={styles.emailForm}>
+            <Card
+              variant="outlined"
+              style={{ minWidth: 275, maxWidth: 360, width: '100%' }}
+              className={styles.emailForm}
+            >
               <form onSubmit={this.onNullSubmit}>
                 <CardContent>
-                  <Typography variant="h6" component="div">
-                    Create account
-                  </Typography>
+                  <h6 className={typography.heading6}>Create account</h6>
                   <TextField
                     label="Email"
                     value={this.state.email}
@@ -342,7 +351,7 @@ export class Login extends React.Component<LoginProps, LoginState> {
                   />
                 </CardContent>
                 <CardActions>
-                  <Button sx={{ marginLeft: 'auto' }} onClick={this.onEmailCancel}>
+                  <Button style={{ marginLeft: 'auto' }} onClick={this.onEmailCancel}>
                     Cancel
                   </Button>
                   <Button type="submit" variant="contained" onClick={this.onSubmitNewUser}>
@@ -356,20 +365,22 @@ export class Login extends React.Component<LoginProps, LoginState> {
         case 'showProviderRedirect':
           const provider = this.state.provider === 'google.com' ? 'Google' : 'Apple';
           loginUI = (
-            <Card variant="outlined" sx={{ minWidth: 275, maxWidth: 360, width: '100%' }} className={styles.emailForm}>
+            <Card
+              variant="outlined"
+              style={{ minWidth: 275, maxWidth: 360, width: '100%' }}
+              className={styles.emailForm}
+            >
               <form onSubmit={this.onNullSubmit}>
                 <CardContent>
-                  <Typography variant="h6" component="div">
-                    Sign in - you already have an account
-                  </Typography>
-                  <Typography className={styles.recoverInstructions}>
+                  <h6 className={typography.heading6}>Sign in - you already have an account</h6>
+                  <p className={styles.recoverInstructions}>
                     You've already used {provider} to sign up with <b>{this.state.email}</b>. Sign in with {provider} to
                     continue.
-                  </Typography>
+                  </p>
                 </CardContent>
                 <CardActions>
                   <Button
-                    sx={{ marginLeft: 'auto' }}
+                    style={{ marginLeft: 'auto' }}
                     type="submit"
                     variant="contained"
                     onClick={this.state.provider === 'google.com' ? this.googleLoginClick : this.appleLoginClick}
@@ -383,15 +394,17 @@ export class Login extends React.Component<LoginProps, LoginState> {
           break;
         case 'showRecover':
           loginUI = (
-            <Card variant="outlined" sx={{ minWidth: 275, maxWidth: 360, width: '100%' }} className={styles.emailForm}>
+            <Card
+              variant="outlined"
+              style={{ minWidth: 275, maxWidth: 360, width: '100%' }}
+              className={styles.emailForm}
+            >
               <form onSubmit={this.onNullSubmit}>
                 <CardContent>
-                  <Typography variant="h6" component="div">
-                    Recover password
-                  </Typography>
-                  <Typography className={styles.recoverInstructions}>
+                  <h6 className={typography.heading6}>Recover password</h6>
+                  <p className={styles.recoverInstructions}>
                     Get instructions sent to this email that explain how to reset your password
-                  </Typography>
+                  </p>
                   <TextField
                     label="Email"
                     value={this.state.email}
@@ -406,7 +419,7 @@ export class Login extends React.Component<LoginProps, LoginState> {
                   />
                 </CardContent>
                 <CardActions>
-                  <Button sx={{ marginLeft: 'auto' }} onClick={this.onEmailCancel}>
+                  <Button style={{ marginLeft: 'auto' }} onClick={this.onEmailCancel}>
                     Cancel
                   </Button>
                   <Button type="submit" variant="contained" onClick={this.onSubmitRecovery}>
@@ -422,7 +435,7 @@ export class Login extends React.Component<LoginProps, LoginState> {
             <div className={styles.optionsButtons}>
               <Button
                 variant="contained"
-                sx={{ backgroundColor: 'black' }}
+                style={{ backgroundColor: 'black' }}
                 startIcon={<AppleIcon />}
                 onClick={this.appleLoginClick}
               >
@@ -435,7 +448,7 @@ export class Login extends React.Component<LoginProps, LoginState> {
               <br />
               <Button
                 variant="contained"
-                sx={{ backgroundColor: '#db4437' }}
+                style={{ backgroundColor: '#db4437' }}
                 startIcon={<EmailIcon />}
                 onClick={this.emailLoginClick}
               >
diff --git a/src/app/NewProject.module.css b/src/app/NewProject.module.css
index 42888a8a..4177cdf5 100644
--- a/src/app/NewProject.module.css
+++ b/src/app/NewProject.module.css
@@ -1,3 +1,23 @@
 .subtitle {
   margin-top: 6px;
 }
+
+.advancedGrid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 80px;
+  align-items: center;
+  width: 100%;
+}
+
+.gridCol4 {
+  grid-column: span 4;
+}
+
+.gridCol8 {
+  grid-column: span 8;
+}
+
+.gridCol12 {
+  grid-column: span 12;
+}
diff --git a/src/app/NewProject.tsx b/src/app/NewProject.tsx
index b4ff434f..2d62f838 100644
--- a/src/app/NewProject.tsx
+++ b/src/app/NewProject.tsx
@@ -5,16 +5,17 @@
 import * as React from 'react';
 
 import { fromUint8Array } from 'js-base64';
-import Accordion from '@mui/material/Accordion';
-import AccordionDetails from '@mui/material/AccordionDetails';
-import AccordionSummary from '@mui/material/AccordionSummary';
-import Button from '@mui/material/Button';
-import Checkbox from '@mui/material/Checkbox';
-import Grid from '@mui/material/Grid';
-import InputAdornment from '@mui/material/InputAdornment';
-import TextField from '@mui/material/TextField';
-import Typography from '@mui/material/Typography';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Button,
+  Checkbox,
+  InputAdornment,
+  TextField,
+  ExpandMoreIcon,
+} from '@system-dynamics/diagram';
 
 import { Project } from './Project';
 import { User } from './User';
@@ -23,6 +24,7 @@ import { Project as Engine2Project } from '@system-dynamics/engine2';
 import type { JsonProject } from '@system-dynamics/engine2';
 
 import styles from './NewProject.module.css';
+import typography from './typography.module.css';
 
 interface NewProjectProps {
   user: User;
@@ -131,8 +133,8 @@ export class NewProject extends React.Component<NewProjectProps, NewProjectState
     }
   };
 
-  handlePublicChecked = (): void => {
-    this.setState((state) => ({ isPublic: !state.isPublic }));
+  handlePublicChecked = (checked: boolean): void => {
+    this.setState({ isPublic: checked });
   };
 
   uploadModel = async (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -178,9 +180,9 @@ export class NewProject extends React.Component<NewProjectProps, NewProjectState
     const warningText = this.state.errorMsg || '';
     return (
       <div>
-        <Typography variant="h2">Create a project</Typography>
+        <h2 className={typography.heading2}>Create a project</h2>
         <div className={styles.subtitle}>
-          <Typography variant="subtitle1">A project holds models and data, along with simulation results.</Typography>
+          <p className={typography.subtitle1}>A project holds models and data, along with simulation results.</p>
         </div>
         <br />
         <TextField
@@ -213,16 +215,16 @@ export class NewProject extends React.Component<NewProjectProps, NewProjectState
         <Accordion>
           <AccordionSummary expandIcon={<ExpandMoreIcon />}>
             <div>
-              <Typography>Advanced</Typography>
+              <span>Advanced</span>
             </div>
           </AccordionSummary>
           <AccordionDetails>
             <form>
-              <Grid container spacing={10} justifyContent="center" alignItems="center">
-                <Grid item xs={8}>
-                  <Typography>Use existing model</Typography>
-                </Grid>
-                <Grid item xs={4}>
+              <div className={styles.advancedGrid}>
+                <div className={styles.gridCol8}>
+                  <span>Use existing model</span>
+                </div>
+                <div className={styles.gridCol4}>
                   <Button variant="contained" className="NewProject-upload-button" color="secondary" component="label">
                     Select
                     <input
@@ -233,14 +235,14 @@ export class NewProject extends React.Component<NewProjectProps, NewProjectState
                       onChange={this.uploadModel}
                     />
                   </Button>
-                </Grid>
-                <Grid item xs={12}>
-                  <Typography>
+                </div>
+                <div className={styles.gridCol12}>
+                  <span>
                     <Checkbox checked={this.state.isPublic} onChange={this.handlePublicChecked} />
                     Publicly accessible
-                  </Typography>
-                </Grid>
-              </Grid>
+                  </span>
+                </div>
+              </div>
             </form>
           </AccordionDetails>
         </Accordion>
@@ -248,14 +250,14 @@ export class NewProject extends React.Component<NewProjectProps, NewProjectState
         <br />
         <br />
         <br />
-        <Typography variant="subtitle2" style={{ whiteSpace: 'pre-wrap' }}>
+        <p className={typography.subtitle2} style={{ whiteSpace: 'pre-wrap' }}>
           <b>{warningText || '\xa0'}</b>
-        </Typography>
-        <Typography align="right">
+        </p>
+        <p className={typography.textRight}>
           <Button onClick={this.handleClose} color="primary">
             Create
           </Button>
-        </Typography>
+        </p>
       </div>
     );
   }
diff --git a/src/app/NewUser.tsx b/src/app/NewUser.tsx
index ad0db666..4c4f5084 100644
--- a/src/app/NewUser.tsx
+++ b/src/app/NewUser.tsx
@@ -4,15 +4,17 @@
 
 import * as React from 'react';
 
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-import TextField from '@mui/material/TextField';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Checkbox from '@mui/material/Checkbox';
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  TextField,
+  FormControlLabel,
+  Checkbox,
+} from '@system-dynamics/diagram';
 
 import { User } from './User';
 
@@ -44,9 +46,9 @@ export class NewUser extends React.Component<NewUserProps, NewUserState> {
     });
   };
 
-  handleAgreedToTerms = (): void => {
+  handleAgreedToTerms = (checked: boolean): void => {
     this.setState({
-      agreedToTerms: !this.state.agreedToTerms,
+      agreedToTerms: checked,
     });
   };
 
diff --git a/src/app/index-component.tsx b/src/app/index-component.tsx
index 1b39b356..80aee720 100644
--- a/src/app/index-component.tsx
+++ b/src/app/index-component.tsx
@@ -5,13 +5,9 @@
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-
 import { baseURL } from '@system-dynamics/core/common';
 import { HostedWebEditor } from '@system-dynamics/diagram/HostedWebEditor';
 
-const theme = createTheme({});
-
 // try to get the base URL from the src attribute of the current script
 // (so that e.g. localhost:3000 works for testing), but fall back to baseURL
 // from common if that doesn't work.
@@ -37,9 +33,7 @@ class SDModel extends HTMLElement {
       <div className="model-Editor-full">
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" />
-        <ThemeProvider theme={theme}>
-          <HostedWebEditor username={username} projectName={projectName} embedded={true} baseURL={base} />
-        </ThemeProvider>
+        <HostedWebEditor username={username} projectName={projectName} embedded={true} baseURL={base} />
       </div>,
     );
   }
diff --git a/src/app/package.json b/src/app/package.json
index dfab7963..4fbaa2e9 100644
--- a/src/app/package.json
+++ b/src/app/package.json
@@ -7,10 +7,6 @@
   "license": "Apache-2.0",
   "browser": "lib.browser",
   "dependencies": {
-    "@emotion/react": "^11.0.0",
-    "@emotion/styled": "^11.0.0",
-    "@mui/icons-material": "^5.0.0",
-    "@mui/material": "^5.0.0",
     "@system-dynamics/core": "^1.0.0",
     "@system-dynamics/diagram": "^1.0.0",
     "@system-dynamics/engine2": "^2.0.0"
diff --git a/src/app/typography.module.css b/src/app/typography.module.css
new file mode 100644
index 00000000..a9c44c57
--- /dev/null
+++ b/src/app/typography.module.css
@@ -0,0 +1,52 @@
+.heading2 {
+  font-size: 3.75rem;
+  font-weight: 300;
+  line-height: 1.2;
+  letter-spacing: -0.00833em;
+}
+
+.heading5 {
+  font-size: 1.5rem;
+  font-weight: 400;
+  line-height: 1.334;
+  letter-spacing: 0em;
+}
+
+.heading6 {
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.6;
+  letter-spacing: 0.0075em;
+}
+
+.subtitle1 {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.75;
+  letter-spacing: 0.00938em;
+}
+
+.subtitle2 {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.57;
+  letter-spacing: 0.00714em;
+}
+
+.body2 {
+  font-size: 0.875rem;
+  line-height: 1.43;
+  letter-spacing: 0.01071em;
+}
+
+.textRight {
+  text-align: right;
+}
+
+.textCenter {
+  text-align: center;
+}
+
+.colorInherit {
+  color: inherit;
+}
diff --git a/src/diagram/components/Accordion.module.css b/src/diagram/components/Accordion.module.css
new file mode 100644
index 00000000..941f1495
--- /dev/null
+++ b/src/diagram/components/Accordion.module.css
@@ -0,0 +1,97 @@
+.accordion {
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 4px;
+  background-color: #fff;
+}
+
+.accordion::before {
+  display: none;
+}
+
+.item {
+  border: none;
+}
+
+.header {
+  margin: 0;
+}
+
+.trigger {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 16px;
+  min-height: 48px;
+  cursor: pointer;
+  font-size: 0.9375rem;
+  font-weight: 400;
+  line-height: 1.5;
+  transition: min-height 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.trigger:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+.trigger:focus-visible {
+  outline: 2px solid #1976d2;
+  outline-offset: -2px;
+}
+
+.trigger[data-disabled] {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.expandIcon {
+  display: flex;
+  align-items: center;
+  color: rgba(0, 0, 0, 0.54);
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.trigger[data-state='open'] .expandIcon {
+  transform: rotate(180deg);
+}
+
+.details {
+  overflow: hidden;
+}
+
+.details[data-state='open'] {
+  animation: slideDown 200ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+
+.details[data-state='closed'] {
+  animation: slideUp 200ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+.detailsInner {
+  padding: 8px 16px 16px;
+}
diff --git a/src/diagram/components/Accordion.tsx b/src/diagram/components/Accordion.tsx
new file mode 100644
index 00000000..cf8ef43d
--- /dev/null
+++ b/src/diagram/components/Accordion.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import * as RadixAccordion from '@radix-ui/react-accordion';
+import clsx from 'clsx';
+
+import styles from './Accordion.module.css';
+
+export interface AccordionProps {
+  defaultExpanded?: boolean;
+  expanded?: boolean;
+  onChange?: (expanded: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export function Accordion(props: AccordionProps): React.ReactElement {
+  const { defaultExpanded, expanded, onChange, disabled, className, style, children } = props;
+
+  const value = expanded ? 'item' : '';
+  const defaultValue = defaultExpanded ? 'item' : undefined;
+
+  return (
+    <RadixAccordion.Root
+      type="single"
+      collapsible
+      value={expanded !== undefined ? value : undefined}
+      defaultValue={defaultValue}
+      onValueChange={(newValue) => {
+        if (onChange) {
+          onChange(newValue === 'item');
+        }
+      }}
+      disabled={disabled}
+      className={clsx(styles.accordion, className)}
+      style={style}
+    >
+      <RadixAccordion.Item value="item" className={styles.item}>
+        {children}
+      </RadixAccordion.Item>
+    </RadixAccordion.Root>
+  );
+}
+
+export interface AccordionSummaryProps {
+  expandIcon?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export function AccordionSummary(props: AccordionSummaryProps): React.ReactElement {
+  const { expandIcon, className, style, children } = props;
+
+  return (
+    <RadixAccordion.Header className={styles.header}>
+      <RadixAccordion.Trigger className={clsx(styles.trigger, className)} style={style}>
+        <span className={styles.content}>{children}</span>
+        {expandIcon && <span className={styles.expandIcon}>{expandIcon}</span>}
+      </RadixAccordion.Trigger>
+    </RadixAccordion.Header>
+  );
+}
+
+export interface AccordionDetailsProps {
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export function AccordionDetails(props: AccordionDetailsProps): React.ReactElement {
+  const { className, style, children } = props;
+
+  return (
+    <RadixAccordion.Content className={clsx(styles.details, className)} style={style}>
+      <div className={styles.detailsInner}>{children}</div>
+    </RadixAccordion.Content>
+  );
+}
diff --git a/src/diagram/components/AppBar.module.css b/src/diagram/components/AppBar.module.css
new file mode 100644
index 00000000..325663ea
--- /dev/null
+++ b/src/diagram/components/AppBar.module.css
@@ -0,0 +1,31 @@
+.appBar {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  background-color: #1976d2;
+  color: #fff;
+  box-shadow:
+    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+}
+
+.positionFixed {
+  position: fixed;
+  z-index: 1100;
+  top: 0;
+  left: auto;
+  right: 0;
+}
+
+.positionStatic {
+  position: static;
+}
+
+.positionSticky {
+  position: sticky;
+  z-index: 1100;
+  top: 0;
+}
diff --git a/src/diagram/components/AppBar.tsx b/src/diagram/components/AppBar.tsx
new file mode 100644
index 00000000..8814cf79
--- /dev/null
+++ b/src/diagram/components/AppBar.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import clsx from 'clsx';
+
+import styles from './AppBar.module.css';
+
+export interface AppBarProps {
+  position?: 'fixed' | 'static' | 'sticky';
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export default function AppBar(props: AppBarProps): React.ReactElement {
+  const { position = 'static', className, style, children } = props;
+
+  const positionClass =
+    position === 'fixed' ? styles.positionFixed : position === 'sticky' ? styles.positionSticky : styles.positionStatic;
+
+  return (
+    <header className={clsx(styles.appBar, positionClass, className)} style={style}>
+      {children}
+    </header>
+  );
+}
diff --git a/src/diagram/components/Avatar.module.css b/src/diagram/components/Avatar.module.css
new file mode 100644
index 00000000..8df9c734
--- /dev/null
+++ b/src/diagram/components/Avatar.module.css
@@ -0,0 +1,25 @@
+.avatar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  font-size: 1.25rem;
+  line-height: 1;
+  border-radius: 50%;
+  overflow: hidden;
+  user-select: none;
+  background-color: #bdbdbd;
+  color: #fafafa;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  object-fit: cover;
+  color: transparent;
+  text-indent: 10000px;
+}
diff --git a/src/diagram/components/Avatar.tsx b/src/diagram/components/Avatar.tsx
new file mode 100644
index 00000000..efc39b1a
--- /dev/null
+++ b/src/diagram/components/Avatar.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import clsx from 'clsx';
+
+import styles from './Avatar.module.css';
+
+export interface AvatarProps {
+  src?: string;
+  alt?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export default function Avatar(props: AvatarProps): React.ReactElement {
+  const { src, alt, className, style, children } = props;
+
+  return (
+    <div className={clsx(styles.avatar, className)} style={style}>
+      {src ? <img src={src} alt={alt || ''} className={styles.image} /> : children}
+    </div>
+  );
+}
diff --git a/src/diagram/components/Button.module.css b/src/diagram/components/Button.module.css
index 4003ecf4..edaea2c4 100644
--- a/src/diagram/components/Button.module.css
+++ b/src/diagram/components/Button.module.css
@@ -99,6 +99,58 @@
   pointer-events: none;
 }
 
+/* outlined + primary */
+.outlinedPrimary {
+  color: var(--color-primary);
+  border: 1px solid rgba(25, 118, 210, 0.5);
+  background: transparent;
+}
+
+.outlinedPrimary:hover {
+  border-color: var(--color-primary);
+  background-color: rgba(25, 118, 210, 0.04);
+}
+
+/* outlined + secondary */
+.outlinedSecondary {
+  color: var(--color-secondary);
+  border: 1px solid rgba(220, 0, 78, 0.5);
+  background: transparent;
+}
+
+.outlinedSecondary:hover {
+  border-color: var(--color-secondary);
+  background-color: rgba(220, 0, 78, 0.04);
+}
+
+/* outlined + inherit */
+.outlinedInherit {
+  color: inherit;
+  border: 1px solid rgba(0, 0, 0, 0.23);
+  background: transparent;
+}
+
+.outlinedInherit:hover {
+  border-color: rgba(0, 0, 0, 0.87);
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+/* text + inherit */
+.textInherit {
+  color: inherit;
+  background: transparent;
+}
+
+.textInherit:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+.disabledOutlined {
+  color: rgba(0, 0, 0, 0.26);
+  border-color: rgba(0, 0, 0, 0.12);
+  pointer-events: none;
+}
+
 .startIcon {
   display: inherit;
   margin-right: 8px;
diff --git a/src/diagram/components/Button.tsx b/src/diagram/components/Button.tsx
index 3282ef44..097681f7 100644
--- a/src/diagram/components/Button.tsx
+++ b/src/diagram/components/Button.tsx
@@ -9,14 +9,20 @@ import clsx from 'clsx';
 import styles from './Button.module.css';
 
 interface ButtonProps {
-  variant?: 'text' | 'contained';
-  color?: 'primary' | 'secondary';
+  variant?: 'text' | 'contained' | 'outlined';
+  color?: 'primary' | 'secondary' | 'inherit';
   size?: 'small' | 'medium' | 'large';
   disabled?: boolean;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   className?: string;
+  style?: React.CSSProperties;
   startIcon?: React.ReactNode;
   children?: React.ReactNode;
+  type?: 'button' | 'submit' | 'reset';
+  component?: 'button' | 'label';
+  'aria-label'?: string;
+  'aria-owns'?: string;
+  'aria-haspopup'?: boolean | 'true' | 'false';
 }
 
 export default class Button extends React.PureComponent<ButtonProps> {
@@ -28,8 +34,14 @@ export default class Button extends React.PureComponent<ButtonProps> {
       disabled,
       onClick,
       className,
+      style,
       startIcon,
       children,
+      type = 'button',
+      component = 'button',
+      'aria-label': ariaLabel,
+      'aria-owns': ariaOwns,
+      'aria-haspopup': ariaHaspopup,
     } = this.props;
 
     const sizeClass = size === 'small' ? styles.sizeSmall : size === 'large' ? styles.sizeLarge : styles.sizeMedium;
@@ -39,17 +51,41 @@ export default class Button extends React.PureComponent<ButtonProps> {
     if (variant === 'contained') {
       variantColorClass = color === 'secondary' ? styles.containedSecondary : styles.containedPrimary;
       disabledClass = disabled ? styles.disabledContained : undefined;
+    } else if (variant === 'outlined') {
+      variantColorClass =
+        color === 'secondary'
+          ? styles.outlinedSecondary
+          : color === 'inherit'
+            ? styles.outlinedInherit
+            : styles.outlinedPrimary;
+      disabledClass = disabled ? styles.disabledOutlined : undefined;
     } else {
-      variantColorClass = color === 'secondary' ? styles.textSecondary : styles.textPrimary;
+      variantColorClass =
+        color === 'secondary' ? styles.textSecondary : color === 'inherit' ? styles.textInherit : styles.textPrimary;
       disabledClass = disabled ? styles.disabledText : undefined;
     }
 
+    const buttonClassName = clsx(styles.button, sizeClass, variantColorClass, disabledClass, className);
+
+    if (component === 'label') {
+      return (
+        <label className={buttonClassName} style={style} aria-label={ariaLabel}>
+          {startIcon && <span className={styles.startIcon}>{startIcon}</span>}
+          {children}
+        </label>
+      );
+    }
+
     return (
       <button
-        className={clsx(styles.button, sizeClass, variantColorClass, disabledClass, className)}
+        className={buttonClassName}
+        style={style}
         disabled={disabled}
         onClick={onClick}
-        type="button"
+        type={type}
+        aria-label={ariaLabel}
+        aria-owns={ariaOwns}
+        aria-haspopup={ariaHaspopup}
       >
         {startIcon && <span className={styles.startIcon}>{startIcon}</span>}
         {children}
diff --git a/src/diagram/components/Card.module.css b/src/diagram/components/Card.module.css
new file mode 100644
index 00000000..e979882b
--- /dev/null
+++ b/src/diagram/components/Card.module.css
@@ -0,0 +1,31 @@
+.card {
+  background-color: #fff;
+  color: rgba(0, 0, 0, 0.87);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.outlined {
+  border: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+.elevation {
+  box-shadow:
+    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+}
+
+.cardContent {
+  padding: 16px;
+}
+
+.cardContent:last-child {
+  padding-bottom: 24px;
+}
+
+.cardActions {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+}
diff --git a/src/diagram/components/Card.tsx b/src/diagram/components/Card.tsx
new file mode 100644
index 00000000..10bcf12a
--- /dev/null
+++ b/src/diagram/components/Card.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import clsx from 'clsx';
+
+import styles from './Card.module.css';
+
+export interface CardProps {
+  variant?: 'outlined' | 'elevation';
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export default function Card(props: CardProps): React.ReactElement {
+  const { variant = 'elevation', className, style, children } = props;
+
+  return (
+    <div
+      className={clsx(styles.card, variant === 'outlined' ? styles.outlined : styles.elevation, className)}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+}
+
+export interface CardContentProps {
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export function CardContent(props: CardContentProps): React.ReactElement {
+  const { className, style, children } = props;
+
+  return (
+    <div className={clsx(styles.cardContent, className)} style={style}>
+      {children}
+    </div>
+  );
+}
+
+export interface CardActionsProps {
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export function CardActions(props: CardActionsProps): React.ReactElement {
+  const { className, style, children } = props;
+
+  return (
+    <div className={clsx(styles.cardActions, className)} style={style}>
+      {children}
+    </div>
+  );
+}
diff --git a/src/diagram/components/Checkbox.module.css b/src/diagram/components/Checkbox.module.css
new file mode 100644
index 00000000..1682a94f
--- /dev/null
+++ b/src/diagram/components/Checkbox.module.css
@@ -0,0 +1,46 @@
+.checkbox {
+  all: unset;
+  width: 18px;
+  height: 18px;
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid rgba(0, 0, 0, 0.54);
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.checkbox:disabled {
+  cursor: not-allowed;
+  opacity: 0.38;
+}
+
+.checkbox:focus-visible {
+  outline: 2px solid #1976d2;
+  outline-offset: 2px;
+}
+
+.checkbox[data-state='checked'] {
+  border-color: transparent;
+}
+
+.primary[data-state='checked'] {
+  background-color: #1976d2;
+}
+
+.secondary[data-state='checked'] {
+  background-color: #dc004e;
+}
+
+.indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}
+
+.checkIcon {
+  width: 14px;
+  height: 14px;
+}
diff --git a/src/diagram/components/Checkbox.tsx b/src/diagram/components/Checkbox.tsx
new file mode 100644
index 00000000..05c68445
--- /dev/null
+++ b/src/diagram/components/Checkbox.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+import clsx from 'clsx';
+
+import styles from './Checkbox.module.css';
+import { CheckIcon } from './icons';
+
+export interface CheckboxProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  name?: string;
+  color?: 'primary' | 'secondary';
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function Checkbox(props: CheckboxProps): React.ReactElement {
+  const { checked, defaultChecked, onChange, disabled, name, color = 'primary', className, style } = props;
+
+  return (
+    <RadixCheckbox.Root
+      className={clsx(styles.checkbox, color === 'secondary' ? styles.secondary : styles.primary, className)}
+      style={style}
+      checked={checked}
+      defaultChecked={defaultChecked}
+      onCheckedChange={onChange}
+      disabled={disabled}
+      name={name}
+    >
+      <RadixCheckbox.Indicator className={styles.indicator}>
+        <CheckIcon className={styles.checkIcon} />
+      </RadixCheckbox.Indicator>
+    </RadixCheckbox.Root>
+  );
+}
diff --git a/src/diagram/components/Dialog.module.css b/src/diagram/components/Dialog.module.css
new file mode 100644
index 00000000..1b0f84ec
--- /dev/null
+++ b/src/diagram/components/Dialog.module.css
@@ -0,0 +1,80 @@
+.overlay {
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  inset: 0;
+  z-index: 1200;
+  animation: fadeIn 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.content {
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow:
+    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
+    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
+    0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 600px;
+  max-height: 85vh;
+  overflow-y: auto;
+  z-index: 1300;
+  animation: contentShow 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+.content:focus {
+  outline: none;
+}
+
+.title {
+  margin: 0;
+  padding: 16px 24px;
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.6;
+  color: rgba(0, 0, 0, 0.87);
+}
+
+.dialogContent {
+  padding: 8px 24px;
+  flex: 1 1 auto;
+  overflow-y: auto;
+}
+
+.contentText {
+  margin: 0;
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  justify-content: flex-end;
+  gap: 8px;
+}
diff --git a/src/diagram/components/Dialog.tsx b/src/diagram/components/Dialog.tsx
new file mode 100644
index 00000000..97b9e7ba
--- /dev/null
+++ b/src/diagram/components/Dialog.tsx
@@ -0,0 +1,110 @@
+import * as React from 'react';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import clsx from 'clsx';
+
+import styles from './Dialog.module.css';
+
+export interface DialogProps {
+  open: boolean;
+  onClose?: () => void;
+  disableEscapeKeyDown?: boolean;
+  'aria-labelledby'?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export function Dialog(props: DialogProps): React.ReactElement {
+  const { open, onClose, disableEscapeKeyDown, className, style, children } = props;
+
+  return (
+    <RadixDialog.Root
+      open={open}
+      onOpenChange={(isOpen) => {
+        if (!isOpen && onClose) {
+          onClose();
+        }
+      }}
+    >
+      <RadixDialog.Portal>
+        <RadixDialog.Overlay className={styles.overlay} />
+        <RadixDialog.Content
+          className={clsx(styles.content, className)}
+          style={style}
+          onEscapeKeyDown={(event) => {
+            if (disableEscapeKeyDown) {
+              event.preventDefault();
+            }
+          }}
+        >
+          {children}
+        </RadixDialog.Content>
+      </RadixDialog.Portal>
+    </RadixDialog.Root>
+  );
+}
+
+export interface DialogTitleProps {
+  id?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export function DialogTitle(props: DialogTitleProps): React.ReactElement {
+  const { id, className, style, children } = props;
+
+  return (
+    <RadixDialog.Title id={id} className={clsx(styles.title, className)} style={style}>
+      {children}
+    </RadixDialog.Title>
+  );
+}
+
+export interface DialogContentProps {
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export function DialogContent(props: DialogContentProps): React.ReactElement {
+  const { className, style, children } = props;
+
+  return (
+    <div className={clsx(styles.dialogContent, className)} style={style}>
+      {children}
+    </div>
+  );
+}
+
+export interface DialogContentTextProps {
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export function DialogContentText(props: DialogContentTextProps): React.ReactElement {
+  const { className, style, children } = props;
+
+  return (
+    <p className={clsx(styles.contentText, className)} style={style}>
+      {children}
+    </p>
+  );
+}
+
+export interface DialogActionsProps {
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export function DialogActions(props: DialogActionsProps): React.ReactElement {
+  const { className, style, children } = props;
+
+  return (
+    <div className={clsx(styles.actions, className)} style={style}>
+      {children}
+    </div>
+  );
+}
diff --git a/src/diagram/components/FormControlLabel.module.css b/src/diagram/components/FormControlLabel.module.css
new file mode 100644
index 00000000..030610bd
--- /dev/null
+++ b/src/diagram/components/FormControlLabel.module.css
@@ -0,0 +1,12 @@
+.formControlLabel {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  vertical-align: middle;
+  margin-left: -11px;
+  margin-right: 16px;
+}
+
+.label {
+  padding: 9px;
+}
diff --git a/src/diagram/components/FormControlLabel.tsx b/src/diagram/components/FormControlLabel.tsx
new file mode 100644
index 00000000..acfb7703
--- /dev/null
+++ b/src/diagram/components/FormControlLabel.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import clsx from 'clsx';
+
+import styles from './FormControlLabel.module.css';
+
+export interface FormControlLabelProps {
+  control: React.ReactElement;
+  label: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function FormControlLabel(props: FormControlLabelProps): React.ReactElement {
+  const { control, label, className, style } = props;
+
+  return (
+    <label className={clsx(styles.formControlLabel, className)} style={style}>
+      {control}
+      <span className={styles.label}>{label}</span>
+    </label>
+  );
+}
diff --git a/src/diagram/components/ImageList.module.css b/src/diagram/components/ImageList.module.css
new file mode 100644
index 00000000..239759c9
--- /dev/null
+++ b/src/diagram/components/ImageList.module.css
@@ -0,0 +1,12 @@
+.imageList {
+  display: grid;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  overflow-y: auto;
+}
+
+.imageListItem {
+  overflow: hidden;
+  position: relative;
+}
diff --git a/src/diagram/components/ImageList.tsx b/src/diagram/components/ImageList.tsx
new file mode 100644
index 00000000..14481e82
--- /dev/null
+++ b/src/diagram/components/ImageList.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import clsx from 'clsx';
+
+import styles from './ImageList.module.css';
+
+export interface ImageListProps {
+  cols?: number;
+  gap?: number;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export default function ImageList(props: ImageListProps): React.ReactElement {
+  const { cols = 2, gap = 4, className, style, children } = props;
+
+  return (
+    <ul
+      className={clsx(styles.imageList, className)}
+      style={{
+        gridTemplateColumns: `repeat(${cols}, 1fr)`,
+        gap: `${gap}px`,
+        ...style,
+      }}
+    >
+      {children}
+    </ul>
+  );
+}
+
+export interface ImageListItemProps {
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export function ImageListItem(props: ImageListItemProps): React.ReactElement {
+  const { className, style, children } = props;
+
+  return (
+    <li className={clsx(styles.imageListItem, className)} style={style}>
+      {children}
+    </li>
+  );
+}
diff --git a/src/diagram/components/InputAdornment.module.css b/src/diagram/components/InputAdornment.module.css
new file mode 100644
index 00000000..de4cc9c7
--- /dev/null
+++ b/src/diagram/components/InputAdornment.module.css
@@ -0,0 +1,16 @@
+.adornment {
+  display: flex;
+  height: 0.01em;
+  max-height: 2em;
+  align-items: center;
+  white-space: nowrap;
+  color: rgba(0, 0, 0, 0.54);
+}
+
+.positionStart {
+  margin-right: 8px;
+}
+
+.positionEnd {
+  margin-left: 8px;
+}
diff --git a/src/diagram/components/InputAdornment.tsx b/src/diagram/components/InputAdornment.tsx
new file mode 100644
index 00000000..3bd0c8a8
--- /dev/null
+++ b/src/diagram/components/InputAdornment.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import clsx from 'clsx';
+
+import styles from './InputAdornment.module.css';
+
+export interface InputAdornmentProps {
+  position: 'start' | 'end';
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export default function InputAdornment(props: InputAdornmentProps): React.ReactElement {
+  const { position, className, style, children } = props;
+
+  return (
+    <div
+      className={clsx(styles.adornment, position === 'start' ? styles.positionStart : styles.positionEnd, className)}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/src/diagram/components/Menu.module.css b/src/diagram/components/Menu.module.css
new file mode 100644
index 00000000..9164580c
--- /dev/null
+++ b/src/diagram/components/Menu.module.css
@@ -0,0 +1,45 @@
+.menuContent {
+  min-width: 120px;
+  background-color: #fff;
+  border-radius: 4px;
+  padding: 8px 0;
+  box-shadow:
+    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+  z-index: 1300;
+  animation: fadeIn 0.1s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.menuItem {
+  display: flex;
+  align-items: center;
+  padding: 6px 16px;
+  min-height: 48px;
+  font-size: 1rem;
+  line-height: 1.5;
+  cursor: pointer;
+  color: rgba(0, 0, 0, 0.87);
+  outline: none;
+}
+
+.menuItem:hover,
+.menuItem:focus {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+.menuItem[data-disabled] {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
diff --git a/src/diagram/components/Menu.tsx b/src/diagram/components/Menu.tsx
new file mode 100644
index 00000000..98118803
--- /dev/null
+++ b/src/diagram/components/Menu.tsx
@@ -0,0 +1,80 @@
+import * as React from 'react';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import clsx from 'clsx';
+
+import styles from './Menu.module.css';
+
+export interface MenuProps {
+  anchorEl: HTMLElement | null;
+  open: boolean;
+  onClose: () => void;
+  anchorOrigin?: { vertical: 'top' | 'bottom'; horizontal: 'left' | 'right' };
+  transformOrigin?: { vertical: 'top' | 'bottom'; horizontal: 'left' | 'right' };
+  id?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export function Menu(props: MenuProps): React.ReactElement {
+  const { anchorEl, open, onClose, anchorOrigin, id, className, style, children } = props;
+
+  const side = anchorOrigin?.vertical === 'top' ? 'top' : 'bottom';
+  const align = anchorOrigin?.horizontal === 'right' ? 'end' : 'start';
+
+  return (
+    <DropdownMenu.Root open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DropdownMenu.Trigger asChild>
+        <span
+          style={{
+            position: 'fixed',
+            top: anchorEl?.getBoundingClientRect().bottom ?? 0,
+            left: anchorEl?.getBoundingClientRect().left ?? 0,
+            width: anchorEl?.getBoundingClientRect().width ?? 0,
+            height: 0,
+            pointerEvents: 'none',
+          }}
+        />
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          id={id}
+          className={clsx(styles.menuContent, className)}
+          style={style}
+          side={side}
+          align={align}
+          sideOffset={0}
+        >
+          {children}
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+}
+
+export interface MenuItemProps {
+  onClick?: (event: React.MouseEvent) => void;
+  disabled?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export function MenuItem(props: MenuItemProps): React.ReactElement {
+  const { onClick, disabled, className, style, children } = props;
+
+  return (
+    <DropdownMenu.Item
+      className={clsx(styles.menuItem, className)}
+      style={style}
+      disabled={disabled}
+      onSelect={(event) => {
+        if (onClick) {
+          onClick(event as unknown as React.MouseEvent);
+        }
+      }}
+    >
+      {children}
+    </DropdownMenu.Item>
+  );
+}
diff --git a/src/diagram/components/Paper.module.css b/src/diagram/components/Paper.module.css
new file mode 100644
index 00000000..b0e65467
--- /dev/null
+++ b/src/diagram/components/Paper.module.css
@@ -0,0 +1,24 @@
+.paper {
+  background-color: #fff;
+  color: rgba(0, 0, 0, 0.87);
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  border-radius: 4px;
+}
+
+.elevation0 {
+  box-shadow: none;
+}
+
+.elevation1 {
+  box-shadow:
+    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+}
+
+.elevation2 {
+  box-shadow:
+    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+}
diff --git a/src/diagram/components/Paper.tsx b/src/diagram/components/Paper.tsx
new file mode 100644
index 00000000..3d5b8e65
--- /dev/null
+++ b/src/diagram/components/Paper.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import clsx from 'clsx';
+
+import styles from './Paper.module.css';
+
+export interface PaperProps {
+  elevation?: number;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export default function Paper(props: PaperProps): React.ReactElement {
+  const { elevation = 1, className, style, children } = props;
+
+  const elevationClass = elevation === 0 ? styles.elevation0 : elevation <= 4 ? styles.elevation1 : styles.elevation2;
+
+  return (
+    <div className={clsx(styles.paper, elevationClass, className)} style={style}>
+      {children}
+    </div>
+  );
+}
diff --git a/src/diagram/components/TextField.module.css b/src/diagram/components/TextField.module.css
index 0202b1b6..512bc24a 100644
--- a/src/diagram/components/TextField.module.css
+++ b/src/diagram/components/TextField.module.css
@@ -143,3 +143,28 @@
 .standardLabelError {
   color: var(--color-error);
 }
+
+/* Dense margin */
+.marginDense {
+  margin-top: 8px;
+  margin-bottom: 4px;
+}
+
+/* Input container for adornments */
+.inputContainer {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+/* Helper text */
+.helperText {
+  font-size: 0.75rem;
+  margin: 3px 14px 0;
+  color: rgba(0, 0, 0, 0.6);
+  line-height: 1.66;
+}
+
+.helperTextError {
+  color: var(--color-error);
+}
diff --git a/src/diagram/components/TextField.tsx b/src/diagram/components/TextField.tsx
index 0ce204be..f4998117 100644
--- a/src/diagram/components/TextField.tsx
+++ b/src/diagram/components/TextField.tsx
@@ -17,16 +17,22 @@ interface TextFieldProps {
   value?: string | number;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   type?: string;
-  margin?: 'none' | 'normal';
+  margin?: 'none' | 'normal' | 'dense';
   fullWidth?: boolean;
   error?: boolean;
+  helperText?: React.ReactNode;
   placeholder?: string;
   className?: string;
+  autoFocus?: boolean;
+  autoComplete?: string;
+  name?: string;
   InputProps?: {
     disableUnderline?: boolean;
     ref?: React.Ref<HTMLDivElement>;
+    startAdornment?: React.ReactNode;
   };
   inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 
 interface TextFieldState {
@@ -66,10 +72,15 @@ export default class TextField extends React.PureComponent<TextFieldProps, TextF
       margin,
       fullWidth,
       error,
+      helperText,
       placeholder,
       className,
+      autoFocus,
+      autoComplete,
+      name,
       InputProps,
       inputProps,
+      onKeyPress,
       ...rest
     } = this.props;
     const { isFocused, generatedId } = this.state;
@@ -81,10 +92,13 @@ export default class TextField extends React.PureComponent<TextFieldProps, TextF
     // Extract onFocus/onBlur from inputProps since we chain them in our handlers
     const { onFocus: _onFocus, onBlur: _onBlur, ...restInputProps } = inputProps || {};
 
+    const startAdornment = InputProps?.startAdornment;
+
     const rootClasses = clsx(
       styles.root,
       fullWidth && styles.fullWidth,
       margin === 'normal' && styles.marginNormal,
+      margin === 'dense' && styles.marginDense,
       className,
     );
 
@@ -116,19 +130,27 @@ export default class TextField extends React.PureComponent<TextFieldProps, TextF
                 {label}
               </label>
             )}
-            <input
-              id={inputId}
-              className={styles.standardInput}
-              value={value}
-              onChange={onChange}
-              type={type}
-              placeholder={placeholder}
-              onFocus={this.handleFocus}
-              onBlur={this.handleBlur}
-              {...restInputProps}
-              {...rest}
-            />
+            <div className={styles.inputContainer}>
+              {startAdornment}
+              <input
+                id={inputId}
+                className={styles.standardInput}
+                value={value}
+                onChange={onChange}
+                type={type}
+                placeholder={placeholder}
+                onFocus={this.handleFocus}
+                onBlur={this.handleBlur}
+                autoFocus={autoFocus}
+                autoComplete={autoComplete}
+                name={name}
+                onKeyPress={onKeyPress}
+                {...restInputProps}
+                {...rest}
+              />
+            </div>
           </div>
+          {helperText && <p className={clsx(styles.helperText, error && styles.helperTextError)}>{helperText}</p>}
         </div>
       );
     }
@@ -157,19 +179,27 @@ export default class TextField extends React.PureComponent<TextFieldProps, TextF
               {label}
             </label>
           )}
-          <input
-            id={inputId}
-            className={styles.outlinedInput}
-            value={value}
-            onChange={onChange}
-            type={type}
-            placeholder={placeholder}
-            onFocus={this.handleFocus}
-            onBlur={this.handleBlur}
-            {...restInputProps}
-            {...rest}
-          />
+          <div className={styles.inputContainer}>
+            {startAdornment}
+            <input
+              id={inputId}
+              className={styles.outlinedInput}
+              value={value}
+              onChange={onChange}
+              type={type}
+              placeholder={placeholder}
+              onFocus={this.handleFocus}
+              onBlur={this.handleBlur}
+              autoFocus={autoFocus}
+              autoComplete={autoComplete}
+              name={name}
+              onKeyPress={onKeyPress}
+              {...restInputProps}
+              {...rest}
+            />
+          </div>
         </div>
+        {helperText && <p className={clsx(styles.helperText, error && styles.helperTextError)}>{helperText}</p>}
       </div>
     );
   }
diff --git a/src/diagram/components/TextLink.module.css b/src/diagram/components/TextLink.module.css
new file mode 100644
index 00000000..c3b5f912
--- /dev/null
+++ b/src/diagram/components/TextLink.module.css
@@ -0,0 +1,20 @@
+.link {
+  color: #1976d2;
+  cursor: pointer;
+}
+
+.underlineNone {
+  text-decoration: none;
+}
+
+.underlineHover {
+  text-decoration: none;
+}
+
+.underlineHover:hover {
+  text-decoration: underline;
+}
+
+.underlineAlways {
+  text-decoration: underline;
+}
diff --git a/src/diagram/components/TextLink.tsx b/src/diagram/components/TextLink.tsx
new file mode 100644
index 00000000..657786c4
--- /dev/null
+++ b/src/diagram/components/TextLink.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import clsx from 'clsx';
+
+import styles from './TextLink.module.css';
+
+export interface TextLinkProps {
+  href?: string;
+  underline?: 'none' | 'hover' | 'always';
+  onClick?: (event: React.MouseEvent) => void;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export default function TextLink(props: TextLinkProps): React.ReactElement {
+  const { href, underline = 'always', onClick, className, style, children } = props;
+
+  const underlineClass =
+    underline === 'none'
+      ? styles.underlineNone
+      : underline === 'hover'
+        ? styles.underlineHover
+        : styles.underlineAlways;
+
+  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    if (onClick) {
+      onClick(event);
+    }
+  };
+
+  return (
+    <a href={href} onClick={handleClick} className={clsx(styles.link, underlineClass, className)} style={style}>
+      {children}
+    </a>
+  );
+}
diff --git a/src/diagram/components/Toolbar.module.css b/src/diagram/components/Toolbar.module.css
new file mode 100644
index 00000000..e99c018d
--- /dev/null
+++ b/src/diagram/components/Toolbar.module.css
@@ -0,0 +1,22 @@
+.toolbar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.regular {
+  min-height: 64px;
+}
+
+.dense {
+  min-height: 48px;
+}
+
+@media (min-width: 600px) {
+  .toolbar {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+}
diff --git a/src/diagram/components/Toolbar.tsx b/src/diagram/components/Toolbar.tsx
new file mode 100644
index 00000000..ea9d74c4
--- /dev/null
+++ b/src/diagram/components/Toolbar.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import clsx from 'clsx';
+
+import styles from './Toolbar.module.css';
+
+export interface ToolbarProps {
+  variant?: 'dense' | 'regular';
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export default function Toolbar(props: ToolbarProps): React.ReactElement {
+  const { variant = 'regular', className, style, children } = props;
+
+  return (
+    <div className={clsx(styles.toolbar, variant === 'dense' ? styles.dense : styles.regular, className)} style={style}>
+      {children}
+    </div>
+  );
+}
diff --git a/src/diagram/components/icons.tsx b/src/diagram/components/icons.tsx
index 8891aec3..810b9f48 100644
--- a/src/diagram/components/icons.tsx
+++ b/src/diagram/components/icons.tsx
@@ -94,3 +94,33 @@ export const WarningIcon = (props: IconProps) => (
     <path d="M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z" />
   </SvgIcon>
 );
+
+export const CheckIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
+  </SvgIcon>
+);
+
+export const AccountCircleIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6m0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20" />
+  </SvgIcon>
+);
+
+export const ExpandMoreIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z" />
+  </SvgIcon>
+);
+
+export const AppleIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25" />
+  </SvgIcon>
+);
+
+export const EmailIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 4-8 5-8-5V6l8 5 8-5z" />
+  </SvgIcon>
+);
diff --git a/src/diagram/index.ts b/src/diagram/index.ts
index d9b4215f..b6806388 100644
--- a/src/diagram/index.ts
+++ b/src/diagram/index.ts
@@ -2,6 +2,39 @@
 // Use of this source code is governed by the Apache License,
 // Version 2.0, that can be found in the LICENSE file.
 
+import './reset.css';
+
 export { Editor } from './Editor';
 export type { ProtobufProjectData, JsonProjectData, ProjectData } from './Editor';
 export { renderSvgToString } from './render-common';
+
+// UI Components
+export { default as Button } from './components/Button';
+export { default as IconButton } from './components/IconButton';
+export { default as TextField } from './components/TextField';
+export { default as SvgIcon } from './components/SvgIcon';
+export type { SvgIconProps } from './components/SvgIcon';
+export { default as Drawer } from './components/Drawer';
+export { default as Snackbar, SnackbarContent } from './components/Snackbar';
+export { default as SpeedDial, SpeedDialAction, SpeedDialIcon } from './components/SpeedDial';
+export type { CloseReason } from './components/SpeedDial';
+export { Tabs, Tab } from './components/Tabs';
+export { default as Autocomplete } from './components/Autocomplete';
+
+// New components
+export { default as Avatar } from './components/Avatar';
+export { default as Paper } from './components/Paper';
+export { default as TextLink } from './components/TextLink';
+export { default as InputAdornment } from './components/InputAdornment';
+export { default as AppBar } from './components/AppBar';
+export { default as Toolbar } from './components/Toolbar';
+export { default as ImageList, ImageListItem } from './components/ImageList';
+export { default as Card, CardContent, CardActions } from './components/Card';
+export { default as Checkbox } from './components/Checkbox';
+export { default as FormControlLabel } from './components/FormControlLabel';
+export { Menu, MenuItem } from './components/Menu';
+export { Accordion, AccordionSummary, AccordionDetails } from './components/Accordion';
+export { Dialog, DialogTitle, DialogContent, DialogActions, DialogContentText } from './components/Dialog';
+
+// Icons
+export * from './components/icons';
diff --git a/src/diagram/package.json b/src/diagram/package.json
index a2e90ec7..dd0d86a8 100644
--- a/src/diagram/package.json
+++ b/src/diagram/package.json
@@ -22,6 +22,10 @@
     }
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-checkbox": "^1.1.0",
+    "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.0",
     "@radix-ui/react-tabs": "^1.1.13",
     "@system-dynamics/core": "^1.3.5",
     "@system-dynamics/engine2": "^2.0.0",
@@ -72,6 +76,6 @@
     "clean": "rm -rf ./lib ./lib.browser",
     "build": "tsc && tsc -p tsconfig.browser.json && yarn build:css-stubs && yarn build:copy-css",
     "build:css-stubs": "find . -name '*.module.css' -not -path './lib*' -not -path './node_modules/*' | while read src; do dir=$(dirname \"$src\" | sed 's|^\\./||'); mkdir -p \"lib/$dir\"; echo \"module.exports = new Proxy({}, { get: () => '' });\" > \"lib/$dir/$(basename \"$src\")\"; done",
-    "build:copy-css": "find . -name '*.module.css' -not -path './lib*' -not -path './node_modules/*' | while read src; do dir=$(dirname \"$src\" | sed 's|^\\./||'); mkdir -p \"lib.browser/$dir\"; cp \"$src\" \"lib.browser/$dir/\"; done"
+    "build:copy-css": "find . -name '*.css' -not -path './lib*' -not -path './node_modules/*' | while read src; do dir=$(dirname \"$src\" | sed 's|^\\./||'); mkdir -p \"lib.browser/$dir\"; cp \"$src\" \"lib.browser/$dir/\"; done"
   }
 }
diff --git a/src/diagram/reset.css b/src/diagram/reset.css
new file mode 100644
index 00000000..24222458
--- /dev/null
+++ b/src/diagram/reset.css
@@ -0,0 +1,66 @@
+/* Box sizing */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margin/padding */
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Remove list styles */
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+/* Body defaults */
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+}
+
+/* Smooth scroll */
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+/* A elements without class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+/* Images */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Form elements */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Button reset */
+button {
+  cursor: pointer;
+}
diff --git a/yarn.lock b/yarn.lock
index 0e79354b..eb9ef4c9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -85,7 +85,7 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-globals/-/helper-globals-7.28.0.tgz#b9430df2aa4e17bc28665eadeae8aa1d985e6674"
   integrity sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==
 
-"@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.28.6":
+"@babel/helper-module-imports@^7.28.6":
   version "7.28.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz#60632cbd6ffb70b22823187201116762a03e2d5c"
   integrity sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==
@@ -256,7 +256,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.28.6"
 
-"@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.9", "@babel/runtime@^7.24.5", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.24.5", "@babel/runtime@^7.3.1":
   version "7.28.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.28.6.tgz#d267a43cb1836dc4d182cce93ae75ba954ef6d2b"
   integrity sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==
@@ -375,113 +375,6 @@
   dependencies:
     tslib "^2.4.0"
 
-"@emotion/babel-plugin@^11.13.5":
-  version "11.13.5"
-  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz#eab8d65dbded74e0ecfd28dc218e75607c4e7bc0"
-  integrity sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==
-  dependencies:
-    "@babel/helper-module-imports" "^7.16.7"
-    "@babel/runtime" "^7.18.3"
-    "@emotion/hash" "^0.9.2"
-    "@emotion/memoize" "^0.9.0"
-    "@emotion/serialize" "^1.3.3"
-    babel-plugin-macros "^3.1.0"
-    convert-source-map "^1.5.0"
-    escape-string-regexp "^4.0.0"
-    find-root "^1.1.0"
-    source-map "^0.5.7"
-    stylis "4.2.0"
-
-"@emotion/cache@^11.13.5", "@emotion/cache@^11.14.0":
-  version "11.14.0"
-  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.14.0.tgz#ee44b26986eeb93c8be82bb92f1f7a9b21b2ed76"
-  integrity sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==
-  dependencies:
-    "@emotion/memoize" "^0.9.0"
-    "@emotion/sheet" "^1.4.0"
-    "@emotion/utils" "^1.4.2"
-    "@emotion/weak-memoize" "^0.4.0"
-    stylis "4.2.0"
-
-"@emotion/hash@^0.9.2":
-  version "0.9.2"
-  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.2.tgz#ff9221b9f58b4dfe61e619a7788734bd63f6898b"
-  integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==
-
-"@emotion/is-prop-valid@^1.3.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.4.0.tgz#e9ad47adff0b5c94c72db3669ce46de33edf28c0"
-  integrity sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==
-  dependencies:
-    "@emotion/memoize" "^0.9.0"
-
-"@emotion/memoize@^0.9.0":
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.9.0.tgz#745969d649977776b43fc7648c556aaa462b4102"
-  integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==
-
-"@emotion/react@^11.0.0":
-  version "11.14.0"
-  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.14.0.tgz#cfaae35ebc67dd9ef4ea2e9acc6cd29e157dd05d"
-  integrity sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==
-  dependencies:
-    "@babel/runtime" "^7.18.3"
-    "@emotion/babel-plugin" "^11.13.5"
-    "@emotion/cache" "^11.14.0"
-    "@emotion/serialize" "^1.3.3"
-    "@emotion/use-insertion-effect-with-fallbacks" "^1.2.0"
-    "@emotion/utils" "^1.4.2"
-    "@emotion/weak-memoize" "^0.4.0"
-    hoist-non-react-statics "^3.3.1"
-
-"@emotion/serialize@^1.3.3":
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.3.3.tgz#d291531005f17d704d0463a032fe679f376509e8"
-  integrity sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==
-  dependencies:
-    "@emotion/hash" "^0.9.2"
-    "@emotion/memoize" "^0.9.0"
-    "@emotion/unitless" "^0.10.0"
-    "@emotion/utils" "^1.4.2"
-    csstype "^3.0.2"
-
-"@emotion/sheet@^1.4.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.4.0.tgz#c9299c34d248bc26e82563735f78953d2efca83c"
-  integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==
-
-"@emotion/styled@^11.0.0":
-  version "11.14.1"
-  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.14.1.tgz#8c34bed2948e83e1980370305614c20955aacd1c"
-  integrity sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==
-  dependencies:
-    "@babel/runtime" "^7.18.3"
-    "@emotion/babel-plugin" "^11.13.5"
-    "@emotion/is-prop-valid" "^1.3.0"
-    "@emotion/serialize" "^1.3.3"
-    "@emotion/use-insertion-effect-with-fallbacks" "^1.2.0"
-    "@emotion/utils" "^1.4.2"
-
-"@emotion/unitless@^0.10.0":
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.10.0.tgz#2af2f7c7e5150f497bdabd848ce7b218a27cf745"
-  integrity sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==
-
-"@emotion/use-insertion-effect-with-fallbacks@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz#8a8cb77b590e09affb960f4ff1e9a89e532738bf"
-  integrity sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==
-
-"@emotion/utils@^1.4.2":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.4.2.tgz#6df6c45881fcb1c412d6688a311a98b7f59c1b52"
-  integrity sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==
-
-"@emotion/weak-memoize@^0.4.0":
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz#5e13fac887f08c44f76b0ccaf3370eb00fec9bb6"
-  integrity sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==
-
 "@eslint-community/eslint-utils@^4.8.0", "@eslint-community/eslint-utils@^4.9.1":
   version "4.9.1"
   resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz#4e90af67bc51ddee6cdef5284edf572ec376b595"
@@ -668,6 +561,33 @@
   dependencies:
     tslib "^2.1.0"
 
+"@floating-ui/core@^1.7.4":
+  version "1.7.4"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.7.4.tgz#4a006a6e01565c0f87ba222c317b056a2cffd2f4"
+  integrity sha512-C3HlIdsBxszvm5McXlB8PeOEWfBhcGBTZGkGlWc2U0KFY5IwG5OQEuQ8rq52DZmcHDlPLd+YFBK+cZcytwIFWg==
+  dependencies:
+    "@floating-ui/utils" "^0.2.10"
+
+"@floating-ui/dom@^1.7.5":
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.7.5.tgz#60bfc83a4d1275b2a90db76bf42ca2a5f2c231c2"
+  integrity sha512-N0bD2kIPInNHUHehXhMke1rBGs1dwqvC9O9KYMyyjK7iXt7GAhnro7UlcuYcGdS/yYOlq0MAVgrow8IbWJwyqg==
+  dependencies:
+    "@floating-ui/core" "^1.7.4"
+    "@floating-ui/utils" "^0.2.10"
+
+"@floating-ui/react-dom@^2.0.0":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.7.tgz#529475cc16ee4976ba3387968117e773d9aa703e"
+  integrity sha512-0tLRojf/1Go2JgEVm+3Frg9A3IW8bJgKgdO0BN5RkF//ufuz2joZM63Npau2ff3J6lUVYgDSNzNkR+aH3IVfjg==
+  dependencies:
+    "@floating-ui/dom" "^1.7.5"
+
+"@floating-ui/utils@^0.2.10":
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.10.tgz#a2a1e3812d14525f725d011a73eceb41fef5bc1c"
+  integrity sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==
+
 "@google-cloud/cloud-sql-connector@^1.3.3":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@google-cloud/cloud-sql-connector/-/cloud-sql-connector-1.9.0.tgz#cf805d34dc6a9ea746231e33c8340fe12973b4d0"
@@ -1505,87 +1425,6 @@
     "@module-federation/runtime" "0.22.0"
     "@module-federation/sdk" "0.22.0"
 
-"@mui/core-downloads-tracker@^5.18.0":
-  version "5.18.0"
-  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.18.0.tgz#85019a8704b0f63305fc5600635ee663810f2b66"
-  integrity sha512-jbhwoQ1AY200PSSOrNXmrFCaSDSJWP7qk6urkTmIirvRXDROkqe+QwcLlUiw/PrREwsIF/vm3/dAXvjlMHF0RA==
-
-"@mui/icons-material@^5.0.0":
-  version "5.18.0"
-  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.18.0.tgz#97d87f1b7bee5fa7b9ba844518631de3112c1e57"
-  integrity sha512-1s0vEZj5XFXDMmz3Arl/R7IncFqJ+WQ95LDp1roHWGDE2oCO3IS4/hmiOv1/8SD9r6B7tv9GLiqVZYHo+6PkTg==
-  dependencies:
-    "@babel/runtime" "^7.23.9"
-
-"@mui/material@^5.0.0":
-  version "5.18.0"
-  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.18.0.tgz#71e72d52338252edc6f8d9461e04fdf0d61905cd"
-  integrity sha512-bbH/HaJZpFtXGvWg3TsBWG4eyt3gah3E7nCNU8GLyRjVoWcA91Vm/T+sjHfUcwgJSw9iLtucfHBoq+qW/T30aA==
-  dependencies:
-    "@babel/runtime" "^7.23.9"
-    "@mui/core-downloads-tracker" "^5.18.0"
-    "@mui/system" "^5.18.0"
-    "@mui/types" "~7.2.15"
-    "@mui/utils" "^5.17.1"
-    "@popperjs/core" "^2.11.8"
-    "@types/react-transition-group" "^4.4.10"
-    clsx "^2.1.0"
-    csstype "^3.1.3"
-    prop-types "^15.8.1"
-    react-is "^19.0.0"
-    react-transition-group "^4.4.5"
-
-"@mui/private-theming@^5.17.1":
-  version "5.17.1"
-  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.17.1.tgz#b4b6fbece27830754ef78186e3f1307dca42f295"
-  integrity sha512-XMxU0NTYcKqdsG8LRmSoxERPXwMbp16sIXPcLVgLGII/bVNagX0xaheWAwFv8+zDK7tI3ajllkuD3GZZE++ICQ==
-  dependencies:
-    "@babel/runtime" "^7.23.9"
-    "@mui/utils" "^5.17.1"
-    prop-types "^15.8.1"
-
-"@mui/styled-engine@^5.18.0":
-  version "5.18.0"
-  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.18.0.tgz#914cca1385bb33ce0cde31721f529c8bd7fa301c"
-  integrity sha512-BN/vKV/O6uaQh2z5rXV+MBlVrEkwoS/TK75rFQ2mjxA7+NBo8qtTAOA4UaM0XeJfn7kh2wZ+xQw2HAx0u+TiBg==
-  dependencies:
-    "@babel/runtime" "^7.23.9"
-    "@emotion/cache" "^11.13.5"
-    "@emotion/serialize" "^1.3.3"
-    csstype "^3.1.3"
-    prop-types "^15.8.1"
-
-"@mui/system@^5.18.0":
-  version "5.18.0"
-  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.18.0.tgz#e55331203a40584b26c5a855a07949ac8973bfb6"
-  integrity sha512-ojZGVcRWqWhu557cdO3pWHloIGJdzVtxs3rk0F9L+x55LsUjcMUVkEhiF7E4TMxZoF9MmIHGGs0ZX3FDLAf0Xw==
-  dependencies:
-    "@babel/runtime" "^7.23.9"
-    "@mui/private-theming" "^5.17.1"
-    "@mui/styled-engine" "^5.18.0"
-    "@mui/types" "~7.2.15"
-    "@mui/utils" "^5.17.1"
-    clsx "^2.1.0"
-    csstype "^3.1.3"
-    prop-types "^15.8.1"
-
-"@mui/types@~7.2.15":
-  version "7.2.24"
-  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.24.tgz#5eff63129d9c29d80bbf2d2e561bd0690314dec2"
-  integrity sha512-3c8tRt/CbWZ+pEg7QpSwbdxOk36EfmhbKf6AGZsD1EcLDLTSZoxxJ86FVtcjxvjuhdyBiWKSTGZFaXCnidO2kw==
-
-"@mui/utils@^5.17.1":
-  version "5.17.1"
-  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.17.1.tgz#72ba4ffa79f7bdf69d67458139390f18484b6e6b"
-  integrity sha512-jEZ8FTqInt2WzxDV8bhImWBqeQRD99c/id/fq83H0ER9tFl+sfZlaAoCdznGvbSQQ9ividMxqSV2c7cC1vBcQg==
-  dependencies:
-    "@babel/runtime" "^7.23.9"
-    "@mui/types" "~7.2.15"
-    "@types/prop-types" "^15.7.12"
-    clsx "^2.1.1"
-    prop-types "^15.8.1"
-    react-is "^19.0.0"
-
 "@napi-rs/wasm-runtime@1.0.7":
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/@napi-rs/wasm-runtime/-/wasm-runtime-1.0.7.tgz#dcfea99a75f06209a235f3d941e3460a51e9b14c"
@@ -1779,11 +1618,6 @@
     "@pnpm/network.ca-file" "^1.0.1"
     config-chain "^1.1.11"
 
-"@popperjs/core@^2.11.8":
-  version "2.11.8"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
-  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
-
 "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf"
@@ -1842,6 +1676,56 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.3.tgz#e2dbc13bdc5e4168f4334f75832d7bdd3e2de5ba"
   integrity sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==
 
+"@radix-ui/react-accordion@^1.2.0":
+  version "1.2.12"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz#1fd70d4ef36018012b9e03324ff186de7a29c13f"
+  integrity sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==
+  dependencies:
+    "@radix-ui/primitive" "1.1.3"
+    "@radix-ui/react-collapsible" "1.1.12"
+    "@radix-ui/react-collection" "1.1.7"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-direction" "1.1.1"
+    "@radix-ui/react-id" "1.1.1"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
+
+"@radix-ui/react-arrow@1.1.7":
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz#e14a2657c81d961598c5e72b73dd6098acc04f09"
+  integrity sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==
+  dependencies:
+    "@radix-ui/react-primitive" "2.1.3"
+
+"@radix-ui/react-checkbox@^1.1.0":
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz#db45ca8a6d5c056a92f74edbb564acee05318b79"
+  integrity sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==
+  dependencies:
+    "@radix-ui/primitive" "1.1.3"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-presence" "1.1.5"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
+    "@radix-ui/react-use-previous" "1.1.1"
+    "@radix-ui/react-use-size" "1.1.1"
+
+"@radix-ui/react-collapsible@1.1.12":
+  version "1.1.12"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz#e2cc69a4490a2920f97c3c3150b0bf21281e3c49"
+  integrity sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==
+  dependencies:
+    "@radix-ui/primitive" "1.1.3"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-id" "1.1.1"
+    "@radix-ui/react-presence" "1.1.5"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
 "@radix-ui/react-collection@1.1.7":
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.1.7.tgz#d05c25ca9ac4695cc19ba91f42f686e3ea2d9aec"
@@ -1862,11 +1746,69 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.2.tgz#61628ef269a433382c364f6f1e3788a6dc213a36"
   integrity sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==
 
+"@radix-ui/react-dialog@^1.1.0":
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz#1de3d7a7e9a17a9874d29c07f5940a18a119b632"
+  integrity sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==
+  dependencies:
+    "@radix-ui/primitive" "1.1.3"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-dismissable-layer" "1.1.11"
+    "@radix-ui/react-focus-guards" "1.1.3"
+    "@radix-ui/react-focus-scope" "1.1.7"
+    "@radix-ui/react-id" "1.1.1"
+    "@radix-ui/react-portal" "1.1.9"
+    "@radix-ui/react-presence" "1.1.5"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-slot" "1.2.3"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
+    aria-hidden "^1.2.4"
+    react-remove-scroll "^2.6.3"
+
 "@radix-ui/react-direction@1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.1.1.tgz#39e5a5769e676c753204b792fbe6cf508e550a14"
   integrity sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==
 
+"@radix-ui/react-dismissable-layer@1.1.11":
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz#e33ab6f6bdaa00f8f7327c408d9f631376b88b37"
+  integrity sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==
+  dependencies:
+    "@radix-ui/primitive" "1.1.3"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+    "@radix-ui/react-use-escape-keydown" "1.1.1"
+
+"@radix-ui/react-dropdown-menu@^2.1.0":
+  version "2.1.16"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.16.tgz#5ee045c62bad8122347981c479d92b1ff24c7254"
+  integrity sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==
+  dependencies:
+    "@radix-ui/primitive" "1.1.3"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-id" "1.1.1"
+    "@radix-ui/react-menu" "2.1.16"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
+
+"@radix-ui/react-focus-guards@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz#2a5669e464ad5fde9f86d22f7fdc17781a4dfa7f"
+  integrity sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==
+
+"@radix-ui/react-focus-scope@1.1.7":
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz#dfe76fc103537d80bf42723a183773fd07bfb58d"
+  integrity sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+
 "@radix-ui/react-id@1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.1.tgz#1404002e79a03fe062b7e3864aa01e24bd1471f7"
@@ -1874,6 +1816,54 @@
   dependencies:
     "@radix-ui/react-use-layout-effect" "1.1.1"
 
+"@radix-ui/react-menu@2.1.16":
+  version "2.1.16"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-2.1.16.tgz#528a5a973c3a7413d3d49eb9ccd229aa52402911"
+  integrity sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==
+  dependencies:
+    "@radix-ui/primitive" "1.1.3"
+    "@radix-ui/react-collection" "1.1.7"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-direction" "1.1.1"
+    "@radix-ui/react-dismissable-layer" "1.1.11"
+    "@radix-ui/react-focus-guards" "1.1.3"
+    "@radix-ui/react-focus-scope" "1.1.7"
+    "@radix-ui/react-id" "1.1.1"
+    "@radix-ui/react-popper" "1.2.8"
+    "@radix-ui/react-portal" "1.1.9"
+    "@radix-ui/react-presence" "1.1.5"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-roving-focus" "1.1.11"
+    "@radix-ui/react-slot" "1.2.3"
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+    aria-hidden "^1.2.4"
+    react-remove-scroll "^2.6.3"
+
+"@radix-ui/react-popper@1.2.8":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.2.8.tgz#a79f39cdd2b09ab9fb50bf95250918422c4d9602"
+  integrity sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==
+  dependencies:
+    "@floating-ui/react-dom" "^2.0.0"
+    "@radix-ui/react-arrow" "1.1.7"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+    "@radix-ui/react-use-rect" "1.1.1"
+    "@radix-ui/react-use-size" "1.1.1"
+    "@radix-ui/rect" "1.1.1"
+
+"@radix-ui/react-portal@1.1.9":
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.9.tgz#14c3649fe48ec474ac51ed9f2b9f5da4d91c4472"
+  integrity sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==
+  dependencies:
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
 "@radix-ui/react-presence@1.1.5":
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.5.tgz#5d8f28ac316c32f078afce2996839250c10693db"
@@ -1945,11 +1935,42 @@
   dependencies:
     "@radix-ui/react-use-layout-effect" "1.1.1"
 
+"@radix-ui/react-use-escape-keydown@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz#b3fed9bbea366a118f40427ac40500aa1423cc29"
+  integrity sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==
+  dependencies:
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+
 "@radix-ui/react-use-layout-effect@1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz#0c4230a9eed49d4589c967e2d9c0d9d60a23971e"
   integrity sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==
 
+"@radix-ui/react-use-previous@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz#1a1ad5568973d24051ed0af687766f6c7cb9b5b5"
+  integrity sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==
+
+"@radix-ui/react-use-rect@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz#01443ca8ed071d33023c1113e5173b5ed8769152"
+  integrity sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==
+  dependencies:
+    "@radix-ui/rect" "1.1.1"
+
+"@radix-ui/react-use-size@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz#6de276ffbc389a537ffe4316f5b0f24129405b37"
+  integrity sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
+"@radix-ui/rect@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.1.1.tgz#78244efe12930c56fd255d7923865857c41ac8cb"
+  integrity sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==
+
 "@remix-run/router@1.23.2":
   version "1.23.2"
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.23.2.tgz#156c4b481c0bee22a19f7924728a67120de06971"
@@ -2740,11 +2761,6 @@
   dependencies:
     undici-types "~6.21.0"
 
-"@types/parse-json@^4.0.0":
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
-  integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
-
 "@types/passport-strategy@^0.2.35":
   version "0.2.38"
   resolved "https://registry.yarnpkg.com/@types/passport-strategy/-/passport-strategy-0.2.38.tgz#482abba0b165cd4553ec8b748f30b022bd6c04d3"
@@ -2760,11 +2776,6 @@
   dependencies:
     "@types/express" "*"
 
-"@types/prop-types@^15.7.12":
-  version "15.7.15"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.15.tgz#e6e5a86d602beaca71ce5163fadf5f95d70931c7"
-  integrity sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==
-
 "@types/qs@*":
   version "6.14.0"
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.14.0.tgz#d8b60cecf62f2db0fb68e5e006077b9178b85de5"
@@ -2787,11 +2798,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-transition-group@^4.4.10":
-  version "4.4.12"
-  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.12.tgz#b5d76568485b02a307238270bfe96cb51ee2a044"
-  integrity sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==
-
 "@types/react@*", "@types/react@>=16", "@types/react@^19.0.0":
   version "19.2.9"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-19.2.9.tgz#84ec7669742bb3e7e2e8d6a5258d95ead7764200"
@@ -3261,6 +3267,13 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
+aria-hidden@^1.2.4:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.6.tgz#73051c9b088114c795b1ea414e9c0fff874ffc1a"
+  integrity sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==
+  dependencies:
+    tslib "^2.0.0"
+
 aria-query@5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
@@ -3504,15 +3517,6 @@ babel-plugin-jest-hoist@30.2.0:
   dependencies:
     "@types/babel__core" "^7.20.5"
 
-babel-plugin-macros@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
-  integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-    cosmiconfig "^7.0.0"
-    resolve "^1.19.0"
-
 babel-preset-current-node-syntax@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.2.0.tgz#20730d6cdc7dda5d89401cab10ac6a32067acde6"
@@ -4121,7 +4125,7 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
-clsx@^2.1.0, clsx@^2.1.1:
+clsx@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
@@ -4345,11 +4349,6 @@ continuation-local-storage@^3.2.1:
     async-listener "^0.6.0"
     emitter-listener "^1.1.1"
 
-convert-source-map@^1.5.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
-  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
-
 convert-source-map@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
@@ -4413,17 +4412,6 @@ cors@^2.8.5:
     object-assign "^4"
     vary "^1"
 
-cosmiconfig@^7.0.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
-  integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==
-  dependencies:
-    "@types/parse-json" "^4.0.0"
-    import-fresh "^3.2.1"
-    parse-json "^5.0.0"
-    path-type "^4.0.0"
-    yaml "^1.10.0"
-
 crc-32@^1.2.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/crc-32/-/crc-32-1.2.2.tgz#3cad35a934b8bf71f25ca524b6da51fb7eace2ff"
@@ -4526,7 +4514,7 @@ cssstyle@^4.2.1:
     "@asamuzakjp/css-color" "^3.2.0"
     rrweb-cssom "^0.8.0"
 
-csstype@^3.0.2, csstype@^3.1.3, csstype@^3.2.2:
+csstype@^3.2.2:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.2.3.tgz#ec48c0f3e993e50648c86da559e2610995cf989a"
   integrity sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==
@@ -4731,6 +4719,11 @@ detect-newline@^3.1.0:
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
   integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
 
+detect-node-es@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
+  integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
+
 devlop@^1.0.0, devlop@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/devlop/-/devlop-1.1.0.tgz#4db7c2ca4dc6e0e834c30be70c94bbc976dc7018"
@@ -4779,14 +4772,6 @@ dom-accessibility-api@^0.5.9:
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
   integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
 
-dom-helpers@^5.0.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
-  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
-  dependencies:
-    "@babel/runtime" "^7.8.7"
-    csstype "^3.0.2"
-
 dom-serializer@^1.0.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
@@ -5788,11 +5773,6 @@ finalhandler@~1.3.1:
     statuses "~2.0.2"
     unpipe "~1.0.0"
 
-find-root@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
-  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
-
 find-up@^4.0.0, find-up@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
@@ -6140,6 +6120,11 @@ get-intrinsic@^1.2.4, get-intrinsic@^1.2.5, get-intrinsic@^1.2.6, get-intrinsic@
     hasown "^2.0.2"
     math-intrinsics "^1.1.0"
 
+get-nonce@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
+  integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
+
 get-package-type@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
@@ -6607,13 +6592,6 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.3.1:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
-  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
-  dependencies:
-    react-is "^16.7.0"
-
 hosted-git-info@^2.1.4:
   version "2.8.9"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
@@ -9794,7 +9772,7 @@ parse-json@^4.0.0:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
 
-parse-json@^5.0.0, parse-json@^5.2.0:
+parse-json@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
   integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
@@ -9924,11 +9902,6 @@ path-type@^3.0.0:
   dependencies:
     pify "^3.0.0"
 
-path-type@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
-  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
-
 pause@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/pause/-/pause-0.0.1.tgz#1d408b3fdb76923b9543d96fb4c9dfd535d9cb5d"
@@ -10198,7 +10171,7 @@ promise-retry@^2.0.1:
     err-code "^2.0.2"
     retry "^0.12.0"
 
-prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -10435,7 +10408,7 @@ react-is@18.2.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-is@^16.13.1, react-is@^16.7.0:
+react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -10450,11 +10423,6 @@ react-is@^18.0.0, react-is@^18.3.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
 
-react-is@^19.0.0:
-  version "19.2.3"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-19.2.3.tgz#eec2feb69c7fb31f77d0b5c08c10ae1c88886b29"
-  integrity sha512-qJNJfu81ByyabuG7hPFEbXqNcWSU3+eVus+KJs+0ncpGfMyYdvSmxiJxbWR65lYi1I+/0HBcliO029gc4F+PnA==
-
 react-lazy-with-preload@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-lazy-with-preload/-/react-lazy-with-preload-2.2.1.tgz#241edca4621a6e5f16026eec5ecbe64f4ce9ebd4"
@@ -10470,6 +10438,25 @@ react-refresh@^0.18.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.18.0.tgz#2dce97f4fe932a4d8142fa1630e475c1729c8062"
   integrity sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==
 
+react-remove-scroll-bar@^2.3.7:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz#99c20f908ee467b385b68a3469b4a3e750012223"
+  integrity sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==
+  dependencies:
+    react-style-singleton "^2.2.2"
+    tslib "^2.0.0"
+
+react-remove-scroll@^2.6.3:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz#6442da56791117661978ae99cd29be9026fecca0"
+  integrity sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==
+  dependencies:
+    react-remove-scroll-bar "^2.3.7"
+    react-style-singleton "^2.2.3"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.3"
+    use-sidecar "^1.1.3"
+
 react-router-dom@^6.29.0:
   version "6.30.3"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.30.3.tgz#42ae6dc4c7158bfb0b935f162b9621b29dddf740"
@@ -10485,6 +10472,14 @@ react-router@6.30.3:
   dependencies:
     "@remix-run/router" "1.23.2"
 
+react-style-singleton@^2.2.2, react-style-singleton@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.3.tgz#4265608be69a4d70cfe3047f2c6c88b2c3ace388"
+  integrity sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==
+  dependencies:
+    get-nonce "^1.0.0"
+    tslib "^2.0.0"
+
 react-syntax-highlighter@^15.6.1:
   version "15.6.6"
   resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.6.6.tgz#77417c81ebdc554300d0332800a2e1efe5b1190b"
@@ -10497,16 +10492,6 @@ react-syntax-highlighter@^15.6.1:
     prismjs "^1.30.0"
     refractor "^3.6.0"
 
-react-transition-group@^4.4.5:
-  version "4.4.5"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
-  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    dom-helpers "^5.0.1"
-    loose-envify "^1.4.0"
-    prop-types "^15.6.2"
-
 react@^18.3.1:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
@@ -10743,7 +10728,7 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
-resolve@^1.10.0, resolve@^1.19.0, resolve@^1.22.4, resolve@^1.22.8:
+resolve@^1.10.0, resolve@^1.22.4, resolve@^1.22.8:
   version "1.22.11"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.11.tgz#aad857ce1ffb8bfa9b0b1ac29f1156383f68c262"
   integrity sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==
@@ -11433,11 +11418,6 @@ source-map-support@^0.5.16:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map@^0.5.7:
-  version "0.5.7"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
-  integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
-
 source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
@@ -11798,11 +11778,6 @@ style-to-object@^0.4.1:
   dependencies:
     inline-style-parser "0.1.1"
 
-stylis@4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
-  integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
-
 superstatic@^9.2.0:
   version "9.2.0"
   resolved "https://registry.yarnpkg.com/superstatic/-/superstatic-9.2.0.tgz#c3d338e87fb1b695670c79db5affb18288441c32"
@@ -12545,6 +12520,21 @@ url@^0.11.4:
     punycode "^1.4.1"
     qs "^6.12.3"
 
+use-callback-ref@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.3.tgz#98d9fab067075841c5b2c6852090d5d0feabe2bf"
+  integrity sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==
+  dependencies:
+    tslib "^2.0.0"
+
+use-sidecar@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.3.tgz#10e7fd897d130b896e2c546c63a5e8233d00efdb"
+  integrity sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==
+  dependencies:
+    detect-node-es "^1.1.0"
+    tslib "^2.0.0"
+
 use-sync-external-store@^1.0.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz#b174bfa65cb2b526732d9f2ac0a408027876f32d"
@@ -12998,11 +12988,6 @@ yallist@^5.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-5.0.0.tgz#00e2de443639ed0d78fd87de0d27469fbcffb533"
   integrity sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==
 
-yaml@^1.10.0:
-  version "1.10.2"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
-  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
-
 yaml@^2.2.1, yaml@^2.4.1:
   version "2.8.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.8.2.tgz#5694f25eca0ce9c3e7a9d9e00ce0ddabbd9e35c5"

From e23ff0633c275dd338f4533f06c495f46eba6aaf Mon Sep 17 00:00:00 2001
From: Bobby Powers <bobbypowers@gmail.com>
Date: Thu, 29 Jan 2026 21:23:07 -0800
Subject: [PATCH 3/5] diagram: address code review feedback

- Dialog: Pass aria-labelledby prop to RadixDialog.Content for screen reader
  accessibility
- TextField: Fix spread order so inputProps overrides base props correctly
- Menu: Memoize getBoundingClientRect() call to avoid 3x per render
- reset.css: Only enable smooth scrolling when user hasn't requested reduced
  motion via prefers-reduced-motion media query
---
 src/diagram/components/Dialog.tsx    | 2 ++
 src/diagram/components/Menu.tsx      | 8 +++++---
 src/diagram/components/TextField.tsx | 4 ++--
 src/diagram/reset.css                | 8 +++++---
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/diagram/components/Dialog.tsx b/src/diagram/components/Dialog.tsx
index 97b9e7ba..7dface68 100644
--- a/src/diagram/components/Dialog.tsx
+++ b/src/diagram/components/Dialog.tsx
@@ -16,6 +16,7 @@ export interface DialogProps {
 
 export function Dialog(props: DialogProps): React.ReactElement {
   const { open, onClose, disableEscapeKeyDown, className, style, children } = props;
+  const ariaLabelledBy = props['aria-labelledby'];
 
   return (
     <RadixDialog.Root
@@ -31,6 +32,7 @@ export function Dialog(props: DialogProps): React.ReactElement {
         <RadixDialog.Content
           className={clsx(styles.content, className)}
           style={style}
+          aria-labelledby={ariaLabelledBy}
           onEscapeKeyDown={(event) => {
             if (disableEscapeKeyDown) {
               event.preventDefault();
diff --git a/src/diagram/components/Menu.tsx b/src/diagram/components/Menu.tsx
index 98118803..72bdb39f 100644
--- a/src/diagram/components/Menu.tsx
+++ b/src/diagram/components/Menu.tsx
@@ -22,15 +22,17 @@ export function Menu(props: MenuProps): React.ReactElement {
   const side = anchorOrigin?.vertical === 'top' ? 'top' : 'bottom';
   const align = anchorOrigin?.horizontal === 'right' ? 'end' : 'start';
 
+  const anchorRect = anchorEl?.getBoundingClientRect();
+
   return (
     <DropdownMenu.Root open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
       <DropdownMenu.Trigger asChild>
         <span
           style={{
             position: 'fixed',
-            top: anchorEl?.getBoundingClientRect().bottom ?? 0,
-            left: anchorEl?.getBoundingClientRect().left ?? 0,
-            width: anchorEl?.getBoundingClientRect().width ?? 0,
+            top: anchorRect?.bottom ?? 0,
+            left: anchorRect?.left ?? 0,
+            width: anchorRect?.width ?? 0,
             height: 0,
             pointerEvents: 'none',
           }}
diff --git a/src/diagram/components/TextField.tsx b/src/diagram/components/TextField.tsx
index f4998117..5a374e01 100644
--- a/src/diagram/components/TextField.tsx
+++ b/src/diagram/components/TextField.tsx
@@ -145,8 +145,8 @@ export default class TextField extends React.PureComponent<TextFieldProps, TextF
                 autoComplete={autoComplete}
                 name={name}
                 onKeyPress={onKeyPress}
-                {...restInputProps}
                 {...rest}
+                {...restInputProps}
               />
             </div>
           </div>
@@ -194,8 +194,8 @@ export default class TextField extends React.PureComponent<TextFieldProps, TextF
               autoComplete={autoComplete}
               name={name}
               onKeyPress={onKeyPress}
-              {...restInputProps}
               {...rest}
+              {...restInputProps}
             />
           </div>
         </div>
diff --git a/src/diagram/reset.css b/src/diagram/reset.css
index 24222458..2bc6a7b6 100644
--- a/src/diagram/reset.css
+++ b/src/diagram/reset.css
@@ -35,9 +35,11 @@ body {
   font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
 }
 
-/* Smooth scroll */
-html:focus-within {
-  scroll-behavior: smooth;
+/* Smooth scroll - only when user hasn't requested reduced motion */
+@media (prefers-reduced-motion: no-preference) {
+  html:focus-within {
+    scroll-behavior: smooth;
+  }
 }
 
 /* A elements without class get default styles */

From 7bf0e29624c9873507f52161ea68dd6f64627825 Mon Sep 17 00:00:00 2001
From: Bobby Powers <bobbypowers@gmail.com>
Date: Thu, 29 Jan 2026 21:27:54 -0800
Subject: [PATCH 4/5] diagram: address additional review feedback

- Menu: Use React.useMemo to memoize getBoundingClientRect() call so it's not
  recalculated on every render when anchorEl hasn't changed
- NewProject: Wrap Checkbox with FormControlLabel so the entire label area is
  clickable, improving UX consistency
---
 src/app/NewProject.tsx          | 9 +++++----
 src/diagram/components/Menu.tsx | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/app/NewProject.tsx b/src/app/NewProject.tsx
index 2d62f838..36c957d5 100644
--- a/src/app/NewProject.tsx
+++ b/src/app/NewProject.tsx
@@ -12,6 +12,7 @@ import {
   AccordionSummary,
   Button,
   Checkbox,
+  FormControlLabel,
   InputAdornment,
   TextField,
   ExpandMoreIcon,
@@ -237,10 +238,10 @@ export class NewProject extends React.Component<NewProjectProps, NewProjectState
                   </Button>
                 </div>
                 <div className={styles.gridCol12}>
-                  <span>
-                    <Checkbox checked={this.state.isPublic} onChange={this.handlePublicChecked} />
-                    Publicly accessible
-                  </span>
+                  <FormControlLabel
+                    control={<Checkbox checked={this.state.isPublic} onChange={this.handlePublicChecked} />}
+                    label="Publicly accessible"
+                  />
                 </div>
               </div>
             </form>
diff --git a/src/diagram/components/Menu.tsx b/src/diagram/components/Menu.tsx
index 72bdb39f..2e9893ed 100644
--- a/src/diagram/components/Menu.tsx
+++ b/src/diagram/components/Menu.tsx
@@ -22,7 +22,7 @@ export function Menu(props: MenuProps): React.ReactElement {
   const side = anchorOrigin?.vertical === 'top' ? 'top' : 'bottom';
   const align = anchorOrigin?.horizontal === 'right' ? 'end' : 'start';
 
-  const anchorRect = anchorEl?.getBoundingClientRect();
+  const anchorRect = React.useMemo(() => anchorEl?.getBoundingClientRect(), [anchorEl]);
 
   return (
     <DropdownMenu.Root open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>

From d110273f62ab337b8b52bd2ee82c0dc9e3e66759 Mon Sep 17 00:00:00 2001
From: Bobby Powers <bobbypowers@gmail.com>
Date: Thu, 29 Jan 2026 21:32:28 -0800
Subject: [PATCH 5/5] app: fix validation error messages in signup flow

The fullName and password validation errors were using the wrong error field
and message text. Fixed to use the correct error state fields (fullNameError,
passwordError) and appropriate messages.
---
 src/app/Login.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/Login.tsx b/src/app/Login.tsx
index 605eff14..f5d2adf9 100644
--- a/src/app/Login.tsx
+++ b/src/app/Login.tsx
@@ -164,13 +164,13 @@ export class Login extends React.Component<LoginProps, LoginState> {
 
     const fullName = this.state.fullName.trim();
     if (!fullName) {
-      this.setState({ emailError: 'Enter your email address to continue' });
+      this.setState({ fullNameError: 'Enter your name to continue' });
       return;
     }
 
     const password = this.state.password.trim();
     if (!password) {
-      this.setState({ passwordError: 'Enter your email address to continue' });
+      this.setState({ passwordError: 'Enter a password to continue' });
       return;
     }