@flowstack-ui/brick 0.1.12 → 0.2.0

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`