diff --git a/desktop/wrapper/src/utils.rs b/desktop/wrapper/src/utils.rs
index f3a27054c..0fcf7480c 100644
--- a/desktop/wrapper/src/utils.rs
+++ b/desktop/wrapper/src/utils.rs
@@ -3,8 +3,8 @@ pub(crate) mod menu {
 	use base64::engine::Engine;
 	use base64::engine::general_purpose::STANDARD as BASE64;
 
-	use graphite_editor::messages::input_mapper::utility_types::input_keyboard::{Key, LayoutKey, LayoutKeysGroup};
-	use graphite_editor::messages::input_mapper::utility_types::misc::ActionKeys;
+	use graphite_editor::messages::input_mapper::utility_types::input_keyboard::{Key, LabeledKey, LabeledShortcut};
+	use graphite_editor::messages::input_mapper::utility_types::misc::ActionShortcut;
 	use graphite_editor::messages::layout::LayoutMessage;
 	use graphite_editor::messages::tool::tool_messages::tool_prelude::{LayoutGroup, LayoutTarget, MenuListEntry, SubLayout, Widget, WidgetId};
 
@@ -84,7 +84,7 @@ pub(crate) mod menu {
 		}
 
 		let shortcut = match shortcut_keys {
-			Some(ActionKeys::Keys(LayoutKeysGroup(keys))) => convert_layout_keys_to_shortcut(keys),
+			Some(ActionShortcut::Shortcut(LabeledShortcut(shortcut))) => convert_labeled_keys_to_shortcut(shortcut),
 			_ => None,
 		};
 
@@ -126,11 +126,11 @@ pub(crate) mod menu {
 		items
 	}
 
-	fn convert_layout_keys_to_shortcut(layout_keys: &Vec<LayoutKey>) -> Option<Shortcut> {
+	fn convert_labeled_keys_to_shortcut(labeled_keys: &Vec<LabeledKey>) -> Option<Shortcut> {
 		let mut key: Option<KeyCode> = None;
 		let mut modifiers = Modifiers::default();
-		for layout_key in layout_keys {
-			match layout_key.key() {
+		for labeled_key in labeled_keys {
+			match labeled_key.key() {
 				Key::Shift => modifiers |= Modifiers::SHIFT,
 				Key::Control => modifiers |= Modifiers::CONTROL,
 				Key::Alt => modifiers |= Modifiers::ALT,
diff --git a/editor/src/messages/frontend/frontend_message.rs b/editor/src/messages/frontend/frontend_message.rs
index 9582e0472..8abf6c576 100644
--- a/editor/src/messages/frontend/frontend_message.rs
+++ b/editor/src/messages/frontend/frontend_message.rs
@@ -7,7 +7,6 @@ use crate::messages::portfolio::document::node_graph::utility_types::{
 use crate::messages::portfolio::document::utility_types::nodes::{JsRawBuffer, LayerPanelEntry, RawBuffer};
 use crate::messages::portfolio::document::utility_types::wires::{WirePath, WirePathUpdate};
 use crate::messages::prelude::*;
-use crate::messages::tool::utility_types::HintData;
 use glam::IVec2;
 use graph_craft::document::NodeId;
 use graphene_std::raster::Image;
@@ -257,10 +256,6 @@ pub enum FrontendMessage {
 	UpdateGraphFadeArtwork {
 		percentage: f64,
 	},
-	UpdateInputHints {
-		#[serde(rename = "hintData")]
-		hint_data: HintData,
-	},
 	UpdateLayersPanelControlBarLeftLayout {
 		#[serde(rename = "layoutTarget")]
 		layout_target: LayoutTarget,
@@ -335,6 +330,16 @@ pub enum FrontendMessage {
 		#[serde(rename = "wirePath")]
 		wire_path: Option<WirePath>,
 	},
+	UpdateWelcomeScreenButtonsLayout {
+		#[serde(rename = "layoutTarget")]
+		layout_target: LayoutTarget,
+		diff: Vec<WidgetDiff>,
+	},
+	UpdateStatusBarHintsLayout {
+		#[serde(rename = "layoutTarget")]
+		layout_target: LayoutTarget,
+		diff: Vec<WidgetDiff>,
+	},
 	UpdateWorkingColorsLayout {
 		#[serde(rename = "layoutTarget")]
 		layout_target: LayoutTarget,
diff --git a/editor/src/messages/input_mapper/utility_types/input_keyboard.rs b/editor/src/messages/input_mapper/utility_types/input_keyboard.rs
index 36ac91721..e5b97c2bc 100644
--- a/editor/src/messages/input_mapper/utility_types/input_keyboard.rs
+++ b/editor/src/messages/input_mapper/utility_types/input_keyboard.rs
@@ -4,10 +4,18 @@ use bitflags::bitflags;
 use std::fmt::{self, Display, Formatter};
 use std::ops::{BitAnd, BitAndAssign, BitOr, BitOrAssign, BitXor, BitXorAssign};
 
+// ===========
+// StorageType
+// ===========
+
 // TODO: Increase size of type
 /// Edit this to specify the storage type used.
 pub type StorageType = u128;
 
+// =========
+// KeyStates
+// =========
+
 // Base-2 logarithm of the storage type used to represents how many bits you need to fully address every bit in that storage type
 const STORAGE_SIZE: u32 = (std::mem::size_of::<StorageType>() * 8).trailing_zeros();
 const STORAGE_SIZE_BITS: usize = 1 << STORAGE_SIZE;
@@ -23,11 +31,19 @@ pub fn all_required_modifiers_pressed(keyboard_state: &KeyStates, modifiers: &Ke
 	all_modifiers_without_pressed_modifiers.is_empty()
 }
 
+// ===========
+// KeyPosition
+// ===========
+
 pub enum KeyPosition {
 	Pressed,
 	Released,
 }
 
+// ============
+// ModifierKeys
+// ============
+
 bitflags! {
 	#[derive(Clone, Copy, Debug, PartialEq, Eq, Default, serde::Serialize, serde::Deserialize)]
 	#[repr(transparent)]
@@ -40,6 +56,10 @@ bitflags! {
 	}
 }
 
+// ===
+// Key
+// ===
+
 // Currently this is mostly based on the JS `KeyboardEvent.code` list: <https://www.w3.org/TR/uievents-code/>
 // But in the future, especially once users can customize keyboard mappings, we should deviate more from this so we have actual symbols
 // like `+` (which doesn't exist because it's the shifted version of `=` on the US keyboard, after which these scan codes are named).
@@ -198,14 +218,19 @@ pub enum Key {
 
 	// Other keys that aren't part of the W3C spec
 	//
-	/// "Cmd" on Mac (not present on other platforms)
+	/// "Cmd" on Mac (not present on other platforms).
 	Command,
-	/// "Ctrl" on Windows/Linux, "Cmd" on Mac
+	/// "Ctrl" on Windows/Linux, "Cmd" on Mac.
 	Accel,
+	/// Left mouse button click (LMB).
 	MouseLeft,
+	/// Right mouse button click (RMB).
 	MouseRight,
+	/// Middle mouse button click (MMB).
 	MouseMiddle,
+	/// Mouse backward navigation button (typically on the side of the mouse).
 	MouseBack,
+	/// Mouse forward navigation button (typically on the side of the mouse).
 	MouseForward,
 
 	// Fake keys for displaying special labels in the UI
@@ -225,11 +250,11 @@ impl fmt::Display for Key {
 
 		// Writing system keys
 		const DIGIT_PREFIX: &str = "Digit";
-		if key_name.len() == DIGIT_PREFIX.len() + 1 && &key_name[0..DIGIT_PREFIX.len()] == "Digit" {
+		if key_name.len() == DIGIT_PREFIX.len() + 1 && &key_name[0..DIGIT_PREFIX.len()] == DIGIT_PREFIX {
 			return write!(f, "{}", key_name.chars().skip(DIGIT_PREFIX.len()).collect::<String>());
 		}
 		const KEY_PREFIX: &str = "Key";
-		if key_name.len() == KEY_PREFIX.len() + 1 && &key_name[0..KEY_PREFIX.len()] == "Key" {
+		if key_name.len() == KEY_PREFIX.len() + 1 && &key_name[0..KEY_PREFIX.len()] == KEY_PREFIX {
 			return write!(f, "{}", key_name.chars().skip(KEY_PREFIX.len()).collect::<String>());
 		}
 
@@ -313,26 +338,12 @@ impl fmt::Display for Key {
 	}
 }
 
-impl From<Key> for LayoutKey {
-	fn from(key: Key) -> Self {
-		Self { key, label: key.to_string() }
-	}
-}
-
-#[derive(Debug, Clone, PartialEq, Eq, Hash, serde::Serialize, serde::Deserialize, specta::Type)]
-pub struct LayoutKey {
-	key: Key,
-	label: String,
-}
-
-impl LayoutKey {
-	pub fn key(&self) -> Key {
-		self.key
-	}
-}
-
 pub const NUMBER_OF_KEYS: usize = Key::_KeysVariantCount as usize - 1;
 
+// =========
+// KeysGroup
+// =========
+
 /// Only `Key`s that exist on a physical keyboard should be used.
 #[derive(Debug, Clone, Default, PartialEq, Eq, serde::Serialize, serde::Deserialize)]
 pub struct KeysGroup(pub Vec<Key>);
@@ -365,21 +376,25 @@ impl fmt::Display for KeysGroup {
 	}
 }
 
-impl From<KeysGroup> for String {
-	fn from(keys: KeysGroup) -> Self {
-		let layout_keys: LayoutKeysGroup = keys.into();
-		serde_json::to_string(&layout_keys).expect("Failed to serialize KeysGroup")
+// ==========
+// LabeledKey
+// ==========
+
+#[derive(Debug, Clone, PartialEq, Eq, Hash, serde::Serialize, serde::Deserialize, specta::Type)]
+pub struct LabeledKey {
+	key: Key,
+	label: String,
+}
+
+impl LabeledKey {
+	pub fn key(&self) -> Key {
+		self.key
 	}
 }
 
-#[derive(Debug, Clone, Default, PartialEq, Eq, serde::Serialize, serde::Deserialize, specta::Type)]
-pub struct LayoutKeysGroup(pub Vec<LayoutKey>);
-
-impl From<KeysGroup> for LayoutKeysGroup {
-	fn from(keys_group: KeysGroup) -> Self {
-		Self(keys_group.0.into_iter().map(|key| key.into()).collect())
-	}
-}
+// ===========
+// MouseMotion
+// ===========
 
 #[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, serde::Serialize, serde::Deserialize, specta::Type)]
 pub enum MouseMotion {
@@ -397,6 +412,45 @@ pub enum MouseMotion {
 	MmbDrag,
 }
 
+// =======================
+// LabeledKeyOrMouseMotion
+// =======================
+
+#[derive(Debug, Clone, PartialEq, Eq, Hash, serde::Serialize, serde::Deserialize, specta::Type)]
+#[serde(untagged)]
+pub enum LabeledKeyOrMouseMotion {
+	Key(LabeledKey),
+	MouseMotion(MouseMotion),
+}
+
+impl From<Key> for LabeledKeyOrMouseMotion {
+	fn from(key: Key) -> Self {
+		match key {
+			Key::MouseLeft => Self::MouseMotion(MouseMotion::Lmb),
+			Key::MouseRight => Self::MouseMotion(MouseMotion::Rmb),
+			Key::MouseMiddle => Self::MouseMotion(MouseMotion::Mmb),
+			_ => Self::Key(LabeledKey { key, label: key.to_string() }),
+		}
+	}
+}
+
+// ===============
+// LabeledShortcut
+// ===============
+
+#[derive(Debug, Clone, Default, PartialEq, Eq, serde::Serialize, serde::Deserialize, specta::Type)]
+pub struct LabeledShortcut(pub Vec<LabeledKeyOrMouseMotion>);
+
+impl From<KeysGroup> for LabeledShortcut {
+	fn from(keys_group: KeysGroup) -> Self {
+		Self(keys_group.0.into_iter().map(|key| key.into()).collect())
+	}
+}
+
+// =========
+// BitVector
+// =========
+
 #[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
 pub struct BitVector<const LENGTH: usize>([StorageType; LENGTH]);
 
diff --git a/editor/src/messages/input_mapper/utility_types/macros.rs b/editor/src/messages/input_mapper/utility_types/macros.rs
index 11ad50dac..bd0354d28 100644
--- a/editor/src/messages/input_mapper/utility_types/macros.rs
+++ b/editor/src/messages/input_mapper/utility_types/macros.rs
@@ -117,14 +117,23 @@ macro_rules! mapping {
 	}};
 }
 
-/// Constructs an `ActionKeys` macro with a certain `Action` variant, conveniently wrapped in `Some()`.
-macro_rules! action_keys {
+/// Constructs an `ActionShortcut` macro with a certain `Action` variant, conveniently wrapped in `Some()`.
+macro_rules! action_shortcut {
 	($action:expr_2021) => {
-		Some(crate::messages::input_mapper::utility_types::misc::ActionKeys::Action($action.into()))
+		Some(crate::messages::input_mapper::utility_types::misc::ActionShortcut::Action($action.into()))
 	};
 }
 
-pub(crate) use action_keys;
+macro_rules! action_shortcut_manual {
+	($($keys:expr),*) => {
+		Some(crate::messages::input_mapper::utility_types::misc::ActionShortcut::Shortcut(
+			crate::messages::input_mapper::utility_types::input_keyboard::LabeledShortcut(vec![$($keys.into()),*]).into(),
+		))
+	};
+}
+
+pub(crate) use action_shortcut;
+pub(crate) use action_shortcut_manual;
 pub(crate) use entry;
 pub(crate) use mapping;
 pub(crate) use modifiers;
diff --git a/editor/src/messages/input_mapper/utility_types/misc.rs b/editor/src/messages/input_mapper/utility_types/misc.rs
index 7733d6a27..75343e0a7 100644
--- a/editor/src/messages/input_mapper/utility_types/misc.rs
+++ b/editor/src/messages/input_mapper/utility_types/misc.rs
@@ -1,4 +1,4 @@
-use super::input_keyboard::{KeysGroup, LayoutKeysGroup, all_required_modifiers_pressed};
+use super::input_keyboard::{KeysGroup, LabeledShortcut, all_required_modifiers_pressed};
 use crate::messages::input_mapper::key_mapping::MappingVariant;
 use crate::messages::input_mapper::utility_types::input_keyboard::{KeyStates, NUMBER_OF_KEYS};
 use crate::messages::input_mapper::utility_types::input_mouse::NUMBER_OF_MOUSE_BUTTONS;
@@ -128,28 +128,24 @@ pub struct MappingEntry {
 }
 
 #[derive(Debug, Clone, Eq, PartialEq, serde::Serialize, serde::Deserialize, specta::Type)]
-pub enum ActionKeys {
+pub enum ActionShortcut {
 	Action(MessageDiscriminant),
-	#[serde(rename = "keys")]
-	Keys(LayoutKeysGroup),
+	#[serde(rename = "shortcut")]
+	Shortcut(LabeledShortcut),
 }
 
-impl ActionKeys {
-	pub fn to_keys(&mut self, action_input_mapping: &impl Fn(&MessageDiscriminant) -> Option<KeysGroup>) -> String {
+impl ActionShortcut {
+	pub fn realize_shortcut(&mut self, action_input_mapping: &impl Fn(&MessageDiscriminant) -> Option<KeysGroup>) {
 		match self {
 			Self::Action(action) => {
 				if let Some(keys) = action_input_mapping(action) {
-					let description = keys.to_string();
-					*self = Self::Keys(keys.into());
-					description
+					*self = Self::Shortcut(keys.into());
 				} else {
-					*self = Self::Keys(KeysGroup::default().into());
-					String::new()
+					*self = Self::Shortcut(KeysGroup::default().into());
 				}
 			}
-			Self::Keys(keys) => {
-				warn!("Calling `.to_keys()` on a `ActionKeys::Keys` is a mistake/bug. Keys are: {keys:?}.");
-				String::new()
+			Self::Shortcut(shortcut) => {
+				warn!("Calling `.to_keys()` on a `ActionShortcut::Shortcut` is a mistake/bug. Shortcut is: {shortcut:?}.");
 			}
 		}
 	}
diff --git a/editor/src/messages/layout/layout_message.rs b/editor/src/messages/layout/layout_message.rs
index b18c0055a..ff0ded389 100644
--- a/editor/src/messages/layout/layout_message.rs
+++ b/editor/src/messages/layout/layout_message.rs
@@ -12,6 +12,9 @@ pub enum LayoutMessage {
 		layout: Layout,
 		layout_target: LayoutTarget,
 	},
+	DestroyLayout {
+		layout_target: LayoutTarget,
+	},
 	WidgetValueCommit {
 		layout_target: LayoutTarget,
 		widget_id: WidgetId,
diff --git a/editor/src/messages/layout/layout_message_handler.rs b/editor/src/messages/layout/layout_message_handler.rs
index 304c2e41c..dff1095ee 100644
--- a/editor/src/messages/layout/layout_message_handler.rs
+++ b/editor/src/messages/layout/layout_message_handler.rs
@@ -39,6 +39,11 @@ impl MessageHandler<LayoutMessage, LayoutMessageContext<'_>> for LayoutMessageHa
 			LayoutMessage::SendLayout { layout, layout_target } => {
 				self.diff_and_send_layout_to_frontend(layout_target, layout, responses, action_input_mapping);
 			}
+			LayoutMessage::DestroyLayout { layout_target } => {
+				if let Some(layout) = self.layouts.get_mut(layout_target as usize) {
+					*layout = Default::default();
+				}
+			}
 			LayoutMessage::WidgetValueCommit { layout_target, widget_id, value } => {
 				self.handle_widget_callback(layout_target, widget_id, value, WidgetValueAction::Commit, responses);
 			}
@@ -78,7 +83,7 @@ impl LayoutMessageHandler {
 				LayoutGroup::Section { layout, .. } => {
 					stack.extend(layout.iter().enumerate().map(|(index, val)| ([widget_path.as_slice(), &[index]].concat(), val)));
 				}
-				LayoutGroup::Table { rows } => {
+				LayoutGroup::Table { rows, .. } => {
 					for (row_index, row) in rows.iter().enumerate() {
 						for (cell_index, cell) in row.iter().enumerate() {
 							// Return if this is the correct ID
@@ -310,6 +315,7 @@ impl LayoutMessageHandler {
 				responses.add(callback_message);
 			}
 			Widget::ImageLabel(_) => {}
+			Widget::ShortcutLabel(_) => {}
 			Widget::IconLabel(_) => {}
 			Widget::NodeCatalog(node_type_input) => match action {
 				WidgetValueAction::Commit => {
@@ -509,8 +515,10 @@ impl LayoutMessageHandler {
 			LayoutTarget::MenuBar => FrontendMessage::UpdateMenuBarLayout { layout_target, diff },
 			LayoutTarget::NodeGraphControlBar => FrontendMessage::UpdateNodeGraphControlBarLayout { layout_target, diff },
 			LayoutTarget::PropertiesPanel => FrontendMessage::UpdatePropertiesPanelLayout { layout_target, diff },
+			LayoutTarget::StatusBarHints => FrontendMessage::UpdateStatusBarHintsLayout { layout_target, diff },
 			LayoutTarget::ToolOptions => FrontendMessage::UpdateToolOptionsLayout { layout_target, diff },
 			LayoutTarget::ToolShelf => FrontendMessage::UpdateToolShelfLayout { layout_target, diff },
+			LayoutTarget::WelcomeScreenButtons => FrontendMessage::UpdateWelcomeScreenButtonsLayout { layout_target, diff },
 			LayoutTarget::WorkingColors => FrontendMessage::UpdateWorkingColorsLayout { layout_target, diff },
 
 			LayoutTarget::LayoutTargetLength => panic!("`LayoutTargetLength` is not a valid Layout Target and is used for array indexing"),
diff --git a/editor/src/messages/layout/utility_types/layout_widget.rs b/editor/src/messages/layout/utility_types/layout_widget.rs
index f25261d5a..22ad94eaf 100644
--- a/editor/src/messages/layout/utility_types/layout_widget.rs
+++ b/editor/src/messages/layout/utility_types/layout_widget.rs
@@ -3,7 +3,6 @@ use super::widgets::input_widgets::*;
 use super::widgets::label_widgets::*;
 use crate::application::generate_uuid;
 use crate::messages::input_mapper::utility_types::input_keyboard::KeysGroup;
-use crate::messages::input_mapper::utility_types::misc::ActionKeys;
 use crate::messages::prelude::*;
 use std::sync::Arc;
 
@@ -20,6 +19,8 @@ impl core::fmt::Display for WidgetId {
 #[derive(PartialEq, Clone, Debug, Hash, Eq, Copy, serde::Serialize, serde::Deserialize, specta::Type)]
 #[repr(u8)]
 pub enum LayoutTarget {
+	/// The spreadsheet panel allows for the visualisation of data in the graph.
+	DataPanel,
 	/// Contains the action buttons at the bottom of the dialog. Must be shown with the `FrontendMessage::DisplayDialog` message.
 	DialogButtons,
 	/// Contains the contents of the dialog's primary column. Must be shown with the `FrontendMessage::DisplayDialog` message.
@@ -30,24 +31,26 @@ pub enum LayoutTarget {
 	DocumentBar,
 	/// Contains the dropdown for design / select / guide mode found on the top left of the canvas.
 	DocumentMode,
+	/// Controls for adding, grouping, and deleting layers at the bottom of the Layers panel.
+	LayersPanelBottomBar,
 	/// Blending options at the top of the Layers panel.
 	LayersPanelControlLeftBar,
 	/// Selected layer status (locked/hidden) at the top of the Layers panel.
 	LayersPanelControlRightBar,
-	/// Controls for adding, grouping, and deleting layers at the bottom of the Layers panel.
-	LayersPanelBottomBar,
 	/// The dropdown menu at the very top of the application: File, Edit, etc.
 	MenuBar,
 	/// Bar at the top of the node graph containing the location and the "Preview" and "Hide" buttons.
 	NodeGraphControlBar,
 	/// The body of the Properties panel containing many collapsable sections.
 	PropertiesPanel,
-	/// The spredsheet panel allows for the visualisation of data in the graph.
-	DataPanel,
+	/// The contextual input key/mouse combination shortcuts shown in the status bar at the bottom of the window.
+	StatusBarHints,
 	/// The bar directly above the canvas, left-aligned and to the right of the document mode dropdown.
 	ToolOptions,
 	/// The vertical buttons for all of the tools on the left of the canvas.
 	ToolShelf,
+	/// The quick access buttons found on the welcome screen, shown when no documents are open.
+	WelcomeScreenButtons,
 	/// The color swatch for the working colors and a flip and reset button found at the bottom of the tool shelf.
 	WorkingColors,
 
@@ -198,7 +201,7 @@ impl<'a> Iterator for WidgetIter<'a> {
 				self.current_slice = Some(widgets);
 				self.next()
 			}
-			Some(LayoutGroup::Table { rows }) => {
+			Some(LayoutGroup::Table { rows, .. }) => {
 				self.table.extend(rows.iter().flatten().rev());
 				self.next()
 			}
@@ -248,7 +251,7 @@ impl<'a> Iterator for WidgetIterMut<'a> {
 				self.current_slice = Some(widgets);
 				self.next()
 			}
-			Some(LayoutGroup::Table { rows }) => {
+			Some(LayoutGroup::Table { rows, .. }) => {
 				self.table.extend(rows.iter_mut().flatten().rev());
 				self.next()
 			}
@@ -281,6 +284,7 @@ pub enum LayoutGroup {
 	Table {
 		#[serde(rename = "tableWidgets")]
 		rows: Vec<Vec<WidgetHolder>>,
+		unstyled: bool,
 	},
 	#[serde(rename = "section")]
 	Section {
@@ -332,7 +336,7 @@ impl LayoutGroup {
 				Widget::TextInput(x) => &mut x.tooltip_label,
 				Widget::TextLabel(x) => &mut x.tooltip_label,
 				Widget::BreadcrumbTrailButtons(x) => &mut x.tooltip_label,
-				Widget::ReferencePointInput(_) | Widget::RadioInput(_) | Widget::Separator(_) | Widget::WorkingColorsInput(_) | Widget::NodeCatalog(_) => continue,
+				Widget::ReferencePointInput(_) | Widget::RadioInput(_) | Widget::Separator(_) | Widget::ShortcutLabel(_) | Widget::WorkingColorsInput(_) | Widget::NodeCatalog(_) => continue,
 			};
 			if val.is_empty() {
 				val.clone_from(&label);
@@ -368,7 +372,7 @@ impl LayoutGroup {
 				Widget::TextInput(x) => &mut x.tooltip_description,
 				Widget::TextLabel(x) => &mut x.tooltip_description,
 				Widget::BreadcrumbTrailButtons(x) => &mut x.tooltip_description,
-				Widget::ReferencePointInput(_) | Widget::RadioInput(_) | Widget::Separator(_) | Widget::WorkingColorsInput(_) | Widget::NodeCatalog(_) => continue,
+				Widget::ReferencePointInput(_) | Widget::RadioInput(_) | Widget::Separator(_) | Widget::ShortcutLabel(_) | Widget::WorkingColorsInput(_) | Widget::NodeCatalog(_) => continue,
 			};
 			if val.is_empty() {
 				val.clone_from(&description);
@@ -506,7 +510,7 @@ impl WidgetHolder {
 			&& button1.icon == button2.icon
 			&& button1.tooltip_label == button2.tooltip_label
 			&& button1.tooltip_description == button2.tooltip_description
-			&& button1.shortcut_keys == button2.shortcut_keys
+			&& button1.tooltip_shortcut == button2.tooltip_shortcut
 			&& button1.popover_min_width == button2.popover_min_width
 		{
 			let mut new_widget_path = widget_path.to_vec();
@@ -564,6 +568,7 @@ pub enum Widget {
 	IconLabel(IconLabel),
 	ImageButton(ImageButton),
 	ImageLabel(ImageLabel),
+	ShortcutLabel(ShortcutLabel),
 	NodeCatalog(NodeCatalog),
 	NumberInput(NumberInput),
 	ParameterExposeButton(ParameterExposeButton),
@@ -607,30 +612,22 @@ pub enum DiffUpdate {
 impl DiffUpdate {
 	/// Append the keyboard shortcut to the tooltip where applicable
 	pub fn apply_keyboard_shortcut(&mut self, action_input_mapping: &impl Fn(&MessageDiscriminant) -> Option<KeysGroup>) {
-		// Function used multiple times later in this code block to convert `ActionKeys::Action` to `ActionKeys::Keys` and append its shortcut to the tooltip
-		let apply_shortcut_to_tooltip = |shortcut_keys: &mut ActionKeys, tooltip_shortcut: &mut String| {
-			let shortcut_text = shortcut_keys.to_keys(action_input_mapping);
-
-			if matches!(shortcut_keys, ActionKeys::Keys(_)) && !shortcut_text.is_empty() {
-				tooltip_shortcut.push_str(&shortcut_text);
-			}
-		};
-
-		// Go through each widget to convert `ActionKeys::Action` to `ActionKeys::Keys` and append the key combination to the widget tooltip
+		// Go through each widget to convert `ActionShortcut::Action` to `ActionShortcut::Shortcut` and append the key combination to the widget tooltip
 		let convert_tooltip = |widget_holder: &mut WidgetHolder| {
 			// Handle all the widgets that have tooltips
-			let mut shortcut_keys = match &mut widget_holder.widget {
-				Widget::BreadcrumbTrailButtons(widget) => Some((&mut widget.tooltip_shortcut, &mut widget.shortcut_keys)),
-				Widget::CheckboxInput(widget) => Some((&mut widget.tooltip_shortcut, &mut widget.shortcut_keys)),
-				Widget::ColorInput(widget) => Some((&mut widget.tooltip_shortcut, &mut widget.shortcut_keys)),
-				Widget::DropdownInput(widget) => Some((&mut widget.tooltip_shortcut, &mut widget.shortcut_keys)),
-				Widget::FontInput(widget) => Some((&mut widget.tooltip_shortcut, &mut widget.shortcut_keys)),
-				Widget::IconButton(widget) => Some((&mut widget.tooltip_shortcut, &mut widget.shortcut_keys)),
-				Widget::NumberInput(widget) => Some((&mut widget.tooltip_shortcut, &mut widget.shortcut_keys)),
-				Widget::ParameterExposeButton(widget) => Some((&mut widget.tooltip_shortcut, &mut widget.shortcut_keys)),
-				Widget::PopoverButton(widget) => Some((&mut widget.tooltip_shortcut, &mut widget.shortcut_keys)),
-				Widget::TextButton(widget) => Some((&mut widget.tooltip_shortcut, &mut widget.shortcut_keys)),
-				Widget::ImageButton(widget) => Some((&mut widget.tooltip_shortcut, &mut widget.shortcut_keys)),
+			let tooltip_shortcut = match &mut widget_holder.widget {
+				Widget::BreadcrumbTrailButtons(widget) => widget.tooltip_shortcut.as_mut(),
+				Widget::CheckboxInput(widget) => widget.tooltip_shortcut.as_mut(),
+				Widget::ColorInput(widget) => widget.tooltip_shortcut.as_mut(),
+				Widget::DropdownInput(widget) => widget.tooltip_shortcut.as_mut(),
+				Widget::FontInput(widget) => widget.tooltip_shortcut.as_mut(),
+				Widget::IconButton(widget) => widget.tooltip_shortcut.as_mut(),
+				Widget::NumberInput(widget) => widget.tooltip_shortcut.as_mut(),
+				Widget::ParameterExposeButton(widget) => widget.tooltip_shortcut.as_mut(),
+				Widget::PopoverButton(widget) => widget.tooltip_shortcut.as_mut(),
+				Widget::TextButton(widget) => widget.tooltip_shortcut.as_mut(),
+				Widget::ImageButton(widget) => widget.tooltip_shortcut.as_mut(),
+				Widget::ShortcutLabel(widget) => widget.shortcut.as_mut(),
 				Widget::IconLabel(_)
 				| Widget::ImageLabel(_)
 				| Widget::CurveInput(_)
@@ -643,34 +640,32 @@ impl DiffUpdate {
 				| Widget::TextLabel(_)
 				| Widget::WorkingColorsInput(_) => None,
 			};
-			if let Some((tooltip_shortcut, Some(shortcut_keys))) = &mut shortcut_keys {
-				apply_shortcut_to_tooltip(shortcut_keys, tooltip_shortcut);
+
+			// Convert `ActionShortcut::Action` to `ActionShortcut::Shortcut`
+			if let Some(tooltip_shortcut) = tooltip_shortcut {
+				tooltip_shortcut.realize_shortcut(action_input_mapping);
 			}
 
 			// Handle RadioInput separately because its tooltips are children of the widget
 			if let Widget::RadioInput(radio_input) = &mut widget_holder.widget {
 				for radio_entry_data in &mut radio_input.entries {
-					if let RadioEntryData {
-						tooltip_shortcut,
-						shortcut_keys: Some(shortcut_keys),
-						..
-					} = radio_entry_data
-					{
-						apply_shortcut_to_tooltip(shortcut_keys, tooltip_shortcut);
+					// Convert `ActionShortcut::Action` to `ActionShortcut::Shortcut`
+					if let Some(tooltip_shortcut) = radio_entry_data.tooltip_shortcut.as_mut() {
+						tooltip_shortcut.realize_shortcut(action_input_mapping);
 					}
 				}
 			}
 		};
 
 		// Recursively fill menu list entries with their realized shortcut keys specific to the current bindings and platform
-		let apply_action_keys_to_menu_lists = |entry_sections: &mut MenuListEntrySections| {
+		let apply_action_shortcut_to_menu_lists = |entry_sections: &mut MenuListEntrySections| {
 			struct RecursiveWrapper<'a>(&'a dyn Fn(&mut MenuListEntrySections, &RecursiveWrapper));
 			let recursive_wrapper = RecursiveWrapper(&|entry_sections: &mut MenuListEntrySections, recursive_wrapper| {
 				for entries in entry_sections {
 					for entry in entries {
-						// Convert the shortcut actions to keys for this menu entry
-						if let Some(shortcut_keys) = &mut entry.shortcut_keys {
-							shortcut_keys.to_keys(action_input_mapping);
+						// Convert `ActionShortcut::Action` to `ActionShortcut::Shortcut`
+						if let Some(tooltip_shortcut) = &mut entry.tooltip_shortcut {
+							tooltip_shortcut.realize_shortcut(action_input_mapping);
 						}
 
 						// Recursively call this inner closure on the menu's children
@@ -683,8 +678,8 @@ impl DiffUpdate {
 
 		// Apply shortcut conversions to all widgets that have menu lists
 		let convert_menu_lists = |widget_holder: &mut WidgetHolder| match &mut widget_holder.widget {
-			Widget::DropdownInput(dropdown_input) => apply_action_keys_to_menu_lists(&mut dropdown_input.entries),
-			Widget::TextButton(text_button) => apply_action_keys_to_menu_lists(&mut text_button.menu_list_children),
+			Widget::DropdownInput(dropdown_input) => apply_action_shortcut_to_menu_lists(&mut dropdown_input.entries),
+			Widget::TextButton(text_button) => apply_action_shortcut_to_menu_lists(&mut text_button.menu_list_children),
 			_ => {}
 		};
 
diff --git a/editor/src/messages/layout/utility_types/widgets/button_widgets.rs b/editor/src/messages/layout/utility_types/widgets/button_widgets.rs
index 3d47b5e48..6915a0922 100644
--- a/editor/src/messages/layout/utility_types/widgets/button_widgets.rs
+++ b/editor/src/messages/layout/utility_types/widgets/button_widgets.rs
@@ -1,4 +1,4 @@
-use crate::messages::input_mapper::utility_types::misc::ActionKeys;
+use crate::messages::input_mapper::utility_types::misc::ActionShortcut;
 use crate::messages::layout::utility_types::widget_prelude::*;
 use crate::messages::portfolio::document::node_graph::utility_types::FrontendGraphDataType;
 use crate::messages::tool::tool_messages::tool_prelude::WidgetCallback;
@@ -29,10 +29,7 @@ pub struct IconButton {
 	pub tooltip_description: String,
 
 	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: String,
-
-	#[serde(skip)]
-	pub shortcut_keys: Option<ActionKeys>,
+	pub tooltip_shortcut: Option<ActionShortcut>,
 
 	// Callbacks
 	#[serde(skip)]
@@ -63,10 +60,7 @@ pub struct PopoverButton {
 	pub tooltip_description: String,
 
 	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: String,
-
-	#[serde(skip)]
-	pub shortcut_keys: Option<ActionKeys>,
+	pub tooltip_shortcut: Option<ActionShortcut>,
 
 	#[serde(rename = "popoverLayout")]
 	pub popover_layout: SubLayout,
@@ -104,10 +98,7 @@ pub struct ParameterExposeButton {
 	pub tooltip_description: String,
 
 	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: String,
-
-	#[serde(skip)]
-	pub shortcut_keys: Option<ActionKeys>,
+	pub tooltip_shortcut: Option<ActionShortcut>,
 
 	// Callbacks
 	#[serde(skip)]
@@ -148,10 +139,7 @@ pub struct TextButton {
 	pub tooltip_description: String,
 
 	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: String,
-
-	#[serde(skip)]
-	pub shortcut_keys: Option<ActionKeys>,
+	pub tooltip_shortcut: Option<ActionShortcut>,
 
 	#[serde(rename = "menuListChildren")]
 	pub menu_list_children: MenuListEntrySections,
@@ -183,10 +171,7 @@ pub struct ImageButton {
 	pub tooltip_description: String,
 
 	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: String,
-
-	#[serde(skip)]
-	pub shortcut_keys: Option<ActionKeys>,
+	pub tooltip_shortcut: Option<ActionShortcut>,
 
 	// Callbacks
 	#[serde(skip)]
@@ -228,10 +213,7 @@ pub struct ColorInput {
 	pub tooltip_description: String,
 
 	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: String,
-
-	#[serde(skip)]
-	pub shortcut_keys: Option<ActionKeys>,
+	pub tooltip_shortcut: Option<ActionShortcut>,
 
 	// Callbacks
 	#[serde(skip)]
@@ -258,10 +240,7 @@ pub struct BreadcrumbTrailButtons {
 	pub tooltip_description: String,
 
 	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: String,
-
-	#[serde(skip)]
-	pub shortcut_keys: Option<ActionKeys>,
+	pub tooltip_shortcut: Option<ActionShortcut>,
 
 	// Callbacks
 	#[serde(skip)]
diff --git a/editor/src/messages/layout/utility_types/widgets/input_widgets.rs b/editor/src/messages/layout/utility_types/widgets/input_widgets.rs
index 304c5f5cf..a7fa9fbfc 100644
--- a/editor/src/messages/layout/utility_types/widgets/input_widgets.rs
+++ b/editor/src/messages/layout/utility_types/widgets/input_widgets.rs
@@ -1,4 +1,4 @@
-use crate::messages::input_mapper::utility_types::misc::ActionKeys;
+use crate::messages::input_mapper::utility_types::misc::ActionShortcut;
 use crate::messages::layout::utility_types::widget_prelude::*;
 use derivative::*;
 use graphene_std::Color;
@@ -23,15 +23,12 @@ pub struct CheckboxInput {
 	pub tooltip_description: String,
 
 	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: String,
+	pub tooltip_shortcut: Option<ActionShortcut>,
 
 	#[serde(rename = "forLabel")]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
 	pub for_label: CheckboxId,
 
-	#[serde(skip)]
-	pub shortcut_keys: Option<ActionKeys>,
-
 	// Callbacks
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]
@@ -51,7 +48,6 @@ impl Default for CheckboxInput {
 			tooltip_label: Default::default(),
 			tooltip_description: Default::default(),
 			tooltip_shortcut: Default::default(),
-			shortcut_keys: Default::default(),
 			for_label: CheckboxId::new(),
 			on_update: Default::default(),
 			on_commit: Default::default(),
@@ -106,10 +102,7 @@ pub struct DropdownInput {
 	pub tooltip_description: String,
 
 	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: String,
-
-	#[serde(skip)]
-	pub shortcut_keys: Option<ActionKeys>,
+	pub tooltip_shortcut: Option<ActionShortcut>,
 
 	// Styling
 	#[serde(rename = "minWidth")]
@@ -146,14 +139,7 @@ pub struct MenuListEntry {
 	pub tooltip_description: String,
 
 	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: String,
-
-	// TODO: Make this serde(skip)
-	#[serde(rename = "shortcutKeys")]
-	pub shortcut_keys: Option<ActionKeys>,
-
-	#[serde(rename = "shortcutRequiresLock")]
-	pub shortcut_requires_lock: bool,
+	pub tooltip_shortcut: Option<ActionShortcut>,
 
 	pub children: MenuListEntrySections,
 
@@ -190,10 +176,7 @@ pub struct FontInput {
 	pub tooltip_description: String,
 
 	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: String,
-
-	#[serde(skip)]
-	pub shortcut_keys: Option<ActionKeys>,
+	pub tooltip_shortcut: Option<ActionShortcut>,
 
 	// Callbacks
 	#[serde(skip)]
@@ -218,10 +201,7 @@ pub struct NumberInput {
 	pub tooltip_description: String,
 
 	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: String,
-
-	#[serde(skip)]
-	pub shortcut_keys: Option<ActionKeys>,
+	pub tooltip_shortcut: Option<ActionShortcut>,
 
 	// Disabled
 	pub disabled: bool,
@@ -394,10 +374,7 @@ pub struct RadioEntryData {
 	pub tooltip_description: String,
 
 	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: String,
-
-	#[serde(skip)]
-	pub shortcut_keys: Option<ActionKeys>,
+	pub tooltip_shortcut: Option<ActionShortcut>,
 
 	// Callbacks
 	#[serde(skip)]
@@ -436,7 +413,7 @@ pub struct TextAreaInput {
 	pub tooltip_description: String,
 
 	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: String,
+	pub tooltip_shortcut: Option<ActionShortcut>,
 
 	// Callbacks
 	#[serde(skip)]
@@ -467,7 +444,7 @@ pub struct TextInput {
 	pub tooltip_description: String,
 
 	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: String,
+	pub tooltip_shortcut: Option<ActionShortcut>,
 
 	pub centered: bool,
 
@@ -502,7 +479,7 @@ pub struct CurveInput {
 	pub tooltip_description: String,
 
 	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: String,
+	pub tooltip_shortcut: Option<ActionShortcut>,
 
 	// Callbacks
 	#[serde(skip)]
@@ -529,7 +506,7 @@ pub struct ReferencePointInput {
 	pub tooltip_description: String,
 
 	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: String,
+	pub tooltip_shortcut: Option<ActionShortcut>,
 
 	// Callbacks
 	#[serde(skip)]
diff --git a/editor/src/messages/layout/utility_types/widgets/label_widgets.rs b/editor/src/messages/layout/utility_types/widgets/label_widgets.rs
index 4ab7845e3..3e21eda93 100644
--- a/editor/src/messages/layout/utility_types/widgets/label_widgets.rs
+++ b/editor/src/messages/layout/utility_types/widgets/label_widgets.rs
@@ -1,4 +1,5 @@
 use super::input_widgets::CheckboxId;
+use crate::messages::input_mapper::utility_types::misc::ActionShortcut;
 use derivative::*;
 use graphite_proc_macros::WidgetBuilder;
 
@@ -16,7 +17,7 @@ pub struct IconLabel {
 	pub tooltip_description: String,
 
 	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: String,
+	pub tooltip_shortcut: Option<ActionShortcut>,
 }
 
 #[derive(Debug, Clone, Default, PartialEq, Eq, serde::Serialize, serde::Deserialize, WidgetBuilder, specta::Type)]
@@ -74,7 +75,7 @@ pub struct TextLabel {
 	pub tooltip_description: String,
 
 	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: String,
+	pub tooltip_shortcut: Option<ActionShortcut>,
 
 	#[serde(rename = "forCheckbox")]
 	#[derivative(PartialEq = "ignore")]
@@ -102,7 +103,13 @@ pub struct ImageLabel {
 	pub tooltip_description: String,
 
 	#[serde(rename = "tooltipShortcut")]
-	pub tooltip_shortcut: String,
+	pub tooltip_shortcut: Option<ActionShortcut>,
 }
 
-// TODO: Add UserInputLabel
+#[derive(Clone, serde::Serialize, serde::Deserialize, Derivative, Default, WidgetBuilder, specta::Type)]
+#[derivative(Debug, PartialEq)]
+pub struct ShortcutLabel {
+	// This is wrapped in an Option to satisfy the requirement that widgets implement Default
+	#[widget_builder(constructor)]
+	pub shortcut: Option<ActionShortcut>,
+}
diff --git a/editor/src/messages/portfolio/document/data_panel/data_panel_message_handler.rs b/editor/src/messages/portfolio/document/data_panel/data_panel_message_handler.rs
index 0fef51e0e..c5e59b30a 100644
--- a/editor/src/messages/portfolio/document/data_panel/data_panel_message_handler.rs
+++ b/editor/src/messages/portfolio/document/data_panel/data_panel_message_handler.rs
@@ -232,7 +232,7 @@ impl<T: TableRowLayout> TableRowLayout for Vec<T> {
 
 		rows.insert(0, column_headings(&["", "element"]));
 
-		vec![LayoutGroup::Table { rows }]
+		vec![LayoutGroup::Table { rows, unstyled: false }]
 	}
 }
 
@@ -274,7 +274,7 @@ impl<T: TableRowLayout> TableRowLayout for Table<T> {
 
 		rows.insert(0, column_headings(&["", "element", "transform", "alpha_blending", "source_node_id"]));
 
-		vec![LayoutGroup::Table { rows }]
+		vec![LayoutGroup::Table { rows, unstyled: false }]
 	}
 }
 
@@ -490,7 +490,7 @@ impl TableRowLayout for Vector {
 			}
 		}
 
-		vec![LayoutGroup::Row { widgets: table_tabs }, LayoutGroup::Table { rows: table_rows }]
+		vec![LayoutGroup::Row { widgets: table_tabs }, LayoutGroup::Table { rows: table_rows, unstyled: false }]
 	}
 }
 
diff --git a/editor/src/messages/portfolio/document/document_message_handler.rs b/editor/src/messages/portfolio/document/document_message_handler.rs
index ea16e97ce..b9d6799ce 100644
--- a/editor/src/messages/portfolio/document/document_message_handler.rs
+++ b/editor/src/messages/portfolio/document/document_message_handler.rs
@@ -7,7 +7,7 @@ use super::utility_types::network_interface::{self, NodeNetworkInterface, Transa
 use super::utility_types::nodes::{CollapsedLayers, SelectedNodes};
 use crate::application::{GRAPHITE_GIT_COMMIT_HASH, generate_uuid};
 use crate::consts::{ASYMPTOTIC_EFFECT, COLOR_OVERLAY_GRAY, DEFAULT_DOCUMENT_NAME, FILE_EXTENSION, SCALE_EFFECT, SCROLLBAR_SPACING, VIEWPORT_ROTATE_SNAP_INTERVAL};
-use crate::messages::input_mapper::utility_types::macros::action_keys;
+use crate::messages::input_mapper::utility_types::macros::action_shortcut;
 use crate::messages::layout::utility_types::widget_prelude::*;
 use crate::messages::portfolio::document::data_panel::{DataPanelMessageContext, DataPanelMessageHandler};
 use crate::messages::portfolio::document::graph_operation::utility_types::TransformIn;
@@ -2212,20 +2212,20 @@ impl DocumentMessageHandler {
 		let mut widgets = vec![
 			IconButton::new("PlaybackToStart", 24)
 				.tooltip_label("Restart Animation")
-				.shortcut_keys(action_keys!(AnimationMessageDiscriminant::RestartAnimation))
+				.tooltip_shortcut(action_shortcut!(AnimationMessageDiscriminant::RestartAnimation))
 				.on_update(|_| AnimationMessage::RestartAnimation.into())
 				.disabled(time == Duration::ZERO)
 				.widget_holder(),
 			IconButton::new(if animation_is_playing { "PlaybackPause" } else { "PlaybackPlay" }, 24)
 				.tooltip_label(if animation_is_playing { "Pause Animation" } else { "Play Animation" })
-				.shortcut_keys(action_keys!(AnimationMessageDiscriminant::ToggleLivePreview))
+				.tooltip_shortcut(action_shortcut!(AnimationMessageDiscriminant::ToggleLivePreview))
 				.on_update(|_| AnimationMessage::ToggleLivePreview.into())
 				.widget_holder(),
 			Separator::new(SeparatorType::Unrelated).widget_holder(),
 			CheckboxInput::new(self.overlays_visibility_settings.all)
 				.icon("Overlays")
 				.tooltip_label("Overlays")
-				.shortcut_keys(action_keys!(DocumentMessageDiscriminant::ToggleOverlaysVisibility))
+				.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::ToggleOverlaysVisibility))
 				.on_update(|optional_input: &CheckboxInput| {
 					DocumentMessage::SetOverlaysVisibility {
 						visible: optional_input.checked,
@@ -2474,7 +2474,7 @@ impl DocumentMessageHandler {
 			CheckboxInput::new(snapping_state.snapping_enabled)
 				.icon("Snapping")
 				.tooltip_label("Snapping")
-				.shortcut_keys(action_keys!(DocumentMessageDiscriminant::ToggleSnapping))
+				.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::ToggleSnapping))
 				.on_update(move |optional_input: &CheckboxInput| {
 					DocumentMessage::SetSnapping {
 						closure: Some(|snapping_state| &mut snapping_state.snapping_enabled),
@@ -2544,7 +2544,7 @@ impl DocumentMessageHandler {
 			CheckboxInput::new(self.snapping_state.grid_snapping)
 				.icon("Grid")
 				.tooltip_label("Grid")
-				.shortcut_keys(action_keys!(DocumentMessageDiscriminant::ToggleGridVisibility))
+				.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::ToggleGridVisibility))
 				.on_update(|optional_input: &CheckboxInput| DocumentMessage::GridVisibility { visible: optional_input.checked }.into())
 				.widget_holder(),
 			PopoverButton::new()
@@ -2626,7 +2626,7 @@ impl DocumentMessageHandler {
 				.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()))
 				.tooltip_label(if self.graph_view_overlay_open { "Hide Node Graph" } else { "Show Node Graph" })
-				.shortcut_keys(action_keys!(DocumentMessageDiscriminant::GraphViewOverlayToggle))
+				.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::GraphViewOverlayToggle))
 				.on_update(move |_| DocumentMessage::GraphViewOverlayToggle.into())
 				.widget_holder(),
 		]);
@@ -2778,14 +2778,14 @@ impl DocumentMessageHandler {
 			IconButton::new(if selection_all_locked { "PadlockLocked" } else { "PadlockUnlocked" }, 24)
 				.hover_icon(Some((if selection_all_locked { "PadlockUnlocked" } else { "PadlockLocked" }).into()))
 				.tooltip_label(if selection_all_locked { "Unlock Selected" } else { "Lock Selected" })
-				.shortcut_keys(action_keys!(DocumentMessageDiscriminant::ToggleSelectedLocked))
+				.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::ToggleSelectedLocked))
 				.on_update(|_| NodeGraphMessage::ToggleSelectedLocked.into())
 				.disabled(!has_selection)
 				.widget_holder(),
 			IconButton::new(if selection_all_visible { "EyeVisible" } else { "EyeHidden" }, 24)
 				.hover_icon(Some((if selection_all_visible { "EyeHide" } else { "EyeShow" }).into()))
 				.tooltip_label(if selection_all_visible { "Hide Selected" } else { "Show Selected" })
-				.shortcut_keys(action_keys!(DocumentMessageDiscriminant::ToggleSelectedVisibility))
+				.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::ToggleSelectedVisibility))
 				.on_update(|_| DocumentMessage::ToggleSelectedVisibility.into())
 				.disabled(!has_selection)
 				.widget_holder(),
@@ -2850,7 +2850,7 @@ impl DocumentMessageHandler {
 			Separator::new(SeparatorType::Unrelated).widget_holder(),
 			IconButton::new("Folder", 24)
 				.tooltip_label("Group Selected")
-				.shortcut_keys(action_keys!(DocumentMessageDiscriminant::GroupSelectedLayers))
+				.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::GroupSelectedLayers))
 				.on_update(|_| {
 					let group_folder_type = GroupFolderType::Layer;
 					DocumentMessage::GroupSelectedLayers { group_folder_type }.into()
@@ -2859,12 +2859,12 @@ impl DocumentMessageHandler {
 				.widget_holder(),
 			IconButton::new("NewLayer", 24)
 				.tooltip_label("New Layer")
-				.shortcut_keys(action_keys!(DocumentMessageDiscriminant::CreateEmptyFolder))
+				.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::CreateEmptyFolder))
 				.on_update(|_| DocumentMessage::CreateEmptyFolder.into())
 				.widget_holder(),
 			IconButton::new("Trash", 24)
 				.tooltip_label("Delete Selected")
-				.shortcut_keys(action_keys!(DocumentMessageDiscriminant::DeleteSelectedLayers))
+				.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::DeleteSelectedLayers))
 				.on_update(|_| DocumentMessage::DeleteSelectedLayers.into())
 				.disabled(!has_selection)
 				.widget_holder(),
@@ -3148,17 +3148,17 @@ pub fn navigation_controls(ptz: &PTZ, navigation_handler: &NavigationMessageHand
 	let mut list = vec![
 		IconButton::new("ZoomIn", 24)
 			.tooltip_label("Zoom In")
-			.shortcut_keys(action_keys!(NavigationMessageDiscriminant::CanvasZoomIncrease))
+			.tooltip_shortcut(action_shortcut!(NavigationMessageDiscriminant::CanvasZoomIncrease))
 			.on_update(|_| NavigationMessage::CanvasZoomIncrease { center_on_mouse: false }.into())
 			.widget_holder(),
 		IconButton::new("ZoomOut", 24)
 			.tooltip_label("Zoom Out")
-			.shortcut_keys(action_keys!(NavigationMessageDiscriminant::CanvasZoomDecrease))
+			.tooltip_shortcut(action_shortcut!(NavigationMessageDiscriminant::CanvasZoomDecrease))
 			.on_update(|_| NavigationMessage::CanvasZoomDecrease { center_on_mouse: false }.into())
 			.widget_holder(),
 		IconButton::new("ZoomReset", 24)
 			.tooltip_label("Reset Tilt and Zoom to 100%")
-			.shortcut_keys(action_keys!(NavigationMessageDiscriminant::CanvasTiltResetAndZoomTo100Percent))
+			.tooltip_shortcut(action_shortcut!(NavigationMessageDiscriminant::CanvasTiltResetAndZoomTo100Percent))
 			.on_update(|_| NavigationMessage::CanvasTiltResetAndZoomTo100Percent.into())
 			.disabled(ptz.tilt().abs() < 1e-4 && (ptz.zoom() - 1.).abs() < 1e-4)
 			.widget_holder(),
@@ -3168,7 +3168,7 @@ pub fn navigation_controls(ptz: &PTZ, navigation_handler: &NavigationMessageHand
 			IconButton::new("Reverse", 24)
 				.tooltip_label("Unflip Canvas")
 				.tooltip_description("Flip the canvas back to its standard orientation.")
-				.shortcut_keys(action_keys!(NavigationMessageDiscriminant::CanvasFlip))
+				.tooltip_shortcut(action_shortcut!(NavigationMessageDiscriminant::CanvasFlip))
 				.on_update(|_| NavigationMessage::CanvasFlip.into())
 				.widget_holder(),
 		);
diff --git a/editor/src/messages/portfolio/document/navigation/navigation_message_handler.rs b/editor/src/messages/portfolio/document/navigation/navigation_message_handler.rs
index 3d02d9ce2..00e280b51 100644
--- a/editor/src/messages/portfolio/document/navigation/navigation_message_handler.rs
+++ b/editor/src/messages/portfolio/document/navigation/navigation_message_handler.rs
@@ -77,9 +77,7 @@ impl MessageHandler<NavigationMessage, NavigationMessageContext<'_>> for Navigat
 			NavigationMessage::BeginCanvasPan => {
 				responses.add(FrontendMessage::UpdateMouseCursor { cursor: MouseCursorIcon::Grabbing });
 
-				responses.add(FrontendMessage::UpdateInputHints {
-					hint_data: HintData(vec![HintGroup(vec![HintInfo::mouse(MouseMotion::Rmb, ""), HintInfo::keys([Key::Escape], "Cancel").prepend_slash()])]),
-				});
+				HintData(vec![HintGroup(vec![HintInfo::mouse(MouseMotion::Rmb, ""), HintInfo::keys([Key::Escape], "Cancel").prepend_slash()])]).send_layout(responses);
 
 				self.mouse_position = ipp.mouse.position;
 				let Some(ptz) = get_ptz(document_ptz, network_interface, graph_view_overlay_open, breadcrumb_network_path) else {
@@ -96,12 +94,11 @@ impl MessageHandler<NavigationMessage, NavigationMessageContext<'_>> for Navigat
 					responses.add(NavigationMessage::BeginCanvasPan);
 				} else {
 					responses.add(FrontendMessage::UpdateMouseCursor { cursor: MouseCursorIcon::Default });
-					responses.add(FrontendMessage::UpdateInputHints {
-						hint_data: HintData(vec![
-							HintGroup(vec![HintInfo::mouse(MouseMotion::Rmb, ""), HintInfo::keys([Key::Escape], "Cancel").prepend_slash()]),
-							HintGroup(vec![HintInfo::keys([Key::Shift], "15° Increments")]),
-						]),
-					});
+					HintData(vec![
+						HintGroup(vec![HintInfo::mouse(MouseMotion::Rmb, ""), HintInfo::keys([Key::Escape], "Cancel").prepend_slash()]),
+						HintGroup(vec![HintInfo::keys([Key::Shift], "15° Increments")]),
+					])
+					.send_layout(responses);
 
 					self.navigation_operation = NavigationOperation::Tilt {
 						tilt_original_for_abort: ptz.tilt(),
@@ -119,12 +116,11 @@ impl MessageHandler<NavigationMessage, NavigationMessageContext<'_>> for Navigat
 				};
 
 				responses.add(FrontendMessage::UpdateMouseCursor { cursor: MouseCursorIcon::ZoomIn });
-				responses.add(FrontendMessage::UpdateInputHints {
-					hint_data: HintData(vec![
-						HintGroup(vec![HintInfo::mouse(MouseMotion::Rmb, ""), HintInfo::keys([Key::Escape], "Cancel").prepend_slash()]),
-						HintGroup(vec![HintInfo::keys([Key::Shift], "Increments")]),
-					]),
-				});
+				HintData(vec![
+					HintGroup(vec![HintInfo::mouse(MouseMotion::Rmb, ""), HintInfo::keys([Key::Escape], "Cancel").prepend_slash()]),
+					HintGroup(vec![HintInfo::keys([Key::Shift], "Increments")]),
+				])
+				.send_layout(responses);
 
 				self.navigation_operation = NavigationOperation::Zoom {
 					zoom_raw_not_snapped: ptz.zoom(),
diff --git a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs
index 58a1dc807..572450686 100644
--- a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs
+++ b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs
@@ -1,8 +1,7 @@
 use super::utility_types::{BoxSelection, ContextMenuInformation, DragStart, FrontendNode};
 use super::{document_node_definitions, node_properties};
 use crate::consts::GRID_SIZE;
-use crate::messages::input_mapper::utility_types::input_keyboard::KeysGroup;
-use crate::messages::input_mapper::utility_types::macros::action_keys;
+use crate::messages::input_mapper::utility_types::macros::{action_shortcut, action_shortcut_manual};
 use crate::messages::layout::utility_types::widget_prelude::*;
 use crate::messages::portfolio::document::document_message_handler::navigation_controls;
 use crate::messages::portfolio::document::graph_operation::utility_types::ModifyInputsContext;
@@ -2108,7 +2107,7 @@ impl NodeGraphMessageHandler {
 				.icon(Some("Node".to_string()))
 				.tooltip_label("New Node")
 				.tooltip_description("To add a node at the pointer location, perform the shortcut in an open area of the graph.")
-				.tooltip_shortcut(Key::MouseRight.to_string())
+				.tooltip_shortcut(action_shortcut_manual!(Key::MouseRight))
 				.popover_layout({
 					// Showing only compatible types
 					let compatible_type = match (selection_includes_layers, has_multiple_selection, selected_layer) {
@@ -2154,7 +2153,7 @@ impl NodeGraphMessageHandler {
 			//
 			IconButton::new("Folder", 24)
 				.tooltip_label("Group Selected")
-				.shortcut_keys(action_keys!(DocumentMessageDiscriminant::GroupSelectedLayers))
+				.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::GroupSelectedLayers))
 				.on_update(|_| {
 					let group_folder_type = GroupFolderType::Layer;
 					DocumentMessage::GroupSelectedLayers { group_folder_type }.into()
@@ -2163,12 +2162,12 @@ impl NodeGraphMessageHandler {
 				.widget_holder(),
 			IconButton::new("NewLayer", 24)
 				.tooltip_label("New Layer")
-				.shortcut_keys(action_keys!(DocumentMessageDiscriminant::CreateEmptyFolder))
+				.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::CreateEmptyFolder))
 				.on_update(|_| DocumentMessage::CreateEmptyFolder.into())
 				.widget_holder(),
 			IconButton::new("Trash", 24)
 				.tooltip_label("Delete Selected")
-				.shortcut_keys(action_keys!(DocumentMessageDiscriminant::DeleteSelectedLayers))
+				.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::DeleteSelectedLayers))
 				.on_update(|_| DocumentMessage::DeleteSelectedLayers.into())
 				.disabled(!has_selection)
 				.widget_holder(),
@@ -2178,14 +2177,14 @@ impl NodeGraphMessageHandler {
 			IconButton::new(if selection_all_locked { "PadlockLocked" } else { "PadlockUnlocked" }, 24)
 				.hover_icon(Some((if selection_all_locked { "PadlockUnlocked" } else { "PadlockLocked" }).into()))
 				.tooltip_label(if selection_all_locked { "Unlock Selected" } else { "Lock Selected" })
-				.shortcut_keys(action_keys!(NodeGraphMessageDiscriminant::ToggleSelectedLocked))
+				.tooltip_shortcut(action_shortcut!(NodeGraphMessageDiscriminant::ToggleSelectedLocked))
 				.on_update(|_| NodeGraphMessage::ToggleSelectedLocked.into())
 				.disabled(!has_selection || !selection_includes_layers)
 				.widget_holder(),
 			IconButton::new(if selection_all_visible { "EyeVisible" } else { "EyeHidden" }, 24)
 				.hover_icon(Some((if selection_all_visible { "EyeHide" } else { "EyeShow" }).into()))
 				.tooltip_label(if selection_all_visible { "Hide Selected" } else { "Show Selected" })
-				.shortcut_keys(action_keys!(NodeGraphMessageDiscriminant::ToggleSelectedVisibility))
+				.tooltip_shortcut(action_shortcut!(NodeGraphMessageDiscriminant::ToggleSelectedVisibility))
 				.on_update(|_| NodeGraphMessage::ToggleSelectedVisibility.into())
 				.disabled(!has_selection)
 				.widget_holder(),
@@ -2225,7 +2224,7 @@ impl NodeGraphMessageHandler {
 					.icon(Some("FrameAll".to_string()))
 					.tooltip_label("Preview")
 					.tooltip_description("Temporarily set the graph output to the selected node or layer. Perform the shortcut on a node or layer for quick access.")
-					.tooltip_shortcut(KeysGroup(vec![Key::Alt, Key::MouseLeft]).to_string())
+					.tooltip_shortcut(action_shortcut_manual!(Key::Alt, Key::MouseLeft))
 					.on_update(move |_| NodeGraphMessage::TogglePreview { node_id }.into())
 					.widget_holder();
 				widgets.extend([Separator::new(SeparatorType::Unrelated).widget_holder(), button]);
@@ -2284,7 +2283,7 @@ impl NodeGraphMessageHandler {
 				.icon(Some("GraphViewOpen".into()))
 				.hover_icon(Some("GraphViewClosed".into()))
 				.tooltip_label("Hide Node Graph")
-				.shortcut_keys(action_keys!(DocumentMessageDiscriminant::GraphViewOverlayToggle))
+				.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::GraphViewOverlayToggle))
 				.on_update(move |_| DocumentMessage::GraphViewOverlayToggle.into())
 				.widget_holder(),
 		]);
@@ -2720,8 +2719,7 @@ impl NodeGraphMessageHandler {
 
 		// Cancel the ongoing action
 		if wiring || dragging_nodes || dragging_box_selection {
-			let hint_data = HintData(vec![HintGroup(vec![HintInfo::mouse(MouseMotion::Rmb, ""), HintInfo::keys([Key::Escape], "Cancel").prepend_slash()])]);
-			responses.add(FrontendMessage::UpdateInputHints { hint_data });
+			HintData(vec![HintGroup(vec![HintInfo::mouse(MouseMotion::Rmb, ""), HintInfo::keys([Key::Escape], "Cancel").prepend_slash()])]).send_layout(responses);
 			return;
 		}
 
@@ -2749,7 +2747,7 @@ impl NodeGraphMessageHandler {
 			HintGroup(vec![HintInfo::mouse(MouseMotion::LmbDouble, "Enter Node Subgraph")]),
 			HintGroup(vec![HintInfo::keys_and_mouse([Key::Alt], MouseMotion::Lmb, "Preview Node Output")]),
 		]);
-		responses.add(FrontendMessage::UpdateInputHints { hint_data });
+		hint_data.send_layout(responses);
 	}
 }
 
diff --git a/editor/src/messages/portfolio/document/utility_types/transformation.rs b/editor/src/messages/portfolio/document/utility_types/transformation.rs
index 47bc1eed2..63e1b8baa 100644
--- a/editor/src/messages/portfolio/document/utility_types/transformation.rs
+++ b/editor/src/messages/portfolio/document/utility_types/transformation.rs
@@ -452,8 +452,7 @@ impl TransformOperation {
 		}
 		hint_groups.push(HintGroup(typing_hints));
 
-		let hint_data = HintData(hint_groups);
-		responses.add(FrontendMessage::UpdateInputHints { hint_data });
+		HintData(hint_groups).send_layout(responses);
 	}
 
 	pub fn is_constraint_to_axis(&self) -> bool {
diff --git a/editor/src/messages/portfolio/menu_bar/menu_bar_message_handler.rs b/editor/src/messages/portfolio/menu_bar/menu_bar_message_handler.rs
index a8e434a42..0c7b744e4 100644
--- a/editor/src/messages/portfolio/menu_bar/menu_bar_message_handler.rs
+++ b/editor/src/messages/portfolio/menu_bar/menu_bar_message_handler.rs
@@ -1,5 +1,5 @@
 use crate::messages::debug::utility_types::MessageLoggingVerbosity;
-use crate::messages::input_mapper::utility_types::macros::action_keys;
+use crate::messages::input_mapper::utility_types::macros::action_shortcut;
 use crate::messages::layout::utility_types::widget_prelude::*;
 use crate::messages::portfolio::document::utility_types::clipboards::Clipboard;
 use crate::messages::portfolio::document::utility_types::misc::{AlignAggregate, AlignAxis, FlipAxis, GroupFolderType};
@@ -68,7 +68,7 @@ impl LayoutHolder for MenuBarMessageHandler {
 		let preferences = MenuListEntry::new("Preferences…")
 			.label("Preferences…")
 			.icon("Settings")
-			.shortcut_keys(action_keys!(DialogMessageDiscriminant::RequestPreferencesDialog))
+			.tooltip_shortcut(action_shortcut!(DialogMessageDiscriminant::RequestPreferencesDialog))
 			.on_commit(|_| DialogMessage::RequestPreferencesDialog.into());
 
 		let menu_bar_buttons = vec![
@@ -89,21 +89,21 @@ impl LayoutHolder for MenuBarMessageHandler {
 					vec![
 						MenuListEntry::new("Hide Graphite")
 							.label("Hide Graphite")
-							.shortcut_keys(action_keys!(AppWindowMessageDiscriminant::Hide))
+							.tooltip_shortcut(action_shortcut!(AppWindowMessageDiscriminant::Hide))
 							.on_commit(|_| AppWindowMessage::Hide.into()),
 						MenuListEntry::new("Hide Others")
 							.label("Hide Others")
-							.shortcut_keys(action_keys!(AppWindowMessageDiscriminant::HideOthers))
+							.tooltip_shortcut(action_shortcut!(AppWindowMessageDiscriminant::HideOthers))
 							.on_commit(|_| AppWindowMessage::HideOthers.into()),
 						MenuListEntry::new("Show All")
 							.label("Show All")
-							.shortcut_keys(action_keys!(AppWindowMessageDiscriminant::ShowAll))
+							.tooltip_shortcut(action_shortcut!(AppWindowMessageDiscriminant::ShowAll))
 							.on_commit(|_| AppWindowMessage::ShowAll.into()),
 					],
 					vec![
 						MenuListEntry::new("Quit Graphite")
 							.label("Quit Graphite")
-							.shortcut_keys(action_keys!(AppWindowMessageDiscriminant::Close))
+							.tooltip_shortcut(action_shortcut!(AppWindowMessageDiscriminant::Close))
 							.on_commit(|_| AppWindowMessage::Close.into()),
 					],
 				])
@@ -117,11 +117,11 @@ impl LayoutHolder for MenuBarMessageHandler {
 							.label("New…")
 							.icon("File")
 							.on_commit(|_| DialogMessage::RequestNewDocumentDialog.into())
-							.shortcut_keys(action_keys!(DialogMessageDiscriminant::RequestNewDocumentDialog)),
+							.tooltip_shortcut(action_shortcut!(DialogMessageDiscriminant::RequestNewDocumentDialog)),
 						MenuListEntry::new("Open…")
 							.label("Open…")
 							.icon("Folder")
-							.shortcut_keys(action_keys!(PortfolioMessageDiscriminant::OpenDocument))
+							.tooltip_shortcut(action_shortcut!(PortfolioMessageDiscriminant::OpenDocument))
 							.on_commit(|_| PortfolioMessage::OpenDocument.into()),
 						MenuListEntry::new("Open Demo Artwork…")
 							.label("Open Demo Artwork…")
@@ -132,13 +132,13 @@ impl LayoutHolder for MenuBarMessageHandler {
 						MenuListEntry::new("Close")
 							.label("Close")
 							.icon("Close")
-							.shortcut_keys(action_keys!(PortfolioMessageDiscriminant::CloseActiveDocumentWithConfirmation))
+							.tooltip_shortcut(action_shortcut!(PortfolioMessageDiscriminant::CloseActiveDocumentWithConfirmation))
 							.on_commit(|_| PortfolioMessage::CloseActiveDocumentWithConfirmation.into())
 							.disabled(no_active_document),
 						MenuListEntry::new("Close All")
 							.label("Close All")
 							.icon("CloseAll")
-							.shortcut_keys(action_keys!(PortfolioMessageDiscriminant::CloseAllDocumentsWithConfirmation))
+							.tooltip_shortcut(action_shortcut!(PortfolioMessageDiscriminant::CloseAllDocumentsWithConfirmation))
 							.on_commit(|_| PortfolioMessage::CloseAllDocumentsWithConfirmation.into())
 							.disabled(no_active_document),
 					],
@@ -146,14 +146,14 @@ impl LayoutHolder for MenuBarMessageHandler {
 						MenuListEntry::new("Save")
 							.label("Save")
 							.icon("Save")
-							.shortcut_keys(action_keys!(DocumentMessageDiscriminant::SaveDocument))
+							.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::SaveDocument))
 							.on_commit(|_| DocumentMessage::SaveDocument.into())
 							.disabled(no_active_document),
 						#[cfg(not(target_family = "wasm"))]
 						MenuListEntry::new("Save As…")
 							.label("Save As…")
 							.icon("Save")
-							.shortcut_keys(action_keys!(DocumentMessageDiscriminant::SaveDocumentAs))
+							.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::SaveDocumentAs))
 							.on_commit(|_| DocumentMessage::SaveDocumentAs.into())
 							.disabled(no_active_document),
 					],
@@ -161,12 +161,12 @@ impl LayoutHolder for MenuBarMessageHandler {
 						MenuListEntry::new("Import…")
 							.label("Import…")
 							.icon("FileImport")
-							.shortcut_keys(action_keys!(PortfolioMessageDiscriminant::Import))
+							.tooltip_shortcut(action_shortcut!(PortfolioMessageDiscriminant::Import))
 							.on_commit(|_| PortfolioMessage::Import.into()),
 						MenuListEntry::new("Export…")
 							.label("Export…")
 							.icon("FileExport")
-							.shortcut_keys(action_keys!(DialogMessageDiscriminant::RequestExportDialog))
+							.tooltip_shortcut(action_shortcut!(DialogMessageDiscriminant::RequestExportDialog))
 							.on_commit(|_| DialogMessage::RequestExportDialog.into())
 							.disabled(no_active_document),
 					],
@@ -182,13 +182,13 @@ impl LayoutHolder for MenuBarMessageHandler {
 						MenuListEntry::new("Undo")
 							.label("Undo")
 							.icon("HistoryUndo")
-							.shortcut_keys(action_keys!(DocumentMessageDiscriminant::Undo))
+							.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::Undo))
 							.on_commit(|_| DocumentMessage::Undo.into())
 							.disabled(no_active_document),
 						MenuListEntry::new("Redo")
 							.label("Redo")
 							.icon("HistoryRedo")
-							.shortcut_keys(action_keys!(DocumentMessageDiscriminant::Redo))
+							.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::Redo))
 							.on_commit(|_| DocumentMessage::Redo.into())
 							.disabled(no_active_document),
 					],
@@ -196,19 +196,19 @@ impl LayoutHolder for MenuBarMessageHandler {
 						MenuListEntry::new("Cut")
 							.label("Cut")
 							.icon("Cut")
-							.shortcut_keys(action_keys!(PortfolioMessageDiscriminant::Cut))
+							.tooltip_shortcut(action_shortcut!(PortfolioMessageDiscriminant::Cut))
 							.on_commit(|_| PortfolioMessage::Cut { clipboard: Clipboard::Device }.into())
 							.disabled(no_active_document || !has_selected_layers),
 						MenuListEntry::new("Copy")
 							.label("Copy")
 							.icon("Copy")
-							.shortcut_keys(action_keys!(PortfolioMessageDiscriminant::Copy))
+							.tooltip_shortcut(action_shortcut!(PortfolioMessageDiscriminant::Copy))
 							.on_commit(|_| PortfolioMessage::Copy { clipboard: Clipboard::Device }.into())
 							.disabled(no_active_document || !has_selected_layers),
 						MenuListEntry::new("Paste")
 							.label("Paste")
 							.icon("Paste")
-							.shortcut_keys(action_keys!(FrontendMessageDiscriminant::TriggerPaste))
+							.tooltip_shortcut(action_shortcut!(FrontendMessageDiscriminant::TriggerPaste))
 							.on_commit(|_| FrontendMessage::TriggerPaste.into())
 							.disabled(no_active_document),
 					],
@@ -216,13 +216,13 @@ impl LayoutHolder for MenuBarMessageHandler {
 						MenuListEntry::new("Duplicate")
 							.label("Duplicate")
 							.icon("Copy")
-							.shortcut_keys(action_keys!(DocumentMessageDiscriminant::DuplicateSelectedLayers))
+							.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::DuplicateSelectedLayers))
 							.on_commit(|_| DocumentMessage::DuplicateSelectedLayers.into())
 							.disabled(no_active_document || !has_selected_nodes),
 						MenuListEntry::new("Delete")
 							.label("Delete")
 							.icon("Trash")
-							.shortcut_keys(action_keys!(DocumentMessageDiscriminant::DeleteSelectedLayers))
+							.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::DeleteSelectedLayers))
 							.on_commit(|_| DocumentMessage::DeleteSelectedLayers.into())
 							.disabled(no_active_document || !has_selected_nodes),
 					],
@@ -238,13 +238,12 @@ impl LayoutHolder for MenuBarMessageHandler {
 			TextButton::new("Layer")
 				.label("Layer")
 				.flush(true)
-				.disabled(no_active_document)
 				.menu_list_children(vec![
 					vec![
 						MenuListEntry::new("New")
 							.label("New")
 							.icon("NewLayer")
-							.shortcut_keys(action_keys!(DocumentMessageDiscriminant::CreateEmptyFolder))
+							.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::CreateEmptyFolder))
 							.on_commit(|_| DocumentMessage::CreateEmptyFolder.into())
 							.disabled(no_active_document),
 					],
@@ -252,7 +251,7 @@ impl LayoutHolder for MenuBarMessageHandler {
 						MenuListEntry::new("Group")
 							.label("Group")
 							.icon("Folder")
-							.shortcut_keys(action_keys!(DocumentMessageDiscriminant::GroupSelectedLayers))
+							.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::GroupSelectedLayers))
 							.on_commit(|_| {
 								DocumentMessage::GroupSelectedLayers {
 									group_folder_type: GroupFolderType::Layer,
@@ -263,7 +262,7 @@ impl LayoutHolder for MenuBarMessageHandler {
 						MenuListEntry::new("Ungroup")
 							.label("Ungroup")
 							.icon("FolderOpen")
-							.shortcut_keys(action_keys!(DocumentMessageDiscriminant::UngroupSelectedLayers))
+							.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::UngroupSelectedLayers))
 							.on_commit(|_| DocumentMessage::UngroupSelectedLayers.into())
 							.disabled(no_active_document || !has_selected_layers),
 					],
@@ -271,13 +270,13 @@ impl LayoutHolder for MenuBarMessageHandler {
 						MenuListEntry::new("Hide/Show")
 							.label("Hide/Show")
 							.icon("EyeHide")
-							.shortcut_keys(action_keys!(DocumentMessageDiscriminant::ToggleSelectedVisibility))
+							.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::ToggleSelectedVisibility))
 							.on_commit(|_| DocumentMessage::ToggleSelectedVisibility.into())
 							.disabled(no_active_document || !has_selected_layers),
 						MenuListEntry::new("Lock/Unlock")
 							.label("Lock/Unlock")
 							.icon("PadlockLocked")
-							.shortcut_keys(action_keys!(DocumentMessageDiscriminant::ToggleSelectedLocked))
+							.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::ToggleSelectedLocked))
 							.on_commit(|_| DocumentMessage::ToggleSelectedLocked.into())
 							.disabled(no_active_document || !has_selected_layers),
 					],
@@ -285,19 +284,19 @@ impl LayoutHolder for MenuBarMessageHandler {
 						MenuListEntry::new("Grab")
 							.label("Grab")
 							.icon("TransformationGrab")
-							.shortcut_keys(action_keys!(TransformLayerMessageDiscriminant::BeginGrab))
+							.tooltip_shortcut(action_shortcut!(TransformLayerMessageDiscriminant::BeginGrab))
 							.on_commit(|_| TransformLayerMessage::BeginGrab.into())
 							.disabled(no_active_document || !has_selected_layers),
 						MenuListEntry::new("Rotate")
 							.label("Rotate")
 							.icon("TransformationRotate")
-							.shortcut_keys(action_keys!(TransformLayerMessageDiscriminant::BeginRotate))
+							.tooltip_shortcut(action_shortcut!(TransformLayerMessageDiscriminant::BeginRotate))
 							.on_commit(|_| TransformLayerMessage::BeginRotate.into())
 							.disabled(no_active_document || !has_selected_layers),
 						MenuListEntry::new("Scale")
 							.label("Scale")
 							.icon("TransformationScale")
-							.shortcut_keys(action_keys!(TransformLayerMessageDiscriminant::BeginScale))
+							.tooltip_shortcut(action_shortcut!(TransformLayerMessageDiscriminant::BeginScale))
 							.on_commit(|_| TransformLayerMessage::BeginScale.into())
 							.disabled(no_active_document || !has_selected_layers),
 					],
@@ -311,25 +310,25 @@ impl LayoutHolder for MenuBarMessageHandler {
 									MenuListEntry::new("Raise To Front")
 										.label("Raise To Front")
 										.icon("Stack")
-										.shortcut_keys(action_keys!(DocumentMessageDiscriminant::SelectedLayersRaiseToFront))
+										.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::SelectedLayersRaiseToFront))
 										.on_commit(|_| DocumentMessage::SelectedLayersRaiseToFront.into())
 										.disabled(no_active_document || !has_selected_layers),
 									MenuListEntry::new("Raise")
 										.label("Raise")
 										.icon("StackRaise")
-										.shortcut_keys(action_keys!(DocumentMessageDiscriminant::SelectedLayersRaise))
+										.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::SelectedLayersRaise))
 										.on_commit(|_| DocumentMessage::SelectedLayersRaise.into())
 										.disabled(no_active_document || !has_selected_layers),
 									MenuListEntry::new("Lower")
 										.label("Lower")
 										.icon("StackLower")
-										.shortcut_keys(action_keys!(DocumentMessageDiscriminant::SelectedLayersLower))
+										.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::SelectedLayersLower))
 										.on_commit(|_| DocumentMessage::SelectedLayersLower.into())
 										.disabled(no_active_document || !has_selected_layers),
 									MenuListEntry::new("Lower to Back")
 										.label("Lower to Back")
 										.icon("StackBottom")
-										.shortcut_keys(action_keys!(DocumentMessageDiscriminant::SelectedLayersLowerToBack))
+										.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::SelectedLayersLowerToBack))
 										.on_commit(|_| DocumentMessage::SelectedLayersLowerToBack.into())
 										.disabled(no_active_document || !has_selected_layers),
 								],
@@ -508,25 +507,24 @@ impl LayoutHolder for MenuBarMessageHandler {
 			TextButton::new("Select")
 				.label("Select")
 				.flush(true)
-				.disabled(no_active_document)
 				.menu_list_children(vec![
 					vec![
 						MenuListEntry::new("Select All")
 							.label("Select All")
 							.icon("SelectAll")
-							.shortcut_keys(action_keys!(DocumentMessageDiscriminant::SelectAllLayers))
+							.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::SelectAllLayers))
 							.on_commit(|_| DocumentMessage::SelectAllLayers.into())
 							.disabled(no_active_document),
 						MenuListEntry::new("Deselect All")
 							.label("Deselect All")
 							.icon("DeselectAll")
-							.shortcut_keys(action_keys!(DocumentMessageDiscriminant::DeselectAllLayers))
+							.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::DeselectAllLayers))
 							.on_commit(|_| DocumentMessage::DeselectAllLayers.into())
 							.disabled(no_active_document || !has_selected_nodes),
 						MenuListEntry::new("Select Parent")
 							.label("Select Parent")
 							.icon("SelectParent")
-							.shortcut_keys(action_keys!(DocumentMessageDiscriminant::SelectParentLayer))
+							.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::SelectParentLayer))
 							.on_commit(|_| DocumentMessage::SelectParentLayer.into())
 							.disabled(no_active_document || !has_selected_nodes),
 					],
@@ -534,13 +532,13 @@ impl LayoutHolder for MenuBarMessageHandler {
 						MenuListEntry::new("Previous Selection")
 							.label("Previous Selection")
 							.icon("HistoryUndo")
-							.shortcut_keys(action_keys!(DocumentMessageDiscriminant::SelectionStepBack))
+							.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::SelectionStepBack))
 							.on_commit(|_| DocumentMessage::SelectionStepBack.into())
 							.disabled(!has_selection_history.0),
 						MenuListEntry::new("Next Selection")
 							.label("Next Selection")
 							.icon("HistoryRedo")
-							.shortcut_keys(action_keys!(DocumentMessageDiscriminant::SelectionStepForward))
+							.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::SelectionStepForward))
 							.on_commit(|_| DocumentMessage::SelectionStepForward.into())
 							.disabled(!has_selection_history.1),
 					],
@@ -549,19 +547,18 @@ impl LayoutHolder for MenuBarMessageHandler {
 			TextButton::new("View")
 				.label("View")
 				.flush(true)
-				.disabled(no_active_document)
 				.menu_list_children(vec![
 					vec![
 						MenuListEntry::new("Tilt")
 							.label("Tilt")
 							.icon("Tilt")
-							.shortcut_keys(action_keys!(NavigationMessageDiscriminant::BeginCanvasTilt))
+							.tooltip_shortcut(action_shortcut!(NavigationMessageDiscriminant::BeginCanvasTilt))
 							.on_commit(|_| NavigationMessage::BeginCanvasTilt { was_dispatched_from_menu: true }.into())
 							.disabled(no_active_document || node_graph_open),
 						MenuListEntry::new("Reset Tilt")
 							.label("Reset Tilt")
 							.icon("TiltReset")
-							.shortcut_keys(action_keys!(NavigationMessageDiscriminant::CanvasTiltSet))
+							.tooltip_shortcut(action_shortcut!(NavigationMessageDiscriminant::CanvasTiltSet))
 							.on_commit(|_| NavigationMessage::CanvasTiltSet { angle_radians: 0.into() }.into())
 							.disabled(no_active_document || node_graph_open || !self.canvas_tilted),
 					],
@@ -569,37 +566,37 @@ impl LayoutHolder for MenuBarMessageHandler {
 						MenuListEntry::new("Zoom In")
 							.label("Zoom In")
 							.icon("ZoomIn")
-							.shortcut_keys(action_keys!(NavigationMessageDiscriminant::CanvasZoomIncrease))
+							.tooltip_shortcut(action_shortcut!(NavigationMessageDiscriminant::CanvasZoomIncrease))
 							.on_commit(|_| NavigationMessage::CanvasZoomIncrease { center_on_mouse: false }.into())
 							.disabled(no_active_document),
 						MenuListEntry::new("Zoom Out")
 							.label("Zoom Out")
 							.icon("ZoomOut")
-							.shortcut_keys(action_keys!(NavigationMessageDiscriminant::CanvasZoomDecrease))
+							.tooltip_shortcut(action_shortcut!(NavigationMessageDiscriminant::CanvasZoomDecrease))
 							.on_commit(|_| NavigationMessage::CanvasZoomDecrease { center_on_mouse: false }.into())
 							.disabled(no_active_document),
 						MenuListEntry::new("Zoom to Selection")
 							.label("Zoom to Selection")
 							.icon("FrameSelected")
-							.shortcut_keys(action_keys!(NavigationMessageDiscriminant::FitViewportToSelection))
+							.tooltip_shortcut(action_shortcut!(NavigationMessageDiscriminant::FitViewportToSelection))
 							.on_commit(|_| NavigationMessage::FitViewportToSelection.into())
 							.disabled(no_active_document || !has_selected_layers),
 						MenuListEntry::new("Zoom to Fit")
 							.label("Zoom to Fit")
 							.icon("FrameAll")
-							.shortcut_keys(action_keys!(DocumentMessageDiscriminant::ZoomCanvasToFitAll))
+							.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::ZoomCanvasToFitAll))
 							.on_commit(|_| DocumentMessage::ZoomCanvasToFitAll.into())
 							.disabled(no_active_document),
 						MenuListEntry::new("Zoom to 100%")
 							.label("Zoom to 100%")
 							.icon("Zoom1x")
-							.shortcut_keys(action_keys!(DocumentMessageDiscriminant::ZoomCanvasTo100Percent))
+							.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::ZoomCanvasTo100Percent))
 							.on_commit(|_| DocumentMessage::ZoomCanvasTo100Percent.into())
 							.disabled(no_active_document),
 						MenuListEntry::new("Zoom to 200%")
 							.label("Zoom to 200%")
 							.icon("Zoom2x")
-							.shortcut_keys(action_keys!(DocumentMessageDiscriminant::ZoomCanvasTo200Percent))
+							.tooltip_shortcut(action_shortcut!(DocumentMessageDiscriminant::ZoomCanvasTo200Percent))
 							.on_commit(|_| DocumentMessage::ZoomCanvasTo200Percent.into())
 							.disabled(no_active_document),
 					],
@@ -607,7 +604,7 @@ impl LayoutHolder for MenuBarMessageHandler {
 						MenuListEntry::new("Flip")
 							.label("Flip")
 							.icon(if self.canvas_flipped { "CheckboxChecked" } else { "CheckboxUnchecked" })
-							.shortcut_keys(action_keys!(NavigationMessageDiscriminant::CanvasFlip))
+							.tooltip_shortcut(action_shortcut!(NavigationMessageDiscriminant::CanvasFlip))
 							.on_commit(|_| NavigationMessage::CanvasFlip.into())
 							.disabled(no_active_document || node_graph_open),
 					],
@@ -615,7 +612,7 @@ impl LayoutHolder for MenuBarMessageHandler {
 						MenuListEntry::new("Rulers")
 							.label("Rulers")
 							.icon(if self.rulers_visible { "CheckboxChecked" } else { "CheckboxUnchecked" })
-							.shortcut_keys(action_keys!(PortfolioMessageDiscriminant::ToggleRulers))
+							.tooltip_shortcut(action_shortcut!(PortfolioMessageDiscriminant::ToggleRulers))
 							.on_commit(|_| PortfolioMessage::ToggleRulers.into())
 							.disabled(no_active_document),
 					],
@@ -629,19 +626,19 @@ impl LayoutHolder for MenuBarMessageHandler {
 						MenuListEntry::new("Properties")
 							.label("Properties")
 							.icon(if self.properties_panel_open { "CheckboxChecked" } else { "CheckboxUnchecked" })
-							.shortcut_keys(action_keys!(PortfolioMessageDiscriminant::TogglePropertiesPanelOpen))
+							.tooltip_shortcut(action_shortcut!(PortfolioMessageDiscriminant::TogglePropertiesPanelOpen))
 							.on_commit(|_| PortfolioMessage::TogglePropertiesPanelOpen.into()),
 						MenuListEntry::new("Layers")
 							.label("Layers")
 							.icon(if self.layers_panel_open { "CheckboxChecked" } else { "CheckboxUnchecked" })
-							.shortcut_keys(action_keys!(PortfolioMessageDiscriminant::ToggleLayersPanelOpen))
+							.tooltip_shortcut(action_shortcut!(PortfolioMessageDiscriminant::ToggleLayersPanelOpen))
 							.on_commit(|_| PortfolioMessage::ToggleLayersPanelOpen.into()),
 					],
 					vec![
 						MenuListEntry::new("Data")
 							.label("Data")
 							.icon(if self.data_panel_open { "CheckboxChecked" } else { "CheckboxUnchecked" })
-							.shortcut_keys(action_keys!(PortfolioMessageDiscriminant::ToggleDataPanelOpen))
+							.tooltip_shortcut(action_shortcut!(PortfolioMessageDiscriminant::ToggleDataPanelOpen))
 							.on_commit(|_| PortfolioMessage::ToggleDataPanelOpen.into()),
 					],
 				])
@@ -702,7 +699,7 @@ impl LayoutHolder for MenuBarMessageHandler {
 										"CheckboxChecked".to_string()
 									}
 								}).unwrap_or_default())
-								.shortcut_keys(action_keys!(DebugMessageDiscriminant::MessageOff))
+								.tooltip_shortcut(action_shortcut!(DebugMessageDiscriminant::MessageOff))
 								.on_commit(|_| DebugMessage::MessageOff.into()),
 							MenuListEntry::new("Print Messages: Only Names")
 								.label("Print Messages: Only Names")
@@ -716,7 +713,7 @@ impl LayoutHolder for MenuBarMessageHandler {
 										"CheckboxChecked".to_string()
 									}
 								}).unwrap_or_default())
-								.shortcut_keys(action_keys!(DebugMessageDiscriminant::MessageNames))
+								.tooltip_shortcut(action_shortcut!(DebugMessageDiscriminant::MessageNames))
 								.on_commit(|_| DebugMessage::MessageNames.into()),
 							MenuListEntry::new("Print Messages: Full Contents")
 								.label("Print Messages: Full Contents")
@@ -730,7 +727,7 @@ impl LayoutHolder for MenuBarMessageHandler {
 										"CheckboxChecked".to_string()
 									}
 								}).unwrap_or_default())
-								.shortcut_keys(action_keys!(DebugMessageDiscriminant::MessageContents))
+								.tooltip_shortcut(action_shortcut!(DebugMessageDiscriminant::MessageContents))
 								.on_commit(|_| DebugMessage::MessageContents.into()),
 						],
 						vec![MenuListEntry::new("Trigger a Crash").label("Trigger a Crash").icon("Warning").on_commit(|_| panic!())],
diff --git a/editor/src/messages/portfolio/portfolio_message.rs b/editor/src/messages/portfolio/portfolio_message.rs
index 58209fe64..b08de4830 100644
--- a/editor/src/messages/portfolio/portfolio_message.rs
+++ b/editor/src/messages/portfolio/portfolio_message.rs
@@ -109,6 +109,7 @@ pub enum PortfolioMessage {
 		parent_and_insert_index: Option<(LayerNodeIdentifier, usize)>,
 	},
 	PrevDocument,
+	RequestWelcomeScreenButtonsLayout,
 	SetActivePanel {
 		panel: PanelType,
 	},
diff --git a/editor/src/messages/portfolio/portfolio_message_handler.rs b/editor/src/messages/portfolio/portfolio_message_handler.rs
index e770c9d61..05fcf1080 100644
--- a/editor/src/messages/portfolio/portfolio_message_handler.rs
+++ b/editor/src/messages/portfolio/portfolio_message_handler.rs
@@ -7,6 +7,7 @@ use crate::messages::animation::TimingInformation;
 use crate::messages::debug::utility_types::MessageLoggingVerbosity;
 use crate::messages::dialog::simple_dialogs;
 use crate::messages::frontend::utility_types::{DocumentDetails, OpenDocument};
+use crate::messages::input_mapper::utility_types::macros::action_shortcut;
 use crate::messages::layout::utility_types::widget_prelude::*;
 use crate::messages::portfolio::document::DocumentMessageContext;
 use crate::messages::portfolio::document::graph_operation::utility_types::TransformIn;
@@ -20,7 +21,7 @@ use crate::messages::preferences::SelectionMode;
 use crate::messages::prelude::*;
 use crate::messages::tool::common_functionality::graph_modification_utils;
 use crate::messages::tool::common_functionality::utility_functions::make_path_editable_is_allowed;
-use crate::messages::tool::utility_types::{HintData, HintGroup, ToolType};
+use crate::messages::tool::utility_types::{HintData, ToolType};
 use crate::messages::viewport::ToPhysical;
 use crate::node_graph_executor::{ExportConfig, NodeGraphExecutor};
 use derivative::*;
@@ -218,8 +219,7 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageContext<'_>> for Portfolio
 					responses.add(PropertiesPanelMessage::Clear);
 					responses.add(DocumentMessage::ClearLayersPanel);
 					responses.add(DataPanelMessage::ClearLayout);
-					let hint_data = HintData(vec![HintGroup(vec![])]);
-					responses.add(FrontendMessage::UpdateInputHints { hint_data });
+					HintData::clear_layout(responses);
 				}
 
 				for document_id in &self.document_ids {
@@ -243,8 +243,7 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageContext<'_>> for Portfolio
 					responses.add(PropertiesPanelMessage::Clear);
 					responses.add(DocumentMessage::ClearLayersPanel);
 					responses.add(DataPanelMessage::ClearLayout);
-					let hint_data = HintData(vec![HintGroup(vec![])]);
-					responses.add(FrontendMessage::UpdateInputHints { hint_data });
+					HintData::clear_layout(responses);
 				}
 
 				// Actually delete the document (delay to delete document is required to let the document and properties panel messages above get processed)
@@ -882,6 +881,53 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageContext<'_>> for Portfolio
 					responses.add(PortfolioMessage::SelectDocument { document_id: prev_id });
 				}
 			}
+			PortfolioMessage::RequestWelcomeScreenButtonsLayout => {
+				let donate = "https://graphite.rs/donate/";
+
+				let table = LayoutGroup::Table {
+					unstyled: true,
+					rows: vec![
+						vec![
+							TextButton::new("New Document")
+								.icon(Some("File".into()))
+								.flush(true)
+								.on_commit(|_| DialogMessage::RequestNewDocumentDialog.into())
+								.widget_holder(),
+							ShortcutLabel::new(action_shortcut!(DialogMessageDiscriminant::RequestNewDocumentDialog)).widget_holder(),
+						],
+						vec![
+							TextButton::new("Open Document")
+								.icon(Some("Folder".into()))
+								.flush(true)
+								.on_commit(|_| PortfolioMessage::OpenDocument.into())
+								.widget_holder(),
+							ShortcutLabel::new(action_shortcut!(PortfolioMessageDiscriminant::OpenDocument)).widget_holder(),
+						],
+						vec![
+							TextButton::new("Open Demo Artwork")
+								.icon(Some("Image".into()))
+								.flush(true)
+								.on_commit(|_| DialogMessage::RequestDemoArtworkDialog.into())
+								.widget_holder(),
+						],
+						vec![
+							TextButton::new("Support the Development Fund")
+								.icon(Some("Heart".into()))
+								.flush(true)
+								.on_commit(move |_| FrontendMessage::TriggerVisitLink { url: donate.to_string() }.into())
+								.widget_holder(),
+						],
+					],
+				};
+
+				responses.add(LayoutMessage::DestroyLayout {
+					layout_target: LayoutTarget::WelcomeScreenButtons,
+				});
+				responses.add(LayoutMessage::SendLayout {
+					layout: Layout::WidgetLayout(WidgetLayout::new(vec![table])),
+					layout_target: LayoutTarget::WelcomeScreenButtons,
+				});
+			}
 			PortfolioMessage::SetActivePanel { panel } => {
 				self.active_panel = panel;
 				responses.add(DocumentMessage::SetActivePanel { active_panel: self.active_panel });
diff --git a/editor/src/messages/portfolio/utility_types.rs b/editor/src/messages/portfolio/utility_types.rs
index 3edc26d9e..4bcdd56de 100644
--- a/editor/src/messages/portfolio/utility_types.rs
+++ b/editor/src/messages/portfolio/utility_types.rs
@@ -41,6 +41,7 @@ pub enum KeyboardPlatformLayout {
 pub enum PanelType {
 	#[default]
 	Document,
+	Welcome,
 	Layers,
 	Properties,
 	DataPanel,
@@ -50,6 +51,7 @@ impl From<String> for PanelType {
 	fn from(value: String) -> Self {
 		match value.as_str() {
 			"Document" => PanelType::Document,
+			"Welcome" => PanelType::Welcome,
 			"Layers" => PanelType::Layers,
 			"Properties" => PanelType::Properties,
 			"Data" => PanelType::DataPanel,
diff --git a/editor/src/messages/tool/tool_message_handler.rs b/editor/src/messages/tool/tool_message_handler.rs
index 2b336eb57..f9516d933 100644
--- a/editor/src/messages/tool/tool_message_handler.rs
+++ b/editor/src/messages/tool/tool_message_handler.rs
@@ -7,7 +7,7 @@ use crate::messages::portfolio::document::overlays::utility_types::OverlayProvid
 use crate::messages::portfolio::utility_types::PersistentData;
 use crate::messages::prelude::*;
 use crate::messages::tool::transform_layer::transform_layer_message_handler::TransformLayerMessageContext;
-use crate::messages::tool::utility_types::ToolType;
+use crate::messages::tool::utility_types::{HintData, ToolType};
 use crate::node_graph_executor::NodeGraphExecutor;
 use graphene_std::raster::color::Color;
 
@@ -190,7 +190,7 @@ impl MessageHandler<ToolMessage, ToolMessageContext<'_>> for ToolMessageHandler
 
 				responses.add(OverlaysMessage::RemoveProvider { provider: ARTBOARD_OVERLAY_PROVIDER });
 
-				responses.add(FrontendMessage::UpdateInputHints { hint_data: Default::default() });
+				HintData::clear_layout(responses);
 				responses.add(FrontendMessage::UpdateMouseCursor { cursor: Default::default() });
 
 				self.tool_is_active = false;
diff --git a/editor/src/messages/tool/tool_messages/artboard_tool.rs b/editor/src/messages/tool/tool_messages/artboard_tool.rs
index 6dfebafda..7289d6814 100644
--- a/editor/src/messages/tool/tool_messages/artboard_tool.rs
+++ b/editor/src/messages/tool/tool_messages/artboard_tool.rs
@@ -601,7 +601,7 @@ impl Fsm for ArtboardToolFsmState {
 			]),
 		};
 
-		responses.add(FrontendMessage::UpdateInputHints { hint_data });
+		hint_data.send_layout(responses);
 	}
 
 	fn update_cursor(&self, responses: &mut VecDeque<Message>) {
diff --git a/editor/src/messages/tool/tool_messages/brush_tool.rs b/editor/src/messages/tool/tool_messages/brush_tool.rs
index d08703274..c3200d7ce 100644
--- a/editor/src/messages/tool/tool_messages/brush_tool.rs
+++ b/editor/src/messages/tool/tool_messages/brush_tool.rs
@@ -464,7 +464,7 @@ impl Fsm for BrushToolFsmState {
 			BrushToolFsmState::Drawing => HintData(vec![HintGroup(vec![HintInfo::mouse(MouseMotion::Rmb, ""), HintInfo::keys([Key::Escape], "Cancel").prepend_slash()])]),
 		};
 
-		responses.add(FrontendMessage::UpdateInputHints { hint_data });
+		hint_data.send_layout(responses);
 	}
 
 	fn update_cursor(&self, responses: &mut VecDeque<Message>) {
diff --git a/editor/src/messages/tool/tool_messages/eyedropper_tool.rs b/editor/src/messages/tool/tool_messages/eyedropper_tool.rs
index d1b9e4053..3ff5f3748 100644
--- a/editor/src/messages/tool/tool_messages/eyedropper_tool.rs
+++ b/editor/src/messages/tool/tool_messages/eyedropper_tool.rs
@@ -138,7 +138,7 @@ impl Fsm for EyedropperToolFsmState {
 			}
 		};
 
-		responses.add(FrontendMessage::UpdateInputHints { hint_data });
+		hint_data.send_layout(responses);
 	}
 
 	fn update_cursor(&self, responses: &mut VecDeque<Message>) {
diff --git a/editor/src/messages/tool/tool_messages/fill_tool.rs b/editor/src/messages/tool/tool_messages/fill_tool.rs
index 86e64a53d..f32b07b94 100644
--- a/editor/src/messages/tool/tool_messages/fill_tool.rs
+++ b/editor/src/messages/tool/tool_messages/fill_tool.rs
@@ -158,7 +158,7 @@ impl Fsm for FillToolFsmState {
 			FillToolFsmState::Filling => HintData(vec![HintGroup(vec![HintInfo::mouse(MouseMotion::Rmb, ""), HintInfo::keys([Key::Escape], "Cancel").prepend_slash()])]),
 		};
 
-		responses.add(FrontendMessage::UpdateInputHints { hint_data });
+		hint_data.send_layout(responses);
 	}
 
 	fn update_cursor(&self, responses: &mut VecDeque<Message>) {
diff --git a/editor/src/messages/tool/tool_messages/freehand_tool.rs b/editor/src/messages/tool/tool_messages/freehand_tool.rs
index 8db8a4dbf..102946812 100644
--- a/editor/src/messages/tool/tool_messages/freehand_tool.rs
+++ b/editor/src/messages/tool/tool_messages/freehand_tool.rs
@@ -346,7 +346,7 @@ impl Fsm for FreehandToolFsmState {
 			FreehandToolFsmState::Drawing => HintData(vec![HintGroup(vec![HintInfo::mouse(MouseMotion::Rmb, ""), HintInfo::keys([Key::Escape], "Cancel").prepend_slash()])]),
 		};
 
-		responses.add(FrontendMessage::UpdateInputHints { hint_data });
+		hint_data.send_layout(responses);
 	}
 
 	fn update_cursor(&self, responses: &mut VecDeque<Message>) {
diff --git a/editor/src/messages/tool/tool_messages/gradient_tool.rs b/editor/src/messages/tool/tool_messages/gradient_tool.rs
index bea5eaebb..d5d2c9e70 100644
--- a/editor/src/messages/tool/tool_messages/gradient_tool.rs
+++ b/editor/src/messages/tool/tool_messages/gradient_tool.rs
@@ -530,7 +530,7 @@ impl Fsm for GradientToolFsmState {
 			]),
 		};
 
-		responses.add(FrontendMessage::UpdateInputHints { hint_data });
+		hint_data.send_layout(responses);
 	}
 
 	fn update_cursor(&self, responses: &mut VecDeque<Message>) {
diff --git a/editor/src/messages/tool/tool_messages/navigate_tool.rs b/editor/src/messages/tool/tool_messages/navigate_tool.rs
index ed50348ea..0f997a84d 100644
--- a/editor/src/messages/tool/tool_messages/navigate_tool.rs
+++ b/editor/src/messages/tool/tool_messages/navigate_tool.rs
@@ -166,7 +166,7 @@ impl Fsm for NavigateToolFsmState {
 			]),
 		};
 
-		responses.add(FrontendMessage::UpdateInputHints { hint_data });
+		hint_data.send_layout(responses);
 	}
 
 	fn update_cursor(&self, responses: &mut VecDeque<Message>) {
diff --git a/editor/src/messages/tool/tool_messages/path_tool.rs b/editor/src/messages/tool/tool_messages/path_tool.rs
index cc59f6db8..59d18ebcd 100644
--- a/editor/src/messages/tool/tool_messages/path_tool.rs
+++ b/editor/src/messages/tool/tool_messages/path_tool.rs
@@ -4,7 +4,7 @@ use crate::consts::{
 	COLOR_OVERLAY_BLUE, COLOR_OVERLAY_GRAY, COLOR_OVERLAY_GREEN, COLOR_OVERLAY_RED, DEFAULT_STROKE_WIDTH, DOUBLE_CLICK_MILLISECONDS, DRAG_DIRECTION_MODE_DETERMINATION_THRESHOLD, DRAG_THRESHOLD,
 	DRILL_THROUGH_THRESHOLD, HANDLE_ROTATE_SNAP_ANGLE, SEGMENT_INSERTION_DISTANCE, SEGMENT_OVERLAY_SIZE, SELECTION_THRESHOLD, SELECTION_TOLERANCE,
 };
-use crate::messages::input_mapper::utility_types::input_keyboard::KeysGroup;
+use crate::messages::input_mapper::utility_types::macros::action_shortcut_manual;
 use crate::messages::portfolio::document::graph_operation::utility_types::TransformIn;
 use crate::messages::portfolio::document::node_graph::document_node_definitions::resolve_document_node_type;
 use crate::messages::portfolio::document::overlays::utility_functions::{path_overlays, selected_segments};
@@ -270,7 +270,7 @@ impl LayoutHolder for PathTool {
 			.icon("Dot")
 			.tooltip_label("Point Editing Mode")
 			.tooltip_description("To multi-select modes, perform the shortcut shown.")
-			.tooltip_shortcut(KeysGroup(vec![Key::Shift, Key::MouseLeft]).to_string())
+			.tooltip_shortcut(action_shortcut_manual!(Key::Shift, Key::MouseLeft))
 			.on_update(|_| PathToolMessage::TogglePointEditing.into())
 			.widget_holder();
 		let segment_editing_mode = CheckboxInput::new(self.options.path_editing_mode.segment_editing_mode)
@@ -278,7 +278,7 @@ impl LayoutHolder for PathTool {
 			.icon("Remove")
 			.tooltip_label("Segment Editing Mode")
 			.tooltip_description("To multi-select modes, perform the shortcut shown.")
-			.tooltip_shortcut(KeysGroup(vec![Key::Shift, Key::MouseLeft]).to_string())
+			.tooltip_shortcut(action_shortcut_manual!(Key::Shift, Key::MouseLeft))
 			.on_update(|_| PathToolMessage::ToggleSegmentEditing.into())
 			.widget_holder();
 
@@ -3589,5 +3589,5 @@ fn update_dynamic_hints(
 		]),
 		PathToolFsmState::SlidingPoint => HintData(vec![HintGroup(vec![HintInfo::mouse(MouseMotion::Rmb, ""), HintInfo::keys([Key::Escape], "Cancel").prepend_slash()])]),
 	};
-	responses.add(FrontendMessage::UpdateInputHints { hint_data });
+	hint_data.send_layout(responses);
 }
diff --git a/editor/src/messages/tool/tool_messages/pen_tool.rs b/editor/src/messages/tool/tool_messages/pen_tool.rs
index bcc80fdea..4089f1342 100644
--- a/editor/src/messages/tool/tool_messages/pen_tool.rs
+++ b/editor/src/messages/tool/tool_messages/pen_tool.rs
@@ -2288,7 +2288,7 @@ impl Fsm for PenToolFsmState {
 			}
 		};
 
-		responses.add(FrontendMessage::UpdateInputHints { hint_data });
+		hint_data.send_layout(responses);
 	}
 
 	fn update_cursor(&self, responses: &mut VecDeque<Message>) {
diff --git a/editor/src/messages/tool/tool_messages/select_tool.rs b/editor/src/messages/tool/tool_messages/select_tool.rs
index abe887d13..0787e36aa 100644
--- a/editor/src/messages/tool/tool_messages/select_tool.rs
+++ b/editor/src/messages/tool/tool_messages/select_tool.rs
@@ -1728,7 +1728,7 @@ impl Fsm for SelectToolFsmState {
 						HintInfo::keys([Key::Control, Key::KeyD], "Duplicate").add_mac_keys([Key::Command, Key::KeyD]),
 					]),
 				]);
-				responses.add(FrontendMessage::UpdateInputHints { hint_data });
+				hint_data.send_layout(responses);
 			}
 			SelectToolFsmState::Dragging { axis, using_compass, has_dragged, .. } if *has_dragged => {
 				let mut hint_data = vec![
@@ -1743,7 +1743,7 @@ impl Fsm for SelectToolFsmState {
 					hint_data.push(HintGroup(vec![HintInfo::keys([Key::Shift], "Constrain to Axis")]));
 				};
 				let hint_data = HintData(hint_data);
-				responses.add(FrontendMessage::UpdateInputHints { hint_data });
+				hint_data.send_layout(responses);
 			}
 			SelectToolFsmState::Drawing { has_drawn, .. } if *has_drawn => {
 				let hint_data = HintData(vec![
@@ -1753,7 +1753,7 @@ impl Fsm for SelectToolFsmState {
 					// TODO: (See https://discord.com/channels/731730685944922173/1216976541947531264/1321360311298818048)
 					// HintGroup(vec![HintInfo::keys([Key::Shift], "Extend")])
 				]);
-				responses.add(FrontendMessage::UpdateInputHints { hint_data });
+				hint_data.send_layout(responses);
 			}
 			SelectToolFsmState::Drawing { .. } | SelectToolFsmState::Dragging { .. } => {}
 			SelectToolFsmState::ResizingBounds => {
@@ -1761,25 +1761,25 @@ impl Fsm for SelectToolFsmState {
 					HintGroup(vec![HintInfo::mouse(MouseMotion::Rmb, ""), HintInfo::keys([Key::Escape], "Cancel").prepend_slash()]),
 					HintGroup(vec![HintInfo::keys([Key::Alt], "From Pivot"), HintInfo::keys([Key::Shift], "Preserve Aspect Ratio")]),
 				]);
-				responses.add(FrontendMessage::UpdateInputHints { hint_data });
+				hint_data.send_layout(responses);
 			}
 			SelectToolFsmState::RotatingBounds => {
 				let hint_data = HintData(vec![
 					HintGroup(vec![HintInfo::mouse(MouseMotion::Rmb, ""), HintInfo::keys([Key::Escape], "Cancel").prepend_slash()]),
 					HintGroup(vec![HintInfo::keys([Key::Shift], "15° Increments")]),
 				]);
-				responses.add(FrontendMessage::UpdateInputHints { hint_data });
+				hint_data.send_layout(responses);
 			}
 			SelectToolFsmState::SkewingBounds { .. } => {
 				let hint_data = HintData(vec![
 					HintGroup(vec![HintInfo::mouse(MouseMotion::Rmb, ""), HintInfo::keys([Key::Escape], "Cancel").prepend_slash()]),
 					HintGroup(vec![HintInfo::keys([Key::Control], "Unlock Slide")]),
 				]);
-				responses.add(FrontendMessage::UpdateInputHints { hint_data });
+				hint_data.send_layout(responses);
 			}
 			SelectToolFsmState::DraggingPivot => {
 				let hint_data = HintData(vec![HintGroup(vec![HintInfo::mouse(MouseMotion::Rmb, ""), HintInfo::keys([Key::Escape], "Cancel").prepend_slash()])]);
-				responses.add(FrontendMessage::UpdateInputHints { hint_data });
+				hint_data.send_layout(responses);
 			}
 		}
 	}
diff --git a/editor/src/messages/tool/tool_messages/shape_tool.rs b/editor/src/messages/tool/tool_messages/shape_tool.rs
index 11a73809d..bfe41e213 100644
--- a/editor/src/messages/tool/tool_messages/shape_tool.rs
+++ b/editor/src/messages/tool/tool_messages/shape_tool.rs
@@ -1187,5 +1187,5 @@ fn update_dynamic_hints(state: &ShapeToolFsmState, responses: &mut VecDeque<Mess
 		]),
 		ShapeToolFsmState::ModifyingGizmo => HintData(vec![HintGroup(vec![HintInfo::mouse(MouseMotion::Rmb, ""), HintInfo::keys([Key::Escape], "Cancel").prepend_slash()])]),
 	};
-	responses.add(FrontendMessage::UpdateInputHints { hint_data });
+	hint_data.send_layout(responses);
 }
diff --git a/editor/src/messages/tool/tool_messages/spline_tool.rs b/editor/src/messages/tool/tool_messages/spline_tool.rs
index 86252d408..18aca9588 100644
--- a/editor/src/messages/tool/tool_messages/spline_tool.rs
+++ b/editor/src/messages/tool/tool_messages/spline_tool.rs
@@ -503,7 +503,7 @@ impl Fsm for SplineToolFsmState {
 			SplineToolFsmState::MergingEndpoints => HintData(vec![]),
 		};
 
-		responses.add(FrontendMessage::UpdateInputHints { hint_data });
+		hint_data.send_layout(responses);
 	}
 
 	fn update_cursor(&self, responses: &mut VecDeque<Message>) {
diff --git a/editor/src/messages/tool/tool_messages/text_tool.rs b/editor/src/messages/tool/tool_messages/text_tool.rs
index 8fd21543d..070db2c96 100644
--- a/editor/src/messages/tool/tool_messages/text_tool.rs
+++ b/editor/src/messages/tool/tool_messages/text_tool.rs
@@ -939,7 +939,7 @@ impl Fsm for TextToolFsmState {
 			]),
 		};
 
-		responses.add(FrontendMessage::UpdateInputHints { hint_data });
+		hint_data.send_layout(responses);
 	}
 
 	fn update_cursor(&self, responses: &mut VecDeque<Message>) {
diff --git a/editor/src/messages/tool/utility_types.rs b/editor/src/messages/tool/utility_types.rs
index b0f26be3d..c07758404 100644
--- a/editor/src/messages/tool/utility_types.rs
+++ b/editor/src/messages/tool/utility_types.rs
@@ -4,9 +4,9 @@ use super::common_functionality::shape_editor::ShapeState;
 use super::tool_messages::*;
 use crate::messages::broadcast::BroadcastMessage;
 use crate::messages::broadcast::event::EventMessage;
-use crate::messages::input_mapper::utility_types::input_keyboard::{Key, KeysGroup, LayoutKeysGroup, MouseMotion};
-use crate::messages::input_mapper::utility_types::macros::action_keys;
-use crate::messages::input_mapper::utility_types::misc::ActionKeys;
+use crate::messages::input_mapper::utility_types::input_keyboard::{Key, KeysGroup, LabeledKeyOrMouseMotion, LabeledShortcut, MouseMotion};
+use crate::messages::input_mapper::utility_types::macros::{action_shortcut, action_shortcut_manual};
+use crate::messages::input_mapper::utility_types::misc::ActionShortcut;
 use crate::messages::layout::utility_types::widget_prelude::*;
 use crate::messages::portfolio::document::overlays::utility_types::OverlayProvider;
 use crate::messages::preferences::PreferencesMessageHandler;
@@ -125,12 +125,12 @@ impl DocumentToolData {
 				widgets: vec![
 					IconButton::new("SwapVertical", 16)
 						.tooltip_label("Swap")
-						.shortcut_keys(action_keys!(ToolMessageDiscriminant::SwapColors))
+						.tooltip_shortcut(action_shortcut!(ToolMessageDiscriminant::SwapColors))
 						.on_update(|_| ToolMessage::SwapColors.into())
 						.widget_holder(),
 					IconButton::new("WorkingColors", 16)
 						.tooltip_label("Reset")
-						.shortcut_keys(action_keys!(ToolMessageDiscriminant::ResetColors))
+						.tooltip_shortcut(action_shortcut!(ToolMessageDiscriminant::ResetColors))
 						.on_update(|_| ToolMessage::ResetColors.into())
 						.widget_holder(),
 				],
@@ -245,12 +245,12 @@ impl LayoutHolder for ToolData {
 							ToolAvailability::Available(tool) =>
 								ToolEntry::new(tool.tool_type(), tool.icon_name())
 									.tooltip_label(tool.tooltip_label())
-									.shortcut_keys(action_keys!(tool_type_to_activate_tool_message(tool.tool_type()))),
+									.tooltip_shortcut(action_shortcut!(tool_type_to_activate_tool_message(tool.tool_type()))),
 							ToolAvailability::AvailableAsShape(shape) =>
 								ToolEntry::new(shape.tool_type(), shape.icon_name())
 									.tooltip_label(shape.tooltip_label())
 									.tooltip_description(shape.tooltip_description())
-									.shortcut_keys(action_keys!(tool_type_to_activate_tool_message(shape.tool_type()))),
+									.tooltip_shortcut(action_shortcut!(tool_type_to_activate_tool_message(shape.tool_type()))),
 							ToolAvailability::ComingSoon(tool) => tool.clone(),
 						}
 					})
@@ -258,7 +258,7 @@ impl LayoutHolder for ToolData {
 			)
 			.flat_map(|group| {
 				let separator = std::iter::once(Separator::new(SeparatorType::Section).direction(SeparatorDirection::Vertical).widget_holder());
-				let buttons = group.into_iter().map(|ToolEntry { tooltip_label, tooltip_description, tooltip_shortcut, shortcut_keys, tool_type, icon_name }| {
+				let buttons = group.into_iter().map(|ToolEntry { tooltip_label, tooltip_description, tooltip_shortcut, tool_type, icon_name }| {
 					let coming_soon = tooltip_description.contains("Coming soon.");
 
 					IconButton::new(icon_name, 32)
@@ -270,7 +270,6 @@ impl LayoutHolder for ToolData {
 						.tooltip_label(tooltip_label.clone())
 						.tooltip_description(tooltip_description)
 						.tooltip_shortcut(tooltip_shortcut)
-						.shortcut_keys(shortcut_keys)
 						.on_update(move |_| {
 							match tool_type {
 								ToolType::Line => ToolMessage::ActivateToolShapeLine.into(),
@@ -306,8 +305,7 @@ pub struct ToolEntry {
 	pub icon_name: String,
 	pub tooltip_label: String,
 	pub tooltip_description: String,
-	pub tooltip_shortcut: String,
-	pub shortcut_keys: Option<ActionKeys>,
+	pub tooltip_shortcut: Option<ActionShortcut>,
 }
 
 #[derive(Debug)]
@@ -429,26 +427,26 @@ fn list_tools_in_groups() -> Vec<Vec<ToolAvailability>> {
 				ToolEntry::new(ToolType::Heal, "RasterHealTool")
 					.tooltip_label("Heal Tool")
 					.tooltip_description("Coming soon.")
-					.tooltip_shortcut(Key::KeyJ.to_string()),
+					.tooltip_shortcut(action_shortcut_manual!(Key::KeyJ)),
 			),
 			ToolAvailability::ComingSoon(
 				ToolEntry::new(ToolType::Clone, "RasterCloneTool")
 					.tooltip_label("Clone Tool")
 					.tooltip_description("Coming soon.")
-					.tooltip_shortcut(Key::KeyC.to_string()),
+					.tooltip_shortcut(action_shortcut_manual!(Key::KeyC)),
 			),
 			ToolAvailability::ComingSoon(ToolEntry::new(ToolType::Patch, "RasterPatchTool").tooltip_label("Patch Tool").tooltip_description("Coming soon.")),
 			ToolAvailability::ComingSoon(
 				ToolEntry::new(ToolType::Detail, "RasterDetailTool")
 					.tooltip_label("Detail Tool")
 					.tooltip_description("Coming soon.")
-					.tooltip_shortcut(Key::KeyD.to_string()),
+					.tooltip_shortcut(action_shortcut_manual!(Key::KeyD)),
 			),
 			ToolAvailability::ComingSoon(
 				ToolEntry::new(ToolType::Relight, "RasterRelightTool")
 					.tooltip_label("Relight Tool")
 					.tooltip_description("Coming soon.")
-					.tooltip_shortcut(Key::KeyO.to_string()),
+					.tooltip_shortcut(action_shortcut_manual!(Key::KeyO)),
 			),
 		],
 	]
@@ -518,6 +516,55 @@ pub fn tool_type_to_activate_tool_message(tool_type: ToolType) -> ToolMessageDis
 #[derive(Debug, Default, Clone, PartialEq, Eq, serde::Serialize, serde::Deserialize, specta::Type)]
 pub struct HintData(pub Vec<HintGroup>);
 
+impl HintData {
+	pub fn to_layout(&self) -> Layout {
+		let mut widgets = Vec::new();
+
+		for (index, hint_group) in self.0.iter().enumerate() {
+			if index > 0 {
+				widgets.push(Separator::new(SeparatorType::Section).widget_holder());
+			}
+			for hint in &hint_group.0 {
+				if hint.plus {
+					widgets.push(TextLabel::new("+").bold(true).widget_holder());
+				}
+				if hint.slash {
+					widgets.push(TextLabel::new("/").bold(true).widget_holder());
+				}
+
+				for shortcut in &hint.key_groups {
+					widgets.push(ShortcutLabel::new(Some(ActionShortcut::Shortcut(shortcut.clone()))).widget_holder());
+				}
+				if let Some(mouse_movement) = &hint.mouse {
+					let mouse_movement = LabeledShortcut(vec![LabeledKeyOrMouseMotion::MouseMotion(mouse_movement.clone())]);
+					let shortcut = ActionShortcut::Shortcut(mouse_movement);
+					widgets.push(ShortcutLabel::new(Some(shortcut)).widget_holder());
+				}
+
+				if !hint.label.is_empty() {
+					widgets.push(TextLabel::new(hint.label.clone()).widget_holder());
+				}
+			}
+		}
+
+		Layout::WidgetLayout(WidgetLayout::new(vec![LayoutGroup::Row { widgets }]))
+	}
+
+	pub fn send_layout(&self, responses: &mut VecDeque<Message>) {
+		responses.add(LayoutMessage::SendLayout {
+			layout: self.to_layout(),
+			layout_target: LayoutTarget::StatusBarHints,
+		});
+	}
+
+	pub fn clear_layout(responses: &mut VecDeque<Message>) {
+		responses.add(LayoutMessage::SendLayout {
+			layout: Layout::WidgetLayout(WidgetLayout::new(vec![])),
+			layout_target: LayoutTarget::StatusBarHints,
+		});
+	}
+}
+
 #[derive(Debug, Clone, PartialEq, Eq, serde::Serialize, serde::Deserialize, specta::Type)]
 pub struct HintGroup(pub Vec<HintInfo>);
 
@@ -526,10 +573,10 @@ pub struct HintInfo {
 	/// A `KeysGroup` specifies all the keys pressed simultaneously to perform an action (like "Ctrl C" to copy).
 	/// Usually at most one is given, but less commonly, multiple can be used to describe additional hotkeys not used simultaneously (like the four different arrow keys to nudge a layer).
 	#[serde(rename = "keyGroups")]
-	pub key_groups: Vec<LayoutKeysGroup>,
+	pub key_groups: Vec<LabeledShortcut>,
 	/// `None` means that the regular `key_groups` should be used for all platforms, `Some` is an override for a Mac-only input hint.
 	#[serde(rename = "keyGroupsMac")]
-	pub key_groups_mac: Option<Vec<LayoutKeysGroup>>,
+	pub key_groups_mac: Option<Vec<LabeledShortcut>>,
 	/// An optional `MouseMotion` that can indicate the mouse action, like which mouse button is used and whether a drag occurs.
 	/// No such icon is shown if `None` is given, and it can be combined with `key_groups` if desired.
 	pub mouse: Option<MouseMotion>,
diff --git a/frontend/src/components/floating-menus/MenuList.svelte b/frontend/src/components/floating-menus/MenuList.svelte
index 1c6bada74..6c1f84717 100644
--- a/frontend/src/components/floating-menus/MenuList.svelte
+++ b/frontend/src/components/floating-menus/MenuList.svelte
@@ -12,8 +12,8 @@
 	import TextInput from "@graphite/components/widgets/inputs/TextInput.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 	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 UserInputLabel from "@graphite/components/widgets/labels/UserInputLabel.svelte";
 
 	let self: FloatingMenu | undefined;
 	let scroller: LayoutCol | undefined;
@@ -447,8 +447,8 @@
 
 					<TextLabel class="entry-label" styles={{ "font-family": `${!entry.font ? "inherit" : entry.value}` }}>{entry.label}</TextLabel>
 
-					{#if entry.shortcutKeys?.keys.length}
-						<UserInputLabel keysWithLabelsGroups={[entry.shortcutKeys.keys]} requiresLock={entry.shortcutRequiresLock} textOnly={true} />
+					{#if entry.tooltipShortcut?.shortcut.length}
+						<ShortcutLabel shortcut={entry.tooltipShortcut} />
 					{/if}
 
 					{#if entry.children?.length}
@@ -499,7 +499,7 @@
 				margin: 4px 0;
 
 				div {
-					background: var(--color-4-dimgray);
+					background: var(--color-3-darkgray);
 				}
 			}
 
@@ -535,7 +535,7 @@
 					margin: 0 4px;
 				}
 
-				.user-input-label {
+				.shortcut-label {
 					margin-left: 12px;
 				}
 
diff --git a/frontend/src/components/floating-menus/Tooltip.svelte b/frontend/src/components/floating-menus/Tooltip.svelte
index 520c25daf..5a9681c01 100644
--- a/frontend/src/components/floating-menus/Tooltip.svelte
+++ b/frontend/src/components/floating-menus/Tooltip.svelte
@@ -2,10 +2,12 @@
 	import { getContext } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
+	import type { LabeledShortcut } from "@graphite/messages";
 	import type { TooltipState } from "@graphite/state-providers/tooltip";
 
 	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import ShortcutLabel from "@graphite/components/widgets/labels/ShortcutLabel.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 
 	const tooltip = getContext<TooltipState>("tooltip");
@@ -15,7 +17,15 @@
 
 	$: label = filterTodo($tooltip.element?.getAttribute("data-tooltip-label")?.trim());
 	$: description = filterTodo($tooltip.element?.getAttribute("data-tooltip-description")?.trim());
-	$: shortcut = filterTodo($tooltip.element?.getAttribute("data-tooltip-shortcut")?.trim());
+	$: shortcutJSON = $tooltip.element?.getAttribute("data-tooltip-shortcut")?.trim();
+	$: shortcut = ((shortcutJSON) => {
+		if (!shortcutJSON) return undefined;
+		try {
+			return JSON.parse(shortcutJSON) as LabeledShortcut;
+		} catch {
+			return undefined;
+		}
+	})(shortcutJSON);
 
 	// TODO: Once all TODOs are replaced with real text, remove this function
 	function filterTodo(text: string | undefined): string | undefined {
@@ -24,8 +34,8 @@
 	}
 </script>
 
-<div class="tooltip" style:top={`${$tooltip.position.y}px`} style:left={`${$tooltip.position.x}px`}>
-	{#if label || description}
+{#if label || description}
+	<div class="tooltip" style:top={`${$tooltip.position.y}px`} style:left={`${$tooltip.position.x}px`}>
 		<FloatingMenu open={true} type="Tooltip" direction="Bottom" bind:this={self}>
 			{#if label || shortcut}
 				<LayoutRow class="tooltip-header">
@@ -33,7 +43,7 @@
 						<TextLabel class="tooltip-label">{label}</TextLabel>
 					{/if}
 					{#if shortcut}
-						<TextLabel class="tooltip-shortcut">{shortcut}</TextLabel>
+						<ShortcutLabel shortcut={{ shortcut }} />
 					{/if}
 				</LayoutRow>
 			{/if}
@@ -41,8 +51,8 @@
 				<TextLabel class="tooltip-description">{description}</TextLabel>
 			{/if}
 		</FloatingMenu>
-	{/if}
-</div>
+	</div>
+{/if}
 
 <style lang="scss" global>
 	.tooltip {
@@ -62,17 +72,10 @@
 				white-space: pre-wrap;
 			}
 
-			.text-label + .tooltip-shortcut {
+			.text-label + .shortcut-label {
 				margin-left: 8px;
 			}
 
-			.tooltip-shortcut {
-				color: var(--color-b-lightgray);
-				background: var(--color-3-darkgray);
-				padding: 0 4px;
-				border-radius: 4px;
-			}
-
 			.tooltip-description {
 				color: var(--color-b-lightgray);
 			}
diff --git a/frontend/src/components/layout/FloatingMenu.svelte b/frontend/src/components/layout/FloatingMenu.svelte
index ed857f332..bc6112dc6 100644
--- a/frontend/src/components/layout/FloatingMenu.svelte
+++ b/frontend/src/components/layout/FloatingMenu.svelte
@@ -519,7 +519,7 @@
 			.floating-menu-content {
 				background: var(--color-2-mildblack);
 				box-shadow: rgba(var(--color-0-black-rgb), 0.5) 0 2px 4px;
-				border: 1px solid var(--color-4-dimgray);
+				border: 1px solid var(--color-3-darkgray);
 				border-radius: 4px;
 				color: var(--color-e-nearwhite);
 				font-size: inherit;
@@ -615,7 +615,7 @@
 		&.top .tail,
 		&.topleft .tail,
 		&.topright .tail {
-			border-color: var(--color-4-dimgray) transparent transparent transparent;
+			border-color: var(--color-3-darkgray) transparent transparent transparent;
 
 			&::before {
 				border-color: var(--color-2-mildblack) transparent transparent transparent;
@@ -633,7 +633,7 @@
 		&.bottom .tail,
 		&.bottomleft .tail,
 		&.bottomright .tail {
-			border-color: transparent transparent var(--color-4-dimgray) transparent;
+			border-color: transparent transparent var(--color-3-darkgray) transparent;
 
 			&::before {
 				border-color: transparent transparent var(--color-2-mildblack) transparent;
@@ -649,7 +649,7 @@
 		}
 
 		&.left .tail {
-			border-color: transparent transparent transparent var(--color-4-dimgray);
+			border-color: transparent transparent transparent var(--color-3-darkgray);
 
 			&::before {
 				border-color: transparent transparent transparent var(--color-2-mildblack);
@@ -665,7 +665,7 @@
 		}
 
 		&.right .tail {
-			border-color: transparent var(--color-4-dimgray) transparent transparent;
+			border-color: transparent var(--color-3-darkgray) transparent transparent;
 
 			&::before {
 				border-color: transparent var(--color-2-mildblack) transparent transparent;
diff --git a/frontend/src/components/layout/LayoutCol.svelte b/frontend/src/components/layout/LayoutCol.svelte
index cb5876132..b10f462ef 100644
--- a/frontend/src/components/layout/LayoutCol.svelte
+++ b/frontend/src/components/layout/LayoutCol.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import type { ActionShortcut } from "@graphite/messages";
+
 	let className = "";
 	export { className as class };
 	export let classes: Record<string, boolean> = {};
@@ -7,7 +9,7 @@
 	export let styles: Record<string, string | number | undefined> = {};
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
-	export let tooltipShortcut: string | undefined = undefined;
+	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 	// TODO: Add middle-click drag scrolling
 	export let scrollableX = false;
 	export let scrollableY = false;
@@ -30,7 +32,7 @@
 <div
 	data-tooltip-label={tooltipLabel}
 	data-tooltip-description={tooltipDescription}
-	data-tooltip-shortcut={tooltipShortcut}
+	data-tooltip-shortcut={tooltipShortcut?.shortcut ? JSON.stringify(tooltipShortcut.shortcut) : undefined}
 	data-scrollable-x={scrollableX ? "" : undefined}
 	data-scrollable-y={scrollableY ? "" : undefined}
 	class={`layout-col ${className} ${extraClasses}`.trim()}
diff --git a/frontend/src/components/layout/LayoutRow.svelte b/frontend/src/components/layout/LayoutRow.svelte
index 0c34bdb0a..57ab106cf 100644
--- a/frontend/src/components/layout/LayoutRow.svelte
+++ b/frontend/src/components/layout/LayoutRow.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import type { ActionShortcut } from "@graphite/messages";
+
 	let className = "";
 	export { className as class };
 	export let classes: Record<string, boolean> = {};
@@ -7,7 +9,7 @@
 	export let styles: Record<string, string | number | undefined> = {};
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
-	export let tooltipShortcut: string | undefined = undefined;
+	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 	// TODO: Add middle-click drag scrolling
 	export let scrollableX = false;
 	export let scrollableY = false;
@@ -30,7 +32,7 @@
 <div
 	data-tooltip-label={tooltipLabel}
 	data-tooltip-description={tooltipDescription}
-	data-tooltip-shortcut={tooltipShortcut}
+	data-tooltip-shortcut={tooltipShortcut?.shortcut ? JSON.stringify(tooltipShortcut.shortcut) : undefined}
 	data-scrollable-x={scrollableX ? "" : undefined}
 	data-scrollable-y={scrollableY ? "" : undefined}
 	class={`layout-row ${className} ${extraClasses}`.trim()}
diff --git a/frontend/src/components/panels/Layers.svelte b/frontend/src/components/panels/Layers.svelte
index 6e34bf9dd..f3c25c666 100644
--- a/frontend/src/components/panels/Layers.svelte
+++ b/frontend/src/components/panels/Layers.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getContext, onMount, onDestroy, tick } from "svelte";
 
+	import { shortcutAltClick } from "@graphite/../wasm/pkg/graphite_wasm";
 	import type { Editor } from "@graphite/editor";
 	import {
 		defaultWidgetLayout,
@@ -11,7 +12,7 @@
 		UpdateLayersPanelControlBarRightLayout,
 		UpdateLayersPanelBottomBarLayout,
 	} from "@graphite/messages";
-	import type { DataBuffer, LayerPanelEntry } from "@graphite/messages";
+	import type { ActionShortcut, DataBuffer, LayerPanelEntry } from "@graphite/messages";
 	import type { NodeGraphState } from "@graphite/state-providers/node-graph";
 	import { operatingSystem } from "@graphite/utility-functions/platform";
 	import { extractPixelData } from "@graphite/utility-functions/rasterization";
@@ -73,6 +74,8 @@
 	let layersPanelControlBarRightLayout = defaultWidgetLayout();
 	let layersPanelBottomBarLayout = defaultWidgetLayout();
 
+	const altClickKeys: ActionShortcut = shortcutAltClick();
+
 	onMount(() => {
 		editor.subscriptions.subscribeJsMessage(UpdateLayersPanelControlBarLeftLayout, (updateLayersPanelControlBarLeftLayout) => {
 			patchWidgetLayout(layersPanelControlBarLeftLayout, updateLayersPanelControlBarLeftLayout);
@@ -622,7 +625,7 @@
 								? "Hide the layers nested within. (To affect all open descendants, perform the shortcut shown.)"
 								: "Show the layers nested within. (To affect all closed descendants, perform the shortcut shown.)") +
 								(listing.entry.ancestorOfSelected && !listing.entry.expanded ? "\n\nNote: a selected layer is currently contained within.\n" : "")}
-							data-tooltip-shortcut="Alt Click"
+							data-tooltip-shortcut={altClickKeys?.shortcut ? JSON.stringify(altClickKeys.shortcut) : undefined}
 							on:click={(e) => handleExpandArrowClickWithModifiers(e, listing.entry.id)}
 							tabindex="0"
 						></button>
@@ -634,7 +637,7 @@
 							icon="Clipped"
 							class="clipped-arrow"
 							tooltipDescription="Clipping mask is active. To release it, perform the shortcut on the layer border."
-							tooltipShortcut="Alt Click"
+							tooltipShortcut={altClickKeys}
 						/>
 					{/if}
 					<div class="thumbnail">
diff --git a/frontend/src/components/panels/Welcome.svelte b/frontend/src/components/panels/Welcome.svelte
new file mode 100644
index 000000000..10b2e1ade
--- /dev/null
+++ b/frontend/src/components/panels/Welcome.svelte
@@ -0,0 +1,141 @@
+<script lang="ts">
+	import { getContext, onMount, onDestroy } from "svelte";
+
+	import type { Editor } from "@graphite/editor";
+	import { defaultWidgetLayout, patchWidgetLayout, UpdateWelcomeScreenButtonsLayout } from "@graphite/messages";
+	import { extractPixelData } from "@graphite/utility-functions/rasterization";
+
+	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
+	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
+
+	const editor = getContext<Editor>("editor");
+
+	let welcomePanelButtonsLayout = defaultWidgetLayout();
+
+	onMount(() => {
+		editor.subscriptions.subscribeJsMessage(UpdateWelcomeScreenButtonsLayout, (updateWelcomeScreenButtonsLayout) => {
+			patchWidgetLayout(welcomePanelButtonsLayout, updateWelcomeScreenButtonsLayout);
+			welcomePanelButtonsLayout = welcomePanelButtonsLayout;
+		});
+
+		editor.handle.requestWelcomeScreenButtonsLayout();
+	});
+
+	onDestroy(() => {
+		editor.subscriptions.unsubscribeJsMessage(UpdateWelcomeScreenButtonsLayout);
+	});
+
+	function dropFile(e: DragEvent) {
+		if (!e.dataTransfer) return;
+
+		e.preventDefault();
+
+		Array.from(e.dataTransfer.items).forEach(async (item) => {
+			const file = item.getAsFile();
+			if (!file) return;
+
+			if (file.type.includes("svg")) {
+				const svgData = await file.text();
+				editor.handle.pasteSvg(file.name, svgData);
+				return;
+			}
+
+			if (file.type.startsWith("image")) {
+				const imageData = await extractPixelData(file);
+				editor.handle.pasteImage(file.name, new Uint8Array(imageData.data), imageData.width, imageData.height);
+				return;
+			}
+
+			const graphiteFileSuffix = "." + editor.handle.fileExtension();
+			if (file.name.endsWith(graphiteFileSuffix)) {
+				const content = await file.text();
+				const documentName = file.name.slice(0, -graphiteFileSuffix.length);
+				editor.handle.openDocumentFile(documentName, content);
+				return;
+			}
+		});
+	}
+</script>
+
+<LayoutCol class="welcome-panel" on:dragover={(e) => e.preventDefault()} on:drop={dropFile}>
+	<LayoutCol class="top-spacer"></LayoutCol>
+	<LayoutCol class="content-container">
+		<LayoutCol class="content">
+			<LayoutRow class="logotype">
+				<IconLabel icon="GraphiteLogotypeSolid" />
+			</LayoutRow>
+			<LayoutRow class="actions">
+				<WidgetLayout layout={welcomePanelButtonsLayout} />
+			</LayoutRow>
+		</LayoutCol>
+	</LayoutCol>
+	<LayoutCol class="bottom-message">
+		{#if new Date().getFullYear() === 2025}
+			<TextLabel italic={true} disabled={true}>
+				September 2025 release — <a href="https://youtube.com/watch?v=Vl5BA4g3QXM" target="_blank">What's new? (video)</a>
+				— Note: some older documents may render differently and require manual fixes.
+				<a href="https://ec6796b4.graphite-editor.pages.dev/" target="_blank">Need the old version?</a>
+			</TextLabel>
+		{/if}
+	</LayoutCol>
+</LayoutCol>
+
+<style lang="scss" global>
+	.welcome-panel {
+		background: var(--color-2-mildblack);
+		margin: 4px;
+		border-radius: 2px;
+		justify-content: space-between;
+
+		.content-container {
+			flex: 0 0 auto;
+			justify-content: center;
+
+			.content {
+				flex: 0 0 auto;
+				align-items: center;
+
+				.logotype {
+					margin-top: 8px;
+					margin-bottom: 40px;
+
+					svg {
+						width: auto;
+						height: 120px;
+					}
+				}
+
+				.actions {
+					margin-bottom: 8px;
+
+					table {
+						border-spacing: 8px;
+						margin: -8px;
+
+						td {
+							padding: 0;
+						}
+					}
+				}
+			}
+		}
+
+		.top-spacer {
+			flex: 0 1 48px;
+		}
+
+		.bottom-message {
+			flex: 0 0 48px;
+			align-items: center;
+			justify-content: end;
+
+			.text-label {
+				white-space: wrap;
+				margin: 0 1em;
+			}
+		}
+	}
+</style>
diff --git a/frontend/src/components/views/Graph.svelte b/frontend/src/components/views/Graph.svelte
index 351440012..58e09d796 100644
--- a/frontend/src/components/views/Graph.svelte
+++ b/frontend/src/components/views/Graph.svelte
@@ -588,10 +588,11 @@
 					data-visibility-button
 					size={24}
 					icon={node.visible ? "EyeVisible" : "EyeHidden"}
+					hoverIcon={node.visible ? "EyeHide" : "EyeShow"}
 					action={() => {
 						/* Button is purely visual, clicking is handled in NodeGraphMessage::PointerDown */
 					}}
-					tooltipLabel={node.visible ? "Visible" : "Hidden"}
+					tooltipLabel={node.visible ? "Hide" : "Show"}
 				/>
 
 				<svg class="border-mask" width="0" height="0">
diff --git a/frontend/src/components/widgets/WidgetLayout.svelte b/frontend/src/components/widgets/WidgetLayout.svelte
index 63b75e274..afa849a11 100644
--- a/frontend/src/components/widgets/WidgetLayout.svelte
+++ b/frontend/src/components/widgets/WidgetLayout.svelte
@@ -18,7 +18,7 @@
 	{:else if isWidgetSection(layoutGroup)}
 		<WidgetSection widgetData={layoutGroup} layoutTarget={layout.layoutTarget} class={className} {classes} />
 	{:else if isWidgetTable(layoutGroup)}
-		<WidgetTable widgetData={layoutGroup} layoutTarget={layout.layoutTarget} />
+		<WidgetTable widgetData={layoutGroup} unstyled={layoutGroup.unstyled} layoutTarget={layout.layoutTarget} />
 	{:else}
 		<TextLabel styles={{ color: "#d6536e" }}>Error: The widget layout that belongs here has an invalid layout group type</TextLabel>
 	{/if}
diff --git a/frontend/src/components/widgets/WidgetSpan.svelte b/frontend/src/components/widgets/WidgetSpan.svelte
index 2a206119f..bb024c9b3 100644
--- a/frontend/src/components/widgets/WidgetSpan.svelte
+++ b/frontend/src/components/widgets/WidgetSpan.svelte
@@ -27,6 +27,7 @@
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 	import ImageLabel from "@graphite/components/widgets/labels/ImageLabel.svelte";
 	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";
 
@@ -127,6 +128,11 @@
 		{#if iconLabel}
 			<IconLabel {...exclude(iconLabel)} />
 		{/if}
+		{@const shortcutLabel = narrowWidgetProps(component.props, "ShortcutLabel")}
+		{@const shortcutLabelShortcut = shortcutLabel?.shortcut ? { ...shortcutLabel, shortcut: shortcutLabel.shortcut } : undefined}
+		{#if shortcutLabel && shortcutLabelShortcut}
+			<ShortcutLabel {...exclude(shortcutLabelShortcut)} />
+		{/if}
 		{@const imageLabel = narrowWidgetProps(component.props, "ImageLabel")}
 		{#if imageLabel}
 			<ImageLabel {...exclude(imageLabel)} />
diff --git a/frontend/src/components/widgets/WidgetTable.svelte b/frontend/src/components/widgets/WidgetTable.svelte
index 63b20e701..b9d5c84d0 100644
--- a/frontend/src/components/widgets/WidgetTable.svelte
+++ b/frontend/src/components/widgets/WidgetTable.svelte
@@ -5,15 +5,18 @@
 
 	export let widgetData: WidgetTableFromJsMessages;
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	export let layoutTarget: any; // TODO: Give this a real type
+	export let layoutTarget: any;
+	export let unstyled = false;
+
+	$: columns = widgetData.tableWidgets.length > 0 ? widgetData.tableWidgets[0].length : 0;
 </script>
 
-<table>
+<table class:unstyled>
 	<tbody>
 		{#each widgetData.tableWidgets as row}
 			<tr>
 				{#each row as cell}
-					<td>
+					<td colspan={row.length < columns ? columns - row.length + 1 : undefined}>
 						<WidgetSpan widgetData={{ rowWidgets: [cell] }} {layoutTarget} narrow={true} />
 					</td>
 				{/each}
@@ -23,7 +26,7 @@
 </table>
 
 <style lang="scss">
-	table {
+	table:not(.unstyled) {
 		background: var(--color-3-darkgray);
 		border: none;
 		border-spacing: 4px;
diff --git a/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte b/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte
index 2e5cc6f8a..a6d6aabf8 100644
--- a/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte
+++ b/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import type { ActionShortcut } from "@graphite/messages";
+
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
 
@@ -6,7 +8,7 @@
 	export let disabled = false;
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
-	export let tooltipShortcut: string | undefined = undefined;
+	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 	// Callbacks
 	export let action: (index: number) => void;
 </script>
diff --git a/frontend/src/components/widgets/buttons/IconButton.svelte b/frontend/src/components/widgets/buttons/IconButton.svelte
index c88caf28e..6ce7b56b8 100644
--- a/frontend/src/components/widgets/buttons/IconButton.svelte
+++ b/frontend/src/components/widgets/buttons/IconButton.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { type IconName, type IconSize } from "@graphite/icons";
+	import type { ActionShortcut } from "@graphite/messages";
 
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 
@@ -10,7 +11,7 @@
 	export let active = false;
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
-	export let tooltipShortcut: string | undefined = undefined;
+	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 	// Callbacks
 	export let action: (e?: MouseEvent) => void;
 
@@ -32,7 +33,7 @@
 	{disabled}
 	data-tooltip-label={tooltipLabel}
 	data-tooltip-description={tooltipDescription}
-	data-tooltip-shortcut={tooltipShortcut}
+	data-tooltip-shortcut={tooltipShortcut?.shortcut ? JSON.stringify(tooltipShortcut.shortcut) : undefined}
 	tabindex={active ? -1 : 0}
 	{...$$restProps}
 >
diff --git a/frontend/src/components/widgets/buttons/ImageButton.svelte b/frontend/src/components/widgets/buttons/ImageButton.svelte
index c14226b3c..7ab81dc44 100644
--- a/frontend/src/components/widgets/buttons/ImageButton.svelte
+++ b/frontend/src/components/widgets/buttons/ImageButton.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { ActionShortcut } from "@graphite/messages";
 	import { IMAGE_BASE64_STRINGS } from "@graphite/utility-functions/images";
 
 	let className = "";
@@ -10,7 +11,7 @@
 	export let height: string | undefined;
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
-	export let tooltipShortcut: string | undefined = undefined;
+	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 	// Callbacks
 	export let action: (e?: MouseEvent) => void;
 
@@ -26,7 +27,7 @@
 	class={`image-button ${className} ${extraClasses}`.trim()}
 	data-tooltip-label={tooltipLabel}
 	data-tooltip-description={tooltipDescription}
-	data-tooltip-shortcut={tooltipShortcut}
+	data-tooltip-shortcut={tooltipShortcut?.shortcut ? JSON.stringify(tooltipShortcut.shortcut) : undefined}
 	alt=""
 	on:click={action}
 />
diff --git a/frontend/src/components/widgets/buttons/ParameterExposeButton.svelte b/frontend/src/components/widgets/buttons/ParameterExposeButton.svelte
index 20b2dac9c..00d3f61c8 100644
--- a/frontend/src/components/widgets/buttons/ParameterExposeButton.svelte
+++ b/frontend/src/components/widgets/buttons/ParameterExposeButton.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { FrontendGraphDataType } from "@graphite/messages";
+	import type { FrontendGraphDataType, ActionShortcut } from "@graphite/messages";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 
@@ -7,7 +7,7 @@
 	export let dataType: FrontendGraphDataType;
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
-	export let tooltipShortcut: string | undefined = undefined;
+	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 	// Callbacks
 	export let action: (e?: MouseEvent) => void;
 </script>
@@ -20,7 +20,7 @@
 		on:click={action}
 		data-tooltip-label={tooltipLabel}
 		data-tooltip-description={tooltipDescription}
-		data-tooltip-shortcut={tooltipShortcut}
+		data-tooltip-shortcut={tooltipShortcut?.shortcut ? JSON.stringify(tooltipShortcut.shortcut) : undefined}
 		tabindex="-1"
 	>
 		{#if !exposed}
diff --git a/frontend/src/components/widgets/buttons/PopoverButton.svelte b/frontend/src/components/widgets/buttons/PopoverButton.svelte
index ad9d83a26..4486dbd7a 100644
--- a/frontend/src/components/widgets/buttons/PopoverButton.svelte
+++ b/frontend/src/components/widgets/buttons/PopoverButton.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { type IconName, type PopoverButtonStyle } from "@graphite/icons";
 
-	import type { MenuDirection } from "@graphite/messages";
+	import type { MenuDirection, ActionShortcut } from "@graphite/messages";
 
 	import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
@@ -13,7 +13,7 @@
 	export let icon: IconName | undefined = undefined;
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
-	export let tooltipShortcut: string | undefined = undefined;
+	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 	export let disabled = false;
 	export let popoverMinWidth = 1;
 
diff --git a/frontend/src/components/widgets/buttons/TextButton.svelte b/frontend/src/components/widgets/buttons/TextButton.svelte
index b15e4e489..49d78eb15 100644
--- a/frontend/src/components/widgets/buttons/TextButton.svelte
+++ b/frontend/src/components/widgets/buttons/TextButton.svelte
@@ -2,7 +2,7 @@
 	import { createEventDispatcher } from "svelte";
 
 	import type { IconName } from "@graphite/icons";
-	import type { MenuListEntry } from "@graphite/messages";
+	import type { MenuListEntry, ActionShortcut } from "@graphite/messages";
 
 	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
 	import ConditionalWrapper from "@graphite/components/layout/ConditionalWrapper.svelte";
@@ -25,7 +25,7 @@
 	export let narrow = false;
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
-	export let tooltipShortcut: string | undefined = undefined;
+	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 	export let menuListChildren: MenuListEntry[][] | undefined = undefined;
 
 	// Callbacks
@@ -66,7 +66,7 @@
 		style:min-width={minWidth > 0 ? `${minWidth}px` : undefined}
 		data-tooltip-label={tooltipLabel}
 		data-tooltip-description={tooltipDescription}
-		data-tooltip-shortcut={tooltipShortcut}
+		data-tooltip-shortcut={tooltipShortcut?.shortcut ? JSON.stringify(tooltipShortcut.shortcut) : undefined}
 		data-emphasized={emphasized || undefined}
 		data-disabled={disabled || undefined}
 		data-text-button
diff --git a/frontend/src/components/widgets/inputs/CheckboxInput.svelte b/frontend/src/components/widgets/inputs/CheckboxInput.svelte
index 5d247158a..0114b02f6 100644
--- a/frontend/src/components/widgets/inputs/CheckboxInput.svelte
+++ b/frontend/src/components/widgets/inputs/CheckboxInput.svelte
@@ -2,6 +2,7 @@
 	import { createEventDispatcher } from "svelte";
 
 	import type { IconName } from "@graphite/icons";
+	import type { ActionShortcut } from "@graphite/messages";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
@@ -13,7 +14,7 @@
 	export let icon: IconName = "Checkmark";
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
-	export let tooltipShortcut: string | undefined = undefined;
+	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 	export let forLabel: bigint | undefined = undefined;
 
 	let inputElement: HTMLInputElement | undefined;
@@ -55,7 +56,7 @@
 		on:keydown={(e) => e.key === "Enter" && toggleCheckboxFromLabel(e)}
 		data-tooltip-label={tooltipLabel}
 		data-tooltip-description={tooltipDescription}
-		data-tooltip-shortcut={tooltipShortcut}
+		data-tooltip-shortcut={tooltipShortcut?.shortcut ? JSON.stringify(tooltipShortcut.shortcut) : undefined}
 	>
 		<LayoutRow class="checkbox-box">
 			<IconLabel icon={displayIcon} />
diff --git a/frontend/src/components/widgets/inputs/ColorInput.svelte b/frontend/src/components/widgets/inputs/ColorInput.svelte
index 4a44a2cec..e7145a56d 100644
--- a/frontend/src/components/widgets/inputs/ColorInput.svelte
+++ b/frontend/src/components/widgets/inputs/ColorInput.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 
-	import type { FillChoice, MenuDirection } from "@graphite/messages";
+	import type { FillChoice, MenuDirection, ActionShortcut } from "@graphite/messages";
 	import { Color, contrastingOutlineFactor, Gradient } from "@graphite/messages";
 
 	import ColorPicker from "@graphite/components/floating-menus/ColorPicker.svelte";
@@ -19,7 +19,7 @@
 	// export let allowTransparency = false; // TODO: Implement
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
-	export let tooltipShortcut: string | undefined = undefined;
+	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 
 	$: outlineFactor = contrastingOutlineFactor(value, ["--color-1-nearblack", "--color-3-darkgray"], 0.01);
 	$: outlined = outlineFactor > 0.0001;
diff --git a/frontend/src/components/widgets/inputs/CurveInput.svelte b/frontend/src/components/widgets/inputs/CurveInput.svelte
index 31fe5e448..406d48e97 100644
--- a/frontend/src/components/widgets/inputs/CurveInput.svelte
+++ b/frontend/src/components/widgets/inputs/CurveInput.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 
-	import type { Curve, CurveManipulatorGroup } from "@graphite/messages";
+	import type { Curve, CurveManipulatorGroup, ActionShortcut } from "@graphite/messages";
 	import { clamp } from "@graphite/utility-functions/math";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
@@ -18,7 +18,7 @@
 	export let disabled = false;
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
-	export let tooltipShortcut: string | undefined = undefined;
+	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 
 	const GRID_SIZE = 4;
 
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.svelte b/frontend/src/components/widgets/inputs/DropdownInput.svelte
index 9c37d16db..4cfb031ea 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.svelte
+++ b/frontend/src/components/widgets/inputs/DropdownInput.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 
-	import type { MenuListEntry } from "@graphite/messages";
+	import type { MenuListEntry, ActionShortcut } from "@graphite/messages";
 
 	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
@@ -23,7 +23,7 @@
 	export let narrow = false;
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
-	export let tooltipShortcut: string | undefined = undefined;
+	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 	export let minWidth = 0;
 	export let maxWidth = 0;
 
diff --git a/frontend/src/components/widgets/inputs/FieldInput.svelte b/frontend/src/components/widgets/inputs/FieldInput.svelte
index be5fe9ebf..6a88ebf69 100644
--- a/frontend/src/components/widgets/inputs/FieldInput.svelte
+++ b/frontend/src/components/widgets/inputs/FieldInput.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 
+	import type { ActionShortcut } from "@graphite/messages";
 	import { operatingSystem } from "@graphite/utility-functions/platform";
 
 	import { preventEscapeClosingParentFloatingMenu } from "@graphite/components/layout/FloatingMenu.svelte";
@@ -27,7 +28,7 @@
 	export let textarea = false;
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
-	export let tooltipShortcut: string | undefined = undefined;
+	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 	export let placeholder: string | undefined = undefined;
 	export let hideContextMenu = false;
 
diff --git a/frontend/src/components/widgets/inputs/FontInput.svelte b/frontend/src/components/widgets/inputs/FontInput.svelte
index 72e3ef427..e8b290461 100644
--- a/frontend/src/components/widgets/inputs/FontInput.svelte
+++ b/frontend/src/components/widgets/inputs/FontInput.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher, getContext, onMount, tick } from "svelte";
 
-	import type { MenuListEntry } from "@graphite/messages";
+	import type { MenuListEntry, ActionShortcut } from "@graphite/messages";
 	import type { FontsState } from "@graphite/state-providers/fonts";
 
 	import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
@@ -25,7 +25,7 @@
 	export let disabled = false;
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
-	export let tooltipShortcut: string | undefined = undefined;
+	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 
 	let open = false;
 	let entries: MenuListEntry[] = [];
diff --git a/frontend/src/components/widgets/inputs/NumberInput.svelte b/frontend/src/components/widgets/inputs/NumberInput.svelte
index 5b7b43dd7..830fb1d8e 100644
--- a/frontend/src/components/widgets/inputs/NumberInput.svelte
+++ b/frontend/src/components/widgets/inputs/NumberInput.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { createEventDispatcher, onMount, onDestroy } from "svelte";
 
-	import { evaluateMathExpression } from "@graphite/../wasm/pkg/graphite_wasm.js";
+	import { evaluateMathExpression } from "@graphite/../wasm/pkg/graphite_wasm";
 	import { PRESS_REPEAT_DELAY_MS, PRESS_REPEAT_INTERVAL_MS } from "@graphite/io-managers/input";
-	import { type NumberInputMode, type NumberInputIncrementBehavior } from "@graphite/messages";
+	import type { NumberInputMode, NumberInputIncrementBehavior, ActionShortcut } from "@graphite/messages";
 	import { browserVersion, isDesktop } from "@graphite/utility-functions/platform";
 
 	import { preventEscapeClosingParentFloatingMenu } from "@graphite/components/layout/FloatingMenu.svelte";
@@ -20,7 +20,7 @@
 	export let label: string | undefined = undefined;
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
-	export let tooltipShortcut: string | undefined = undefined;
+	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 
 	// Disabled
 	export let disabled = false;
diff --git a/frontend/src/components/widgets/inputs/RadioInput.svelte b/frontend/src/components/widgets/inputs/RadioInput.svelte
index 44ba85f92..c11a00c2d 100644
--- a/frontend/src/components/widgets/inputs/RadioInput.svelte
+++ b/frontend/src/components/widgets/inputs/RadioInput.svelte
@@ -30,7 +30,7 @@
 			on:click={() => handleEntryClick(entry)}
 			data-tooltip-label={entry.tooltipLabel}
 			data-tooltip-description={entry.tooltipDescription}
-			data-tooltip-shortcut={entry.tooltipShortcut}
+			data-tooltip-shortcut={entry.tooltipShortcut?.shortcut ? JSON.stringify(entry.tooltipShortcut.shortcut) : undefined}
 			tabindex={index === selectedIndex ? -1 : 0}
 			{disabled}
 		>
diff --git a/frontend/src/components/widgets/inputs/ReferencePointInput.svelte b/frontend/src/components/widgets/inputs/ReferencePointInput.svelte
index 1d56db67f..3e951d231 100644
--- a/frontend/src/components/widgets/inputs/ReferencePointInput.svelte
+++ b/frontend/src/components/widgets/inputs/ReferencePointInput.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 
-	import type { ReferencePoint } from "@graphite/messages";
+	import type { ReferencePoint, ActionShortcut } from "@graphite/messages";
 
 	const dispatch = createEventDispatcher<{ value: ReferencePoint }>();
 
@@ -9,14 +9,20 @@
 	export let disabled = false;
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
-	export let tooltipShortcut: string | undefined = undefined;
+	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 
 	function setValue(newValue: ReferencePoint) {
 		dispatch("value", newValue);
 	}
 </script>
 
-<div class="reference-point-input" class:disabled data-tooltip-label={tooltipLabel} data-tooltip-description={tooltipDescription} data-tooltip-shortcut={tooltipShortcut}>
+<div
+	class="reference-point-input"
+	class:disabled
+	data-tooltip-label={tooltipLabel}
+	data-tooltip-description={tooltipDescription}
+	data-tooltip-shortcut={tooltipShortcut?.shortcut ? JSON.stringify(tooltipShortcut.shortcut) : undefined}
+>
 	<button on:click={() => setValue("TopLeft")} class="row-1 col-1" class:active={value === "TopLeft"} tabindex="-1" {disabled}><div /></button>
 	<button on:click={() => setValue("TopCenter")} class="row-1 col-2" class:active={value === "TopCenter"} tabindex="-1" {disabled}><div /></button>
 	<button on:click={() => setValue("TopRight")} class="row-1 col-3" class:active={value === "TopRight"} tabindex="-1" {disabled}><div /></button>
diff --git a/frontend/src/components/widgets/inputs/SpectrumInput.svelte b/frontend/src/components/widgets/inputs/SpectrumInput.svelte
index ed8a1546b..26a3a3881 100644
--- a/frontend/src/components/widgets/inputs/SpectrumInput.svelte
+++ b/frontend/src/components/widgets/inputs/SpectrumInput.svelte
@@ -18,7 +18,7 @@
 	// export let disabled = false;
 	// export let tooltipLabel: string | undefined = undefined;
 	// export let tooltipDescription: string | undefined = undefined;
-	// export let tooltipShortcut: string | undefined = undefined;
+	// export let tooltipShortcut: ActionShortcut | undefined = undefined;
 
 	let markerTrack: LayoutRow | undefined = undefined;
 	let positionRestore: number | undefined = undefined;
diff --git a/frontend/src/components/widgets/inputs/TextAreaInput.svelte b/frontend/src/components/widgets/inputs/TextAreaInput.svelte
index 44b1c5800..a82866472 100644
--- a/frontend/src/components/widgets/inputs/TextAreaInput.svelte
+++ b/frontend/src/components/widgets/inputs/TextAreaInput.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 
+	import type { ActionShortcut } from "@graphite/messages";
+
 	import FieldInput from "@graphite/components/widgets/inputs/FieldInput.svelte";
 
 	const dispatch = createEventDispatcher<{ commitText: string }>();
@@ -9,7 +11,7 @@
 	export let label: string | undefined = undefined;
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
-	export let tooltipShortcut: string | undefined = undefined;
+	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 	export let disabled = false;
 
 	let self: FieldInput | undefined;
diff --git a/frontend/src/components/widgets/inputs/TextInput.svelte b/frontend/src/components/widgets/inputs/TextInput.svelte
index 484c61ccf..3e8dccab2 100644
--- a/frontend/src/components/widgets/inputs/TextInput.svelte
+++ b/frontend/src/components/widgets/inputs/TextInput.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 
+	import type { ActionShortcut } from "@graphite/messages";
+
 	import FieldInput from "@graphite/components/widgets/inputs/FieldInput.svelte";
 
 	const dispatch = createEventDispatcher<{ commitText: string }>();
@@ -9,7 +11,7 @@
 	export let label: string | undefined = undefined;
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
-	export let tooltipShortcut: string | undefined = undefined;
+	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 	export let placeholder: string | undefined = undefined;
 	// Disabled
 	export let disabled = false;
diff --git a/frontend/src/components/widgets/labels/IconLabel.svelte b/frontend/src/components/widgets/labels/IconLabel.svelte
index 5d4a7f7c7..e4d79656a 100644
--- a/frontend/src/components/widgets/labels/IconLabel.svelte
+++ b/frontend/src/components/widgets/labels/IconLabel.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { type IconName, ICONS, ICON_SVG_STRINGS } from "@graphite/icons";
+	import type { ActionShortcut } from "@graphite/messages";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 
@@ -11,7 +12,7 @@
 	export let disabled = false;
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
-	export let tooltipShortcut: string | undefined = undefined;
+	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 
 	$: iconSizeClass = ((icon: IconName) => {
 		const iconData = ICONS[icon];
diff --git a/frontend/src/components/widgets/labels/ImageLabel.svelte b/frontend/src/components/widgets/labels/ImageLabel.svelte
index ad812ca58..65e38c542 100644
--- a/frontend/src/components/widgets/labels/ImageLabel.svelte
+++ b/frontend/src/components/widgets/labels/ImageLabel.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import type { ActionShortcut } from "@graphite/messages";
+
 	let className = "";
 	export { className as class };
 	export let classes: Record<string, boolean> = {};
@@ -8,7 +10,7 @@
 	export let height: string | undefined;
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
-	export let tooltipShortcut: string | undefined = undefined;
+	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 
 	$: extraClasses = Object.entries(classes)
 		.flatMap(([className, stateName]) => (stateName ? [className] : []))
@@ -22,7 +24,7 @@
 	class={`image-label ${className} ${extraClasses}`.trim()}
 	data-tooltip-label={tooltipLabel}
 	data-tooltip-description={tooltipDescription}
-	data-tooltip-shortcut={tooltipShortcut}
+	data-tooltip-shortcut={tooltipShortcut?.shortcut ? JSON.stringify(tooltipShortcut.shortcut) : undefined}
 	alt=""
 />
 
diff --git a/frontend/src/components/widgets/labels/ShortcutLabel.svelte b/frontend/src/components/widgets/labels/ShortcutLabel.svelte
new file mode 100644
index 000000000..4aee14b63
--- /dev/null
+++ b/frontend/src/components/widgets/labels/ShortcutLabel.svelte
@@ -0,0 +1,152 @@
+<script lang="ts">
+	import type { IconName } from "@graphite/icons";
+	import type { ActionShortcut, KeyRaw, LabeledShortcut, MouseMotion } from "@graphite/messages";
+	import { operatingSystem } from "@graphite/utility-functions/platform";
+
+	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
+
+	export let shortcut: ActionShortcut;
+
+	function keyTextOrIconList(keyGroup: LabeledShortcut): { label?: string; icon?: IconName; mouseMotion?: MouseMotion }[] {
+		const list = keyGroup.map((labeledKeyOrMouseMotion) => {
+			// Use a mouse icon if it's a mouse motion instead of a key
+			if (typeof labeledKeyOrMouseMotion === "string") return { mouseMotion: labeledKeyOrMouseMotion };
+
+			// `key` is the name of the `Key` enum in Rust, while `label` is the localized string to display (if it doesn't become an icon)
+			let key = labeledKeyOrMouseMotion.key;
+			const label = labeledKeyOrMouseMotion.label;
+
+			// Replace Alt and Accel keys with their Mac-specific equivalents
+			if (operatingSystem() === "Mac") {
+				if (key === "Alt") key = "Option";
+				if (key === "Accel") key = "Command";
+			}
+
+			// Either display an icon...
+			const icon = keyboardHintIcon(key);
+			if (icon) return { icon };
+
+			// ...or display text
+			return { label };
+		});
+
+		// Consolidate consecutive labels into a concatenated single label
+		const consolidatedList: typeof list = [];
+		list.forEach((item) => {
+			const lastItem = consolidatedList[consolidatedList.length - 1];
+			if (item.label && lastItem?.label) lastItem.label += " " + item.label;
+			else consolidatedList.push(item);
+		});
+		return consolidatedList;
+	}
+
+	function keyboardHintIcon(input: KeyRaw): IconName | undefined {
+		switch (input) {
+			case "ArrowDown":
+				return "KeyboardArrowDown";
+			case "ArrowLeft":
+				return "KeyboardArrowLeft";
+			case "ArrowRight":
+				return "KeyboardArrowRight";
+			case "ArrowUp":
+				return "KeyboardArrowUp";
+			case "Backspace":
+				return "KeyboardBackspace";
+			case "Enter":
+				return "KeyboardEnter";
+			case "Space":
+				return "KeyboardSpace";
+			case "Tab":
+				return "KeyboardTab";
+			case "Command":
+				return operatingSystem() === "Mac" ? "KeyboardCommand" : undefined;
+			case "Control":
+				return operatingSystem() === "Mac" ? "KeyboardControl" : undefined;
+			case "Option":
+				return operatingSystem() === "Mac" ? "KeyboardOption" : undefined;
+			case "Shift":
+				return operatingSystem() === "Mac" ? "KeyboardShift" : undefined;
+			default:
+				return undefined;
+		}
+	}
+
+	function mouseHintIcon(input?: MouseMotion): IconName {
+		return `MouseHint${input}` as IconName;
+	}
+</script>
+
+<LayoutRow class="shortcut-label">
+	{#each keyTextOrIconList(shortcut.shortcut) as { label, icon, mouseMotion }}
+		{#if label}
+			<div class="key-label">
+				<TextLabel>{label}</TextLabel>
+			</div>
+		{:else if icon}
+			<div class="key-icon">
+				<IconLabel {icon} />
+			</div>
+		{:else if mouseMotion}
+			<div class="mouse-icon">
+				<IconLabel icon={mouseHintIcon(mouseMotion)} />
+			</div>
+		{/if}
+	{/each}
+</LayoutRow>
+
+<style lang="scss" global>
+	.shortcut-label {
+		.key-icon,
+		.key-label {
+			display: flex;
+			align-items: center;
+			height: 16px;
+			padding: 0 4px;
+			border-radius: 4px;
+			background: var(--color-3-darkgray);
+			color: var(--color-b-lightgray);
+			fill: var(--color-b-lightgray);
+		}
+
+		svg {
+			fill: var(--color-b-lightgray);
+
+			.dim {
+				fill: var(--color-8-uppergray);
+			}
+		}
+
+		.floating-menu-content .row > & {
+			.key-label,
+			.key-icon,
+			.mouse-icon {
+				color: var(--color-8-uppergray);
+				background: none;
+
+				&:first-child {
+					padding-left: 0;
+				}
+
+				&:last-child {
+					padding-right: 0;
+				}
+			}
+
+			.key-icon svg {
+				fill: var(--color-8-uppergray);
+			}
+
+			.mouse-icon svg {
+				// 3 shades brighter than the 8-uppergray of key labels/icons
+				fill: var(--color-b-lightgray);
+
+				.dim {
+					// 3 shades darker than the 8-uppergray of key labels/icons
+					fill: var(--color-5-dullgray);
+				}
+			}
+		}
+	}
+</style>
diff --git a/frontend/src/components/widgets/labels/TextLabel.svelte b/frontend/src/components/widgets/labels/TextLabel.svelte
index b5e8ac6ed..4174ebf43 100644
--- a/frontend/src/components/widgets/labels/TextLabel.svelte
+++ b/frontend/src/components/widgets/labels/TextLabel.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import type { ActionShortcut } from "@graphite/messages";
+
 	let className = "";
 	export { className as class };
 	export let classes: Record<string, boolean> = {};
@@ -16,7 +18,7 @@
 	export let multiline = false;
 	export let tooltipLabel: string | undefined = undefined;
 	export let tooltipDescription: string | undefined = undefined;
-	export let tooltipShortcut: string | undefined = undefined;
+	export let tooltipShortcut: ActionShortcut | undefined = undefined;
 	export let forCheckbox: bigint | undefined = undefined;
 
 	$: extraClasses = Object.entries(classes)
@@ -41,7 +43,7 @@
 	style={`${styleName} ${extraStyles}`.trim() || undefined}
 	data-tooltip-label={tooltipLabel}
 	data-tooltip-description={tooltipDescription}
-	data-tooltip-shortcut={tooltipShortcut}
+	data-tooltip-shortcut={tooltipShortcut?.shortcut ? JSON.stringify(tooltipShortcut.shortcut) : undefined}
 	for={forCheckbox !== undefined ? `checkbox-input-${forCheckbox}` : undefined}
 >
 	<slot />
diff --git a/frontend/src/components/widgets/labels/UserInputLabel.svelte b/frontend/src/components/widgets/labels/UserInputLabel.svelte
deleted file mode 100644
index 660bfee49..000000000
--- a/frontend/src/components/widgets/labels/UserInputLabel.svelte
+++ /dev/null
@@ -1,273 +0,0 @@
-<script lang="ts">
-	import { getContext } from "svelte";
-
-	import type { IconName } from "@graphite/icons";
-
-	import { type KeyRaw, type LayoutKeysGroup, type Key, type MouseMotion } from "@graphite/messages";
-	import type { FullscreenState } from "@graphite/state-providers/fullscreen";
-	import { operatingSystem } from "@graphite/utility-functions/platform";
-
-	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
-	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
-	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
-
-	type LabelData = { label?: string; icon?: IconName; width: string };
-
-	// Keys that become icons if they are listed here with their units of width
-	const ICON_WIDTHS_MAC = {
-		Shift: 2,
-		Control: 2,
-		Option: 2,
-		Command: 2,
-	};
-	const ICON_WIDTHS = {
-		ArrowUp: 1,
-		ArrowRight: 1,
-		ArrowDown: 1,
-		ArrowLeft: 1,
-		Backspace: 2,
-		Enter: 2,
-		Tab: 2,
-		Space: 3,
-		...(operatingSystem() === "Mac" ? ICON_WIDTHS_MAC : {}),
-	};
-
-	const fullscreen = getContext<FullscreenState>("fullscreen");
-
-	export let keysWithLabelsGroups: LayoutKeysGroup[] = [];
-	export let mouseMotion: MouseMotion | undefined = undefined;
-	export let requiresLock = false;
-	export let textOnly = false;
-
-	$: keyboardLockInfoMessage = watchKeyboardLockInfoMessage($fullscreen.keyboardLockApiSupported);
-
-	$: displayKeyboardLockNotice = requiresLock && !$fullscreen.keyboardLocked;
-
-	function watchKeyboardLockInfoMessage(keyboardLockApiSupported: boolean): string {
-		const RESERVED = "This keyboard shortcut is reserved by the browser.";
-		const USE_FULLSCREEN = "It is made available in fullscreen mode.";
-		const USE_SECURE_CTX = "It is made available in fullscreen mode when this website is served from a secure context (https or localhost).";
-		const SWITCH_BROWSER = "Use a Chromium-based browser (like Chrome or Edge) in fullscreen mode to directly use the shortcut.";
-
-		if (keyboardLockApiSupported) return `${RESERVED} ${USE_FULLSCREEN}`;
-		if (!("chrome" in window)) return `${RESERVED} ${SWITCH_BROWSER}`;
-		if (!window.isSecureContext) return `${RESERVED} ${USE_SECURE_CTX}`;
-		return RESERVED;
-	}
-
-	function keyTextOrIconList(keyGroup: LayoutKeysGroup): LabelData[] {
-		return keyGroup.map((key) => keyTextOrIcon(key));
-	}
-
-	function keyTextOrIcon(keyWithLabel: Key): LabelData {
-		// `key` is the name of the `Key` enum in Rust, while `label` is the localized string to display (if it doesn't become an icon)
-		let key = keyWithLabel.key;
-		const label = keyWithLabel.label;
-
-		// Replace Alt and Accel keys with their Mac-specific equivalents
-		if (operatingSystem() === "Mac") {
-			if (key === "Alt") key = "Option";
-			if (key === "Accel") key = "Command";
-		}
-
-		// Either display an icon...
-		// @ts-expect-error We want undefined if it isn't in the object
-		const iconWidth: number | undefined = ICON_WIDTHS[key];
-		const icon = iconWidth !== undefined && iconWidth > 0 && (keyboardHintIcon(key) || false);
-		if (icon) return { icon, width: `width-${iconWidth}` };
-
-		// ...or display text
-		return { label, width: `width-${label.length}` };
-	}
-
-	function mouseHintIcon(input?: MouseMotion): IconName {
-		return `MouseHint${input}` as IconName;
-	}
-
-	function keyboardHintIcon(input: KeyRaw): IconName | undefined {
-		switch (input) {
-			case "ArrowDown":
-				return "KeyboardArrowDown";
-			case "ArrowLeft":
-				return "KeyboardArrowLeft";
-			case "ArrowRight":
-				return "KeyboardArrowRight";
-			case "ArrowUp":
-				return "KeyboardArrowUp";
-			case "Backspace":
-				return "KeyboardBackspace";
-			case "Command":
-				return "KeyboardCommand";
-			case "Control":
-				return "KeyboardControl";
-			case "Enter":
-				return "KeyboardEnter";
-			case "Option":
-				return "KeyboardOption";
-			case "Shift":
-				return "KeyboardShift";
-			case "Space":
-				return "KeyboardSpace";
-			case "Tab":
-				return "KeyboardTab";
-			default:
-				return undefined;
-		}
-	}
-</script>
-
-{#if displayKeyboardLockNotice}
-	<IconLabel class="user-input-label keyboard-lock-notice" icon="Info" tooltipDescription={keyboardLockInfoMessage} />
-{:else}
-	<LayoutRow class="user-input-label" classes={{ "text-only": textOnly }}>
-		{#each keysWithLabelsGroups as keysWithLabels, groupIndex}
-			{#if groupIndex > 0}
-				<Separator type="Related" />
-			{/if}
-			{#each keyTextOrIconList(keysWithLabels) as keyInfo}
-				<div class={`input-key ${keyInfo.width}`}>
-					{#if keyInfo.icon}
-						<IconLabel icon={keyInfo.icon} />
-					{:else if keyInfo.label !== undefined}
-						<TextLabel>{keyInfo.label}</TextLabel>
-					{/if}
-				</div>
-			{/each}
-		{/each}
-		{#if mouseMotion}
-			<div class="input-mouse">
-				<IconLabel icon={mouseHintIcon(mouseMotion)} />
-			</div>
-		{/if}
-		{#if $$slots.default}
-			<div class="hint-text">
-				<slot />
-			</div>
-		{/if}
-	</LayoutRow>
-{/if}
-
-<style lang="scss" global>
-	.user-input-label {
-		flex: 0 0 auto;
-		align-items: center;
-		white-space: nowrap;
-
-		&.text-only {
-			display: flex;
-
-			.input-key {
-				display: flex;
-				align-items: center;
-
-				.icon-label {
-					margin: calc(calc(18px - 12px) / 2) 0;
-				}
-
-				& + .input-key {
-					margin-left: 4px;
-				}
-			}
-		}
-
-		&:not(.text-only) {
-			.input-key,
-			.input-mouse {
-				& + .input-key,
-				& + .input-mouse {
-					margin-left: 2px;
-				}
-			}
-
-			.input-key {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				font-family: "Source Code Pro", monospace;
-				font-size: 12px;
-				font-weight: 400;
-				text-align: center;
-				height: 16px;
-				border-radius: 4px;
-				background: var(--color-3-darkgray);
-				color: var(--color-b-lightgray);
-
-				.icon-label {
-					fill: var(--color-b-lightgray);
-				}
-
-				.text-label {
-					// Firefox renders the text 1px lower than Chrome (tested on Windows) with 16px line-height,
-					// so moving it up 1 pixel by using 15px makes them agree.
-					line-height: 15px;
-				}
-
-				&.width-1 {
-					width: 16px;
-				}
-
-				&.width-2 {
-					width: 24px;
-				}
-
-				&.width-3 {
-					width: 32px;
-				}
-
-				&.width-4 {
-					width: 40px;
-				}
-
-				&.width-5 {
-					width: 48px;
-				}
-
-				.icon-label {
-					margin: 1px;
-				}
-			}
-		}
-
-		.input-mouse {
-			.bright {
-				fill: var(--color-b-lightgray);
-			}
-
-			.dim {
-				fill: var(--color-8-uppergray);
-			}
-		}
-
-		.hint-text:not(:empty) {
-			margin-left: 4px;
-		}
-
-		.floating-menu-content .row > & {
-			.input-key {
-				border-color: var(--color-3-darkgray);
-				color: var(--color-8-uppergray);
-			}
-
-			.input-key .icon-label svg,
-			&.keyboard-lock-notice.keyboard-lock-notice svg,
-			.input-mouse .bright {
-				fill: var(--color-8-uppergray);
-			}
-
-			.input-mouse .dim {
-				fill: var(--color-3-darkgray);
-			}
-		}
-
-		.floating-menu-content .row:hover > & {
-			.input-key {
-				border-color: var(--color-8-uppergray);
-			}
-
-			.input-mouse .dim {
-				fill: var(--color-8-uppergray);
-			}
-		}
-	}
-</style>
diff --git a/frontend/src/components/window/status-bar/StatusBar.svelte b/frontend/src/components/window/status-bar/StatusBar.svelte
index 82ef898a7..e92eb8f6e 100644
--- a/frontend/src/components/window/status-bar/StatusBar.svelte
+++ b/frontend/src/components/window/status-bar/StatusBar.svelte
@@ -2,45 +2,25 @@
 	import { getContext, onMount } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
-	import { type HintData, type HintInfo, type LayoutKeysGroup, UpdateInputHints } from "@graphite/messages";
-	import { operatingSystem } from "@graphite/utility-functions/platform";
+	import { defaultWidgetLayout, patchWidgetLayout, UpdateStatusBarHintsLayout } from "@graphite/messages";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
-	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
-	import UserInputLabel from "@graphite/components/widgets/labels/UserInputLabel.svelte";
+	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
 
 	const editor = getContext<Editor>("editor");
 
-	let hintData: HintData = [];
-
-	function inputKeysForPlatform(hint: HintInfo): LayoutKeysGroup[] {
-		return operatingSystem() === "Mac" && hint.keyGroupsMac ? hint.keyGroupsMac : hint.keyGroups;
-	}
+	let statusBarHintsLayout = defaultWidgetLayout();
 
 	onMount(() => {
-		editor.subscriptions.subscribeJsMessage(UpdateInputHints, (data) => {
-			hintData = data.hintData;
+		editor.subscriptions.subscribeJsMessage(UpdateStatusBarHintsLayout, (updateStatusBarHintsLayout) => {
+			patchWidgetLayout(statusBarHintsLayout, updateStatusBarHintsLayout);
+			statusBarHintsLayout = statusBarHintsLayout;
 		});
 	});
 </script>
 
 <LayoutRow class="status-bar">
-	<LayoutRow class="hint-groups">
-		{#each hintData as hintGroup, index (hintGroup)}
-			{#if index !== 0}
-				<Separator type="Section" />
-			{/if}
-			{#each hintGroup as hint (hint)}
-				{#if hint.plus}
-					<LayoutRow class="plus">+</LayoutRow>
-				{/if}
-				{#if hint.slash}
-					<LayoutRow class="slash">/</LayoutRow>
-				{/if}
-				<UserInputLabel mouseMotion={hint.mouse} keysWithLabelsGroups={inputKeysForPlatform(hint)}>{hint.label}</UserInputLabel>
-			{/each}
-		{/each}
-	</LayoutRow>
+	<WidgetLayout class="hints" layout={statusBarHintsLayout} />
 </LayoutRow>
 
 <style lang="scss" global>
@@ -49,30 +29,29 @@
 		width: 100%;
 		flex: 0 0 auto;
 
-		.hint-groups {
-			flex: 0 0 auto;
-			max-width: 100%;
-			margin: 0 -4px;
+		.hints {
 			overflow: hidden;
+			--row-height: 24px;
+			margin: 0 4px;
+			max-width: calc(100% - 2 * 4px);
 
-			.separator.section {
-				// Width of section separator (12px) minus the margin of the surrounding user input labels (8px)
-				margin: 0 calc(12px - 8px);
-			}
-
-			.plus,
-			.slash {
-				flex: 0 0 auto;
+			.text-label,
+			.shortcut-label {
 				align-items: center;
-				font-weight: 700;
+				flex-shrink: 0;
+
+				+ .text-label,
+				+ .shortcut-label {
+					margin-left: 4px;
+				}
 			}
 
-			.user-input-label {
-				margin: 0 8px;
+			.text-label:not(.bold) + .shortcut-label {
+				margin-left: 12px;
+			}
 
-				& + .user-input-label {
-					margin-left: 0;
-				}
+			.text-label.bold {
+				padding: 0 4px;
 			}
 		}
 	}
diff --git a/frontend/src/components/window/title-bar/WindowButtonsWeb.svelte b/frontend/src/components/window/title-bar/WindowButtonsWeb.svelte
index c5041a742..6daa90779 100644
--- a/frontend/src/components/window/title-bar/WindowButtonsWeb.svelte
+++ b/frontend/src/components/window/title-bar/WindowButtonsWeb.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { getContext } from "svelte";
 
+	import { shortcutF11 } from "@graphite/../wasm/pkg/graphite_wasm";
+	import type { ActionShortcut } from "@graphite/messages";
 	import type { FullscreenState } from "@graphite/state-providers/fullscreen";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
@@ -8,6 +10,8 @@
 
 	const fullscreen = getContext<FullscreenState>("fullscreen");
 
+	const f11Keys: ActionShortcut = shortcutF11();
+
 	async function handleClick() {
 		if ($fullscreen.windowFullscreen) fullscreen.exitFullscreen();
 		else fullscreen.enterFullscreen();
@@ -19,7 +23,7 @@
 	on:click={handleClick}
 	tooltipLabel={$fullscreen.windowFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
 	tooltipDescription={$fullscreen.keyboardLockApiSupported ? "While fullscreen, keyboard shortcuts normally reserved by the browser become available." : ""}
-	tooltipShortcut="F11"
+	tooltipShortcut={f11Keys}
 >
 	<IconLabel icon={$fullscreen.windowFullscreen ? "FullscreenExit" : "FullscreenEnter"} />
 </LayoutRow>
diff --git a/frontend/src/components/window/workspace/Panel.svelte b/frontend/src/components/window/workspace/Panel.svelte
index 2fbb92a8d..fda857a7c 100644
--- a/frontend/src/components/window/workspace/Panel.svelte
+++ b/frontend/src/components/window/workspace/Panel.svelte
@@ -3,8 +3,10 @@
 	import Document from "@graphite/components/panels/Document.svelte";
 	import Layers from "@graphite/components/panels/Layers.svelte";
 	import Properties from "@graphite/components/panels/Properties.svelte";
+	import Welcome from "@graphite/components/panels/Welcome.svelte";
 
 	const PANEL_COMPONENTS = {
+		Welcome,
 		Document,
 		Layers,
 		Properties,
@@ -17,23 +19,16 @@
 	import { getContext, tick } from "svelte";
 
 	import type { Editor } from "@graphite/editor";
-	import { type LayoutKeysGroup, type Key } from "@graphite/messages";
-	import type { AppWindowState } from "@graphite/state-providers/app-window";
-	import { operatingSystem, isEventSupported } from "@graphite/utility-functions/platform";
-	import { extractPixelData } from "@graphite/utility-functions/rasterization";
+	import { isEventSupported } from "@graphite/utility-functions/platform";
 
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
-	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
-	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
-	import UserInputLabel from "@graphite/components/widgets/labels/UserInputLabel.svelte";
 
 	const BUTTON_LEFT = 0;
 	const BUTTON_MIDDLE = 1;
 
-	const appWindow = getContext<AppWindowState>("appWindow");
 	const editor = getContext<Editor>("editor");
 
 	export let tabMinWidths = false;
@@ -54,52 +49,6 @@
 
 	let tabElements: (LayoutRow | undefined)[] = [];
 
-	function platformModifiedAccelKey(browserReservedKey: boolean): LayoutKeysGroup {
-		// TODO: Remove this by properly feeding these keys from a layout provided by the backend
-
-		const ALT: Key = { key: "Alt", label: "Alt" };
-		const COMMAND: Key = { key: "Command", label: "Command" };
-		const CONTROL: Key = { key: "Control", label: "Ctrl" };
-
-		// Only consider the browser reserved key on web platforms
-		const reservedKey = $appWindow.platform === "Web" ? browserReservedKey : false;
-
-		// Return either Command (Mac) or Control (Windows/Linux), with Alt added if the browser reserves the shortcut
-		if (operatingSystem() === "Mac") return reservedKey ? [ALT, COMMAND] : [COMMAND];
-		return reservedKey ? [CONTROL, ALT] : [CONTROL];
-	}
-
-	function dropFile(e: DragEvent) {
-		if (!e.dataTransfer) return;
-
-		e.preventDefault();
-
-		Array.from(e.dataTransfer.items).forEach(async (item) => {
-			const file = item.getAsFile();
-			if (!file) return;
-
-			if (file.type.includes("svg")) {
-				const svgData = await file.text();
-				editor.handle.pasteSvg(file.name, svgData);
-				return;
-			}
-
-			if (file.type.startsWith("image")) {
-				const imageData = await extractPixelData(file);
-				editor.handle.pasteImage(file.name, new Uint8Array(imageData.data), imageData.width, imageData.height);
-				return;
-			}
-
-			const graphiteFileSuffix = "." + editor.handle.fileExtension();
-			if (file.name.endsWith(graphiteFileSuffix)) {
-				const content = await file.text();
-				const documentName = file.name.slice(0, -graphiteFileSuffix.length);
-				editor.handle.openDocumentFile(documentName, content);
-				return;
-			}
-		});
-	}
-
 	function onEmptySpaceAction(e: MouseEvent) {
 		if (e.target !== e.currentTarget) return;
 		if (e.button === BUTTON_MIDDLE || (e.button === BUTTON_LEFT && e.detail === 2)) emptySpaceAction?.();
@@ -162,66 +111,10 @@
 				</LayoutRow>
 			{/each}
 		</LayoutRow>
-		<!-- <PopoverButton style="VerticalEllipsis">
-			<TextLabel bold={true}>Panel Options</TextLabel>
-			<TextLabel multiline={true}>Coming soon</TextLabel>
-		</PopoverButton> -->
 	</LayoutRow>
 	<LayoutCol class="panel-body">
 		{#if panelType}
 			<svelte:component this={PANEL_COMPONENTS[panelType]} />
-		{:else}
-			<LayoutCol class="empty-panel" on:dragover={(e) => e.preventDefault()} on:drop={dropFile}>
-				<LayoutCol class="top-spacer"></LayoutCol>
-				<LayoutCol class="content-container">
-					<LayoutCol class="content">
-						<LayoutRow class="logotype">
-							<IconLabel icon="GraphiteLogotypeSolid" />
-						</LayoutRow>
-						<LayoutRow class="actions">
-							<table>
-								<tbody>
-									<tr>
-										<td>
-											<TextButton label="New Document" icon="File" flush={true} action={() => editor.handle.newDocumentDialog()} />
-										</td>
-										<td>
-											<UserInputLabel keysWithLabelsGroups={[[...platformModifiedAccelKey(true), { key: "KeyN", label: "N" }]]} />
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<TextButton label="Open Document" icon="Folder" flush={true} action={() => editor.handle.openDocument()} />
-										</td>
-										<td>
-											<UserInputLabel keysWithLabelsGroups={[[...platformModifiedAccelKey(false), { key: "KeyO", label: "O" }]]} />
-										</td>
-									</tr>
-									<tr>
-										<td colspan="2">
-											<TextButton label="Open Demo Artwork" icon="Image" flush={true} action={() => editor.handle.demoArtworkDialog()} />
-										</td>
-									</tr>
-									<tr>
-										<td colspan="2">
-											<TextButton label="Support the Development Fund" icon="Heart" flush={true} action={() => editor.handle.visitUrl("https://graphite.rs/donate/")} />
-										</td>
-									</tr>
-								</tbody>
-							</table>
-						</LayoutRow>
-					</LayoutCol>
-				</LayoutCol>
-				<LayoutCol class="bottom-message">
-					{#if new Date().getFullYear() === 2025}
-						<TextLabel italic={true} disabled={true}>
-							September 2025 release — <a href="https://youtube.com/watch?v=Vl5BA4g3QXM" target="_blank">What's new? (video)</a>
-							— Note: some older documents may render differently and require manual fixes.
-							<a href="https://ec6796b4.graphite-editor.pages.dev/" target="_blank">Need the old version?</a>
-						</TextLabel>
-					{/if}
-				</LayoutCol>
-			</LayoutCol>
 		{/if}
 	</LayoutCol>
 </LayoutCol>
@@ -323,7 +216,7 @@
 						left: -1px;
 						width: 1px;
 						height: 16px;
-						background: var(--color-4-dimgray);
+						background: var(--color-5-dullgray);
 					}
 
 					&:last-of-type {
@@ -335,15 +228,11 @@
 							right: -1px;
 							width: 1px;
 							height: 16px;
-							background: var(--color-4-dimgray);
+							background: var(--color-5-dullgray);
 						}
 					}
 				}
 			}
-
-			// .popover-button {
-			// 	margin: 2px 4px;
-			// }
 		}
 
 		.panel-body {
@@ -354,66 +243,11 @@
 			> div {
 				padding-bottom: 4px;
 			}
-
-			.empty-panel {
-				background: var(--color-2-mildblack);
-				margin: 4px;
-				border-radius: 2px;
-				justify-content: space-between;
-
-				.content-container {
-					flex: 0 0 auto;
-					justify-content: center;
-
-					.content {
-						flex: 0 0 auto;
-						align-items: center;
-
-						.logotype {
-							margin-top: 8px;
-							margin-bottom: 40px;
-
-							svg {
-								width: auto;
-								height: 120px;
-							}
-						}
-
-						.actions {
-							margin-bottom: 8px;
-
-							table {
-								border-spacing: 8px;
-								margin: -8px;
-
-								td {
-									padding: 0;
-								}
-							}
-						}
-					}
-				}
-
-				.top-spacer {
-					flex: 0 1 48px;
-				}
-
-				.bottom-message {
-					flex: 0 0 48px;
-					align-items: center;
-					justify-content: end;
-
-					.text-label {
-						white-space: wrap;
-						margin: 0 1em;
-					}
-				}
-			}
 		}
 
 		// Needed for the viewport hole punch on desktop
 		.viewport-hole-punch &.document-panel,
-		.viewport-hole-punch &.document-panel .panel-body:not(:has(.empty-panel)) {
+		.viewport-hole-punch &.document-panel .panel-body:not(:has(.welcome-panel)) {
 			background: none;
 		}
 	}
diff --git a/frontend/src/components/window/workspace/Workspace.svelte b/frontend/src/components/window/workspace/Workspace.svelte
index a8757b68a..4e5a300b6 100644
--- a/frontend/src/components/window/workspace/Workspace.svelte
+++ b/frontend/src/components/window/workspace/Workspace.svelte
@@ -135,7 +135,7 @@
 			<LayoutRow class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["document"] }} data-subdivision-name="document">
 				<Panel
 					class="document-panel"
-					panelType={$portfolio.documents.length > 0 ? "Document" : undefined}
+					panelType={$portfolio.documents.length > 0 ? "Document" : "Welcome"}
 					tabCloseButtons={true}
 					tabMinWidths={true}
 					tabLabels={documentTabLabels}
diff --git a/frontend/src/editor.ts b/frontend/src/editor.ts
index 2a4aa8110..fcbbba3ee 100644
--- a/frontend/src/editor.ts
+++ b/frontend/src/editor.ts
@@ -1,5 +1,5 @@
 // import { panicProxy } from "@graphite/utility-functions/panic-proxy";
-import init, { setRandomSeed, wasmMemory, EditorHandle, receiveNativeMessage } from "@graphite/../wasm/pkg/graphite_wasm.js";
+import init, { setRandomSeed, wasmMemory, EditorHandle, receiveNativeMessage } from "@graphite/../wasm/pkg/graphite_wasm";
 import { type JsMessageType } from "@graphite/messages";
 import { createSubscriptionRouter, type SubscriptionRouter } from "@graphite/subscription-router";
 
diff --git a/frontend/src/messages.ts b/frontend/src/messages.ts
index bbbd37609..06bedb891 100644
--- a/frontend/src/messages.ts
+++ b/frontend/src/messages.ts
@@ -2,7 +2,7 @@
 
 import { Transform, Type, plainToClass } from "class-transformer";
 
-import { type EditorHandle } from "@graphite/../wasm/pkg/graphite_wasm.js";
+import { type EditorHandle } from "@graphite/../wasm/pkg/graphite_wasm";
 import { type PopoverButtonStyle, type IconName, type IconSize } from "@graphite/icons";
 
 export class JsMessage {
@@ -305,37 +305,14 @@ export class UpdateViewportPhysicalBounds extends JsMessage {
 	readonly height!: number;
 }
 
-export class UpdateInputHints extends JsMessage {
-	@Type(() => HintInfo)
-	readonly hintData!: HintData;
-}
-
-export type HintData = HintGroup[];
-
-export type HintGroup = HintInfo[];
-
-export class HintInfo {
-	readonly keyGroups!: LayoutKeysGroup[];
-
-	readonly keyGroupsMac!: LayoutKeysGroup[] | undefined;
-
-	readonly mouse!: MouseMotion | undefined;
-
-	readonly label!: string;
-
-	readonly plus!: boolean;
-
-	readonly slash!: boolean;
-}
-
 // Rust enum `Key`
 export type KeyRaw = string;
 // Serde converts a Rust `Key` enum variant into this format with both the `Key` variant name (called `RawKey` in TS) and the localized `label` for the key
-export type Key = { key: KeyRaw; label: string };
-export type LayoutKeysGroup = Key[];
-export type ActionKeys = { keys: LayoutKeysGroup };
-
+export type LabeledKey = { key: KeyRaw; label: string };
 export type MouseMotion = "None" | "Lmb" | "Rmb" | "Mmb" | "ScrollUp" | "ScrollDown" | "Drag" | "LmbDouble" | "LmbDrag" | "RmbDrag" | "RmbDouble" | "MmbDrag";
+export type LabeledKeyOrMouseMotion = LabeledKey | MouseMotion;
+export type LabeledShortcut = LabeledKeyOrMouseMotion[];
+export type ActionShortcut = { shortcut: LabeledShortcut };
 
 // Channels can have any range (0-1, 0-255, 0-100, 0-360) in the context they are being used in, these are just containers for the numbers
 export type HSVA = { h: number; s: number; v: number; a: number };
@@ -910,8 +887,8 @@ export class CheckboxInput extends WidgetProps {
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
 
-	@Transform(({ value }: { value: string }) => value || undefined)
-	tooltipShortcut!: string | undefined;
+	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
+	tooltipShortcut!: ActionShortcut | undefined;
 
 	forLabel!: bigint | undefined;
 }
@@ -954,8 +931,8 @@ export class ColorInput extends WidgetProps {
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
 
-	@Transform(({ value }: { value: string }) => value || undefined)
-	tooltipShortcut!: string | undefined;
+	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
+	tooltipShortcut!: ActionShortcut | undefined;
 }
 
 export type FillChoice = Color | Gradient;
@@ -1000,9 +977,7 @@ export type MenuListEntry = {
 	disabled?: boolean;
 	tooltipLabel?: string;
 	tooltipDescription?: string;
-	tooltipShortcut?: string;
-	shortcutKeys?: ActionKeys;
-	shortcutRequiresLock?: boolean;
+	tooltipShortcut?: ActionShortcut;
 	children?: MenuListEntry[][];
 };
 
@@ -1028,8 +1003,8 @@ export class CurveInput extends WidgetProps {
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
 
-	@Transform(({ value }: { value: string }) => value || undefined)
-	tooltipShortcut!: string | undefined;
+	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
+	tooltipShortcut!: ActionShortcut | undefined;
 }
 
 export class DropdownInput extends WidgetProps {
@@ -1051,8 +1026,8 @@ export class DropdownInput extends WidgetProps {
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
 
-	@Transform(({ value }: { value: string }) => value || undefined)
-	tooltipShortcut!: string | undefined;
+	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
+	tooltipShortcut!: ActionShortcut | undefined;
 
 	// Styling
 
@@ -1076,8 +1051,8 @@ export class FontInput extends WidgetProps {
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
 
-	@Transform(({ value }: { value: string }) => value || undefined)
-	tooltipShortcut!: string | undefined;
+	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
+	tooltipShortcut!: ActionShortcut | undefined;
 }
 
 export class IconButton extends WidgetProps {
@@ -1097,8 +1072,8 @@ export class IconButton extends WidgetProps {
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
 
-	@Transform(({ value }: { value: string }) => value || undefined)
-	tooltipShortcut!: string | undefined;
+	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
+	tooltipShortcut!: ActionShortcut | undefined;
 }
 
 export class IconLabel extends WidgetProps {
@@ -1112,8 +1087,8 @@ export class IconLabel extends WidgetProps {
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
 
-	@Transform(({ value }: { value: string }) => value || undefined)
-	tooltipShortcut!: string | undefined;
+	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
+	tooltipShortcut!: ActionShortcut | undefined;
 }
 
 export class ImageButton extends WidgetProps {
@@ -1131,8 +1106,8 @@ export class ImageButton extends WidgetProps {
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
 
-	@Transform(({ value }: { value: string }) => value || undefined)
-	tooltipShortcut!: string | undefined;
+	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
+	tooltipShortcut!: ActionShortcut | undefined;
 }
 
 export class ImageLabel extends WidgetProps {
@@ -1150,8 +1125,13 @@ export class ImageLabel extends WidgetProps {
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
 
-	@Transform(({ value }: { value: string }) => value || undefined)
-	tooltipShortcut!: string | undefined;
+	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
+	tooltipShortcut!: ActionShortcut | undefined;
+}
+
+export class ShortcutLabel extends WidgetProps {
+	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
+	shortcut!: ActionShortcut | undefined;
 }
 
 export type NumberInputIncrementBehavior = "Add" | "Multiply" | "Callback" | "None";
@@ -1168,8 +1148,8 @@ export class NumberInput extends WidgetProps {
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
 
-	@Transform(({ value }: { value: string }) => value || undefined)
-	tooltipShortcut!: string | undefined;
+	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
+	tooltipShortcut!: ActionShortcut | undefined;
 
 	// Disabled
 
@@ -1234,8 +1214,8 @@ export class PopoverButton extends WidgetProps {
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
 
-	@Transform(({ value }: { value: string }) => value || undefined)
-	tooltipShortcut!: string | undefined;
+	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
+	tooltipShortcut!: ActionShortcut | undefined;
 
 	// Body
 	popoverLayout!: LayoutGroup[];
@@ -1251,7 +1231,7 @@ export type RadioEntryData = {
 	icon?: IconName;
 	tooltipLabel?: string;
 	tooltipDescription?: string;
-	tooltipShortcut?: string;
+	tooltipShortcut?: ActionShortcut;
 };
 export type RadioEntries = RadioEntryData[];
 
@@ -1297,8 +1277,8 @@ export class TextAreaInput extends WidgetProps {
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
 
-	@Transform(({ value }: { value: string }) => value || undefined)
-	tooltipShortcut!: string | undefined;
+	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
+	tooltipShortcut!: ActionShortcut | undefined;
 }
 
 export class ParameterExposeButton extends WidgetProps {
@@ -1312,8 +1292,8 @@ export class ParameterExposeButton extends WidgetProps {
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
 
-	@Transform(({ value }: { value: string }) => value || undefined)
-	tooltipShortcut!: string | undefined;
+	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
+	tooltipShortcut!: ActionShortcut | undefined;
 }
 
 export class TextButton extends WidgetProps {
@@ -1339,8 +1319,8 @@ export class TextButton extends WidgetProps {
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
 
-	@Transform(({ value }: { value: string }) => value || undefined)
-	tooltipShortcut!: string | undefined;
+	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
+	tooltipShortcut!: ActionShortcut | undefined;
 
 	menuListChildren!: MenuListEntry[][];
 }
@@ -1356,8 +1336,8 @@ export class BreadcrumbTrailButtons extends WidgetProps {
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
 
-	@Transform(({ value }: { value: string }) => value || undefined)
-	tooltipShortcut!: string | undefined;
+	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
+	tooltipShortcut!: ActionShortcut | undefined;
 }
 
 export class TextInput extends WidgetProps {
@@ -1379,8 +1359,8 @@ export class TextInput extends WidgetProps {
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
 
-	@Transform(({ value }: { value: string }) => value || undefined)
-	tooltipShortcut!: string | undefined;
+	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
+	tooltipShortcut!: ActionShortcut | undefined;
 }
 
 export class TextLabel extends WidgetProps {
@@ -1412,8 +1392,8 @@ export class TextLabel extends WidgetProps {
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
 
-	@Transform(({ value }: { value: string }) => value || undefined)
-	tooltipShortcut!: string | undefined;
+	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
+	tooltipShortcut!: ActionShortcut | undefined;
 
 	forCheckbox!: bigint | undefined;
 }
@@ -1431,8 +1411,8 @@ export class ReferencePointInput extends WidgetProps {
 	@Transform(({ value }: { value: string }) => value || undefined)
 	tooltipDescription!: string | undefined;
 
-	@Transform(({ value }: { value: string }) => value || undefined)
-	tooltipShortcut!: string | undefined;
+	@Transform(({ value }: { value: ActionShortcut }) => value || undefined)
+	tooltipShortcut!: ActionShortcut | undefined;
 }
 
 // WIDGET
@@ -1447,6 +1427,7 @@ const widgetSubTypes = [
 	{ value: IconButton, name: "IconButton" },
 	{ value: ImageButton, name: "ImageButton" },
 	{ value: ImageLabel, name: "ImageLabel" },
+	{ value: ShortcutLabel, name: "ShortcutLabel" },
 	{ value: IconLabel, name: "IconLabel" },
 	{ value: NodeCatalog, name: "NodeCatalog" },
 	{ value: NumberInput, name: "NumberInput" },
@@ -1586,7 +1567,7 @@ export function isWidgetSpanRow(layoutRow: LayoutGroup): layoutRow is WidgetSpan
 	return Boolean((layoutRow as WidgetSpanRow)?.rowWidgets);
 }
 
-export type WidgetTable = { tableWidgets: Widget[][] };
+export type WidgetTable = { tableWidgets: Widget[][]; unstyled: boolean };
 export function isWidgetTable(layoutTable: LayoutGroup): layoutTable is WidgetTable {
 	return Boolean((layoutTable as WidgetTable)?.tableWidgets);
 }
@@ -1643,6 +1624,7 @@ function createLayoutGroup(layoutGroup: any): LayoutGroup {
 	if (layoutGroup.table) {
 		const result: WidgetTable = {
 			tableWidgets: layoutGroup.table.tableWidgets.map(hoistWidgetHolders),
+			unstyled: layoutGroup.table.unstyled,
 		};
 		return result;
 	}
@@ -1671,10 +1653,14 @@ export class UpdateMenuBarLayout extends WidgetDiffUpdate {}
 
 export class UpdateNodeGraphControlBarLayout extends WidgetDiffUpdate {}
 
+export class UpdateWelcomeScreenButtonsLayout extends WidgetDiffUpdate {}
+
 export class UpdatePropertiesPanelLayout extends WidgetDiffUpdate {}
 
 export class UpdateDataPanelLayout extends WidgetDiffUpdate {}
 
+export class UpdateStatusBarHintsLayout extends WidgetDiffUpdate {}
+
 export class UpdateToolOptionsLayout extends WidgetDiffUpdate {}
 
 export class UpdateToolShelfLayout extends WidgetDiffUpdate {}
@@ -1696,21 +1682,21 @@ export const messageMakers: Record<string, MessageMaker> = {
 	SendUIMetadata,
 	TriggerAboutGraphiteLocalizedCommitDate,
 	TriggerDisplayThirdPartyLicensesDialog,
-	TriggerSaveDocument,
-	TriggerSaveFile,
 	TriggerExportImage,
 	TriggerFetchAndOpenDocument,
 	TriggerFontLoad,
 	TriggerImport,
-	TriggerPersistenceRemoveDocument,
-	TriggerPersistenceWriteDocument,
 	TriggerLoadFirstAutoSaveDocument,
 	TriggerLoadPreferences,
 	TriggerLoadRestAutoSaveDocuments,
-	TriggerOpenLaunchDocuments,
 	TriggerOpenDocument,
+	TriggerOpenLaunchDocuments,
 	TriggerPaste,
+	TriggerPersistenceRemoveDocument,
+	TriggerPersistenceWriteDocument,
 	TriggerSaveActiveDocument,
+	TriggerSaveDocument,
+	TriggerSaveFile,
 	TriggerSavePreferences,
 	TriggerTextCommit,
 	TriggerTextCopy,
@@ -1719,6 +1705,8 @@ export const messageMakers: Record<string, MessageMaker> = {
 	UpdateBox,
 	UpdateClickTargets,
 	UpdateContextMenuInformation,
+	UpdateDataPanelLayout,
+	UpdateDataPanelState,
 	UpdateDialogButtons,
 	UpdateDialogColumn1,
 	UpdateDialogColumn2,
@@ -1735,18 +1723,18 @@ export const messageMakers: Record<string, MessageMaker> = {
 	UpdateGraphViewOverlay,
 	UpdateImportReorderIndex,
 	UpdateImportsExports,
-	UpdateInputHints,
 	UpdateInSelectedNetwork,
 	UpdateLayersPanelBottomBarLayout,
 	UpdateLayersPanelControlBarLeftLayout,
 	UpdateLayersPanelControlBarRightLayout,
+	UpdateLayersPanelState,
 	UpdateLayerWidths,
 	UpdateMaximized,
 	UpdateMenuBarLayout,
 	UpdateMouseCursor,
 	UpdateNodeGraphControlBarLayout,
-	UpdateNodeGraphNodes,
 	UpdateNodeGraphErrorDiagnostic,
+	UpdateNodeGraphNodes,
 	UpdateNodeGraphSelection,
 	UpdateNodeGraphTransform,
 	UpdateNodeGraphWires,
@@ -1754,15 +1742,14 @@ export const messageMakers: Record<string, MessageMaker> = {
 	UpdateOpenDocumentsList,
 	UpdatePlatform,
 	UpdatePropertiesPanelLayout,
-	UpdateDataPanelLayout,
-	UpdateDataPanelState,
 	UpdatePropertiesPanelState,
-	UpdateLayersPanelState,
+	UpdateStatusBarHintsLayout,
 	UpdateToolOptionsLayout,
 	UpdateToolShelfLayout,
 	UpdateViewportHolePunch,
 	UpdateViewportPhysicalBounds,
 	UpdateVisibleNodes,
+	UpdateWelcomeScreenButtonsLayout,
 	UpdateWirePathInProgress,
 	UpdateWorkingColorsLayout,
 } as const;
diff --git a/frontend/src/subscription-router.ts b/frontend/src/subscription-router.ts
index bd08e94dc..d807a0085 100644
--- a/frontend/src/subscription-router.ts
+++ b/frontend/src/subscription-router.ts
@@ -1,6 +1,6 @@
 import { plainToInstance } from "class-transformer";
 
-import { type EditorHandle } from "@graphite/../wasm/pkg/graphite_wasm.js";
+import { type EditorHandle } from "@graphite/../wasm/pkg/graphite_wasm";
 import { type JsMessageType, messageMakers, type JsMessage } from "@graphite/messages";
 
 type JsMessageCallback<T extends JsMessage> = (messageData: T) => void;
diff --git a/frontend/src/utility-functions/platform.ts b/frontend/src/utility-functions/platform.ts
index 2dbd5095c..6a7b7365c 100644
--- a/frontend/src/utility-functions/platform.ts
+++ b/frontend/src/utility-functions/platform.ts
@@ -1,4 +1,4 @@
-import { isPlatformNative } from "@graphite/../wasm/pkg/graphite_wasm.js";
+import { isPlatformNative } from "@graphite/../wasm/pkg/graphite_wasm";
 
 export function browserVersion(): string {
 	const agent = window.navigator.userAgent;
diff --git a/frontend/wasm/src/editor_api.rs b/frontend/wasm/src/editor_api.rs
index 45678b54f..57f5e947b 100644
--- a/frontend/wasm/src/editor_api.rs
+++ b/frontend/wasm/src/editor_api.rs
@@ -7,8 +7,9 @@
 use crate::helpers::translate_key;
 use crate::{EDITOR_HANDLE, EDITOR_HAS_CRASHED, Error, MESSAGE_BUFFER};
 use editor::consts::FILE_EXTENSION;
-use editor::messages::input_mapper::utility_types::input_keyboard::ModifierKeys;
+use editor::messages::input_mapper::utility_types::input_keyboard::{Key, KeysGroup, ModifierKeys};
 use editor::messages::input_mapper::utility_types::input_mouse::{EditorMouseState, ScrollDelta};
+use editor::messages::input_mapper::utility_types::misc::ActionShortcut;
 use editor::messages::portfolio::document::utility_types::document_metadata::LayerNodeIdentifier;
 use editor::messages::portfolio::document::utility_types::network_interface::ImportOrExport;
 use editor::messages::portfolio::utility_types::Platform;
@@ -67,6 +68,18 @@ pub fn is_platform_native() -> bool {
 	}
 }
 
+#[wasm_bindgen(js_name = shortcutAltClick)]
+pub fn shortcut_alt_click() -> JsValue {
+	let shortcut = Some(ActionShortcut::Shortcut(KeysGroup(vec![Key::Alt, Key::MouseLeft]).into()));
+	serde_wasm_bindgen::to_value(&shortcut).unwrap()
+}
+
+#[wasm_bindgen(js_name = shortcutF11)]
+pub fn shortcut_f11() -> JsValue {
+	let shortcut = Some(ActionShortcut::Shortcut(KeysGroup(vec![Key::F11]).into()));
+	serde_wasm_bindgen::to_value(&shortcut).unwrap()
+}
+
 // ============================================================================
 
 /// This struct is, via wasm-bindgen, used by JS to interact with the editor backend. It does this by calling functions, which are `impl`ed
@@ -392,15 +405,9 @@ impl EditorHandle {
 		self.dispatch(message);
 	}
 
-	#[wasm_bindgen(js_name = openDocument)]
-	pub fn open_document(&self) {
-		let message = PortfolioMessage::OpenDocument;
-		self.dispatch(message);
-	}
-
-	#[wasm_bindgen(js_name = demoArtworkDialog)]
-	pub fn demo_artwork_dialog(&self) {
-		let message = DialogMessage::RequestDemoArtworkDialog;
+	#[wasm_bindgen(js_name = requestWelcomeScreenButtonsLayout)]
+	pub fn request_welcome_screen_buttons_layout(&self) {
+		let message = PortfolioMessage::RequestWelcomeScreenButtonsLayout;
 		self.dispatch(message);
 	}
 
@@ -637,13 +644,6 @@ impl EditorHandle {
 		Ok(())
 	}
 
-	/// Visit the given URL
-	#[wasm_bindgen(js_name = visitUrl)]
-	pub fn visit_url(&self, url: String) {
-		let message = FrontendMessage::TriggerVisitLink { url };
-		self.dispatch(message);
-	}
-
 	/// Paste layers from a serialized JSON representation
 	#[wasm_bindgen(js_name = pasteSerializedData)]
 	pub fn paste_serialized_data(&self, data: String) {