Added selectable container that can be focused with keyboard shortcut.

components/selectable_container.tscn

@@ -0,0 +1,54 @@
+[gd_scene format=3 uid="uid://s7f003dyd60i"]
+
+[ext_resource type="Script" uid="uid://cxerh1gbkrop2" path="res://scripts/selectable_container.gd" id="1_focus"]
+
+[sub_resource type="LabelSettings" id="LabelSettings_0fpm5"]
+font_size = 24
+
+[node name="SelectableContainer" type="MarginContainer" unique_id=903061831]
+anchors_preset = -1
+anchor_right = 1.0
+anchor_bottom = 1.0
+offset_left = 4.0
+offset_top = 4.0
+offset_right = -4.0
+offset_bottom = -4.0
+grow_horizontal = 2
+grow_vertical = 2
+script = ExtResource("1_focus")
+
+[node name="PanelContainer" type="PanelContainer" parent="." unique_id=555833581]
+layout_mode = 2
+
+[node name="MarginContainer" type="MarginContainer" parent="." unique_id=701103853]
+layout_mode = 2
+theme_override_constants/margin_left = 16
+theme_override_constants/margin_top = 16
+theme_override_constants/margin_right = 16
+theme_override_constants/margin_bottom = 16
+
+[node name="VBoxContainer" type="VBoxContainer" parent="MarginContainer" unique_id=1200250605]
+layout_mode = 2
+
+[node name="HBoxContainer" type="HBoxContainer" parent="MarginContainer/VBoxContainer" unique_id=157590431]
+layout_mode = 2
+size_flags_vertical = 0
+
+[node name="Label" type="Label" parent="MarginContainer/VBoxContainer/HBoxContainer" unique_id=1765103253]
+layout_mode = 2
+size_flags_horizontal = 0
+size_flags_vertical = 1
+text = "Panel"
+label_settings = SubResource("LabelSettings_0fpm5")
+
+[node name="Button" type="Button" parent="MarginContainer/VBoxContainer/HBoxContainer" unique_id=519793654]
+layout_mode = 2
+size_flags_horizontal = 10
+text = "F1"
+
+[node name="HSeparator" type="HSeparator" parent="MarginContainer/VBoxContainer" unique_id=1046926303]
+layout_mode = 2
+
+[node name="Content" type="VBoxContainer" parent="MarginContainer/VBoxContainer" unique_id=1706387279]
+layout_mode = 2
+size_flags_vertical = 3

components/terminal_panel.tscn

@@ -0,0 +1,26 @@
+[gd_scene format=3 uid="uid://chflnxm5486kc"]
+
+[ext_resource type="PackedScene" uid="uid://s7f003dyd60i" path="res://components/selectable_container.tscn" id="1_panel"]
+[ext_resource type="Script" uid="uid://cjghwf3b858xu" path="res://scripts/terminal_panel.gd" id="2_terminal"]
+
+[node name="TerminalPanel" unique_id=690518475 instance=ExtResource("1_panel")]
+script = ExtResource("2_terminal")
+title = "ROV terminal"
+initial_focus = NodePath("Command")
+
+[node name="Label" parent="MarginContainer/VBoxContainer/HBoxContainer" parent_id_path=PackedInt32Array(157590431) index="0" unique_id=1765103253]
+text = "ROV terminal"
+
+[node name="Output" type="RichTextLabel" parent="." index="2" unique_id=1341181181]
+custom_minimum_size = Vector2(260, 100)
+layout_mode = 2
+size_flags_vertical = 3
+focus_mode = 2
+text = "SSH transport not connected.
+Press the panel shortcut, then type a command.
+"
+scroll_following = true
+
+[node name="Command" type="LineEdit" parent="." index="3" unique_id=701067863]
+layout_mode = 2
+placeholder_text = "Enter command…"

project.godot

@@ -11,8 +11,7 @@ config_version=5
 [application]
 
 config/name="SurfaceSide-UI"
-run/main_scene="uid://63m7uewe6luk"
-config/features=PackedStringArray("4.6", "Forward Plus")
+config/features=PackedStringArray("4.7", "Forward Plus")
 config/icon="res://icon.svg"
 
 [display]
@@ -21,6 +20,10 @@ window/size/mode=2
 window/subwindows/embed_subwindows=false
 window/vsync/vsync_mode=3
 
+[gui]
+
+theme/custom="res://themes/theme.tres"
+
 [physics]
 
 3d/physics_engine="Jolt Physics"
