@flowstack-ui/brick 0.1.4 → 0.1.6

package/dist/agents/frame.md

@@ -0,0 +1,47 @@
+# Frame agent guide
+
+## Purpose
+
+Own responsive logical size constraints for one local element without taking over layout, paint, spacing, or overflow.
+
+## Use when
+
+- A rail, copy region, media canvas, or scroll boundary needs an explicit inline or block size constraint.
+
+## Choose something else when
+
+- The need is shared page measure, child arrangement, paint, aspect ratio, or scrolling. Use Container, Stack/Grid, Surface, AspectRatio, or ScrollArea.
+
+## Required composition
+
+- Use Frame inside a layout Item, or let Stack.Item/Grid.Item compose asChild around Frame when one host must own both parent participation and internal constraints.
+- For bounded long content, put ScrollArea inside a maxBlockSize Frame; Frame constrains and ScrollArea scrolls.
+
+## Rules
+
+- **MUST:** Use Frame only for inlineSize, minInlineSize, maxInlineSize, blockSize, minBlockSize, or maxBlockSize.
+- **MUST:** Prefer logical size constraints and responsive values rather than physical width/height application classes.
+- **MUST:** Keep flex/grid participation on Stack.Item or Grid.Item; Frame owns the constrained element's internal geometry.
+- **MUST:** Use nested Frames when separate ancestors need separate constraints; each Frame keeps its base and responsive values locally scoped.
+- **MUST:** Do not treat maxBlockSize as scrolling; compose ScrollArea when overflow must remain reachable.
+- **MUST:** Load styles.css or core.css plus frame.css.
+
+## Common mistakes
+
+- **Avoid:** Turning Frame into a universal Box with paint, spacing, position, overflow, and typography props. **Instead:** Keep Frame to six logical constraints and compose the existing Brick owner for every other responsibility.
+
+## Validation checklist
+
+- Check responsive carry-forward, zoom/reflow, long content, RTL, vertical writing, and focus visibility.
+- Confirm every constrained node has one clear job and that ScrollArea owns any required overflow.
+
+## Related guidance
+
+- `stack`
+- `grid`
+- `container`
+- `section`
+- `surface`
+- `aspect-ratio`
+- `scroll-area`
+- `interface-composition`

package/dist/agents/grid.json

@@ -24,6 +24,16 @@
       "level": "must",
       "statement": "Keep DOM order meaningful; visual placement must not create a confusing keyboard or reading sequence."
     },
