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

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

@@ -0,0 +1,143 @@
+# Feed
+
+Source: @flowstack-ui/brick@0.1.11
+Kind: component
+ID: feed
+
+# Feed agent guide
+
+## Purpose
+
+Present a styled dynamic stream of rich focusable articles while Atom owns feed semantics, busy state, positions, and keyboard movement.
+
+## Use when
+
+- Activity, news, social posts, or rich notifications may change while a person reads and article-by-article keyboard movement is useful.
+
+## Choose something else when
+
+- The sequence is static or has tabular, hierarchical, or purely visual relationships. Use List, Table/DataGrid, Tree, or Stack/Grid according to the relationship.
+
+## Required composition
+
+- Compose direct Feed.Item articles inside one named Feed.Root; give every Item a useful heading or other accessible name, accurate position metadata, and item-local actions that do not turn the article into one whole-row control.
+- Compose ScrollArea outside Root only when a Frame or another parent supplies a definite bounded size.
+- Use dividerStrength=default only when a compact utility feed needs clearer row separation; preserve the subtle default for ordinary continuous reading.
+
+## Rules
+
+- **MUST:** Use Feed only for a dynamic rich article stream where feed semantics and article keyboard movement improve the experience.
+- **MUST:** Keep Feed.Item articles as direct Root children with useful accessible names and accurate positions and totals.
+- **MUST:** Set busy only while adding or replacing Feed DOM; do not make a passive feed a live region or treat busy paint as an announcement.
+- **MUST:** Keep links, buttons, and menus as independently named descendants; do not make the entire Feed Item a hover or activation target.
+- **MUST:** When the stream is bounded, let Frame own the definite size and ScrollArea own overflow outside Feed.Root.
+- **MUST:** When an application windows articles, preserve stable identities and full logical positions, keep the focused and next keyboard target articles mounted or materialize them before focus moves, and remember that geometry utilities do not own feed loading or semantics.
+- **MUST:** Load styles.css or core.css plus feed.css and every composed child stylesheet.
+
+## Common mistakes
+
+- **Avoid:** Using Feed for any repeated row, putting non-article children directly in Root, or adding aria-live to a passive notification tray. **Instead:** Choose Feed only for a dynamic article stream, keep direct Item anatomy, and reserve live announcements for application-owned asynchronous feedback.
+
+## Validation checklist
+
+- Check Root naming, Item headings, direct article children, positions and totals, busy state, PageUp/PageDown, Control/Command+Home/End, nested control focus, and scroll reveal.
+- Check divided, plain, and outline boundaries at narrow widths, zoom, RTL, forced colors, reduced motion, and light/dark appearance.
+- For paged or windowed feeds, verify stable keys and full logical metadata and ensure the focused and next PageUp/PageDown target articles exist before focus moves.
+
+## Related guidance
+
+- `@flowstack-ui/atom/agents/feed`
+- `list`
+- `scroll-area`
+- `frame`
+- `button`
+- `dropdown-menu`
+
+## Machine record
+
+```json
+{
+  "schema": "flowstack.agent-component.v1",
+  "id": "feed",
+  "name": "Feed",
+  "package": "@flowstack-ui/brick",
+  "layer": "brick",
+  "kind": "component",
+  "purpose": "Present a styled dynamic stream of rich focusable articles while Atom owns feed semantics, busy state, positions, and keyboard movement.",
+  "useWhen": [
+    "Activity, news, social posts, or rich notifications may change while a person reads and article-by-article keyboard movement is useful."
+  ],
+  "avoidWhen": [
+    {
+      "condition": "The sequence is static or has tabular, hierarchical, or purely visual relationships.",
+      "useInstead": "List, Table/DataGrid, Tree, or Stack/Grid according to the relationship"
+    }
+  ],
+  "composition": [
+    "Compose direct Feed.Item articles inside one named Feed.Root; give every Item a useful heading or other accessible name, accurate position metadata, and item-local actions that do not turn the article into one whole-row control.",
+    "Compose ScrollArea outside Root only when a Frame or another parent supplies a definite bounded size.",
+    "Use dividerStrength=default only when a compact utility feed needs clearer row separation; preserve the subtle default for ordinary continuous reading."
+  ],
+  "rules": [
+    {
+      "id": "feed-dynamic-owner",
+      "level": "must",
+      "statement": "Use Feed only for a dynamic rich article stream where feed semantics and article keyboard movement improve the experience."
+    },
+    {
+      "id": "feed-direct-items",
+      "level": "must",
+      "statement": "Keep Feed.Item articles as direct Root children with useful accessible names and accurate positions and totals."
+    },
+    {
+      "id": "feed-busy",
+      "level": "must",
+      "statement": "Set busy only while adding or replacing Feed DOM; do not make a passive feed a live region or treat busy paint as an announcement."
+    },
+    {
+      "id": "feed-actions",
+      "level": "must",
+      "statement": "Keep links, buttons, and menus as independently named descendants; do not make the entire Feed Item a hover or activation target."
+    },
+    {
+      "id": "feed-scroll",
+      "level": "must",
+      "statement": "When the stream is bounded, let Frame own the definite size and ScrollArea own overflow outside Feed.Root."
+    },
+    {
+      "id": "feed-virtualization",
+      "level": "must",
+      "statement": "When an application windows articles, preserve stable identities and full logical positions, keep the focused and next keyboard target articles mounted or materialize them before focus moves, and remember that geometry utilities do not own feed loading or semantics."
+    },
+    {
+      "id": "feed-css",
+      "level": "must",
+      "statement": "Load styles.css or core.css plus feed.css and every composed child stylesheet."
+    }
+  ],
+  "commonMistakes": [
+    {
+      "mistake": "Using Feed for any repeated row, putting non-article children directly in Root, or adding aria-live to a passive notification tray.",
+      "correction": "Choose Feed only for a dynamic article stream, keep direct Item anatomy, and reserve live announcements for application-owned asynchronous feedback."
+    }
+  ],
+  "validation": [
+    "Check Root naming, Item headings, direct article children, positions and totals, busy state, PageUp/PageDown, Control/Command+Home/End, nested control focus, and scroll reveal.",
+    "Check divided, plain, and outline boundaries at narrow widths, zoom, RTL, forced colors, reduced motion, and light/dark appearance.",
+    "For paged or windowed feeds, verify stable keys and full logical metadata and ensure the focused and next PageUp/PageDown target articles exist before focus moves."
+  ],
+  "related": [
+    {
+      "kind": "package",
+      "package": "@flowstack-ui/atom",
+      "id": "feed",
+      "versionPolicy": "installed-exact"
+    },
+    "list",
+    "scroll-area",
+    "frame",
+    "button",
+    "dropdown-menu"
+  ]
+}
+```

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

