feat(cocreation): co-creation pattern definition

[warcos-fact]

Description

Defines the co-creation pattern in Storybook — the docs, the interactive creation-with-ai and standard-flow stories with their mock data, and the shared mock clarifying runtime that backs the flow.

The flow exercises a couple of capabilities the SDS didn't expose yet, so this PR also ships a small amount of component code (below). Rebased on main now that the stack it was built on (#4550, #4533, #4535) has merged.

Component changes (public API)

• refactor(headers) — rename BaseHeader / ResourceHeader closeAction → onClose. Drops the per-action tooltip; the close button is now labelled via i18n.actions.close and also renders on mobile (previously desktop-only).
• feat(ai) — add revealChatOnCanvasToggle to F0AiChat. Lets a host suppress the chat content's re-fade when the canvas opens/closes while the chat is docked as a side panel. Defaults to true (unchanged behavior); fullscreen transitions still reveal.

Docs & stories

• docs — co-creation pattern MDX: index, guidelines, phases, building-blocks, standard-flow, creation-with-ai, accessibility, adoption.
• stories — creation-with-ai and standard-flow with mock data (mockData, mockToast, survey-mocks, tab-configs).
• mocks — extend the shared F0AiChat mock runtime with a clarifying-question flow; add a welcome-suggestions demo to the F0AiChatTextArea story.

Internal refactors (from review)

• Centralize the story's story-local CanvasContent / CanvasEntityDefinition casts behind typed helpers.
• Extract repeated survey toast titles into constants.

[github-actions]

✅ No New Circular Dependencies

No new circular dependencies detected. Current count: 0

[github-actions]

🔍 Visual review for your branch is published 🔍

Here are the links to:

• the Visual Review Page

• the latest build on chromatic

• the full storybook

[github-actions]

📦 Alpha Package Version Published

Use pnpm i github:factorialco/f0#npm/alpha-pr-4307 to install the package

Use pnpm i github:factorialco/f0#45a7e4eba85e072c80a769aa357dfe97e0e9b39c to install this specific commit

[github-actions]

Coverage Report for packages/react

Status	Category	Percentage	Covered / Total
🔵	Lines	57.78%	19193 / 33217
🔵	Statements	56.84%	20041 / 35256
🔵	Functions	50%	4432 / 8863
🔵	Branches	50.58%	13705 / 27093

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/react/src/experimental/Information/Headers/BaseHeader/index.tsx	90.9%	50%	77.77%	90.9%	110, 116
packages/react/src/lib/storybook-utils/ai-mocks.ts	0%	0%	0%	0%	3-79
packages/react/src/patterns/Cocreation/__stories__/mockData.tsx	0%	100%	0%	0%	16-191
packages/react/src/patterns/Cocreation/__stories__/survey-mocks.ts	0%	100%	0%	0%	25-260
packages/react/src/patterns/Cocreation/__stories__/tab-configs.ts	0%	100%	100%	0%	12-26
packages/react/src/patterns/ResourceHeader/index.tsx	100%	100%	100%	100%
packages/react/src/sds/ai/F0AiChat/F0AiChat.tsx	74.07%	57.69%	25%	74.07%	63-94, 126, 138, 152-163
packages/react/src/sds/ai/F0AiChat/__stories__/_mock/MockAiChatRuntime.tsx	0%	0%	0%	0%	69-800
packages/react/src/sds/ai/F0AiChat/__stories__/_mock/MockConnectedChatInput.tsx	0%	0%	0%	0%	20-117
packages/react/src/sds/ai/F0AiChat/__stories__/_mock/MockConnectedMessagesContainer.tsx	0%	0%	0%	0%	21-175
packages/react/src/sds/ai/F0AiChat/__stories__/_mock/index.ts	100%	100%	100%	100%

Generated in workflow #15292 for commit 4a4b275 by the Vitest Coverage Report Action

[warcos-fact]

Dialogs-behind-AI-canvas fix is now split out

The dialog-alike stacking bug (confirmation dialogs rendering behind the AI chat/canvas) is fixed properly in #4421 — fix(dialog-alike): portal center modals to a top-level overlay root.

