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

package/public/packages/brick/0.1.11/components/checkbox-group.txt

@@ -0,0 +1,175 @@
+# Checkbox Group
+
+Source: @flowstack-ui/brick@0.1.11
+Kind: component
+ID: checkbox-group
+
+# Checkbox Group agent guide
+
+## Purpose
+
+Coordinate related multi-selection with structured item labels, optional descriptions, native repeated form values, and an optional aggregate parent control.
+
+## Use when
+
+- Several independently selectable choices belong to one named group or need a select-all parent.
+
+## Choose something else when
+
+- The choice is independent and does not share group state. Use Checkbox.
+- Exactly one option must be selected. Use Radio Group or Select.
+- The interface needs remote option loading, search, or a generated filter engine. Use Combobox or application-owned discovery controls.
+
+## Required composition
+
+- Give Root an accessible group name directly or compose it inside Fieldset with one visible Legend and shared description or error.
+- Compose Root with Item children; wrap each primary label in ItemLabel and supporting text in ItemDescription when structured item relationships are needed.
+- Use Parent only with an explicit allValues list containing the currently selectable declared values; omit individually disabled values and never infer the collection from rendered children.
+
+## Rules
+
+- **MUST:** Use Checkbox Group only for related multi-selection; keep one-of-many choice, independent consent, remote search, and application filter execution in their owning patterns.
+- **MUST:** Give Root a persistent accessible group name and every Item a complete visible associated label; placeholder or surrounding layout does not name the group.
+- **MUST:** Give every Item a unique stable string value and let the application own persistence, query synchronization, result counts, and filtering side effects.
+- **MUST:** Supply Parent allValues explicitly from the selectable declared set and do not include disabled choices or derive the set from DOM children.
+- **MUST:** Use the vertical default for scan-heavy groups and horizontal only when wrapped reading order remains clear under narrow widths, zoom, and localization.
+- **MUST:** Keep required or invalid messaging at group scope when any eligible option can satisfy the requirement; do not paint every Item as individually invalid.
+- **MUST:** Preserve disabled and read-only Items, one-or-more required validity, first-enabled validation focus, Fieldset relationships, named repeated-value submission, external form association, and uncontrolled reset.
+- **MUST:** Load styles.css or core.css plus checkbox-group.css and any Fieldset styles used.
+
+## Common mistakes
+
+- **Avoid:** Building a filter facet with unrelated standalone checkboxes and no group name. **Instead:** Use one named CheckboxGroup.Root with stable Item values and keep query execution in the application.
+- **Avoid:** Using Parent without an explicit current selectable set. **Instead:** Pass allValues deliberately so none, mixed, and all state remain deterministic.
+- **Avoid:** Adding custom row hover or focus paint around labels. **Instead:** Keep the full row clickable while Brick confines visual interaction feedback to the checkbox square.
+
+## Validation checklist
+
+- Inspect the group name, item labels and descriptions, unique values, repeated native form entries, required validity, reset, and disabled or read-only behavior.
+- Toggle Items and Parent with keyboard, pointer, and touch; verify none, mixed, and all states against the exact declared allValues set.
+- Check vertical and horizontal wrapping, long localized labels, 320 CSS pixels, 200% text, 400% zoom, RTL, dark appearance, and forced colors.
+- Confirm application-owned filtering, persistence, URL state, counts, and asynchronous results remain outside Checkbox Group.
+
+## Related guidance
+
+- `@flowstack-ui/atom/agents/checkbox-group`
+- `checkbox`
+- `fieldset`
+- `radio-group`
+- `toggle-group`
+- `select`
+- `combobox`
+- `form`
+
+## Machine record
+
+```json
+{
+  "schema": "flowstack.agent-component.v1",
+  "id": "checkbox-group",
+  "name": "Checkbox Group",
+  "package": "@flowstack-ui/brick",
+  "layer": "brick",
+  "kind": "component",
+  "purpose": "Coordinate related multi-selection with structured item labels, optional descriptions, native repeated form values, and an optional aggregate parent control.",
+  "useWhen": [
+    "Several independently selectable choices belong to one named group or need a select-all parent."
+  ],
+  "avoidWhen": [
+    {
+      "condition": "The choice is independent and does not share group state.",
+      "useInstead": "Checkbox"
+    },
+    {
+      "condition": "Exactly one option must be selected.",
+      "useInstead": "Radio Group or Select"
+    },
+    {
+      "condition": "The interface needs remote option loading, search, or a generated filter engine.",
+      "useInstead": "Combobox or application-owned discovery controls"
+    }
+  ],
+  "composition": [
+    "Give Root an accessible group name directly or compose it inside Fieldset with one visible Legend and shared description or error.",
+    "Compose Root with Item children; wrap each primary label in ItemLabel and supporting text in ItemDescription when structured item relationships are needed.",
+    "Use Parent only with an explicit allValues list containing the currently selectable declared values; omit individually disabled values and never infer the collection from rendered children."
+  ],
+  "rules": [
+    {
+      "id": "checkbox-group-related-choices",
+      "level": "must",
+      "statement": "Use Checkbox Group only for related multi-selection; keep one-of-many choice, independent consent, remote search, and application filter execution in their owning patterns."
+    },
+    {
+      "id": "checkbox-group-naming",
+      "level": "must",
+      "statement": "Give Root a persistent accessible group name and every Item a complete visible associated label; placeholder or surrounding layout does not name the group."
+    },
+    {
+      "id": "checkbox-group-value-identity",
+      "level": "must",
+      "statement": "Give every Item a unique stable string value and let the application own persistence, query synchronization, result counts, and filtering side effects."
+    },
+    {
+      "id": "checkbox-group-parent-values",
+      "level": "must",
+      "statement": "Supply Parent allValues explicitly from the selectable declared set and do not include disabled choices or derive the set from DOM children."
+    },
+    {
+      "id": "checkbox-group-orientation",
+      "level": "must",
+      "statement": "Use the vertical default for scan-heavy groups and horizontal only when wrapped reading order remains clear under narrow widths, zoom, and localization."
+    },
+    {
+      "id": "checkbox-group-invalid-scope",
+      "level": "must",
+      "statement": "Keep required or invalid messaging at group scope when any eligible option can satisfy the requirement; do not paint every Item as individually invalid."
+    },
+    {
+      "id": "checkbox-group-state-form",
+      "level": "must",
+      "statement": "Preserve disabled and read-only Items, one-or-more required validity, first-enabled validation focus, Fieldset relationships, named repeated-value submission, external form association, and uncontrolled reset."
+    },
+    {
+      "id": "checkbox-group-css",
+      "level": "must",
+      "statement": "Load styles.css or core.css plus checkbox-group.css and any Fieldset styles used."
+    }
+  ],
+  "commonMistakes": [
+    {
+      "mistake": "Building a filter facet with unrelated standalone checkboxes and no group name.",
+      "correction": "Use one named CheckboxGroup.Root with stable Item values and keep query execution in the application."
+    },
+    {
+      "mistake": "Using Parent without an explicit current selectable set.",
+      "correction": "Pass allValues deliberately so none, mixed, and all state remain deterministic."
+    },
+    {
+      "mistake": "Adding custom row hover or focus paint around labels.",
+      "correction": "Keep the full row clickable while Brick confines visual interaction feedback to the checkbox square."
+    }
+  ],
+  "validation": [
+    "Inspect the group name, item labels and descriptions, unique values, repeated native form entries, required validity, reset, and disabled or read-only behavior.",
+    "Toggle Items and Parent with keyboard, pointer, and touch; verify none, mixed, and all states against the exact declared allValues set.",
+    "Check vertical and horizontal wrapping, long localized labels, 320 CSS pixels, 200% text, 400% zoom, RTL, dark appearance, and forced colors.",
+    "Confirm application-owned filtering, persistence, URL state, counts, and asynchronous results remain outside Checkbox Group."
+  ],
+  "related": [
+    {
+      "kind": "package",
+      "package": "@flowstack-ui/atom",
+      "id": "checkbox-group",
+      "versionPolicy": "installed-exact"
+    },
+    "checkbox",
+    "fieldset",
+    "radio-group",
+    "toggle-group",
+    "select",
+    "combobox",
+    "form"
+  ]
+}
+```

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