@@ -0,0 +1,115 @@
+# Field
+
+Source: @flowstack-ui/brick@0.1.11
+Kind: component
+ID: field
+
+# Field agent guide
+
+## Purpose
+
+Visually arrange one control with its label, description, error, and inherited Atom field relationships.
+
+## Use when
+
+- One finished control needs a visible label and may need help or error text.
+
+## Choose something else when
+
+- Several related controls share one group label. Use Fieldset, with Field inside when individual controls also need labels.
+
+## Required composition
+
+- Compose Field.Root -> Field.Label -> one control -> optional Field.Description -> optional Field.Error.
+
+## Rules
+
+- **MUST:** Associate one Field with one control.
+- **MUST:** Field.Label already renders the default required marker; never add a second asterisk or RequiredIndicator unless the default is disabled.
+- **MUST:** Load styles.css or core.css plus field.css and the owned control stylesheet.
+
+## Common mistakes
+
+- **Avoid:** Adding a manual required asterisk beside a required Field.Label. **Instead:** Set required on Field.Root and use the built-in Label marker, or explicitly replace it once.
+
+## Validation checklist
+
+- Confirm label, description, and error relationships.
+- Confirm exactly one required marker.
+- Check vertical and horizontal layouts at narrow widths.
+
+## Related guidance
+
+- `@flowstack-ui/atom/agents/field`
+- `form`
+- `fieldset`
+- `input`
+- `textarea`
+- `checkbox`
+
+## Machine record
+
+```json
+{
+  "schema": "flowstack.agent-component.v1",
+  "id": "field",
+  "name": "Field",
+  "package": "@flowstack-ui/brick",
+  "layer": "brick",
+  "kind": "component",
+  "purpose": "Visually arrange one control with its label, description, error, and inherited Atom field relationships.",
+  "useWhen": [
+    "One finished control needs a visible label and may need help or error text."
+  ],
+  "avoidWhen": [
+    {
+      "condition": "Several related controls share one group label.",
+      "useInstead": "Fieldset, with Field inside when individual controls also need labels"
+    }
+  ],
+  "composition": [
+    "Compose Field.Root -> Field.Label -> one control -> optional Field.Description -> optional Field.Error."
+  ],
+  "rules": [
+    {
+      "id": "field-one-control",
+      "level": "must",
+      "statement": "Associate one Field with one control."
+    },
+    {
+      "id": "field-marker",
+      "level": "must",
+      "statement": "Field.Label already renders the default required marker; never add a second asterisk or RequiredIndicator unless the default is disabled."
+    },
+    {
+      "id": "field-css",
+      "level": "must",
+      "statement": "Load styles.css or core.css plus field.css and the owned control stylesheet."
+    }
+  ],
+  "commonMistakes": [
+    {
+      "mistake": "Adding a manual required asterisk beside a required Field.Label.",
+      "correction": "Set required on Field.Root and use the built-in Label marker, or explicitly replace it once."
+    }
+  ],
+  "validation": [
+    "Confirm label, description, and error relationships.",
+    "Confirm exactly one required marker.",
+    "Check vertical and horizontal layouts at narrow widths."
+  ],
+  "related": [
+    {
+      "kind": "package",
+      "package": "@flowstack-ui/atom",
+      "id": "field",
+      "versionPolicy": "installed-exact"
+    },
+    "form",
+    "fieldset",
+    "input",
+    "textarea",
+    "checkbox"
+  ]
+}
+```

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