+    {
+      "id": "grid-responsive-relationships",
+      "level": "must",
+      "statement": "Use responsive columns, gaps, unanchored spans, and alignment when the same authored Grid changes at Brick breakpoints; keep explicit line starts and ends static."
+    },
+    {
+      "id": "grid-item-as-child",
+      "level": "must",
+      "statement": "Use Grid.Item asChild when an existing link, Surface, or component should itself receive placement; provide exactly one element and preserve its native semantics."
+    },
     {
       "id": "grid-css",
       "level": "must",
@@ -34,6 +44,14 @@
     {
       "mistake": "Keeping too many columns until cards become unreadably narrow.",
       "correction": "Reduce columns at the content's real minimum width, not at a device-name breakpoint."
+    },
+    {
+      "mistake": "Combining a responsive Item span with explicit line placement.",
+      "correction": "Let the responsive item auto-place, or keep one deliberate static line placement."
+    },
+    {
+      "mistake": "Adding a Grid.Item wrapper and height CSS around an element that should itself stretch as the grid item.",
+      "correction": "Compose that one element with Grid.Item asChild."
     }
   ],
   "validation": [

package/dist/agents/grid.md

@@ -19,11 +19,15 @@ Arrange content on tokenized two-dimensional tracks with public column, row, gap
 ## Rules
 
 - **MUST:** Keep DOM order meaningful; visual placement must not create a confusing keyboard or reading sequence.
+- **MUST:** Use responsive columns, gaps, unanchored spans, and alignment when the same authored Grid changes at Brick breakpoints; keep explicit line starts and ends static.
+- **MUST:** Use Grid.Item asChild when an existing link, Surface, or component should itself receive placement; provide exactly one element and preserve its native semantics.
 - **MUST:** Load styles.css or core.css plus grid.css.
 
 ## Common mistakes
 
 - **Avoid:** Keeping too many columns until cards become unreadably narrow. **Instead:** Reduce columns at the content's real minimum width, not at a device-name breakpoint.
+- **Avoid:** Combining a responsive Item span with explicit line placement. **Instead:** Let the responsive item auto-place, or keep one deliberate static line placement.
+- **Avoid:** Adding a Grid.Item wrapper and height CSS around an element that should itself stretch as the grid item. **Instead:** Compose that one element with Grid.Item asChild.
 
 ## Validation checklist
 

package/dist/agents/icon.json

@@ -0,0 +1,98 @@
+{
+  "schema": "flowstack.agent-component.v1",
+  "id": "icon",
+  "name": "Icon",
+  "package": "@flowstack-ui/brick",
+  "layer": "brick",
+  "kind": "component",
+  "purpose": "Normalize one consumer-authored SVG with Brick sizing, semantic foreground, alignment, direction, and decorative-or-informative accessibility semantics.",
+  "useWhen": [
+    "An authored SVG needs Brick size, currentColor-based tone, alignment, or opt-in directional RTL mirroring."
+  ],
+  "avoidWhen": [
+    {
+      "condition": "The graphic performs an action or needs its own touch target.",
+      "useInstead": "Button, IconButton, Toggle, or the owning interactive component"
+    },
+    {
+      "condition": "The content is a photo, raster asset, responsive media object, fallback, or loading state.",
+      "useInstead": "Image"
+    },
+    {
+      "condition": "The graphic is a logo, illustration, chart, or multiregion visual with independent semantics.",
+      "useInstead": "an application-owned SVG or media composition with explicit semantics"
+    }
+  ],
+  "composition": [
+    "Pass exactly one consumer-authored SVG element; prefer the default span wrapper and use asChild only when the direct root must remain that SVG.",
+    "When visible nearby text already provides the meaning, keep Icon decorative; when a standalone icon conveys information, provide label or aria-labelledby.",
+    "Inside an icon-only control, label the control and leave its nested Icon decorative."
+  ],
+  "rules": [
+    {
+      "id": "icon-not-control",
+      "level": "must",
+      "statement": "Use Icon only for visual content; never use it as an interactive host or touch target."
+    },
+    {
+      "id": "icon-accessibility-mode",
+      "level": "must",
+      "statement": "Keep the decorative default when meaning is redundant, or provide exactly one nonempty label or aria-labelledby reference when the standalone graphic is informative."
+    },
+    {
+      "id": "icon-control-name",
+      "level": "must",
+      "statement": "Give an icon-only Button, IconButton, Toggle, or other control its accessible name on the control, not on its nested Icon."
+    },
+    {
+      "id": "icon-current-color",
+      "level": "should",
+      "statement": "Use currentColor for single-color SVG fills or strokes so Brick tone and inherited control state can apply."
+    },
+    {
+      "id": "icon-directional",
+      "level": "must",
+      "statement": "Enable directional only for glyphs whose meaning reverses in RTL, such as arrows and forward/back controls."
+    },
+    {
+      "id": "icon-as-child",
+      "level": "must",
+      "statement": "Use asChild only with one direct non-interactive SVG; never compose Icon onto a button, anchor, input, or other interactive host."
+    },
+    {
+      "id": "icon-layout",
+      "level": "must",
+      "statement": "Use Brick Stack, layout components, or an owning component icon slot for sibling alignment instead of wrapper spans or application offsets."
+    },
+    {
+      "id": "icon-css",
+      "level": "must",
+      "statement": "Load styles.css or core.css plus icon.css."
+    }
+  ],
+  "commonMistakes": [
+    {
+      "mistake": "Using a raw SVG with ad hoc width, color, alignment, or ARIA inside ordinary Brick composition.",
+      "correction": "Wrap the authored SVG in Icon, choose the semantic size/tone recipe, and let the owning Stack or control align it."
+    },
+    {
+      "mistake": "Giving both the control and its nested Icon the same accessible label.",
+      "correction": "Label the control and keep the nested Icon decorative to prevent duplicate announcements."
+    },
+    {
+      "mistake": "Using directional on logos, status symbols, checks, clocks, or other glyphs that do not reverse meaning in RTL.",
+      "correction": "Leave directional false unless the glyph itself communicates direction."
+    }
+  ],
+  "validation": [
+    "Check decorative and informative accessibility trees, icon-only control naming, all sizes and tones, currentColor adoption, flex shrinking, and RTL directional mirroring.",
+    "Confirm asChild targets only one SVG and that CSS is present."
+  ],
+  "related": [
+    "icon-button",
+    "image",
+    "button",
+    "stack",
+    "text"
+  ]
+}

package/dist/agents/icon.md

@@ -0,0 +1,51 @@
+# Icon agent guide
+
+## Purpose
+
+Normalize one consumer-authored SVG with Brick sizing, semantic foreground, alignment, direction, and decorative-or-informative accessibility semantics.
+
+## Use when
+
+- An authored SVG needs Brick size, currentColor-based tone, alignment, or opt-in directional RTL mirroring.
+
+## Choose something else when
+
+- The graphic performs an action or needs its own touch target. Use Button, IconButton, Toggle, or the owning interactive component.
+- The content is a photo, raster asset, responsive media object, fallback, or loading state. Use Image.
+- The graphic is a logo, illustration, chart, or multiregion visual with independent semantics. Use an application-owned SVG or media composition with explicit semantics.
+
+## Required composition
+
+- Pass exactly one consumer-authored SVG element; prefer the default span wrapper and use asChild only when the direct root must remain that SVG.
+- When visible nearby text already provides the meaning, keep Icon decorative; when a standalone icon conveys information, provide label or aria-labelledby.
+- Inside an icon-only control, label the control and leave its nested Icon decorative.
+
+## Rules
+
+- **MUST:** Use Icon only for visual content; never use it as an interactive host or touch target.
+- **MUST:** Keep the decorative default when meaning is redundant, or provide exactly one nonempty label or aria-labelledby reference when the standalone graphic is informative.
+- **MUST:** Give an icon-only Button, IconButton, Toggle, or other control its accessible name on the control, not on its nested Icon.
+- **SHOULD:** Use currentColor for single-color SVG fills or strokes so Brick tone and inherited control state can apply.
+- **MUST:** Enable directional only for glyphs whose meaning reverses in RTL, such as arrows and forward/back controls.
+- **MUST:** Use asChild only with one direct non-interactive SVG; never compose Icon onto a button, anchor, input, or other interactive host.
+- **MUST:** Use Brick Stack, layout components, or an owning component icon slot for sibling alignment instead of wrapper spans or application offsets.
+- **MUST:** Load styles.css or core.css plus icon.css.
+
+## Common mistakes
+
+- **Avoid:** Using a raw SVG with ad hoc width, color, alignment, or ARIA inside ordinary Brick composition. **Instead:** Wrap the authored SVG in Icon, choose the semantic size/tone recipe, and let the owning Stack or control align it.
+- **Avoid:** Giving both the control and its nested Icon the same accessible label. **Instead:** Label the control and keep the nested Icon decorative to prevent duplicate announcements.
+- **Avoid:** Using directional on logos, status symbols, checks, clocks, or other glyphs that do not reverse meaning in RTL. **Instead:** Leave directional false unless the glyph itself communicates direction.
+
+## Validation checklist
+
+- Check decorative and informative accessibility trees, icon-only control naming, all sizes and tones, currentColor adoption, flex shrinking, and RTL directional mirroring.
+- Confirm asChild targets only one SVG and that CSS is present.
+
+## Related guidance
+
+- `icon-button`
+- `image`
+- `button`
+- `stack`
+- `text`

package/dist/agents/image.json

@@ -16,7 +16,8 @@
     }
   ],
   "composition": [
-    "Compose Image.Content and optional Image.Fallback inside Image.Root; use Brick Stack or layout components around it rather than wrapper spans for alignment."
+    "Compose Image.Content and optional Image.Fallback inside Image.Root; use Brick Stack or layout components around it rather than wrapper spans for alignment.",
+    "In a React Server Component, import ImageRoot, ImageContent, and ImageFallback directly; the compound Image namespace is intended for client module composition."
   ],
   "rules": [
     {
@@ -34,10 +35,25 @@
       "level": "should",
       "statement": "Reserve dimensions or aspect ratio to prevent layout shift."
     },
+    {
+      "id": "image-parent-fill",
+      "level": "must",
+      "statement": "Use explicit fill when Image must consume a parent-established block size, such as Surface.Media; retain fit and position for the intended crop."
+    },
+    {
+      "id": "image-parent-owner",
+      "level": "must",
+      "statement": "Name and preserve the parent sizing box when fill is used; Image propagates into available geometry but does not create that geometry."
+    },
     {
       "id": "image-css",
       "level": "must",
       "statement": "Load styles.css or core.css plus image.css."
+    },
+    {
+      "id": "image-rsc-parts",
+      "level": "must",
+      "statement": "Use direct named Image parts across a React Server Component boundary instead of wrapping the complete consumer in use client."
     }
   ],
   "commonMistakes": [
@@ -47,7 +63,7 @@
     }
   ],
   "validation": [
-    "Check loaded, loading, error, cached, responsive size, crop, layout shift, alt text, contrast of fallback content, and RTL where relevant.",
+    "Check loaded, loading, error, cached, responsive size, parent-fill geometry, crop, layout shift, alt text, contrast of fallback content, and RTL where relevant.",
     "Confirm CSS and any adapter report are complete."
   ],
   "related": [

package/dist/agents/image.md

@@ -15,13 +15,17 @@ Provide styled resilient media with Atom loading/fallback behavior, sizing recip
 ## Required composition
 
 - Compose Image.Content and optional Image.Fallback inside Image.Root; use Brick Stack or layout components around it rather than wrapper spans for alignment.
+- In a React Server Component, import ImageRoot, ImageContent, and ImageFallback directly; the compound Image namespace is intended for client module composition.
 
 ## Rules
 
 - **MUST:** Use Brick Image for ordinary interface media; document any native or framework image fallback and the missing capability.
 - **MUST:** Provide meaningful alt text, or alt="" for a decorative image.
 - **SHOULD:** Reserve dimensions or aspect ratio to prevent layout shift.
+- **MUST:** Use explicit fill when Image must consume a parent-established block size, such as Surface.Media; retain fit and position for the intended crop.
+- **MUST:** Name and preserve the parent sizing box when fill is used; Image propagates into available geometry but does not create that geometry.
 - **MUST:** Load styles.css or core.css plus image.css.
+- **MUST:** Use direct named Image parts across a React Server Component boundary instead of wrapping the complete consumer in use client.
 
 ## Common mistakes
 
@@ -29,7 +33,7 @@ Provide styled resilient media with Atom loading/fallback behavior, sizing recip
 
 ## Validation checklist
 
-- Check loaded, loading, error, cached, responsive size, crop, layout shift, alt text, contrast of fallback content, and RTL where relevant.
+- Check loaded, loading, error, cached, responsive size, parent-fill geometry, crop, layout shift, alt text, contrast of fallback content, and RTL where relevant.
 - Confirm CSS and any adapter report are complete.
 
 ## Related guidance

package/dist/agents/interface-composition.json

@@ -9,7 +9,8 @@
   "decisionOrder": [
     "Map the page into landmarks, bounded regions, layout relationships, content, navigation, actions, media, and responsive changes.",
     "Choose the Brick owner for each relationship and read every selected component guide before implementation.",
-    "Compose from the outside inward: AppBar or page landmark, Container, Grid or Stack, Surface or Card, then content and controls.",
+    "Compose from the outside inward: AppBar or page landmark, Section, Container, Grid or Stack, Surface or Card, then content and controls.",
+    "Decide how each child participates in its parent: content-sized, fixed, automatic, proportional, placed, stretched, or deliberately constrained.",
     "Follow the customization order completely: component owner, supported props, semantic theme tokens, component tokens, public parts, and only then a narrow stable-hook escape hatch.",
     "Audit responsive behavior, accessibility, CSS delivery, and native fallbacks before treating the composition as complete."
   ],
@@ -19,10 +20,35 @@
       "use": "Container",
       "note": "Do not reproduce max-width and inline padding on every section."
     },