@@ -28,3 +31,4 @@ window/vsync/vsync_mode=3
 [rendering]
 
 rendering_device/driver.windows="d3d12"
+environment/defaults/default_clear_color=Color(0.067, 0.055, 0.067, 1)

scenes/theme_gallery.tscn

@@ -0,0 +1,11 @@
+[gd_scene format=3 uid="uid://b3gfs3dear3an"]
+
+[ext_resource type="Script" uid="uid://cublhdarwsfbk" path="res://scripts/theme_gallery.gd" id="1"]
+
+[node name="ThemeGallery" type="MarginContainer" unique_id=1432651951]
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2
+script = ExtResource("1")

scripts/selectable_container.gd

@@ -0,0 +1,152 @@
+@tool
+class_name SelectableContainer
+extends MarginContainer
+
+signal activated
+signal deactivated
+
+@export var title: String = "Panel":
+	set(value):
+		title = value
+		_refresh_header()
+@export var focus_key: Key = KEY_F1:
+	set(value):
+		focus_key = value
+		_refresh_header()
+@export_node_path("Control") var initial_focus: NodePath
+
+var is_active: bool = false
+var _last_focus: Control
+var _shortcut_available: bool = true
+var _initial_focus_control: Control
+@onready var content: VBoxContainer = $MarginContainer/VBoxContainer/Content
+@onready var _panel: PanelContainer = $PanelContainer
+@onready var _shortcut: Button = $MarginContainer/VBoxContainer/HBoxContainer/Button
+
+func _ready() -> void:
+	_refresh_header()
+	if Engine.is_editor_hint():
+		return
+	# Resolve authored paths before reparenting changes the runtime hierarchy.
+	_initial_focus_control = get_node_or_null(initial_focus) as Control
+	for child in get_children():
+		_route_content_child(child)
+	child_entered_tree.connect(_on_child_entered_tree)
+	add_to_group("keyboard_focus_containers")
+	focus_mode = Control.FOCUS_NONE
+	_shortcut.focus_mode = Control.FOCUS_NONE
+	_shortcut.pressed.connect(activate)
+	for other in get_tree().get_nodes_in_group("keyboard_focus_containers"):
+		if other != self and other.get_viewport() == get_viewport() and other.focus_key == focus_key and other._shortcut_available:
+			_shortcut_available = false
+			_shortcut.disabled = true
+			_shortcut.tooltip_text = "Shortcut already assigned to " + other.title
+			push_warning("Duplicate panel shortcut: " + OS.get_keycode_string(focus_key))
+			break
+	get_viewport().gui_focus_changed.connect(_on_focus_changed)
+	visibility_changed.connect(_on_visibility_changed)
+	_update_style()
+	content.focus_behavior_recursive = Control.FOCUS_BEHAVIOR_DISABLED
+
+func _refresh_header() -> void:
+	var label := get_node_or_null("MarginContainer/VBoxContainer/HBoxContainer/Label") as Label
+	var badge := get_node_or_null("MarginContainer/VBoxContainer/HBoxContainer/Button") as Button
+	if label != null:
+		label.text = title
+	if badge != null:
+		badge.text = OS.get_keycode_string(focus_key) + (" · ACTIVE" if is_active else "")
+
+func _on_child_entered_tree(child: Node) -> void:
+	# SceneTree may still be adding the node when this signal fires.
+	_route_content_child.call_deferred(child)
+
+func _route_content_child(child: Node) -> void:
+	if not is_instance_valid(child) or child.get_parent() != self:
+		return
+	if child == _panel or child == $MarginContainer:
+		return
+	child.reparent(content, false)
+
+func activate() -> void:
+	if Engine.is_editor_hint() or not is_visible_in_tree() or not _shortcut_available:
+		return
+	for other in get_tree().get_nodes_in_group("keyboard_focus_containers"):
+		if other != self and other.get_viewport() == get_viewport():
+			other.deactivate()
+	var was_active := is_active
+	is_active = true
+	focus_mode = Control.FOCUS_ALL
+	content.focus_behavior_recursive = Control.FOCUS_BEHAVIOR_ENABLED
+	_update_style()
+	var target: Control = _initial_focus_control if is_instance_valid(_initial_focus_control) else null
+	if is_instance_valid(_last_focus) and _last_focus.is_visible_in_tree():
+		target = _last_focus
+	if target != null and target.is_visible_in_tree() and target.get_focus_mode_with_override() != Control.FOCUS_NONE:
+		target.grab_focus()
+	else:
+		var controls := _focusable_controls(content)
+		if controls.is_empty():
+			grab_focus()
+		else:
+			controls[0].grab_focus()
+	if not was_active:
+		activated.emit()
+
+func deactivate() -> void:
+	if not is_active:
+		return
+	is_active = false
+	focus_mode = Control.FOCUS_NONE
+	var focus_owner := get_viewport().gui_get_focus_owner()
+	if focus_owner == self or (focus_owner != null and is_ancestor_of(focus_owner)):
+		focus_owner.release_focus()
+	content.focus_behavior_recursive = Control.FOCUS_BEHAVIOR_DISABLED
+	_update_style()
+	deactivated.emit()
+
+func _input(event: InputEvent) -> void:
+	if Engine.is_editor_hint() or not event is InputEventKey or not is_visible_in_tree():
+		return
+	var key := event as InputEventKey
+	if key.keycode == focus_key and not key.alt_pressed and not key.ctrl_pressed and not key.meta_pressed and not key.shift_pressed and _shortcut_available:
+		# Consume releases and repeats as well, so shortcuts never become input.
+		get_viewport().set_input_as_handled()
+		if key.pressed and not key.echo:
+			activate()
+		return
+	if not is_active or not key.pressed:
+		return
+	if key.keycode == KEY_ESCAPE:
+		deactivate()
+		get_viewport().set_input_as_handled()
+	elif key.keycode == KEY_TAB and not key.ctrl_pressed and not key.alt_pressed and not key.meta_pressed:
+		var controls := _focusable_controls(content)
+		if not controls.is_empty():
+			var index := controls.find(get_viewport().gui_get_focus_owner())
+			var step := -1 if key.shift_pressed else 1
+			controls[posmod(index + step, controls.size())].grab_focus()
+		get_viewport().set_input_as_handled()
+
+func _focusable_controls(node: Node) -> Array[Control]:
+	var result: Array[Control] = []
+	for child in node.get_children():
+		if child is Control and child.is_visible_in_tree() and child.get_focus_mode_with_override() == Control.FOCUS_ALL:
+			if not (child is BaseButton and child.disabled):
+				result.append(child)
+		result.append_array(_focusable_controls(child))
+	return result
+
+func _on_focus_changed(control: Control) -> void:
+	if is_active and control != null and is_ancestor_of(control):
+		_last_focus = control
+	elif is_active and control != self:
+		deactivate()
+
+func _on_visibility_changed() -> void:
+	if not is_visible_in_tree():
+		deactivate()
+
+func _update_style() -> void:
+	var style_name := "panel_active" if is_active else "panel_inactive"
+	_panel.add_theme_stylebox_override("panel", get_theme_stylebox(style_name, "SurfaceSide"))
+	_refresh_header()

