Pyseph · w1nthinker · May 22, 2026
diff --git a/src/core/Store.luau b/src/core/Store.luau
diff --git a/src/core/Types.luau b/src/core/Types.luau
@@ -49,6 +49,12 @@ export type HistoryRecord = {
 	pinned: boolean,
 }
 
+export type KeyTemplate = {
+	id: string,
+	label: string,
+	template: string,
+}
+
 export type ViewMode = "Tree" | "Code"
 export type BufferViewMode = "Hex" | "Deserializer"
 export type ThemePreset = "Studio" | "Light" | "Dark"
@@ -65,6 +71,9 @@ export type Settings = {
 	clickToOpen: boolean,
 	viewerMode: ViewMode,
 	bufferViewerMode: BufferViewMode,
+	keyTemplates: { KeyTemplate },
+	selectedKeyTemplateId: string,
+	storeKeyTemplateSelections: { [string]: string },
 }
 
 -- Hook types for compression/decompression

diff --git a/src/main.server.luau b/src/main.server.luau
@@ -77,6 +77,9 @@ local function initialize()
 		-- Save just history (called on every history mutation)
 		Settings.saveHistory(plugin)
 	end
+	Store.onSettingsChanged = function()
+		Settings.save(plugin)
+	end
 
 	-- Register built-in hooks
 	BuiltInHooks.registerAll()
@@ -134,4 +137,3 @@ end
 
 -- Cleanup on unload
 plugin.Unloading:Connect(cleanup)
-
diff --git a/src/settings/Settings.luau b/src/settings/Settings.luau
@@ -37,7 +37,7 @@ function Settings.load(plugin: Plugin)
 	local savedSettings = decodeSaved(rawSettings)
 	if savedSettings then
 		local defaults = Store.getDefaultSettings()
-		local merged = Functional.merge(defaults, savedSettings)
+		local merged = Store.normalizeSettings(Functional.merge(defaults, savedSettings))
 		Store.settings(merged)
 	end
 
@@ -51,7 +51,8 @@ end
 
 -- Save all settings to plugin storage
 function Settings.save(plugin: Plugin)
-	local settings = Store.settings()
+	local settings = Store.normalizeSettings(Store.settings())
+	Store.settings(settings)
 	pcall(function()
 		plugin:SetSetting(SETTINGS_KEY, HttpService:JSONEncode(settings))
 	end)
@@ -74,10 +75,18 @@ end
 
 -- Clear all saved data
 function Settings.clear(plugin: Plugin)
+	local previousSettingsChanged = Store.onSettingsChanged
+	local previousHistoryChanged = Store.onHistoryChanged
+	Store.onSettingsChanged = nil
+	Store.onHistoryChanged = nil
+
 	plugin:SetSetting(SETTINGS_KEY, nil)
 	plugin:SetSetting(HISTORY_KEY, nil)
 	Store.resetSettings()
 	Store.clearHistory()
+
+	Store.onSettingsChanged = previousSettingsChanged
+	Store.onHistoryChanged = previousHistoryChanged
 end
 
 return Settings
diff --git a/src/ui/components/Select.luau b/src/ui/components/Select.luau
@@ -101,6 +101,7 @@ local function Select<T>(props: SelectProps<T>): Frame
 			BorderSizePixel = 0,
 			Text = "",
 			AutoButtonColor = false,
+			ZIndex = 101,
 
 			Activated = function()
 				props.onChange(option.value)
