David Anthony

feat(apollo-wind): extend inline validation to every field control Combobox, SelectTrigger, Textarea, MultiSelect, FileUpload, DatePicker, DateRangePicker, DateTimePicker and Search now take the same `error` and `errorId` props as Input: the message renders below the control through FormFieldError, the control takes the error stroke, and aria-invalid, aria-describedby and aria-errormessage are wired automatically. Trigger-based controls also accept `id` so a `<label htmlFor>` can name them instead of the computed aria-label. The outline Button variant carries the invalid stroke, so every trigger built on it picks it up in one place. Checkbox, Switch and the Slider thumb take the stroke from aria-invalid; RadioGroup items take it from the group, which is where ARIA allows the attribute. Slider forwards aria-invalid to its thumbs rather than the root span. Adds a "With Inline Validation" story and tests for each control, exports the missing prop types (and DateRangePicker) from the barrel, marks the date field invalid in the metadata form renderer, and adds a required Combobox to the Error and Validation pattern page. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

feat(apollo-wind): add lockable value field

feat(apollo-react): add standalone and VS Code canvas templates

feat(apollo-wind): add reusable variable picker

feat(apollo-wind): align modal takeover and run actions Aligns Modal and takeover examples with the Flow visual language, consolidates takeover behavior on the Apollo Wind core Modal, and standardizes execution actions as `Run`. Apollo Wind: - Rename the Storybook component category to `Modal`, documenting that it is implemented with the shadcn/ui Dialog component while Apollo's internal name is Modal. - Add takeover support to the core Modal: sidebar and no-sidebar examples, centered layout, Flow semantic surfaces, theme-aware curtain overlay, expand/collapse controls, and consistent radius behavior. - Add public `Modal*` aliases for the existing Dialog primitives. - Update the Sticky Footer example so header, body, footer, borders, background surfaces, and corner radius match the Flow styling used by Modal. - Add focused takeover tests for title handling, sidebar rendering, expansion, and backdrop-dismiss behavior. - Guard overlayProps click/mouse/pointer handlers so they only fire on backdrop hits, since DialogContent nests inside DialogOverlay for centering and would otherwise bubble interior interactions up to those handlers. Apollo React: - Remove the obsolete `CanvasTakeoverModal` Storybook page. - Migrate Flow Standalone takeover examples to use Apollo Wind `Modal` and `ModalContent variant="takeover"` directly. - Retain the exported `CanvasTakeoverModal` component temporarily as a deprecated compatibility wrapper delegating to the new Apollo Wind Modal, so existing consumers can keep importing the old name until a future breaking release. - Update execution action labels from `Debug`, `Run debug`, and `Run test` to `Run`, including the Play icon where the action is a button. Debug mode and debug-result panel terminology are unchanged. Storybook and layout patterns: - Update Node Property Panel, Canvas toolbar, bottom-panel action, layout-pattern, and Flow examples to use consistent `Run` labels and icon treatment. - Fix the UX inventory draggable list markup and make its Move down boundary depend on the current list length; fix the downward drag-reorder offset so items land in the intended slot.