+    {
+      "intent": "major page-region rhythm",
+      "use": "Section",
+      "note": "Keep paint in Surface, width and gutters in Container, and local child relationships in Stack or Grid."
+    },
     {
       "intent": "row or column relationship",
-      "use": "HStack or VStack",
-      "note": "Use Stack when direction is selected dynamically."
+      "use": "HStack, VStack, or responsive Stack",
+      "note": "Use fixed-axis conveniences when the axis stays fixed and Stack when the same content changes axis at a Brick breakpoint."
+    },
+    {
+      "intent": "child flex allocation",
+      "use": "Stack.Item",
+      "note": "Choose content-sized, fixed, automatic, or proportional growth before writing flex CSS."
+    },
+    {
+      "intent": "child grid participation",
+      "use": "Grid.Item",
+      "note": "Use spans, placement, or self-alignment; keep a real wrapper when it establishes the participation box and use asChild only when the child should be that box."
+    },
+    {
+      "intent": "local logical size constraint",
+      "use": "Frame",
+      "note": "Use only for inline/block size or min/max constraints; keep parent participation on the owning layout Item and overflow in ScrollArea."
+    },
+    {
+      "intent": "overlapping depth relationship",
+      "use": "ZStack",
+      "note": "Prefer Surface media anatomy for ordinary media, scrim, and foreground compositions."
     },
     {
       "intent": "track-based responsive layout",
@@ -34,11 +60,21 @@
       "use": "Surface or Card",
       "note": "Use Card for titled or actionable contained content and Surface for a general visual boundary."
     },