@@ -0,0 +1,103 @@
+# Checkbox
+
+Source: @flowstack-ui/brick@0.1.11
+Kind: component
+ID: checkbox
+
+# Checkbox agent guide
+
+## Purpose
+
+Render a finished independent checked, unchecked, or mixed selection with Atom interaction and form behavior.
+
+## Use when
+
+- A user independently turns an option on or off, or an aggregate parent represents mixed child selection.
+
+## Choose something else when
+
+- Exactly one option must be selected from a set. Use RadioGroup.
+
+## Required composition
+
+- Compose Checkbox.Root with Checkbox.Indicator and a visible associated label, usually inside Field or Fieldset.
+
+## Rules
+
+- **MUST:** Give every checkbox a visible associated label unless context is genuinely redundant and an accessible name remains.
+- **MUST:** Load styles.css or core.css plus checkbox.css and any Field/Fieldset styles used.
+
+## Common mistakes
+
+- **Avoid:** Using Checkbox for a one-of-many choice. **Instead:** Use RadioGroup for mutually exclusive options.
+
+## Validation checklist
+
+- Toggle with Space, pointer, and touch.
+- Inspect checked/mixed and disabled states, label hit target, submitted value, focus, and contrast.
+
+## Related guidance
+
+- `@flowstack-ui/atom/agents/checkbox`
+- `field`
+- `fieldset`
+- `radio-group`
+
+## Machine record
+
+```json
+{
+  "schema": "flowstack.agent-component.v1",
+  "id": "checkbox",
+  "name": "Checkbox",
+  "package": "@flowstack-ui/brick",
+  "layer": "brick",
+  "kind": "component",
+  "purpose": "Render a finished independent checked, unchecked, or mixed selection with Atom interaction and form behavior.",
+  "useWhen": [
+    "A user independently turns an option on or off, or an aggregate parent represents mixed child selection."
+  ],
+  "avoidWhen": [
+    {
+      "condition": "Exactly one option must be selected from a set.",
+      "useInstead": "RadioGroup"
+    }
+  ],
+  "composition": [
+    "Compose Checkbox.Root with Checkbox.Indicator and a visible associated label, usually inside Field or Fieldset."
+  ],
+  "rules": [
+    {
+      "id": "checkbox-label",
+      "level": "must",
+      "statement": "Give every checkbox a visible associated label unless context is genuinely redundant and an accessible name remains."
+    },
+    {
+      "id": "checkbox-css",
+      "level": "must",
+      "statement": "Load styles.css or core.css plus checkbox.css and any Field/Fieldset styles used."
+    }
+  ],
+  "commonMistakes": [
+    {
+      "mistake": "Using Checkbox for a one-of-many choice.",
+      "correction": "Use RadioGroup for mutually exclusive options."
+    }
+  ],
+  "validation": [
+    "Toggle with Space, pointer, and touch.",
+    "Inspect checked/mixed and disabled states, label hit target, submitted value, focus, and contrast."
+  ],
+  "related": [
+    {
+      "kind": "package",
+      "package": "@flowstack-ui/atom",
+      "id": "checkbox",
+      "versionPolicy": "installed-exact"
+    },
+    "field",
+    "fieldset",
+    "radio-group"
+  ]
+}
+```

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