scripts/selectable_container.gd.uid

@@ -0,0 +1 @@
+uid://cxerh1gbkrop2

scripts/terminal_panel.gd

@@ -0,0 +1,25 @@
+@tool
+extends SelectableContainer
+signal command_requested(command: String)
+
+@onready var output: RichTextLabel = $Output
+@onready var command_input: LineEdit = $Command
+
+func _ready() -> void:
+	super._ready()
+	if Engine.is_editor_hint():
+		return
+	command_input.text_submitted.connect(_submit)
+
+func _submit(command: String) -> void:
+	if command.strip_edges().is_empty():
+		return
+	append_output("$ " + command + "\n")
+	command_input.clear()
+	if command_requested.get_connections().is_empty():
+		append_output("No SSH transport connected. Command was not sent.\n")
+	else:
+		command_requested.emit(command)
+
+func append_output(text: String) -> void:
+	output.add_text(text)

scripts/terminal_panel.gd.uid

@@ -0,0 +1 @@
+uid://cjghwf3b858xu

scripts/theme_gallery.gd

@@ -0,0 +1,75 @@
+extends MarginContainer
+
+func _ready() -> void:
+	for side in ["left", "top", "right", "bottom"]:
+		add_theme_constant_override("margin_" + side, 24)
+	var scroll := ScrollContainer.new()
+	scroll.horizontal_scroll_mode = ScrollContainer.SCROLL_MODE_DISABLED
+	add_child(scroll)
+	var layout := VBoxContainer.new()
+	layout.size_flags_horizontal = Control.SIZE_EXPAND_FILL
+	layout.add_theme_constant_override("separation", 18)
+	scroll.add_child(layout)
+	var heading := Label.new()
+	heading.text = "SURFACESIDE / THEME GALLERY"
+	heading.add_theme_font_size_override("font_size", 28)
+	layout.add_child(heading)
+	var subtitle := Label.new()
+	subtitle.text = "Square corners · orange focus · plum accents · choose a theme below"
+	subtitle.autowrap_mode = TextServer.AUTOWRAP_WORD_SMART
+	layout.add_child(subtitle)
+	var picker := OptionButton.new()
+	picker.add_item("Soft / minimal borders")
+	picker.add_item("Original / high contrast")
+	picker.item_selected.connect(func(index: int) -> void:
+		theme = load("res://themes/theme.tres" if index == 0 else "res://themes/theme_highcontrast.tres")
+		for scope in get_tree().get_nodes_in_group("keyboard_focus_containers"):
+			if is_ancestor_of(scope):
+				scope._update_style()
+	)
+	layout.add_child(picker)
+	var panel := PanelContainer.new()
+	layout.add_child(panel)
+	var controls := VBoxContainer.new()
+	controls.add_theme_constant_override("separation", 16)
+	panel.add_child(controls)
+	var buttons := HFlowContainer.new()
+	buttons.add_theme_constant_override("h_separation", 12)
+	controls.add_child(buttons)
+	for state in ["Normal", "Toggle / pressed", "Disabled"]:
+		var button := Button.new()
+		button.text = state
+		button.toggle_mode = state == "Toggle / pressed"
+		button.button_pressed = button.toggle_mode
+		button.disabled = state == "Disabled"
+		buttons.add_child(button)
+	var option := OptionButton.new()
+	option.add_item("Primary display")
+	option.add_item("Secondary display")
+	buttons.add_child(option)
+	var check := CheckBox.new()
+	check.text = "Telemetry enabled"
+	check.button_pressed = true
+	controls.add_child(check)
+	var input := LineEdit.new()
+	input.placeholder_text = "Command input — Tab to inspect focus"
+	controls.add_child(input)
+	var text := TextEdit.new()
+	text.custom_minimum_size.y = 110
+	text.text = "Operator notes\nSelect text to inspect the selection color."
+	controls.add_child(text)
+	var slider := HSlider.new()
+	slider.value = 65
+	controls.add_child(slider)
+	var progress := ProgressBar.new()
+	progress.value = 65
+	controls.add_child(progress)
+	slider.value_changed.connect(func(value: float) -> void: progress.value = value)
+	var tabs := TabContainer.new()
+	tabs.custom_minimum_size.y = 100
+	controls.add_child(tabs)
+	for title in ["Status", "Diagnostics"]:
+		var label := Label.new()
+		label.name = title
+		label.text = "  " + title + " / All systems ready"
+		tabs.add_child(label)

