document the gen2 additions

docs.json

@@ -100,7 +100,10 @@
               "rayfield-gen2/elements/inputs",
               "rayfield-gen2/elements/keybinds",
               "rayfield-gen2/elements/color-pickers",
-              "rayfield-gen2/elements/stats"
+              "rayfield-gen2/elements/stats",
+              "rayfield-gen2/elements/labels",
+              "rayfield-gen2/elements/paragraphs",
+              "rayfield-gen2/elements/dividers"
             ]
           },
           {

rayfield-gen2/elements/color-pickers.mdx

@@ -28,6 +28,48 @@ tab:CreateColorPicker({
   Color pickers are full-width and live at the tab level. Create them directly on the tab, not inside a group.
 </Note>
 
+## Gradients
+
+Pass `gradient = true` and the picker edits a `ColorSequence` instead of one colour. A bar above the map holds the stops. Click the bar to add one where you clicked, drag a stop to move it, and the button beside the bar removes the one you have selected. The two ends stay put.
+
+<Frame>
+  <img src="/images/gen2/colorpicker-gradient.png" alt="A gradient color picker with four stops on the bar above the map" />
+</Frame>
+
+```lua
+tab:CreateColorPicker({
+    name = "Trail",
+    gradient = true,
+    color = ColorSequence.new({
+        ColorSequenceKeypoint.new(0, Color3.fromRGB(255, 0, 128)),
+        ColorSequenceKeypoint.new(1, Color3.fromRGB(0, 200, 255)),
+    }),
+    callback = function(sequence, alpha)
+        trail.Color = sequence
+    end,
+})
+```
+
+The map and bars below edit whichever stop is selected, so the picker works the same way once you have one in hand.
+
+<ResponseField name="gradient" type="boolean" default="false">
+  Edit a `ColorSequence` rather than a single colour.
+</ResponseField>
+
+A gradient picker hands its callback a `ColorSequence`, and `GetValue()` returns the same. `.value` is still the colour of the stop being edited, so read `GetValue()` when you want the whole thing.
+
+```lua
+local picker = tab:CreateColorPicker({ name = "Trail", gradient = true })
+
+picker:GetValue()  -- ColorSequence
+picker.value       -- Color3, the selected stop
+
+picker:Set(ColorSequence.new(Color3.new(1, 0, 0), Color3.new(0, 0, 1)))  -- the whole gradient
+picker:Set(Color3.fromRGB(255, 255, 0))  -- just the selected stop
+```
+
+A single colour passed as `color` is taken as a flat gradient of it, which is also how a configuration saved before the picker was a gradient loads back in.
+
 ## Properties
 
 <ResponseField name="name" type="string">

rayfield-gen2/elements/dividers.mdx

@@ -0,0 +1,64 @@
+---
+title: Divider
+description: A rule across the page, or room with nothing in it.
+icon: minus
+---
+
+import SentivelBanner from '/snippets/sentivel-banner.mdx'
+
+<SentivelBanner />
+
+A divider breaks a tab into parts. It draws a rule across the page, with an optional word in the middle of it.
+
+<Frame>
+  <img src="/images/gen2/divider.png" alt="Dividers between groups of elements, one with a word in it" />
+</Frame>
+
+```lua
+tab:CreateToggle({ name = "Auto Sprint" })
+tab:CreateToggle({ name = "Reduced Motion" })
+
+tab:CreateDivider({ text = "Advanced" })
+
+tab:CreateToggle({ name = "Verbose Logging" })
+```
+
+Pass `line = false` for room and no rule, when two groups need separating but a line would be too much.
+
+```lua
+tab:CreateDivider({ line = false, spacing = 24 })
+```
+
+<Note>
+  A divider holds no value, so it never saves and takes no `flag`. For a heading with a name that belongs to what follows it, use a [section](/rayfield-gen2/elements/overview).
+</Note>
+
+## Properties
+
+<ResponseField name="text" type="string">
+  A word in the middle of the rule. Optional. Without one the rule runs the full width.
+</ResponseField>
+
+<ResponseField name="spacing" type="number" default="12">
+  Room above and below, in pixels.
+</ResponseField>
+
+<ResponseField name="line" type="boolean" default="true">
+  `false` draws no rule, leaving only the room.
+</ResponseField>
+
+## Handle
+
+<ResponseField name=".text" type="string">
+  The current word, or an empty string.
+</ResponseField>
+
+<ResponseField name="Set(text)">
+  Replace the word. Pass an empty string to clear it, and the rule closes back up into a plain one.
+</ResponseField>
+
+```lua
+local stage = tab:CreateDivider({ text = "Loading" })
+stage:Set("Ready")
+stage:Set("")  -- back to a plain rule
+```

rayfield-gen2/elements/labels.mdx

@@ -0,0 +1,48 @@
+---
+title: Label
+description: A line of text with no control on it.
+icon: type
+---
+
+import SentivelBanner from '/snippets/sentivel-banner.mdx'
+
+<SentivelBanner />
+
+A label is one line of text on a card. Nothing to press, nothing to read back. Use it for a note beside the controls it belongs to.
+
+<Frame>
+  <img src="/images/gen2/text.png" alt="A label and three paragraphs in a tab" />
+</Frame>
+
+```lua
+local status = tab:CreateLabel({
+    text = "Waiting for a match",
+    icon = 93364949241311,
+})
+
+status:Set("In a match")
+```
+
+<Note>
+  A label holds no value, so it never saves and takes no `flag`. For a heading over a run of elements, use a [section](/rayfield-gen2/elements/overview). For a title with body text under it, use a [paragraph](/rayfield-gen2/elements/paragraphs).
+</Note>
+
+## Properties
+
+<ResponseField name="text" type="string">
+  The line of text. `name` works in its place.
+</ResponseField>
+
+<ResponseField name="icon" type="string | number">
+  An icon shown beside the text. Optional.
+</ResponseField>
+
+## Handle
+
+<ResponseField name=".text" type="string">
+  The current text.
+</ResponseField>
+
+<ResponseField name="Set(text)">
+  Replace the text. The card grows or shrinks to fit it.
+</ResponseField>

rayfield-gen2/elements/paragraphs.mdx

@@ -0,0 +1,68 @@
+---
+title: Paragraph
+description: A title with body text under it.
+icon: text-align-left
+---
+
+import SentivelBanner from '/snippets/sentivel-banner.mdx'
+
+<SentivelBanner />
+
+A paragraph is a title with body text under it, on one card. The body wraps and the card grows to fit. Use it for anything too long to sit on a label.
+
+<Frame>
+  <img src="/images/gen2/text.png" alt="A label and three paragraphs in a tab" />
+</Frame>
+
+```lua
+local notes = tab:CreateParagraph({
+    name = "Aimbot",
+    text = "Holds on the closest visible player. Walls block it, so it drops the target when they go behind cover.",
+    icon = 93364949241311,
+})
+
+notes:Set("Now tracking the lowest health target instead.")
+```
+
+Either half can be left out. A paragraph with no `name` is body text on its own, and one with no `text` is a title on its own.
+
+```lua
+tab:CreateParagraph({ text = "Read this before you turn anything on." })
+```
+
+<Note>
+  A paragraph holds no value, so it never saves and takes no `flag`.
+</Note>
+
+## Properties
+
+<ResponseField name="name" type="string">
+  The title. Optional.
+</ResponseField>
+
+<ResponseField name="text" type="string">
+  The body under the title. Optional.
+</ResponseField>
+
+<ResponseField name="icon" type="string | number">
+  An icon shown beside the title. Optional.
+</ResponseField>
+
+## Handle
+
+<ResponseField name=".name" type="string">
+  The current title.
+</ResponseField>
+
+<ResponseField name=".text" type="string">
+  The current body.
+</ResponseField>
+
+<ResponseField name="Set(text, title?)">
+  Replace the body, and the title as well if you pass one. Pass `nil` for the body to leave it as it is.
+</ResponseField>
+
+```lua
+notes:Set(nil, "Aimbot (legit)")  -- title only
+notes:Set("Smoothing raised to 0.4")  -- body only
+```

rayfield-gen2/windows.mdx

@@ -141,6 +141,20 @@ The window handle exposes everything you need at runtime.
   `true` once `Unload` has run. The handle is spent after that.
 </ResponseField>
 
+### Resizing
+
+The window carries a grip in its bottom-right corner. Drag it to resize, and double-click it to drop back to the size the window fits itself to. A hand-picked size is held through screen changes, down to whatever the screen can carry, and comes back in full once there is room for it again.
+
+Players can turn the grip off under **Resizable window** in the settings tab, and hold its mark still under **Animated resize grip**. Both persist with the rest of the window's settings.
+
+<ResponseField name="resize:SetEnabled(state)">
+  Show or hide the grip from code. Same setting the tab toggles.
+</ResponseField>
+
+```lua
+window.resize:SetEnabled(false)  -- no grip, no resizing
+```
+
 ### Theme and language
 
 <ResponseField name="ChangeTheme(theme)">