Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion content/docs/learn/playground/active-row-column-bands.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ shows/hides live on the grid behind the panel.

## Verified behavior

_Matches Google Sheets:_ Google Sheets' default active-cell emphasis is HEADERS-ONLY: selecting C4 bolds/tints only the "C" column-letter and "4" row-number header labels — the grid body gets no extra tint beyond the selection outline itself. Sheets has no first-party setting to additionally wash the whole active row/column band across the body (this is a Studio-only opt-in enhancement, not a Sheets-parity requirement), so the Sheets-faithful default this toggle must preserve is OFF — the render layer (already built and unit-tested) has carried this default since and this issue only adds a way to flip it at runtime.
_Matches Google Sheets:_ Google Sheets' default active-cell emphasis is HEADERS-ONLY: selecting C4 bolds/tints only the "C" column-letter and "4" row-number header labels — the grid body gets no extra tint beyond the selection outline itself. Sheets has no first-party setting to additionally wash the whole active row/column band across the body (this is a Studio-only opt-in enhancement, not a Sheets-parity requirement), so the Sheets-faithful default this toggle must preserve is OFF — the render layer (already built and unit-tested) has carried this default from the start, and this issue only adds a way to flip it at runtime.

#### The toggle is reachable from Settings and starts unchecked (OFF, the Sheets-faithful default)

Expand Down
451 changes: 451 additions & 0 deletions content/docs/learn/playground/chart-insert.mdx

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion content/docs/learn/playground/clear-paint-format.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Applying **replaces** the target's format wholesale, the same way Sheets does: i

## Verification

The scenario runner can drive Ctrl+\\ end-to-end (a real keyboard chord), so clear-formatting's scenarios above are fully automated. Paint format's arm/apply gesture is a toolbar click followed by a click on a DIFFERENT target cell — the runner has no verb for driving a toolbar action button yet (the same gap `format-fill-color.mdx` documents for its color swatch), so it's browser-verified instead: arming via a single click on the roller shows the pressed toolbar state and the source range gets a dashed "copying" outline; clicking a target cell applies the source's format, replaces the target's own prior formatting, and the roller un-presses itself (one-shot); double-clicking the roller instead keeps it pressed across repeated target clicks until Escape.
The scenario runner can drive Ctrl+\\ end-to-end (a real keyboard chord), so clear-formatting's scenarios above are fully automated. Paint format's arm/apply gesture is a toolbar click followed by a click on a DIFFERENT target cell — the runner has no verb for driving a toolbar action button yet (the same gap the fill-color feature documents for its color swatch), so it's browser-verified instead: arming via a single click on the roller shows the pressed toolbar state and the source range gets a dashed "copying" outline; clicking a target cell applies the source's format, replaces the target's own prior formatting, and the roller un-presses itself (one-shot); double-clicking the roller instead keeps it pressed across repeated target clicks until Escape.

## Verified behavior

Expand Down
2 changes: 1 addition & 1 deletion content/docs/learn/playground/column-row-resize.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ description: "Dragging a column/row header border resizes it; double-clicking a

## Verified behavior

_Matches Google Sheets:_ In Google Sheets, dragging the border between two column-letter headers (or row-number headers) resizes the column/row to the left (or row above) of the dragged border, with a live vertical/horizontal guide line while dragging. Double-clicking that same border auto-fits the column/row to the widest (or tallest) NON-EMPTY cell's rendered content in it, plus a small padding margin; double-clicking an empty column/row's border is a no-op (it stays/reverts to the default width/height). Selecting multiple columns (via a shift/drag multi-column header selection) or row headers, or selecting the whole sheet (the top-left corner box), then dragging or double-clicking ANY ONE of the selected borders resizes/auto-fits every selected column/row together — a drag applies the SAME width/height to all of them, while an auto-fit sizes EACH one independently to its own widest content (so a multi-column auto-fit can produce different final widths per column). A resized column/row is an explicit override that persists with the file (reload / re-share shows the same widths) and is exported with the sheet. This is long-standing, widely-documented Sheets/Excel behavior, not something ambiguous enough to need live verification against the reference workbook; a follow-up can add the `features/column-row-resize.oracle.md` study-sheets brief if a review finds a discrepancy.
_Matches Google Sheets:_ In Google Sheets, dragging the border between two column-letter headers (or row-number headers) resizes the column/row to the left (or row above) of the dragged border, with a live vertical/horizontal guide line while dragging. Double-clicking that same border auto-fits the column/row to the widest (or tallest) NON-EMPTY cell's rendered content in it, plus a small padding margin; double-clicking an empty column/row's border is a no-op (it stays/reverts to the default width/height). Selecting multiple columns (via a shift/drag multi-column header selection) or row headers, or selecting the whole sheet (the top-left corner box), then dragging or double-clicking ANY ONE of the selected borders resizes/auto-fits every selected column/row together — a drag applies the SAME width/height to all of them, while an auto-fit sizes EACH one independently to its own widest content (so a multi-column auto-fit can produce different final widths per column). A resized column/row is an explicit override that persists with the file (reload / re-share shows the same widths) and is exported with the sheet. This is long-standing, widely-documented Sheets/Excel behavior, not something ambiguous enough to need live verification against the reference workbook; a follow-up can add this feature's own oracle brief if a review finds a discrepancy.