scripts/theme_gallery.gd.uid

@@ -0,0 +1 @@
+uid://cublhdarwsfbk

themes/build_theme.gd

@@ -0,0 +1,119 @@
+extends SceneTree
+
+const ACCENT = Color("ff7b00")
+const SECONDARY = Color("402e32")
+const CLEAR = Color.TRANSPARENT
+
+const HIGH_CONTRAST = {
+	"text": Color("f5f1ed"), "muted_text": Color("b9b0b3"),
+	"active_text": Color("141114"), "surface": Color("201b1f"),
+	"panel": Color("201b1f"), "input": Color("141114"),
+	"hover": SECONDARY, "pressed": ACCENT, "fill": ACCENT,
+	"disabled": Color("191619"), "border": Color("817278"),
+	"disabled_border": Color("51464c"), "focus": ACCENT,
+	"separator": SECONDARY, "thumb": Color("b9b0b3"),
+	"fill_text": Color("141114"),
+}
+const SOFT = {
+	"text": Color("e7e0dd"), "muted_text": Color("ada2a8"),
+	"active_text": Color("f5f1ed"), "surface": Color("292126"),
+	"panel": Color("201b1f"), "input": Color("141114"),
+	"hover": SECONDARY, "pressed": SECONDARY,
+	"fill": ACCENT, "disabled": Color("211c20"),
+	"border": CLEAR, "disabled_border": CLEAR,
+	"focus": ACCENT, "separator": SECONDARY,
+	"thumb": Color("d2c6c9"), "fill_text": Color("141114"),
+}
+
+func _initialize() -> void:
+	for high_contrast in [false, true]:
+		var palette: Dictionary = HIGH_CONTRAST if high_contrast else SOFT
+		var path := "res://themes/theme_highcontrast.tres" if high_contrast else "res://themes/theme.tres"
+		var error := ResourceSaver.save(_build_theme(palette, high_contrast), path)
+		if error != OK:
+			push_error("Could not save %s: %s" % [path, error_string(error)])
+			quit(error)
+			return
+	quit()
+
+func _build_theme(palette: Dictionary, high_contrast: bool) -> Theme:
+	var theme := ThemeDB.get_default_theme().duplicate(true) as Theme
+	theme.default_font_size = 18
+	for type in theme.get_type_list():
+		for name in theme.get_font_size_list(type):
+			theme.set_font_size(name, type, 18)
+	for type in theme.get_type_list():
+		for name in theme.get_color_list(type):
+			var color: Color = palette.text
+			if "disabled" in name or "placeholder" in name or "readonly" in name:
+				color = palette.muted_text
+			elif "selection" in name:
+				color = SECONDARY
+			elif name in ["font_pressed_color", "font_hover_pressed_color"] and type in ["Button", "OptionButton", "MenuButton"]:
+				color = palette.active_text
+			elif name == "font_selected_color" and type == "TabContainer":
+				color = palette.active_text
+			elif name == "font_color" and type == "ProgressBar":
+				color = palette.fill_text
+			elif "background" in name:
+				color = CLEAR
+			elif "caret" in name or "accent" in name:
+				color = ACCENT
+			elif "shadow" in name or "outline" in name:
+				color = CLEAR
+			theme.set_color(name, type, color)
+		for name in theme.get_stylebox_list(type):
+			var original := theme.get_stylebox(name, type)
+			if original is StyleBoxEmpty:
+				continue
+			var style := StyleBoxFlat.new()
+			for side in range(4):
+				style.set_content_margin(side, maxf(original.get_content_margin(side), 4.0))
+			style.bg_color = palette.surface
+			style.border_color = palette.border
+			style.set_border_width_all(1 if high_contrast else 0)
+			if "hover" in name:
+				style.bg_color = palette.hover
+				style.border_color = palette.focus
+			if "pressed" in name or ("selected" in name and "unselected" not in name) or name == "fill" or name.begins_with("grabber"):
+				style.bg_color = palette.pressed
+				if not high_contrast:
+					style.border_width_bottom = 1
+				style.border_color = palette.focus
+			if name == "fill" or name.begins_with("grabber"):
+				style.bg_color = palette.fill
+				if not high_contrast:
+					style.set_border_width_all(0)
+			if "disabled" in name or "read_only" in name:
+				style.bg_color = palette.disabled
+				style.border_color = palette.disabled_border
+			if "focus" in name:
+				style.draw_center = false
+				style.border_color = palette.focus
+				style.set_border_width_all(2 if high_contrast else 1)
+			if type in ["LineEdit", "TextEdit", "CodeEdit", "Tree", "ItemList"] and name == "normal":
+				style.bg_color = palette.input
+			if type in ["Panel", "PanelContainer", "PopupPanel", "PopupMenu", "Window", "AcceptDialog"]:
+				style.bg_color = palette.panel
+			if type in ["HSeparator", "VSeparator"]:
+				style.bg_color = palette.separator
+				style.border_color = palette.separator
+			theme.set_stylebox(name, type, style)
+	# Slider thumbs use square textures instead of the engine's round icons.
+	for type in ["HSlider", "VSlider"]:
+		for name in ["grabber", "grabber_highlight", "grabber_disabled"]:
+			var bitmap := Image.create(14, 18, false, Image.FORMAT_RGBA8)
+			bitmap.fill(ACCENT if name == "grabber_highlight" else palette.thumb)
+			theme.set_icon(name, type, ImageTexture.create_from_image(bitmap))
+	# Dedicated panel states used by the keyboard focus containers.
+	var panel := theme.get_stylebox("panel", "PanelContainer").duplicate() as StyleBoxFlat
+	theme.set_stylebox("panel_inactive", "SurfaceSide", panel)
+	var active := panel.duplicate() as StyleBoxFlat
+	active.border_color = palette.focus
+	active.set_border_width_all(2 if high_contrast else 0)
+	if not high_contrast:
+		active.border_width_top = 2
+	theme.set_stylebox("panel_active", "SurfaceSide", active)
+	theme.set_color("accent", "SurfaceSide", ACCENT)
+	theme.set_color("secondary", "SurfaceSide", SECONDARY)
+	return theme

themes/build_theme.gd.uid

@@ -0,0 +1 @@
+uid://dc7rmiaqv0l81