docs(storybook): build out Code Editors pattern pages

[dbacomputer]

Summary

Builds out a full "Apollo Wind > Patterns > Code Editors" documentation section covering how to compose Monaco and CodeMirror across the app, plus several real bugs found and fixed while building it.

New pages

• Editor Full / Editor Compact / Editor Input — reference layouts for full, compact, and mode-switching (text ⇄ code) editors.
• Editor Variables — shows binding a variable into an editor two ways: a VariablePicker "Insert" dropdown, or typing $ in the editor. Covers both PromptEditor (ref-based insertVariableToken) and Monaco (cursor-position insert via editor.executeEdits, the same pattern already used in NodePropertyPanel's panel composition stories).
• Layout Pattern — a canvas-panel example whose expression takeover now opens straight into fullscreen instead of the smaller windowed view (per review feedback).

Bugs fixed along the way

• Monaco's TS diagnostics were flagging undeclared identifiers in these illustrative snippets as real errors (red squigglies) — disabled semantic/syntax validation for these demo editors.
• The lockable-field expression editor had a fixed 84px height inside a 36px input row, so it visually overflowed and covered the field label above it — sized it to match the row.
• That same editor's wrapper was missing flex sizing, collapsing it to a 5px sliver, and its placeholder text was never wired up (a cleared field showed nothing instead of matching Input's placeholder styling) — both fixed.
• CodeMirror's own base styles were silently overriding our theme font-family on .cm-content, so CodeMirror editors rendered in the browser's generic monospace font (visibly larger than Monaco) instead of Apollo's font stack — fixes every CodeMirror instance in this file, not just one page.
• apolloFutureDarkCodeMirror/apolloFutureLightCodeMirror used a background one shade darker than Monaco's for the same theme, while every other token already matched — aligned both to Monaco's value.
• Editor Full/Compact and the Themes page compared Monaco against CodeMirror at mismatched heights, since CodeMirror auto-sizes to its content — both now share an explicit height.

Other changes

• Extracted ErrorAndValidationWorkbench out of LayoutPatterns.stories.tsx into its own plain .tsx file — exporting it directly from a .stories.tsx file caused Storybook's CSF auto-detection to register it as a duplicate implicit story.
• Renamed Node Property Panel's "Editor Full" / "Editor Compact" / "Editor Inline" stories to "Panel — Full Editor" / "Panel — Compact Editor" / "Panel — Inline Editor" — they collided in name (though not content) with the new Code Editors pages, making both sets hard to tell apart in search/sidebar.
• Added Patterns > [Layout Patterns, Code Editors] to Storybook's storySort so the new section has a stable sidebar position.

Test plan

• biome check clean on all changed files
• tsc --noEmit clean for apollo-wind, apollo-react
• turbo run typecheck clean for apollo-wind, apollo-react, storybook-app
• Manually verified every page listed above in a running Storybook instance (Future Dark/Light themes), including interactive checks: variable insertion into both PromptEditor and Monaco, placeholder rendering, takeover fullscreen behavior, and Monaco/CodeMirror font and height parity across Editor Full/Compact and the Themes page

🤖 Generated with Claude Code

[github-actions]

Apollo Coded App preview deployments finished with failures.

Project	Status	Preview	Updated (PT)
apollo-design	Failed	Logs	Sep 01, 2026, 04:01:10 PM
apollo-docs	Failed	Logs	Sep 01, 2026, 04:01:10 PM
apollo-landing	Failed	Logs	Sep 01, 2026, 04:01:10 PM
apollo-vertex	Failed	Logs	Sep 01, 2026, 04:01:10 PM

[github-actions]

Dependency License Review

• ✅ 1951 package(s) scanned
• ✅ No license issues found
• ⚠️ 2 package(s) excluded (see details below)

License distribution

License	Packages
MIT	1722
ISC	88
Apache-2.0	55
BSD-3-Clause	27
BSD-2-Clause	23
BlueOak-1.0.0	8
MPL-2.0	4
MIT-0	3
CC0-1.0	3
MIT OR Apache-2.0	2
(MIT OR Apache-2.0)	2
Unlicense	2
LGPL-3.0-or-later	1
Python-2.0	1
CC-BY-4.0	1
(MPL-2.0 OR Apache-2.0)	1
Unknown	1
Artistic-2.0	1
(WTFPL OR MIT)	1
(BSD-2-Clause OR MIT OR Apache-2.0)	1
CC-BY-3.0	1
0BSD	1
(MIT OR CC0-1.0)	1
MIT AND ISC	1

Excluded packages

Package	Version	License	Reason
@img/sharp-libvips-linux-x64	1.3.2	LGPL-3.0-or-later	LGPL pre-built binary, not linked
khroma	2.1.0	Unknown	MIT per GitHub repo, missing license field in package.json

[Copilot]

🟡 Changes recommended