@@ -0,0 +1,103 @@
+# Fieldset
+
+Source: @flowstack-ui/brick@0.1.11
+Kind: component
+ID: fieldset
+
+# Fieldset agent guide
+
+## Purpose
+
+Render a finished native group for related controls with a legend, group messaging, and inherited Atom state.
+
+## Use when
+
+- Multiple related controls answer one group question.
+
+## Choose something else when
+
+- Only one control needs a label. Use Field.
+
+## Required composition
+
+- Compose Fieldset.Root -> Fieldset.Legend -> optional description/error -> Fields or grouped choices.
+
+## Rules
+
+- **MUST:** Give the related group a meaningful legend.
+- **MUST:** Load styles.css or core.css plus fieldset.css and child component styles.
+
+## Common mistakes
+
+- **Avoid:** Using visual heading and div wrappers for a related choice group. **Instead:** Use Fieldset so the group label and state remain semantic.
+
+## Validation checklist
+
+- Inspect fieldset and legend semantics.
+- Check group messaging, state propagation, spacing, and responsive layout.
+
+## Related guidance
+
+- `@flowstack-ui/atom/agents/fieldset`
+- `form`
+- `field`
+- `checkbox`
+
+## Machine record
+
+```json
+{
+  "schema": "flowstack.agent-component.v1",
+  "id": "fieldset",
+  "name": "Fieldset",
+  "package": "@flowstack-ui/brick",
+  "layer": "brick",
+  "kind": "component",
+  "purpose": "Render a finished native group for related controls with a legend, group messaging, and inherited Atom state.",
+  "useWhen": [
+    "Multiple related controls answer one group question."
+  ],
+  "avoidWhen": [
+    {
+      "condition": "Only one control needs a label.",
+      "useInstead": "Field"
+    }
+  ],
+  "composition": [
+    "Compose Fieldset.Root -> Fieldset.Legend -> optional description/error -> Fields or grouped choices."
+  ],
+  "rules": [
+    {
+      "id": "fieldset-legend",
+      "level": "must",
+      "statement": "Give the related group a meaningful legend."
+    },
+    {
+      "id": "fieldset-css",
+      "level": "must",
+      "statement": "Load styles.css or core.css plus fieldset.css and child component styles."
+    }
+  ],
+  "commonMistakes": [
+    {
+      "mistake": "Using visual heading and div wrappers for a related choice group.",
+      "correction": "Use Fieldset so the group label and state remain semantic."
+    }
+  ],
+  "validation": [
+    "Inspect fieldset and legend semantics.",
+    "Check group messaging, state propagation, spacing, and responsive layout."
+  ],
+  "related": [
+    {
+      "kind": "package",
+      "package": "@flowstack-ui/atom",
+      "id": "fieldset",
+      "versionPolicy": "installed-exact"
+    },
+    "form",
+    "field",
+    "checkbox"
+  ]
+}
+```

