roblox-opencode 1.0.0 → 1.0.2

package/skills/roblox-gui-fusion/references/settings-menu.luau

@@ -1,579 +1,579 @@
---[[
-    Settings Menu — Fusion 0.3
-    Source patterns: VirtualButFake/fusion-components (MIT), dphfox/Fusion docs
-    Ported to Fusion 0.3 scoped syntax.
-    
-    A complete settings menu with:
-    - Tabbed sections (Audio, Graphics, Controls)
-    - Sliders (volume, render distance)
-    - Toggle switches (fullscreen, vsync, show FPS)
-    - Dropdown select (quality preset)
-    - Spring open/close animation
-    - Saves to a settings table (caller persists however they want)
-    
-    ADAPT THIS:
-    - Replace settings entries with your game's actual settings
-    - Wire OnSettingChanged to your DataStore or local storage
-    - Add/remove tabs and controls as needed
-    - Adjust colors to match your game's palette
-    
-    Requires: Fusion 0.3 (wally: elttob/fusion@0.3.0)
-]]
-
-local ReplicatedStorage = game:GetService("ReplicatedStorage")
-local Players = game:GetService("Players")
-
--- Adjust this path to match your project structure:
--- Wally:    require(ReplicatedStorage.Packages.Fusion)
--- Custom:   require(game.ReplicatedStorage.Fusion)
--- Vendored: (default, from roblox-opencode setup)
-local Fusion = require(ReplicatedStorage[".opencode"].vendor.fusion)
-local scoped = Fusion.scoped
-local peek = Fusion.peek
-local Children = Fusion.Children
-local OnEvent = Fusion.OnEvent
-
---------------------------------------------------------------------------------
--- Types
---------------------------------------------------------------------------------
-
-type SettingValue = number | boolean | string
-
-type SliderSetting = {
-    Type: "slider",
-    Label: string,
-    Key: string,
-    Min: number,
-    Max: number,
-    Step: number?,
-    Default: number,
-}
-
-type ToggleSetting = {
-    Type: "toggle",
-    Label: string,
-    Key: string,
-    Default: boolean,
-}
-
-type DropdownSetting = {
-    Type: "dropdown",
-    Label: string,
-    Key: string,
-    Options: { string },
-    Default: string,
-}
-
-type SettingEntry = SliderSetting | ToggleSetting | DropdownSetting
-
-type SettingsTab = {
-    Name: string,
-    Icon: string?,
-    Settings: { SettingEntry },
-}
-
-type SettingsProps = {
-    Visible: Fusion.Value<boolean>,
-    Tabs: { SettingsTab },
-    Values: { [string]: Fusion.Value<SettingValue> },
-    OnSettingChanged: (key: string, value: SettingValue) -> (),
-    OnClose: () -> (),
-}
-
---------------------------------------------------------------------------------
--- Theme
---------------------------------------------------------------------------------
-
-local COLORS = {
-    Background = Color3.fromRGB(18, 18, 26),
-    Surface = Color3.fromRGB(28, 28, 40),
-    SurfaceAlt = Color3.fromRGB(35, 35, 48),
-    Primary = Color3.fromRGB(80, 140, 255),
-    Text = Color3.fromRGB(235, 235, 240),
-    TextSecondary = Color3.fromRGB(155, 155, 170),
-    TextMuted = Color3.fromRGB(90, 90, 105),
-    ToggleOn = Color3.fromRGB(80, 200, 120),
-    ToggleOff = Color3.fromRGB(60, 60, 75),
-    SliderTrack = Color3.fromRGB(45, 45, 60),
-    SliderFill = Color3.fromRGB(80, 140, 255),
-    TabActive = Color3.fromRGB(80, 140, 255),
-    TabInactive = Color3.fromRGB(60, 60, 75),
-}
-
-local FONT = {
-    Title = Font.new("rbxasset://fonts/families/GothamSSm.json", Enum.FontWeight.Bold),
-    Body = Font.new("rbxasset://fonts/families/GothamSSm.json", Enum.FontWeight.Medium),
-    Small = Font.new("rbxasset://fonts/families/GothamSSm.json", Enum.FontWeight.Regular),
-}
-
---------------------------------------------------------------------------------
--- Toggle Switch component
---------------------------------------------------------------------------------
-
-local function ToggleSwitch(
-    scope: Fusion.Scope,
-    state: Fusion.Value<boolean>,
-    onToggle: (newState: boolean) -> ()
-)
-    return scope:New "TextButton" {
-        Name = "Toggle",
-        BackgroundColor3 = scope:Spring(scope:Computed(function(use)
-            return if use(state) then COLORS.ToggleOn else COLORS.ToggleOff
-        end), 25),
-        Size = UDim2.fromOffset(40, 22),
-        AutoButtonColor = false,
-        Text = "",
-
-        [OnEvent "Activated"] = function()
-            local newVal = not peek(state)
-            state:set(newVal)
-            onToggle(newVal)
-        end,
-
-        [Children] = {
-            scope:New "UICorner" { CornerRadius = UDim.new(1, 0) },
-
-            -- Knob
-            scope:New "Frame" {
-                Name = "Knob",
-                AnchorPoint = Vector2.new(0, 0.5),
-                Position = scope:Spring(scope:Computed(function(use)
-                    return if use(state)
-                        then UDim2.new(1, -20, 0.5, 0)
-                        else UDim2.new(0, 2, 0.5, 0)
-                end), 30),
-                Size = UDim2.fromOffset(18, 18),
-                BackgroundColor3 = COLORS.Text,
-                [Children] = { scope:New "UICorner" { CornerRadius = UDim.new(1, 0) } },
-            },
-        },
-    }
-end
-
---------------------------------------------------------------------------------
--- Slider component
---------------------------------------------------------------------------------
-
-local function SettingsSlider(
-    scope: Fusion.Scope,
-    value: Fusion.Value<number>,
-    min: number,
-    max: number,
-    step: number?,
-    onChange: (newValue: number) -> ()
-)
-    local effectiveStep = step or 1
-    local range = max - min
-
-    local percentage = scope:Computed(function(use)
-        return (use(value) - min) / range
-    end)
-
-    return scope:New "Frame" {
-        Name = "SliderContainer",
-        BackgroundTransparency = 1,
-        Size = UDim2.new(1, 0, 0, 20),
-
-        [Children] = {
-            -- Track
-            scope:New "TextButton" {
-                Name = "Track",
-                BackgroundColor3 = COLORS.SliderTrack,
-                AnchorPoint = Vector2.new(0, 0.5),
-                Position = UDim2.new(0, 0, 0.5, 0),
-                Size = UDim2.new(1, -40, 0, 6),
-                AutoButtonColor = false,
-                Text = "",
-
-                [OnEvent "InputBegan"] = function(input)
-                    if input.UserInputType == Enum.UserInputType.MouseButton1
-                        or input.UserInputType == Enum.UserInputType.Touch then
-                        -- Basic click-to-set (full drag requires InputChanged listener)
-                        local track = input.Position
-                        -- Note: for full drag support, connect UserInputService.InputChanged
-                        -- and track isDragging state. Simplified here for reference clarity.
-                    end
-                end,
-
-                [Children] = {
-                    scope:New "UICorner" { CornerRadius = UDim.new(1, 0) },
-
-                    -- Fill
-                    scope:New "Frame" {
-                        Name = "Fill",
-                        BackgroundColor3 = COLORS.SliderFill,
-                        Size = scope:Spring(scope:Computed(function(use)
-                            return UDim2.new(use(percentage), 0, 1, 0)
-                        end), 30),
-                        [Children] = { scope:New "UICorner" { CornerRadius = UDim.new(1, 0) } },
-                    },
-
-                    -- Handle
-                    scope:New "Frame" {
-                        Name = "Handle",
-                        AnchorPoint = Vector2.new(0.5, 0.5),
-                        Position = scope:Spring(scope:Computed(function(use)
-                            return UDim2.new(use(percentage), 0, 0.5, 0)
-                        end), 30),
-                        Size = UDim2.fromOffset(14, 14),
-                        BackgroundColor3 = COLORS.Text,
-                        ZIndex = 2,
-                        [Children] = { scope:New "UICorner" { CornerRadius = UDim.new(1, 0) } },
-                    },
-                },
-            },
-
-            -- Value label
-            scope:New "TextLabel" {
-                Name = "ValueLabel",
-                BackgroundTransparency = 1,
-                AnchorPoint = Vector2.new(1, 0.5),
-                Position = UDim2.new(1, 0, 0.5, 0),
-                Size = UDim2.fromOffset(36, 16),
-                FontFace = FONT.Small,
-                Text = scope:Computed(function(use)
-                    local v = use(value)
-                    return if v == math.floor(v) then tostring(math.floor(v)) else string.format("%.1f", v)
-                end),
-                TextColor3 = COLORS.TextSecondary,
-                TextSize = 12,
-                TextXAlignment = Enum.TextXAlignment.Right,
-            },
-        },
-    }
-end
-
---------------------------------------------------------------------------------
--- Dropdown component
---------------------------------------------------------------------------------
-
-local function SettingsDropdown(
-    scope: Fusion.Scope,
-    selected: Fusion.Value<string>,
-    options: { string },
-    onChange: (newValue: string) -> ()
-)
-    local isOpen = scope:Value(false)
-
-    return scope:New "Frame" {
-        Name = "DropdownContainer",
-        BackgroundTransparency = 1,
-        Size = UDim2.new(0, 140, 0, 26),
-        ClipsDescendants = false,
-
-        [Children] = {
-            -- Trigger button
-            scope:New "TextButton" {
-                Name = "Trigger",
-                BackgroundColor3 = COLORS.SurfaceAlt,
-                Size = UDim2.new(1, 0, 0, 26),
-                AutoButtonColor = false,
-                Text = "",
-                [OnEvent "Activated"] = function()
-                    isOpen:set(not peek(isOpen))
-                end,
-                [Children] = {
-                    scope:New "UICorner" { CornerRadius = UDim.new(0, 4) },
-                    scope:New "UIPadding" {
-                        PaddingLeft = UDim.new(0, 8),
-                        PaddingRight = UDim.new(0, 8),
-                    },
-                    scope:New "TextLabel" {
-                        BackgroundTransparency = 1,
-                        Size = UDim2.new(1, -16, 1, 0),
-                        FontFace = FONT.Small,
-                        Text = selected,
-                        TextColor3 = COLORS.Text,
-                        TextSize = 12,
-                        TextXAlignment = Enum.TextXAlignment.Left,
-                    },
-                    scope:New "TextLabel" {
-                        BackgroundTransparency = 1,
-                        AnchorPoint = Vector2.new(1, 0.5),
-                        Position = UDim2.new(1, 0, 0.5, 0),
-                        Size = UDim2.fromOffset(12, 12),
-                        FontFace = FONT.Small,
-                        Text = "\u{25BC}",
-                        TextColor3 = COLORS.TextMuted,
-                        TextSize = 8,
-                    },
-                },
-            },
-
-            -- Options list
-            scope:New "Frame" {
-                Name = "OptionsList",
-                BackgroundColor3 = COLORS.SurfaceAlt,
-                Position = UDim2.new(0, 0, 1, 4),
-                Size = UDim2.new(1, 0, 0, #options * 24 + 4),
-                Visible = isOpen,
-                ZIndex = 50,
-                ClipsDescendants = true,
-                [Children] = {
-                    scope:New "UICorner" { CornerRadius = UDim.new(0, 4) },
-                    scope:New "UIPadding" { PaddingTop = UDim.new(0, 2), PaddingBottom = UDim.new(0, 2) },
-                    scope:New "UIListLayout" {
-                        FillDirection = Enum.FillDirection.Vertical,
-                        Padding = UDim.new(0, 0),
-                        SortOrder = Enum.SortOrder.LayoutOrder,
-                    },
-
-                    scope:ForPairs(options, function(use, optScope, i, option)
-                        return i, optScope:New "TextButton" {
-                            Name = "Option_" .. option,
-                            BackgroundColor3 = COLORS.SurfaceAlt,
-                            BackgroundTransparency = 0,
-                            Size = UDim2.new(1, 0, 0, 24),
-                            AutoButtonColor = false,
-                            FontFace = FONT.Small,
-                            Text = option,
-                            TextColor3 = optScope:Computed(function(use)
-                                return if use(selected) == option then COLORS.Primary else COLORS.Text
-                            end),
-                            TextSize = 12,
-                            LayoutOrder = i,
-                            [OnEvent "Activated"] = function()
-                                selected:set(option)
-                                onChange(option)
-                                isOpen:set(false)
-                            end,
-                        }
-                    end),
-                },
-            },
-        },
-    }
-end
-
---------------------------------------------------------------------------------
--- Setting Row (renders one setting entry)
---------------------------------------------------------------------------------
-
-local function SettingRow(
-    scope: Fusion.Scope,
-    entry: SettingEntry,
-    values: { [string]: Fusion.Value<SettingValue> },
-    onChanged: (string, SettingValue) -> ()
-)
-    local valueState = values[entry.Key]
-
-    local control
-    if entry.Type == "slider" then
-        control = SettingsSlider(scope, valueState :: Fusion.Value<number>, entry.Min, entry.Max, entry.Step, function(v)
-            onChanged(entry.Key, v)
-        end)
-    elseif entry.Type == "toggle" then
-        control = ToggleSwitch(scope, valueState :: Fusion.Value<boolean>, function(v)
-            onChanged(entry.Key, v)
-        end)
-    elseif entry.Type == "dropdown" then
-        control = SettingsDropdown(scope, valueState :: Fusion.Value<string>, entry.Options, function(v)
-            onChanged(entry.Key, v)
-        end)
-    end
-
-    return scope:New "Frame" {
-        Name = "Row_" .. entry.Key,
-        BackgroundTransparency = 1,
-        Size = UDim2.new(1, 0, 0, 32),
-
-        [Children] = {
-            scope:New "TextLabel" {
-                BackgroundTransparency = 1,
-                Size = UDim2.new(0.5, -8, 1, 0),
-                FontFace = FONT.Body,
-                Text = entry.Label,
-                TextColor3 = COLORS.Text,
-                TextSize = 13,
-                TextXAlignment = Enum.TextXAlignment.Left,
-            },
-
-            scope:New "Frame" {
-                BackgroundTransparency = 1,
-                AnchorPoint = Vector2.new(1, 0.5),
-                Position = UDim2.new(1, 0, 0.5, 0),
-                Size = UDim2.new(0.5, -8, 0, 26),
-                [Children] = {
-                    scope:New "UIListLayout" {
-                        FillDirection = Enum.FillDirection.Horizontal,
-                        HorizontalAlignment = Enum.HorizontalAlignment.Right,
-                        VerticalAlignment = Enum.VerticalAlignment.Center,
-                    },
-                    control,
-                },
-            },
-        },
-    }
-end
-
---------------------------------------------------------------------------------
--- Settings Screen (main export)
---------------------------------------------------------------------------------
-
-local function SettingsScreen(props: SettingsProps)
-    local scope = scoped(Fusion)
-
-    local activeTab = scope:Value(1)
-
-    local screenGui = scope:New "ScreenGui" {
-        Name = "SettingsScreen",
-        ResetOnSpawn = false,
-        IgnoreGuiInset = true,
-        Enabled = props.Visible,
-        DisplayOrder = 20,
-        Parent = Players.LocalPlayer:WaitForChild("PlayerGui"),
-
-        [Children] = {
-            -- Backdrop
-            scope:New "TextButton" {
-                Name = "Backdrop",
-                BackgroundColor3 = Color3.fromRGB(0, 0, 0),
-                BackgroundTransparency = scope:Spring(scope:Computed(function(use)
-                    return if use(props.Visible) then 0.5 else 1
-                end), 20),
-                Size = UDim2.new(1, 0, 1, 0),
-                AutoButtonColor = false,
-                Text = "",
-                [OnEvent "Activated"] = props.OnClose,
-            },
-
-            -- Settings panel (centered card)
-            scope:New "Frame" {
-                Name = "SettingsPanel",
-                AnchorPoint = Vector2.new(0.5, 0.5),
-                Position = UDim2.fromScale(0.5, 0.5),
-                Size = UDim2.new(0.85, 0, 0.7, 0),
-                BackgroundColor3 = COLORS.Background,
-
-                [Children] = {
-                    scope:New "UICorner" { CornerRadius = UDim.new(0, 12) },
-                    scope:New "UISizeConstraint" {
-                        MinSize = Vector2.new(300, 250),
-                        MaxSize = Vector2.new(500, 450),
-                    },
-                    scope:New "UIPadding" {
-                        PaddingTop = UDim.new(0, 16),
-                        PaddingBottom = UDim.new(0, 16),
-                        PaddingLeft = UDim.new(0, 16),
-                        PaddingRight = UDim.new(0, 16),
-                    },
-                    scope:New "UIListLayout" {
-                        FillDirection = Enum.FillDirection.Vertical,
-                        Padding = UDim.new(0, 12),
-                        SortOrder = Enum.SortOrder.LayoutOrder,
-                    },
-
-                    -- Header
-                    scope:New "Frame" {
-                        BackgroundTransparency = 1,
-                        Size = UDim2.new(1, 0, 0, 24),
-                        LayoutOrder = 1,
-                        [Children] = {
-                            scope:New "TextLabel" {
-                                BackgroundTransparency = 1,
-                                Size = UDim2.new(1, -30, 1, 0),
-                                FontFace = FONT.Title,
-                                Text = "Settings",
-                                TextColor3 = COLORS.Text,
-                                TextSize = 18,
-                                TextXAlignment = Enum.TextXAlignment.Left,
-                            },
-                            scope:New "TextButton" {
-                                AnchorPoint = Vector2.new(1, 0),
-                                Position = UDim2.fromScale(1, 0),
-                                Size = UDim2.fromOffset(24, 24),
-                                BackgroundTransparency = 1,
-                                FontFace = FONT.Title,
-                                Text = "\u{2715}",
-                                TextColor3 = COLORS.TextSecondary,
-                                TextSize = 16,
-                                AutoButtonColor = false,
-                                [OnEvent "Activated"] = props.OnClose,
-                            },
-                        },
-                    },
-
-                    -- Tab bar
-                    scope:New "Frame" {
-                        Name = "TabBar",
-                        BackgroundTransparency = 1,
-                        Size = UDim2.new(1, 0, 0, 28),
-                        LayoutOrder = 2,
-                        [Children] = {
-                            scope:New "UIListLayout" {
-                                FillDirection = Enum.FillDirection.Horizontal,
-                                Padding = UDim.new(0, 4),
-                                VerticalAlignment = Enum.VerticalAlignment.Center,
-                            },
-
-                            scope:ForPairs(props.Tabs, function(use, tabScope, i, tab)
-                                local isActive = tabScope:Computed(function(use)
-                                    return use(activeTab) == i
-                                end)
-
-                                return i, tabScope:New "TextButton" {
-                                    Name = "Tab_" .. tab.Name,
-                                    BackgroundColor3 = tabScope:Spring(tabScope:Computed(function(use)
-                                        return if use(isActive) then COLORS.TabActive else COLORS.TabInactive
-                                    end), 25),
-                                    Size = UDim2.new(0, 70, 0, 26),
-                                    AutoButtonColor = false,
-                                    FontFace = FONT.Body,
-                                    Text = tab.Name,
-                                    TextColor3 = tabScope:Computed(function(use)
-                                        return if use(isActive) then COLORS.Text else COLORS.TextSecondary
-                                    end),
-                                    TextSize = 11,
-                                    LayoutOrder = i,
-                                    [OnEvent "Activated"] = function()
-                                        activeTab:set(i)
-                                    end,
-                                    [Children] = { tabScope:New "UICorner" { CornerRadius = UDim.new(0, 4) } },
-                                }
-                            end),
-                        },
-                    },
-
-                    -- Settings content (scrollable)
-                    scope:New "ScrollingFrame" {
-                        Name = "SettingsContent",
-                        BackgroundTransparency = 1,
-                        Size = UDim2.new(1, 0, 1, -76),
-                        LayoutOrder = 3,
-                        AutomaticCanvasSize = Enum.AutomaticSize.Y,
-                        ScrollingDirection = Enum.ScrollingDirection.Y,
-                        ScrollBarThickness = 3,
-                        ScrollBarImageColor3 = COLORS.TextMuted,
-                        CanvasSize = UDim2.new(0, 0, 0, 0),
-
-                        [Children] = {
-                            scope:New "UIListLayout" {
-                                FillDirection = Enum.FillDirection.Vertical,
-                                Padding = UDim.new(0, 8),
-                                SortOrder = Enum.SortOrder.LayoutOrder,
-                            },
-                            scope:New "UIPadding" { PaddingTop = UDim.new(0, 4), PaddingBottom = UDim.new(0, 4) },
-
-                            -- Render settings for active tab
-                            scope:Computed(function(use)
-                                local tabIndex = use(activeTab)
-                                local tab = props.Tabs[tabIndex]
-                                if not tab then return {} end
-
-                                local rows = {}
-                                for i, entry in tab.Settings do
-                                    rows[i] = SettingRow(scope, entry, props.Values, props.OnSettingChanged)
-                                end
-                                return rows
-                            end),
-                        },
-                    },
-                },
-            },
-        },
-    }
-
-    return screenGui, scope
-end
-
-return SettingsScreen
+--[[
+    Settings Menu — Fusion 0.3
+    Source patterns: VirtualButFake/fusion-components (MIT), dphfox/Fusion docs
+    Ported to Fusion 0.3 scoped syntax.
+    
+    A complete settings menu with:
+    - Tabbed sections (Audio, Graphics, Controls)
+    - Sliders (volume, render distance)
+    - Toggle switches (fullscreen, vsync, show FPS)
+    - Dropdown select (quality preset)
+    - Spring open/close animation
+    - Saves to a settings table (caller persists however they want)
+    
+    ADAPT THIS:
+    - Replace settings entries with your game's actual settings
+    - Wire OnSettingChanged to your DataStore or local storage
+    - Add/remove tabs and controls as needed
+    - Adjust colors to match your game's palette
+    
+    Requires: Fusion 0.3 (wally: elttob/fusion@0.3.0)
+]]
+
+local ReplicatedStorage = game:GetService("ReplicatedStorage")
+local Players = game:GetService("Players")
+
+-- Adjust this path to match your project structure:
+-- Wally:    require(ReplicatedStorage.Packages.Fusion)
+-- Custom:   require(game.ReplicatedStorage.Fusion)
+-- Vendored: (default, from roblox-opencode setup)
+local Fusion = require(ReplicatedStorage[".opencode"].vendor.fusion)
+local scoped = Fusion.scoped
+local peek = Fusion.peek
+local Children = Fusion.Children
+local OnEvent = Fusion.OnEvent
+
+--------------------------------------------------------------------------------
+-- Types
+--------------------------------------------------------------------------------
+
+type SettingValue = number | boolean | string
+
+type SliderSetting = {
+    Type: "slider",
+    Label: string,
+    Key: string,
+    Min: number,
+    Max: number,
+    Step: number?,
+    Default: number,
+}
+
+type ToggleSetting = {
+    Type: "toggle",
+    Label: string,
+    Key: string,
+    Default: boolean,
+}
+
+type DropdownSetting = {
+    Type: "dropdown",
+    Label: string,
+    Key: string,
+    Options: { string },
+    Default: string,
+}
+
+type SettingEntry = SliderSetting | ToggleSetting | DropdownSetting
+
+type SettingsTab = {
+    Name: string,
+    Icon: string?,
+    Settings: { SettingEntry },
+}
+
+type SettingsProps = {
+    Visible: Fusion.Value<boolean>,
+    Tabs: { SettingsTab },
+    Values: { [string]: Fusion.Value<SettingValue> },
+    OnSettingChanged: (key: string, value: SettingValue) -> (),
+    OnClose: () -> (),
+}
+
+--------------------------------------------------------------------------------
+-- Theme
+--------------------------------------------------------------------------------
+
+local COLORS = {
+    Background = Color3.fromRGB(18, 18, 26),
+    Surface = Color3.fromRGB(28, 28, 40),
+    SurfaceAlt = Color3.fromRGB(35, 35, 48),
+    Primary = Color3.fromRGB(80, 140, 255),
+    Text = Color3.fromRGB(235, 235, 240),
+    TextSecondary = Color3.fromRGB(155, 155, 170),
+    TextMuted = Color3.fromRGB(90, 90, 105),
+    ToggleOn = Color3.fromRGB(80, 200, 120),
+    ToggleOff = Color3.fromRGB(60, 60, 75),
+    SliderTrack = Color3.fromRGB(45, 45, 60),
+    SliderFill = Color3.fromRGB(80, 140, 255),
+    TabActive = Color3.fromRGB(80, 140, 255),
+    TabInactive = Color3.fromRGB(60, 60, 75),
+}
+
+local FONT = {
+    Title = Font.new("rbxasset://fonts/families/GothamSSm.json", Enum.FontWeight.Bold),
+    Body = Font.new("rbxasset://fonts/families/GothamSSm.json", Enum.FontWeight.Medium),
+    Small = Font.new("rbxasset://fonts/families/GothamSSm.json", Enum.FontWeight.Regular),
+}
+
+--------------------------------------------------------------------------------
+-- Toggle Switch component
+--------------------------------------------------------------------------------
+
+local function ToggleSwitch(
+    scope: Fusion.Scope,
+    state: Fusion.Value<boolean>,
+    onToggle: (newState: boolean) -> ()
+)
+    return scope:New "TextButton" {
+        Name = "Toggle",
+        BackgroundColor3 = scope:Spring(scope:Computed(function(use)
+            return if use(state) then COLORS.ToggleOn else COLORS.ToggleOff
+        end), 25),
+        Size = UDim2.fromOffset(40, 22),
+        AutoButtonColor = false,
+        Text = "",
+
+        [OnEvent "Activated"] = function()
+            local newVal = not peek(state)
+            state:set(newVal)
+            onToggle(newVal)
+        end,
+
+        [Children] = {
+            scope:New "UICorner" { CornerRadius = UDim.new(1, 0) },
+
+            -- Knob
+            scope:New "Frame" {
+                Name = "Knob",
+                AnchorPoint = Vector2.new(0, 0.5),
+                Position = scope:Spring(scope:Computed(function(use)
+                    return if use(state)
+                        then UDim2.new(1, -20, 0.5, 0)
+                        else UDim2.new(0, 2, 0.5, 0)
+                end), 30),
+                Size = UDim2.fromOffset(18, 18),
+                BackgroundColor3 = COLORS.Text,
+                [Children] = { scope:New "UICorner" { CornerRadius = UDim.new(1, 0) } },
+            },
+        },
+    }
+end
+
+--------------------------------------------------------------------------------
+-- Slider component
+--------------------------------------------------------------------------------
+
+local function SettingsSlider(
+    scope: Fusion.Scope,
+    value: Fusion.Value<number>,
+    min: number,
+    max: number,
+    step: number?,
+    onChange: (newValue: number) -> ()
+)
+    local effectiveStep = step or 1
+    local range = max - min
+
+    local percentage = scope:Computed(function(use)
+        return (use(value) - min) / range
+    end)
+
+    return scope:New "Frame" {
+        Name = "SliderContainer",
+        BackgroundTransparency = 1,
+        Size = UDim2.new(1, 0, 0, 20),
+
+        [Children] = {
+            -- Track
+            scope:New "TextButton" {
+                Name = "Track",
+                BackgroundColor3 = COLORS.SliderTrack,
+                AnchorPoint = Vector2.new(0, 0.5),
+                Position = UDim2.new(0, 0, 0.5, 0),
+                Size = UDim2.new(1, -40, 0, 6),
+                AutoButtonColor = false,
+                Text = "",
+
+                [OnEvent "InputBegan"] = function(input)
+                    if input.UserInputType == Enum.UserInputType.MouseButton1
+                        or input.UserInputType == Enum.UserInputType.Touch then
+                        -- Basic click-to-set (full drag requires InputChanged listener)
+                        local track = input.Position
+                        -- Note: for full drag support, connect UserInputService.InputChanged
+                        -- and track isDragging state. Simplified here for reference clarity.
+                    end
+                end,
+
+                [Children] = {
+                    scope:New "UICorner" { CornerRadius = UDim.new(1, 0) },
+
+                    -- Fill
+                    scope:New "Frame" {
+                        Name = "Fill",
+                        BackgroundColor3 = COLORS.SliderFill,
+                        Size = scope:Spring(scope:Computed(function(use)
+                            return UDim2.new(use(percentage), 0, 1, 0)
+                        end), 30),
+                        [Children] = { scope:New "UICorner" { CornerRadius = UDim.new(1, 0) } },
+                    },
+
+                    -- Handle
+                    scope:New "Frame" {
+                        Name = "Handle",
+                        AnchorPoint = Vector2.new(0.5, 0.5),
+                        Position = scope:Spring(scope:Computed(function(use)
+                            return UDim2.new(use(percentage), 0, 0.5, 0)
+                        end), 30),
+                        Size = UDim2.fromOffset(14, 14),
+                        BackgroundColor3 = COLORS.Text,
+                        ZIndex = 2,
+                        [Children] = { scope:New "UICorner" { CornerRadius = UDim.new(1, 0) } },
+                    },
+                },
+            },
+
+            -- Value label
+            scope:New "TextLabel" {
+                Name = "ValueLabel",
+                BackgroundTransparency = 1,
+                AnchorPoint = Vector2.new(1, 0.5),
+                Position = UDim2.new(1, 0, 0.5, 0),
+                Size = UDim2.fromOffset(36, 16),
+                FontFace = FONT.Small,
+                Text = scope:Computed(function(use)
+                    local v = use(value)
+                    return if v == math.floor(v) then tostring(math.floor(v)) else string.format("%.1f", v)
+                end),
+                TextColor3 = COLORS.TextSecondary,
+                TextSize = 12,
+                TextXAlignment = Enum.TextXAlignment.Right,
+            },
+        },
+    }
+end
+
+--------------------------------------------------------------------------------
+-- Dropdown component
+--------------------------------------------------------------------------------
+
+local function SettingsDropdown(
+    scope: Fusion.Scope,
+    selected: Fusion.Value<string>,
+    options: { string },
+    onChange: (newValue: string) -> ()
+)
+    local isOpen = scope:Value(false)
+
+    return scope:New "Frame" {
+        Name = "DropdownContainer",
+        BackgroundTransparency = 1,
+        Size = UDim2.new(0, 140, 0, 26),
+        ClipsDescendants = false,
+
+        [Children] = {
+            -- Trigger button
+            scope:New "TextButton" {
+                Name = "Trigger",
+                BackgroundColor3 = COLORS.SurfaceAlt,
+                Size = UDim2.new(1, 0, 0, 26),
+                AutoButtonColor = false,
+                Text = "",
+                [OnEvent "Activated"] = function()
+                    isOpen:set(not peek(isOpen))
+                end,
+                [Children] = {
+                    scope:New "UICorner" { CornerRadius = UDim.new(0, 4) },
+                    scope:New "UIPadding" {
+                        PaddingLeft = UDim.new(0, 8),
+                        PaddingRight = UDim.new(0, 8),
+                    },
+                    scope:New "TextLabel" {
+                        BackgroundTransparency = 1,
+                        Size = UDim2.new(1, -16, 1, 0),
+                        FontFace = FONT.Small,
+                        Text = selected,
+                        TextColor3 = COLORS.Text,
+                        TextSize = 12,
+                        TextXAlignment = Enum.TextXAlignment.Left,
+                    },
+                    scope:New "TextLabel" {
+                        BackgroundTransparency = 1,
+                        AnchorPoint = Vector2.new(1, 0.5),
+                        Position = UDim2.new(1, 0, 0.5, 0),
+                        Size = UDim2.fromOffset(12, 12),
+                        FontFace = FONT.Small,
+                        Text = "\u{25BC}",
+                        TextColor3 = COLORS.TextMuted,
+                        TextSize = 8,
+                    },
+                },
+            },
+
+            -- Options list
+            scope:New "Frame" {
+                Name = "OptionsList",
+                BackgroundColor3 = COLORS.SurfaceAlt,
+                Position = UDim2.new(0, 0, 1, 4),
+                Size = UDim2.new(1, 0, 0, #options * 24 + 4),
+                Visible = isOpen,
+                ZIndex = 50,
+                ClipsDescendants = true,
+                [Children] = {
+                    scope:New "UICorner" { CornerRadius = UDim.new(0, 4) },
+                    scope:New "UIPadding" { PaddingTop = UDim.new(0, 2), PaddingBottom = UDim.new(0, 2) },
+                    scope:New "UIListLayout" {
+                        FillDirection = Enum.FillDirection.Vertical,
+                        Padding = UDim.new(0, 0),
+                        SortOrder = Enum.SortOrder.LayoutOrder,
+                    },
+
+                    scope:ForPairs(options, function(use, optScope, i, option)
+                        return i, optScope:New "TextButton" {
+                            Name = "Option_" .. option,
+                            BackgroundColor3 = COLORS.SurfaceAlt,
+                            BackgroundTransparency = 0,
+                            Size = UDim2.new(1, 0, 0, 24),
+                            AutoButtonColor = false,
+                            FontFace = FONT.Small,
+                            Text = option,
+                            TextColor3 = optScope:Computed(function(use)
+                                return if use(selected) == option then COLORS.Primary else COLORS.Text
+                            end),
+                            TextSize = 12,
+                            LayoutOrder = i,
+                            [OnEvent "Activated"] = function()
+                                selected:set(option)
+                                onChange(option)
+                                isOpen:set(false)
+                            end,
+                        }
+                    end),
+                },
+            },
+        },
+    }
+end
+
+--------------------------------------------------------------------------------
+-- Setting Row (renders one setting entry)
+--------------------------------------------------------------------------------
+
+local function SettingRow(
+    scope: Fusion.Scope,
+    entry: SettingEntry,
+    values: { [string]: Fusion.Value<SettingValue> },
+    onChanged: (string, SettingValue) -> ()
+)
+    local valueState = values[entry.Key]
+
+    local control
+    if entry.Type == "slider" then
+        control = SettingsSlider(scope, valueState :: Fusion.Value<number>, entry.Min, entry.Max, entry.Step, function(v)
+            onChanged(entry.Key, v)
+        end)
+    elseif entry.Type == "toggle" then
+        control = ToggleSwitch(scope, valueState :: Fusion.Value<boolean>, function(v)
+            onChanged(entry.Key, v)
+        end)
+    elseif entry.Type == "dropdown" then
+        control = SettingsDropdown(scope, valueState :: Fusion.Value<string>, entry.Options, function(v)
+            onChanged(entry.Key, v)
+        end)
+    end
+
+    return scope:New "Frame" {
+        Name = "Row_" .. entry.Key,
+        BackgroundTransparency = 1,
+        Size = UDim2.new(1, 0, 0, 32),
+
+        [Children] = {
+            scope:New "TextLabel" {
+                BackgroundTransparency = 1,
+                Size = UDim2.new(0.5, -8, 1, 0),
+                FontFace = FONT.Body,
+                Text = entry.Label,
+                TextColor3 = COLORS.Text,
+                TextSize = 13,
+                TextXAlignment = Enum.TextXAlignment.Left,
+            },
+
+            scope:New "Frame" {
+                BackgroundTransparency = 1,
+                AnchorPoint = Vector2.new(1, 0.5),
+                Position = UDim2.new(1, 0, 0.5, 0),
+                Size = UDim2.new(0.5, -8, 0, 26),
+                [Children] = {
+                    scope:New "UIListLayout" {
+                        FillDirection = Enum.FillDirection.Horizontal,
+                        HorizontalAlignment = Enum.HorizontalAlignment.Right,
+                        VerticalAlignment = Enum.VerticalAlignment.Center,
+                    },
+                    control,
+                },
+            },
+        },
+    }
+end
+
+--------------------------------------------------------------------------------
+-- Settings Screen (main export)
+--------------------------------------------------------------------------------
+
+local function SettingsScreen(props: SettingsProps)
+    local scope = scoped(Fusion)
+
+    local activeTab = scope:Value(1)
+
+    local screenGui = scope:New "ScreenGui" {
+        Name = "SettingsScreen",
+        ResetOnSpawn = false,
+        IgnoreGuiInset = true,
+        Enabled = props.Visible,
+        DisplayOrder = 20,
+        Parent = Players.LocalPlayer:WaitForChild("PlayerGui"),
+
+        [Children] = {
+            -- Backdrop
+            scope:New "TextButton" {
+                Name = "Backdrop",
+                BackgroundColor3 = Color3.fromRGB(0, 0, 0),
+                BackgroundTransparency = scope:Spring(scope:Computed(function(use)
+                    return if use(props.Visible) then 0.5 else 1
+                end), 20),
+                Size = UDim2.new(1, 0, 1, 0),
+                AutoButtonColor = false,
+                Text = "",
+                [OnEvent "Activated"] = props.OnClose,
+            },
+
+            -- Settings panel (centered card)
+            scope:New "Frame" {
+                Name = "SettingsPanel",
+                AnchorPoint = Vector2.new(0.5, 0.5),
+                Position = UDim2.fromScale(0.5, 0.5),
+                Size = UDim2.new(0.85, 0, 0.7, 0),
+                BackgroundColor3 = COLORS.Background,
+
+                [Children] = {
+                    scope:New "UICorner" { CornerRadius = UDim.new(0, 12) },
+                    scope:New "UISizeConstraint" {
+                        MinSize = Vector2.new(300, 250),
+                        MaxSize = Vector2.new(500, 450),
+                    },
+                    scope:New "UIPadding" {
+                        PaddingTop = UDim.new(0, 16),
+                        PaddingBottom = UDim.new(0, 16),
+                        PaddingLeft = UDim.new(0, 16),
+                        PaddingRight = UDim.new(0, 16),
+                    },
+                    scope:New "UIListLayout" {
+                        FillDirection = Enum.FillDirection.Vertical,
+                        Padding = UDim.new(0, 12),
+                        SortOrder = Enum.SortOrder.LayoutOrder,
+                    },
+
+                    -- Header
+                    scope:New "Frame" {
+                        BackgroundTransparency = 1,
+                        Size = UDim2.new(1, 0, 0, 24),
+                        LayoutOrder = 1,
+                        [Children] = {
+                            scope:New "TextLabel" {
+                                BackgroundTransparency = 1,
+                                Size = UDim2.new(1, -30, 1, 0),
+                                FontFace = FONT.Title,
+                                Text = "Settings",
+                                TextColor3 = COLORS.Text,
+                                TextSize = 18,
+                                TextXAlignment = Enum.TextXAlignment.Left,
+                            },
+                            scope:New "TextButton" {
+                                AnchorPoint = Vector2.new(1, 0),
+                                Position = UDim2.fromScale(1, 0),
+                                Size = UDim2.fromOffset(24, 24),
+                                BackgroundTransparency = 1,
+                                FontFace = FONT.Title,
+                                Text = "\u{2715}",
+                                TextColor3 = COLORS.TextSecondary,
+                                TextSize = 16,
+                                AutoButtonColor = false,
+                                [OnEvent "Activated"] = props.OnClose,
+                            },
+                        },
+                    },
+
+                    -- Tab bar
+                    scope:New "Frame" {
+                        Name = "TabBar",
+                        BackgroundTransparency = 1,
+                        Size = UDim2.new(1, 0, 0, 28),
+                        LayoutOrder = 2,
+                        [Children] = {
+                            scope:New "UIListLayout" {
+                                FillDirection = Enum.FillDirection.Horizontal,
+                                Padding = UDim.new(0, 4),
+                                VerticalAlignment = Enum.VerticalAlignment.Center,
+                            },
+
+                            scope:ForPairs(props.Tabs, function(use, tabScope, i, tab)
+                                local isActive = tabScope:Computed(function(use)
+                                    return use(activeTab) == i
+                                end)
+
+                                return i, tabScope:New "TextButton" {
+                                    Name = "Tab_" .. tab.Name,
+                                    BackgroundColor3 = tabScope:Spring(tabScope:Computed(function(use)
+                                        return if use(isActive) then COLORS.TabActive else COLORS.TabInactive
+                                    end), 25),
+                                    Size = UDim2.new(0, 70, 0, 26),
+                                    AutoButtonColor = false,
+                                    FontFace = FONT.Body,
+                                    Text = tab.Name,
+                                    TextColor3 = tabScope:Computed(function(use)
+                                        return if use(isActive) then COLORS.Text else COLORS.TextSecondary
+                                    end),
+                                    TextSize = 11,
+                                    LayoutOrder = i,
+                                    [OnEvent "Activated"] = function()
+                                        activeTab:set(i)
+                                    end,
+                                    [Children] = { tabScope:New "UICorner" { CornerRadius = UDim.new(0, 4) } },
+                                }
+                            end),
+                        },
+                    },
+
+                    -- Settings content (scrollable)
+                    scope:New "ScrollingFrame" {
+                        Name = "SettingsContent",
+                        BackgroundTransparency = 1,
+                        Size = UDim2.new(1, 0, 1, -76),
+                        LayoutOrder = 3,
+                        AutomaticCanvasSize = Enum.AutomaticSize.Y,
+                        ScrollingDirection = Enum.ScrollingDirection.Y,
+                        ScrollBarThickness = 3,
+                        ScrollBarImageColor3 = COLORS.TextMuted,
+                        CanvasSize = UDim2.new(0, 0, 0, 0),
+
+                        [Children] = {
+                            scope:New "UIListLayout" {
+                                FillDirection = Enum.FillDirection.Vertical,
+                                Padding = UDim.new(0, 8),
+                                SortOrder = Enum.SortOrder.LayoutOrder,
+                            },
+                            scope:New "UIPadding" { PaddingTop = UDim.new(0, 4), PaddingBottom = UDim.new(0, 4) },
+
+                            -- Render settings for active tab
+                            scope:Computed(function(use)
+                                local tabIndex = use(activeTab)
+                                local tab = props.Tabs[tabIndex]
+                                if not tab then return {} end
+
+                                local rows = {}
+                                for i, entry in tab.Settings do
+                                    rows[i] = SettingRow(scope, entry, props.Values, props.OnSettingChanged)
+                                end
+                                return rows
+                            end),
+                        },
+                    },
+                },
+            },
+        },
+    }
+
+    return screenGui, scope
+end
+
+return SettingsScreen