#### Dragging a column border sets an explicit width that persists across save and reload

Expand Down
107 changes: 107 additions & 0 deletions content/docs/learn/playground/command-palette.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
---
title: "Command palette — search the menus"
description: "Alt+/ (Option+/ on Mac) opens a fuzzy-find search box over every active menu command; typing filters live, and picking a result runs it through the exact same seam the menu bar itself uses."
---

{/* GENERATED — do not edit by hand */}

## What it does

Press **Alt+/** (**Option+/** on Mac) anywhere in the grid to open a search
box over every active menu command — Google Sheets' own "Search the menus"
chord. Type to filter live (a plain, case-insensitive substring match on the
command's label or its menu breadcrumb, e.g. "Format > Text"); the top match
is pre-highlighted, so **Enter** runs it immediately. Arrow keys move the
highlight, clicking a row runs that one instead, and **Escape** closes the
box and returns focus to the grid.

A not-yet-built or account-gated command still appears in results — Studio's
established visible-roadmap convention, matching how the menu bar itself
never hides a command, only greys it — but picking one does nothing (same
`aria-disabled` pattern the menu bar's own rows use).

## Try it

<TrueCalc mode="standalone" seed="A1=10;A2==A1+1" />

## Verified behavior

_Matches Google Sheets:_ Google Sheets binds Option+/ (Alt+/) to "Search the menus": an inline box docked at the toolbar's top-left, with live substring filtering (typing "bold" matches "Bold" instantly), a pre-highlighted top result that Enter runs immediately (verified live: running "Bold" through the box flipped the toolbar's own Bold button to active for the selected cell), and Escape to close. Its real match surface is broader than menus alone (it also finds spreadsheet FUNCTION names whose text contains the query, e.g. "insert row" surfaces the GROWTH function) and shows a personalized empty-query suggestion plus a pinned "Find in document" action — see this feature's oracle brief for the full observed behavior and the specific, documented divergences Studio's implementation makes from it (centered overlay instead of an inline toolbar-docked box; menu commands only, not spreadsheet functions; no personalized suggestions or pinned find action, since Studio has neither a usage-history store nor a built find-in-document feature yet).

#### Alt+/ opens the palette, focused and empty

**Given**

**When** I click **A1**, then press `Alt+/`

**Then**
- `[data-testid="command-palette"]` is visible

#### Typing filters live to matching commands, showing their menu breadcrumb

**Given**

**When** I click **A1**, then press `Alt+/`, then type `bold`

**Then**
- `[data-testid="command-palette-item-format.bold"]` is visible containing "Format > Text"

#### Enter on the pre-highlighted top result runs the SAME command the toolbar/menu use, and closes the palette

**Given**
- **A1** = `hello`

**When** I click **A1**, then press `Alt+/`, then type `bold`, then press `Enter`

**Then**
- **A1** is bold
- `[data-testid="command-palette"]` is hidden

#### Clicking a result runs it too, not just Enter

**Given**
- **A1** = `hello`

**When** I click **A1**, then press `Alt+/`, then type `italic`, then click **command-palette-item-format.italic**

**Then**
- **A1** is italic
- `[data-testid="command-palette"]` is hidden

#### A disabled item (Insert > Chart, locked in try mode) still appears — visible roadmap — but Enter on it does nothing

**Given**

**When** I click **A1**, then press `Alt+/`, then type `chart`, then press `Enter`

**Then**
- `[data-testid="command-palette-item-insert.chart"]` is visible
- `[data-testid="command-palette"]` is visible

#### No match shows a plain "no results" message, not a broken empty list

**Given**

**When** I click **A1**, then press `Alt+/`, then type `zzzxyq123nomatch`

**Then**
- `[data-testid="command-palette"]` is visible containing "No matching commands"

#### Escape closes the palette and returns focus to the grid

**Given**

**When** I click **A1**, then press `Alt+/`, then see `[data-testid="command-palette"]` on screen, then press `Escape`, then press `b`, then press `Enter`

**Then**
- **A1** shows `b`
- `[data-testid="command-palette"]` is hidden

#### File's actions are out of scope for this first pass — searching "import" finds nothing

**Given**

**When** I click **A1**, then press `Alt+/`, then type `import`

**Then**
- `[data-testid="command-palette"]` is visible containing "No matching commands"
148 changes: 148 additions & 0 deletions content/docs/learn/playground/conditional-formatting.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
---
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."
---

{/* 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.

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.

## 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.

#### Opening Format > Conditional formatting shows the Single color tab by default

**Given**

**When** I click menu item **format.conditionalFormatting**

**Then**
- `[data-testid="conditional-format-dialog"]` is visible
- `[data-testid="conditional-format-operator"]` is visible

#### A single-condition rule (value > 10) colors a matching cell's fill, leaving its value untouched

**Given**
- **A1** = `15`

**When** I click **A1**, then click menu item **format.conditionalFormatting**, then fill **conditional-format-value** with `10`, then click **conditional-format-done**

**Then**
- **A1** shows `15`
- **A1** renders as fill=#b7e1cd

#### A single-condition rule does NOT color a cell whose value fails the condition

**Given**
- **A1** = `5`

**When** I click **A1**, then click menu item **format.conditionalFormatting**, then fill **conditional-format-value** with `10`, then click **conditional-format-done**

**Then**
- **A1** renders as fill=false

#### Conditional formatting is presentation only — a formula's value/formula are untouched

**Given**
- **A1** = `=5+10`

**When** I click **A1**, then click menu item **format.conditionalFormatting**, then fill **conditional-format-value** with `10`, then click **conditional-format-done**

**Then**
- **A1** shows `15`
- **A1** has formula `=5+10`
- **A1** renders as fill=#b7e1cd

#### Undo removes the rule's effect; redo reapplies it

**Given**
- **A1** = `15`

**When** I click **A1**, then click menu item **format.conditionalFormatting**, then fill **conditional-format-value** with `10`, then click **conditional-format-done**, then click **A1**, then undo

**Then**
- **A1** renders as fill=false

#### Adjusting the value previews the fill LIVE on the grid, BEFORE Done is clicked

**Given**
- **A1** = `15`

**When** I click **A1**, then click menu item **format.conditionalFormatting**, then fill **conditional-format-value** with `10`

**Then**
- **A1** renders as fill=#b7e1cd

#### Switching to the Color scale tab previews IT live too, before Done

**Given**
- **A1** = `0`
- **A2** = `10`

**When** I select **A1:A2**, then click menu item **format.conditionalFormatting**, then click **conditional-format-tab-color-scale**

**Then**
- **A1** renders as fill=#ffffff
- **A2** renders as fill=#57bb8a

#### Cancel discards the live-previewed rule entirely — the grid returns to its pre-panel state

**Given**
- **A1** = `15`

**When** I click **A1**, then click menu item **format.conditionalFormatting**, then fill **conditional-format-value** with `10`, then click **conditional-format-cancel**

**Then**
- **A1** renders as fill=false

#### Done after several live-adjusted values still commits cleanly — undo fully reverts in ONE step, not partway

**Given**
- **A1** = `15`

**When** I click **A1**, then click menu item **format.conditionalFormatting**, then fill **conditional-format-value** with `5`, then fill **conditional-format-value** with `20`, then fill **conditional-format-value** with `10`, then click **conditional-format-done**, then click **A1**, then undo

**Then**
- **A1** renders as fill=false

#### A color-scale rule paints the range's own min/max values at its two endpoint colors

**Given**
- **A1** = `0`
- **A2** = `5`
- **A3** = `10`

**When** I select **A1:A3**, then click menu item **format.conditionalFormatting**, then click **conditional-format-tab-color-scale**, then click **conditional-format-done**

**Then**
- **A1** renders as fill=#ffffff
- **A3** renders as fill=#57bb8a

#### A color-scale rule never affects a cell OUTSIDE its range

**Given**
- **A1** = `0`
- **A2** = `10`
- **B1** = `999`

**When** I select **A1:A2**, then click menu item **format.conditionalFormatting**, then click **conditional-format-tab-color-scale**, then click **conditional-format-done**

**Then**
- **B1** renders as fill=false

#### Is between evaluates inclusive, order-independent bounds via the operator dropdown

**Given**
- **A1** = `5`
- **A2** = `15`

**When** I select **A1:A2**, then click menu item **format.conditionalFormatting**, then choose `between` in **conditional-format-operator**, then fill **conditional-format-value** with `10`, then fill **conditional-format-value2** with `1`, then click **conditional-format-done**

**Then**
- **A1** renders as fill=#b7e1cd
- **A2** renders as fill=false
Loading
Loading