This branch now consumes that fix (merged in here) and drops the temporary container={null} workaround — the cocreation dialogs rely on the new default (center modals portal to #f0-overlay-root, escaping the ApplicationFrame isolate context).

Merge order: merge #4421 first. This branch is main + commits and already contains those exact fix commits, so rebasing onto an updated main (with #4421 merged) is conflict-free. The DialogContent portal resolution here also matches main's latest (#f0-overlay-root → #content → document.body).

[sauldom102]

I would personally replace all pngs in favor of stories showcasing a snapshot of our patterns, we could have them in our f0 composer public index in the future as templates

[github-actions]

⚠️ Breaking public API changes (5)

These public exports were renamed/removed, or had a property/parameter removed, retyped, or newly required compared to main — that breaks consumers. Adding new exports or new optional props is always safe and is not flagged. If a breaking change is intentional, note it in the PR description and use a feat!:/BREAKING CHANGE commit so the release is a major bump.

Comparing f0, experimental and ai against main. Adding components, types, or optional props is safe. This check is non-blocking.

f0

• ✏️ SurveyAnsweringForm — breaking change

  • props.resourceHeader changed: Omit<Pick<BaseHeaderProps_2, "title" | "status" | "metadata" | "description" | "avatar" | "deactivated" | "primaryAction" | "secondaryActions" | "otherActions" | "metadataRowGap" | "showBottomBorder">, "title" | "description"> → Omit<Pick<BaseHeaderProps_2, "title" | "status" | "metadata" | "description" | "onClose" | "avatar" | "deactivated" | "primaryAction" | "secondaryActions" | "otherActions" | "metadataRowGap" | "showBottomBorder">, "title" | "description">
  before → after

  // before
  (props: SurveyAnsweringFormProps) => Element
  // after
  (props: SurveyAnsweringFormProps) => Element

• ✏️ SurveyAnsweringFormInlineReadonlyProps — breaking change

  • resourceHeader changed: Omit<Pick<BaseHeaderProps_2, "title" | "status" | "metadata" | "description" | "avatar" | "deactivated" | "primaryAction" | "secondaryActions" | "otherActions" | "metadataRowGap" | "showBottomBorder">, "title" | "description"> → Omit<Pick<BaseHeaderProps_2, "title" | "status" | "metadata" | "description" | "onClose" | "avatar" | "deactivated" | "primaryAction" | "secondaryActions" | "otherActions" | "metadataRowGap" | "showBottomBorder">, "title" | "description">
  before → after

  // before
  SurveyAnsweringFormInlineReadonlyProps
  // after
  SurveyAnsweringFormInlineReadonlyProps

• ✏️ SurveyAnsweringFormProps — breaking change

  • resourceHeader changed: Omit<Pick<BaseHeaderProps_2, "title" | "status" | "metadata" | "description" | "avatar" | "deactivated" | "primaryAction" | "secondaryActions" | "otherActions" | "metadataRowGap" | "showBottomBorder">, "title" | "description"> → Omit<Pick<BaseHeaderProps_2, "title" | "status" | "metadata" | "description" | "onClose" | "avatar" | "deactivated" | "primaryAction" | "secondaryActions" | "otherActions" | "metadataRowGap" | "showBottomBorder">, "title" | "description">
  before → after

  // before
  SurveyAnsweringFormProps
  // after
  SurveyAnsweringFormProps

experimental

• ✏️ ResourceHeader — breaking change

  • __0 changed: Pick<BaseHeaderProps_2, "status" | "title" | "metadata" | "deactivated" | "description" | "avatar" | "primaryAction" | "secondaryActions" | "otherActions" | "metadataRowGap" | "showBottomBorder"> → Pick<BaseHeaderProps_2, "status" | "title" | "metadata" | "deactivated" | "description" | "avatar" | "onClose" | "primaryAction" | "secondaryActions" | "otherActions" | "metadataRowGap" | "showBottomBorder">
  before → after

  // before
  ({ avatar, title, description, primaryAction, secondaryActions, otherActions, status, metadata, deactivated, metadataRowGap, showBottomBorder, }: Pick<BaseHeaderProps_2, "status" | "title" | "metadata" | "deactivated" | "description" | "avatar" | "primaryAction" | "secondaryActions" | "otherActions" | "metadataRowGap" | "showBottomBorder">) => Element
  // after
  ({ avatar, title, description, primaryAction, secondaryActions, otherActions, status, metadata, deactivated, metadataRowGap, showBottomBorder, onClose, }: Pick<BaseHeaderProps_2, "status" | "title" | "metadata" | "deactivated" | "description" | "avatar" | "onClose" | "primaryAction" | "secondaryActions" | "otherActions" | "metadataRowGap" | "showBottomBorder">) => Element

• ✏️ ResourceHeaderProps — breaking change

  • type changed: Pick<BaseHeaderProps_2, "status" | "title" | "metadata" | "deactivated" | "description" | "avatar" | "primaryAction" | "secondaryActions" | "otherActions" | "metadataRowGap" | "showBottomBorder"> → Pick<BaseHeaderProps_2, "status" | "title" | "metadata" | "deactivated" | "description" | "avatar" | "onClose" | "primaryAction" | "secondaryActions" | "otherActions" | "metadataRowGap" | "showBottomBorder">
  before → after

  // before
  Pick<BaseHeaderProps_2, "status" | "title" | "metadata" | "deactivated" | "description" | "avatar" | "primaryAction" | "secondaryActions" | "otherActions" | "metadataRowGap" | "showBottomBorder">
  // after
  Pick<BaseHeaderProps_2, "status" | "title" | "metadata" | "deactivated" | "description" | "avatar" | "onClose" | "primaryAction" | "secondaryActions" | "otherActions" | "metadataRowGap" | "showBottomBorder">