@flowstack-ui/agent-tools 0.1.0-bootstrap.0

package/public/packages/brick/0.1.11/components/bottom-navigation.txt

@@ -0,0 +1,106 @@
+# BottomNavigation
+
+Source: @flowstack-ui/brick@0.1.11
+Kind: component
+ID: bottom-navigation
+
+# BottomNavigation agent guide
+
+## Purpose
+
+Style a short, stable set of primary compact-application destinations with active state and label-visibility recipes.
+
+## Use when
+
+- A compact application needs a small fixed set of primary destinations at the bottom edge.
+
+## Choose something else when
+
+- Navigation is longer, grouped, top-level disclosure navigation, or local panel switching. Use NavList, NavigationMenu, or Tabs.
+
+## Required composition
+
+- Place named Items with unique values inside Root; provide href for destinations and include text labels even when the selected visual recipe hides them.
+
+## Rules
+
+- **MUST:** Keep every icon destination's text accessible in every label-visibility mode.
+- **MUST:** When fixed or sticky, coordinate application content and safe-area spacing outside the component.
+- **MUST:** Load styles.css or core.css plus bottom-navigation.css.
+
+## Common mistakes
+
+- **Avoid:** Using BottomNavigation as a generic mobile menu or removing labels from the DOM. **Instead:** Use Drawer/NavList for a menu and preserve each Item label.
+
+## Validation checklist
+
+- Check active, disabled, label visibility, safe areas, narrow widths, touch targets, focus, and RTL.
+- Confirm URL destinations render links and CSS is loaded.
+
+## Related guidance
+
+- `nav-list`
+- `tabs`
+- `icon-button`
+- `show`
+- `hide`
+
+## Machine record
+
+```json
+{
+  "schema": "flowstack.agent-component.v1",
+  "id": "bottom-navigation",
+  "name": "BottomNavigation",
+  "package": "@flowstack-ui/brick",
+  "layer": "brick",
+  "kind": "component",
+  "purpose": "Style a short, stable set of primary compact-application destinations with active state and label-visibility recipes.",
+  "useWhen": [
+    "A compact application needs a small fixed set of primary destinations at the bottom edge."
+  ],
+  "avoidWhen": [
+    {
+      "condition": "Navigation is longer, grouped, top-level disclosure navigation, or local panel switching.",
+      "useInstead": "NavList, NavigationMenu, or Tabs"
+    }
+  ],
+  "composition": [
+    "Place named Items with unique values inside Root; provide href for destinations and include text labels even when the selected visual recipe hides them."
+  ],
+  "rules": [
+    {
+      "id": "bottom-navigation-labels",
+      "level": "must",
+      "statement": "Keep every icon destination's text accessible in every label-visibility mode."
+    },
+    {
+      "id": "bottom-navigation-overlay",
+      "level": "must",
+      "statement": "When fixed or sticky, coordinate application content and safe-area spacing outside the component."
+    },
+    {
+      "id": "bottom-navigation-css",
+      "level": "must",
+      "statement": "Load styles.css or core.css plus bottom-navigation.css."
+    }
+  ],
+  "commonMistakes": [
+    {
+      "mistake": "Using BottomNavigation as a generic mobile menu or removing labels from the DOM.",
+      "correction": "Use Drawer/NavList for a menu and preserve each Item label."
+    }
+  ],
+  "validation": [
+    "Check active, disabled, label visibility, safe areas, narrow widths, touch targets, focus, and RTL.",
+    "Confirm URL destinations render links and CSS is loaded."
+  ],
+  "related": [
+    "nav-list",
+    "tabs",
+    "icon-button",
+    "show",
+    "hide"
+  ]
+}
+```

package/public/packages/brick/0.1.11/components/breadcrumb.txt

