Organize the categories of widget component props

editor/src/messages/dialog/export_dialog/export_dialog_message_handler.rs

@@ -92,14 +92,14 @@ impl LayoutHolder for ExportDialogMessageHandler {
 			.collect();
 
 		let export_type = vec![
-			TextLabel::new("File Type").table_align(true).min_width("100px").widget_instance(),
+			TextLabel::new("File Type").table_align(true).min_width(100).widget_instance(),
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			RadioInput::new(entries).selected_index(Some(self.file_type as u32)).widget_instance(),
 		];
 
 		let resolution = vec![
-			TextLabel::new("Scale Factor").table_align(true).min_width("100px").widget_instance(),
+			TextLabel::new("Scale Factor").table_align(true).min_width(100).widget_instance(),
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			NumberInput::new(Some(self.scale_factor))
 				.unit("")
 				.min(0.)
@@ -144,15 +144,15 @@ impl LayoutHolder for ExportDialogMessageHandler {
 		}
 
 		let export_area = vec![
-			TextLabel::new("Bounds").table_align(true).min_width("100px").widget_instance(),
+			TextLabel::new("Bounds").table_align(true).min_width(100).widget_instance(),
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			DropdownInput::new(entries).selected_index(Some(index as u32)).widget_instance(),
 		];
 
 		let checkbox_id = CheckboxId::new();
 		let transparent_background = vec![
-			TextLabel::new("Transparency").table_align(true).min_width("100px").for_checkbox(checkbox_id).widget_instance(),
+			TextLabel::new("Transparency").table_align(true).min_width(100).for_checkbox(checkbox_id).widget_instance(),
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			CheckboxInput::new(self.transparent_background)
 				.disabled(self.file_type == FileType::Jpg)
 				.on_update(move |value: &CheckboxInput| ExportDialogMessage::TransparentBackground { transparent: value.checked }.into())

editor/src/messages/dialog/new_document_dialog/new_document_dialog_message_handler.rs

@@ -73,8 +73,8 @@ impl DialogLayoutHolder for NewDocumentDialogMessageHandler {
 impl LayoutHolder for NewDocumentDialogMessageHandler {
 	fn layout(&self) -> Layout {
 		let name = vec![
-			TextLabel::new("Name").table_align(true).min_width("90px").widget_instance(),
+			TextLabel::new("Name").table_align(true).min_width(90).widget_instance(),
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			TextInput::new(&self.name)
 				.on_update(|text_input: &TextInput| NewDocumentDialogMessage::Name { name: text_input.value.clone() }.into())
 				.min_width(204) // Matches the 100px of both NumberInputs below + the 4px of the Unrelated-type separator
@@ -83,8 +83,8 @@ impl LayoutHolder for NewDocumentDialogMessageHandler {
 
 		let checkbox_id = CheckboxId::new();
 		let infinite = vec![
-			TextLabel::new("Infinite Canvas").table_align(true).min_width("90px").for_checkbox(checkbox_id).widget_instance(),
+			TextLabel::new("Infinite Canvas").table_align(true).min_width(90).for_checkbox(checkbox_id).widget_instance(),
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			CheckboxInput::new(self.infinite)
 				.on_update(|checkbox_input: &CheckboxInput| NewDocumentDialogMessage::Infinite { infinite: checkbox_input.checked }.into())
 				.for_label(checkbox_id)
@@ -92,8 +92,8 @@ impl LayoutHolder for NewDocumentDialogMessageHandler {
 		];
 
 		let scale = vec![
-			TextLabel::new("Dimensions").table_align(true).min_width("90px").widget_instance(),
+			TextLabel::new("Dimensions").table_align(true).min_width(90).widget_instance(),
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			NumberInput::new(Some(self.dimensions.x as f64))
 				.label("W")
 				.unit(" px")
@@ -104,7 +104,7 @@ impl LayoutHolder for NewDocumentDialogMessageHandler {
 				.min_width(100)
 				.on_update(|number_input: &NumberInput| NewDocumentDialogMessage::DimensionsX { width: number_input.value.unwrap() }.into())
 				.widget_instance(),
-			Separator::new(SeparatorType::Related).widget_instance(),
+			Separator::new(SeparatorStyle::Related).widget_instance(),
 			NumberInput::new(Some(self.dimensions.y as f64))
 				.label("H")
 				.unit(" px")

editor/src/messages/dialog/preferences_dialog/preferences_dialog_message_handler.rs

@@ -46,13 +46,13 @@ impl PreferencesDialogMessageHandler {
 
 			let zoom_rate_description = "Adjust how fast zooming occurs when using the scroll wheel or pinch gesture (relative to a default of 50).";
 			let zoom_rate_label = vec![
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 				TextLabel::new("Zoom Rate").tooltip_label("Zoom Rate").tooltip_description(zoom_rate_description).widget_instance(),
 			];
 			let zoom_rate = vec![
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 				NumberInput::new(Some(map_zoom_rate_to_display(preferences.viewport_zoom_wheel_rate)))
 					.tooltip_label("Zoom Rate")
 					.tooltip_description(zoom_rate_description)
@@ -74,8 +74,8 @@ impl PreferencesDialogMessageHandler {
 			let checkbox_id = CheckboxId::new();
 			let zoom_with_scroll_description = "Use the scroll wheel for zooming instead of vertically panning (not recommended for trackpads).";
 			let zoom_with_scroll = vec![
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 				CheckboxInput::new(preferences.zoom_with_scroll)
 					.tooltip_label("Zoom with Scroll")
 					.tooltip_description(zoom_with_scroll_description)
@@ -104,8 +104,8 @@ impl PreferencesDialogMessageHandler {
 			let header = vec![TextLabel::new("Editing").italic(true).widget_instance()];
 
 			let selection_label = vec![
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 				TextLabel::new("Selection")
 					.tooltip_label("Selection")
 					.tooltip_description("Choose how targets are selected within dragged rectangular and lasso areas.")
@@ -147,8 +147,8 @@ impl PreferencesDialogMessageHandler {
 			.selected_index(Some(preferences.selection_mode as u32))
 			.widget_instance();
 			let selection_mode = vec![
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 				selection_mode,
 			];
 
@@ -164,13 +164,13 @@ impl PreferencesDialogMessageHandler {
 
 			let scale_description = "Adjust the scale of the entire user interface (100% is default).";
 			let scale_label = vec![
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 				TextLabel::new("Scale").tooltip_label("Scale").tooltip_description(scale_description).widget_instance(),
 			];
 			let scale = vec![
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 				NumberInput::new(Some(ui_scale_to_display(preferences.ui_scale)))
 					.tooltip_label("Scale")
 					.tooltip_description(scale_description)
@@ -204,8 +204,8 @@ impl PreferencesDialogMessageHandler {
 
 			let node_graph_section_description = "Configure the appearance of the wires running between node connections in the graph.";
 			let node_graph_wires_label = vec![
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 				TextLabel::new("Node Graph Wires")
 					.tooltip_label("Node Graph Wires")
 					.tooltip_description(node_graph_section_description)
@@ -226,8 +226,8 @@ impl PreferencesDialogMessageHandler {
 			.selected_index(Some(preferences.graph_wire_style as u32))
 			.widget_instance();
 			let graph_wire_style = vec![
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 				graph_wire_style,
 			];
 
@@ -239,8 +239,8 @@ impl PreferencesDialogMessageHandler {
 			vello_description.push_str("\n\n(Your browser must support WebGPU.)");
 
 			let use_vello = vec![
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 				CheckboxInput::new(preferences.use_vello && preferences.supports_wgpu())
 					.tooltip_label("Vello Renderer")
 					.tooltip_description(vello_description.clone())
@@ -266,8 +266,8 @@ impl PreferencesDialogMessageHandler {
 			"
 			.trim();
 			let brush_tool = vec![
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 				CheckboxInput::new(preferences.brush_tool)
 					.tooltip_label("Brush Tool")
 					.tooltip_description(brush_tool_description)

editor/src/messages/dialog/simple_dialogs/licenses_third_party_dialog.rs

@@ -29,14 +29,14 @@ impl LayoutHolder for LicensesThirdPartyDialog {
 		};
 
 		// Two characters (one before, one after) the sequence of underscore characters, plus one additional column to provide a space between the text and the scrollbar
-		let non_wrapping_column_width = license_text.split('\n').map(|line| line.chars().filter(|&c| c == '_').count()).max().unwrap_or(0) + 2 + 1;
+		let non_wrapping_column_width = license_text.split('\n').map(|line| line.chars().filter(|&c| c == '_').count() as u32).max().unwrap_or(0) + 2 + 1;
 
 		Layout(vec![LayoutGroup::Row {
 			widgets: vec![
 				TextLabel::new(license_text)
 					.monospace(true)
 					.multiline(true)
-					.min_width(format!("{non_wrapping_column_width}ch"))
+					.min_width_characters(non_wrapping_column_width)
 					.widget_instance(),
 			],
 		}])

editor/src/messages/layout/utility_types/widgets/button_widgets.rs

@@ -9,25 +9,23 @@ use graphite_proc_macros::WidgetBuilder;
 #[derive(Clone, Default, Derivative, serde::Serialize, serde::Deserialize, WidgetBuilder, specta::Type)]
 #[derivative(Debug, PartialEq)]
 pub struct IconButton {
+	// Content
 	#[widget_builder(constructor)]
 	pub icon: String,
-
 	#[serde(rename = "hoverIcon")]
 	pub hover_icon: Option<String>,
-
 	#[widget_builder(constructor)]
 	pub size: u32, // TODO: Convert to an `IconSize` enum
-
 	pub disabled: bool,
 
-	pub active: bool,
+	// Styling
+	pub emphasized: bool,
 
+	// Tooltips
 	#[serde(rename = "tooltipLabel")]
 	pub tooltip_label: String,
-
 	#[serde(rename = "tooltipDescription")]
 	pub tooltip_description: String,
-
 	#[serde(rename = "tooltipShortcut")]
 	pub tooltip_shortcut: Option<ActionShortcut>,
 
@@ -35,7 +33,6 @@ pub struct IconButton {
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_update: WidgetCallback<IconButton>,
-
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_commit: WidgetCallback<()>,
@@ -44,29 +41,26 @@ pub struct IconButton {
 #[derive(Clone, serde::Serialize, serde::Deserialize, Derivative, WidgetBuilder, specta::Type)]
 #[derivative(Debug, PartialEq, Default)]
 pub struct PopoverButton {
+	// Content
 	pub style: Option<String>,
+	pub icon: Option<String>,
+	pub disabled: bool,
 
+	// Children
+	#[serde(rename = "popoverLayout")]
+	pub popover_layout: Layout,
+	#[serde(rename = "popoverMinWidth")]
+	pub popover_min_width: Option<u32>,
 	#[serde(rename = "menuDirection")]
 	pub menu_direction: Option<MenuDirection>,
 
-	pub icon: Option<String>,
+	// Tooltips
-
-	pub disabled: bool,
-
 	#[serde(rename = "tooltipLabel")]
 	pub tooltip_label: String,
-
 	#[serde(rename = "tooltipDescription")]
 	pub tooltip_description: String,
-
 	#[serde(rename = "tooltipShortcut")]
 	pub tooltip_shortcut: Option<ActionShortcut>,
-
-	#[serde(rename = "popoverLayout")]
-	pub popover_layout: Layout,
-
-	#[serde(rename = "popoverMinWidth")]
-	pub popover_min_width: Option<u32>,
 }
 
 #[derive(Clone, Default, Debug, PartialEq, serde::Serialize, serde::Deserialize, specta::Type)]
@@ -86,17 +80,16 @@ pub enum MenuDirection {
 #[derive(Clone, serde::Serialize, serde::Deserialize, Derivative, Default, WidgetBuilder, specta::Type)]
 #[derivative(Debug, PartialEq)]
 pub struct ParameterExposeButton {
+	// Content
 	pub exposed: bool,
-
 	#[serde(rename = "dataType")]
 	pub data_type: FrontendGraphDataType,
 
+	// Tooltips
 	#[serde(rename = "tooltipLabel")]
 	pub tooltip_label: String,
-
 	#[serde(rename = "tooltipDescription")]
 	pub tooltip_description: String,
-
 	#[serde(rename = "tooltipShortcut")]
 	pub tooltip_shortcut: Option<ActionShortcut>,
 
@@ -104,7 +97,6 @@ pub struct ParameterExposeButton {
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_update: WidgetCallback<ParameterExposeButton>,
-
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_commit: WidgetCallback<()>,
@@ -113,46 +105,42 @@ pub struct ParameterExposeButton {
 #[derive(Clone, serde::Serialize, serde::Deserialize, Derivative, Default, WidgetBuilder, specta::Type)]
 #[derivative(Debug, PartialEq)]
 pub struct TextButton {
+	// Content
 	#[widget_builder(constructor)]
 	pub label: String,
-
 	pub icon: Option<String>,
-
 	#[serde(rename = "hoverIcon")]
 	pub hover_icon: Option<String>,
-
-	pub flush: bool,
-
-	pub emphasized: bool,
-
-	#[serde(rename = "minWidth")]
-	pub min_width: u32,
-
 	pub disabled: bool,
 
-	pub narrow: bool,
+	// Children
-
-	#[serde(rename = "tooltipLabel")]
-	pub tooltip_label: String,
-
-	#[serde(rename = "tooltipDescription")]
-	pub tooltip_description: String,
-
-	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: Option<ActionShortcut>,
-
 	#[serde(rename = "menuListChildren")]
 	pub menu_list_children: MenuListEntrySections,
-
 	#[serde(rename = "menuListChildrenHash")]
 	#[widget_builder(skip)]
 	pub menu_list_children_hash: u64,
 
+	// Styling
+	pub emphasized: bool,
+	pub flush: bool,
+	pub narrow: bool,
+
+	// Sizing
+	#[serde(rename = "minWidth")]
+	pub min_width: u32,
+
+	// Tooltips
+	#[serde(rename = "tooltipLabel")]
+	pub tooltip_label: String,
+	#[serde(rename = "tooltipDescription")]
+	pub tooltip_description: String,
+	#[serde(rename = "tooltipShortcut")]
+	pub tooltip_shortcut: Option<ActionShortcut>,
+
 	// Callbacks
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_update: WidgetCallback<TextButton>,
-
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_commit: WidgetCallback<()>,
@@ -161,19 +149,17 @@ pub struct TextButton {
 #[derive(Clone, serde::Serialize, serde::Deserialize, Derivative, Default, WidgetBuilder, specta::Type)]
 #[derivative(Debug, PartialEq)]
 pub struct ImageButton {
+	// Content
 	#[widget_builder(constructor)]
 	pub image: String,
-
 	pub width: Option<String>,
-
 	pub height: Option<String>,
 
+	// Tooltips
 	#[serde(rename = "tooltipLabel")]
 	pub tooltip_label: String,
-
 	#[serde(rename = "tooltipDescription")]
 	pub tooltip_description: String,
-
 	#[serde(rename = "tooltipShortcut")]
 	pub tooltip_shortcut: Option<ActionShortcut>,
 
@@ -181,7 +167,6 @@ pub struct ImageButton {
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_update: WidgetCallback<()>,
-
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_commit: WidgetCallback<()>,
@@ -190,32 +175,26 @@ pub struct ImageButton {
 #[derive(Clone, Derivative, serde::Serialize, serde::Deserialize, WidgetBuilder, specta::Type)]
 #[derivative(Debug, PartialEq, Default)]
 pub struct ColorInput {
+	// Content
 	/// WARNING: The colors are gamma, not linear!
 	#[widget_builder(constructor)]
 	pub value: FillChoice,
-
-	// TODO: Implement
-	// #[serde(rename = "allowTransparency")]
-	// #[derivative(Default(value = "false"))]
-	// pub allow_transparency: bool,
-	//
 	#[serde(rename = "allowNone")]
 	#[derivative(Default(value = "true"))]
 	pub allow_none: bool,
-
+	// #[serde(rename = "allowTransparency")] pub allow_transparency: bool, // TODO: Implement
-	pub disabled: bool,
-
-	pub narrow: bool,
-
 	#[serde(rename = "menuDirection")]
 	pub menu_direction: Option<MenuDirection>,
+	pub disabled: bool,
 
+	// Styling
+	pub narrow: bool,
+
+	// Tooltips
 	#[serde(rename = "tooltipLabel")]
 	pub tooltip_label: String,
-
 	#[serde(rename = "tooltipDescription")]
 	pub tooltip_description: String,
-
 	#[serde(rename = "tooltipShortcut")]
 	pub tooltip_shortcut: Option<ActionShortcut>,
 
@@ -223,7 +202,6 @@ pub struct ColorInput {
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_update: WidgetCallback<ColorInput>,
-
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_commit: WidgetCallback<()>,
@@ -232,17 +210,16 @@ pub struct ColorInput {
 #[derive(Clone, serde::Serialize, serde::Deserialize, Derivative, Default, WidgetBuilder, specta::Type)]
 #[derivative(Debug, PartialEq)]
 pub struct BreadcrumbTrailButtons {
+	// Content
 	#[widget_builder(constructor)]
 	pub labels: Vec<String>,
-
 	pub disabled: bool,
 
+	// Tooltips
 	#[serde(rename = "tooltipLabel")]
 	pub tooltip_label: String,
-
 	#[serde(rename = "tooltipDescription")]
 	pub tooltip_description: String,
-
 	#[serde(rename = "tooltipShortcut")]
 	pub tooltip_shortcut: Option<ActionShortcut>,
 
@@ -250,7 +227,6 @@ pub struct BreadcrumbTrailButtons {
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_update: WidgetCallback<u64>,
-
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_commit: WidgetCallback<()>,

editor/src/messages/layout/utility_types/widgets/input_widgets.rs

@@ -7,53 +7,34 @@ use graphene_std::transform::ReferencePoint;
 use graphite_proc_macros::WidgetBuilder;
 
 #[derive(Clone, Derivative, serde::Serialize, serde::Deserialize, WidgetBuilder, specta::Type)]
-#[derivative(Debug, PartialEq)]
+#[derivative(Debug, Default, PartialEq)]
 pub struct CheckboxInput {
+	// Content
 	#[widget_builder(constructor)]
 	pub checked: bool,
-
+	#[derivative(Default(value = "\"Checkmark\".to_string()"))]
-	pub disabled: bool,
-
 	pub icon: String,
-
-	#[serde(rename = "tooltipLabel")]
-	pub tooltip_label: String,
-
-	#[serde(rename = "tooltipDescription")]
-	pub tooltip_description: String,
-
-	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: Option<ActionShortcut>,
-
 	#[serde(rename = "forLabel")]
 	pub for_label: CheckboxId,
+	pub disabled: bool,
+
+	// Tooltips
+	#[serde(rename = "tooltipLabel")]
+	pub tooltip_label: String,
+	#[serde(rename = "tooltipDescription")]
+	pub tooltip_description: String,
+	#[serde(rename = "tooltipShortcut")]
+	pub tooltip_shortcut: Option<ActionShortcut>,
 
 	// Callbacks
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_update: WidgetCallback<CheckboxInput>,
-
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_commit: WidgetCallback<()>,
 }
 
-impl Default for CheckboxInput {
-	fn default() -> Self {
-		Self {
-			icon: "Checkmark".into(),
-			checked: Default::default(),
-			disabled: Default::default(),
-			tooltip_label: Default::default(),
-			tooltip_description: Default::default(),
-			tooltip_shortcut: Default::default(),
-			for_label: CheckboxId::new(),
-			on_update: Default::default(),
-			on_commit: Default::default(),
-		}
-	}
-}
-
 #[derive(Copy, Clone, Debug, Eq, PartialEq, Hash, serde::Serialize, serde::Deserialize)]
 pub struct CheckboxId(pub u64);
 
@@ -77,48 +58,45 @@ impl specta::Type for CheckboxId {
 #[derive(Clone, serde::Serialize, serde::Deserialize, Derivative, WidgetBuilder, specta::Type)]
 #[derivative(Debug, PartialEq, Default)]
 pub struct DropdownInput {
+	// Content
+	// This uses `u32` instead of `usize` since it will be serialized as a normal JS number (we can replace this with `usize` if we switch to a Rust-based GUI)
+	#[serde(rename = "selectedIndex")]
+	pub selected_index: Option<u32>,
+	#[serde(rename = "drawIcon")]
+	pub draw_icon: bool,
+	pub disabled: bool,
+
+	// Children
 	#[widget_builder(constructor)]
 	pub entries: MenuListEntrySections,
-
 	#[serde(rename = "entriesHash")]
 	#[widget_builder(skip)]
 	pub entries_hash: u64,
 
-	// This uses `u32` instead of `usize` since it will be serialized as a normal JS number (replace this with `usize` after switching to a Rust-based GUI)
+	// Styling
-	#[serde(rename = "selectedIndex")]
+	pub narrow: bool,
-	pub selected_index: Option<u32>,
-
-	#[serde(rename = "drawIcon")]
-	pub draw_icon: bool,
 
+	// Behavior
+	#[serde(rename = "virtualScrolling")]
+	pub virtual_scrolling: bool,
 	#[derivative(Default(value = "true"))]
 	pub interactive: bool,
 
-	pub disabled: bool,
+	// Sizing
-
-	pub narrow: bool,
-
-	#[serde(rename = "virtualScrolling")]
-	pub virtual_scrolling: bool,
-
-	#[serde(rename = "tooltipLabel")]
-	pub tooltip_label: String,
-
-	#[serde(rename = "tooltipDescription")]
-	pub tooltip_description: String,
-
-	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: Option<ActionShortcut>,
-
-	// Styling
 	#[serde(rename = "minWidth")]
 	pub min_width: u32,
-
 	#[serde(rename = "maxWidth")]
 	pub max_width: u32,
+
+	// Tooltips
+	#[serde(rename = "tooltipLabel")]
+	pub tooltip_label: String,
+	#[serde(rename = "tooltipDescription")]
+	pub tooltip_description: String,
+	#[serde(rename = "tooltipShortcut")]
+	pub tooltip_shortcut: Option<ActionShortcut>,
 	//
-	// Callbacks
+	// Callbacks exists on the `MenuListEntry` children, not this parent `DropdownInput`
-	// `on_update` exists on the `MenuListEntry`, not this parent `DropdownInput`
 }
 
 pub type MenuListEntrySections = Vec<Vec<MenuListEntry>>;
@@ -127,37 +105,34 @@ pub type MenuListEntrySections = Vec<Vec<MenuListEntry>>;
 #[derivative(Debug, PartialEq)]
 #[widget_builder(not_widget_instance)]
 pub struct MenuListEntry {
+	// Content
 	#[widget_builder(constructor)]
 	pub value: String,
-
 	pub label: String,
-
-	pub font: String,
-
 	pub icon: String,
-
 	pub disabled: bool,
 
-	#[serde(rename = "tooltipLabel")]
+	// Children
-	pub tooltip_label: String,
-
-	#[serde(rename = "tooltipDescription")]
-	pub tooltip_description: String,
-
-	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: Option<ActionShortcut>,
-
 	pub children: MenuListEntrySections,
-
 	#[serde(rename = "childrenHash")]
 	#[widget_builder(skip)]
 	pub children_hash: u64,
 
+	// Styling
+	pub font: String,
+
+	// Tooltips
+	#[serde(rename = "tooltipLabel")]
+	pub tooltip_label: String,
+	#[serde(rename = "tooltipDescription")]
+	pub tooltip_description: String,
+	#[serde(rename = "tooltipShortcut")]
+	pub tooltip_shortcut: Option<ActionShortcut>,
+
 	// Callbacks
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_update: WidgetCallback<()>,
-
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_commit: WidgetCallback<()>,
@@ -175,83 +150,64 @@ impl std::hash::Hash for MenuListEntry {
 #[derive(Clone, serde::Serialize, serde::Deserialize, Derivative, WidgetBuilder, specta::Type)]
 #[derivative(Debug, PartialEq, Default)]
 pub struct NumberInput {
-	// Label
+	// Content
-	pub label: String,
-
-	#[serde(rename = "tooltipLabel")]
-	pub tooltip_label: String,
-
-	#[serde(rename = "tooltipDescription")]
-	pub tooltip_description: String,
-
-	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: Option<ActionShortcut>,
-
-	// Disabled
-	pub disabled: bool,
-
-	pub narrow: bool,
-
-	// Value
 	#[widget_builder(constructor)]
 	pub value: Option<f64>,
+	pub label: String,
+	pub disabled: bool,
 
+	// Styling
+	pub narrow: bool,
+
+	// Behavior
+	pub mode: NumberInputMode,
 	#[widget_builder(skip)]
 	pub min: Option<f64>,
-
 	#[widget_builder(skip)]
 	pub max: Option<f64>,
-
+	// TODO: Make this (and range_max) apply to both Range and Increment modes when dragging with the mouse
+	#[serde(rename = "rangeMin")]
+	pub range_min: Option<f64>,
+	#[serde(rename = "rangeMax")]
+	pub range_max: Option<f64>,
+	#[derivative(Default(value = "1."))]
+	pub step: f64,
 	#[serde(rename = "isInteger")]
 	pub is_integer: bool,
-
+	#[serde(rename = "incrementBehavior")]
-	// Number presentation
+	pub increment_behavior: NumberInputIncrementBehavior,
 	#[serde(rename = "displayDecimalPlaces")]
 	#[derivative(Default(value = "2"))]
 	pub display_decimal_places: u32,
-
 	pub unit: String,
-
 	#[serde(rename = "unitIsHiddenWhenEditing")]
 	#[derivative(Default(value = "true"))]
 	pub unit_is_hidden_when_editing: bool,
 
-	// Mode behavior
+	// Sizing
-	pub mode: NumberInputMode,
-
-	#[serde(rename = "incrementBehavior")]
-	pub increment_behavior: NumberInputIncrementBehavior,
-
-	#[derivative(Default(value = "1."))]
-	pub step: f64,
-
-	// TODO: Make this (and range_max) apply to both Range and Increment modes when dragging with the mouse
-	#[serde(rename = "rangeMin")]
-	pub range_min: Option<f64>,
-
-	#[serde(rename = "rangeMax")]
-	pub range_max: Option<f64>,
-
-	// Styling
 	#[serde(rename = "minWidth")]
 	pub min_width: u32,
-
 	#[serde(rename = "maxWidth")]
 	pub max_width: u32,
 
+	// Tooltips
+	#[serde(rename = "tooltipLabel")]
+	pub tooltip_label: String,
+	#[serde(rename = "tooltipDescription")]
+	pub tooltip_description: String,
+	#[serde(rename = "tooltipShortcut")]
+	pub tooltip_shortcut: Option<ActionShortcut>,
+
 	// Callbacks
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub increment_callback_increase: WidgetCallback<NumberInput>,
-
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub increment_callback_decrease: WidgetCallback<NumberInput>,
-
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_update: WidgetCallback<NumberInput>,
-
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_commit: WidgetCallback<()>,
@@ -307,8 +263,10 @@ pub enum NumberInputMode {
 #[derive(Clone, serde::Serialize, serde::Deserialize, Derivative, WidgetBuilder, specta::Type)]
 #[derivative(Debug, PartialEq, Default)]
 pub struct NodeCatalog {
+	// Content
 	pub disabled: bool,
 
+	// Behavior
 	#[serde(rename = "initialSearchTerm")]
 	pub intial_search: String,
 
@@ -316,7 +274,6 @@ pub struct NodeCatalog {
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_update: WidgetCallback<String>,
-
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_commit: WidgetCallback<()>,
@@ -325,38 +282,41 @@ pub struct NodeCatalog {
 #[derive(Clone, Default, Derivative, serde::Serialize, serde::Deserialize, WidgetBuilder, specta::Type)]
 #[derivative(Debug, PartialEq)]
 pub struct RadioInput {
-	#[widget_builder(constructor)]
+	// Content
-	pub entries: Vec<RadioEntryData>,
-
-	pub disabled: bool,
-
-	pub narrow: bool,
-
 	// This uses `u32` instead of `usize` since it will be serialized as a normal JS number (replace this with `usize` after switching to a Rust-based GUI)
 	#[serde(rename = "selectedIndex")]
 	pub selected_index: Option<u32>,
+	pub disabled: bool,
 
+	// Children
+	#[widget_builder(constructor)]
+	pub entries: Vec<RadioEntryData>,
+
+	// Styling
+	pub narrow: bool,
+
+	// Sizing
 	#[serde(rename = "minWidth")]
 	pub min_width: u32,
+	//
+	// Callbacks exists on the `RadioEntryData` children, not this parent `RadioInput`
 }
 
 #[derive(Clone, Default, Derivative, serde::Serialize, serde::Deserialize, WidgetBuilder, specta::Type)]
 #[derivative(Debug, PartialEq)]
 #[widget_builder(not_widget_instance)]
 pub struct RadioEntryData {
+	// Content
 	#[widget_builder(constructor)]
 	pub value: String,
-
 	pub label: String,
-
 	pub icon: String,
 
+	// Tooltips
 	#[serde(rename = "tooltipLabel")]
 	pub tooltip_label: String,
-
 	#[serde(rename = "tooltipDescription")]
 	pub tooltip_description: String,
-
 	#[serde(rename = "tooltipShortcut")]
 	pub tooltip_shortcut: Option<ActionShortcut>,
 
@@ -364,7 +324,6 @@ pub struct RadioEntryData {
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_update: WidgetCallback<()>,
-
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_commit: WidgetCallback<()>,
@@ -373,9 +332,9 @@ pub struct RadioEntryData {
 #[derive(Clone, serde::Serialize, serde::Deserialize, Derivative, WidgetBuilder, specta::Type)]
 #[derivative(Debug, PartialEq, Default)]
 pub struct WorkingColorsInput {
+	// Content
 	#[widget_builder(constructor)]
 	pub primary: Color,
-
 	#[widget_builder(constructor)]
 	pub secondary: Color,
 }
@@ -383,19 +342,17 @@ pub struct WorkingColorsInput {
 #[derive(Clone, serde::Serialize, serde::Deserialize, Derivative, WidgetBuilder, specta::Type)]
 #[derivative(Debug, PartialEq, Default)]
 pub struct TextAreaInput {
+	// Content
 	#[widget_builder(constructor)]
 	pub value: String,
-
 	pub label: Option<String>,
-
 	pub disabled: bool,
 
+	// Tooltips
 	#[serde(rename = "tooltipLabel")]
 	pub tooltip_label: String,
-
 	#[serde(rename = "tooltipDescription")]
 	pub tooltip_description: String,
-
 	#[serde(rename = "tooltipShortcut")]
 	pub tooltip_shortcut: Option<ActionShortcut>,
 
@@ -403,7 +360,6 @@ pub struct TextAreaInput {
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_update: WidgetCallback<TextAreaInput>,
-
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_commit: WidgetCallback<()>,
@@ -412,37 +368,35 @@ pub struct TextAreaInput {
 #[derive(Clone, serde::Serialize, serde::Deserialize, Derivative, WidgetBuilder, specta::Type)]
 #[derivative(Debug, PartialEq, Default)]
 pub struct TextInput {
+	// Content
 	#[widget_builder(constructor)]
 	pub value: String,
-
 	pub label: Option<String>,
-
+	pub placeholder: Option<String>,
 	pub disabled: bool,
 
+	// Styling
 	pub narrow: bool,
-
-	#[serde(rename = "tooltipLabel")]
-	pub tooltip_label: String,
-
-	#[serde(rename = "tooltipDescription")]
-	pub tooltip_description: String,
-
-	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: Option<ActionShortcut>,
-
 	pub centered: bool,
 
+	// Sizing
 	#[serde(rename = "minWidth")]
 	pub min_width: u32,
-
 	#[serde(rename = "maxWidth")]
 	pub max_width: u32,
 
+	// Tooltips
+	#[serde(rename = "tooltipLabel")]
+	pub tooltip_label: String,
+	#[serde(rename = "tooltipDescription")]
+	pub tooltip_description: String,
+	#[serde(rename = "tooltipShortcut")]
+	pub tooltip_shortcut: Option<ActionShortcut>,
+
 	// Callbacks
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_update: WidgetCallback<TextInput>,
-
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_commit: WidgetCallback<()>,
@@ -451,17 +405,15 @@ pub struct TextInput {
 #[derive(Clone, serde::Serialize, serde::Deserialize, Derivative, WidgetBuilder, specta::Type)]
 #[derivative(Debug, PartialEq, Default)]
 pub struct CurveInput {
+	// Content
 	#[widget_builder(constructor)]
 	pub value: Curve,
 
-	pub disabled: bool,
+	// Tooltips
-
 	#[serde(rename = "tooltipLabel")]
 	pub tooltip_label: String,
-
 	#[serde(rename = "tooltipDescription")]
 	pub tooltip_description: String,
-
 	#[serde(rename = "tooltipShortcut")]
 	pub tooltip_shortcut: Option<ActionShortcut>,
 
@@ -469,7 +421,6 @@ pub struct CurveInput {
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_update: WidgetCallback<CurveInput>,
-
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_commit: WidgetCallback<()>,
@@ -478,17 +429,16 @@ pub struct CurveInput {
 #[derive(Clone, Default, Derivative, serde::Serialize, serde::Deserialize, WidgetBuilder, specta::Type)]
 #[derivative(Debug, PartialEq)]
 pub struct ReferencePointInput {
+	// Content
 	#[widget_builder(constructor)]
 	pub value: ReferencePoint,
-
 	pub disabled: bool,
 
+	// Tooltips
 	#[serde(rename = "tooltipLabel")]
 	pub tooltip_label: String,
-
 	#[serde(rename = "tooltipDescription")]
 	pub tooltip_description: String,
-
 	#[serde(rename = "tooltipShortcut")]
 	pub tooltip_shortcut: Option<ActionShortcut>,
 
@@ -496,7 +446,6 @@ pub struct ReferencePointInput {
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_update: WidgetCallback<ReferencePointInput>,
-
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub on_commit: WidgetCallback<()>,

editor/src/messages/layout/utility_types/widgets/label_widgets.rs

@@ -5,28 +5,26 @@ use graphite_proc_macros::WidgetBuilder;
 
 #[derive(Clone, serde::Serialize, serde::Deserialize, Derivative, Debug, Default, PartialEq, Eq, WidgetBuilder, specta::Type)]
 pub struct IconLabel {
+	// Content
 	#[widget_builder(constructor)]
 	pub icon: String,
-
 	pub disabled: bool,
 
+	// Tooltips
 	#[serde(rename = "tooltipLabel")]
 	pub tooltip_label: String,
-
 	#[serde(rename = "tooltipDescription")]
 	pub tooltip_description: String,
-
 	#[serde(rename = "tooltipShortcut")]
 	pub tooltip_shortcut: Option<ActionShortcut>,
 }
 
 #[derive(Debug, Clone, Default, PartialEq, Eq, serde::Serialize, serde::Deserialize, WidgetBuilder, specta::Type)]
 pub struct Separator {
+	// Content
 	pub direction: SeparatorDirection,
-
-	#[serde(rename = "type")]
 	#[widget_builder(constructor)]
-	pub separator_type: SeparatorType,
+	pub style: SeparatorStyle,
 }
 
 #[derive(Debug, Clone, Default, PartialEq, Eq, serde::Serialize, serde::Deserialize, specta::Type)]
@@ -37,7 +35,7 @@ pub enum SeparatorDirection {
 }
 
 #[derive(Debug, Clone, Default, PartialEq, Eq, serde::Serialize, serde::Deserialize, specta::Type)]
-pub enum SeparatorType {
+pub enum SeparatorStyle {
 	Related,
 	#[default]
 	Unrelated,
@@ -47,60 +45,53 @@ pub enum SeparatorType {
 #[derive(Clone, serde::Serialize, serde::Deserialize, Derivative, Debug, Eq, Default, WidgetBuilder, specta::Type)]
 #[derivative(PartialEq)]
 pub struct TextLabel {
+	// Content
+	#[widget_builder(constructor)]
+	pub value: String,
 	pub disabled: bool,
-
-	pub narrow: bool,
-
-	pub bold: bool,
-
-	pub italic: bool,
-
-	pub monospace: bool,
-
-	pub multiline: bool,
-
-	#[serde(rename = "centerAlign")]
-	pub center_align: bool,
-
-	#[serde(rename = "tableAlign")]
-	pub table_align: bool,
-
-	#[serde(rename = "minWidth")]
-	pub min_width: String,
-
-	#[serde(rename = "tooltipLabel")]
-	pub tooltip_label: String,
-
-	#[serde(rename = "tooltipDescription")]
-	pub tooltip_description: String,
-
-	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: Option<ActionShortcut>,
-
 	#[serde(rename = "forCheckbox")]
 	pub for_checkbox: CheckboxId,
 
-	// Body
+	// Styling
-	#[widget_builder(constructor)]
+	pub narrow: bool,
-	pub value: String,
+	pub bold: bool,
+	pub italic: bool,
+	pub monospace: bool,
+	pub multiline: bool,
+	#[serde(rename = "centerAlign")]
+	pub center_align: bool,
+	#[serde(rename = "tableAlign")]
+	pub table_align: bool,
+
+	// Sizing
+	#[serde(rename = "minWidth")]
+	pub min_width: u32,
+	#[serde(rename = "minWidthCharacters")]
+	pub min_width_characters: u32,
+
+	// Tooltips
+	#[serde(rename = "tooltipLabel")]
+	pub tooltip_label: String,
+	#[serde(rename = "tooltipDescription")]
+	pub tooltip_description: String,
+	#[serde(rename = "tooltipShortcut")]
+	pub tooltip_shortcut: Option<ActionShortcut>,
 }
 
 #[derive(Clone, serde::Serialize, serde::Deserialize, Derivative, Default, WidgetBuilder, specta::Type)]
 #[derivative(Debug, PartialEq)]
 pub struct ImageLabel {
+	// Content
 	#[widget_builder(constructor)]
 	pub url: String,
-
 	pub width: Option<String>,
-
 	pub height: Option<String>,
 
+	// Tooltips
 	#[serde(rename = "tooltipLabel")]
 	pub tooltip_label: String,
-
 	#[serde(rename = "tooltipDescription")]
 	pub tooltip_description: String,
-
 	#[serde(rename = "tooltipShortcut")]
 	pub tooltip_shortcut: Option<ActionShortcut>,
 }
@@ -108,6 +99,7 @@ pub struct ImageLabel {
 #[derive(Clone, serde::Serialize, serde::Deserialize, Derivative, Default, WidgetBuilder, specta::Type)]
 #[derivative(Debug, PartialEq)]
 pub struct ShortcutLabel {
+	// Content
 	// This is wrapped in an Option to satisfy the requirement that widgets implement Default
 	#[widget_builder(constructor)]
 	pub shortcut: Option<ActionShortcut>,

editor/src/messages/portfolio/document/data_panel/data_panel_message_handler.rs

@@ -102,7 +102,7 @@ impl DataPanelMessageHandler {
 				} else {
 					IconLabel::new("Node").tooltip_description("Name of the selected node.").widget_instance()
 				},
-				Separator::new(SeparatorType::Related).widget_instance(),
+				Separator::new(SeparatorStyle::Related).widget_instance(),
 				TextInput::new(network_interface.display_name(&node_id, &[]))
 					.tooltip_description(if is_layer { "Name of the selected layer." } else { "Name of the selected node." })
 					.on_update(move |text_input| {
@@ -115,7 +115,7 @@ impl DataPanelMessageHandler {
 					})
 					.max_width(200)
 					.widget_instance(),
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			]);
 		}
 

editor/src/messages/portfolio/document/document_message_handler.rs

@@ -2208,7 +2208,7 @@ impl DocumentMessageHandler {
 				.tooltip_shortcut(action_shortcut!(AnimationMessageDiscriminant::ToggleLivePreview))
 				.on_update(|_| AnimationMessage::ToggleLivePreview.into())
 				.widget_instance(),
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			CheckboxInput::new(self.overlays_visibility_settings.all)
 				.icon("Overlays")
 				.tooltip_label("Overlays")
@@ -2457,7 +2457,7 @@ impl DocumentMessageHandler {
 					},
 				]))
 				.widget_instance(),
-			Separator::new(SeparatorType::Related).widget_instance(),
+			Separator::new(SeparatorStyle::Related).widget_instance(),
 			CheckboxInput::new(snapping_state.snapping_enabled)
 				.icon("Snapping")
 				.tooltip_label("Snapping")
@@ -2527,7 +2527,7 @@ impl DocumentMessageHandler {
 					.collect(),
 				))
 				.widget_instance(),
-			Separator::new(SeparatorType::Related).widget_instance(),
+			Separator::new(SeparatorStyle::Related).widget_instance(),
 			CheckboxInput::new(self.snapping_state.grid_snapping)
 				.icon("Grid")
 				.tooltip_label("Grid")
@@ -2538,7 +2538,7 @@ impl DocumentMessageHandler {
 				.popover_layout(Layout(overlay_options(&self.snapping_state.grid)))
 				.popover_min_width(Some(320))
 				.widget_instance(),
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			RadioInput::new(vec![
 				RadioEntryData::new("Normal")
 					.icon("RenderModeNormal")
@@ -2562,7 +2562,7 @@ impl DocumentMessageHandler {
 			.selected_index(Some(self.render_mode as u32))
 			.narrow(true)
 			.widget_instance(),
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 		];
 
 		widgets.extend(navigation_controls(&self.document_ptz, &self.navigation_handler, false));
@@ -2570,7 +2570,7 @@ impl DocumentMessageHandler {
 		let tilt_value = self.navigation_handler.snapped_tilt(self.document_ptz.tilt()) / (std::f64::consts::PI / 180.);
 		if tilt_value.abs() > 0.00001 {
 			widgets.extend([
-				Separator::new(SeparatorType::Related).widget_instance(),
+				Separator::new(SeparatorStyle::Related).widget_instance(),
 				NumberInput::new(Some(tilt_value))
 					.unit("°")
 					.increment_behavior(NumberInputIncrementBehavior::Callback)
@@ -2600,7 +2600,7 @@ impl DocumentMessageHandler {
 		}
 
 		widgets.extend([
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			TextButton::new("Node Graph")
 				.icon(Some((if self.graph_view_overlay_open { "GraphViewOpen" } else { "GraphViewClosed" }).into()))
 				.hover_icon(Some((if self.graph_view_overlay_open { "GraphViewClosed" } else { "GraphViewOpen" }).into()))
@@ -2704,7 +2704,7 @@ impl DocumentMessageHandler {
 				.max_width(100)
 				.tooltip_label("Blend Mode")
 				.widget_instance(),
-			Separator::new(SeparatorType::Related).widget_instance(),
+			Separator::new(SeparatorStyle::Related).widget_instance(),
 			NumberInput::new(opacity)
 				.label("Opacity")
 				.unit("%")
@@ -2726,7 +2726,7 @@ impl DocumentMessageHandler {
 				.max_width(100)
 				.tooltip_label("Opacity")
 				.widget_instance(),
-			Separator::new(SeparatorType::Related).widget_instance(),
+			Separator::new(SeparatorStyle::Related).widget_instance(),
 			NumberInput::new(fill)
 				.label("Fill")
 				.unit("%")
@@ -2824,7 +2824,7 @@ impl DocumentMessageHandler {
 					Layout(vec![LayoutGroup::Row { widgets: vec![node_chooser] }])
 				})
 				.widget_instance(),
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			IconButton::new("Folder", 24)
 				.tooltip_label("Group Selected")
 				.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::GroupSelectedLayers))
@@ -3149,7 +3149,7 @@ pub fn navigation_controls(ptz: &PTZ, navigation_handler: &NavigationMessageHand
 		);
 	}
 	list.extend([
-		Separator::new(SeparatorType::Related).widget_instance(),
+		Separator::new(SeparatorStyle::Related).widget_instance(),
 		NumberInput::new(Some(navigation_handler.snapped_zoom(ptz.zoom()) * 100.))
 			.unit("%")
 			.min(0.000001)

editor/src/messages/portfolio/document/node_graph/document_node_definitions.rs

@@ -2536,7 +2536,7 @@ fn static_input_properties() -> InputProperties {
 			};
 			if let Some(&TaggedValue::F64(val)) = input.as_non_exposed_value() {
 				widgets.extend_from_slice(&[
-					Separator::new(SeparatorType::Unrelated).widget_instance(),
+					Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 					NumberInput::new(Some(val))
 						.unit("°")
 						.mode(NumberInputMode::Range)
@@ -2567,7 +2567,7 @@ fn static_input_properties() -> InputProperties {
 			};
 			if let Some(&TaggedValue::DVec2(val)) = input.as_non_exposed_value() {
 				widgets.extend_from_slice(&[
-					Separator::new(SeparatorType::Unrelated).widget_instance(),
+					Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 					NumberInput::new(Some(val.x))
 						.label("X")
 						.unit("°")
@@ -2580,7 +2580,7 @@ fn static_input_properties() -> InputProperties {
 						))
 						.on_commit(node_properties::commit_value)
 						.widget_instance(),
-					Separator::new(SeparatorType::Related).widget_instance(),
+					Separator::new(SeparatorStyle::Related).widget_instance(),
 					NumberInput::new(Some(val.y))
 						.label("Y")
 						.unit("°")

editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs

@@ -2180,7 +2180,7 @@ impl NodeGraphMessageHandler {
 				})
 				.widget_instance(),
 			//
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			//
 			IconButton::new("Folder", 24)
 				.tooltip_label("Group Selected")
@@ -2203,7 +2203,7 @@ impl NodeGraphMessageHandler {
 				.disabled(!has_selection)
 				.widget_instance(),
 			//
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			//
 			IconButton::new(if selection_all_locked { "PadlockLocked" } else { "PadlockUnlocked" }, 24)
 				.hover_icon(Some((if selection_all_locked { "PadlockUnlocked" } else { "PadlockLocked" }).into()))
@@ -2244,7 +2244,7 @@ impl NodeGraphMessageHandler {
 				.tooltip_description("Restore preview to the graph output.")
 				.on_update(move |_| NodeGraphMessage::TogglePreview { node_id }.into())
 				.widget_instance();
-			widgets.extend([Separator::new(SeparatorType::Unrelated).widget_instance(), button]);
+			widgets.extend([Separator::new(SeparatorStyle::Unrelated).widget_instance(), button]);
 		} else if let Some(&node_id) = selection {
 			let selection_is_not_already_the_output = !network
 				.exports
@@ -2258,14 +2258,14 @@ impl NodeGraphMessageHandler {
 					.tooltip_shortcut(action_shortcut_manual!(Key::Alt, Key::MouseLeft))
 					.on_update(move |_| NodeGraphMessage::TogglePreview { node_id }.into())
 					.widget_instance();
-				widgets.extend([Separator::new(SeparatorType::Unrelated).widget_instance(), button]);
+				widgets.extend([Separator::new(SeparatorStyle::Unrelated).widget_instance(), button]);
 			}
 		}
 
 		let subgraph_path_names_length = subgraph_path_names.len();
 		if subgraph_path_names_length >= 2 {
 			widgets.extend([
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 				BreadcrumbTrailButtons::new(subgraph_path_names)
 					.on_update(move |index| {
 						DocumentMessage::ExitNestedNetwork {
@@ -2305,11 +2305,11 @@ impl NodeGraphMessageHandler {
 					.into()
 				})
 				.widget_instance(),
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 		];
 		widgets.extend(navigation_controls(node_graph_ptz, navigation_handler, true));
 		widgets.extend([
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			TextButton::new("Node Graph")
 				.icon(Some("GraphViewOpen".into()))
 				.hover_icon(Some("GraphViewClosed".into()))
@@ -2363,9 +2363,9 @@ impl NodeGraphMessageHandler {
 					if let [node_id] = *nodes.as_slice() {
 						properties.push(LayoutGroup::Row {
 							widgets: vec![
-								Separator::new(SeparatorType::Related).widget_instance(),
+								Separator::new(SeparatorStyle::Related).widget_instance(),
 								IconLabel::new("Node").tooltip_description("Name of the selected node.").widget_instance(),
-								Separator::new(SeparatorType::Related).widget_instance(),
+								Separator::new(SeparatorStyle::Related).widget_instance(),
 								TextInput::new(context.network_interface.display_name(&node_id, context.selection_network_path))
 									.tooltip_description("Name of the selected node.")
 									.on_update(move |text_input| {
@@ -2377,7 +2377,7 @@ impl NodeGraphMessageHandler {
 										.into()
 									})
 									.widget_instance(),
-								Separator::new(SeparatorType::Related).widget_instance(),
+								Separator::new(SeparatorStyle::Related).widget_instance(),
 							],
 						});
 					}
@@ -2391,14 +2391,14 @@ impl NodeGraphMessageHandler {
 				// This may require store a separate path for the properties panel
 				let mut properties = vec![LayoutGroup::Row {
 					widgets: vec![
-						Separator::new(SeparatorType::Related).widget_instance(),
+						Separator::new(SeparatorStyle::Related).widget_instance(),
 						IconLabel::new("File").tooltip_description("Name of the current document.").widget_instance(),
-						Separator::new(SeparatorType::Related).widget_instance(),
+						Separator::new(SeparatorStyle::Related).widget_instance(),
 						TextInput::new(context.document_name)
 							.tooltip_description("Name of the current document.")
 							.on_update(|text_input| DocumentMessage::RenameDocument { new_name: text_input.value.clone() }.into())
 							.widget_instance(),
-						Separator::new(SeparatorType::Related).widget_instance(),
+						Separator::new(SeparatorStyle::Related).widget_instance(),
 					],
 				}];
 
@@ -2438,9 +2438,9 @@ impl NodeGraphMessageHandler {
 
 				let mut layer_properties = vec![LayoutGroup::Row {
 					widgets: vec![
-						Separator::new(SeparatorType::Related).widget_instance(),
+						Separator::new(SeparatorStyle::Related).widget_instance(),
 						IconLabel::new("Layer").tooltip_description("Name of the selected layer.").widget_instance(),
-						Separator::new(SeparatorType::Related).widget_instance(),
+						Separator::new(SeparatorStyle::Related).widget_instance(),
 						TextInput::new(context.network_interface.display_name(&layer, context.selection_network_path))
 							.tooltip_description("Name of the selected layer.")
 							.on_update(move |text_input| {
@@ -2452,7 +2452,7 @@ impl NodeGraphMessageHandler {
 								.into()
 							})
 							.widget_instance(),
-						Separator::new(SeparatorType::Related).widget_instance(),
+						Separator::new(SeparatorStyle::Related).widget_instance(),
 						PopoverButton::new()
 							.icon(Some("Node".to_string()))
 							.tooltip_description("Add an operation to the end of this layer's chain of nodes.")
@@ -2477,7 +2477,7 @@ impl NodeGraphMessageHandler {
 								Layout(vec![LayoutGroup::Row { widgets: vec![node_chooser] }])
 							})
 							.widget_instance(),
-						Separator::new(SeparatorType::Related).widget_instance(),
+						Separator::new(SeparatorStyle::Related).widget_instance(),
 					],
 				}];
 

editor/src/messages/portfolio/document/node_graph/node_properties.rs

@@ -71,9 +71,9 @@ pub fn expose_widget(node_id: NodeId, index: usize, data_type: FrontendGraphData
 pub fn add_blank_assist(widgets: &mut Vec<WidgetInstance>) {
 	widgets.extend_from_slice(&[
 		// Custom CSS specific to the Properties panel converts this Section separator into the width of an assist (24px).
-		Separator::new(SeparatorType::Section).widget_instance(),
+		Separator::new(SeparatorStyle::Section).widget_instance(),
 		// This last one is the separator after the 24px assist.
-		Separator::new(SeparatorType::Unrelated).widget_instance(),
+		Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 	]);
 }
 
@@ -231,7 +231,7 @@ pub(crate) fn property_from_type(
 						_ => {
 							let mut widgets = start_widgets(default_info);
 							widgets.extend_from_slice(&[
-								Separator::new(SeparatorType::Unrelated).widget_instance(),
+								Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 								TextLabel::new("-")
 									.tooltip_label(format!(
 										"Data Type: {}",
@@ -273,7 +273,7 @@ pub fn text_widget(parameter_widgets_info: ParameterWidgetsInfo) -> Vec<WidgetIn
 	};
 	if let Some(TaggedValue::String(x)) = &input.as_non_exposed_value() {
 		widgets.extend_from_slice(&[
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			TextInput::new(x.clone())
 				.on_update(update_value(|x: &TextInput| TaggedValue::String(x.value.clone()), node_id, index))
 				.on_commit(commit_value)
@@ -295,7 +295,7 @@ pub fn text_area_widget(parameter_widgets_info: ParameterWidgetsInfo) -> Vec<Wid
 	};
 	if let Some(TaggedValue::String(x)) = &input.as_non_exposed_value() {
 		widgets.extend_from_slice(&[
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			TextAreaInput::new(x.clone())
 				.on_update(update_value(|x: &TextAreaInput| TaggedValue::String(x.value.clone()), node_id, index))
 				.on_commit(commit_value)
@@ -317,7 +317,7 @@ pub fn bool_widget(parameter_widgets_info: ParameterWidgetsInfo, checkbox_input:
 	};
 	if let Some(&TaggedValue::Bool(x)) = input.as_non_exposed_value() {
 		widgets.extend_from_slice(&[
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			checkbox_input
 				.checked(x)
 				.on_update(update_value(|x: &CheckboxInput| TaggedValue::Bool(x.checked), node_id, index))
@@ -340,7 +340,7 @@ pub fn reference_point_widget(parameter_widgets_info: ParameterWidgetsInfo, disa
 	};
 	if let Some(&TaggedValue::ReferencePoint(reference_point)) = input.as_non_exposed_value() {
 		widgets.extend_from_slice(&[
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			CheckboxInput::new(reference_point != ReferencePoint::None)
 				.on_update(update_value(
 					move |x: &CheckboxInput| TaggedValue::ReferencePoint(if x.checked { ReferencePoint::Center } else { ReferencePoint::None }),
@@ -349,7 +349,7 @@ pub fn reference_point_widget(parameter_widgets_info: ParameterWidgetsInfo, disa
 				))
 				.disabled(disabled)
 				.widget_instance(),
-			Separator::new(SeparatorType::Related).widget_instance(),
+			Separator::new(SeparatorStyle::Related).widget_instance(),
 			ReferencePointInput::new(reference_point)
 				.on_update(update_value(move |x: &ReferencePointInput| TaggedValue::ReferencePoint(x.value), node_id, index))
 				.disabled(disabled)
@@ -363,15 +363,15 @@ pub fn footprint_widget(parameter_widgets_info: ParameterWidgetsInfo, extra_widg
 	let ParameterWidgetsInfo { document_node, node_id, index, .. } = parameter_widgets_info;
 
 	let mut location_widgets = start_widgets(parameter_widgets_info);
-	location_widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+	location_widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 
 	let mut scale_widgets = vec![TextLabel::new("").widget_instance()];
 	add_blank_assist(&mut scale_widgets);
-	scale_widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+	scale_widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 
 	let mut resolution_widgets = vec![TextLabel::new("").widget_instance()];
 	add_blank_assist(&mut resolution_widgets);
-	resolution_widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+	resolution_widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 
 	let Some(document_node) = document_node else { return LayoutGroup::default() };
 	let Some(input) = document_node.inputs.get(index) else {
@@ -408,7 +408,7 @@ pub fn footprint_widget(parameter_widgets_info: ParameterWidgetsInfo, extra_widg
 				))
 				.on_commit(commit_value)
 				.widget_instance(),
-			Separator::new(SeparatorType::Related).widget_instance(),
+			Separator::new(SeparatorStyle::Related).widget_instance(),
 			NumberInput::new(Some(top_left.y))
 				.label("Y")
 				.unit(" px")
@@ -455,7 +455,7 @@ pub fn footprint_widget(parameter_widgets_info: ParameterWidgetsInfo, extra_widg
 				))
 				.on_commit(commit_value)
 				.widget_instance(),
-			Separator::new(SeparatorType::Related).widget_instance(),
+			Separator::new(SeparatorStyle::Related).widget_instance(),
 			NumberInput::new(Some(bounds.y))
 				.label("H")
 				.unit(" px")
@@ -515,15 +515,15 @@ pub fn transform_widget(parameter_widgets_info: ParameterWidgetsInfo, extra_widg
 	let ParameterWidgetsInfo { document_node, node_id, index, .. } = parameter_widgets_info;
 
 	let mut location_widgets = start_widgets(parameter_widgets_info);
-	location_widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+	location_widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 
 	let mut rotation_widgets = vec![TextLabel::new("").widget_instance()];
 	add_blank_assist(&mut rotation_widgets);
-	rotation_widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+	rotation_widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 
 	let mut scale_widgets = vec![TextLabel::new("").widget_instance()];
 	add_blank_assist(&mut scale_widgets);
-	scale_widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+	scale_widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 
 	let Some(document_node) = document_node else { return LayoutGroup::default() };
 	let Some(input) = document_node.inputs.get(index) else {
@@ -551,7 +551,7 @@ pub fn transform_widget(parameter_widgets_info: ParameterWidgetsInfo, extra_widg
 				))
 				.on_commit(commit_value)
 				.widget_instance(),
-			Separator::new(SeparatorType::Related).widget_instance(),
+			Separator::new(SeparatorStyle::Related).widget_instance(),
 			NumberInput::new(Some(translation.y))
 				.label("Y")
 				.unit(" px")
@@ -598,7 +598,7 @@ pub fn transform_widget(parameter_widgets_info: ParameterWidgetsInfo, extra_widg
 				))
 				.on_commit(commit_value)
 				.widget_instance(),
-			Separator::new(SeparatorType::Related).widget_instance(),
+			Separator::new(SeparatorStyle::Related).widget_instance(),
 			NumberInput::new(Some(scale.y))
 				.label("H")
 				.unit("x")
@@ -644,7 +644,7 @@ pub fn vec2_widget(parameter_widgets_info: ParameterWidgetsInfo, x: &str, y: &st
 	match input.as_non_exposed_value() {
 		Some(&TaggedValue::DVec2(dvec2)) => {
 			widgets.extend_from_slice(&[
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 				NumberInput::new(Some(dvec2.x))
 					.label(x)
 					.unit(unit)
@@ -654,7 +654,7 @@ pub fn vec2_widget(parameter_widgets_info: ParameterWidgetsInfo, x: &str, y: &st
 					.on_update(update_value(move |input: &NumberInput| TaggedValue::DVec2(DVec2::new(input.value.unwrap(), dvec2.y)), node_id, index))
 					.on_commit(commit_value)
 					.widget_instance(),
-				Separator::new(SeparatorType::Related).widget_instance(),
+				Separator::new(SeparatorStyle::Related).widget_instance(),
 				NumberInput::new(Some(dvec2.y))
 					.label(y)
 					.unit(unit)
@@ -668,7 +668,7 @@ pub fn vec2_widget(parameter_widgets_info: ParameterWidgetsInfo, x: &str, y: &st
 		}
 		Some(&TaggedValue::F64(value)) => {
 			widgets.extend_from_slice(&[
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 				NumberInput::new(Some(value))
 					.label(x)
 					.unit(unit)
@@ -678,7 +678,7 @@ pub fn vec2_widget(parameter_widgets_info: ParameterWidgetsInfo, x: &str, y: &st
 					.on_update(update_value(move |input: &NumberInput| TaggedValue::DVec2(DVec2::new(input.value.unwrap(), value)), node_id, index))
 					.on_commit(commit_value)
 					.widget_instance(),
-				Separator::new(SeparatorType::Related).widget_instance(),
+				Separator::new(SeparatorStyle::Related).widget_instance(),
 				NumberInput::new(Some(value))
 					.label(y)
 					.unit(unit)
@@ -718,7 +718,7 @@ pub fn array_of_number_widget(parameter_widgets_info: ParameterWidgetsInfo, text
 	};
 	if let Some(TaggedValue::VecF64(x)) = &input.as_non_exposed_value() {
 		widgets.extend_from_slice(&[
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			text_input
 				.value(x.iter().map(|v| v.to_string()).collect::<Vec<_>>().join(", "))
 				.on_update(optionally_update_value(move |x: &TextInput| from_string(&x.value), node_id, index))
@@ -750,7 +750,7 @@ pub fn array_of_vec2_widget(parameter_widgets_info: ParameterWidgetsInfo, text_p
 	};
 	if let Some(TaggedValue::VecDVec2(x)) = &input.as_non_exposed_value() {
 		widgets.extend_from_slice(&[
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			text_props
 				.value(x.iter().map(|v| format!("({}, {})", v.x, v.y)).collect::<Vec<_>>().join(", "))
 				.on_update(optionally_update_value(move |x: &TextInput| from_string(&x.value), node_id, index))
@@ -780,7 +780,7 @@ pub fn font_inputs(parameter_widgets_info: ParameterWidgetsInfo) -> (Vec<WidgetI
 
 	if let Some(TaggedValue::Font(font)) = &input.as_non_exposed_value() {
 		first_widgets.extend_from_slice(&[
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			DropdownInput::new(vec![
 				persistent_data
 					.font_catalog
@@ -843,7 +843,7 @@ pub fn font_inputs(parameter_widgets_info: ParameterWidgetsInfo) -> (Vec<WidgetI
 		let mut second_row = vec![TextLabel::new("").widget_instance()];
 		add_blank_assist(&mut second_row);
 		second_row.extend_from_slice(&[
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			DropdownInput::new({
 				persistent_data
 					.font_catalog
@@ -918,7 +918,7 @@ pub fn progression_widget(parameter_widgets_info: ParameterWidgetsInfo, number_p
 		let fractional_part = x.fract();
 
 		widgets.extend_from_slice(&[
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			number_props
 				.clone()
 				.label("Progress")
@@ -929,9 +929,9 @@ pub fn progression_widget(parameter_widgets_info: ParameterWidgetsInfo, number_p
 				.on_update(update_value(move |input: &NumberInput| TaggedValue::F64(whole_part + input.value.unwrap()), node_id, index))
 				.on_commit(commit_value)
 				.widget_instance(),
-			Separator::new(SeparatorType::Related).widget_instance(),
+			Separator::new(SeparatorStyle::Related).widget_instance(),
 			TextLabel::new("+").widget_instance(),
-			Separator::new(SeparatorType::Related).widget_instance(),
+			Separator::new(SeparatorStyle::Related).widget_instance(),
 			number_props
 				.label("Element #")
 				.mode_increment()
@@ -958,7 +958,7 @@ pub fn number_widget(parameter_widgets_info: ParameterWidgetsInfo, number_props:
 	};
 	match input.as_non_exposed_value() {
 		Some(&TaggedValue::F64(x)) => widgets.extend_from_slice(&[
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			number_props
 				.value(Some(x))
 				.on_update(update_value(move |x: &NumberInput| TaggedValue::F64(x.value.unwrap()), node_id, index))
@@ -966,7 +966,7 @@ pub fn number_widget(parameter_widgets_info: ParameterWidgetsInfo, number_props:
 				.widget_instance(),
 		]),
 		Some(&TaggedValue::F32(x)) => widgets.extend_from_slice(&[
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			number_props
 				.value(Some(x as f64))
 				.on_update(update_value(move |x: &NumberInput| TaggedValue::F32(x.value.unwrap() as f32), node_id, index))
@@ -974,7 +974,7 @@ pub fn number_widget(parameter_widgets_info: ParameterWidgetsInfo, number_props:
 				.widget_instance(),
 		]),
 		Some(&TaggedValue::U32(x)) => widgets.extend_from_slice(&[
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			number_props
 				.value(Some(x as f64))
 				.on_update(update_value(move |x: &NumberInput| TaggedValue::U32((x.value.unwrap()) as u32), node_id, index))
@@ -982,7 +982,7 @@ pub fn number_widget(parameter_widgets_info: ParameterWidgetsInfo, number_props:
 				.widget_instance(),
 		]),
 		Some(&TaggedValue::U64(x)) => widgets.extend_from_slice(&[
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			number_props
 				.value(Some(x as f64))
 				.on_update(update_value(move |x: &NumberInput| TaggedValue::U64((x.value.unwrap()) as u64), node_id, index))
@@ -993,15 +993,15 @@ pub fn number_widget(parameter_widgets_info: ParameterWidgetsInfo, number_props:
 			// TODO: Don't wipe out the previously set value (setting it back to the default of 100) when reenabling this checkbox back to Some from None
 			let toggle_enabled = move |checkbox_input: &CheckboxInput| TaggedValue::OptionalF64(if checkbox_input.checked { Some(100.) } else { None });
 			widgets.extend_from_slice(&[
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
-				Separator::new(SeparatorType::Related).widget_instance(),
+				Separator::new(SeparatorStyle::Related).widget_instance(),
 				// The checkbox toggles if the value is Some or None
 				CheckboxInput::new(x.is_some())
 					.on_update(update_value(toggle_enabled, node_id, index))
 					.on_commit(commit_value)
 					.widget_instance(),
-				Separator::new(SeparatorType::Related).widget_instance(),
+				Separator::new(SeparatorStyle::Related).widget_instance(),
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 				number_props
 					.value(x)
 					.on_update(update_value(move |x: &NumberInput| TaggedValue::OptionalF64(x.value), node_id, index))
@@ -1011,7 +1011,7 @@ pub fn number_widget(parameter_widgets_info: ParameterWidgetsInfo, number_props:
 			]);
 		}
 		Some(&TaggedValue::DVec2(dvec2)) => widgets.extend_from_slice(&[
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			number_props
 			// We use an arbitrary `y` instead of an arbitrary `x` here because the "Grid" node's "Spacing" value's height should be used from rectangular mode when transferred to "Y Spacing" in isometric mode
 				.value(Some(dvec2.y))
@@ -1020,7 +1020,7 @@ pub fn number_widget(parameter_widgets_info: ParameterWidgetsInfo, number_props:
 				.widget_instance(),
 		]),
 		Some(&TaggedValue::FVec2(vec2)) => widgets.extend_from_slice(&[
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			number_props
 				// We use an arbitrary `y` instead of an arbitrary `x` here because the "Grid" node's "Spacing" value's height should be used from rectangular mode when transferred to "Y Spacing" in isometric mode
 				.value(Some(vec2.y as f64))
@@ -1061,7 +1061,7 @@ pub fn blend_mode_widget(parameter_widgets_info: ParameterWidgetsInfo) -> Layout
 			.collect();
 
 		widgets.extend_from_slice(&[
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			DropdownInput::new(entries)
 				.selected_index(blend_mode.index_in_list_svg_subset().map(|index| index as u32))
 				.widget_instance(),
@@ -1082,7 +1082,7 @@ pub fn color_widget(parameter_widgets_info: ParameterWidgetsInfo, color_button:
 	};
 
 	// Add a separator
-	widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+	widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 
 	// Add the color input
 	match &**tagged_value {
@@ -1164,7 +1164,7 @@ pub fn curve_widget(parameter_widgets_info: ParameterWidgetsInfo) -> LayoutGroup
 	};
 	if let Some(TaggedValue::Curve(curve)) = &input.as_non_exposed_value() {
 		widgets.extend_from_slice(&[
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			CurveInput::new(curve.clone())
 				.on_update(update_value(|x: &CurveInput| TaggedValue::Curve(x.value.clone()), node_id, index))
 				.on_commit(commit_value)
@@ -1574,9 +1574,9 @@ pub(crate) fn rectangle_properties(node_id: NodeId, context: &mut NodeProperties
 
 	// Corner Radius
 	let mut corner_radius_row_1 = start_widgets(ParameterWidgetsInfo::new(node_id, CornerRadiusInput::<f64>::INDEX, true, context));
-	corner_radius_row_1.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+	corner_radius_row_1.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 
-	let mut corner_radius_row_2 = vec![Separator::new(SeparatorType::Unrelated).widget_instance()];
+	let mut corner_radius_row_2 = vec![Separator::new(SeparatorStyle::Unrelated).widget_instance()];
 	corner_radius_row_2.push(TextLabel::new("").widget_instance());
 	add_blank_assist(&mut corner_radius_row_2);
 
@@ -1837,7 +1837,7 @@ pub(crate) fn fill_properties(node_id: NodeId, context: &mut NodePropertiesConte
 	let backup_color_fill: Fill = backup_color.clone().into();
 	let backup_gradient_fill: Fill = backup_gradient.clone().into();
 
-	widgets_first_row.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+	widgets_first_row.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 	widgets_first_row.push(
 		ColorInput::default()
 			.value(fill.clone().into())
@@ -1896,7 +1896,7 @@ pub(crate) fn fill_properties(node_id: NodeId, context: &mut NodePropertiesConte
 						FillInput::<Color>::INDEX,
 					))
 					.widget_instance();
-				row.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+				row.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 				row.push(reverse_button);
 			}
 		}
@@ -1913,7 +1913,7 @@ pub(crate) fn fill_properties(node_id: NodeId, context: &mut NodePropertiesConte
 		];
 
 		row.extend_from_slice(&[
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			RadioInput::new(entries).selected_index(Some(if fill.as_gradient().is_some() { 1 } else { 0 })).widget_instance(),
 		]);
 
@@ -1946,7 +1946,7 @@ pub(crate) fn fill_properties(node_id: NodeId, context: &mut NodePropertiesConte
 						FillInput::<Color>::INDEX,
 					))
 					.widget_instance();
-				row.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+				row.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 				row.push(reverse_radial_gradient_button);
 			}
 		}
@@ -1982,7 +1982,7 @@ pub(crate) fn fill_properties(node_id: NodeId, context: &mut NodePropertiesConte
 		];
 
 		row.extend_from_slice(&[
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			RadioInput::new(entries).selected_index(Some(gradient.gradient_type as u32)).widget_instance(),
 		]);
 
@@ -2103,7 +2103,7 @@ pub fn math_properties(node_id: NodeId, context: &mut NodePropertiesContext) ->
 		};
 		if let Some(TaggedValue::String(x)) = &input.as_non_exposed_value() {
 			widgets.extend_from_slice(&[
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 				TextInput::new(x.clone())
 					.centered(true)
 					.on_update(update_value(
@@ -2331,7 +2331,7 @@ pub mod choice {
 				let committer = || super::commit_value;
 				let updater = || super::update_value(move |v: &W::Value| TaggedValue::from(v.clone()), node_id, index);
 				let widget = self.widget_factory.build(current, updater, committer);
-				widgets.extend_from_slice(&[Separator::new(SeparatorType::Unrelated).widget_instance(), widget]);
+				widgets.extend_from_slice(&[Separator::new(SeparatorStyle::Unrelated).widget_instance(), widget]);
 			}
 
 			let mut row = LayoutGroup::Row { widgets };

editor/src/messages/portfolio/document/overlays/grid_overlays.rs

@@ -242,7 +242,7 @@ pub fn overlay_options(grid: &GridSnapping) -> Vec<LayoutGroup> {
 	widgets.push(LayoutGroup::Row {
 		widgets: vec![
 			TextLabel::new("Type").table_align(true).widget_instance(),
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			RadioInput::new(vec![
 				RadioEntryData::new("rectangular").label("Rectangular").on_update(update_val(grid, |grid, _| {
 					if let GridType::Isometric { y_axis_spacing, angle_a, angle_b } = grid.grid_type {
@@ -274,7 +274,7 @@ pub fn overlay_options(grid: &GridSnapping) -> Vec<LayoutGroup> {
 
 	let mut color_widgets = vec![
 		TextLabel::new("Display").table_align(true).widget_instance(),
-		Separator::new(SeparatorType::Unrelated).widget_instance(),
+		Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 	];
 	color_widgets.extend([
 		CheckboxInput::new(grid.dot_display)
@@ -282,7 +282,7 @@ pub fn overlay_options(grid: &GridSnapping) -> Vec<LayoutGroup> {
 			.tooltip_label("Display as Dotted Grid")
 			.on_update(update_display(grid, |grid| Some(&mut grid.dot_display)))
 			.widget_instance(),
-		Separator::new(SeparatorType::Related).widget_instance(),
+		Separator::new(SeparatorStyle::Related).widget_instance(),
 	]);
 	color_widgets.push(
 		ColorInput::new(FillChoice::Solid(grid.grid_color.to_gamma_srgb()))
@@ -296,14 +296,14 @@ pub fn overlay_options(grid: &GridSnapping) -> Vec<LayoutGroup> {
 	widgets.push(LayoutGroup::Row {
 		widgets: vec![
 			TextLabel::new("Origin").table_align(true).widget_instance(),
-			Separator::new(SeparatorType::Unrelated).widget_instance(),
+			Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 			NumberInput::new(Some(grid.origin.x))
 				.label("X")
 				.unit(" px")
 				.min_width(98)
 				.on_update(update_origin(grid, |grid| Some(&mut grid.origin.x)))
 				.widget_instance(),
-			Separator::new(SeparatorType::Related).widget_instance(),
+			Separator::new(SeparatorStyle::Related).widget_instance(),
 			NumberInput::new(Some(grid.origin.y))
 				.label("Y")
 				.unit(" px")
@@ -317,7 +317,7 @@ pub fn overlay_options(grid: &GridSnapping) -> Vec<LayoutGroup> {
 		GridType::Rectangular { spacing } => widgets.push(LayoutGroup::Row {
 			widgets: vec![
 				TextLabel::new("Spacing").table_align(true).widget_instance(),
-				Separator::new(SeparatorType::Unrelated).widget_instance(),
+				Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 				NumberInput::new(Some(spacing.x))
 					.label("X")
 					.unit(" px")
@@ -325,7 +325,7 @@ pub fn overlay_options(grid: &GridSnapping) -> Vec<LayoutGroup> {
 					.min_width(98)
 					.on_update(update_origin(grid, |grid| grid.grid_type.rectangular_spacing().map(|spacing| &mut spacing.x)))
 					.widget_instance(),
-				Separator::new(SeparatorType::Related).widget_instance(),
+				Separator::new(SeparatorStyle::Related).widget_instance(),
 				NumberInput::new(Some(spacing.y))
 					.label("Y")
 					.unit(" px")
@@ -339,7 +339,7 @@ pub fn overlay_options(grid: &GridSnapping) -> Vec<LayoutGroup> {
 			widgets.push(LayoutGroup::Row {
 				widgets: vec![
 					TextLabel::new("Y Spacing").table_align(true).widget_instance(),
-					Separator::new(SeparatorType::Unrelated).widget_instance(),
+					Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 					NumberInput::new(Some(y_axis_spacing))
 						.unit(" px")
 						.min(0.)
@@ -351,13 +351,13 @@ pub fn overlay_options(grid: &GridSnapping) -> Vec<LayoutGroup> {
 			widgets.push(LayoutGroup::Row {
 				widgets: vec![
 					TextLabel::new("Angles").table_align(true).widget_instance(),
-					Separator::new(SeparatorType::Unrelated).widget_instance(),
+					Separator::new(SeparatorStyle::Unrelated).widget_instance(),
 					NumberInput::new(Some(angle_a))
 						.unit("°")
 						.min_width(98)
 						.on_update(update_origin(grid, |grid| grid.grid_type.angle_a()))
 						.widget_instance(),
-					Separator::new(SeparatorType::Related).widget_instance(),
+					Separator::new(SeparatorStyle::Related).widget_instance(),
 					NumberInput::new(Some(angle_b))
 						.unit("°")
 						.min_width(98)

editor/src/messages/tool/common_functionality/color_selector.rs

@@ -83,16 +83,16 @@ impl ToolColorOptions {
 		let mut widgets = vec![TextLabel::new(label_text).widget_instance()];
 
 		if !color_allow_none {
-			widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+			widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 		} else {
 			let reset = IconButton::new("CloseX", 12)
 				.disabled(self.custom_color.is_none() && self.color_type == ToolColorType::Custom)
 				.tooltip_label("Clear Color")
 				.on_update(reset_callback);
 
-			widgets.push(Separator::new(SeparatorType::Related).widget_instance());
+			widgets.push(Separator::new(SeparatorStyle::Related).widget_instance());
 			widgets.push(reset.widget_instance());
-			widgets.push(Separator::new(SeparatorType::Related).widget_instance());
+			widgets.push(Separator::new(SeparatorStyle::Related).widget_instance());
 		};
 
 		let entries = vec![
@@ -109,7 +109,7 @@ impl ToolColorOptions {
 		.collect();
 		let radio = RadioInput::new(entries).selected_index(Some(self.color_type.clone() as u32)).widget_instance();
 		widgets.push(radio);
-		widgets.push(Separator::new(SeparatorType::Related).widget_instance());
+		widgets.push(Separator::new(SeparatorStyle::Related).widget_instance());
 
 		let fill_choice = match self.active_color() {
 			Some(color) => FillChoice::Solid(color.to_gamma_srgb()),

editor/src/messages/tool/common_functionality/pivot.rs

@@ -83,7 +83,7 @@ pub fn pivot_gizmo_type_widget(state: PivotGizmoState, source: PivotToolSource)
 				.into(),
 			})
 			.widget_instance(),
-		Separator::new(SeparatorType::Related).widget_instance(),
+		Separator::new(SeparatorStyle::Related).widget_instance(),
 		DropdownInput::new(vec![gizmo_type_entries])
 			.selected_index(Some(match state.gizmo_type {
 				PivotGizmoType::Pivot => 0,

editor/src/messages/tool/tool_messages/brush_tool.rs

@@ -108,7 +108,7 @@ impl LayoutHolder for BrushTool {
 				.unit(" px")
 				.on_update(|number_input: &NumberInput| BrushToolMessage::UpdateOptions { options: BrushToolMessageOptionsUpdate::Diameter(number_input.value.unwrap()) }.into())
 				.widget_instance(),
-			Separator::new(SeparatorType::Related).widget_instance(),
+			Separator::new(SeparatorStyle::Related).widget_instance(),
 			NumberInput::new(Some(self.options.hardness))
 				.label("Hardness")
 				.min(0.)
@@ -122,7 +122,7 @@ impl LayoutHolder for BrushTool {
 					.into()
 				})
 				.widget_instance(),
-			Separator::new(SeparatorType::Related).widget_instance(),
+			Separator::new(SeparatorStyle::Related).widget_instance(),
 			NumberInput::new(Some(self.options.flow))
 				.label("Flow")
 				.min(1.)
@@ -136,7 +136,7 @@ impl LayoutHolder for BrushTool {
 					.into()
 				})
 				.widget_instance(),
-			Separator::new(SeparatorType::Related).widget_instance(),
+			Separator::new(SeparatorStyle::Related).widget_instance(),
 			NumberInput::new(Some(self.options.spacing))
 				.label("Spacing")
 				.min(1.)
@@ -152,7 +152,7 @@ impl LayoutHolder for BrushTool {
 				.widget_instance(),
 		];
 
-		widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+		widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 
 		let draw_mode_entries: Vec<_> = [DrawMode::Draw, DrawMode::Erase, DrawMode::Restore]
 			.into_iter()
@@ -167,7 +167,7 @@ impl LayoutHolder for BrushTool {
 			.collect();
 		widgets.push(RadioInput::new(draw_mode_entries).selected_index(Some(self.options.draw_mode as u32)).widget_instance());
 
-		widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+		widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 
 		widgets.append(&mut self.options.color.create_widgets(
 			"Color",
@@ -194,7 +194,7 @@ impl LayoutHolder for BrushTool {
 			},
 		));
 
-		widgets.push(Separator::new(SeparatorType::Related).widget_instance());
+		widgets.push(Separator::new(SeparatorStyle::Related).widget_instance());
 
 		let blend_mode_entries: Vec<Vec<_>> = BlendMode::list()
 			.iter()

editor/src/messages/tool/tool_messages/freehand_tool.rs

@@ -122,7 +122,7 @@ impl LayoutHolder for FreehandTool {
 			},
 		);
 
-		widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+		widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 
 		widgets.append(&mut self.options.stroke.create_widgets(
 			"Stroke",
@@ -148,7 +148,7 @@ impl LayoutHolder for FreehandTool {
 				.into()
 			},
 		));
-		widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+		widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 		widgets.push(create_weight_widget(self.options.line_weight));
 
 		Layout(vec![LayoutGroup::Row { widgets }])

editor/src/messages/tool/tool_messages/path_tool.rs

@@ -234,8 +234,8 @@ impl LayoutHolder for PathTool {
 			})
 			.widget_instance();
 
-		let related_seperator = Separator::new(SeparatorType::Related).widget_instance();
+		let related_seperator = Separator::new(SeparatorStyle::Related).widget_instance();
-		let unrelated_seperator = Separator::new(SeparatorType::Unrelated).widget_instance();
+		let unrelated_seperator = Separator::new(SeparatorStyle::Unrelated).widget_instance();
 
 		let colinear_handles_description = "Keep both handles unbent, each 180° apart, when moving either.";
 		let colinear_handles_state = manipulator_angle.and_then(|angle| match angle {

editor/src/messages/tool/tool_messages/pen_tool.rs

@@ -178,7 +178,7 @@ impl LayoutHolder for PenTool {
 			},
 		);
 
-		widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+		widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 
 		widgets.append(&mut self.options.stroke.create_widgets(
 			"Stroke",
@@ -205,11 +205,11 @@ impl LayoutHolder for PenTool {
 			},
 		));
 
-		widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+		widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 
 		widgets.push(create_weight_widget(self.options.line_weight));
 
-		widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+		widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 
 		widgets.push(
 			RadioInput::new(vec![

editor/src/messages/tool/tool_messages/select_tool.rs

@@ -223,12 +223,12 @@ impl LayoutHolder for SelectTool {
 		widgets.push(self.deep_selection_widget());
 
 		// Pivot gizmo type (checkbox + dropdown for pivot/origin)
-		widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+		widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 		widgets.extend(pivot_gizmo_type_widget(self.tool_data.pivot_gizmo.state, PivotToolSource::Select));
 
 		if self.tool_data.pivot_gizmo.state.is_pivot_type() {
 			// Nine-position reference point widget
-			widgets.push(Separator::new(SeparatorType::Related).widget_instance());
+			widgets.push(Separator::new(SeparatorStyle::Related).widget_instance());
 			widgets.push(pivot_reference_point_widget(
 				self.tool_data.selected_layers_count == 0 || !self.tool_data.pivot_gizmo.state.is_pivot(),
 				self.tool_data.pivot_gizmo.pivot.to_pivot_position(),
@@ -236,7 +236,7 @@ impl LayoutHolder for SelectTool {
 			));
 
 			// Pivot pin button
-			widgets.push(Separator::new(SeparatorType::Related).widget_instance());
+			widgets.push(Separator::new(SeparatorStyle::Related).widget_instance());
 
 			let pin_active = self.tool_data.pivot_gizmo.pin_active();
 			let pin_enabled = self.tool_data.pivot_gizmo.pivot.old_pivot_position == ReferencePoint::None && !self.tool_data.pivot_gizmo.state.disabled;
@@ -248,20 +248,20 @@ impl LayoutHolder for SelectTool {
 
 		// Align
 		let disabled = self.tool_data.selected_layers_count < 2;
-		widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+		widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 		widgets.extend(self.alignment_widgets(disabled));
 
 		// Flip
 		let disabled = self.tool_data.selected_layers_count == 0;
-		widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+		widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 		widgets.extend(self.flip_widgets(disabled));
 
 		// Turn
-		widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+		widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 		widgets.extend(self.turn_widgets(disabled));
 
 		// Boolean
-		widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+		widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 		widgets.extend(self.boolean_widgets(self.tool_data.selected_layers_count));
 
 		Layout(vec![LayoutGroup::Row { widgets }])

editor/src/messages/tool/tool_messages/shape_tool.rs

@@ -253,30 +253,30 @@ impl LayoutHolder for ShapeTool {
 
 		if !self.tool_data.hide_shape_option_widget {
 			widgets.push(create_shape_option_widget(self.options.shape_type));
-			widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+			widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 
 			if self.options.shape_type == ShapeType::Polygon || self.options.shape_type == ShapeType::Star {
 				widgets.push(create_sides_widget(self.options.vertices));
-				widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+				widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 			}
 
 			if self.options.shape_type == ShapeType::Arc {
 				widgets.push(create_arc_type_widget(self.options.arc_type));
-				widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+				widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 			}
 		}
 
 		if self.options.shape_type == ShapeType::Spiral {
 			widgets.push(create_spiral_type_widget(self.options.spiral_type));
-			widgets.push(Separator::new(SeparatorType::Related).widget_instance());
+			widgets.push(Separator::new(SeparatorStyle::Related).widget_instance());
 
 			widgets.push(create_turns_widget(self.options.turns));
-			widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+			widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 		}
 
 		if self.options.shape_type == ShapeType::Grid {
 			widgets.push(create_grid_type_widget(self.options.grid_type));
-			widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+			widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 		}
 
 		if self.options.shape_type != ShapeType::Line {
@@ -305,7 +305,7 @@ impl LayoutHolder for ShapeTool {
 				},
 			));
 
-			widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+			widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 		}
 
 		widgets.append(&mut self.options.stroke.create_widgets(
@@ -332,7 +332,7 @@ impl LayoutHolder for ShapeTool {
 				.into()
 			},
 		));
-		widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+		widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 		widgets.push(create_weight_widget(self.options.line_weight));
 
 		Layout(vec![LayoutGroup::Row { widgets }])

editor/src/messages/tool/tool_messages/spline_tool.rs

@@ -129,7 +129,7 @@ impl LayoutHolder for SplineTool {
 			},
 		);
 
-		widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+		widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 
 		widgets.append(&mut self.options.stroke.create_widgets(
 			"Stroke",
@@ -155,7 +155,7 @@ impl LayoutHolder for SplineTool {
 				.into()
 			},
 		));
-		widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+		widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 		widgets.push(create_weight_widget(self.options.line_weight));
 
 		Layout(vec![LayoutGroup::Row { widgets }])

editor/src/messages/tool/tool_messages/text_tool.rs

@@ -215,13 +215,13 @@ fn create_text_widgets(tool: &TextTool, font_catalog: &FontCatalog) -> Vec<Widge
 	let align = RadioInput::new(align_entries).selected_index(Some(tool.options.align as u32)).widget_instance();
 	vec![
 		font,
-		Separator::new(SeparatorType::Related).widget_instance(),
+		Separator::new(SeparatorStyle::Related).widget_instance(),
 		style,
-		Separator::new(SeparatorType::Related).widget_instance(),
+		Separator::new(SeparatorStyle::Related).widget_instance(),
 		size,
-		Separator::new(SeparatorType::Related).widget_instance(),
+		Separator::new(SeparatorStyle::Related).widget_instance(),
 		line_height_ratio,
-		Separator::new(SeparatorType::Related).widget_instance(),
+		Separator::new(SeparatorStyle::Related).widget_instance(),
 		align,
 	]
 }
@@ -243,7 +243,7 @@ impl TextTool {
 	fn layout(&self, font_catalog: &FontCatalog) -> Layout {
 		let mut widgets = create_text_widgets(self, font_catalog);
 
-		widgets.push(Separator::new(SeparatorType::Unrelated).widget_instance());
+		widgets.push(Separator::new(SeparatorStyle::Unrelated).widget_instance());
 
 		widgets.append(&mut self.options.fill.create_widgets(
 			"Fill",

editor/src/messages/tool/utility_types.rs

@@ -278,11 +278,11 @@ impl ToolData {
 			)
 			.filter(|group| !group.is_empty())
 			.flat_map(|group| {
-				let separator = std::iter::once(Separator::new(SeparatorType::Section).direction(SeparatorDirection::Vertical).widget_instance());
+				let separator = std::iter::once(Separator::new(SeparatorStyle::Section).direction(SeparatorDirection::Vertical).widget_instance());
 				let buttons = group.into_iter().map(|ToolEntry { tooltip_label, tooltip_description, tooltip_shortcut, tool_type, icon_name }| {
 					IconButton::new(icon_name, 32)
 						.disabled(false)
-						.active(match tool_type {
+						.emphasized(match tool_type {
 							ToolType::Line | ToolType::Ellipse | ToolType::Rectangle => { self.active_shape_type.is_some() && active_tool == tool_type }
 							_ => active_tool == tool_type,
 						})
@@ -533,7 +533,7 @@ impl HintData {
 
 		for (index, hint_group) in self.0.iter().enumerate() {
 			if index > 0 {
-				widgets.push(Separator::new(SeparatorType::Section).widget_instance());
+				widgets.push(Separator::new(SeparatorStyle::Section).widget_instance());
 			}
 			for hint in &hint_group.0 {
 				if hint.plus {

frontend/src/components/floating-menus/ColorPicker.svelte

@@ -529,7 +529,7 @@
 			<LayoutRow>
 				{@const hexDescription = "Color code in hexadecimal format. 6 digits if opaque, 8 with alpha. Accepts input of CSS color values including named colors."}
 				<TextLabel tooltipLabel="Hex Color Code" tooltipDescription={hexDescription}>Hex</TextLabel>
-				<Separator type="Related" />
+				<Separator style="Related" />
 				<LayoutRow>
 					<TextInput
 						value={newColor.toHexOptionalAlpha() || "-"}
@@ -547,11 +547,11 @@
 			</LayoutRow>
 			<LayoutRow>
 				<TextLabel tooltipLabel="Red/Green/Blue" tooltipDescription="Integers 0–255.">RGB</TextLabel>
-				<Separator type="Related" />
+				<Separator style="Related" />
 				<LayoutRow>
 					{#each rgbChannels as [channel, strength], index}
 						{#if index > 0}
-							<Separator type="Related" />
+							<Separator style="Related" />
 						{/if}
 						<NumberInput
 							value={strength}
@@ -578,11 +578,11 @@
 					tooltipLabel="Hue/Saturation/Value"
 					tooltipDescription="Also known as Hue/Saturation/Brightness (HSB). Not to be confused with Hue/Saturation/Lightness (HSL), a different color model.">HSV</TextLabel
 				>
-				<Separator type="Related" />
+				<Separator style="Related" />
 				<LayoutRow>
 					{#each hsvChannels as [channel, strength], index}
 						{#if index > 0}
-							<Separator type="Related" />
+							<Separator style="Related" />
 						{/if}
 						<NumberInput
 							value={strength}
@@ -616,7 +616,7 @@
 			<LayoutRow>
 				{@const alphaDescription = "The level of translucency, from transparent (0%) to opaque (100%)."}
 				<TextLabel tooltipLabel="Alpha" tooltipDescription={alphaDescription}>Alpha</TextLabel>
-				<Separator type="Related" />
+				<Separator style="Related" />
 				<NumberInput
 					value={!isNone ? alpha * 100 : undefined}
 					{disabled}
@@ -649,7 +649,7 @@
 						data-tooltip-description={disabled ? "Disabled (read-only)." : ""}
 						tabindex="0"
 					></button>
-					<Separator type="Related" />
+					<Separator style="Related" />
 				{/if}
 				<button
 					class="preset-color black"
@@ -659,7 +659,7 @@
 					data-tooltip-description={disabled ? "Disabled (read-only)." : ""}
 					tabindex="0"
 				></button>
-				<Separator type="Related" />
+				<Separator style="Related" />
 				<button
 					class="preset-color white"
 					{disabled}
@@ -668,7 +668,7 @@
 					data-tooltip-description={disabled ? "Disabled (read-only)." : ""}
 					tabindex="0"
 				></button>
-				<Separator type="Related" />
+				<Separator style="Related" />
 				<button class="preset-color pure" {disabled} on:click={setColorPresetSubtile} tabindex="-1">
 					{#each PURE_COLORS_GRAYABLE as [name, color, gray]}
 						<div
@@ -681,7 +681,7 @@
 					{/each}
 				</button>
 				{#if eyedropperSupported()}
-					<Separator type="Related" />
+					<Separator style="Related" />
 					<IconButton icon="Eyedropper" size={24} {disabled} action={activateEyedropperSample} tooltipLabel="Eyedropper" tooltipDescription="Sample a pixel color from the document." />
 				{/if}
 			</LayoutRow>

frontend/src/components/floating-menus/MenuList.svelte

@@ -437,7 +437,7 @@
 		{/if}
 		{#each reactiveEntries as section, sectionIndex (sectionIndex)}
 			{#if includeSeparator(reactiveEntries, section, sectionIndex, search)}
-				<Separator type="Section" direction="Vertical" />
+				<Separator style="Section" direction="Vertical" />
 			{/if}
 			{#each currentEntries(section, virtualScrollingEntryHeight, virtualScrollingStartIndex, virtualScrollingEndIndex, search) as entry, entryIndex (entryIndex + startIndex)}
 				<LayoutRow

frontend/src/components/floating-menus/NodeCatalog.svelte

@@ -12,7 +12,9 @@
 	const dispatch = createEventDispatcher<{ selectNodeType: string }>();
 	const nodeGraph = getContext<NodeGraphState>("nodeGraph");
 
+	// Content
 	export let disabled = false;
+	// Behavior
 	export let initialSearchTerm = "";
 
 	let nodeSearchInput: TextInput | undefined = undefined;

frontend/src/components/panels/Document.svelte

@@ -714,7 +714,7 @@
 							// 	}
 							// }
 
-							&:not(.active) {
+							&:not(.emphasized) {
 								.color-general {
 									fill: var(--color-data-general);
 								}

frontend/src/components/widgets/WidgetSpan.svelte

@@ -28,7 +28,6 @@
 	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
 	import ShortcutLabel from "@graphite/components/widgets/labels/ShortcutLabel.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
-	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
 
 	const editor = getContext<Editor>("editor");
 
@@ -163,9 +162,7 @@
 		{/if}
 		{@const popoverButton = narrowWidgetProps(component.props, "PopoverButton")}
 		{#if popoverButton}
-			<PopoverButton {...exclude(popoverButton, ["popoverLayout"])}>
+			<PopoverButton {...exclude(popoverButton)} {layoutTarget} />
-				<WidgetLayout layout={popoverButton.popoverLayout} {layoutTarget} />
-			</PopoverButton>
 		{/if}
 		{@const radioInput = narrowWidgetProps(component.props, "RadioInput")}
 		{#if radioInput}

frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte

@@ -4,8 +4,10 @@
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
 
+	// Content
 	export let labels: string[];
 	export let disabled = false;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;

frontend/src/components/widgets/buttons/IconButton.svelte

@@ -4,11 +4,14 @@
 
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 
+	// Content
 	export let icon: IconName;
 	export let hoverIcon: IconName | undefined = undefined;
 	export let size: IconSize;
 	export let disabled = false;
-	export let active = false;
+	// Styling
+	export let emphasized = false;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;
@@ -28,13 +31,13 @@
 	class={`icon-button size-${size} ${className} ${extraClasses}`.trim()}
 	class:hover-icon={hoverIcon && !disabled}
 	class:disabled
-	class:active
+	class:emphasized
 	on:click={action}
 	{disabled}
 	data-tooltip-label={tooltipLabel}
 	data-tooltip-description={tooltipDescription}
 	data-tooltip-shortcut={tooltipShortcut?.shortcut ? JSON.stringify(tooltipShortcut.shortcut) : undefined}
-	tabindex={active ? -1 : 0}
+	tabindex={emphasized ? -1 : 0}
 	{...$$restProps}
 >
 	<IconLabel {icon} />
@@ -86,7 +89,7 @@
 			}
 		}
 
-		&.active {
+		&.emphasized {
 			background: var(--color-e-nearwhite);
 
 			svg {

frontend/src/components/widgets/buttons/ImageButton.svelte

@@ -6,9 +6,11 @@
 	export { className as class };
 	export let classes: Record<string, boolean> = {};
 
+	// Content
 	export let image: string;
 	export let width: string | undefined;
 	export let height: string | undefined;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;

frontend/src/components/widgets/buttons/ParameterExposeButton.svelte

@@ -3,8 +3,10 @@
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 
+	// Content
 	export let exposed: boolean;
 	export let dataType: FrontendGraphDataType;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;

frontend/src/components/widgets/buttons/PopoverButton.svelte

@@ -1,22 +1,28 @@
 <script lang="ts">
 	import { type IconName, type PopoverButtonStyle } from "@graphite/icons";
 
-	import type { MenuDirection, ActionShortcut } from "@graphite/messages";
+	import type { MenuDirection, ActionShortcut, Layout, LayoutTarget } from "@graphite/messages";
 
 	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
+	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
 
+	export let layoutTarget: LayoutTarget;
+
+	// Content
 	export let style: PopoverButtonStyle = "DropdownArrow";
-	export let menuDirection: MenuDirection = "Bottom";
 	export let icon: IconName | undefined = undefined;
+	export let disabled = false;
+	// Children
+	export let popoverLayout: Layout;
+	export let popoverMinWidth = 1;
+	export let menuDirection: MenuDirection = "Bottom";
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;
-	export let disabled = false;
-	export let popoverMinWidth = 1;
-
 	// Callbacks
 	export let action: (() => void) | undefined = undefined;
 
@@ -46,7 +52,7 @@
 	{/if}
 
 	<FloatingMenu {open} on:open={({ detail }) => (open = detail)} minWidth={popoverMinWidth} type="Popover" direction={menuDirection || "Bottom"}>
-		<slot />
+		<WidgetLayout layout={popoverLayout} {layoutTarget} />
 	</FloatingMenu>
 </LayoutRow>
 

frontend/src/components/widgets/buttons/TextButton.svelte

@@ -13,22 +13,27 @@
 
 	let self: MenuList;
 
-	// Note: IconButton should be used if only an icon, but no label, is desired.
+	// Note: IconButton should instead be used if only an icon, but no label, is desired.
 	// However, if multiple TextButton widgets are used in a group with only some having no label, this component is able to accommodate that.
+
+	// Content
 	export let label: string;
 	export let icon: IconName | undefined = undefined;
 	export let hoverIcon: IconName | undefined = undefined;
+	export let disabled = false;
+	// Children
+	export let menuListChildren: MenuListEntry[][] | undefined = undefined;
+	export let menuListChildrenHash: bigint | undefined = undefined;
+	// Styling
 	export let emphasized = false;
 	export let flush = false;
-	export let minWidth = 0;
-	export let disabled = false;
 	export let narrow = false;
+	// Sizing
+	export let minWidth = 0;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;
-	export let menuListChildren: MenuListEntry[][] | undefined = undefined;
-	export let menuListChildrenHash: bigint | undefined = undefined;
-
 	// Callbacks
 	// TODO: Replace this with an event binding (and on other components that do this)
 	export let action: (() => void) | undefined;

frontend/src/components/widgets/inputs/CheckboxInput.svelte

@@ -8,19 +8,20 @@
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 
 	const dispatch = createEventDispatcher<{ checked: boolean }>();
+	const backupId = String(Math.random()).substring(2);
 
+	// Content
 	export let checked = false;
-	export let disabled = false;
 	export let icon: IconName = "Checkmark";
+	export let forLabel: bigint | undefined = undefined;
+	export let disabled = false;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;
-	export let forLabel: bigint | undefined = undefined;
 
 	let inputElement: HTMLInputElement | undefined;
 
-	const backupId = String(Math.random()).substring(2);
-
 	$: id = forLabel !== undefined ? String(forLabel) : backupId;
 	$: displayIcon = (!checked && icon === "Checkmark" ? "Empty12px" : icon) as IconName;
 

frontend/src/components/widgets/inputs/ColorInput.svelte

@@ -9,18 +9,21 @@
 
 	const dispatch = createEventDispatcher<{ value: FillChoice; startHistoryTransaction: undefined }>();
 
-	let open = false;
+	// Content
-
 	export let value: FillChoice;
-	export let disabled = false;
-	export let narrow = false;
 	export let allowNone = false;
-	export let menuDirection: MenuDirection = "Bottom";
 	// export let allowTransparency = false; // TODO: Implement
+	export let menuDirection: MenuDirection = "Bottom";
+	export let disabled = false;
+	// Styling
+	export let narrow = false;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 
+	let open = false;
+
 	$: outlineFactor = contrastingOutlineFactor(value, ["--color-1-nearblack", "--color-3-darkgray"], 0.01);
 	$: outlined = outlineFactor > 0.0001;
 	$: chosenGradient = value instanceof Gradient ? value.toLinearGradientCSS() : `linear-gradient(${value.toHexOptionalAlpha()}, ${value.toHexOptionalAlpha()})`;

frontend/src/components/widgets/inputs/CurveInput.svelte

@@ -10,18 +10,15 @@
 		value: Curve;
 	}>();
 
-	export let classes: Record<string, boolean> = {};
+	const GRID_SIZE = 4;
-	let styleName = "";
+
-	export { styleName as style };
+	// Content
-	export let styles: Record<string, string | number | undefined> = {};
 	export let value: Curve;
-	export let disabled = false;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 
-	const GRID_SIZE = 4;
-
 	let manipulatorsList: CurveManipulatorGroup[] = [
 		{
 			anchor: [0, 0],
@@ -190,7 +187,7 @@
 	}
 </script>
 
-<LayoutRow class="curve-input" classes={{ disabled, ...classes }} style={styleName} {styles} {tooltipLabel} {tooltipDescription} {tooltipShortcut}>
+<LayoutRow class="curve-input" {tooltipLabel} {tooltipDescription} {tooltipShortcut}>
 	<svg viewBox="0 0 1 1" on:pointermove={handlePointerMove} on:pointerup={handlePointerUp}>
 		{#each { length: GRID_SIZE - 1 } as _, i}
 			<path class="grid" d={`M 0 ${(i + 1) / GRID_SIZE} L 1 ${(i + 1) / GRID_SIZE}`} />

frontend/src/components/widgets/inputs/DropdownInput.svelte

@@ -14,19 +14,25 @@
 
 	let self: LayoutRow | undefined;
 
-	export let entries: MenuListEntry[][];
+	// Content
-	export let entriesHash: bigint | undefined = undefined;
 	export let selectedIndex: number | undefined = undefined; // When not provided, a dash is displayed
 	export let drawIcon = false;
-	export let interactive = true;
 	export let disabled = false;
+	// Children
+	export let entries: MenuListEntry[][];
+	export let entriesHash: bigint | undefined = undefined;
+	// Styling
 	export let narrow = false;
+	// Behavior
 	export let virtualScrolling = false;
+	export let interactive = true;
+	// Sizing
+	export let minWidth = 0;
+	export let maxWidth = 0;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;
-	export let minWidth = 0;
-	export let maxWidth = 0;
 
 	let activeEntry = makeActiveEntry();
 	let activeEntrySkipWatcher = false;

frontend/src/components/widgets/inputs/NumberInput.svelte

@@ -16,51 +16,44 @@
 
 	const dispatch = createEventDispatcher<{ value: number | undefined; startHistoryTransaction: undefined }>();
 
-	// Label
+	// Content
+	/// When `value` is not provided (i.e. it's `undefined`), a dash is displayed.
+	export let value: number | undefined = undefined;
 	export let label: string | undefined = undefined;
-	export let tooltipLabel: string | undefined = undefined;
-	export let tooltipDescription: string | undefined = undefined;
-	export let tooltipShortcut: ActionShortcut | undefined = undefined;
-
-	// Disabled
 	export let disabled = false;
-
+	// Styling
-	// Narrow
 	export let narrow = false;
-
+	// Behavior
-	// Value
+	/// Mode behavior
-	// When `value` is not provided (i.e. it's `undefined`), a dash is displayed.
+	/// "Increment" shows arrows and allows dragging left/right to change the value.
-	export let value: number | undefined = undefined; // NOTE: Do not update this directly, do so by calling `updateValue()` instead.
+	/// "Range" shows a range slider between some minimum and maximum value.
+	export let mode: NumberInputMode = "Increment";
 	export let min: number | undefined = undefined;
 	export let max: number | undefined = undefined;
+	/// `rangeMin` and `rangeMax` are only applicable with a `mode` of "Range".
+	/// They set the lower and upper values of the slider to drag between.
+	export let rangeMin = 0;
+	export let rangeMax = 1;
+	/// When `mode` is "Increment", `step` is the multiplier or addend used with `incrementBehavior`.
+	/// When `mode` is "Range", `step` is the range slider's snapping increment if `isInteger` is `true`.
+	export let step = 1;
 	export let isInteger = false;
-
+	/// `incrementBehavior` is only applicable with a `mode` of "Increment".
-	// Number presentation
+	/// "Add"/"Multiply": The value is added or multiplied by `step`.
+	/// "None": the increment arrows are not shown.
+	/// "Callback": the functions `incrementCallbackIncrease` and `incrementCallbackDecrease` call custom behavior.
+	export let incrementBehavior: NumberInputIncrementBehavior = "Add";
 	export let displayDecimalPlaces = 2;
 	export let unit = "";
 	export let unitIsHiddenWhenEditing = true;
 
-	// Mode behavior
+	// Sizing
-	// "Increment" shows arrows and allows dragging left/right to change the value.
-	// "Range" shows a range slider between some minimum and maximum value.
-	export let mode: NumberInputMode = "Increment";
-	// When `mode` is "Increment", `step` is the multiplier or addend used with `incrementBehavior`.
-	// When `mode` is "Range", `step` is the range slider's snapping increment if `isInteger` is `true`.
-	export let step = 1;
-	// `incrementBehavior` is only applicable with a `mode` of "Increment".
-	// "Add"/"Multiply": The value is added or multiplied by `step`.
-	// "None": the increment arrows are not shown.
-	// "Callback": the functions `incrementCallbackIncrease` and `incrementCallbackDecrease` call custom behavior.
-	export let incrementBehavior: NumberInputIncrementBehavior = "Add";
-	// `rangeMin` and `rangeMax` are only applicable with a `mode` of "Range".
-	// They set the lower and upper values of the slider to drag between.
-	export let rangeMin = 0;
-	export let rangeMax = 1;
-
-	// Styling
 	export let minWidth = 0;
 	export let maxWidth = 0;
-
+	// Tooltips
+	export let tooltipLabel: string | undefined = undefined;
+	export let tooltipDescription: string | undefined = undefined;
+	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 	// Callbacks
 	export let incrementCallbackIncrease: (() => void) | undefined = undefined;
 	export let incrementCallbackDecrease: (() => void) | undefined = undefined;
@@ -91,7 +84,6 @@
 	let ctrlKeyDown = false;
 
 	$: watchValue(value, unit);
-
 	$: sliderStepValue = isInteger ? (step === undefined ? 1 : step) : "any";
 	$: styles = {
 		...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}),

frontend/src/components/widgets/inputs/RadioInput.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 
-	import { type RadioEntries, type RadioEntryData } from "@graphite/messages";
+	import { type RadioEntryData } from "@graphite/messages";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
@@ -9,11 +9,15 @@
 
 	const dispatch = createEventDispatcher<{ selectedIndex: number }>();
 
-	export let entries: RadioEntries;
+	// Content
 	export let selectedIndex: number | undefined = undefined;
 	export let disabled = false;
-	export let minWidth = 0;
+	// Children
+	export let entries: RadioEntryData[];
+	// Styling
 	export let narrow = false;
+	// Sizing
+	export let minWidth = 0;
 
 	$: mixed = selectedIndex === undefined && !disabled;
 

frontend/src/components/widgets/inputs/ReferencePointInput.svelte

@@ -5,8 +5,10 @@
 
 	const dispatch = createEventDispatcher<{ value: ReferencePoint }>();
 
+	// Content
 	export let value: string;
 	export let disabled = false;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;

frontend/src/components/widgets/inputs/TextInput.svelte

@@ -7,22 +7,21 @@
 
 	const dispatch = createEventDispatcher<{ commitText: string }>();
 
-	// Label
+	// Content
+	export let value: string;
 	export let label: string | undefined = undefined;
+	export let placeholder: string | undefined = undefined;
+	export let disabled = false;
+	// Styling
+	export let narrow = false;
+	export let centered = false;
+	// Sizing
+	export let minWidth = 0;
+	export let maxWidth = 0;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;
-	export let placeholder: string | undefined = undefined;
-	// Disabled
-	export let disabled = false;
-	// Narrow
-	export let narrow = false;
-	// Value
-	export let value: string;
-	// Styling
-	export let centered = false;
-	export let minWidth = 0;
-	export let maxWidth = 0;
 
 	let className = "";
 	export { className as class };

frontend/src/components/widgets/inputs/WorkingColorsInput.svelte

@@ -10,6 +10,7 @@
 
 	const editor = getContext<Editor>("editor");
 
+	// Content
 	export let primary: Color;
 	export let secondary: Color;
 

frontend/src/components/widgets/labels/IconLabel.svelte

@@ -7,9 +7,13 @@
 	let className = "";
 	export { className as class };
 	export let classes: Record<string, boolean> = {};
-	export let icon: IconName;
+
 	export let iconSizeOverride: number | undefined = undefined;
+
+	// Content
+	export let icon: IconName;
 	export let disabled = false;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;

frontend/src/components/widgets/labels/ImageLabel.svelte

@@ -5,9 +5,11 @@
 	export { className as class };
 	export let classes: Record<string, boolean> = {};
 
+	// Content
 	export let url: string;
 	export let width: string | undefined;
 	export let height: string | undefined;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;

frontend/src/components/widgets/labels/Separator.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
-	import { type SeparatorDirection, type SeparatorType } from "@graphite/messages";
+	import { type SeparatorDirection, type SeparatorStyle } from "@graphite/messages";
 
+	// Content
 	export let direction: SeparatorDirection = "Horizontal";
-	export let type: SeparatorType = "Unrelated";
+	export let style: SeparatorStyle = "Unrelated";
 </script>
 
-<div class={`separator ${direction.toLowerCase()} ${type.toLowerCase()}`}>
+<div class={`separator ${direction.toLowerCase()} ${style.toLowerCase()}`}>
-	{#if type === "Section"}
+	{#if style === "Section"}
 		<div />
 	{/if}
 </div>

frontend/src/components/widgets/labels/ShortcutLabel.svelte

@@ -7,6 +7,7 @@
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 
+	// Content
 	export let shortcut: ActionShortcut;
 
 	function keyTextOrIconList(keyGroup: LabeledShortcut): ({ label?: string; icon?: IconName }[] | { mouseMotion?: MouseMotion }[])[] {

frontend/src/components/widgets/labels/TextLabel.svelte

@@ -7,19 +7,26 @@
 	let styleName = "";
 	export { styleName as style };
 	export let styles: Record<string, string | number | undefined> = {};
+
+	// Content
+	// `value` is passed via slot
 	export let disabled = false;
+	export let forCheckbox: bigint | undefined = undefined;
+	// Styling
 	export let narrow = false;
 	export let bold = false;
 	export let italic = false;
 	export let monospace = false;
+	export let multiline = false;
 	export let centerAlign = false;
 	export let tableAlign = false;
-	export let minWidth = "";
+	// Sizing
-	export let multiline = false;
+	export let minWidth = 0;
+	export let minWidthCharacters = 0;
+	// Tooltips
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
 	export let tooltipShortcut: ActionShortcut | undefined = undefined;
-	export let forCheckbox: bigint | undefined = undefined;
 
 	$: extraClasses = Object.entries(classes)
 		.flatMap(([className, stateName]) => (stateName ? [className] : []))
@@ -39,7 +46,7 @@
 	class:multiline
 	class:center-align={centerAlign}
 	class:table-align={tableAlign}
-	style:min-width={minWidth || undefined}
+	style:min-width={minWidthCharacters ? `${minWidthCharacters}ch` : minWidth || undefined}
 	style={`${styleName} ${extraStyles}`.trim() || undefined}
 	data-tooltip-label={tooltipLabel}
 	data-tooltip-description={tooltipDescription}

frontend/src/messages.ts

@@ -911,25 +911,23 @@ export abstract class WidgetProps {
 }
 
 export class CheckboxInput extends WidgetProps {
+	// Content
 	checked!: boolean;
-
+	icon!: IconName;
+	forLabel!: bigint | undefined;
 	disabled!: boolean;
 
-	icon!: IconName;
+	// Tooltips
-
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipLabel!: string | undefined;
-
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
-
 	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
 	tooltipShortcut!: ActionShortcut | undefined;
-
-	forLabel!: bigint | undefined;
 }
 
 export class ColorInput extends WidgetProps {
+	// Content
 	@Transform(({ value }) => {
 		if (value instanceof Gradient) return value;
 		const gradient = value["Gradient"];
@@ -950,23 +948,19 @@ export class ColorInput extends WidgetProps {
 		return new Color("none");
 	})
 	value!: FillChoice;
-
 	allowNone!: boolean;
-
+	// allowTransparency!: boolean; // TODO: Implement
+	menuDirection!: MenuDirection | undefined;
 	disabled!: boolean;
 
+	// Styling
 	narrow!: boolean;
 
-	menuDirection!: MenuDirection | undefined;
+	// Tooltips
-
-	// allowTransparency!: boolean; // TODO: Implement
-
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipLabel!: string | undefined;
-
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
-
 	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
 	tooltipShortcut!: ActionShortcut | undefined;
 }
@@ -1006,16 +1000,23 @@ export function contrastingOutlineFactor(value: FillChoice, proximityColor: stri
 
 // An entry in the all-encompassing MenuList component which defines all types of menus (which are spawned by widgets like `TextButton` and `DropdownInput`)
 export type MenuListEntry = {
+	// Content
 	value: string;
 	label: string;
-	font?: string;
 	icon?: IconName;
 	disabled?: boolean;
+
+	// Children
+	children?: MenuListEntry[][];
+	childrenHash?: bigint;
+
+	// Styling
+	font?: string;
+
+	// Tooltips
 	tooltipLabel?: string;
 	tooltipDescription?: string;
 	tooltipShortcut?: ActionShortcut;
-	children?: MenuListEntry[][];
-	childrenHash?: bigint;
 };
 
 export class CurveManipulatorGroup {
@@ -1030,128 +1031,117 @@ export class Curve {
 }
 
 export class CurveInput extends WidgetProps {
+	// Content
 	value!: Curve;
 
-	disabled!: boolean;
+	// Tooltips
-
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipLabel!: string | undefined;
-
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
-
 	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
 	tooltipShortcut!: ActionShortcut | undefined;
 }
 
 export class DropdownInput extends WidgetProps {
-	entries!: MenuListEntry[][];
+	// Content
-
-	entriesHash!: bigint;
-
 	selectedIndex!: number | undefined;
-
 	drawIcon!: boolean;
-
-	interactive!: boolean;
-
 	disabled!: boolean;
 
-	narrow!: boolean;
+	// Children
-
+	entries!: MenuListEntry[][];
-	virtualScrolling!: boolean;
+	entriesHash!: bigint;
-
-	@Transform(({ value }: { value: string }) => value || undefined)
-	tooltipLabel!: string | undefined;
-
-	@Transform(({ value }: { value: string }) => value || undefined)
-	tooltipDescription!: string | undefined;
-
-	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
-	tooltipShortcut!: ActionShortcut | undefined;
 
 	// Styling
+	narrow!: boolean;
 
+	// Behavior
+	virtualScrolling!: boolean;
+	interactive!: boolean;
+
+	// Sizing
 	minWidth!: number;
-
 	maxWidth!: number;
+
+	// Tooltips
+	@Transform(({ value }: { value: string }) => value || undefined)
+	tooltipLabel!: string | undefined;
+	@Transform(({ value }: { value: string }) => value || undefined)
+	tooltipDescription!: string | undefined;
+	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
+	tooltipShortcut!: ActionShortcut | undefined;
 }
 
 export class IconButton extends WidgetProps {
+	// Content
 	icon!: IconName;
-
 	hoverIcon!: IconName | undefined;
-
 	size!: IconSize;
-
 	disabled!: boolean;
 
-	active!: boolean;
+	// Styling
+	emphasized!: boolean;
 
+	// Tooltips
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipLabel!: string | undefined;
-
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
-
 	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
 	tooltipShortcut!: ActionShortcut | undefined;
 }
 
 export class IconLabel extends WidgetProps {
+	// Content
 	icon!: IconName;
-
 	disabled!: boolean;
 
+	// Tooltips
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipLabel!: string | undefined;
-
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
-
 	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
 	tooltipShortcut!: ActionShortcut | undefined;
 }
 
 export class ImageButton extends WidgetProps {
+	// Content
 	image!: IconName;
-
 	@Transform(({ value }: { value: string }) => value || undefined)
 	width!: string | undefined;
-
 	@Transform(({ value }: { value: string }) => value || undefined)
 	height!: string | undefined;
 
+	// Tooltips
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipLabel!: string | undefined;
-
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
-
 	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
 	tooltipShortcut!: ActionShortcut | undefined;
 }
 
 export class ImageLabel extends WidgetProps {
+	// Content
 	url!: string;
-
 	@Transform(({ value }: { value: string }) => value || undefined)
 	width!: string | undefined;
-
 	@Transform(({ value }: { value: string }) => value || undefined)
 	height!: string | undefined;
 
+	// Tooltips
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipLabel!: string | undefined;
-
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
-
 	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
 	tooltipShortcut!: ActionShortcut | undefined;
 }
 
 export class ShortcutLabel extends WidgetProps {
+	// Content
 	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
 	shortcut!: ActionShortcut | undefined;
 }
@@ -1160,281 +1150,249 @@ export type NumberInputIncrementBehavior = "Add" | "Multiply" | "Callback" | "No
 export type NumberInputMode = "Increment" | "Range";
 
 export class NumberInput extends WidgetProps {
-	// Label
+	// Content
-
+	value!: number | undefined;
 	label!: string | undefined;
-
-	@Transform(({ value }: { value: string }) => value || undefined)
-	tooltipLabel!: string | undefined;
-
-	@Transform(({ value }: { value: string }) => value || undefined)
-	tooltipDescription!: string | undefined;
-
-	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
-	tooltipShortcut!: ActionShortcut | undefined;
-
-	// Disabled
-
 	disabled!: boolean;
 
-	// Narrow
+	// Styling
 	narrow!: boolean;
 
-	// Value
+	// Behavior
-
+	mode!: NumberInputMode;
-	value!: number | undefined;
-
 	min!: number | undefined;
-
 	max!: number | undefined;
-
+	rangeMin!: number | undefined;
+	rangeMax!: number | undefined;
+	step!: number;
 	isInteger!: boolean;
-
+	incrementBehavior!: NumberInputIncrementBehavior;
-	// Number presentation
-
 	displayDecimalPlaces!: number;
-
 	unit!: string;
-
 	unitIsHiddenWhenEditing!: boolean;
 
-	// Mode behavior
+	// Sizing
-
-	mode!: NumberInputMode;
-
-	incrementBehavior!: NumberInputIncrementBehavior;
-
-	step!: number;
-
-	rangeMin!: number | undefined;
-
-	rangeMax!: number | undefined;
-
-	// Styling
-
 	minWidth!: number;
-
 	maxWidth!: number;
+
+	// Tooltips
+	@Transform(({ value }: { value: string }) => value || undefined)
+	tooltipLabel!: string | undefined;
+	@Transform(({ value }: { value: string }) => value || undefined)
+	tooltipDescription!: string | undefined;
+	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
+	tooltipShortcut!: ActionShortcut | undefined;
 }
 
 export class NodeCatalog extends WidgetProps {
+	// Content
 	disabled!: boolean;
+
+	// Behavior
+	initialSearchTerm!: string;
 }
 
 export class PopoverButton extends WidgetProps {
+	// Content
 	style!: PopoverButtonStyle | undefined;
-
-	menuDirection!: MenuDirection | undefined;
-
 	icon!: IconName | undefined;
-
 	disabled!: boolean;
 
+	// Children
+	popoverLayout!: Layout;
+	popoverMinWidth!: number | undefined;
+	menuDirection!: MenuDirection | undefined;
+
+	// Tooltips
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipLabel!: string | undefined;
-
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
-
 	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
 	tooltipShortcut!: ActionShortcut | undefined;
-
-	// Body
-	popoverLayout!: Layout;
-
-	popoverMinWidth: number | undefined;
 }
 
 export type MenuDirection = "Top" | "Bottom" | "Left" | "Right" | "TopLeft" | "TopRight" | "BottomLeft" | "BottomRight" | "Center";
 
 export type RadioEntryData = {
+	// Content
 	value?: string;
 	label?: string;
 	icon?: IconName;
+
+	// Tooltips
 	tooltipLabel?: string;
 	tooltipDescription?: string;
 	tooltipShortcut?: ActionShortcut;
 };
-export type RadioEntries = RadioEntryData[];
 
 export class RadioInput extends WidgetProps {
-	entries!: RadioEntries;
+	// Content
-
+	selectedIndex!: number | undefined;
 	disabled!: boolean;
 
+	// Children
+	entries!: RadioEntryData[];
+
+	// Styling
 	narrow!: boolean;
 
-	selectedIndex!: number | undefined;
+	// Sizing
-
 	minWidth!: number;
 }
 
 export type SeparatorDirection = "Horizontal" | "Vertical";
-export type SeparatorType = "Related" | "Unrelated" | "Section";
+export type SeparatorStyle = "Related" | "Unrelated" | "Section";
 
 export class Separator extends WidgetProps {
+	// Content
 	direction!: SeparatorDirection;
-
+	style!: SeparatorStyle;
-	type!: SeparatorType;
 }
 
 export class WorkingColorsInput extends WidgetProps {
+	// Content
 	@Type(() => Color)
 	primary!: Color;
-
 	@Type(() => Color)
 	secondary!: Color;
 }
 
 export class TextAreaInput extends WidgetProps {
+	// Content
 	value!: string;
-
 	label!: string | undefined;
-
 	disabled!: boolean;
 
+	// Tooltips
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipLabel!: string | undefined;
-
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
-
 	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
 	tooltipShortcut!: ActionShortcut | undefined;
 }
 
 export class ParameterExposeButton extends WidgetProps {
+	// Content
 	exposed!: boolean;
-
 	dataType!: FrontendGraphDataType;
 
+	// Tooltips
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipLabel!: string | undefined;
-
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
-
 	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
 	tooltipShortcut!: ActionShortcut | undefined;
 }
 
 export class TextButton extends WidgetProps {
+	// Content
 	label!: string;
-
 	icon!: IconName | undefined;
-
 	hoverIcon!: IconName | undefined;
-
-	emphasized!: boolean;
-
-	flush!: boolean;
-
-	minWidth!: number;
-
 	disabled!: boolean;
 
+	// Children
+	menuListChildren!: MenuListEntry[][];
+	menuListChildrenHash!: bigint;
+
+	// Styling
+	emphasized!: boolean;
+	flush!: boolean;
 	narrow!: boolean;
 
+	// Sizing
+	minWidth!: number;
+
+	// Tooltips
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipLabel!: string | undefined;
-
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
-
 	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
 	tooltipShortcut!: ActionShortcut | undefined;
-
-	menuListChildren!: MenuListEntry[][];
-
-	menuListChildrenHash!: bigint;
 }
 
 export class BreadcrumbTrailButtons extends WidgetProps {
+	// Content
 	labels!: string[];
-
 	disabled!: boolean;
 
+	// Tooltips
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipLabel!: string | undefined;
-
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
-
 	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
 	tooltipShortcut!: ActionShortcut | undefined;
 }
 
 export class TextInput extends WidgetProps {
+	// Content
 	value!: string;
-
 	label!: string | undefined;
-
+	placeholder!: string | undefined;
 	disabled!: boolean;
 
+	// Styling
 	narrow!: boolean;
+	centered!: boolean;
 
+	// Sizing
 	minWidth!: number;
-
 	maxWidth!: number;
 
+	// Tooltips
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipLabel!: string | undefined;
-
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
-
 	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
 	tooltipShortcut!: ActionShortcut | undefined;
 }
 
 export class TextLabel extends WidgetProps {
-	// Body
+	// Content
 	value!: string;
-
-	// Props
 	disabled!: boolean;
+	forCheckbox!: bigint | undefined;
 
+	// Styling
 	narrow!: boolean;
-
 	bold!: boolean;
-
 	italic!: boolean;
-
 	monospace!: boolean;
-
 	multiline!: boolean;
-
 	centerAlign!: boolean;
-
 	tableAlign!: boolean;
 
-	minWidth!: string;
+	// Sizing
+	minWidth!: number;
+	minWidthCharacters!: number;
 
+	// Tooltips
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipLabel!: string | undefined;
-
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
-
 	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
 	tooltipShortcut!: ActionShortcut | undefined;
-
-	forCheckbox!: bigint | undefined;
 }
 
 export type ReferencePoint = "None" | "TopLeft" | "TopCenter" | "TopRight" | "CenterLeft" | "Center" | "CenterRight" | "BottomLeft" | "BottomCenter" | "BottomRight";
 
 export class ReferencePointInput extends WidgetProps {
+	// Content
 	value!: ReferencePoint;
-
 	disabled!: boolean;
 
+	// Tooltips
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipLabel!: string | undefined;
-
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
-
 	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
 	tooltipShortcut!: ActionShortcut | undefined;
 }