Releases

Highlights

• SkeletonMode turns the real UI into its own loading skeleton, so a loading view no longer needs a second, hand-built tree.
• AccordionGroup stacks accordions as one compact block with separators. Collapsed accordion content is now found by find-in-page.
• Extensions can be written in Vue: @mittwald/flow-remote-vue-components ships as beta.
• NumberField shows custom units that Intl.NumberFormat does not know, like MiB or GiB.
• CodeEditor supports isDisabled.

Deprecations

• Accordion's variant prop is deprecated. variant="outline" no longer draws a frame, so the prop has no effect and warns when passed. Remove it with npx @mittwald/flow-codemods@latest accordion-variant-deprecated src. Where several outlined accordions stood below each other, wrap them in an AccordionGroup. Where a single one has to stand apart, place it in a LayoutCard. See MIGRATION.md‍.

SkeletonMode (beta)

Wrap a view in <SkeletonMode isEnabled={isLoading}> and its real components render as skeleton while it loads. Everything inside is inert, and screen readers hear "Loading content" once. A nested isEnabled={false} shows the parts that are already loaded. Works in extensions as well. (#3317, #3320, #3321, #3322, #3324)

While loading

Text becomes one bar per line, in the width the text will take.

When loaded

Avatars, icons, images, badges, buttons and form fields keep their real size as surfaces. Navigation, alerts, charts, editors and overlays follow the same rules.

AccordionGroup and accordion headers

AccordionGroup (beta)

AccordionGroup renders its accordions as one block with separators, so the surrounding gap only applies around the group. Set allowsMultipleExpanded={false} to keep one accordion open at a time. expandedKeys, defaultExpandedKeys and onExpandedChange control it by the accordions' ids. (#3409)

Text headers

A Text header renders a plain toggle with a smaller chevron. A Heading header now renders an h3 by default and stays in the page outline.

Badges in the header

Badges now sit inside the header instead of breaking out of the toggle.

Find-in-page

Collapsed content is now searchable: the browser's find-in-page expands the accordion that holds a match.

Flow for Vue (beta)

@mittwald/flow-remote-vue-components lets you write an mStudio extension in Vue and still render real Flow components in mStudio. It is the Vue counterpart of @mittwald/flow-remote-react-components, including overlays and the List. The package is beta: build against it, but its API is exempt from Flow's breaking-change promise until the beta ends. See Installation‍. (#3179)

Props keep their Flow names and types. Events become Vue listeners, children become slots, and controllable props work with v-model:

Custom units in NumberField

The new unit prop shows units Intl.NumberFormat does not know, like MiB or GiB, right behind the number, exactly where formatOptions units appear. The label stays the plain field name, and the value stays a plain number. Screen readers get the unit as part of the field's name. (#3367)

Disabled CodeEditor

CodeEditor supports isDisabled. A disabled editor cannot be edited or focused, disables its copy button and drops syntax highlighting, so the code does not look editable. Use isReadOnly when the code must stay readable. Inside a react-hook-form Field, isDisabled now reaches the CodeEditor as well. (#3369, #3457)

Keyboard shortcuts in Combine

Combine now spaces Kbd next to Kbd and Kbd next to Text, so a shortcut legend like "↑ ↓ Select" needs no wrapper of its own. (#3381)

Smaller additions

• CartesianChart.YAxis takes width (a number or "auto"). A category axis sizes itself to its longest label by default, so long names in a vertical bar chart no longer wrap. Number axes keep their 60px. (#3344)
• FormRootError accepts children that replace the default alert. As a function, they receive the root error and can pick the content by its type. (#3302)
• Flex gets paddingBlock and paddingInline. (#3329)

Highlights

• ContextMenu gets showSelectAll for multiple selection, and List filters offer "Select all" from six values on (#3274).
• MarkdownEditor takes files by drop, paste or a toolbar button and inserts them as markdown at the cursor (#3265).
• Image has rounded corners by default; withBorder only draws the border now, in a quieter color (#3266).
• CopyButton gets onCopy, called with the copied text once it is in the clipboard (#3282).
• An Action with a bare closeOverlay closes the overlay it sits in, whatever component that is (#3191).
• The upgrade and list commands of @mittwald/flow-codemods report peer ranges the Flow packages ask for (#3204).

Select all in ContextMenu and List filters

Picking all but one value of a long filter used to mean clicking almost every option. With showSelectAll, a ContextMenu in selectionMode="multiple" starts with a "Select all" entry. It selects every enabled item, reads "Deselect all" once everything is selected, and shows as indeterminate for a partial selection. Each click fires onSelectionChange once with the full set.

List filters in some mode turn it on from six values on, both in the filter menu and in the all-filters modal. MenuItem gets an isIndeterminate prop for the same state. An older host ignores showSelectAll and shows no entry.

File uploads in the MarkdownEditor

Pass uploadFile and the MarkdownEditor accepts files dropped onto it, pasted into it, or picked with the new attachment button in the toolbar. A placeholder goes to the cursor right away. When your promise resolves, it becomes an image embed or a link; when it rejects, the placeholder disappears. The upload itself stays with you — endpoint, auth and error handling — while Flow handles the interaction and the screen-reader announcements. It works in mStudio extensions too.

The attachment button

The paperclip at the end of the toolbar opens the file picker.

Image corners and borders

withBorder now only draws the border. The new withRoundedCorners prop (default true) controls the corner radius on its own, so every Image is rounded unless it opts out. The border uses the same color as Separator and no longer stands out in dark mode.

Rounded by default

An Image without any props now has rounded corners.

With a border

withBorder adds a thin border in the separator color.

Smaller additions

• CopyButton calls onCopy(text) after a successful copy and not when copying fails, so it counts copies, not clicks. It works in mStudio extensions as well.
• <Action closeOverlay> closes the nearest enclosing overlay. A dismiss action no longer has to name the surrounding component; an explicit name like closeOverlay="Modal" still wins.
• A new AIHosting icon, for AI Hosting specifically. Sparkles stays the general AI icon.
• npx @mittwald/flow-codemods@latest upgrade and list <revision> print the peer ranges of the Flow packages you use, marked required or optional, before the install. list --json carries them as peers.

Migrations

Image without withBorder is rounded now. To keep square corners, pass withRoundedCorners={false}. No other code change is required — see MIGRATION.md‍.

Highlights

• CodeBlock animates showing more and less: height, fade and button move together, and the collapsed code runs under the show-more button (#3290).
• A Form can opt out of the close confirmation with confirmModalCloseOnUnsavedChanges={false}, so it no longer asks before its modal closes (#3289).
• ComponentDefaultsProvider is available to remote apps (#3289).
• The Accordion expand animation eases out.

CodeBlock

Toggling show more / show less used to switch the height instantly. The height, the fade and the button's position now animate together, with the same timing as other expanding content. Code that grows after it was expanded is not clipped, and with reduced motion the block switches without a transition. The line numbers fold with the code, and the button sits closer to the bottom edge.

Form and ComponentDefaultsProvider

A Form inside a Modal asks for confirmation before the modal closes while the form has unsaved changes. Set confirmModalCloseOnUnsavedChanges={false} on a form that should not trigger this. The prop overrides the Form.confirmModalCloseOnUnsavedChanges default of a ComponentDefaultsProvider, which mStudio extensions can now import too.

Both first shipped on npm with 1.3.1.

Highlights

• CoachMark is a new overlay that points at a control on its own — for a feature that is new, moved or easy to miss. It leaves the page usable and can be anchored by id, so an mStudio extension can place one (#3166).
• CartesianChart draws bar series, stacked or grouped, and a layout prop turns the chart on its side for horizontal bars (#2880).
• Badge takes a ContextualHelp directly — no trigger to write, no button to style (#3049).
• Heading places a Button or CopyButton beside its text, scaled to the heading (#3136).
• List.Item gets a dependencies prop so a stable render function can declare the external state it reads (#3139).
• Every popover now keeps a gap to the viewport edge, and a width you set reaches the content instead of leaving empty background beside it.

CoachMark

A coach mark points at a control the user did not ask about. It opens on its own and stays out of the way: the page below keeps scrolling, focus is left alone, and the hint rides along with its anchor instead of closing at the first scroll. Write it directly behind the element it points at — it then follows that element in the reading order, and the anchor refers to it through aria-details.

Anchor it with anchorRef where you have a ref, or with anchor where you do not. An mStudio extension renders in a different context than the host, so a ref never arrives, but an id does — the coach mark keeps looking until that element appears, which matters because the host materializes the page in pieces.

The component is remote-capable and marked beta.

Dismissal is composed, not configured: wrap the button in an Action — Flow never closes an overlay on your behalf.

A hint at its anchor

The coach mark opens below the button it points at, with a tip towards it.

Bars in CartesianChart

CartesianChart.Bar renders a bar series. Give several bars the same stackId to stack them; leave it off to group them side by side. Bars pick up the categorical color scale and round their outer corners.

The chart's new layout prop decides which axis is the categorical one. "horizontal" (the default) keeps bars growing upwards; "vertical" turns the chart on its side. XAxis and YAxis follow the layout on their own — only the dataKey moves to whichever axis is the categorical one. Bar is remote-capable.

Grouped bars

Three series without a stackId stand side by side per month.

Horizontal bars

layout="vertical" puts the categories on the Y axis.

Contextual help in a Badge

Write a ContextualHelp into a Badge and the badge supplies the trigger button itself, colored and sized to match:

A ContextualHelpTrigger you write out yourself lands in the same place and is styled the same way, so you keep control of the trigger when you need it.

The help, opened

The trigger sits after the badge's value; the help opens below it.

Buttons in a Heading

A Button or CopyButton written in a heading's content is now placed beside the heading text and scaled to the heading's size — m for the two largest sizes, s below.

A copy button beside the text

The button takes the heading's size and sits on its text line.

Declaring what a list item reads

A List.Item re-renders when its data changes, or when one of its render functions changes identity — which a function written inline in JSX does on every render. A render function with a stable identity gave the item no signal at all (hoisted out of the component, wrapped in useCallback, or reading from an external store), so it kept the values it first saw. dependencies is how you give it one:

A /tunnel entry point

@mittwald/flow-react-components/tunnel re-exports the @mittwald/react-tunnel API through the very module instance Flow uses. The tunnel's context is module-level, so a consumer's own dependency on @mittwald/react-tunnel becomes a second context as soon as the versions diverge, and entries stop finding Flow's providers. Import from this entry point instead of from the package directly (#3176).

Highlights

• npx @mittwald/flow-codemods@latest upgrade bumps every Flow dependency, installs, and runs the codemods for the range it crossed.
• The new @mittwald/flow-codemods package carries the migration catalogue that MIGRATION.md is generated from — 23 entries, each carrying a codemod where the change can be applied mechanically.
• flow-codemods list <revision> shows what a target version would touch before you commit to it.
• Rating takes a segment count, single-segment filling and individual segments: maxValue, fill="single", and RatingSegment children with their own icons and labels.
• @mittwald/flow-react-components ships USAGE.md and a JSON component index, so a coding agent can answer component questions without the docs site.

The upgrade CLI

Upgrading Flow used to mean reading MIGRATION.md, deciding which entries applied to your jump, and running codemods one at a time. The new @mittwald/flow-codemods package does that for you.

upgrade detects your package manager, refuses to run on a dirty working tree (--allow-dirty overrides), and reports every file it declined. --dry writes nothing, --print shows the transformed output, and --json makes list machine-readable.

The catalogue is the single source for both the CLI and MIGRATION.md: an entry describes what changed and how to migrate, and carries a codemod when the change can be decided mechanically. Entries without one still tell you what to do by hand — for those, the prose is the migration.

Rating: segment count, single fill, individual segments

Rating gained maxValue (default 5) for the number of segments, and fill="single" to fill only the selected segment instead of every segment up to it. Both the component and RatingSegment work in mStudio extensions.

Ten segments

maxValue={10} draws ten segments instead of the default five.

Individual segments

For a scale whose segments are not interchangeable, pass RatingSegment children. They define how many segments there are (maxValue no longer applies), and each one takes its own icons and accessible label.

Documentation a coding agent can read

@mittwald/flow-react-components now ships its own consumer guide, and the docs site is published in machine-readable form.

• USAGE.md, shipped inside the package: how to build an application with Flow — component selection, layout and spacing, what is safe to depend on, and the mistakes that come up most. Available offline, which is what makes it usable from an agent's tool loop.
• @mittwald/flow-react-components/component-index — a JSON index of every public component with its lifecycle status and props.
• The docs site at https://flow.mittwald.de‍ serves /llms.txt, /llms.json, /llms-full.txt, and every page as Markdown at /raw/<path>.md.

Point your agent at USAGE.md and the component index; it stops guessing component names and props.

Highlights

• 1.0.0 carries no breaking change over 0.2.0-alpha.1058. Coming from the last alpha, the upgrade is a version bump and nothing else.
• Semantic Versioning is binding from here on: an incompatible change to the runtime public API only ever ships in a new major (ADR 0005, RFC #2711).
• Deprecate, don't break — an API that is going away stays functional and warns at runtime first. That warning is your lead time before the next major.
• Every @mittwald/flow-* package keeps sharing one version, so the promise reads identically for all of them, @mittwald/flow-remote-react-components included.
• Deliberately not covered, so the design system can keep moving: TypeScript types, CSS class names, design tokens, and the internal DOM structure.
• New docs page under Get Started walks through what the release means per audience and how to catch up from an older alpha.

Deprecations

Nothing is newly deprecated in 1.0.0. What changed is the removal date: every path deprecated during the alpha keeps working and now disappears at 2.0.0, not before.

• Align → use Combine (#2871‍)
• SegmentedControl / Segment → use Tabs (switching content) or RadioGroup (setting a value) (#2903‍) — not mechanical, the replacement is a decision per usage
• The global flags object → use ComponentDefaultsProvider, which also works per subtree (#2796‍)
• Button / SubmitButton: color="accent" → use color="success" (#2874‍)
• Action: action → use onAction

What the version number now guarantees

An incompatible change to any of these only appears in a new major: the runtime public API of public.ts (which components and exports exist, which props they accept, and the documented behaviour of documented functions), the props of the components in @mittwald/flow-remote-react-components, published icons, and the versioned remote protocol.

Node and React are runtime requirements with explicit rules. The Node floor is the actively supported LTS — currently node >=24 — and dropping a version still inside its LTS window is breaking, while dropping an already-EOL one may ship in a minor. Widening the accepted React range is backwards compatible; raising the minimum is breaking.

TypeScript types stay best-effort and are not covered, so a tsc error can in theory appear in a patch. If that would be expensive for your project, pin exact versions instead of ^ ranges. A deliberate type break still ships a migration note.

One override exists: a component's lifecycle status. A Beta component is exempt from the breaking-change promise while its API is still moving; Stable is the default and fully bound; Deprecated stays covered until it is removed in a major.

What it means for mStudio extensions

The props of the components in @mittwald/flow-remote-react-components are the contract with extension developers and carry the same promise as the React components. The remote protocol is versioned and negotiated when the connection is established, so an extension built against an older Flow keeps running when the mStudio host updates.

@mittwald/ext-bridge shares the version but has its own migration guide and a stricter Node rule: for that package, any raise of the Node floor is a breaking change, regardless of EOL, and its floor may be more conservative than the rest. Since the alpha it requires node >=24 and narrows its React peer range to ^19.2.0. Declared context parameters are typed and optional config values are never null any more, so reading config.containerId no longer needs a runtime narrow (#2889‍).

Migrations

From 0.2.0-alpha.1058 there is nothing to do. Coming from an older alpha, the work sits between the alphas, not in 1.0.0, and none of it is a prerequisite — the old paths still work in 1.x.

Every change that needs an adjustment in your code has a before/after entry in the migration guide of the package it affects:

• @mittwald/flow-react-components‍ — also covers @mittwald/flow-remote-react-components
• @mittwald/ext-bridge‍

Entries are sorted by version, newest first. Find the version you are coming from and work upwards. The oldest 0.2.0-alpha entry is the jump to 0.2.0-alpha.646, so from anything around 0.2.0-alpha.600 the guides are complete.

How to work through them — and the codemod CLI that automates part of it — is on Upgrades‍.