@flowstack-ui/brick 0.1.11 → 0.1.12

package/README.md

@@ -160,7 +160,7 @@ The complete component guides live with the source repository:
 | Accessibility | [Skip Link](https://github.com/flowstack-ui/brick/blob/main/docs/components/skip-link/README.md), [Visually Hidden](https://github.com/flowstack-ui/brick/blob/main/docs/components/visually-hidden/README.md) |
 | Data display | [Aspect Ratio](https://github.com/flowstack-ui/brick/blob/main/docs/components/aspect-ratio/README.md), [Data List](https://github.com/flowstack-ui/brick/blob/main/docs/components/data-list/README.md), [Data Grid](https://github.com/flowstack-ui/brick/blob/main/docs/components/data-grid/README.md), [Tree Grid](https://github.com/flowstack-ui/brick/blob/main/docs/components/tree-grid/README.md), [Tree](https://github.com/flowstack-ui/brick/blob/main/docs/components/tree/README.md), [Feed](https://github.com/flowstack-ui/brick/blob/main/docs/components/feed/README.md), [Swipeable Item](https://github.com/flowstack-ui/brick/blob/main/docs/components/swipeable-item/README.md), [Carousel](https://github.com/flowstack-ui/brick/blob/main/docs/components/carousel/README.md) |
 | Forms and choices | [Color Picker](https://github.com/flowstack-ui/brick/blob/main/docs/components/color-picker/README.md), [Form](https://github.com/flowstack-ui/brick/blob/main/docs/components/form/README.md), [Field](https://github.com/flowstack-ui/brick/blob/main/docs/components/field/README.md), [Fieldset](https://github.com/flowstack-ui/brick/blob/main/docs/components/fieldset/README.md), [Input](https://github.com/flowstack-ui/brick/blob/main/docs/components/input/README.md), [Number Input](https://github.com/flowstack-ui/brick/blob/main/docs/components/number-input/README.md), [OTP Field](https://github.com/flowstack-ui/brick/blob/main/docs/components/otp-field/README.md), [Password Toggle Field](https://github.com/flowstack-ui/brick/blob/main/docs/components/password-toggle-field/README.md), [Textarea](https://github.com/flowstack-ui/brick/blob/main/docs/components/textarea/README.md), [Select](https://github.com/flowstack-ui/brick/blob/main/docs/components/select/README.md), [Combobox](https://github.com/flowstack-ui/brick/blob/main/docs/components/combobox/README.md), [Multi Select](https://github.com/flowstack-ui/brick/blob/main/docs/components/multi-select/README.md), [File Upload](https://github.com/flowstack-ui/brick/blob/main/docs/components/file-upload/README.md), [Checkbox](https://github.com/flowstack-ui/brick/blob/main/docs/components/checkbox/README.md), [Checkbox Group](https://github.com/flowstack-ui/brick/blob/main/docs/components/checkbox-group/README.md), [Radio Group](https://github.com/flowstack-ui/brick/blob/main/docs/components/radio-group/README.md), [Switch](https://github.com/flowstack-ui/brick/blob/main/docs/components/switch/README.md), [Slider](https://github.com/flowstack-ui/brick/blob/main/docs/components/slider/README.md), [Rating](https://github.com/flowstack-ui/brick/blob/main/docs/components/rating/README.md) |
-| Content and status | [Text](https://github.com/flowstack-ui/brick/blob/main/docs/components/text/README.md), [Icon](https://github.com/flowstack-ui/brick/blob/main/docs/components/icon/README.md), [Image](https://github.com/flowstack-ui/brick/blob/main/docs/components/image/README.md), [Code](https://github.com/flowstack-ui/brick/blob/main/docs/components/code/README.md), [Code Block](https://github.com/flowstack-ui/brick/blob/main/docs/components/code-block/README.md), [Avatar](https://github.com/flowstack-ui/brick/blob/main/docs/components/avatar/README.md), [Badge](https://github.com/flowstack-ui/brick/blob/main/docs/components/badge/README.md), [Chip](https://github.com/flowstack-ui/brick/blob/main/docs/components/chip/README.md), [Notification Badge](https://github.com/flowstack-ui/brick/blob/main/docs/components/notification-badge/README.md), [Status](https://github.com/flowstack-ui/brick/blob/main/docs/components/status/README.md), [Color Swatch](https://github.com/flowstack-ui/brick/blob/main/docs/components/color-swatch/README.md), [Card](https://github.com/flowstack-ui/brick/blob/main/docs/components/card/README.md), [List](https://github.com/flowstack-ui/brick/blob/main/docs/components/list/README.md), [Table](https://github.com/flowstack-ui/brick/blob/main/docs/components/table/README.md), [Divider](https://github.com/flowstack-ui/brick/blob/main/docs/components/divider/README.md), [Collapsible](https://github.com/flowstack-ui/brick/blob/main/docs/components/collapsible/README.md), [Accordion](https://github.com/flowstack-ui/brick/blob/main/docs/components/accordion/README.md), [Skeleton](https://github.com/flowstack-ui/brick/blob/main/docs/components/skeleton/README.md), [Progress](https://github.com/flowstack-ui/brick/blob/main/docs/components/progress/README.md), [Progress Circle](https://github.com/flowstack-ui/brick/blob/main/docs/components/progress-circle/README.md), [Toast](https://github.com/flowstack-ui/brick/blob/main/docs/components/toast/README.md) |
+| Content and status | [Text](https://github.com/flowstack-ui/brick/blob/main/docs/components/text/README.md), [Em](https://github.com/flowstack-ui/brick/blob/main/docs/components/em/README.md), [Mark](https://github.com/flowstack-ui/brick/blob/main/docs/components/mark/README.md), [Highlight](https://github.com/flowstack-ui/brick/blob/main/docs/components/highlight/README.md), [Prose](https://github.com/flowstack-ui/brick/blob/main/docs/components/prose/README.md), [Kbd](https://github.com/flowstack-ui/brick/blob/main/docs/components/kbd/README.md), [Blockquote](https://github.com/flowstack-ui/brick/blob/main/docs/components/blockquote/README.md), [Icon](https://github.com/flowstack-ui/brick/blob/main/docs/components/icon/README.md), [Image](https://github.com/flowstack-ui/brick/blob/main/docs/components/image/README.md), [Code](https://github.com/flowstack-ui/brick/blob/main/docs/components/code/README.md), [Code Block](https://github.com/flowstack-ui/brick/blob/main/docs/components/code-block/README.md), [Avatar](https://github.com/flowstack-ui/brick/blob/main/docs/components/avatar/README.md), [Badge](https://github.com/flowstack-ui/brick/blob/main/docs/components/badge/README.md), [Chip](https://github.com/flowstack-ui/brick/blob/main/docs/components/chip/README.md), [Notification Badge](https://github.com/flowstack-ui/brick/blob/main/docs/components/notification-badge/README.md), [Status](https://github.com/flowstack-ui/brick/blob/main/docs/components/status/README.md), [Color Swatch](https://github.com/flowstack-ui/brick/blob/main/docs/components/color-swatch/README.md), [Card](https://github.com/flowstack-ui/brick/blob/main/docs/components/card/README.md), [List](https://github.com/flowstack-ui/brick/blob/main/docs/components/list/README.md), [Table](https://github.com/flowstack-ui/brick/blob/main/docs/components/table/README.md), [Divider](https://github.com/flowstack-ui/brick/blob/main/docs/components/divider/README.md), [Collapsible](https://github.com/flowstack-ui/brick/blob/main/docs/components/collapsible/README.md), [Accordion](https://github.com/flowstack-ui/brick/blob/main/docs/components/accordion/README.md), [Skeleton](https://github.com/flowstack-ui/brick/blob/main/docs/components/skeleton/README.md), [Progress](https://github.com/flowstack-ui/brick/blob/main/docs/components/progress/README.md), [Progress Circle](https://github.com/flowstack-ui/brick/blob/main/docs/components/progress-circle/README.md), [Toast](https://github.com/flowstack-ui/brick/blob/main/docs/components/toast/README.md) |
 | Contextual overlays | [Tooltip](https://github.com/flowstack-ui/brick/blob/main/docs/components/tooltip/README.md), [Hover Card](https://github.com/flowstack-ui/brick/blob/main/docs/components/hover-card/README.md), [Popover](https://github.com/flowstack-ui/brick/blob/main/docs/components/popover/README.md), [Dropdown Menu](https://github.com/flowstack-ui/brick/blob/main/docs/components/dropdown-menu/README.md), [Context Menu](https://github.com/flowstack-ui/brick/blob/main/docs/components/context-menu/README.md), [Menubar](https://github.com/flowstack-ui/brick/blob/main/docs/components/menubar/README.md) |
 | Modal surfaces | [Dialog](https://github.com/flowstack-ui/brick/blob/main/docs/components/dialog/README.md), [Alert Dialog](https://github.com/flowstack-ui/brick/blob/main/docs/components/alert-dialog/README.md), [Drawer](https://github.com/flowstack-ui/brick/blob/main/docs/components/drawer/README.md) |
 | Navigation and layout | [Appearance](https://github.com/flowstack-ui/brick/blob/main/docs/components/appearance/README.md), [Breadcrumb](https://github.com/flowstack-ui/brick/blob/main/docs/components/breadcrumb/README.md), [Tabs](https://github.com/flowstack-ui/brick/blob/main/docs/components/tabs/README.md), [Navigation Menu](https://github.com/flowstack-ui/brick/blob/main/docs/components/navigation-menu/README.md), [Bottom Navigation](https://github.com/flowstack-ui/brick/blob/main/docs/components/bottom-navigation/README.md), [Link](https://github.com/flowstack-ui/brick/blob/main/docs/components/link/README.md), [Link Box](https://github.com/flowstack-ui/brick/blob/main/docs/components/link-box/README.md), [Nav List](https://github.com/flowstack-ui/brick/blob/main/docs/components/nav-list/README.md), [Sidebar](https://github.com/flowstack-ui/brick/blob/main/docs/components/sidebar/README.md), [App Bar](https://github.com/flowstack-ui/brick/blob/main/docs/components/app-bar/README.md), [Stack](https://github.com/flowstack-ui/brick/blob/main/docs/components/stack/README.md), [Group](https://github.com/flowstack-ui/brick/blob/main/docs/components/group/README.md), [Grid](https://github.com/flowstack-ui/brick/blob/main/docs/components/grid/README.md), [Container](https://github.com/flowstack-ui/brick/blob/main/docs/components/container/README.md), [Section](https://github.com/flowstack-ui/brick/blob/main/docs/components/section/README.md), [Frame](https://github.com/flowstack-ui/brick/blob/main/docs/components/frame/README.md), [Bleed](https://github.com/flowstack-ui/brick/blob/main/docs/components/bleed/README.md), [Show](https://github.com/flowstack-ui/brick/blob/main/docs/components/show/README.md), [Hide](https://github.com/flowstack-ui/brick/blob/main/docs/components/hide/README.md), [Surface](https://github.com/flowstack-ui/brick/blob/main/docs/components/surface/README.md), [Scroll Area](https://github.com/flowstack-ui/brick/blob/main/docs/components/scroll-area/README.md) |

package/dist/agents/blockquote.json

@@ -0,0 +1,68 @@
+{
+  "schema": "flowstack.agent-component.v1",
+  "id": "blockquote",
+  "name": "Blockquote",
+  "package": "@flowstack-ui/brick",
+  "layer": "brick",
+  "kind": "component",
+  "purpose": "Compose an extended quotation, source URL, and optional attribution with correct native structure and finished Brick styling.",
+  "useWhen": [
+    "An extended quotation and optional attribution form one self-contained content unit."
+  ],
+  "avoidWhen": [
+    {
+      "condition": "The quotation is inline within a sentence.",
+      "useInstead": "native q inside the surrounding content owner"
+    },
+    {
+      "condition": "The interface is a testimonial card with media, ratings, or actions.",
+      "useInstead": "Card or a product Block composed with Blockquote"
+    }
+  ],
+  "composition": [
+    "Place Blockquote.Content and optional Blockquote.Caption as siblings inside Blockquote.Root; put the source URL on Content through cite.",
+    "Use Blockquote.Cite inside Caption only for a referenced work or source, not merely for the person quoted."
+  ],
+  "rules": [
+    {
+      "id": "blockquote-native",
+      "level": "must",
+      "statement": "Preserve figure Root, blockquote Content, sibling figcaption Caption, and native cite Cite."
+    },
+    {
+      "id": "blockquote-attribution",
+      "level": "must",
+      "statement": "Keep attribution outside Content so it is not represented as part of the quotation."
+    },
+    {
+      "id": "blockquote-recipes",
+      "level": "must",
+      "statement": "Select only the documented accent, surface, or plain variant and start, center, or end alignment."
+    },
+    {
+      "id": "blockquote-icon",
+      "level": "must",
+      "statement": "Keep Icon decorative unless a consumer intentionally overrides aria-hidden for meaningful custom content."
+    },
+    {
+      "id": "blockquote-css",
+      "level": "must",
+      "statement": "Load styles.css or core.css plus blockquote.css."
+    }
+  ],
+  "commonMistakes": [
+    {
+      "mistake": "Putting the author or source inside Blockquote.Content.",
+      "correction": "Render attribution in sibling Blockquote.Caption and use Cite only for a work or source title."
+    }
+  ],
+  "validation": [
+    "Confirm native figure, blockquote, figcaption, and cite mapping; source URL forwarding; logical alignment; selection and copy; forced colors; zoom; text spacing; localization; RTL; and CSS delivery.",
+    "Confirm Blockquote adds no tab stop, role, interaction, or application provenance policy."
+  ],
+  "related": [
+    "text",
+    "mark",
+    "interface-composition"
+  ]
+}

package/dist/agents/blockquote.md

@@ -0,0 +1,42 @@
+# Blockquote agent guide
+
+## Purpose
+
+Compose an extended quotation, source URL, and optional attribution with correct native structure and finished Brick styling.
+
+## Use when
+
+- An extended quotation and optional attribution form one self-contained content unit.
+
+## Choose something else when
+
+- The quotation is inline within a sentence. Use native q inside the surrounding content owner.
+- The interface is a testimonial card with media, ratings, or actions. Use Card or a product Block composed with Blockquote.
+
+## Required composition
+
+- Place Blockquote.Content and optional Blockquote.Caption as siblings inside Blockquote.Root; put the source URL on Content through cite.
+- Use Blockquote.Cite inside Caption only for a referenced work or source, not merely for the person quoted.
+
+## Rules
+
+- **MUST:** Preserve figure Root, blockquote Content, sibling figcaption Caption, and native cite Cite.
+- **MUST:** Keep attribution outside Content so it is not represented as part of the quotation.
+- **MUST:** Select only the documented accent, surface, or plain variant and start, center, or end alignment.
+- **MUST:** Keep Icon decorative unless a consumer intentionally overrides aria-hidden for meaningful custom content.
+- **MUST:** Load styles.css or core.css plus blockquote.css.
+
+## Common mistakes
+
+- **Avoid:** Putting the author or source inside Blockquote.Content. **Instead:** Render attribution in sibling Blockquote.Caption and use Cite only for a work or source title.
+
+## Validation checklist
+
+- Confirm native figure, blockquote, figcaption, and cite mapping; source URL forwarding; logical alignment; selection and copy; forced colors; zoom; text spacing; localization; RTL; and CSS delivery.
+- Confirm Blockquote adds no tab stop, role, interaction, or application provenance policy.
+
+## Related guidance
+
+- `text`
+- `mark`
+- `interface-composition`

package/dist/agents/code-block.json

@@ -22,8 +22,9 @@
   "composition": [
     "Pass the exact plain-text source to Root value, then place Content inside Root and give focusable Content a specific accessible label.",
     "Author Header, Title, Language, Actions, CopyTrigger, CopyStatus, and CopyIndicator only when the interface needs those optional parts.",
-    "For syntax highlighting, generate trusted React token nodes outside Brick and pass them to Content while keeping Root value identical to the plain text that must be copied.",
-    "Give the Code Block a bounded parent when vertical page or panel layout requires a fixed scrolling region; Content owns the code's horizontal overflow."
+    "For syntax highlighting, pass a synchronous adapter or trusted React token nodes to Content while keeping Root value identical to the plain text that must be copied.",
+    "Use Line for authored line numbers, highlighting, focus, additions, and removals; metadata remains independent so one line can carry more than one relevant state.",
+    "Use Content maxLines for a bounded scroll region. For expansion, put bounded Content in CollapsePreview, unbounded Content in CollapseContent, and author CollapseTrigger so Brick Collapsible owns the real disclosure relationship and lifecycle."
   ],
   "rules": [
     {
@@ -34,7 +35,7 @@
     {
       "id": "code-block-highlighting-owner",
       "level": "must",
-      "statement": "Keep tokenization, language loading, and syntax palettes in a consumer adapter; Brick accepts trusted React nodes and does not bundle a highlighter or unsafe HTML path."
+      "statement": "Keep tokenization, language loading, and syntax palettes in a pure synchronous consumer adapter; Brick accepts trusted React nodes and does not bundle a highlighter or unsafe HTML path."
     },
     {
       "id": "code-block-scroll-owner",
@@ -46,6 +47,16 @@
       "level": "must",
       "statement": "Give every focusable Content region a specific aria-label or aria-labelledby, especially when several examples share one page."
     },
+    {
+      "id": "code-block-line-metadata",
+      "level": "must",
+      "statement": "Author Line metadata from the authoritative source or trusted adapter output; do not infer diffs, focus, or highlighting from visual tokens."
+    },
+    {
+      "id": "code-block-bounded-access",
+      "level": "must",
+      "statement": "Keep standalone maxLines content reachable through its focusable viewport; for expansion, pair CollapsePreview and CollapseContent with an accessible CollapseTrigger so only the current source view is exposed."
+    },
     {
       "id": "code-block-css",
       "level": "must",
@@ -60,16 +71,21 @@
     {
       "mistake": "Adding a header, language label, copy action, or status region merely because those parts exist.",
       "correction": "Author only the optional anatomy required by the surrounding interface."
+    },
+    {
+      "mistake": "Clipping a long code block with application CSS and no reachable overflow or expansion control.",
+      "correction": "Use Content maxLines for bounded scrolling or compose CollapsePreview, CollapseContent, and CollapseTrigger for an accessible full-source path."
     }
   ],
   "validation": [
     "Confirm the rendered tokens and copied plain text match exactly, unsafe HTML is absent, and copy success, failure, concurrency, and status wording remain truthful when copy anatomy is present.",
-    "Check keyboard focus, uniquely named overflow landmarks, long-line scrolling or wrapping, mobile text sizing, zoom, selection, RTL/LTR, light and dark syntax contrast, and CSS delivery."
+    "Check keyboard focus, uniquely named overflow landmarks, line metadata, bounded scrolling or collapse expansion, long-line scrolling or wrapping, mobile text sizing, zoom, selection, RTL/LTR, light and dark syntax contrast, and CSS delivery."
   ],
   "related": [
     "code",
     "scroll-area",
     "button",
+    "collapsible",
     "tabs",
     "interface-composition"
   ]

package/dist/agents/code-block.md

@@ -17,31 +17,36 @@ Present preserved multi-line technical source with native scrolling, explicit me
 
 - Pass the exact plain-text source to Root value, then place Content inside Root and give focusable Content a specific accessible label.
 - Author Header, Title, Language, Actions, CopyTrigger, CopyStatus, and CopyIndicator only when the interface needs those optional parts.
-- For syntax highlighting, generate trusted React token nodes outside Brick and pass them to Content while keeping Root value identical to the plain text that must be copied.
-- Give the Code Block a bounded parent when vertical page or panel layout requires a fixed scrolling region; Content owns the code's horizontal overflow.
+- For syntax highlighting, pass a synchronous adapter or trusted React token nodes to Content while keeping Root value identical to the plain text that must be copied.
+- Use Line for authored line numbers, highlighting, focus, additions, and removals; metadata remains independent so one line can carry more than one relevant state.
+- Use Content maxLines for a bounded scroll region. For expansion, put bounded Content in CollapsePreview, unbounded Content in CollapseContent, and author CollapseTrigger so Brick Collapsible owns the real disclosure relationship and lifecycle.
 
 ## Rules
 
 - **MUST:** Keep Root value authoritative and exactly aligned with rendered highlighted content so copy behavior never depends on rendered textContent.
-- **MUST:** Keep tokenization, language loading, and syntax palettes in a consumer adapter; Brick accepts trusted React nodes and does not bundle a highlighter or unsafe HTML path.
+- **MUST:** Keep tokenization, language loading, and syntax palettes in a pure synchronous consumer adapter; Brick accepts trusted React nodes and does not bundle a highlighter or unsafe HTML path.
 - **MUST:** Let Content own canonical pre, code, focus, and horizontal scrolling instead of rebuilding them with a separate ScrollArea or native pre element.
 - **MUST:** Give every focusable Content region a specific aria-label or aria-labelledby, especially when several examples share one page.
+- **MUST:** Author Line metadata from the authoritative source or trusted adapter output; do not infer diffs, focus, or highlighting from visual tokens.
+- **MUST:** Keep standalone maxLines content reachable through its focusable viewport; for expansion, pair CollapsePreview and CollapseContent with an accessible CollapseTrigger so only the current source view is exposed.
 - **MUST:** Load styles.css or core.css plus code-block.css and its documented component dependencies.
 
 ## Common mistakes
 
 - **Avoid:** Rendering highlighted HTML with dangerouslySetInnerHTML, copying from token text, or nesting another pre and ScrollArea inside Content. **Instead:** Render trusted React token spans, preserve the original string in Root value, and let Content own the canonical code viewport.
 - **Avoid:** Adding a header, language label, copy action, or status region merely because those parts exist. **Instead:** Author only the optional anatomy required by the surrounding interface.
+- **Avoid:** Clipping a long code block with application CSS and no reachable overflow or expansion control. **Instead:** Use Content maxLines for bounded scrolling or compose CollapsePreview, CollapseContent, and CollapseTrigger for an accessible full-source path.
 
 ## Validation checklist
 
 - Confirm the rendered tokens and copied plain text match exactly, unsafe HTML is absent, and copy success, failure, concurrency, and status wording remain truthful when copy anatomy is present.
-- Check keyboard focus, uniquely named overflow landmarks, long-line scrolling or wrapping, mobile text sizing, zoom, selection, RTL/LTR, light and dark syntax contrast, and CSS delivery.
+- Check keyboard focus, uniquely named overflow landmarks, line metadata, bounded scrolling or collapse expansion, long-line scrolling or wrapping, mobile text sizing, zoom, selection, RTL/LTR, light and dark syntax contrast, and CSS delivery.
 
 ## Related guidance
 
 - `code`
 - `scroll-area`
 - `button`
+- `collapsible`
 - `tabs`
 - `interface-composition`