@@ -0,0 +1,96 @@
+# Breadcrumb
+
+Source: @flowstack-ui/brick@0.1.11
+Kind: component
+ID: breadcrumb
+
+# Breadcrumb agent guide
+
+## Purpose
+
+Present page ancestry as a finished named navigation trail while preserving Atom breadcrumb semantics.
+
+## Use when
+
+- Users need to see the current page's place in a hierarchy and navigate to ancestors.
+
+## Choose something else when
+
+- The relationship is result pagination, local panels, or general navigation. Use Pagination, Tabs, or NavList.
+
+## Required composition
+
+- Compose Root > List with Item containing ancestor Link or the one current Page, separated by decorative Separator; use an accessible button when Ellipsis is interactive.
+
+## Rules
+
+- **MUST:** Render one current Page and keep ancestor destinations as Links.
+- **MUST:** Load styles.css or core.css plus breadcrumb.css.
+
+## Common mistakes
+
+- **Avoid:** Recreating the trail with spans and manual separators or making the current page a link. **Instead:** Use the complete Breadcrumb anatomy and its current Page part.
+
+## Validation checklist
+
+- Check landmark naming, current state, collapsed hierarchy, focus rings, overflow, zoom, and RTL.
+- Confirm separators are decorative and CSS is loaded.
+
+## Related guidance
+
+- `link`
+- `pagination`
+- `nav-list`
+
+## Machine record
+
+```json
+{
+  "schema": "flowstack.agent-component.v1",
+  "id": "breadcrumb",
+  "name": "Breadcrumb",
+  "package": "@flowstack-ui/brick",
+  "layer": "brick",
+  "kind": "component",
+  "purpose": "Present page ancestry as a finished named navigation trail while preserving Atom breadcrumb semantics.",
+  "useWhen": [
+    "Users need to see the current page's place in a hierarchy and navigate to ancestors."
+  ],
+  "avoidWhen": [
+    {
+      "condition": "The relationship is result pagination, local panels, or general navigation.",
+      "useInstead": "Pagination, Tabs, or NavList"
+    }
+  ],
+  "composition": [
+    "Compose Root > List with Item containing ancestor Link or the one current Page, separated by decorative Separator; use an accessible button when Ellipsis is interactive."
+  ],
+  "rules": [
+    {
+      "id": "breadcrumb-current",
+      "level": "must",
+      "statement": "Render one current Page and keep ancestor destinations as Links."
+    },
+    {
+      "id": "breadcrumb-css",
+      "level": "must",
+      "statement": "Load styles.css or core.css plus breadcrumb.css."
+    }
+  ],
+  "commonMistakes": [
+    {
+      "mistake": "Recreating the trail with spans and manual separators or making the current page a link.",
+      "correction": "Use the complete Breadcrumb anatomy and its current Page part."
+    }
+  ],
+  "validation": [
+    "Check landmark naming, current state, collapsed hierarchy, focus rings, overflow, zoom, and RTL.",
+    "Confirm separators are decorative and CSS is loaded."
+  ],
+  "related": [
+    "link",
+    "pagination",
+    "nav-list"
+  ]
+}
+```

package/public/packages/brick/0.1.11/components/button.txt