docs(apollo-wind): add Field Type Guidance reference page New Storybook page at Apollo Wind/Forms/Field Type Guidance, sitting next to Field Help Guidance and Field Validation Guidance. Documents every field-level building block used on a form (Input, Input Group, LockableValueField's icon/binding/insert-variable variants) and cross-references every value type flow-workbench needs against what LockableValueField supports today, so engineers have one place to check before adding a new type case instead of improvising. The page has three top-level parts: an always-visible Overview, a Types section with per-block collapsible state tables and a page-level Expand all/Collapse all, and a LockableValueField status audit table (collapsed by default) with its own per-category accordion, a Supported/Needs fieldType/Needs component status legend, and an "Only show supported" filter. All examples are real, interactive component instances rather than mockups, and the lock toggle, mode switch, and Insert-variable popover all work wherever they're shown; controls that aren't wired to a real demo behavior are rendered disabled instead of looking clickable and doing nothing. Also dedupes this page's shared header/section primitives into guidance-primitives.tsx (used by Field Help/Validation Guidance too), and cross-links all three guidance pages so each points to where the related pattern (help text, error copy, type support) is actually documented. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

feat(storybook): build out the Code Editors pattern pages Adds a full "Apollo Wind > Patterns > Code Editors" documentation section covering how to compose Monaco and CodeMirror across the app, and fixes several real bugs surfaced while building it out: - New pages: Editor Full, Editor Compact, Editor Input, Editor Variables, and a canvas-panel Layout Pattern example, alongside the existing Overview / Reference Monaco / Reference CodeMirror / Themes pages. - Editor Variables demonstrates inserting a variable both ways: through a VariablePicker "Insert" dropdown and by typing `$` in the editor, covering 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 reuses the shared FullWorkbenchComposition template, which gains an optional renderRightPanel prop so other pattern pages can supply their own panel. Its panel header matches the other workbench panels (node icon, no header action). The expression takeover uses the same Modal + ModalContent variant="takeover" pattern as the shared node takeover (not the deprecated CanvasTakeoverModal), opens straight into fullscreen, and has Run in its header as a secondary button. - Input Editor: the lockable-field example mounts Monaco borderless in the field's own row, like NodePropertyPanel's inline editor, instead of a nested bordered box, and passes a styled Label through the label slot. The field's id, aria-*, and data-slot are forwarded to Monaco's focus element and the editor is named via ariaLabel, so validation and InputGroup focus styling reach it. Clicking the field label focuses the editor, since a label can't activate Monaco's EditContext div. The Monaco and CodeMirror inputs use the default InputGroup fill and share one code-mode treatment (header, no line numbers, wrapping, height, type size, Future radius). - Field Type guidance links its insert-variable section and the matching audit rows to Editor Variables for the code editor implementation. - Fixed: Monaco's TS diagnostics flagged undeclared identifiers in these illustrative snippets as errors. Semantic validation is disabled; syntax validation stays on so malformed code still surfaces. These TypeScript defaults are global to Monaco, so they apply only while a demo editor is mounted and the previous defaults are restored afterwards. Models now use a unique .tsx URI with JSX enabled, since the full sample is a React component and every JSX line was reported as a syntax error. - Fixed: LiveMonacoEditor forwarded value via defaultValue, so external updates to an already-mounted controlled editor were ignored. It is now controlled when a caller passes onChange and uncontrolled otherwise, so static samples can't reconcile a constant value over user edits. The Monaco input and Editor Variables demos keep their expression in state, so code-mode edits and inserted variables survive re-renders. The CodeMirror editors (the input demo and LiveCodeMirrorEditor) rebuild their view on theme changes from the live document instead of the original sample or a keyed remount, so edits survive a theme switch. - Fixed: the lockable-field expression editor had a fixed 84px height inside a 36px input row, so it overflowed and covered the field label above it; it now fills the row and centers one line at any row height. - Fixed: its placeholder was never wired up, so a cleared field showed nothing; it now renders in the same position and font as the built-in expression input's placeholder. - Fixed: CodeMirror's own base styles overrode our theme font-family on `.cm-content`, so CodeMirror editors rendered in the browser's generic monospace font (visibly larger) instead of Apollo's font stack. The rule now inherits from the themed root. - Fixed: Monaco and CodeMirror examples (Editor Full/Compact, Themes) used mismatched heights since CodeMirror auto-sizes to its content; both now share an explicit height so side-by-side comparisons line up. - Storybook sidebar: added "Patterns" > ["Layout Patterns", "Code Editors"] to storySort so the new section has a stable position. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

fix(apollo-react): edge labels lose their background and can render under crossing lines Two bugs in CanvasEdge/SequenceEdge labels, plus a new Storybook reference page documenting label behavior across themes and edge cases. Bug 1 — line renders over the label: EdgeLabel rendered as a raw foreignObject inside its own edge's <g>, so it competed in the same per-edge z-index/DOM-order stack as every other edge's stroke. An unselected edge crossing near a label could paint its line over that label. Fixed by portaling the label through xyflow's EdgeLabelRenderer instead (the pattern StageEdge/EdgeToolbar already use), which always paints after every edge's own <svg>, regardless of z-index or array order. Bug 2 — label background can render fully transparent: `background: var(--canvas-background)` had no fallback value. That variable only resolves under a themed ancestor (body.light/.future-*/.vertex/.canvas per canvas/styles/variables.css); a host that mounts the canvas without one (e.g. a shadow-DOM host) got a transparent label with illegible text over the line. Added a `--color-background` fallback to both EdgeLabel.tsx and StageEdge.tsx's StageEdgeLabel. New: Components/Edges/EdgeLabels Storybook page Consolidates label documentation that was previously scattered (and, in one spot, stale — SequenceEdge.stories.tsx's old EdgeLabels story still claimed labels render via "SVG foreignObject") into one dedicated reference page: - Orientation, Diff States: baseline label behavior - Crossing Labeled Edges: regression coverage for Bug 1 - Themes: the same label across all 9 canvas themes side by side - Missing Theme Fallback: reproduces Bug 2's scenario directly (simulates an unthemed ancestor via CSS custom-property `initial`), and documents the one remaining gap the fallback doesn't cover (no themed ancestor at all, background still transparent) - Overflow: long label text and short-edge crowding (known, undocumented limitations, not fixed here) - Execution Status, Bent Path, Read Only: label composes correctly with execution-status coloring, multi-segment waypoint routing, and readonly mode Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

feat(apollo-wind): add DAP component patterns page

feat(storybook): split node patterns into focused stories