{ "generatedAt": "2026-09-15T15:06:01.177Z", "count": 77, "components": [ { "name": "Accordion", "level": "organism", "category": "surface", "classification": "themed-mui", "description": "Expandable sections for progressive disclosure. Themed MUI Accordion.", "baseLibrary": "@mui/material", "muiEquivalent": "Accordion", "muiDocs": "https://mui.com/material-ui/react-accordion/", "a2uiEquivalent": "Accordion", "importPath": "@/organisms/Accordion", "optionalProps": [ "expanded", "defaultExpanded", "disabled", "onChange" ], "supportedStates": [ "collapsed", "expanded", "disabled" ], "designTokens": [ "colors", "radius", "typography" ], "accessibility": [ "Summary is a button controlling the region; keyboard operable." ], "usageExamples": [ "Evidence..." ], "rules": [ "Summary text is `Typography variant=\"subtitle1\"`; detail copy is `variant=\"body1\"`." ], "antiPatterns": [ "Do not hide critical content behind accordions by default." ], "mountsSurface": "inline", "llmSafe": true, "whenToUse": [ "Long detail pages, grouped settings" ], "whenNotToUse": [ "Primary navigation" ], "packageImport": "@aistrike-dev/ui" }, { "name": "Alert", "level": "molecule", "category": "feedback", "classification": "themed-mui", "description": "Inline contextual feedback message with severity. Themed MUI Alert.", "baseLibrary": "@mui/material", "muiEquivalent": "Alert", "muiDocs": "https://mui.com/material-ui/react-alert/", "a2uiEquivalent": "Alert", "importPath": "@/molecules/Alert", "optionalProps": [ "severity", "variant", "onClose", "icon", "action" ], "supportedStates": [ "success", "info", "warning", "error", "dismissible" ], "designTokens": [ "colors", "radius", "typography" ], "accessibility": [ "Alerts use role=\"alert\"; place near the related content." ], "usageExamples": [ "Could not load findingsThe scanner is unreachable." ], "rules": [ "Use `AlertTitle` for the heading (themed as subtitle2). The message body uses the Alert body1 slot — do not wrap it in another heading variant." ], "antiPatterns": [ "Do not use Alert for transient notifications (use Snackbar)." ], "llmSafe": true, "whenToUse": [ "Persistent inline status/validation messages" ], "whenNotToUse": [ "Auto-dismissing toasts (use Snackbar)" ], "packageImport": "@aistrike-dev/ui" }, { "name": "AlertsExample", "level": "page", "category": "example", "classification": "custom", "description": "Reference alerts feed page using the Alert molecule.", "baseLibrary": "custom", "importPath": "@/pages/AlertsExample", "supportedStates": [ "default" ], "designTokens": [ "colors" ], "usageExamples": [ "" ], "llmSafe": false, "whenToUse": [ "Reference for alert/notification feeds" ], "whenNotToUse": [ "Production without data wiring" ], "packageImport": "@aistrike-dev/ui" }, { "name": "AnalystMarkdown", "level": "organism", "category": "data-display", "classification": "custom", "description": "Renders an AI-written investigation summary, turning resolved entity values inside the prose into interactive chips an analyst can copy and pivot on. Ships from the @aistrike-dev/ui/markdown subpath so the markdown renderer stays out of the root bundle.", "baseLibrary": "react-markdown", "importPath": "@aistrike-dev/ui/markdown", "requiredProps": [ "source" ], "optionalProps": [ "entities", "aiGenerated", "maxMarkedPerBlock", "entityActions", "onEntityAction" ], "supportedStates": [ "default", "ai-generated", "entity-menu-open", "no-entities" ], "designTokens": [ "typography", "spacing", "colors" ], "accessibility": [ "Entity chips join the tab order in reading order, and each opens its menu with Enter or Space.", "Every entity has an accessible name carrying its kind, its full canonical value and its verdict, since the visible text may be truncated and the tint is not perceivable to everyone.", "A long summary is a lot of tab stops. Keep the marked-span cap low and treat a chip-dense paragraph as a content problem upstream rather than a navigation problem to work around." ], "usageExamples": [ "import { AnalystMarkdown } from '@aistrike-dev/ui/markdown';", "", "" ], "rules": [ "Import from `@aistrike-dev/ui/markdown`, never from the root entry; the root stays free of the markdown renderer.", "Supply `entities` as offsets into the exact `source` string you pass, produced by the model or the enrichment service.", "Mark only what an analyst can act on: network and file indicators, principals, and catalogue references. Not ordinary nouns, product names, times or counts.", "Pass the canonical full value as `value` and any shortened form as `display`, so a truncated hash still copies in full.", "Set `aiGenerated` for model-written content. One marker covers the block.", "Keep `maxMarkedPerBlock` at or below the default of 8. A summary genuinely dense with indicators wants a table underneath it, not more chips inside it.", "Put pivot and lookup actions in `entityActions`; keep response actions on the entity page." ], "antiPatterns": [ "Do not derive entity spans by pattern-matching the prose. A pattern for IP addresses also matches a version number, and a hash pattern matches any long hex string; every false positive attaches a menu to something with no entity behind it.", "Do not attach a verdict to a value that was not resolved; that is a fabricated claim.", "Do not compute offsets against rendered text. Emphasis markers, links and escapes shift the indices and silently attach entities to the wrong words.", "Do not add rehype-raw or any raw-HTML plugin. The input is model output, and parsing HTML in it would make this component an XSS sink.", "Do not put an AI marker on every chip; mark the generated block once.", "Do not use this for prose the product wrote itself; plain Typography is lighter and needs no renderer." ], "llmSafe": true, "whenToUse": [ "AI-generated investigation or alert summaries where analysts need to act on the values", "Any model output whose entities have already been resolved to structured spans" ], "whenNotToUse": [ "Static product copy (use Typography)", "Untrusted markdown with no entity resolution (there is nothing to gain over Typography)", "Code display (use CodeEditor from @aistrike-dev/ui/monaco)" ], "packageImport": "@aistrike-dev/ui" }, { "name": "AppBar", "level": "organism", "category": "navigation", "classification": "mui-overrides", "description": "Top application bar for branding, search and global actions. Themed MUI AppBar.", "baseLibrary": "@mui/material", "muiEquivalent": "AppBar", "muiDocs": "https://mui.com/material-ui/react-app-bar/", "a2uiEquivalent": "Header", "importPath": "@/organisms/AppBar", "optionalProps": [ "position", "color", "elevation" ], "supportedStates": [ "static", "sticky", "fixed" ], "designTokens": [ "colors", "shadows", "typography" ], "accessibility": [ "Use a single banner landmark; provide aria-labels for icon buttons." ], "usageExamples": [ "Octopus" ], "rules": [ "The product name in the bar is `Typography variant=\"h6\"` (or subtitle1 on a compact bar)." ], "antiPatterns": [ "Do not stuff primary navigation into the AppBar (use LeftNavigation)." ], "llmSafe": true, "whenToUse": [ "Global top bar", "Branding + search + user menu" ], "whenNotToUse": [ "Section headers (use Typography/Toolbar)" ], "packageImport": "@aistrike-dev/ui" }, { "name": "AttackPathLegend", "level": "organism", "category": "data-display", "classification": "custom", "description": "Legend mapping attack-path node types to their stroke/fill colors, from design tokens.", "baseLibrary": "custom", "a2uiEquivalent": "Legend", "importPath": "@/organisms/AttackPathLegend", "optionalProps": [ "types", "orientation" ], "supportedStates": [ "horizontal", "vertical" ], "designTokens": [ "attackPath", "typography" ], "accessibility": [ "Rendered as a labelled list; swatches are aria-hidden with text labels." ], "usageExamples": [ "", "" ], "antiPatterns": [ "Do not hardcode attack-path colors; always source from tokens." ], "llmSafe": true, "whenToUse": [ "Alongside attack-path graphs/diagrams", "Investigation layouts" ], "whenNotToUse": [ "Generic status legends (use Chips)" ], "figma": "https://www.figma.com/design/LJdrBxmaROpXg0hLW3GKe6/AiStrike-Complete-Design-System?node-id=23-476", "packageImport": "@aistrike-dev/ui" }, { "name": "Autocomplete", "level": "molecule", "category": "input", "classification": "themed-mui", "description": "Searchable combobox for selecting from many options. Themed MUI Autocomplete.", "baseLibrary": "@mui/material", "muiEquivalent": "Autocomplete", "muiDocs": "https://mui.com/material-ui/react-autocomplete/", "a2uiEquivalent": "Combobox", "importPath": "@/molecules/Autocomplete", "requiredProps": [ "options", "renderInput" ], "optionalProps": [ "multiple", "value", "onChange", "freeSolo", "groupBy", "loading", "disabled" ], "supportedStates": [ "default", "open", "loading", "multiple", "disabled" ], "designTokens": [ "colors", "radius" ], "accessibility": [ "Renders an ARIA combobox; ensure renderInput uses a labeled TextField." ], "usageExamples": [ " } />" ], "antiPatterns": [ "Do not use for very small static lists (use Select/Radio)." ], "llmSafe": true, "whenToUse": [ "Searchable selection, tagging, async options" ], "whenNotToUse": [ "Few fixed options" ], "packageImport": "@aistrike-dev/ui" }, { "name": "Avatar", "level": "atom", "category": "data-display", "classification": "themed-mui", "description": "Represents a user or entity via image, initials or icon. Themed MUI Avatar.", "baseLibrary": "@mui/material", "muiEquivalent": "Avatar", "muiDocs": "https://mui.com/material-ui/react-avatar/", "a2uiEquivalent": "Avatar", "importPath": "@/atoms/Avatar", "optionalProps": [ "src", "alt", "variant", "children", "sx" ], "supportedStates": [ "image", "initials", "icon", "fallback" ], "designTokens": [ "colors", "radius" ], "accessibility": [ "Always set alt for image avatars; initials should reflect the entity name." ], "usageExamples": [ "", "JS" ], "rules": [ "An avatar is a neutral control fill two rungs above its host, carrying primary text. It reads its own colour from the surface it is on, so there is nothing to pass in.", "Two rungs, not one, because one rung up is what a nested card takes - an avatar there would read as a small panel rather than as an identity mark.", "If you override bgcolor with a saturated colour, set color as well. The default ink is light, and light ink on brand teal is 1.89:1. Pair the fill with its own contrastText." ], "antiPatterns": [ "Do not omit alt on image avatars.", "Do not set bgcolor from the brand to make an avatar stand out. Brand marks the primary action and the current selection; an identity mark is neither." ], "llmSafe": true, "whenToUse": [ "Showing user/entity identity" ], "whenNotToUse": [ "Decorative icons (use Icon)" ], "packageImport": "@aistrike-dev/ui" }, { "name": "Badge", "level": "atom", "category": "data-display", "classification": "themed-mui", "description": "Small count or status indicator anchored to another element. Themed MUI Badge.", "baseLibrary": "@mui/material", "muiEquivalent": "Badge", "muiDocs": "https://mui.com/material-ui/react-badge/", "a2uiEquivalent": "Badge", "importPath": "@/atoms/Badge", "optionalProps": [ "badgeContent", "color", "variant", "max", "showZero", "overlap" ], "supportedStates": [ "count", "dot", "zero", "max" ], "designTokens": [ "colors" ], "accessibility": [ "Ensure the count is conveyed to screen readers via the wrapped control label." ], "usageExamples": [ "" ], "antiPatterns": [ "Do not place long text in a Badge (use Chip)." ], "llmSafe": true, "whenToUse": [ "Unread counts, notification dots, status" ], "whenNotToUse": [ "Standalone labels (use Chip)" ], "packageImport": "@aistrike-dev/ui" }, { "name": "Breadcrumbs", "level": "molecule", "category": "navigation", "classification": "themed-mui", "description": "Shows the user location within a hierarchy. Themed MUI Breadcrumbs.", "baseLibrary": "@mui/material", "muiEquivalent": "Breadcrumbs", "muiDocs": "https://mui.com/material-ui/react-breadcrumbs/", "a2uiEquivalent": "Breadcrumbs", "importPath": "@/molecules/Breadcrumbs", "optionalProps": [ "separator", "maxItems" ], "supportedStates": [ "default", "collapsed" ], "designTokens": [ "colors", "typography" ], "accessibility": [ "Set aria-label=\"breadcrumb\"; mark the current page as Typography (not a link) so it is not announced as a destination." ], "usageExamples": [ "AssetsFinding 4821" ], "rules": [ "The current page is `Typography variant=\"body1\"`, never a `Link`." ], "antiPatterns": [ "Do not use for primary navigation." ], "llmSafe": true, "whenToUse": [ "Deep hierarchical pages (detail views)" ], "whenNotToUse": [ "Flat apps with shallow navigation" ], "packageImport": "@aistrike-dev/ui" }, { "name": "Button", "level": "atom", "category": "input", "classification": "mui-overrides", "description": "Primary interactive control for actions. Themed MUI Button with an emphasis ladder of variants: `primary` (one per view), `secondary` (default), `ghost`, and `destructive`.", "baseLibrary": "@mui/material", "muiEquivalent": "Button", "muiDocs": "https://mui.com/material-ui/react-button/", "a2uiEquivalent": "Button", "importPath": "@/atoms/Button", "requiredProps": [], "optionalProps": [ "variant", "size", "startIcon", "endIcon", "disabled", "onClick" ], "props": [ { "name": "variant", "type": "'primary' | 'secondary' | 'ghost' | 'destructive'", "default": "secondary" }, { "name": "size", "type": "'small' | 'medium' | 'large'", "default": "medium" }, { "name": "disabled", "type": "boolean", "default": "false" }, { "name": "onClick", "type": "(e: MouseEvent) => void" } ], "customVariants": [ "primary", "secondary", "ghost", "destructive" ], "supportedStates": [ "default", "hover", "focus", "active", "disabled" ], "designTokens": [ "colors", "radius", "typography", "controlHeights" ], "accessibility": [ "Renders a native ", "" ], "rules": [ "Every action control is the design-system Button; never a raw " ], "antiPatterns": [ "Do not use for mutually-exclusive selection (use ToggleButtonGroup)." ], "llmSafe": true, "whenToUse": [ "Related action clusters" ], "whenNotToUse": [ "Single selection toggles" ], "packageImport": "@aistrike-dev/ui" }, { "name": "Card", "level": "organism", "category": "surface", "classification": "mui-overrides", "description": "Bordered surface grouping related content. Default is themed MUI Card; variant=\"info\" is a static summary card (32px vertical / 24px horizontal padding) and variant=\"data\" is a collapsible card for text, tables or lists. Use CardDataTag for inline entity pills.", "baseLibrary": "@mui/material", "muiEquivalent": "Card", "muiDocs": "https://mui.com/material-ui/react-card/", "a2uiEquivalent": "Card", "importPath": "@/organisms/Card", "optionalProps": [ "elevation", "variant", "title", "emptyText", "defaultExpanded", "expanded", "onChange" ], "customVariants": [ "info", "data" ], "supportedStates": [ "default", "hover", "selected", "expanded", "collapsed", "empty" ], "designTokens": [ "colors", "radius", "shadows", "spacing", "typography" ], "accessibility": [ "Use semantic headings inside CardHeader; make whole-card click targets accessible.", "The data variant header is a button with aria-expanded." ], "usageExamples": [ "...", "...10.0.0.42", "" ], "rules": [ "CardHeader title is subtitle1 and the subheader is body1 (theme defaults). Body copy is `Typography variant=\"body1\"`.", "Info/data titles are subtitle1; the body slot applies body1 via `sx.typography` so tables are not wrapped in a `

`.", "A card is separated from its host by the tonal step of the surface ladder, not by a border. It takes the next rung up from whatever contains it, so it does not need to be told which background to use.", "A card opens a surface scope at that next rung, so nested tables inherit widget header fills and row separators rather than the page's. Put a table inside a data card with `bordered={false} surface=\"transparent\"`." ], "antiPatterns": [ "Do not put a card inside a card inside a card. Three levels of containment is the ceiling; a fourth paints identically to the third and logs an error, so the nesting buys nothing. If you need a fourth, flatten the structure or move the deepest content to its own route.", "Do not add a border to a card. The tonal step already separates it, and a border on top of it reads as a second, competing edge.", "Do not use variant=\"info\" for collapsible sections (use variant=\"data\")." ], "mountsSurface": "inline", "llmSafe": true, "whenToUse": [ "Summaries, entity tiles, dashboards", "Investigation overviews (info)", "Optional detail sections (data)" ], "whenNotToUse": [ "Full-page layout (use templates)" ], "packageImport": "@aistrike-dev/ui" }, { "name": "Chart", "level": "organism", "category": "data-display", "classification": "third-party-wrapper", "description": "Config-driven chart. Accepts a serialisable ChartConfig so user-built dashboards can persist and replay a chart definition. Typed per-type components (BarChart, LineChart, PieChart, ScatterChart, HeatmapChart, SankeyChart) are thin adapters over this.", "baseLibrary": "echarts", "importPath": "@/charts", "packageImport": "@aistrike-dev/ui/charts", "requiredProps": [ "config", "data" ], "optionalProps": [ "mode", "media", "height", "state", "onPointClick", "transformOption", "label", "decals" ], "customVariants": [ "screen", "export" ], "supportedStates": [ "default", "loading", "empty", "error" ], "designTokens": [ "chart", "severity" ], "accessibility": [ "ECharts aria description is enabled, giving screen readers a text equivalent of the plot.", "Decal textures are available via `decals` for a secondary encoding beyond hue, but are off by default — hue alone carries series identity unless enabled.", "A legend appears automatically for two or more series; a single series is named by the title instead." ], "usageExamples": [ "", "" ], "antiPatterns": [ "Do not use severity colours as a series palette — severity encodes status, not identity.", "Do not exceed three series in scatter or bubble forms; fold the tail into \"Other\" or facet.", "Never render two measures of different scale on two y-axes; use two charts or index to a common base." ], "llmSafe": true, "whenToUse": [ "Any multi-point data visualisation, on screen or in an exported report" ], "whenNotToUse": [ "A single headline number (use StatTile)", "A row-level trend (use Sparkline)", "A tabular result set (use the Table organism)" ] }, { "name": "Checkbox", "level": "atom", "category": "input", "classification": "themed-mui", "description": "Boolean / multi-select control. Themed MUI Checkbox.", "baseLibrary": "@mui/material", "muiEquivalent": "Checkbox", "muiDocs": "https://mui.com/material-ui/react-checkbox/", "a2uiEquivalent": "Checkbox", "importPath": "@/atoms/Checkbox", "optionalProps": [ "checked", "defaultChecked", "indeterminate", "disabled", "size", "onChange" ], "supportedStates": [ "default", "checked", "indeterminate", "disabled", "focus" ], "designTokens": [ "colors" ], "accessibility": [ "Wrap with FormControlLabel to provide an accessible label.", "Keyboard: Space toggles. Group related checkboxes in a FormGroup." ], "usageExamples": [ "} label=\"Enable\" />" ], "antiPatterns": [ "Do not use a single Checkbox where a Switch (on/off setting) is more appropriate." ], "llmSafe": true, "whenToUse": [ "Selecting multiple options", "Opt-in / consent toggles in forms" ], "whenNotToUse": [ "Mutually exclusive choices (use Radio)" ], "packageImport": "@aistrike-dev/ui" }, { "name": "Chip", "level": "atom", "category": "data-display", "classification": "mui-overrides", "description": "The single compact-label primitive: severity, status, category, metric, lifecycle, filter, select, entity, overflow and picker. Pick a `purpose` from meaning and the appearance, rendered semantics and keyboard contract are derived from it. The older variant/color API still works but is deprecated.", "baseLibrary": "@mui/material", "muiEquivalent": "Chip", "muiDocs": "https://mui.com/material-ui/react-chip/", "a2uiEquivalent": "Badge", "importPath": "@/atoms/Chip", "requiredProps": [ "purpose" ], "optionalProps": [ "size", "icon", "disabled" ], "customVariants": [ "subtle", "dot" ], "supportedStates": [ "static", "clickable", "removable", "selected", "expanded", "disabled" ], "designTokens": [ "colors", "severity", "status", "radius", "typography", "sizes" ], "accessibility": [ "Static purposes (severity, status, category, metric, lifecycle) render no tab stop and no click handler.", "Interactive purposes carry the right ARIA state automatically: select sets aria-pressed (including inside an exclusive group — exclusivity is parent state, not a radio), entity sets aria-haspopup, overflow sets aria-expanded, picker sets aria-haspopup=\"dialog\" plus aria-expanded.", "Filter chips are removed by pointer on the delete icon or by Backspace/Delete on the focused chip, which is MUI behaviour; the chip is named as a filter so the target is unambiguous. A picker chip removes the same way — its X removes the whole filter rather than emptying it.", "The delete X keeps a pointer target larger than the glyph it draws — 24px against the 16px medium glyph, meeting WCAG 2.5.8, and the same 24px at `large` and `extraLarge`. At `size=\"small\"` it is ~21px, which is as much as a 22px pill can hold. The glyph is not separately focusable, so clicking it is the only pointer route to removing a chip.", "Entity chips put the full canonical value and the verdict in the accessible name, because the visible text may be truncated and the tint is not perceivable to everyone.", "Picker chips spell the whole selection out in the accessible name, because the visible text shows only the first value and counts the rest. Past five it counts the remainder rather than reciting them.", "Never encode meaning through colour alone — every purpose renders a visible text label." ], "usageExamples": [ "", "", "", "", "", "", "", " on && setSource(\"EDR\")} />", "", "", "" ], "rules": [ "Every tag, filter, status and risk pill is the design-system Chip. Pick `purpose` from what the value means, never from how it should look.", "`purpose=\"severity\"` for risk. Pass `level` from critical|high|medium|low|info|untriaged; the canonical word is derived, so do not also pass a label.", "`purpose=\"status\"` for workflow or health state. Pass a semantic `tone` plus the product word as `label`, e.g. tone=\"warning\" label=\"Investigating\".", "`purpose=\"category\"` for classification metadata: MITRE tactics, data sources, environments, asset classes. Always neutral, because colour is reserved for severity.", "`purpose=\"metric\"` for a measured value such as `PDF 262 KB` or `12 related`. Use this rather than Badge when nothing anchors the count.", "`purpose=\"lifecycle\"` for how mature a feature is: pass `stage` from new|beta|alpha|preview|deprecated and the word is derived. This is the one chip that carries the brand accent, on the outline rather than a fill, so a release marker is never mistaken for a data pill.", "A lifecycle chip marks the product surface — a nav item, a page title, a settings row — so put one on the name of the thing that is new, and only one. If a user could filter a list by the word, it is data about a record and belongs in `purpose=\"category\"`: `Built-in` on a workflow row is a property of that workflow, not a release stage.", "`purpose=\"filter\"` for an applied criterion. `onRemove` is required, and `field` keeps the criterion readable out of context.", "`purpose=\"select\"` for a toggleable option. `selected` and `onToggle` are both required so the state is always controlled. Each chip toggles itself — clicking it does not change its neighbours. For a mutually exclusive group, keep one selected value in the parent and pass `selected={value === option}` / `onToggle={(on) => on && setValue(option)}`; the chip does not own exclusivity.", "`purpose=\"entity\"` for an entity value in prose or a dense cell. It renders monospace at the surrounding text size and opens a detail menu via `onOpen`.", "`purpose=\"overflow\"` is the `+N more` disclosure for a capped group — prefer ChipGroup, which manages it for you.", "`purpose=\"picker\"` is the trigger for a multi-select filter panel — prefer FilterMenu, which owns the chip, the panel and the open state. Reach for the bare chip only when you are supplying your own surface.", "A picker chip is the one chip that both shows a value and changes it, and the exception is narrow: it changes which values are filtered on, never the record underneath. Pass `values` as the labels a user reads, not raw option values.", "Every neutral pill — `category`, `metric`, `filter`, `picker` and `overflow` — shares the chrome of an outlined TextField: a quiet fill inside a quiet border, from the same `inputColors` tokens as the inputs and the secondary Button. A filter bar is a row of form controls, so its pills should sit at the same visual level as the controls beside them rather than compete with the severity chips in the table below.", "Interactivity is carried by the affordance, not the outline: an X on `filter`, a chevron on `picker`, `+N more` on `overflow`, plus the focus ring and hover response. Do not read border weight as \"clickable\" — most neutral pills draw one either way.", "`filter` and `picker` render the field name in muted ink and the value promoted, so two chips in a bar differ where they actually differ. Pass `field` on a filter chip to get it; without one, the whole label is treated as the value.", "Use `size=\"small\"` (22px) in tables and dense cells. Default `medium` (28px) matches Button `small`; `large` (36px) matches Button `medium`; `extraLarge` (44px) matches Button `large`. Same size name on Chip vs Button does not mean the same height. `purpose=\"entity\"` does not accept `size` — change the surrounding Typography instead.", "Badge is only a count or dot anchored to another element; a standalone pill is always a Chip.", "Inside a Table, workflow state is TableStatusCell rather than purpose=\"status\" — a row already carries enough pill shapes." ], "antiPatterns": [ "Do not pass `variant` or `color`; they are the deprecated API and warn in development. Use `purpose`.", "Do not pass Chip `size=\"small\"` next to Button `size=\"small\"` expecting them to line up — Chip `small` is the 22px table rung; use Chip `medium` beside Button `small`.", "Do not import Chip from @mui/material; import { Chip } from '@aistrike-dev/ui'.", "Do not hand-roll pill or tag elements from span/div/Box; use Chip.", "Do not hardcode severity hex values; pass `level`.", "Do not set `fontSize` on an icon passed to `icon`, and do not pre-size the SVG. The theme scales every glyph in a chip — leading icon, delete X, picker chevron — to a fixed ratio of that chip's label, so it stays right at every size and inside an entity chip that sizes itself to the surrounding prose. A fixed px value is what made these render at 24px against a 12px label.", "Do not use the severity scale for verdict, confidence, health or chart series.", "Do not colour-code categories; colour is committed to severity.", "Do not use a Chip as an action trigger; use Button. A chip carries a value — `Isolate host` is a verb and belongs on a Button.", "Do not put an interactive purpose inside a MenuItem, a table row link or any other click target.", "Do not wire select chips so that clicking one inverts a shared boolean across the group. That only works for two options and breaks as soon as a third appears. Exclusive grouping is one parent value, each chip reflecting whether it is that value.", "Do not give one chip two functions, with the single exception of `purpose=\"picker\"`, where the body opens the panel and the X removes the filter. Both operate on the same filter, and the pattern is worth the second target only there — anywhere else, a body that edits beside a corner that removes is two controls wearing one pill.", "Do not make the X on a picker chip clear the selection instead of removing the filter. It is the same glyph in the same corner as on `purpose=\"filter\"`, so it has to mean the same thing; emptying the selection while keeping the field is the panel's `Reset`.", "Do not pass `onRemove` unless the user can add the filter back, through an `Add filter` menu or similar. A removable chip with no way to return it is a dead end — for a bar of fixed fields, omit it and let `Reset` empty the selection.", "Do not use a picker chip to change a record. Picking which severities a table shows is a filter; setting an alert to `Contained` is a Menu behind a Button.", "Do not leave a lifecycle chip on a feature after it ships; a permanent `New` marker teaches users to ignore the treatment. Removing it is part of the launch, not a follow-up.", "Do not invent stage words by passing `label` for something outside the vocabulary — \"Coming soon\" is a roadmap claim, not a state the UI is in.", "Do not put a lifecycle chip on a record, a row of data or a chart series; it describes the product, not the content." ], "llmSafe": true, "whenToUse": [ "Severity and risk labels", "Workflow and health status", "Category and classification metadata", "Applied filters and toggleable options", "A filter bar where each field is a chip that opens its own value panel (via FilterMenu)", "Entity values inside prose", "Release stage markers on features (New, Beta, Deprecated)" ], "whenNotToUse": [ "Primary actions (use Button)", "Changing a status in place (use a Menu-backed trigger, not a Chip)", "Notification counts anchored to an icon (use Badge)", "Long technical identifiers outside the entity purpose (use monospace Typography)", "Several filter fields committed together (use FilterPopover)" ], "packageImport": "@aistrike-dev/ui" }, { "name": "ChipGroup", "level": "molecule", "category": "data-display", "classification": "custom", "description": "Layout and overflow for a collection of Chips. Wraps on the 8px grid, caps the visible count and discloses the remainder through a single `+N more` control.", "baseLibrary": "react", "importPath": "@/molecules/ChipGroup", "requiredProps": [ "children" ], "optionalProps": [ "max", "spacing", "noWrap", "onOverflow", "label", "size" ], "supportedStates": [ "default", "capped", "expanded" ], "designTokens": [ "spacing" ], "accessibility": [ "Pass `label` to expose the group as a named `group` landmark; without it the group is presentational.", "The overflow control is a button carrying aria-expanded, so keyboard users can reveal the remainder." ], "usageExamples": [ "{items.map((t) => )}", "{chips}" ], "rules": [ "Use ChipGroup whenever more than two chips sit together; it owns the spacing so children never set their own margins.", "Set `max` in tables and dense cells so a long list cannot change row height; leave it unset in detail views where wrapping is fine.", "Keep groups to six chips on one line, and wrapping to at most five lines. Past that use a multi-select or a table instead.", "Pass `onOverflow` when the remainder belongs in a popover or detail view; the default expands in place.", "Give the group a `label` when the chips share a dimension, so assistive technology can announce what the collection is.", "Pass `size` so the overflow `+N more` chip matches the group. Children keep their own `size` — set the same value on both.", "A ChipGroup of `purpose=\"select\"` chips is layout, not a selection model. Each child stays independently controlled; exclusive grouping lives in the parent." ], "antiPatterns": [ "Do not set margins on the chips themselves; the group owns spacing via `gap`.", "Do not mix chip purposes in one group — severity beside category reads as one dimension.", "Do not render your own `+N more` element; use `max` so the count and the aria-expanded state stay correct." ], "llmSafe": true, "whenToUse": [ "Collections of tags, techniques, data sources, applied filters, or toggleable options" ], "whenNotToUse": [ "A single chip (render it directly)", "Selecting from many options (use Autocomplete or FilterPanel)" ], "packageImport": "@aistrike-dev/ui" }, { "name": "CodeEditor", "level": "organism", "category": "input", "classification": "third-party-wrapper", "description": "Monaco-backed code editor. Loads only the languages and features the caller names. Published at the separate `@aistrike-dev/ui/monaco` entry.", "baseLibrary": "monaco-editor", "importPath": "@/monaco", "packageImport": "@aistrike-dev/ui/monaco", "requiredProps": [ "value", "ariaLabel" ], "optionalProps": [ "onChange", "language", "languages", "features", "readOnly", "height", "showTabFocusHint", "options", "onMount", "loadingFallback", "onLoadError" ], "supportedStates": [ "loading", "ready", "readOnly", "error" ], "designTokens": [ "colors", "typography" ], "accessibility": [ "`ariaLabel` is required — Monaco exposes a bare textarea to assistive technology.", "Tab inserts a tab character. Ctrl+M (Ctrl+Shift+M on macOS) toggles tab-focus mode so Tab releases focus instead (WCAG 2.1.2). It works out of the box; `showTabFocusHint` opts into advertising it on screen, and is off by default." ], "usageExamples": [ "", " import(\"@aistrike/fsl-monaco\") }]} ariaLabel=\"FSL query\" />" ], "antiPatterns": [ "Do not import from `@aistrike-dev/ui` — the editor lives at `@aistrike-dev/ui/monaco`.", "Do not import `monaco-editor` bare; that loads every bundled language.", "Do not call `monaco.editor.defineTheme` — the editor uses Monaco's built-in `vs`/`vs-dark`, and the theme service is page-global, so redefining it restyles every editor on the page.", "Do not re-enable Monaco's EditContext mode via `options={{ editContext: true }}` — the editor keeps its `