@@ -0,0 +1,103 @@
+# Button
+
+Source: @flowstack-ui/brick@0.1.11
+Kind: component
+ID: button
+
+# Button agent guide
+
+## Purpose
+
+Render a finished accessible action or emphasized native link with Brick size, tone, variant, loading, and composition contracts.
+
+## Use when
+
+- The user triggers an action such as submit, save, open, dismiss, or retry.
+- A destination intentionally needs a filled, soft, outlined, or ghost action treatment.
+
+## Choose something else when
+
+- A destination should read as ordinary inline or standalone navigation. Use Link.
+
+## Required composition
+
+- Omit href for actions and supply href for emphasized destinations; choose tone, variant, and size from intent and add an icon only when it improves recognition.
+
+## Rules
+
+- **MUST:** Use action mode for operations and href link mode for emphasized destinations; visual prominence never justifies hiding navigation in onPress.
+- **MUST:** Load styles.css or core.css plus button.css.
+
+## Common mistakes
+
+- **Avoid:** Navigating from onPress without a real href. **Instead:** Use Button href mode for emphasized navigation or Link for ordinary navigation.
+
+## Validation checklist
+
+- Confirm an accessible name and action semantics.
+- Test focus, keyboard activation, disabled/loading behavior, and contrast in every supported appearance; disabled labels must remain readable while ghost and outline controls stay transparent.
+
+## Related guidance
+
+- `@flowstack-ui/atom/agents/button`
+- `link`
+- `form`
+
+## Machine record
+
+```json
+{
+  "schema": "flowstack.agent-component.v1",
+  "id": "button",
+  "name": "Button",
+  "package": "@flowstack-ui/brick",
+  "layer": "brick",
+  "kind": "component",
+  "purpose": "Render a finished accessible action or emphasized native link with Brick size, tone, variant, loading, and composition contracts.",
+  "useWhen": [
+    "The user triggers an action such as submit, save, open, dismiss, or retry.",
+    "A destination intentionally needs a filled, soft, outlined, or ghost action treatment."
+  ],
+  "avoidWhen": [
+    {
+      "condition": "A destination should read as ordinary inline or standalone navigation.",
+      "useInstead": "Link"
+    }
+  ],
+  "composition": [
+    "Omit href for actions and supply href for emphasized destinations; choose tone, variant, and size from intent and add an icon only when it improves recognition."
+  ],
+  "rules": [
+    {
+      "id": "button-semantics",
+      "level": "must",
+      "statement": "Use action mode for operations and href link mode for emphasized destinations; visual prominence never justifies hiding navigation in onPress."
+    },
+    {
+      "id": "button-css",
+      "level": "must",
+      "statement": "Load styles.css or core.css plus button.css."
+    }
+  ],
+  "commonMistakes": [
+    {
+      "mistake": "Navigating from onPress without a real href.",
+      "correction": "Use Button href mode for emphasized navigation or Link for ordinary navigation."
+    }
+  ],
+  "validation": [
+    "Confirm an accessible name and action semantics.",
+    "Test focus, keyboard activation, disabled/loading behavior, and contrast in every supported appearance; disabled labels must remain readable while ghost and outline controls stay transparent."
+  ],
+  "related": [
+    {
+      "kind": "package",
+      "package": "@flowstack-ui/atom",
+      "id": "button",
+      "versionPolicy": "installed-exact"
+    },
+    "link",
+    "form"
+  ]
+}
+```

package/public/packages/brick/0.1.11/components/card.txt

