@flowstack-ui/brick 0.1.11 → 0.2.0

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`

package/dist/agents/color-picker.json

@@ -5,9 +5,10 @@
   "package": "@flowstack-ui/brick",
   "layer": "brick",
   "kind": "component",
-  "purpose": "Edit, choose, and submit an opaque hexadecimal color through a finished text, native chooser, preset, or optional floating composition.",
+  "purpose": "Edit, inspect, choose, and submit one color through a finished popup or inline editor with area, channel, format, preset, native chooser, and EyeDropper paths.",
   "useWhen": [
-    "A form needs one #rrggbb color value selected through editable text, the browser chooser, named presets, or a popover that combines them."
+    "A form, editor, or settings surface needs one color value with a finished visual editor.",
+    "Users need alpha, RGB, HSL, HSB, channel sliders, named presets, or a progressive platform color-picking path."
   ],
   "avoidWhen": [
     {
@@ -15,20 +16,26 @@
       "useInstead": "Color Swatch"
     },
     {
-      "condition": "The task requires alpha, gradients, color-space conversion, channels, an eyedropper, or contrast analysis.",
-      "useInstead": "an application-owned specialist until Atom releases that behavior"
+      "condition": "The task requires gradients, automatic color naming, contrast scoring, palette persistence, or a color wheel.",
+      "useInstead": "application-owned specialist behavior composed around Color Picker"
     }
   ],
   "composition": [
     "Place Label and Control inside Root; include HiddenInput when the value participates in native form submission.",
-    "Compose Trigger with Content for a floating picker, or omit both for inline editing.",
-    "Put ColorSwatch.Root inside Trigger and SwatchTrigger for finished previews while the surrounding control carries the accessible name and selected state."
+    "For a popup, compose Trigger, Positioner, and Content. For an always-visible editor, set Root inline and render Content directly.",
+    "Build the visual editor from Area, ChannelSlider, format controls, channel inputs, and SwatchGroup; ValueSwatch and ValueText expose the current value.",
+    "Place SwatchIndicator inside Swatch or ValueSwatch whenever selection needs a visible non-color cue."
   ],
   "rules": [
+    {
+      "id": "color-picker-ownership",
+      "level": "must",
+      "statement": "Use Brick parts for the finished interface and keep parsing, format conversion, selection, focus, dismissal, and form state in the exact Atom-backed machine."
+    },
     {
       "id": "color-picker-label",
       "level": "must",
-      "statement": "Give Input and NativeInput accessible names through Label or explicit aria-label values."
+      "statement": "Give the primary editable or native input an accessible name through Label or an explicit aria-label."
     },
     {
       "id": "color-picker-form",
@@ -36,37 +43,46 @@
       "statement": "Provide name to Root and render exactly one HiddenInput when the color must submit."
     },
     {
-      "id": "color-picker-hex",
+      "id": "color-picker-popup",
+      "level": "must",
+      "statement": "Wrap popup Content in Positioner; do not recreate positioning, focus restoration, or outside dismissal."
+    },
+    {
+      "id": "color-picker-selection",
       "level": "must",
-      "statement": "Use #rgb or #rrggbb; this release intentionally supports opaque hexadecimal values only."
+      "statement": "Name every SwatchTrigger and render SwatchIndicator or an equivalent visible non-color selected cue."
     },
     {
       "id": "color-picker-css",
       "level": "must",
-      "statement": "Load styles.css, or core.css plus both color-picker.css and color-swatch.css when swatches are composed."
+      "statement": "Load styles.css, or core.css plus color-picker.css for modular delivery."
     },
     {
-      "id": "color-picker-preset-name",
+      "id": "color-picker-platform",
       "level": "should",
-      "statement": "Give presets human-readable names; do not rely on color alone or a raw hex string when a product name exists."
+      "statement": "Treat NativeInput and EyeDropperTrigger as optional platform enhancements, not the only way to edit the color."
     }
   ],
   "commonMistakes": [
     {
-      "mistake": "Reimplementing color parsing, picker state, or Popover behavior in Brick or application code.",
-      "correction": "Use the Atom-backed ColorPicker parts and controlled props."
+      "mistake": "Reimplementing color conversion, pointer math, keyboard state, or popup behavior in Brick or application code.",
+      "correction": "Compose the released ColorPicker anatomy and controlled callbacks."
+    },
+    {
+      "mistake": "Putting popup Content beside Root without Positioner.",
+      "correction": "Use Trigger, Positioner, and Content as the released popup composition."
     },
     {
-      "mistake": "Naming both Input and HiddenInput for form submission.",
+      "mistake": "Naming both visible inputs and HiddenInput for submission.",
       "correction": "Put name on Root and render one HiddenInput."
     },
     {
-      "mistake": "Assuming Chakra's area, alpha, channel, format, or eyedropper parts exist.",
-      "correction": "Stay within the released Brick anatomy and treat richer behavior as Atom-first future work."
+      "mistake": "Using raw color alone to show the selected preset.",
+      "correction": "Render SwatchIndicator and an accessible preset name."
     }
   ],
   "validation": [
-    "Test text, native, preset, controlled, disabled, read-only, invalid, form submit/reset, Escape/focus restoration, light/dark, forced-colors, narrow/zoom, RTL, and non-color selection cues."
+    "Test area and channel synchronization, alpha, RGB/HSL/HSB format changes, presets, text/native/EyeDropper paths, controlled state, popup focus and dismissal, disabled/read-only/invalid, form submit/reset, light/dark, forced colors, reduced motion, narrow/zoom, RTL, and non-color selection cues."
   ],
   "related": [
     "color-swatch",

package/dist/agents/color-picker.md

@@ -2,40 +2,45 @@
 
 ## Purpose
 
-Edit, choose, and submit an opaque hexadecimal color through a finished text, native chooser, preset, or optional floating composition.
+Edit, inspect, choose, and submit one color through a finished popup or inline editor with area, channel, format, preset, native chooser, and EyeDropper paths.
 
 ## Use when
 
-- A form needs one #rrggbb color value selected through editable text, the browser chooser, named presets, or a popover that combines them.
+- A form, editor, or settings surface needs one color value with a finished visual editor.
+- Users need alpha, RGB, HSL, HSB, channel sliders, named presets, or a progressive platform color-picking path.
 
 ## Choose something else when
 
 - The interface only previews a color. Use Color Swatch.
-- The task requires alpha, gradients, color-space conversion, channels, an eyedropper, or contrast analysis. Use an application-owned specialist until Atom releases that behavior.
+- The task requires gradients, automatic color naming, contrast scoring, palette persistence, or a color wheel. Use application-owned specialist behavior composed around Color Picker.
 
 ## Required composition
 
 - Place Label and Control inside Root; include HiddenInput when the value participates in native form submission.
-- Compose Trigger with Content for a floating picker, or omit both for inline editing.
-- Put ColorSwatch.Root inside Trigger and SwatchTrigger for finished previews while the surrounding control carries the accessible name and selected state.
+- For a popup, compose Trigger, Positioner, and Content. For an always-visible editor, set Root inline and render Content directly.
+- Build the visual editor from Area, ChannelSlider, format controls, channel inputs, and SwatchGroup; ValueSwatch and ValueText expose the current value.
+- Place SwatchIndicator inside Swatch or ValueSwatch whenever selection needs a visible non-color cue.
 
 ## Rules
 
-- **MUST:** Give Input and NativeInput accessible names through Label or explicit aria-label values.
+- **MUST:** Use Brick parts for the finished interface and keep parsing, format conversion, selection, focus, dismissal, and form state in the exact Atom-backed machine.
+- **MUST:** Give the primary editable or native input an accessible name through Label or an explicit aria-label.
 - **MUST:** Provide name to Root and render exactly one HiddenInput when the color must submit.
-- **MUST:** Use #rgb or #rrggbb; this release intentionally supports opaque hexadecimal values only.
-- **MUST:** Load styles.css, or core.css plus both color-picker.css and color-swatch.css when swatches are composed.
-- **SHOULD:** Give presets human-readable names; do not rely on color alone or a raw hex string when a product name exists.
+- **MUST:** Wrap popup Content in Positioner; do not recreate positioning, focus restoration, or outside dismissal.
+- **MUST:** Name every SwatchTrigger and render SwatchIndicator or an equivalent visible non-color selected cue.
+- **MUST:** Load styles.css, or core.css plus color-picker.css for modular delivery.
+- **SHOULD:** Treat NativeInput and EyeDropperTrigger as optional platform enhancements, not the only way to edit the color.
 
 ## Common mistakes
 
-- **Avoid:** Reimplementing color parsing, picker state, or Popover behavior in Brick or application code. **Instead:** Use the Atom-backed ColorPicker parts and controlled props.
-- **Avoid:** Naming both Input and HiddenInput for form submission. **Instead:** Put name on Root and render one HiddenInput.
-- **Avoid:** Assuming Chakra's area, alpha, channel, format, or eyedropper parts exist. **Instead:** Stay within the released Brick anatomy and treat richer behavior as Atom-first future work.
+- **Avoid:** Reimplementing color conversion, pointer math, keyboard state, or popup behavior in Brick or application code. **Instead:** Compose the released ColorPicker anatomy and controlled callbacks.
+- **Avoid:** Putting popup Content beside Root without Positioner. **Instead:** Use Trigger, Positioner, and Content as the released popup composition.
+- **Avoid:** Naming both visible inputs and HiddenInput for submission. **Instead:** Put name on Root and render one HiddenInput.
+- **Avoid:** Using raw color alone to show the selected preset. **Instead:** Render SwatchIndicator and an accessible preset name.
 
 ## Validation checklist
 
-- Test text, native, preset, controlled, disabled, read-only, invalid, form submit/reset, Escape/focus restoration, light/dark, forced-colors, narrow/zoom, RTL, and non-color selection cues.
+- Test area and channel synchronization, alpha, RGB/HSL/HSB format changes, presets, text/native/EyeDropper paths, controlled state, popup focus and dismissal, disabled/read-only/invalid, form submit/reset, light/dark, forced colors, reduced motion, narrow/zoom, RTL, and non-color selection cues.
 
 ## Related guidance
 

package/dist/agents/color-swatch.json

@@ -5,7 +5,7 @@
   "package": "@flowstack-ui/brick",
   "layer": "brick",
   "kind": "component",
-  "purpose": "Preview one color or a compact mix of colors with a finished alpha-aware visual treatment.",
+  "purpose": "Preview one color or a compact mix of colors with a finished alpha-aware visual treatment and closed shape recipes.",
   "useWhen": [
     "A selected, available, saved, or documented color needs a compact visual preview."
   ],
@@ -16,7 +16,9 @@
     }
   ],
   "composition": [
-    "Render Root for one color and Mix for two or more colors; place the swatch inside the owning control when it represents a selectable option."
+    "Render Root for one color and Mix for two or more colors.",
+    "Choose sharp, rounded, or circle through shape rather than application border-radius CSS.",
+    "Place the passive swatch inside its owning control when it represents a selectable option."
   ],
   "rules": [
     {
@@ -29,6 +31,11 @@
       "level": "must",
       "statement": "Leave decorative swatches unlabeled, or provide label when the swatch itself must be exposed as an image."
     },
+    {
+      "id": "color-swatch-shape",
+      "level": "should",
+      "statement": "Use the closed shape prop for sharp, rounded, or circle geometry before overriding the public radius variable."
+    },
     {
       "id": "color-swatch-css",
       "level": "must",
@@ -38,14 +45,19 @@
   "commonMistakes": [
     {
       "mistake": "Adding click handlers directly to ColorSwatch.",
-      "correction": "Place the passive swatch inside Button, Color Picker preset behavior, or another semantic control."
+      "correction": "Place the passive swatch inside Button, Color Picker SwatchTrigger, or another semantic control."
+    },
+    {
+      "mistake": "Using custom border-radius CSS for a standard square or circle.",
+      "correction": "Use shape=sharp, rounded, or circle."
     }
   ],
   "validation": [
-    "Check solid, alpha, mixed, size, light/dark, forced-color, zoom, RTL, and decorative versus labeled semantics."
+    "Check solid, alpha, mixed, size, all three shapes, light/dark, forced colors, zoom, RTL, and decorative versus labeled semantics."
   ],
   "related": [
+    "color-picker",
     "badge",
-    "input"
+    "button"
   ]
 }

package/dist/agents/color-swatch.md

@@ -2,7 +2,7 @@
 
 ## Purpose
 
-Preview one color or a compact mix of colors with a finished alpha-aware visual treatment.
+Preview one color or a compact mix of colors with a finished alpha-aware visual treatment and closed shape recipes.
 
 ## Use when
 
@@ -14,23 +14,28 @@ Preview one color or a compact mix of colors with a finished alpha-aware visual
 
 ## Required composition
 
-- Render Root for one color and Mix for two or more colors; place the swatch inside the owning control when it represents a selectable option.
+- Render Root for one color and Mix for two or more colors.
+- Choose sharp, rounded, or circle through shape rather than application border-radius CSS.
+- Place the passive swatch inside its owning control when it represents a selectable option.
 
 ## Rules
 
 - **MUST:** Do not use the swatch as the only carrier of a color name, selection state, validation state, or action.
 - **MUST:** Leave decorative swatches unlabeled, or provide label when the swatch itself must be exposed as an image.
+- **SHOULD:** Use the closed shape prop for sharp, rounded, or circle geometry before overriding the public radius variable.
 - **MUST:** Load styles.css or core.css plus color-swatch.css.
 
 ## Common mistakes
 
-- **Avoid:** Adding click handlers directly to ColorSwatch. **Instead:** Place the passive swatch inside Button, Color Picker preset behavior, or another semantic control.
+- **Avoid:** Adding click handlers directly to ColorSwatch. **Instead:** Place the passive swatch inside Button, Color Picker SwatchTrigger, or another semantic control.
+- **Avoid:** Using custom border-radius CSS for a standard square or circle. **Instead:** Use shape=sharp, rounded, or circle.
 
 ## Validation checklist
 
-- Check solid, alpha, mixed, size, light/dark, forced-color, zoom, RTL, and decorative versus labeled semantics.
+- Check solid, alpha, mixed, size, all three shapes, light/dark, forced colors, zoom, RTL, and decorative versus labeled semantics.
 
 ## Related guidance
 
+- `color-picker`
 - `badge`
-- `input`
+- `button`