There are confirmed issues in Storybook content (em-dash usage) and a LiveMonacoEditor control bug (defaultValue vs value) that can desync demos relying on external state.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Builds out a new Storybook “Patterns > Code Editors” documentation section in apollo-wind, aligns CodeMirror theme tokens with Monaco for Future themes, and refactors a large workbench composition out of a *.stories.tsx file to avoid Storybook CSF auto-detection collisions.

Changes:

• Added/expanded Storybook pattern pages for Monaco + CodeMirror usage, variable insertion, and a canvas-panel “Layout Pattern” example.
• Updated CodeMirror Future theme background tokens to match Monaco’s editor.background.
• Extracted ErrorAndValidationWorkbench into a standalone .tsx module and updated Storybook sorting to include the new Patterns section.

File summaries

File	Description
packages/apollo-wind/src/editor-themes/codemirror.ts	Aligns Future dark/light CodeMirror background tokens to match Monaco.
packages/apollo-wind/src/components/ui/code-editors.stories.tsx	Adds the new “Patterns/Code Editors” documentation pages, demos, and theme previews.
packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx	Renames panel editor stories to avoid collisions with the new Code Editors pages.
apps/storybook/src/patterns/LayoutPatterns.stories.tsx	Removes the inlined workbench implementation and consumes the extracted component.
apps/storybook/src/patterns/ErrorAndValidationWorkbench.tsx	New extracted workbench component used by multiple pattern pages.
apps/storybook/.storybook/preview.tsx	Stabilizes sidebar ordering for the new Patterns section.

Review details

Suppressed comments (2)

packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx:1313

• The Storybook story name uses an em dash character, which is discouraged in Storybook documentation content. Prefer a colon (or similar) separator.

export const CompactEditor: Story = {
  name: 'Panel — Compact Editor',
  render: () => <CompactEditorStory />,

packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx:1525

• The Storybook story name uses an em dash character, which is discouraged in Storybook documentation content. Prefer a colon (or similar) separator.

export const InputEditor: Story = {
  name: 'Panel — Inline Editor',
  render: () => <InputEditorStory />,

• Files reviewed: 6/6 changed files
• Comments generated: 5
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[github-actions]

Storybook visual diff

⏭️ Skipped: the apollo-design preview deployment did not succeed, so no comparison ran. Logs

Updated (PT): Sep 01, 2026, 04:01:23 PM

[github-actions]

📊 Coverage + size by package

Per-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.

Package	Coverage	New-line coverage	Packed (gzip)	Unpacked	vs main
@uipath/apollo-core	—	—	41.59 MB	49.70 MB	±0
@uipath/apollo-react	39.8%	— (3 untracked)	7.56 MB	29.11 MB	±0
@uipath/apollo-ui-icons	—	—	2.85 MB	6.91 MB	±0
@uipath/apollo-wind	65.0%	— (715 untracked)	428.2 KB	2.75 MB	−39 B
@uipath/ap-chat	85.8%	—	43.46 MB	56.09 MB	±0

_{"Coverage" is each package's own coverage.include scope (e.g. apollo-core instruments only scripts/). "Packed"/"Unpacked" come from npm pack --dry-run and only cover built packages — "—" means not measured this run (package not affected / not built). "vs main" is the packed (gzipped) delta against the last successful main build (the package-sizes artifact from the Release workflow); "—" there means no main baseline was available this run. The baseline is main's latest build, not this PR's exact merge-base, so it includes any drift since the branch diverged. Packages with no vitest config are omitted.}

[Copilot]

🔵 Needs a closer look

There are new cross-workspace imports in code-editors.stories.tsx (deep apollo-react source imports and a package→app dependency) that should be corrected/avoided to match repo conventions and reduce coupling.

Review details

Suppressed comments (2)

Previously missed (1) — in code that hasn't changed since the last review.

packages/apollo-wind/src/components/ui/code-editors.stories.tsx:10

• This story file in packages/apollo-wind imports a component from apps/storybook, creating a package→app dependency that makes the story harder to reuse and can break isolated package typechecks/builds. Consider moving ErrorAndValidationWorkbench into a shared location (e.g., an apollo-react canvas story template) or duplicating the minimal workbench composition locally within this storybook section.

This issue also appears on line 11 of the same file.

packages/apollo-wind/src/components/ui/code-editors.stories.tsx:13

• These imports reach into apollo-react’s source tree via a relative path. Prefer consuming the public canvas entrypoints (as other Storybook code does) so refactors inside apollo-react don’t silently break this story and to avoid cross-workspace relative coupling.

import { CanvasTakeoverModal } from '../../../../apollo-react/src/canvas/components/CanvasTakeoverModal/CanvasTakeoverModal';
import { NodePropertyPanel } from '../../../../apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel';
import { withCanvasProviders } from '../../../../apollo-react/src/canvas/storybook-utils';

• Files reviewed: 6/6 changed files
• Comments generated: 0 new
• Review effort level: Lite