@@ -0,0 +1,128 @@
+# Chip
+
+Source: @flowstack-ui/brick@0.1.11
+Kind: component
+ID: chip
+
+# Chip agent guide
+
+## Purpose
+
+Present one compact authored or selected value with an optional, explicitly named remove action.
+
+## Use when
+
+- An applied filter, recipient, assignee, category, or other value already in application state needs compact presentation and may be removable.
+
+## Choose something else when
+
+- The content is passive metadata or status with no removal action. Use Badge.
+- The user is choosing or toggling a value rather than removing an existing one. Use Toggle, ToggleGroup, CheckboxGroup, or another matching selection control.
+
+## Required composition
+
+- Compose Root with Label and include RemoveTrigger only when the surrounding application can remove that value; give every RemoveTrigger a value-specific ariaLabel and onPress handler.
+
+## Rules
+
+- **MUST:** Keep Root noninteractive; RemoveTrigger is the only removal control, so clicking the label does not silently perform the action.
+- **MUST:** Name every RemoveTrigger with the value and action, such as ariaLabel="Remove Men filter"; never expose an unlabeled close icon.
+- **MUST:** Treat onPress as a removal request; the parent owns state mutation, URL synchronization, focus recovery, and announcements.
+- **MUST:** Keep the only removal action visible and operable at narrow widths, zoom, and increased text size.
+- **MUST:** Load styles.css or core.css plus chip.css.
+
+## Common mistakes
+
+- **Avoid:** Using one Button for the complete chip so selecting the label removes the value, or adding a decorative x with no accessible action name. **Instead:** Use passive Chip.Root and Chip.Label with a separately named Chip.RemoveTrigger.
+- **Avoid:** Using Chip as a complete editable token-entry system with automatic keyboard deletion and focus movement. **Instead:** Keep standalone Chip parent-controlled and use an Atom-backed collection owner when token-entry behavior is required.
+
+## Validation checklist
+
+- Check visible label, value-specific removal name, mouse and keyboard activation, disabled treatment, focus visibility, and parent-owned removal.
+- Check narrow widths, zoom, long labels, RTL, forced colors, touch targeting, and CSS delivery.
+
+## Related guidance
+
+- `badge`
+- `button`
+- `toggle`
+- `toggle-group`
+- `checkbox-group`
+
+## Machine record
+
+```json
+{
+  "schema": "flowstack.agent-component.v1",
+  "id": "chip",
+  "name": "Chip",
+  "package": "@flowstack-ui/brick",
+  "layer": "brick",
+  "kind": "component",
+  "purpose": "Present one compact authored or selected value with an optional, explicitly named remove action.",
+  "useWhen": [
+    "An applied filter, recipient, assignee, category, or other value already in application state needs compact presentation and may be removable."
+  ],
+  "avoidWhen": [
+    {
+      "condition": "The content is passive metadata or status with no removal action.",
+      "useInstead": "Badge"
+    },
+    {
+      "condition": "The user is choosing or toggling a value rather than removing an existing one.",
+      "useInstead": "Toggle, ToggleGroup, CheckboxGroup, or another matching selection control"
+    }
+  ],
+  "composition": [
+    "Compose Root with Label and include RemoveTrigger only when the surrounding application can remove that value; give every RemoveTrigger a value-specific ariaLabel and onPress handler."
+  ],
+  "rules": [
+    {
+      "id": "chip-root-passive",
+      "level": "must",
+      "statement": "Keep Root noninteractive; RemoveTrigger is the only removal control, so clicking the label does not silently perform the action."
+    },
+    {
+      "id": "chip-remove-name",
+      "level": "must",
+      "statement": "Name every RemoveTrigger with the value and action, such as ariaLabel=\"Remove Men filter\"; never expose an unlabeled close icon."
+    },
+    {
+      "id": "chip-state-owner",
+      "level": "must",
+      "statement": "Treat onPress as a removal request; the parent owns state mutation, URL synchronization, focus recovery, and announcements."
+    },
+    {
+      "id": "chip-responsive-removal",
+      "level": "must",
+      "statement": "Keep the only removal action visible and operable at narrow widths, zoom, and increased text size."
+    },
+    {
+      "id": "chip-css",
+      "level": "must",
+      "statement": "Load styles.css or core.css plus chip.css."
+    }
+  ],
+  "commonMistakes": [
+    {
+      "mistake": "Using one Button for the complete chip so selecting the label removes the value, or adding a decorative x with no accessible action name.",
+      "correction": "Use passive Chip.Root and Chip.Label with a separately named Chip.RemoveTrigger."
+    },
+    {
+      "mistake": "Using Chip as a complete editable token-entry system with automatic keyboard deletion and focus movement.",
+      "correction": "Keep standalone Chip parent-controlled and use an Atom-backed collection owner when token-entry behavior is required."
+    }
+  ],
+  "validation": [
+    "Check visible label, value-specific removal name, mouse and keyboard activation, disabled treatment, focus visibility, and parent-owned removal.",
+    "Check narrow widths, zoom, long labels, RTL, forced colors, touch targeting, and CSS delivery."
+  ],
+  "related": [
+    "badge",
+    "button",
+    "toggle",
+    "toggle-group",
+    "checkbox-group"
+  ]
+}
+```