+    {
+      "intent": "local light or dark semantic-token boundary",
+      "use": "Appearance",
+      "note": "Pass exactly one existing host; it may contain any number of descendants, and Appearance adds no paint, layout, or wrapper."
+    },
     {
       "intent": "brand or content image",
       "use": "Image",
       "note": "Keep alt text and fallback behavior intentional."
     },
+    {
+      "intent": "one of several peer campaigns or authored content regions",
+      "use": "Carousel",
+      "note": "Keep invariant evidence outside; let each Slide own a complete Surface when its media and message belong together."
+    },
     {
       "intent": "site navigation",
       "use": "NavigationMenu or NavList",
@@ -47,12 +83,22 @@
     {
       "intent": "responsive desktop and mobile alternatives",
       "use": "Show and Hide",
-      "note": "Keep one CSS-controlled breakpoint contract and avoid hydration-dependent visibility."
+      "note": "Use only when interface or content changes; use responsive Stack when only arrangement changes."
     },
     {
       "intent": "grouped application actions",
       "use": "Toolbar",
       "note": "Do not use AppBar.Toolbar as an ARIA toolbar."
+    },
+    {
+      "intent": "several related disclosure sections",
+      "use": "Accordion",
+      "note": "Preserve Header, Trigger, Content, and ContentInner ownership; use Collapsible for one disclosure."
+    },
+    {
+      "intent": "semantic item or sequence content",
+      "use": "List",
+      "note": "Use structured row parts only when needed and keep Trailing compact on narrow screens."
     }
   ],
   "rules": [
@@ -61,6 +107,46 @@
       "level": "must",
       "statement": "Assign page structure to Brick components before writing element-level CSS."
     },
