Flex Column

{
  "id": "block-doc-flex-column-data-media-ready",
  "block_type": "flex_column",
  "props": {
    "title": "Flex Column surface",
    "description": "Layout blocks coordinate nested content, recipe actions, and responsive spacing without forcing extra visual layers.",
    "layout": "stack",
    "appearance": {
      "preset": "bento"
    },
    "blocks": [
      {
        "id": "block-doc-flex-column-data-media-ready-media",
        "block_type": "image",
        "props": {
          "src": "https://storage.googleapis.com/msgsndr/T3RhpcTQAq7Qb47kPQAB/media/677815b8c290c684d5bf3fbd.png",
          "alt": "Cloud Elephants Essential CTO service visual.",
          "title": "Nested placeholder media",
          "description": "A nested block showing how composition behaves with images."
        }
      },
      {
        "id": "block-doc-flex-column-data-media-ready-copy",
        "block_type": "markdown",
        "props": {
          "eyebrow": "Nested copy",
          "lede": "Nested blocks inherit recipe and configuration context.",
          "content": "Composition surfaces keep editorial rhythm, controls, and media aligned from CMS data.",
          "actions": [
            {
              "label": "Open nested action",
              "href": "#nested-action"
            }
          ]
        }
      },
      {
        "id": "block-doc-flex-column-data-media-ready-proof",
        "block_type": "metric-grid",
        "props": {
          "title": "Surface proof",
          "metrics": [
            {
              "label": "Children",
              "value": "3",
              "description": "Nested blocks remain responsive."
            },
            {
              "label": "Recipe",
              "value": "Aligned",
              "description": "Buttons and chips use the active theme."
            }
          ]
        }
      }
    ]
  },
  "block_order": 2,
  "metadata": {
    "composition_recipe": {
      "id": "media-ready",
      "intent": "media",
      "label": "Media Ready",
      "recipe": "polished-saas-growth",
      "source": "block-explorer",
      "quality_proof": [
        "composition"
      ],
      "composition_passport": {
        "id": "media-ready",
        "label": "Media Ready composition passport",
        "intent": "media",
        "recipe": "polished-saas-growth",
        "authoring_mode": "media-led",
        "complexity": "medium",
        "fit": "Use when the flex_column story depends on replaceable imagery, embeds, logos, or visual proof.",
        "required_regions": [
          "surface",
          "copy",
          "feedback"
        ],
        "optional_regions": [
          "collection"
        ],
        "slots": [
          {
            "id": "surface",
            "label": "Surface",
            "required": true,
            "field_count": 6,
            "editable_count": 5,
            "token_roles": [
              "background",
              "panel",
              "panelElevated",
              "border"
            ],
            "summary": "flex_column uses recipe surface tokens to keep the outer frame styled and composable."
          },
          {
            "id": "copy",
            "label": "Copy",
            "required": true,
            "field_count": 2,
            "editable_count": 2,
            "token_roles": [
              "text",
              "textMuted"
            ],
            "summary": "Copy fields map to primary and muted text roles so editors can change words without restyling the block."
          },
          {
            "id": "collection",
            "label": "Collection",
            "required": false,
            "field_count": 4,
            "editable_count": 4,
            "token_roles": [
              "panel",
              "panelElevated",
              "border",
              "badge"
            ],
            "summary": "Collection regions define repeatable item boundaries for add, remove, reorder, and nested editing."
          },
          {
            "id": "feedback",
            "label": "Feedback",
            "required": true,
            "field_count": 0,
            "editable_count": 0,
            "token_roles": [
              "badge",
              "badgeText",
              "signal"
            ],
            "summary": "Feedback regions tie state-readiness evidence to visible recipe status treatments."
          }
        ],
        "builder_field_count": 8,
        "editable_field_count": 7,
        "action_count": 0,
        "control_count": 0,
        "replacement_guidance": [
          "Keep Polished SaaS Growth recipe tokens as the source of visual styling for the surface, text, controls, and actions.",
          "No media replacement is required; keep the layout rhythm stable when optional visual fields are omitted.",
          "No action wiring is required for this recipe; avoid inventing clickable surfaces in content.",
          "No input controls are required; keep the recipe focused on its documented display regions.",
          "Treat collection regions as repeatable slots that support add, remove, reorder, and item-level editing."
        ],
        "publish_checklist": [
          "Validate flex_column against its block contract before publishing.",
          "3 required anatomy regions remain present: surface, copy, feedback.",
          "7/8 builder fields are CMS-editable or intentionally locked.",
          "Noninteractive presentation has no unexpected action or control surfaces.",
          "Phone, tablet, and desktop responsive behavior maps have been reviewed for wrapping and overflow.",
          "Contrast checks meet the AA recipe target."
        ],
        "agent_notes": [
          "Prefer editing props fields described by the builder field map; metadata is evidence, not primary content.",
          "Preserve recipe_alignment token roles unless the page theme or recipe changes intentionally.",
          "Use the anatomy slots to compose or replace content without changing the block type."
        ],
        "summary": "Media Ready is a medium-complexity media-led recipe with 4 documented composition slots."
      },
      "composition_passport_complexity": "medium",
      "composition_passport_authoring_mode": "media-led",
      "composition_passport_slots": [
        "surface",
        "copy",
        "collection",
        "feedback"
      ],
      "composition_passport_check_count": 6,
      "visual_polish_check_count": 6,
      "visual_polish_pass_count": 6,
      "visual_polish_checks": [
        {
          "id": "surface-rhythm",
          "label": "Surface rhythm",
          "axis": "layout",
          "status": "ready",
          "token_roles": [
            "background",
            "panel",
            "panelElevated",
            "border"
          ],
          "evidence": "image treatment uses spacious density and 18px radius base.",
          "summary": "flex_column keeps a stable recipe surface with panel, border, and spacing roles instead of ad hoc wrappers."
        },
        {
          "id": "type-hierarchy",
          "label": "Type hierarchy",
          "axis": "typography",
          "status": "ready",
          "token_roles": [
            "text",
            "textMuted",
            "badgeText"
          ],
          "evidence": "6/6 contrast checks pass the AA target.",
          "summary": "Primary, muted, and badge text roles stay distinct enough for headings, body copy, metadata, and helper text."
        },
        {
          "id": "action-clarity",
          "label": "Action clarity",
          "axis": "interaction",
          "status": "ready",
          "token_roles": [
            "button",
            "buttonText",
            "control",
            "controlText",
            "signal",
            "uplink"
          ],
          "evidence": "0 action surfaces and 0 control surfaces mapped.",
          "summary": "No unexpected interactive surface is introduced for this noninteractive recipe."
        },
        {
          "id": "media-treatment",
          "label": "Media treatment",
          "axis": "media",
          "status": "ready",
          "token_roles": [
            "panelElevated",
            "border",
            "textMuted"
          ],
          "evidence": "No media region is required for this recipe.",
          "summary": "The recipe remains polished without requiring placeholder media or visual assets inside this block."
        },
        {
          "id": "state-feedback",
          "label": "State feedback",
          "axis": "state",
          "status": "ready",
          "token_roles": [
            "badge",
            "badgeText",
            "signal"
          ],
          "evidence": "6 state-readiness entries include default, empty, pending, active, invalid, disabled.",
          "summary": "Feedback, selected, loading, invalid, and disabled treatments use visible state evidence instead of color-only meaning."
        },
        {
          "id": "responsive-balance",
          "label": "Responsive balance",
          "axis": "responsive",
          "status": "ready",
          "token_roles": [
            "panel",
            "border",
            "control"
          ],
          "evidence": "single-column stack phone behavior, two-column adaptive grid tablet behavior, and responsive composition grid desktop behavior documented.",
          "summary": "Phone, tablet, and desktop defaults have explicit stack, wrap, media, and overflow policies for the recipe."
        }
      ],
      "visual_polish_axes": [
        "layout",
        "typography",
        "interaction",
        "media",
        "state",
        "responsive"
      ],
      "default_provenance_count": 8,
      "default_provenance_map": [
        {
          "path": "title",
          "label": "Title",
          "field_role": "copy",
          "value_type": "string",
          "editable": true,
          "repeated": false,
          "default_source": "cloneable block recipe payload",
          "replacement_policy": "safe-to-edit",
          "replacement_risk": "low",
          "guardrail": "Copy can be edited directly when text remains trimmed, localizable, and safe to wrap at phone widths.",
          "validation": "Text should be editable, trimmed, localizable, and safe to wrap at mobile widths.",
          "summary": "Title defaults from cloneable block recipe payload; replacement is low risk with safe-to-edit policy."
        },
        {
          "path": "description",
          "label": "Description",
          "field_role": "copy",
          "value_type": "string",
          "editable": true,
          "repeated": false,
          "default_source": "cloneable block recipe payload",
          "replacement_policy": "safe-to-edit",
          "replacement_risk": "low",
          "guardrail": "Copy can be edited directly when text remains trimmed, localizable, and safe to wrap at phone widths.",
          "validation": "Text should be editable, trimmed, localizable, and safe to wrap at mobile widths.",
          "summary": "Description defaults from cloneable block recipe payload; replacement is low risk with safe-to-edit policy."
        },
        {
          "path": "layout",
          "label": "Layout",
          "field_role": "style",
          "value_type": "string",
          "editable": true,
          "repeated": false,
          "default_source": "Polished SaaS Growth recipe tokens",
          "replacement_policy": "locked-token",
          "replacement_risk": "medium",
          "guardrail": "Keep visual styling aligned to Polished SaaS Growth recipe tokens unless the recipe itself changes.",
          "validation": "Style fields should prefer recipe or appearance tokens over one-off inline values.",
          "summary": "Layout defaults from Polished SaaS Growth recipe tokens; replacement is medium risk with locked-token policy."
        },
        {
          "path": "appearance",
          "label": "Appearance",
          "field_role": "style",
          "value_type": "object",
          "editable": false,
          "repeated": false,
          "default_source": "Polished SaaS Growth recipe tokens",
          "replacement_policy": "locked-token",
          "replacement_risk": "medium",
          "guardrail": "Keep visual styling aligned to Polished SaaS Growth recipe tokens unless the recipe itself changes.",
          "validation": "Style fields should prefer recipe or appearance tokens over one-off inline values.",
          "summary": "Appearance defaults from Polished SaaS Growth recipe tokens; replacement is medium risk with locked-token policy."
        },
        {
          "path": "blocks",
          "label": "Blocks",
          "field_role": "collection",
          "value_type": "array",
          "editable": true,
          "repeated": false,
          "default_source": "cloneable block recipe payload",
          "replacement_policy": "collection-item",
          "replacement_risk": "medium",
          "guardrail": "Edit repeatable items through collection controls so add, remove, reorder, and item-level updates preserve shape.",
          "validation": "Collections should support add, remove, reorder, and item-level editing without changing block shape.",
          "summary": "Blocks defaults from cloneable block recipe payload; replacement is medium risk with collection-item policy."
        },
        {
          "path": "blocks[].id",
          "label": "Blocks Item Id",
          "field_role": "collection",
          "value_type": "string",
          "editable": true,
          "repeated": true,
          "default_source": "cloneable block recipe payload",
          "replacement_policy": "collection-item",
          "replacement_risk": "medium",
          "guardrail": "Edit repeatable items through collection controls so add, remove, reorder, and item-level updates preserve shape.",
          "validation": "Collections should support add, remove, reorder, and item-level editing without changing block shape.",
          "summary": "Blocks Item Id defaults from cloneable block recipe payload; replacement is medium risk with collection-item policy."
        },
        {
          "path": "blocks[].block_type",
          "label": "Blocks Item Block Type",
          "field_role": "collection",
          "value_type": "string",
          "editable": true,
          "repeated": true,
          "default_source": "cloneable block recipe payload",
          "replacement_policy": "collection-item",
          "replacement_risk": "medium",
          "guardrail": "Edit repeatable items through collection controls so add, remove, reorder, and item-level updates preserve shape.",
          "validation": "Collections should support add, remove, reorder, and item-level editing without changing block shape.",
          "summary": "Blocks Item Block Type defaults from cloneable block recipe payload; replacement is medium risk with collection-item policy."
        },
        {
          "path": "blocks[].props",
          "label": "Blocks Item Props",
          "field_role": "collection",
          "value_type": "object",
          "editable": true,
          "repeated": true,
          "default_source": "cloneable block recipe payload",
          "replacement_policy": "collection-item",
          "replacement_risk": "medium",
          "guardrail": "Edit repeatable items through collection controls so add, remove, reorder, and item-level updates preserve shape.",
          "validation": "Collections should support add, remove, reorder, and item-level editing without changing block shape.",
          "summary": "Blocks Item Props defaults from cloneable block recipe payload; replacement is medium risk with collection-item policy."
        }
      ],
      "default_replacement_policies": [
        "collection-item",
        "locked-token",
        "safe-to-edit"
      ],
      "default_replacement_risks": [
        "low",
        "medium"
      ],
      "default_replacement_high_risk_count": 0,
      "content_edit_bundle_count": 3,
      "content_edit_bundles": [
        {
          "id": "copy",
          "label": "Copy bundle",
          "intent": "required",
          "edit_mode": "grouped-fields",
          "field_paths": [
            "description",
            "title"
          ],
          "default_sources": [
            "cloneable block recipe payload"
          ],
          "guardrails": [
            "Copy can be edited directly when text remains trimmed, localizable, and safe to wrap at phone widths."
          ],
          "depends_on": [
            "type hierarchy",
            "mobile wrapping"
          ],
          "summary": "Copy bundle groups 2 fields so CMS edits preserve the recipe shape and default polish."
        },
        {
          "id": "collections",
          "label": "Collection bundle",
          "intent": "recommended",
          "edit_mode": "repeatable-items",
          "field_paths": [
            "blocks",
            "blocks[].block_type",
            "blocks[].id",
            "blocks[].props"
          ],
          "default_sources": [
            "cloneable block recipe payload"
          ],
          "guardrails": [
            "Edit repeatable items through collection controls so add, remove, reorder, and item-level updates preserve shape."
          ],
          "depends_on": [
            "item shape",
            "responsive wrapping"
          ],
          "summary": "Collection bundle groups 4 fields so CMS edits preserve the recipe shape and default polish."
        },
        {
          "id": "style",
          "label": "Style bundle",
          "intent": "guarded",
          "edit_mode": "guarded-system",
          "field_paths": [
            "appearance",
            "layout"
          ],
          "default_sources": [
            "Polished SaaS Growth recipe tokens"
          ],
          "guardrails": [
            "Keep visual styling aligned to Polished SaaS Growth recipe tokens unless the recipe itself changes."
          ],
          "depends_on": [
            "theme recipe tokens",
            "contrast proof"
          ],
          "summary": "Style bundle groups 2 fields so CMS edits preserve the recipe shape and default polish."
        }
      ],
      "content_edit_bundle_ids": [
        "copy",
        "collections",
        "style"
      ],
      "content_edit_bundle_modes": [
        "grouped-fields",
        "guarded-system",
        "repeatable-items"
      ],
      "content_edit_bundle_required_count": 1,
      "content_edit_bundle_guarded_count": 1,
      "recipe_compatibility_count": 6,
      "recipe_compatibility_map": [
        {
          "id": "page-context",
          "label": "Page context",
          "axis": "page",
          "fit": "primary",
          "values": [
            "listing",
            "product-page",
            "product-announcement",
            "event-promotion"
          ],
          "evidence": "4 page types mapped for flex_column.",
          "guardrail": "Choose the first matching page type before editing copy, media, or actions so the recipe starts in the right narrative context.",
          "summary": "flex_column is best composed into listing, product-page, product-announcement, and related pages."
        },
        {
          "id": "section-role",
          "label": "Section role",
          "axis": "layout",
          "fit": "supporting",
          "values": [
            "collection",
            "content"
          ],
          "evidence": "4 anatomy regions produce 2 section roles.",
          "guardrail": "Place the block where its required anatomy regions have enough room before compressing it into dense page slots.",
          "summary": "flex_column can act as collection, content within a composed page."
        },
        {
          "id": "content-model",
          "label": "Content model",
          "axis": "content",
          "fit": "specialized",
          "values": [
            "copy-led",
            "repeatable"
          ],
          "evidence": "7/8 fields are editable across 2 content models.",
          "guardrail": "Keep the content model stable when replacing defaults; do not turn a repeatable or media-led recipe into unrelated ad hoc content.",
          "summary": "Media Ready composition passport is copy-led, repeatable for CMS composition."
        },
        {
          "id": "interaction-model",
          "label": "Interaction model",
          "axis": "interaction",
          "fit": "supporting",
          "values": [
            "noninteractive"
          ],
          "evidence": "0 action surfaces and 0 control surfaces mapped.",
          "guardrail": "Review href, event, input, required, and disabled-state evidence before publishing an interactive recipe.",
          "summary": "flex_column is compatible with noninteractive content sections."
        },
        {
          "id": "authoring-fit",
          "label": "Authoring fit",
          "axis": "authoring",
          "fit": "primary",
          "values": [
            "media-led",
            "medium-complexity",
            "0-high-care-replacements"
          ],
          "evidence": "8 default provenance items with 0 high-care replacements.",
          "guardrail": "Use the default provenance map before cloning the recipe into CMS content or agent-generated page data.",
          "summary": "flex_column uses media-led authoring with medium complexity."
        },
        {
          "id": "responsive-fit",
          "label": "Responsive fit",
          "axis": "responsive",
          "fit": "primary",
          "values": [
            "single-column stack",
            "two-column adaptive grid",
            "responsive composition grid",
            "min-width:0 surfaces, wrapping copy, and no horizontal overflow in the static catalog phone smoke."
          ],
          "evidence": "3 responsive behavior maps cover phone, tablet, and desktop composition.",
          "guardrail": "Review phone wrapping, tablet mid-width balance, and desktop density before adding nested content, longer labels, or extra media.",
          "summary": "flex_column has explicit phone, tablet, and desktop compatibility evidence for composed pages."
        }
      ],
      "recipe_compatibility_axes": [
        "page",
        "layout",
        "content",
        "interaction",
        "authoring",
        "responsive"
      ],
      "recipe_compatibility_page_types": [
        "listing",
        "product-page",
        "product-announcement",
        "event-promotion"
      ],
      "recipe_compatibility_section_roles": [
        "collection",
        "content"
      ],
      "recipe_compatibility_fits": [
        "primary",
        "specialized",
        "supporting"
      ],
      "builder_field_count": 8,
      "builder_field_map": [
        {
          "path": "title",
          "label": "Title",
          "value_type": "string",
          "role": "copy",
          "editable": true,
          "repeated": false,
          "summary": "Title is a string field used for copy."
        },
        {
          "path": "description",
          "label": "Description",
          "value_type": "string",
          "role": "copy",
          "editable": true,
          "repeated": false,
          "summary": "Description is a string field used for copy."
        },
        {
          "path": "layout",
          "label": "Layout",
          "value_type": "string",
          "role": "style",
          "editable": true,
          "repeated": false,
          "summary": "Layout is a string field used for style."
        },
        {
          "path": "appearance",
          "label": "Appearance",
          "value_type": "object",
          "role": "style",
          "editable": false,
          "repeated": false,
          "summary": "Appearance is a object field used for style."
        },
        {
          "path": "blocks",
          "label": "Blocks",
          "value_type": "array",
          "role": "collection",
          "editable": true,
          "repeated": false,
          "summary": "Blocks is a array field used for collection."
        },
        {
          "path": "blocks[].id",
          "label": "Blocks Item Id",
          "value_type": "string",
          "role": "collection",
          "editable": true,
          "repeated": true,
          "summary": "Blocks Item Id is a string collection field used for collection."
        },
        {
          "path": "blocks[].block_type",
          "label": "Blocks Item Block Type",
          "value_type": "string",
          "role": "collection",
          "editable": true,
          "repeated": true,
          "summary": "Blocks Item Block Type is a string collection field used for collection."
        },
        {
          "path": "blocks[].props",
          "label": "Blocks Item Props",
          "value_type": "object",
          "role": "collection",
          "editable": true,
          "repeated": true,
          "summary": "Blocks Item Props is a object collection field used for collection."
        }
      ],
      "editor_guidance_count": 3,
      "editor_guidance_map": [
        {
          "id": "copy",
          "label": "Copy",
          "field_role": "copy",
          "field_count": 2,
          "editable_count": 2,
          "editor_widget": "text/rich-text editor",
          "validation": "Text should be editable, trimmed, localizable, and safe to wrap at mobile widths.",
          "default_source": "cloneable block recipe payload",
          "summary": "Copy fields use the text/rich-text editor across 2/2 editable fields."
        },
        {
          "id": "collection",
          "label": "Collection",
          "field_role": "collection",
          "field_count": 4,
          "editable_count": 4,
          "editor_widget": "repeatable item editor",
          "validation": "Collections should support add, remove, reorder, and item-level editing without changing block shape.",
          "default_source": "cloneable block recipe payload",
          "summary": "Collection fields use the repeatable item editor across 4/4 editable fields."
        },
        {
          "id": "style",
          "label": "Style",
          "field_role": "style",
          "field_count": 2,
          "editable_count": 1,
          "editor_widget": "appearance preset selector",
          "validation": "Style fields should prefer recipe or appearance tokens over one-off inline values.",
          "default_source": "Polished SaaS Growth recipe tokens",
          "summary": "Style fields use the appearance preset selector across 1/2 editable fields."
        }
      ],
      "editor_field_roles": [
        "copy",
        "collection",
        "style"
      ],
      "editor_editable_field_count": 7,
      "state_readiness_count": 6,
      "state_readiness_map": [
        {
          "id": "default",
          "label": "Default",
          "status": "covered",
          "trigger": "Initial render with the cloneable recipe payload",
          "visual_treatment": "Polished SaaS Growth tokens with image documentation treatment",
          "token_roles": [
            "surface",
            "panel",
            "text",
            "button"
          ],
          "proof": "The Polished SaaS Growth recipe renders a contract-safe primary state for flex_column.",
          "summary": "Default state uses the recipe surface, text, and action tokens without one-off styling."
        },
        {
          "id": "empty",
          "label": "Empty",
          "status": "covered",
          "trigger": "Repeatable collections have zero items",
          "visual_treatment": "Reserved panel space with fallback copy or placeholder media",
          "token_roles": [
            "panel",
            "textMuted",
            "badge",
            "border"
          ],
          "proof": "Repeatable fields are documented for add, remove, reorder, and item-level editing.",
          "summary": "Empty-state guidance preserves layout rhythm instead of collapsing the block surface."
        },
        {
          "id": "pending",
          "label": "Pending",
          "status": "covered",
          "trigger": "Deferred content or preview loading",
          "visual_treatment": "Neutral reserved frame with status copy and no layout shift",
          "token_roles": [
            "control",
            "textMuted",
            "progressTrack",
            "border"
          ],
          "proof": "Static recipe payloads reserve the same documented frame while content is loading.",
          "summary": "Pending state keeps dimensions stable while using muted control/status tokens."
        },
        {
          "id": "active",
          "label": "Active",
          "status": "covered",
          "trigger": "Current block and recipe preview are selected",
          "visual_treatment": "Signal/uplink emphasis with visible selected-state chips",
          "token_roles": [
            "signal",
            "uplink",
            "button",
            "badge"
          ],
          "proof": "Recipe and block selection evidence is rendered in the documentation chrome.",
          "summary": "Active state is represented with recipe accent tokens and visible state labels."
        },
        {
          "id": "invalid",
          "label": "Invalid",
          "status": "covered",
          "trigger": "Payload fails the block contract",
          "visual_treatment": "Warning/danger status treatment while preserving the block frame",
          "token_roles": [
            "warning",
            "danger",
            "border",
            "text"
          ],
          "proof": "Contract validation rejects unsupported block payloads instead of rendering unknown UI.",
          "summary": "Invalid state guidance favors explicit status evidence over ambiguous visual collapse."
        },
        {
          "id": "disabled",
          "label": "Disabled",
          "status": "covered",
          "trigger": "Noninteractive metadata or held preview state",
          "visual_treatment": "Muted affordance with preserved label, spacing, and hit-area rhythm",
          "token_roles": [
            "control",
            "textMuted",
            "border",
            "panel"
          ],
          "proof": "Noninteractive blocks retain evidence labels without pretending to be clickable.",
          "summary": "Disabled state keeps the block readable and spatially stable when interaction is unavailable."
        }
      ],
      "state_readiness_states": [
        "default",
        "empty",
        "pending",
        "active",
        "invalid",
        "disabled"
      ],
      "state_readiness_statuses": [
        "covered",
        "covered",
        "covered",
        "covered",
        "covered",
        "covered"
      ],
      "anatomy_region_count": 4,
      "anatomy_map": [
        {
          "id": "surface",
          "label": "Surface",
          "region_role": "outer layout and background",
          "field_paths": [
            "appearance",
            "blocks",
            "blocks[].block_type",
            "blocks[].id",
            "blocks[].props",
            "layout"
          ],
          "token_roles": [
            "background",
            "panel",
            "panelElevated",
            "border"
          ],
          "state_ids": [
            "default",
            "empty",
            "pending",
            "active",
            "invalid",
            "disabled"
          ],
          "required": true,
          "summary": "flex_column uses recipe surface tokens to keep the outer frame styled and composable."
        },
        {
          "id": "copy",
          "label": "Copy",
          "region_role": "headings, body copy, labels, and supporting text",
          "field_paths": [
            "description",
            "title"
          ],
          "token_roles": [
            "text",
            "textMuted"
          ],
          "state_ids": [
            "default",
            "empty",
            "pending",
            "active",
            "invalid",
            "disabled"
          ],
          "required": true,
          "summary": "Copy fields map to primary and muted text roles so editors can change words without restyling the block."
        },
        {
          "id": "collection",
          "label": "Collection",
          "region_role": "repeatable cards, steps, metrics, logos, links, or nested blocks",
          "field_paths": [
            "blocks",
            "blocks[].block_type",
            "blocks[].id",
            "blocks[].props"
          ],
          "token_roles": [
            "panel",
            "panelElevated",
            "border",
            "badge"
          ],
          "state_ids": [
            "default",
            "empty",
            "pending",
            "active",
            "invalid",
            "disabled"
          ],
          "required": false,
          "summary": "Collection regions define repeatable item boundaries for add, remove, reorder, and nested editing."
        },
        {
          "id": "feedback",
          "label": "Feedback",
          "region_role": "status, validation, selected, loading, and disabled evidence",
          "field_paths": [],
          "token_roles": [
            "badge",
            "badgeText",
            "signal"
          ],
          "state_ids": [
            "default",
            "empty",
            "pending",
            "active",
            "invalid",
            "disabled"
          ],
          "required": true,
          "summary": "Feedback regions tie state-readiness evidence to visible recipe status treatments."
        }
      ],
      "anatomy_regions": [
        "surface",
        "copy",
        "collection",
        "feedback"
      ],
      "anatomy_token_roles": [
        "background",
        "badge",
        "badgeText",
        "border",
        "panel",
        "panelElevated",
        "signal",
        "text",
        "textMuted"
      ],
      "action_count": 0,
      "action_map": [],
      "control_count": 0,
      "control_map": [],
      "style_token_count": 15,
      "style_token_map": [
        {
          "role": "background",
          "label": "Page background",
          "value": "#f7fbff",
          "token_type": "color",
          "summary": "Page background uses the background recipe token."
        },
        {
          "role": "panel",
          "label": "Panel surface",
          "value": "#ffffff",
          "token_type": "color",
          "summary": "Panel surface uses the panel recipe token."
        },
        {
          "role": "panelElevated",
          "label": "Elevated surface",
          "value": "#ffffff",
          "token_type": "color",
          "summary": "Elevated surface uses the panelElevated recipe token."
        },
        {
          "role": "text",
          "label": "Primary text",
          "value": "#142033",
          "token_type": "color",
          "summary": "Primary text uses the text recipe token."
        },
        {
          "role": "textMuted",
          "label": "Muted text",
          "value": "#526174",
          "token_type": "color",
          "summary": "Muted text uses the textMuted recipe token."
        },
        {
          "role": "signal",
          "label": "Signal accent",
          "value": "#166bff",
          "token_type": "color",
          "summary": "Signal accent uses the signal recipe token."
        },
        {
          "role": "uplink",
          "label": "Secondary accent",
          "value": "#00a6a6",
          "token_type": "color",
          "summary": "Secondary accent uses the uplink recipe token."
        },
        {
          "role": "border",
          "label": "Border",
          "value": "#d6dee8",
          "token_type": "color",
          "summary": "Border uses the border recipe token."
        },
        {
          "role": "control",
          "label": "Control surface",
          "value": "#ffffff",
          "token_type": "color",
          "summary": "Control surface uses the control recipe token."
        },
        {
          "role": "controlText",
          "label": "Control text",
          "value": "#142033",
          "token_type": "color",
          "summary": "Control text uses the controlText recipe token."
        },
        {
          "role": "button",
          "label": "Button surface",
          "value": "#166bff",
          "token_type": "color",
          "summary": "Button surface uses the button recipe token."
        },
        {
          "role": "buttonText",
          "label": "Button text",
          "value": "#ffffff",
          "token_type": "color",
          "summary": "Button text uses the buttonText recipe token."
        },
        {
          "role": "badge",
          "label": "Badge surface",
          "value": "#eef5ff",
          "token_type": "color",
          "summary": "Badge surface uses the badge recipe token."
        },
        {
          "role": "badgeText",
          "label": "Badge text",
          "value": "#174ea6",
          "token_type": "color",
          "summary": "Badge text uses the badgeText recipe token."
        },
        {
          "role": "fontFamily",
          "label": "Font family",
          "value": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
          "token_type": "font",
          "summary": "Font family comes from the active recipe theme tokens."
        }
      ],
      "style_token_roles": [
        "background",
        "panel",
        "panelElevated",
        "text",
        "textMuted",
        "signal",
        "uplink",
        "border",
        "control",
        "controlText",
        "button",
        "buttonText",
        "badge",
        "badgeText",
        "fontFamily"
      ],
      "contrast_check_count": 6,
      "contrast_pass_count": 6,
      "contrast_checks": [
        {
          "id": "text-on-background",
          "label": "Text on background",
          "foreground_role": "text",
          "background_role": "background",
          "foreground": "#142033",
          "background": "#f7fbff",
          "ratio": 15.73,
          "required_ratio": 4.5,
          "passes": true,
          "level": "AAA",
          "summary": "Text on background is AAA at 15.73:1 against a 4.5:1 requirement."
        },
        {
          "id": "text-on-panel",
          "label": "Text on panel",
          "foreground_role": "text",
          "background_role": "panel",
          "foreground": "#142033",
          "background": "#ffffff",
          "ratio": 16.35,
          "required_ratio": 4.5,
          "passes": true,
          "level": "AAA",
          "summary": "Text on panel is AAA at 16.35:1 against a 4.5:1 requirement."
        },
        {
          "id": "muted-text-on-panel",
          "label": "Muted text on panel",
          "foreground_role": "textMuted",
          "background_role": "panel",
          "foreground": "#526174",
          "background": "#ffffff",
          "ratio": 6.32,
          "required_ratio": 4.5,
          "passes": true,
          "level": "AA",
          "summary": "Muted text on panel is AA at 6.32:1 against a 4.5:1 requirement."
        },
        {
          "id": "button-text-on-button",
          "label": "Button text on button",
          "foreground_role": "buttonText",
          "background_role": "button",
          "foreground": "#ffffff",
          "background": "#166bff",
          "ratio": 4.58,
          "required_ratio": 4.5,
          "passes": true,
          "level": "AA",
          "summary": "Button text on button is AA at 4.58:1 against a 4.5:1 requirement."
        },
        {
          "id": "control-text-on-control",
          "label": "Control text on control",
          "foreground_role": "controlText",
          "background_role": "control",
          "foreground": "#142033",
          "background": "#ffffff",
          "ratio": 16.35,
          "required_ratio": 4.5,
          "passes": true,
          "level": "AAA",
          "summary": "Control text on control is AAA at 16.35:1 against a 4.5:1 requirement."
        },
        {
          "id": "badge-text-on-badge",
          "label": "Badge text on badge",
          "foreground_role": "badgeText",
          "background_role": "badge",
          "foreground": "#174ea6",
          "background": "#eef5ff",
          "ratio": 7.15,
          "required_ratio": 4.5,
          "passes": true,
          "level": "AAA",
          "summary": "Badge text on badge is AAA at 7.15:1 against a 4.5:1 requirement."
        }
      ],
      "contrast_target": "AA",
      "accessibility_standard": "WCAG_2_2_AA",
      "accessibility_check_count": 5,
      "accessibility_checks": [
        {
          "id": "semantic-structure",
          "label": "Semantic structure",
          "category": "semantics",
          "status": "covered",
          "required": true,
          "proof": "runtime block sections, cards, lists, and headings",
          "summary": "flex_column keeps semantic wrappers and readable heading/copy structure in the runtime preview."
        },
        {
          "id": "keyboard-and-tap-targets",
          "label": "Keyboard and tap targets",
          "category": "keyboard",
          "status": "covered",
          "required": false,
          "proof": "static content has no hidden focus trap",
          "summary": "The payload is static content, so the accessibility contract is to avoid hidden or misleading interactive affordances."
        },
        {
          "id": "text-alternatives",
          "label": "Text alternatives",
          "category": "media",
          "status": "covered",
          "required": false,
          "proof": "media slots collapse when unused",
          "summary": "Recipes without media do not leave decorative media shells that need alt text."
        },
        {
          "id": "control-labels",
          "label": "Control labels",
          "category": "forms",
          "status": "covered",
          "required": false,
          "proof": "no input controls in this payload",
          "summary": "No input controls are present, so there are no unlabeled fields to remediate."
        },
        {
          "id": "status-and-motion",
          "label": "Status and motion",
          "category": "state",
          "status": "covered",
          "required": true,
          "proof": "runtime evidence avoids hidden status-only content",
          "summary": "Recipe defaults avoid motion-only meaning and keep status text inspectable when state is present."
        }
      ],
      "responsive_behavior_count": 3,
      "responsive_behavior_map": [
        {
          "id": "phone",
          "label": "Phone",
          "viewport_width": 390,
          "layout_mode": "single-column stack",
          "column_count": 1,
          "spacing_density": "spacious",
          "media_policy": "Inline media uses full-width phone framing, tablet-friendly aspect ratios, and stable desktop constraints.",
          "overflow_policy": "min-width:0 surfaces, wrapping copy, and no horizontal overflow in the static catalog phone smoke.",
          "interaction_policy": "Static content keeps readable line lengths and avoids hidden interactive affordances.",
          "proof": "npm run test:static:block-catalog all-blocks-phone",
          "summary": "Polished SaaS Growth stacks flex_column into one phone column with spacious spacing and bounded content."
        },
        {
          "id": "tablet",
          "label": "Tablet",
          "viewport_width": 768,
          "layout_mode": "two-column adaptive grid",
          "column_count": 2,
          "spacing_density": "spacious",
          "media_policy": "Inline media uses full-width phone framing, tablet-friendly aspect ratios, and stable desktop constraints.",
          "overflow_policy": "tablet preview frames keep mid-width composition, wrap controls, and avoid horizontal overflow in the static catalog smoke.",
          "interaction_policy": "Static content keeps readable line lengths and avoids hidden interactive affordances.",
          "proof": "npm run test:static:block-catalog all-blocks-tablet",
          "summary": "Polished SaaS Growth adapts flex_column to 2 tablet columns before expanding to the desktop layout."
        },
        {
          "id": "desktop",
          "label": "Desktop",
          "viewport_width": 1366,
          "layout_mode": "responsive composition grid",
          "column_count": 2,
          "spacing_density": "spacious",
          "media_policy": "Inline media uses full-width phone framing, tablet-friendly aspect ratios, and stable desktop constraints.",
          "overflow_policy": "desktop preview frames keep constrained widths, stable cards, and no horizontal overflow in the static catalog smoke.",
          "interaction_policy": "Static content keeps readable line lengths and avoids hidden interactive affordances.",
          "proof": "npm run test:static:block-catalog all-blocks-desktop",
          "summary": "Polished SaaS Growth gives flex_column up to 2 desktop columns while preserving recipe spacing."
        }
      ],
      "responsive_viewports": [
        "phone",
        "tablet",
        "desktop"
      ],
      "responsive_proof": [
        "npm run test:static:block-catalog all-blocks-phone",
        "npm run test:static:block-catalog all-blocks-tablet",
        "npm run test:static:block-catalog all-blocks-desktop"
      ],
      "interactive_roles": [],
      "recipe_alignment": {
        "action_token": "button",
        "control_token": "control",
        "surface_token": "panel",
        "text_token": "text",
        "source": "theme recipe tokens"
      }
    },
    "cloneable": true
  }
}