package/public/packages/brick/0.1.11/components/code-block.txt

@@ -0,0 +1,134 @@
+# Code Block
+
+Source: @flowstack-ui/brick@0.1.11
+Kind: component
+ID: code-block
+
+# Code Block agent guide
+
+## Purpose
+
+Present preserved multi-line technical source with native scrolling, explicit metadata, optional copy behavior, and consumer-owned syntax highlighting.
+
+## Use when
+
+- Source examples, configuration, commands, generated markup, or other preserved multi-line technical content need a finished readable surface.
+
+## Choose something else when
+
+- A short technical literal belongs inside prose. Use Code.
+- The source must be edited, executed, or behave like a terminal. Use an application-owned editor, sandbox, or terminal.
+
+## Required 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.
+
+## 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:** 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:** 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.
+
+## 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.
+
+## Related guidance
+
+- `code`
+- `scroll-area`
+- `button`
+- `tabs`
+- `interface-composition`
+
+## Machine record
+
+```json
+{
+  "schema": "flowstack.agent-component.v1",
+  "id": "code-block",
+  "name": "Code Block",
+  "package": "@flowstack-ui/brick",
+  "layer": "brick",
+  "kind": "component",
+  "purpose": "Present preserved multi-line technical source with native scrolling, explicit metadata, optional copy behavior, and consumer-owned syntax highlighting.",
+  "useWhen": [
+    "Source examples, configuration, commands, generated markup, or other preserved multi-line technical content need a finished readable surface."
+  ],
+  "avoidWhen": [
+    {
+      "condition": "A short technical literal belongs inside prose.",
+      "useInstead": "Code"
+    },
+    {
+      "condition": "The source must be edited, executed, or behave like a terminal.",
+      "useInstead": "an application-owned editor, sandbox, or terminal"
+    }
+  ],
+  "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."
+  ],
+  "rules": [
+    {
+      "id": "code-block-copy-source",
+      "level": "must",
+      "statement": "Keep Root value authoritative and exactly aligned with rendered highlighted content so copy behavior never depends on rendered textContent."
+    },
+    {
+      "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."
+    },
+    {
+      "id": "code-block-scroll-owner",
+      "level": "must",
+      "statement": "Let Content own canonical pre, code, focus, and horizontal scrolling instead of rebuilding them with a separate ScrollArea or native pre element."
+    },
+    {
+      "id": "code-block-accessible-name",
+      "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-css",
+      "level": "must",
+      "statement": "Load styles.css or core.css plus code-block.css and its documented component dependencies."
+    }
+  ],
+  "commonMistakes": [
+    {
+      "mistake": "Rendering highlighted HTML with dangerouslySetInnerHTML, copying from token text, or nesting another pre and ScrollArea inside Content.",
+      "correction": "Render trusted React token spans, preserve the original string in Root value, and let Content own the canonical code viewport."
+    },
+    {
+      "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."
+    }
+  ],
+  "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."
+  ],
+  "related": [
+    "code",
+    "scroll-area",
+    "button",
+    "tabs",
+    "interface-composition"
+  ]
+}
+```

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