+    {
+      "id": "interface-section-rhythm",
+      "level": "must",
+      "statement": "Use Section's named responsive rhythm for major page regions; use as=div when spacing is needed without thematic section semantics."
+    },
+    {
+      "id": "interface-painted-section",
+      "level": "must",
+      "statement": "When Surface paint must cover Section rhythm, compose Surface asChild around Section so one host keeps the responsibilities separate."
+    },
+    {
+      "id": "interface-blueprint-first",
+      "level": "must",
+      "statement": "Build from a blueprint, select the owning Brick components, render their defaults, choose supported props, then apply Theme, Block, or application customization in that order."
+    },
+    {
+      "id": "interface-responsive-single-content",
+      "level": "must",
+      "statement": "Keep one copy of content when only its layout changes; use responsive Stack values instead of duplicated Show/Hide trees."
+    },
+    {
+      "id": "interface-responsive-layout-grammar",
+      "level": "must",
+      "statement": "Use responsive Grid tracks, gaps, spans, and alignment or responsive ZStack logical placement when only those relationships change; do not duplicate content or change semantic order."
+    },
+    {
+      "id": "interface-parent-participation",
+      "level": "must",
+      "statement": "Separate component internal geometry from parent participation; configure the finished component for its anatomy and the owning layout or Item part for its relationship to siblings."
+    },
+    {
+      "id": "interface-frame-constraints",
+      "level": "must",
+      "statement": "Use Frame for a qualified local logical size constraint instead of repeating width/height CSS or adding size props to a finished component; do not use Frame when Container measure, layout participation, AspectRatio, or ScrollArea owns the actual job."
+    },
+    {
+      "id": "interface-definite-size-owner",
+      "level": "must",
+      "statement": "Keep a real layout-item wrapper when it establishes flex or grid participation or the definite parent size required by ScrollArea, Carousel fill, or Image fill; asChild is not a wrapper-removal goal by itself."
+    },
     {
       "id": "interface-correct-owner",
       "level": "must",
@@ -71,11 +157,41 @@
       "level": "must",
       "statement": "Preserve document landmarks and semantic elements when Brick does not provide an owner; Brick-first is not permission to erase HTML meaning."
     },