package/public/packages/brick/0.1.11/components/file-upload.txt

@@ -0,0 +1,154 @@
+# FileUpload
+
+Source: @flowstack-ui/brick@0.1.11
+Kind: component
+ID: file-upload
+
+# FileUpload agent guide
+
+## Purpose
+
+Present a finished local-file picker, optional drop target, and removable selected-file list while Atom owns native picking, file state, client acceptance, Field validation, reset, and multipart form participation.
+
+## Use when
+
+- A form needs one or more local files selected through the native picker, optional drag and drop, review, removal, or visible client-side rejection feedback before application processing.
+
+## Choose something else when
+
+- A native file input is sufficient, the value is a textual path or URL, the asset is already remote, or the job is transfer progress, retry, persistence, preview editing, or server policy. Use a native input type=file, Input, Progress, Toast, Image, or an application-owned upload workflow.
+
+## Required composition
+
+- Compose one Field with FileUpload.Root, exactly one HiddenInput, and an accessible Trigger. Add Dropzone only as an enhancement; use ItemGroup with one Item per accepted file and optional ItemName, ItemSize, and file-specific ItemDeleteTrigger.
+- State both browse and drop paths plus material constraints in visible copy. Use Root's outline or soft recipe, size, shape, and width while keeping upload transport, progress, rejection copy, and server policy outside FileUpload.
+
+## Rules
+
+- **MUST:** Render exactly one HiddenInput whenever picker, Trigger, required validity, name, form, accept, or multiple semantics are needed and keep it aligned with the visible control.
+- **MUST:** Always provide a visible accessible Trigger for keyboard, touch, and pointer selection; Dropzone alone is not an equivalent picker, and Trigger already owns its button recipe rather than nesting Button.
+- **MUST:** Use accept, maxFiles, maxSize, and validateFile only for immediate client feedback, show authored localized rejection reasons, and validate type, size, content, authorization, and storage policy again on the server.
+- **MUST:** Use files with onFilesChange or defaultFiles, choose appendFiles deliberately for multiple selection, and distinguish rejected candidates from the validity of the currently selected files.
+- **MUST:** Preserve file-only drag state, nested drag handling, document-drop protection, disabled/read-only behavior, native FileList synchronization, required focus, Field relationships, external form, same-file reselection after deletion, and uncontrolled reset.
+- **MUST:** Keep ItemGroup and Item native list semantics, preserve each complete filename despite visual truncation, give every removal action a file-specific name, and do not nest Brick List or IconButton into the owning parts.
+- **MUST:** Keep drop copy and selected-file metadata contained under long filenames, localization, narrow widths, zoom, and RTL while retaining visible focus, non-color accept/reject cues, and effective action targets.
+- **MUST:** Load styles.css or core.css plus file-upload.css and Field CSS when composed.
+
+## Common mistakes
+
+- **Avoid:** Using Dropzone as the only picker, treating accept as security, hiding rejection reasons, wrapping Trigger in Button, or forgetting same-file reselection after removal. **Instead:** Include HiddenInput and Trigger, validate again on the server, present rejection feedback, preserve the owning interactive parts, and let Atom synchronize native selection.
+- **Avoid:** Turning local file selection into an upload transport with progress, retry, preview lifecycle, storage, or malware claims. **Instead:** Keep FileUpload responsible for local selection and compose application-owned transfer status and durable results beside it.
+
+## Validation checklist
+
+- Verify picker opening by pointer, touch, Enter, and Space; controlled/uncontrolled files; single replacement and multiple append/replace policy; accept rules; maximum count and size; custom rejection; visible rejection feedback; disabled/read-only state; and same-file reselection.
+- Verify accepted/rejected and nested drag behavior, non-file drags, document-drop protection, HiddenInput name/form/required/multiple/FileList behavior, Field labels/errors, inline/native focus, reset, ItemGroup metadata, delete labels, native props, refs, and composition.
+- Verify both recipes, all sizes/shapes/widths, long filenames and localized copy, narrow width, zoom, RTL, touch targets, light/dark appearance, forced colors, focus, invalid, disabled, read-only, accept, and reject paint.
+
+## Related guidance
+
+- `@flowstack-ui/atom/agents/file-upload`
+- `input`
+- `field`
+- `form`
+- `progress`
+- `toast`
+- `image`
+
+## Machine record
+
+```json
+{
+  "schema": "flowstack.agent-component.v1",
+  "id": "file-upload",
+  "name": "FileUpload",
+  "package": "@flowstack-ui/brick",
+  "layer": "brick",
+  "kind": "component",
+  "purpose": "Present a finished local-file picker, optional drop target, and removable selected-file list while Atom owns native picking, file state, client acceptance, Field validation, reset, and multipart form participation.",
+  "useWhen": [
+    "A form needs one or more local files selected through the native picker, optional drag and drop, review, removal, or visible client-side rejection feedback before application processing."
+  ],
+  "avoidWhen": [
+    {
+      "condition": "A native file input is sufficient, the value is a textual path or URL, the asset is already remote, or the job is transfer progress, retry, persistence, preview editing, or server policy.",
+      "useInstead": "a native input type=file, Input, Progress, Toast, Image, or an application-owned upload workflow"
+    }
+  ],
+  "composition": [
+    "Compose one Field with FileUpload.Root, exactly one HiddenInput, and an accessible Trigger. Add Dropzone only as an enhancement; use ItemGroup with one Item per accepted file and optional ItemName, ItemSize, and file-specific ItemDeleteTrigger.",
+    "State both browse and drop paths plus material constraints in visible copy. Use Root's outline or soft recipe, size, shape, and width while keeping upload transport, progress, rejection copy, and server policy outside FileUpload."
+  ],
+  "rules": [
+    {
+      "id": "file-upload-native-input",
+      "level": "must",
+      "statement": "Render exactly one HiddenInput whenever picker, Trigger, required validity, name, form, accept, or multiple semantics are needed and keep it aligned with the visible control."
+    },
+    {
+      "id": "file-upload-access-path",
+      "level": "must",
+      "statement": "Always provide a visible accessible Trigger for keyboard, touch, and pointer selection; Dropzone alone is not an equivalent picker, and Trigger already owns its button recipe rather than nesting Button."
+    },
+    {
+      "id": "file-upload-validation",
+      "level": "must",
+      "statement": "Use accept, maxFiles, maxSize, and validateFile only for immediate client feedback, show authored localized rejection reasons, and validate type, size, content, authorization, and storage policy again on the server."
+    },
+    {
+      "id": "file-upload-state",
+      "level": "must",
+      "statement": "Use files with onFilesChange or defaultFiles, choose appendFiles deliberately for multiple selection, and distinguish rejected candidates from the validity of the currently selected files."
+    },
+    {
+      "id": "file-upload-drop-form",
+      "level": "must",
+      "statement": "Preserve file-only drag state, nested drag handling, document-drop protection, disabled/read-only behavior, native FileList synchronization, required focus, Field relationships, external form, same-file reselection after deletion, and uncontrolled reset."
+    },
+    {
+      "id": "file-upload-items",
+      "level": "must",
+      "statement": "Keep ItemGroup and Item native list semantics, preserve each complete filename despite visual truncation, give every removal action a file-specific name, and do not nest Brick List or IconButton into the owning parts."
+    },
+    {
+      "id": "file-upload-responsive",
+      "level": "must",
+      "statement": "Keep drop copy and selected-file metadata contained under long filenames, localization, narrow widths, zoom, and RTL while retaining visible focus, non-color accept/reject cues, and effective action targets."
+    },
+    {
+      "id": "file-upload-css",
+      "level": "must",
+      "statement": "Load styles.css or core.css plus file-upload.css and Field CSS when composed."
+    }
+  ],
+  "commonMistakes": [
+    {
+      "mistake": "Using Dropzone as the only picker, treating accept as security, hiding rejection reasons, wrapping Trigger in Button, or forgetting same-file reselection after removal.",
+      "correction": "Include HiddenInput and Trigger, validate again on the server, present rejection feedback, preserve the owning interactive parts, and let Atom synchronize native selection."
+    },
+    {
+      "mistake": "Turning local file selection into an upload transport with progress, retry, preview lifecycle, storage, or malware claims.",
+      "correction": "Keep FileUpload responsible for local selection and compose application-owned transfer status and durable results beside it."
+    }
+  ],
+  "validation": [
+    "Verify picker opening by pointer, touch, Enter, and Space; controlled/uncontrolled files; single replacement and multiple append/replace policy; accept rules; maximum count and size; custom rejection; visible rejection feedback; disabled/read-only state; and same-file reselection.",
+    "Verify accepted/rejected and nested drag behavior, non-file drags, document-drop protection, HiddenInput name/form/required/multiple/FileList behavior, Field labels/errors, inline/native focus, reset, ItemGroup metadata, delete labels, native props, refs, and composition.",
+    "Verify both recipes, all sizes/shapes/widths, long filenames and localized copy, narrow width, zoom, RTL, touch targets, light/dark appearance, forced colors, focus, invalid, disabled, read-only, accept, and reject paint."
+  ],
+  "related": [
+    {
+      "kind": "package",
+      "package": "@flowstack-ui/atom",
+      "id": "file-upload",
+      "versionPolicy": "installed-exact"
+    },
+    "input",
+    "field",
+    "form",
+    "progress",
+    "toast",
+    "image"
+  ]
+}
+```

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