@@ -0,0 +1,120 @@
+# Code
+
+Source: @flowstack-ui/brick@0.1.11
+Kind: component
+ID: code
+
+# Code agent guide
+
+## Purpose
+
+Present a short inline technical literal with native code semantics and a finished Brick technical-text recipe.
+
+## Use when
+
+- A short identifier, attribute, command, filename, value, or API name belongs inside prose or a compact label.
+
+## Choose something else when
+
+- The source is multi-line, preserves whitespace, needs language metadata, or may scroll. Use Code Block.
+- The content represents keyboard input, computer output, a variable, editable source, or executable source. Use the correct native semantic element or an application-owned editor, terminal, or sandbox.
+
+## Required composition
+
+- Keep Code inside the surrounding Text or component content owner when the literal completes that sentence or label.
+- Choose subtle for an independently visible inline token and plain with tone inherit when the surrounding component already owns paint and foreground.
+
+## Rules
+
+- **MUST:** Use Code only for a short computer-code fragment and preserve its one native code host; do not select it merely to obtain monospace typography.
+- **MUST:** Keep Code inline with the prose or compact label it completes and use Code Block for multi-line or overflow-owned technical source.
+- **MUST:** Choose variant, tone, and size through the closed Code recipes before overriding public variables; use tone inherit when a parent intentionally owns foreground contrast.
+- **MUST:** Load styles.css or core.css plus code.css.
+
+## Common mistakes
+
+- **Avoid:** Using generic Text or a native span with monospace CSS for a real technical literal. **Instead:** Use Code so the literal keeps native code semantics and the shared Brick technical recipe.
+- **Avoid:** Putting a complete diff, command transcript, or configuration example inside Code. **Instead:** Use Code Block so preserved whitespace, naming, focus, and overflow have one explicit owner.
+
+## Validation checklist
+
+- Confirm one native code element, correct surrounding sentence flow, safe wrapping of long tokens, and no unintended block or scroll behavior.
+- Check inherited typography, subtle and plain recipes, light and dark appearances, forced colors, zoom, localization, RTL/bidi content, and CSS delivery.
+
+## Related guidance
+
+- `code-block`
+- `text`
+- `interface-composition`
+
+## Machine record
+
+```json
+{
+  "schema": "flowstack.agent-component.v1",
+  "id": "code",
+  "name": "Code",
+  "package": "@flowstack-ui/brick",
+  "layer": "brick",
+  "kind": "component",
+  "purpose": "Present a short inline technical literal with native code semantics and a finished Brick technical-text recipe.",
+  "useWhen": [
+    "A short identifier, attribute, command, filename, value, or API name belongs inside prose or a compact label."
+  ],
+  "avoidWhen": [
+    {
+      "condition": "The source is multi-line, preserves whitespace, needs language metadata, or may scroll.",
+      "useInstead": "Code Block"
+    },
+    {
+      "condition": "The content represents keyboard input, computer output, a variable, editable source, or executable source.",
+      "useInstead": "the correct native semantic element or an application-owned editor, terminal, or sandbox"
+    }
+  ],
+  "composition": [
+    "Keep Code inside the surrounding Text or component content owner when the literal completes that sentence or label.",
+    "Choose subtle for an independently visible inline token and plain with tone inherit when the surrounding component already owns paint and foreground."
+  ],
+  "rules": [
+    {
+      "id": "code-native-semantics",
+      "level": "must",
+      "statement": "Use Code only for a short computer-code fragment and preserve its one native code host; do not select it merely to obtain monospace typography."
+    },
+    {
+      "id": "code-inline-boundary",
+      "level": "must",
+      "statement": "Keep Code inline with the prose or compact label it completes and use Code Block for multi-line or overflow-owned technical source."
+    },
+    {
+      "id": "code-recipe-selection",
+      "level": "must",
+      "statement": "Choose variant, tone, and size through the closed Code recipes before overriding public variables; use tone inherit when a parent intentionally owns foreground contrast."
+    },
+    {
+      "id": "code-css",
+      "level": "must",
+      "statement": "Load styles.css or core.css plus code.css."
+    }
+  ],
+  "commonMistakes": [
+    {
+      "mistake": "Using generic Text or a native span with monospace CSS for a real technical literal.",
+      "correction": "Use Code so the literal keeps native code semantics and the shared Brick technical recipe."
+    },
+    {
+      "mistake": "Putting a complete diff, command transcript, or configuration example inside Code.",
+      "correction": "Use Code Block so preserved whitespace, naming, focus, and overflow have one explicit owner."
+    }
+  ],
+  "validation": [
+    "Confirm one native code element, correct surrounding sentence flow, safe wrapping of long tokens, and no unintended block or scroll behavior.",
+    "Check inherited typography, subtle and plain recipes, light and dark appearances, forced colors, zoom, localization, RTL/bidi content, and CSS delivery."
+  ],
+  "related": [
+    "code-block",
+    "text",
+    "interface-composition"
+  ]
+}
+```