+    {
+      "id": "interface-responsive-navigation-data",
+      "level": "must",
+      "statement": "When desktop and mobile require distinct navigation components, share application-owned destination labels, hrefs, values, and ordering while preserving each pattern's correct Brick anatomy; do not duplicate navigation content or force one interaction tree across breakpoints."
+    },
+    {
+      "id": "interface-responsive-overlay-state",
+      "level": "must",
+      "statement": "Use Show and Hide for first-paint visibility; when a controlled interactive overlay may remain open across a breakpoint, synchronize its application state at that boundary so a hidden modal cannot retain focus, scroll lock, or isolation."
+    },
     {
       "id": "interface-theme-first",
       "level": "should",
       "statement": "Express reusable brand values through semantic Brick tokens and a theme rather than repeating literal application values."
     },
+    {
+      "id": "interface-local-appearance-scope",
+      "level": "must",
+      "statement": "For a locally dark or light region, pass the existing region owner as the one direct child of Appearance and provide complete appearance-dependent color and shadow values for explicit light and dark re-entry; keep typography, density, geometry, and motion on the shared Theme root, and do not recolor descendants independently or add a Surface only to carry appearance."
+    },
+    {
+      "id": "interface-portal-appearance",
+      "level": "must",
+      "statement": "When a portal leaves a local appearance scope, either target a portal container inside that scope or apply Appearance to every portalled visual root; never assume the trigger's CSS ancestry crosses the portal."
+    },
+    {
+      "id": "interface-depth-layout",
+      "level": "should",
+      "statement": "Use ZStack for reusable nine-position overlap; retain narrow application positioning only for artwork coordinates that ZStack intentionally does not own."
+    },
+    {
+      "id": "interface-ownership-classification",
+      "level": "must",
+      "statement": "Classify findings before changing a package: behavior and accessibility belong to Atom, finished reusable component paint belongs to Brick, brand values belong to Theme, repeated responsive section composition may belong to Block or Blueprint, and one-page art direction remains application-owned."
+    },
     {
       "id": "interface-document-foundation",
       "level": "must",
@@ -100,6 +216,16 @@
       "id": "interface-extract-evidence",
       "level": "should",
       "statement": "Classify repeated purposeful sections as Block candidates and repeated page arrangements as Blueprint candidates only after real reuse evidence."
+    },
+    {
+      "id": "interface-source-organization",
+      "level": "should",
+      "statement": "Split long product compositions by stable responsibility—authored content, repeated item, invariant supporting region, and outer assembly—without pretending those local modules are reusable Brick components."
+    },
+    {
+      "id": "interface-comment-intent",
+      "level": "must",
+      "statement": "Comment non-obvious ownership, accessibility order, breakpoint, sizing, and browser-lifecycle constraints; do not add comments that only translate a component name or prop into prose."
     }
   ],
   "customization": {
@@ -147,6 +273,17 @@
       ]
     }
   },