@@ -123,6 +124,7 @@ local function Select<T>(props: SelectProps<T>): Frame
 			create "Frame" {
 				Size = UDim2.fromScale(1, 1),
 				BackgroundTransparency = 1,
+				ZIndex = 102,
 
 				create "UIListLayout" {
 					FillDirection = Enum.FillDirection.Horizontal,
@@ -136,6 +138,7 @@ local function Select<T>(props: SelectProps<T>): Frame
 						Size = UDim2.fromOffset(16, 16),
 						BackgroundTransparency = 1,
 						Image = option.icon,
+						ZIndex = 103,
 						ImageColor3 = function()
 							local c = theme.colors()
 							if isSelected() then
@@ -150,6 +153,7 @@ local function Select<T>(props: SelectProps<T>): Frame
 					LayoutOrder = 2,
 					Size = UDim2.new(1, -24, 1, 0),
 					BackgroundTransparency = 1,
+					ZIndex = 102,
 
 					create "UIListLayout" {
 						SortOrder = Enum.SortOrder.LayoutOrder,
@@ -161,6 +165,7 @@ local function Select<T>(props: SelectProps<T>): Frame
 						Size = UDim2.new(1, 0, 0, 18),
 						BackgroundTransparency = 1,
 						Text = option.label,
+						ZIndex = 103,
 						TextColor3 = function()
 							local c = theme.colors()
 							if isSelected() then
@@ -179,6 +184,7 @@ local function Select<T>(props: SelectProps<T>): Frame
 							Size = UDim2.new(1, 0, 0, 14),
 							BackgroundTransparency = 1,
 							Text = option.description,
+							ZIndex = 103,
 							TextColor3 = function()
 								local c = theme.colors()
 								if isSelected() then
@@ -200,6 +206,7 @@ local function Select<T>(props: SelectProps<T>): Frame
 					BackgroundTransparency = 1,
 					Image = theme.icons.check,
 					ImageColor3 = Color3.new(1, 1, 1),
+					ZIndex = 103,
 					Visible = isSelected,
 				},
 			},
@@ -211,6 +218,9 @@ local function Select<T>(props: SelectProps<T>): Frame
 		AutomaticSize = Enum.AutomaticSize.Y,
 		BackgroundTransparency = 1,
 		ClipsDescendants = false,
+		ZIndex = function()
+			return if isOpen() then 100 else 1
+		end,
 
 		create "UIListLayout" {
 			SortOrder = Enum.SortOrder.LayoutOrder,
@@ -247,6 +257,9 @@ local function Select<T>(props: SelectProps<T>): Frame
 			BorderSizePixel = 0,
 			Text = "",
 			AutoButtonColor = false,
+			ZIndex = function()
+				return if isOpen() then 100 else 1
+			end,
 
 			Activated = function()
 				if not disabled() then
@@ -281,6 +294,9 @@ local function Select<T>(props: SelectProps<T>): Frame
 			create "Frame" {
 				Size = UDim2.fromScale(1, 1),
 				BackgroundTransparency = 1,
+				ZIndex = function()
+					return if isOpen() then 101 else 2
+				end,
 
 				create "UIListLayout" {
 					FillDirection = Enum.FillDirection.Horizontal,
@@ -292,6 +308,9 @@ local function Select<T>(props: SelectProps<T>): Frame
 					Size = UDim2.new(1, -24, 1, 0),
 					BackgroundTransparency = 1,
 					Text = displayText,
+					ZIndex = function()
+						return if isOpen() then 102 else 3
+					end,
 					TextColor3 = function()
 						local c = theme.colors()
 						local selected = selectedOption()
@@ -309,6 +328,9 @@ local function Select<T>(props: SelectProps<T>): Frame
 					Size = UDim2.fromOffset(16, 16),
 					BackgroundTransparency = 1,
 					Image = theme.icons.chevronDown,
+					ZIndex = function()
+						return if isOpen() then 102 else 3
+					end,
 					ImageColor3 = function()
 						return theme.colors().foregroundMuted
 					end,
@@ -325,7 +347,10 @@ local function Select<T>(props: SelectProps<T>): Frame
 			Position = UDim2.new(0, 0, 0, if props.label then 62 else 40),
 			Size = UDim2.new(1, 0, 0, 0),
 			AutomaticSize = Enum.AutomaticSize.Y,
-			BackgroundTransparency = 1,
+			BackgroundColor3 = function()
+				return theme.colors().backgroundSecondary
+			end,
+			BackgroundTransparency = 0,
 			BorderSizePixel = 0,
 			Visible = isOpen,
 			ZIndex = 100,
@@ -349,7 +374,10 @@ local function Select<T>(props: SelectProps<T>): Frame
 
 			create "ScrollingFrame" {
 				Size = UDim2.new(1, 0, 0, math.min(#props.options * 48, 240)),
-				BackgroundTransparency = 1,
+				BackgroundColor3 = function()
+					return theme.colors().backgroundSecondary
+				end,
+				BackgroundTransparency = 0,
 				ScrollBarThickness = 4,
 				ScrollBarImageColor3 = function()
 					return theme.colors().scrollbar

diff --git a/src/ui/components/TextInput.luau b/src/ui/components/TextInput.luau
@@ -21,6 +21,9 @@ export type TextInputProps = {
 	validate: ((value: string) -> (boolean, string?))?,
 	multiline: boolean?,
 	password: boolean?,
+	liveUpdate: boolean?,
+	onFocus: (() -> ())?,
+	onBlur: (() -> ())?,
 	label: (string | () -> string)?,
 	hint: string?,
 	prefix: string?,
@@ -203,13 +206,19 @@ local function TextInput(props: TextInputProps): Frame
 
 							FocusLost = function()
 								isFocused(false)
+								if props.onBlur then
+									props.onBlur()
+								end
 								if textBoxRef then
 									handleChange(textBoxRef.Text)
 								end
 							end,
 
 							Focused = function()
 								isFocused(true)
+								if props.onFocus then
+									props.onFocus()
+								end
 							end,
 
 							Changed = function(property: string)
@@ -245,6 +254,9 @@ local function TextInput(props: TextInputProps): Frame
 
 						FocusLost = function(enterPressed: boolean)
 							isFocused(false)
+							if props.onBlur then
+								props.onBlur()
+							end
 							if textBoxRef then
 								local currentText = textBoxRef.Text
 								handleChange(currentText)
@@ -256,6 +268,15 @@ local function TextInput(props: TextInputProps): Frame
 
 						Focused = function()
 							isFocused(true)
+							if props.onFocus then
+								props.onFocus()
+							end
+						end,
+
+						Changed = function(property: string)
+							if props.liveUpdate and property == "Text" and textBoxRef then
+								handleChange(textBoxRef.Text)
+							end
 						end,
 					},