@@ -0,0 +1,132 @@
+# Card
+
+Source: @flowstack-ui/brick@0.1.11
+Kind: component
+ID: card
+
+# Card agent guide
+
+## Purpose
+
+Group content about one subject in a finished static compound surface with header, content, and footer anatomy.
+
+## Use when
+
+- A bounded subject needs a title, supporting content, and optional actions as one visual unit.
+
+## Choose something else when
+
+- Only generic background, border, radius, or elevation is needed. Use Surface.
+
+## Required composition
+
+- Compose Card.Root with only the Header, Title, Description, Action, Content, and Footer parts the subject needs.
+- Card.Action reserves a trailing Header column across the title and description rows; when compact metadata belongs beside only the title, compose that title row with HStack and omit Card.Action so the description retains the full measure.
+
+## Rules
+
+- **MUST:** Do not turn the whole Card into an unnamed clickable div; place explicit Link or Button controls inside or use a valid link composition.
+- **MUST:** Load styles.css or core.css plus card.css and styles for nested components.
+- **SHOULD:** Use bordered={false} when edge-to-edge authored media should meet Card's clipped outer boundary without retaining the selected recipe's border; do not remove that geometry with application CSS.
+- **SHOULD:** Use Card.Action only when every Header text row should reserve its trailing column; otherwise compose title-only metadata in a Brick HStack.
+- **SHOULD:** For edge media, place authored Image directly under Card.Root, then use Card.Header for topic, title, and description so the root clips outer corners and the complete text region receives Card inset.
+
+## Common mistakes
+
+- **Avoid:** Using Card for every spacing group. **Instead:** Use Stack or Surface when there is no bounded card subject.
+- **Avoid:** Using Card.Action for a title-only Badge and unintentionally narrowing the description below it. **Instead:** Place the title and Badge in a Brick HStack, then render Card.Description as the next full-width Header child.
+- **Avoid:** Placing Card.Content directly after edge media and expecting top inset. **Instead:** Use Card.Header for the introductory text anatomy.
+
+## Validation checklist
+
+- Check heading order and explicit action names.
+- Check whether trailing Header content should constrain both title and description or the title row only.
+- Check content flow, focus visibility, narrow widths, and appearance contrast.
+
+## Related guidance
+
+- `surface`
+- `stack`
+- `grid`
+- `button`
+- `link`
+
+## Machine record
+
+```json
+{
+  "schema": "flowstack.agent-component.v1",
+  "id": "card",
+  "name": "Card",
+  "package": "@flowstack-ui/brick",
+  "layer": "brick",
+  "kind": "component",
+  "purpose": "Group content about one subject in a finished static compound surface with header, content, and footer anatomy.",
+  "useWhen": [
+    "A bounded subject needs a title, supporting content, and optional actions as one visual unit."
+  ],
+  "avoidWhen": [
+    {
+      "condition": "Only generic background, border, radius, or elevation is needed.",
+      "useInstead": "Surface"
+    }
+  ],
+  "composition": [
+    "Compose Card.Root with only the Header, Title, Description, Action, Content, and Footer parts the subject needs.",
+    "Card.Action reserves a trailing Header column across the title and description rows; when compact metadata belongs beside only the title, compose that title row with HStack and omit Card.Action so the description retains the full measure."
+  ],
+  "rules": [
+    {
+      "id": "card-not-clickable-div",
+      "level": "must",
+      "statement": "Do not turn the whole Card into an unnamed clickable div; place explicit Link or Button controls inside or use a valid link composition."
+    },
+    {
+      "id": "card-css",
+      "level": "must",
+      "statement": "Load styles.css or core.css plus card.css and styles for nested components."
+    },
+    {
+      "id": "card-borderless-media",
+      "level": "should",
+      "statement": "Use bordered={false} when edge-to-edge authored media should meet Card's clipped outer boundary without retaining the selected recipe's border; do not remove that geometry with application CSS."
+    },
+    {
+      "id": "card-action-measure",
+      "level": "should",
+      "statement": "Use Card.Action only when every Header text row should reserve its trailing column; otherwise compose title-only metadata in a Brick HStack."
+    },
+    {
+      "id": "card-edge-media-header",
+      "level": "should",
+      "statement": "For edge media, place authored Image directly under Card.Root, then use Card.Header for topic, title, and description so the root clips outer corners and the complete text region receives Card inset."
+    }
+  ],
+  "commonMistakes": [
+    {
+      "mistake": "Using Card for every spacing group.",
+      "correction": "Use Stack or Surface when there is no bounded card subject."
+    },
+    {
+      "mistake": "Using Card.Action for a title-only Badge and unintentionally narrowing the description below it.",
+      "correction": "Place the title and Badge in a Brick HStack, then render Card.Description as the next full-width Header child."
+    },
+    {
+      "mistake": "Placing Card.Content directly after edge media and expecting top inset.",
+      "correction": "Use Card.Header for the introductory text anatomy."
+    }
+  ],
+  "validation": [
+    "Check heading order and explicit action names.",
+    "Check whether trailing Header content should constrain both title and description or the title row only.",
+    "Check content flow, focus visibility, narrow widths, and appearance contrast."
+  ],
+  "related": [
+    "surface",
+    "stack",
+    "grid",
+    "button",
+    "link"
+  ]
+}
+```