+  "planningRecord": {
+    "purpose": "Record the layout decision before generated implementation so Engine and TemplateFlow preserve ownership.",
+    "fields": [
+      "relationship",
+      "owner",
+      "parentParticipation",
+      "responsiveChange",
+      "constraintSource",
+      "fallbackReport"
+    ]
+  },
   "nativeFallback": {
     "check": "Review the interface map against the manifest and selected component guides, including layout, text, image, visibility, and navigation owners.",
     "use": "Keep native landmarks and product-specific semantic structures where no Brick component adds a useful contract; add only narrow composition classes.",
@@ -155,20 +292,30 @@
   "validation": [
     "Inspect the rendered DOM, accessible names, heading order, landmarks, focus order, keyboard operation, touch targets, contrast, zoom, and RTL behavior.",
     "Test every adopted breakpoint without JavaScript-dependent first-paint flicker.",
-    "Confirm layout primitives own ordinary gap, alignment, wrapping, width, and visibility before accepting custom CSS.",
+    "Confirm layout primitives own ordinary gap, alignment, wrapping, width, and visibility before accepting custom CSS; verify separately meaningful inline nodes use layout gap rather than literal spaces or offsets.",
+    "Confirm every ScrollArea, Carousel fill, and Image fill composition can name the ancestor that establishes its definite size; use Frame when that ancestor needs an explicit logical size constraint, and never expect the child to invent it.",
+    "Confirm light to dark to light and dark to light to dark scopes restore the theme's complete semantic foreground, background, boundary, action, focus, status, scrim, shadow, and interaction-state pairs without child-by-child recoloring.",
+    "Confirm every portalled visual root either remains inside the intended theme/appearance container or receives an explicit Appearance scope.",
     "Confirm repeated CSS values are theme tokens, component-specific values use documented component tokens, and every remaining direct stable-hook declaration has a complete customization gap report.",
+    "Confirm source order follows rendered ownership, static content is separate from interaction assembly when it obscures the component tree, and comments explain why a constraint exists rather than what an obvious line does.",
     "Run the package's CSS-delivery check and the application's accessibility, browser, and performance checks."
   ],
   "related": [
     "layer-selection",
+    "appearance",
     "app-bar",
+    "section",
     "container",
     "stack",
+    "z-stack",
     "grid",
+    "frame",
     "surface",
     "card",
     "navigation-menu",
     "show",
-    "hide"
+    "hide",
+    "accordion",
+    "list"
   ]
 }