@@ -0,0 +1,108 @@
+# Form
+
+Source: @flowstack-ui/brick@0.1.11
+Kind: component
+ID: form
+
+# Form agent guide
+
+## Purpose
+
+Provide a finished native submission boundary and consistent form rhythm while Atom owns submission and validation behavior.
+
+## Use when
+
+- Related controls submit user input as one operation.
+
+## Choose something else when
+
+- Controls are unrelated immediate settings or actions. Use Individual Field and Button compositions.
+
+## Required composition
+
+- Compose Form -> Field for each independently labelled control -> a named submit Button; add Fieldset only when multiple controls answer one meaningful group question.
+
+## Rules
+
+- **MUST:** Keep native submission available and give submitted controls names.
+- **MUST:** Load styles.css or core.css plus form.css and every rendered child component stylesheet.
+
+## Common mistakes
+
+- **Avoid:** Treating Form as a complete login or contact workflow. **Instead:** Keep business workflow in the application or a future Block; Form owns the generic visual boundary.
+- **Avoid:** Wrapping the entire form in Fieldset only to obtain spacing, then repeating the page heading as its legend. **Instead:** Let Form own ordinary field rhythm and reserve Fieldset for a real labelled subgroup.
+
+## Validation checklist
+
+- Submit with keyboard and pointer.
+- Inspect submitted values, invalid relationships, spacing, and narrow-layout behavior.
+
+## Related guidance
+
+- `@flowstack-ui/atom/agents/form`
+- `field`
+- `fieldset`
+- `button`
+
+## Machine record
+
+```json
+{
+  "schema": "flowstack.agent-component.v1",
+  "id": "form",
+  "name": "Form",
+  "package": "@flowstack-ui/brick",
+  "layer": "brick",
+  "kind": "component",
+  "purpose": "Provide a finished native submission boundary and consistent form rhythm while Atom owns submission and validation behavior.",
+  "useWhen": [
+    "Related controls submit user input as one operation."
+  ],
+  "avoidWhen": [
+    {
+      "condition": "Controls are unrelated immediate settings or actions.",
+      "useInstead": "Individual Field and Button compositions"
+    }
+  ],
+  "composition": [
+    "Compose Form -> Field for each independently labelled control -> a named submit Button; add Fieldset only when multiple controls answer one meaningful group question."
+  ],
+  "rules": [
+    {
+      "id": "form-native",
+      "level": "must",
+      "statement": "Keep native submission available and give submitted controls names."
+    },
+    {
+      "id": "form-css",
+      "level": "must",
+      "statement": "Load styles.css or core.css plus form.css and every rendered child component stylesheet."
+    }
+  ],
+  "commonMistakes": [
+    {
+      "mistake": "Treating Form as a complete login or contact workflow.",
+      "correction": "Keep business workflow in the application or a future Block; Form owns the generic visual boundary."
+    },
+    {
+      "mistake": "Wrapping the entire form in Fieldset only to obtain spacing, then repeating the page heading as its legend.",
+      "correction": "Let Form own ordinary field rhythm and reserve Fieldset for a real labelled subgroup."
+    }
+  ],
+  "validation": [
+    "Submit with keyboard and pointer.",
+    "Inspect submitted values, invalid relationships, spacing, and narrow-layout behavior."
+  ],
+  "related": [
+    {
+      "kind": "package",
+      "package": "@flowstack-ui/atom",
+      "id": "form",
+      "versionPolicy": "installed-exact"
+    },
+    "field",
+    "fieldset",
+    "button"
+  ]
+}
+```