package/public/packages/brick/0.1.11/components/carousel.txt

@@ -0,0 +1,206 @@
+# Carousel
+
+Source: @flowstack-ui/brick@0.1.11
+Kind: component
+ID: carousel
+
+# Carousel agent guide
+
+## Purpose
+
+Present one item or campaign at a time with optional navigation, picker dots, touch scrolling, and user-controlled rotation.
+
+## Use when
+
+- Several peer items benefit from sharing one bounded visual region.
+- A campaign hero needs multiple authored messages without placing them all in the initial viewport.
+
+## Choose something else when
+
+- Every item must be visible for comparison or comprehension. Use Grid, Stack, List, or Tabs.
+- The content is only decorative image rotation. Use a non-interactive media treatment that respects reduced motion.
+
+## Required composition
+
+- Compose Root, Viewport, Track, and one Slide per unique value; add Navigation, Controls, Previous, Next, Picker, PickerItem, and RotationControl only when the product needs them.
+- In a React Server Component, import the subpath as a module namespace with import * as Carousel from '@flowstack-ui/brick/carousel'; use the frozen Carousel runtime object only inside client components.
+- When automatic rotation is enabled, always render RotationControl, Previous, and Next so people can stop and navigate the sequence; place RotationControl before Viewport in DOM order.
+- Build campaign-specific slide content from Brick layout, typography, action, and media components; Carousel does not own hero messaging or proof content.
+- When artwork, scrim, and copy form one peer campaign, compose a complete Surface with Media, Scrim, and Content inside each Slide; keep genuinely invariant evidence or navigation outside the rotating sequence.
+- When a parent already owns a stable block size, use Root fill to propagate it through Carousel's Viewport, Track, and Slides; continue sizing authored Surface, Content, and layout components explicitly.
+- Match Root radius to the visible containing geometry; use radius=none when an edge-to-edge square Surface owns the campaign boundary.
+
+## Rules
+
+- **MUST:** Treat arrows and picker dots as optional authored controls; dots represent direct slide selection and are not Tabs.
+- **MUST:** Never enable automatic rotation without a visible RotationControl and direct Previous and Next controls.
+- **MUST:** Keep picker treatment independent from arrow visibility; use Picker variant bare for dots without a capsule and Navigation visibility interaction only when arrows remain discoverable through focus, pointer, and touch.
+- **SHOULD:** Use a compact xs ghost RotationControl when the required stop mechanism should remain visually quiet; never remove it while automatic rotation can run.
+- **MUST:** Preserve requested direction at loop boundaries and never clone authored slide content, IDs, controls, or form fields.
+- **MUST:** Keep viewport motion instant until Atom exposes data-initialized; Brick's shipped Carousel CSS already enables smooth motion only after that signal.
+- **SHOULD:** Give campaign slides stable responsive geometry so changing the active slide does not move surrounding page content.
+- **MUST:** Treat fill as internal size propagation, not a viewport-height policy; the application or Block must establish the available parent height.
+- **MUST:** Name the parent layout or section that establishes the definite block size before enabling fill; retain a real wrapper when that wrapper is the sizing box.
+- **MUST:** Treat radius as Viewport and overlay-focus geometry only; it must not alter selection, scrolling, control placement, or slide anatomy.
+- **MUST:** When controls overlay slides, reserve application-owned content safe areas so arrows, rotation controls, and picker targets never obscure authored text or actions.
+- **SHOULD:** Prioritize only initially visible campaign media and defer non-current media when the image delivery layer supports it.
+- **MUST:** Load styles.css or core.css plus carousel.css.
+
+## Common mistakes
+
+- **Avoid:** Using Tabs for picker dots or hiding the only way to stop autoplay. **Instead:** Use PickerItem buttons and render RotationControl whenever autoplay can run.
+- **Avoid:** Putting unrelated proof rails or page sections inside every hero slide. **Instead:** Rotate only the peer campaign content and keep stable page evidence outside the Carousel.
+- **Avoid:** Rotating campaign copy while leaving campaign-specific artwork behind as one unrelated background. **Instead:** Decide whether media is invariant or part of the campaign; when it communicates that campaign, place the complete Surface inside Slide.
+- **Avoid:** Repeating block-size rules across Carousel Viewport, Track, and Slide. **Instead:** Establish the parent height once and opt into Root fill; size only the authored content inside each Slide separately.
+
+## Validation checklist
+
+- Check optional-control compositions, first and last boundaries in both directions, interaction-only arrow discovery, independent picker treatment, native horizontal touch scrolling, focus pause, hover pause, reduced motion, RTL, and screen-reader naming.
+- Confirm inactive slides are unavailable to focus and assistive technology, the overlay-safe Viewport focus indicator remains visible above slide media, control focus rings remain complete at rounded edges, overlay controls do not cover content, complete campaign media changes with its copy, and slide changes do not cause page-level layout shift.
+
+## Related guidance
+
+- `button`
+- `icon-button`
+- `image`
+- `surface`
+- `stack`
+- `grid`
+- `text`
+- `tabs`
+
+## Machine record
+
+```json
+{
+  "schema": "flowstack.agent-component.v1",
+  "id": "carousel",
+  "name": "Carousel",
+  "package": "@flowstack-ui/brick",
+  "layer": "brick",
+  "kind": "component",
+  "purpose": "Present one item or campaign at a time with optional navigation, picker dots, touch scrolling, and user-controlled rotation.",
+  "useWhen": [
+    "Several peer items benefit from sharing one bounded visual region.",
+    "A campaign hero needs multiple authored messages without placing them all in the initial viewport."
+  ],
+  "avoidWhen": [
+    {
+      "condition": "Every item must be visible for comparison or comprehension.",
+      "useInstead": "Grid, Stack, List, or Tabs"
+    },
+    {
+      "condition": "The content is only decorative image rotation.",
+      "useInstead": "a non-interactive media treatment that respects reduced motion"
+    }
+  ],
+  "composition": [
+    "Compose Root, Viewport, Track, and one Slide per unique value; add Navigation, Controls, Previous, Next, Picker, PickerItem, and RotationControl only when the product needs them.",
+    "In a React Server Component, import the subpath as a module namespace with import * as Carousel from '@flowstack-ui/brick/carousel'; use the frozen Carousel runtime object only inside client components.",
+    "When automatic rotation is enabled, always render RotationControl, Previous, and Next so people can stop and navigate the sequence; place RotationControl before Viewport in DOM order.",
+    "Build campaign-specific slide content from Brick layout, typography, action, and media components; Carousel does not own hero messaging or proof content.",
+    "When artwork, scrim, and copy form one peer campaign, compose a complete Surface with Media, Scrim, and Content inside each Slide; keep genuinely invariant evidence or navigation outside the rotating sequence.",
+    "When a parent already owns a stable block size, use Root fill to propagate it through Carousel's Viewport, Track, and Slides; continue sizing authored Surface, Content, and layout components explicitly.",
+    "Match Root radius to the visible containing geometry; use radius=none when an edge-to-edge square Surface owns the campaign boundary."
+  ],
+  "rules": [
+    {
+      "id": "carousel-optional-controls",
+      "level": "must",
+      "statement": "Treat arrows and picker dots as optional authored controls; dots represent direct slide selection and are not Tabs."
+    },
+    {
+      "id": "carousel-autoplay-control",
+      "level": "must",
+      "statement": "Never enable automatic rotation without a visible RotationControl and direct Previous and Next controls."
+    },
+    {
+      "id": "carousel-control-independence",
+      "level": "must",
+      "statement": "Keep picker treatment independent from arrow visibility; use Picker variant bare for dots without a capsule and Navigation visibility interaction only when arrows remain discoverable through focus, pointer, and touch."
+    },
+    {
+      "id": "carousel-quiet-rotation-control",
+      "level": "should",
+      "statement": "Use a compact xs ghost RotationControl when the required stop mechanism should remain visually quiet; never remove it while automatic rotation can run."
+    },
+    {
+      "id": "carousel-loop-direction",
+      "level": "must",
+      "statement": "Preserve requested direction at loop boundaries and never clone authored slide content, IDs, controls, or form fields."
+    },
+    {
+      "id": "carousel-initial-motion-gate",
+      "level": "must",
+      "statement": "Keep viewport motion instant until Atom exposes data-initialized; Brick's shipped Carousel CSS already enables smooth motion only after that signal."
+    },
+    {
+      "id": "carousel-stable-geometry",
+      "level": "should",
+      "statement": "Give campaign slides stable responsive geometry so changing the active slide does not move surrounding page content."
+    },
+    {
+      "id": "carousel-fill-ownership",
+      "level": "must",
+      "statement": "Treat fill as internal size propagation, not a viewport-height policy; the application or Block must establish the available parent height."
+    },
+    {
+      "id": "carousel-fill-parent",
+      "level": "must",
+      "statement": "Name the parent layout or section that establishes the definite block size before enabling fill; retain a real wrapper when that wrapper is the sizing box."
+    },
+    {
+      "id": "carousel-radius-visual-only",
+      "level": "must",
+      "statement": "Treat radius as Viewport and overlay-focus geometry only; it must not alter selection, scrolling, control placement, or slide anatomy."
+    },
+    {
+      "id": "carousel-overlay-safe-area",
+      "level": "must",
+      "statement": "When controls overlay slides, reserve application-owned content safe areas so arrows, rotation controls, and picker targets never obscure authored text or actions."
+    },
+    {
+      "id": "carousel-media-loading",
+      "level": "should",
+      "statement": "Prioritize only initially visible campaign media and defer non-current media when the image delivery layer supports it."
+    },
+    {
+      "id": "carousel-css",
+      "level": "must",
+      "statement": "Load styles.css or core.css plus carousel.css."
+    }
+  ],
+  "commonMistakes": [
+    {
+      "mistake": "Using Tabs for picker dots or hiding the only way to stop autoplay.",
+      "correction": "Use PickerItem buttons and render RotationControl whenever autoplay can run."
+    },
+    {
+      "mistake": "Putting unrelated proof rails or page sections inside every hero slide.",
+      "correction": "Rotate only the peer campaign content and keep stable page evidence outside the Carousel."
+    },
+    {
+      "mistake": "Rotating campaign copy while leaving campaign-specific artwork behind as one unrelated background.",
+      "correction": "Decide whether media is invariant or part of the campaign; when it communicates that campaign, place the complete Surface inside Slide."
+    },
+    {
+      "mistake": "Repeating block-size rules across Carousel Viewport, Track, and Slide.",
+      "correction": "Establish the parent height once and opt into Root fill; size only the authored content inside each Slide separately."
+    }
+  ],
+  "validation": [
+    "Check optional-control compositions, first and last boundaries in both directions, interaction-only arrow discovery, independent picker treatment, native horizontal touch scrolling, focus pause, hover pause, reduced motion, RTL, and screen-reader naming.",
+    "Confirm inactive slides are unavailable to focus and assistive technology, the overlay-safe Viewport focus indicator remains visible above slide media, control focus rings remain complete at rounded edges, overlay controls do not cover content, complete campaign media changes with its copy, and slide changes do not cause page-level layout shift."
+  ],
+  "related": [
+    "button",
+    "icon-button",
+    "image",
+    "surface",
+    "stack",
+    "grid",
+    "text",
+    "tabs"
+  ]
+}
+```