docs(learn): sync generated Playground pages

content/docs/learn/playground/alternating-colors.mdx

@@ -0,0 +1,85 @@
+---
+title: "Alternating (banded) colors"
+description: "A repeating header/odd/even/footer fill pattern, applied over a range from the Format ▸ Alternating colors panel, colors the range immediately and keeps coloring it correctly as rows are inserted or deleted inside it. The panel previews every field edit on the grid immediately, before Done — Done only finalizes it as one undoable command, and Cancel discards the live preview entirely with no trace."
+---
+
+{/* GENERATED — do not edit by hand */}
+
+## What it does
+
+Select a range and open **Format ▸ Alternating colors** to give it a repeating fill pattern, the way Google Sheets does — a distinct **header** color on the range's own first row (on by default), two colors that **alternate** down every row after it, and an optional distinct **footer** color on the range's own last row. Turn Header or Footer off to fold that row back into the ordinary alternation. Every change colors the range on the sheet **immediately**, exactly like real Google Sheets — **Done** doesn't "apply" anything, it just closes the panel; **Cancel** (or Escape, an outside click, or the panel's own close button) discards the live preview entirely, with no trace left behind.
+
+The banding is **live**: insert or delete rows inside the range and it re-colors correctly from the range's own current top — the header stays pinned to whichever row is now first, and the alternation restarts from there, never from a stale original row position. An explicit cell fill you set yourself (Format ▸ Fill color) always shows through the band rather than being hidden by it, and a conditional-format rule's highlight always wins over both — it exists specifically to call out exceptional cells.
+
+## Verified behavior
+
+_Matches Google Sheets:_ Google Sheets' Format ▸ Alternating colors opens a right-docked panel with preset style swatches plus custom color pickers: a Header checkbox + color (defaults on), two required band colors that alternate down the range, and a Footer checkbox + color (defaults off). The header row (the range's own top row) and footer row (its own bottom row), when their checkboxes are on, always render in their own distinct color rather than joining the alternation; every other row alternates the two band colors starting from the first row after the header. Inserting or deleting rows inside the range re-derives the banding from the range's own current top, so the header/footer stay pinned to the range's top/bottom row and the alternation stays correct rather than tracking stale original row positions. The panel previews every field edit live on the grid, the same way every other Sheets format side panel does — Done just closes the panel, it is not an apply gate, and Cancel discards whatever was previewed with no trace left behind. (The live oracle session for this feature could not complete — see the oracle's own "Session method" section — so the panel's exact preset swatches, default hex colors, and precise Format-menu position are Studio's own considered choices, not pixel-matched against a live session.)
+
+#### Opening Format > Alternating colors shows the panel
+
+**Given**
+
+**When** I select **A1:A5**, then click menu item **format.alternatingColors**
+
+**Then**
+- `[data-testid="alternating-colors-dialog"]` is visible
+- `[data-testid="alternating-colors-header"]` is visible
+- `[data-testid="alternating-colors-footer"]` is visible
+
+#### Applying the default banding colors the header row and alternates the rest
+
+**Given**
+
+**When** I select **A1:A5**, then click menu item **format.alternatingColors**, then click **alternating-colors-done**
+
+**Then**
+- **A1** renders as fill=#d9d9d9
+- **A2** renders as fill=#ffffff
+- **A3** renders as fill=#f3f3f3
+- **A4** renders as fill=#ffffff
+
+#### Turning the header checkbox OFF lets the first row join the ordinary alternation instead
+
+**Given**
+
+**When** I select **A1:A5**, then click menu item **format.alternatingColors**, then click **alternating-colors-header**, then click **alternating-colors-done**
+
+**Then**
+- **A1** renders as fill=#ffffff
+- **A2** renders as fill=#f3f3f3
+
+#### Turning the footer checkbox ON colors the range's own last row distinctly
+
+**Given**
+
+**When** I select **A1:A5**, then click menu item **format.alternatingColors**, then click **alternating-colors-footer**, then click **alternating-colors-done**
+
+**Then**
+- **A5** renders as fill=#d9d9d9
+
+#### Editing a band color previews it LIVE on the grid, BEFORE Done is clicked
+
+**Given**
+
+**When** I select **A1:A3**, then click menu item **format.alternatingColors**, then fill **alternating-colors-first** with `#ff0000`
+
+**Then**
+- **A2** renders as fill=#ff0000
+
+#### Cancel discards the live-previewed banding entirely — the grid returns to its pre-panel state
+
+**Given**
+
+**When** I select **A1:A3**, then click menu item **format.alternatingColors**, then click **alternating-colors-cancel**
+
+**Then**
+- **A1** renders as fill=false
+
+#### An explicit cell fill always shows through the band
+
+**Given**
+
+**When** I click **A1**, then click menu item **format.fillColor**, then select **A1:A5**, then click menu item **format.alternatingColors**, then click **alternating-colors-done**
+
+**Then**
+- **A1** renders as fill=#fff2cc

content/docs/learn/playground/conditional-formatting.mdx

@@ -1,19 +1,21 @@
 ---
 title: "Conditional formatting (daily-driver slice)"
-description: "A single-condition value-comparison rule or a 2-stop color scale, applied over a range from the Format ▸ Conditional formatting dialog, colors matching cells live (tracking edits) without touching their value/formula; a rule undoes/redoes like any edit. The dialog ITSELF previews every field edit on the grid immediately, before Done — Done only finalizes it as one undoable command, and Cancel discards the live preview entirely with no trace."
+description: "A single-condition value-comparison rule, a 2-stop color scale, or a custom-formula rule (an arbitrary boolean formula, checked per cell), applied over a range from the Format ▸ Conditional formatting dialog, colors matching cells live (tracking edits) without touching their value/formula; a rule undoes/redoes like any edit. The dialog ITSELF previews every field edit on the grid immediately, before Done — Done only finalizes it as one undoable command, and Cancel discards the live preview entirely with no trace."
 ---
 
 {/* GENERATED — do not edit by hand */}
 
 ## What it does
 
-Select a range and open **Format ▸ Conditional formatting** to color-code cells by their own value, the way Google Sheets does — this daily-driver slice covers the two most common shapes: a **single-condition rule** ("format cells if greater than / less than / equal to / between a value, in a chosen fill color") and a **color scale** (a 2-stop gradient from a min color to a max color across the range's own numbers). Pick a condition and a value (and a second value for "Is between"/"Is not between"), or switch to the Color scale tab — **every change colors the range on the sheet immediately**, exactly like real Google Sheets. **Done** doesn't "apply" anything; it just closes the panel, keeping whatever you last saw on the grid. **Cancel** (or Escape, an outside click, or the panel's own close button) discards the live preview entirely — the grid returns to its exact pre-panel state, with no rule left behind.
+Select a range and open **Format ▸ Conditional formatting** to color-code cells by their own value, the way Google Sheets does. Three shapes: a **single-condition rule** ("format cells if greater than / less than / equal to / between a value, in a chosen fill color"), a **color scale** (a 2-stop gradient from a min color to a max color across the range's own numbers), and a **custom formula** ("format cells if this formula is TRUE" — any formula you'd type into a cell, checked against each cell in the range). Pick a condition and a value (and a second value for "Is between"/"Is not between"), switch to the Color scale tab, or switch to the Custom formula tab and type a formula — **every change colors the range on the sheet immediately**, exactly like real Google Sheets. **Done** doesn't "apply" anything; it just closes the panel, keeping whatever you last saw on the grid. **Cancel** (or Escape, an outside click, or the panel's own close button) discards the live preview entirely — the grid returns to its exact pre-panel state, with no rule left behind.
 
 A rule is **live**: it re-evaluates every time the sheet recalculates, so a cell that crosses the threshold as a dependent formula changes recolors automatically — nothing is baked in at the moment you click Done. It's **presentation only**: coloring `=A1+B1` tints the cell without touching the formula or its computed value. However many fields you tune before clicking Done, the rule still **undoes/redoes as ONE edit** — Ctrl+Z after Done always fully removes it in a single step, never leaving you partway through your own tuning session.
 
+A custom-formula rule is typed once, anchored to the range's own top-left cell, and each cell in the range checks its own version of it shifted the same way a fill handle would shift a formula — a rule over `A1:A10` reading `=B1>10` checks `=B2>10` at `A2`, `=B3>10` at `A3`, and so on. The formula can read any cell — even a cell outside the range, or a cell other than the one it's coloring — so you can highlight column A based on column B, or color a whole row when one of its cells crosses a threshold.
+
 ## Verified behavior
 
-_Matches Google Sheets:_ Google Sheets' Format ▸ Conditional formatting opens a "Conditional format rules" panel with two tabs. The "Single color" tab offers a "Format cells if…" condition dropdown (Is empty/not empty, five text conditions, three date conditions, six numeric-comparison operators — Greater than/Greater than or equal to/Less than/Less than or equal to/Is equal to/Is not equal to, plus Is between/Is not between, and "Custom formula is") and a formatting-style picker (bold/italic/underline/strikethrough/text color/ fill color; default a light green ~#b7e1cd). The "Color scale" tab offers a min/mid/maxpoint picker (default a 2-stop White→Green preset, midpoint "None") with a live gradient preview. Multiple rules can stack over the same or overlapping ranges via "+Add another rule". A rule is grid-owned presentation, re-evaluated against each cell's live value on every recalc (never baked into a static per-cell format), and undoes/redoes like any other edit. This daily-driver slice ships all eight numeric operators (Greater than/Greater than or equal to/Less than/Less than or equal to/Is equal to/Is not equal to/Is between/Is not between), restricts their values to numbers (no text/date/formula conditions), narrows the color scale to 2-stop (matching Sheets' own default, no midpoint), and presents it in a right-docked, non-modal panel matching Sheets' own docked side panel (a fixed, non-resizable width is the one residual chrome gap) — see the oracle's "Accepted divergences" for the full list. Full parity (text/date conditions, custom formula, 3-stop scale, alternating colors, themes) is tracked separately. The panel's OWN fields preview live on the grid before Done — real Google Sheets applies conditional- format highlighting live as the panel's own condition/style/color-scale fields are adjusted; Done just closes the panel, it is not an apply gate, and Cancel discards whatever was previewed with no trace left behind.
+_Matches Google Sheets:_ Google Sheets' Format ▸ Conditional formatting opens a "Conditional format rules" panel with two tabs. The "Single color" tab offers a "Format cells if…" condition dropdown (Is empty/not empty, five text conditions, three date conditions, six numeric-comparison operators — Greater than/Greater than or equal to/Less than/Less than or equal to/Is equal to/Is not equal to, plus Is between/Is not between, and "Custom formula is") and a formatting-style picker (bold/italic/underline/strikethrough/text color/ fill color; default a light green ~#b7e1cd). The "Color scale" tab offers a min/mid/maxpoint picker (default a 2-stop White→Green preset, midpoint "None") with a live gradient preview. Multiple rules can stack over the same or overlapping ranges via "+Add another rule". A rule is grid-owned presentation, re-evaluated against each cell's live value on every recalc (never baked into a static per-cell format), and undoes/redoes like any other edit. This daily-driver slice ships all eight numeric operators (Greater than/Greater than or equal to/Less than/Less than or equal to/Is equal to/Is not equal to/Is between/Is not between), restricts their values to numbers (no text/date/formula conditions), narrows the color scale to 2-stop (matching Sheets' own default, no midpoint), and presents it in a right-docked, non-modal panel matching Sheets' own docked side panel (a fixed, non-resizable width is the one residual chrome gap) — see the oracle's "Accepted divergences" for the full list. A later slice adds the "Custom formula is" tab: one arbitrary boolean formula, anchored to the range's own top-left cell exactly like a fill (each covered cell evaluates its own relative-shifted copy), matching a fill color when the formula's live result is TRUE. Remaining full parity (text/date conditions, 3-stop scale) is tracked separately (alternating colors and themes are their own, distinct Format-menu features, not conditional-format rule kinds). The panel's OWN fields preview live on the grid before Done — real Google Sheets applies conditional-format highlighting live as the panel's own condition/style/color-scale/formula fields are adjusted; Done just closes the panel, it is not an apply gate, and Cancel discards whatever was previewed with no trace left behind.
 
 #### Opening Format > Conditional formatting shows the Single color tab by default
 
@@ -146,3 +148,36 @@ _Matches Google Sheets:_ Google Sheets' Format ▸ Conditional formatting opens
 **Then**
 - **A1** renders as fill=#b7e1cd
 - **A2** renders as fill=false
+
+#### A custom-formula rule colors a cell whose formula resolves to TRUE
+
+**Given**
+- **A1** = `15`
+- **B1** = `10`
+
+**When** I click **A1**, then click menu item **format.conditionalFormatting**, then click **conditional-format-tab-custom-formula**, then fill **conditional-format-formula** with `=A1>B1`, then click **conditional-format-done**
+
+**Then**
+- **A1** renders as fill=#b7e1cd
+
+#### A custom-formula rule leaves a cell uncolored when its formula resolves to FALSE
+
+**Given**
+- **A1** = `5`
+- **B1** = `10`
+
+**When** I click **A1**, then click menu item **format.conditionalFormatting**, then click **conditional-format-tab-custom-formula**, then fill **conditional-format-formula** with `=A1>B1`, then click **conditional-format-done**
+
+**Then**
+- **A1** renders as fill=false
+
+#### A custom-formula rule can color a TEXT cell based on a formula that never reads its own value
+
+**Given**
+- **A1** = `hello`
+- **B1** = `15`
+
+**When** I click **A1**, then click menu item **format.conditionalFormatting**, then click **conditional-format-tab-custom-formula**, then fill **conditional-format-formula** with `=B1>10`, then click **conditional-format-done**
+
+**Then**
+- **A1** renders as fill=#b7e1cd