@mtdt/observeops-ds-spec 0.1.0

package/components/index.json

@@ -0,0 +1,1270 @@
+{
+  "$description": "Machine index of the ObserveOps design system — load FIRST.",
+  "$contract": "../AGENTS.md — the AI Operating Contract. READ BEFORE BUILDING: use only catalogued components, resolve every colour to a token, compose pages from recipes/layout, and STOP-and-ASK before using anything not in this DS. This index is step 1 of that contract.",
+  "$howToUse": [
+    "1. Find by need (family/category/selectHint/summary or scan variants).",
+    "2. Open `registry` (machine spec) + `spec` (prose).",
+    "3. Resolve --var in tokensUsed via tokens/variables.json (LESS @vars: tokens/structural.json).",
+    "4. `storybook` = live demo; `selectHint` = one-line use-when.",
+    "5. To lay out a PAGE (not just a component): load `layout.spec` (layout/layouts.json) — shells (4 route + 2 content), screenRegions, contentLayouts (6), panels (10), pageTemplates (7, each → a recipe). Region→component blueprints are in `recipes` (recipes.json). `layout.grid` = the 12-col grid. `layout.coverage` (foundation/) = which product pages use each.",
+    "6. Styling a NEW element that isn't a catalogued component? DON'T hardcode colours — pick the token by PURPOSE in `tokens.purposeMap` (tokens/purpose-map.json): surface/text/border/brand/status/severity/shadow → token (+ light/dark), plus the structural spacing/sizing/radius/type scale."
+  ],
+  "tokens": {
+    "crosswalk": "tokens/variables.json",
+    "structural": "tokens/structural.json",
+    "kitAccents": "tokens/kit-accents.json",
+    "purposeMap": "tokens/purpose-map.json",
+    "drift": "--primary = navy #111c2c, NOT cyan",
+    "$use": "RESOLVE + EMIT runtime CSS vars: component tokensUsed -> tokens/variables.json (336 --vars, light/dark) + structural.json (LESS @vars: spacing/sizing/type) + kit-accents.json (@primary-color). This is the LIVE product token layer — use it.",
+    "$future": "tokens/{primitive,semantic.light,semantic.dark,component}.json define a FUTURE portable DTCG system (mds-* names). It is NOT yet wired to components or the running product — do NOT emit mds-* tokens for live output. Use --vars (variables.json) today."
+  },
+  "schema": "components/registry/_schema.json",
+  "recipes": "components/recipes/recipes.json",
+  "layout": {
+    "grid": "layout/grid.json",
+    "spec": "layout/layouts.json",
+    "coverage": "foundation/",
+    "$note": "The structural layer — the 12-col grid (MRow/MCol) + app shell, layout shells, screen regions & panel behaviours (layout/layouts.json; Storybook: Foundations/Layout/*). foundation/*.md = a page-by-page PRODUCT coverage sweep per element (which pages/flows use each variant + findings + best practices)."
+  },
+  "counts": {
+    "components": 26,
+    "families": 15,
+    "coverage": {
+      "props": 19,
+      "apis": 8,
+      "states": 26,
+      "sizes": 8,
+      "variants": 23,
+      "a11y": 26
+    }
+  },
+  "families": {
+    "Button": [
+      "button"
+    ],
+    "Date & Time Pickers": [
+      "date-time-pickers"
+    ],
+    "Filters": [
+      "filters"
+    ],
+    "Form Controls": [
+      "dropdown-picker",
+      "form-item",
+      "input",
+      "select"
+    ],
+    "Link": [
+      "link"
+    ],
+    "Menu": [
+      "menu"
+    ],
+    "Navigation": [
+      "navigation"
+    ],
+    "Overlay": [
+      "drawer",
+      "modal"
+    ],
+    "Popover & Tooltip": [
+      "data-viz-tooltips",
+      "popover",
+      "tooltip"
+    ],
+    "Scheduler": [
+      "scheduler"
+    ],
+    "Selection Controls": [
+      "checkbox",
+      "radio",
+      "switch"
+    ],
+    "Table": [
+      "table"
+    ],
+    "Tabs": [
+      "tabs"
+    ],
+    "Tag": [
+      "loose-tags",
+      "severity",
+      "tag",
+      "tags-list"
+    ],
+    "Toolbars": [
+      "toolbars"
+    ]
+  },
+  "components": [
+    {
+      "id": "button",
+      "display": "Button",
+      "tier": "atom",
+      "family": "Button",
+      "category": null,
+      "status": "core",
+      "summary": "Primary action control. Triggers an operation or navigation.",
+      "selectHint": "Navigates (route/URL/anchor)? -> link (FlotoLink), not a button.",
+      "variants": [
+        "primary",
+        "primary-alt",
+        "default",
+        "neutral-lighter",
+        "neutral-lightest",
+        "transparent",
+        "error",
+        "success",
+        "danger",
+        "icon-circle",
+        "squared-button",
+        "shape=circle",
+        "class=squared-button",
+        "contextual"
+      ],
+      "registry": "components/registry/button.json",
+      "spec": "components/specs/button.md",
+      "storybook": "Atoms/Button",
+      "related": [
+        "MConfirmBtn",
+        "MDropdown",
+        "FlotoGridActions",
+        "FlotoLink (link button, 67x)",
+        "MRadioGroup as-button (segmented control, 255x)"
+      ],
+      "knownIssueCount": 7,
+      "tokenCount": 4,
+      "has": {
+        "props": true,
+        "states": true,
+        "sizes": true,
+        "variants": true,
+        "decisionFlow": true,
+        "do": true,
+        "dont": true,
+        "tokensUsed": true,
+        "apis": false,
+        "a11y": true
+      }
+    },
+    {
+      "id": "checkbox",
+      "display": "Checkbox",
+      "tier": "atom",
+      "family": "Selection Controls",
+      "category": null,
+      "status": "core",
+      "summary": "Single boolean toggle, usually with a label. Functional, fully-controlled.",
+      "selectHint": "Mutually-exclusive (pick one)? -> MRadio.",
+      "variants": [],
+      "registry": "components/registry/checkbox.json",
+      "spec": "components/specs/checkbox.md",
+      "storybook": "Atoms/Checkbox",
+      "related": [
+        "MRadio",
+        "MSwitch",
+        "MCheckboxGroup (unused)"
+      ],
+      "knownIssueCount": 6,
+      "tokenCount": 4,
+      "has": {
+        "props": true,
+        "states": true,
+        "sizes": true,
+        "variants": false,
+        "decisionFlow": true,
+        "do": true,
+        "dont": true,
+        "tokensUsed": true,
+        "apis": false,
+        "a11y": true
+      }
+    },
+    {
+      "id": "data-viz-tooltips",
+      "display": "Data-Viz Tooltips",
+      "tier": "molecule",
+      "family": "Popover & Tooltip",
+      "category": null,
+      "status": "stable",
+      "summary": "The product's chart & widget hover tooltips — a distinct family from MTooltip, owned by the chart layer (Highcharts TooltipBuilder, graph canvases, widget Vue components), not DS components. ~28 reference reproductions cover every mechanism.",
+      "selectHint": "Hover detail on a CHART/graph/canvas mark? -> data-viz tooltip (owned by the chart layer, not MTooltip).",
+      "variants": [
+        "bar-series",
+        "donut-pie",
+        "bubble",
+        "map-geo",
+        "radar",
+        "timeline-xrange",
+        "gauge",
+        "sankey",
+        "treemap",
+        "scatter",
+        "anomaly-band",
+        "rum-waterfall",
+        "geo-marker",
+        "log-pattern",
+        "sparkline",
+        "heatmap",
+        "availability-segment",
+        "availability-bar",
+        "live-graph-node",
+        "live-graph-edge",
+        "apm-service-node",
+        "sdn-tunnel-edge",
+        "cisco-aci-endpoint",
+        "cisco-aci-link",
+        "network-interface-edge",
+        "netroute-node",
+        "netroute-edge",
+        "flame-graph-span",
+        "HighchartsTooltipBuilder",
+        "VueWidget",
+        "GraphCanvas",
+        "FlameGraph",
+        "Bar / series",
+        "Donut / pie",
+        "Bubble",
+        "Map / geo",
+        "Radar",
+        "Timeline / x-range",
+        "Gauge",
+        "Sankey",
+        "Treemap",
+        "Scatter",
+        "Anomaly / forecast band",
+        "RUM resource waterfall",
+        "Geo map marker",
+        "Log pattern distribution",
+        "Sparkline",
+        "Heatmap",
+        "Alert / availability segment",
+        "Availability bar segment",
+        "Live graph node",
+        "Live graph edge",
+        "APM service-map node",
+        "SDN tunnel edge",
+        "Cisco ACI endpoint",
+        "Cisco ACI fabric link",
+        "Network interface edge",
+        "Netroute hop node",
+        "Netroute edge",
+        "Flame graph span"
+      ],
+      "registry": "components/registry/data-viz-tooltips.json",
+      "spec": "components/specs/data-viz-tooltips.md",
+      "storybook": "Molecules/Data-Viz Tooltips",
+      "related": [
+        "tooltip",
+        "table"
+      ],
+      "knownIssueCount": 2,
+      "tokenCount": 11,
+      "has": {
+        "props": false,
+        "states": true,
+        "sizes": false,
+        "variants": true,
+        "decisionFlow": true,
+        "do": true,
+        "dont": true,
+        "tokensUsed": true,
+        "apis": false,
+        "a11y": true
+      }
+    },
+    {
+      "id": "date-time-pickers",
+      "display": "Date & Time Pickers",
+      "tier": "molecule",
+      "family": "Date & Time Pickers",
+      "category": null,
+      "status": "stable",
+      "summary": "The product's date/time selection family. The hero is TimeRangePicker (42×) — the observability time-range control (relative presets + absolute custom range). MDatePicker (10×, wraps a-date-picker) is the form date-time field, in practice ALWAYS used with show-time. MTimePicker wraps a-time-picker (12-hour) but is rarely used standalone. DateTimePopover is a lighter custom-range-only popover.",
+      "selectHint": "Selecting a TIME WINDOW for charts/dashboards/logs (relative or absolute)? -> TimeRangePicker (the 42× hero).",
+      "variants": [
+        "TimeRangePicker",
+        "MDatePicker",
+        "MTimePicker",
+        "TimePicker (custom)",
+        "TimeRangeSlider",
+        "DateTimePopover",
+        "presets-only",
+        "excluded-options"
+      ],
+      "registry": "components/registry/date-time-pickers.json",
+      "spec": "components/specs/date-time-pickers.md",
+      "storybook": "Molecules/Date & Time Pickers",
+      "related": [
+        "dropdown-picker",
+        "form-item",
+        "popover"
+      ],
+      "knownIssueCount": 2,
+      "tokenCount": 13,
+      "has": {
+        "props": false,
+        "states": true,
+        "sizes": false,
+        "variants": true,
+        "decisionFlow": true,
+        "do": true,
+        "dont": true,
+        "tokensUsed": true,
+        "apis": true,
+        "a11y": true
+      }
+    },
+    {
+      "id": "drawer",
+      "display": "Drawer",
+      "tier": "organism",
+      "family": "Overlay",
+      "category": "overlay",
+      "status": "core",
+      "summary": "Slide-in side panel (from the right) for detail views, edit forms, and record-contextual content. The product's MOST-used overlay (FlotoDrawer 99x + FlotoDrawerForm 59x = 158x). Open via open prop or trigger slot.",
+      "selectHint": "Short yes/no or destructive confirmation? -> FlotoConfirmModal, not a drawer.",
+      "variants": [
+        "FlotoDrawer",
+        "FlotoDrawerForm"
+      ],
+      "registry": "components/registry/drawer.json",
+      "spec": "components/specs/drawer.md",
+      "storybook": "Organisms/Drawer",
+      "related": [
+        "MModal",
+        "FlotoConfirmModal",
+        "FlotoDrawerForm",
+        "FlotoForm",
+        "FlotoFormItem",
+        "MButton"
+      ],
+      "knownIssueCount": 3,
+      "tokenCount": 3,
+      "has": {
+        "props": false,
+        "states": true,
+        "sizes": true,
+        "variants": true,
+        "decisionFlow": true,
+        "do": true,
+        "dont": true,
+        "tokensUsed": true,
+        "apis": true,
+        "a11y": true
+      }
+    },
+    {
+      "id": "dropdown-picker",
+      "display": "DropdownPicker",
+      "tier": "organism",
+      "family": "Form Controls",
+      "category": null,
+      "status": "core",
+      "summary": "The product's custom select: popover-anchored, virtualized, searchable, single/multi-select, keyboard nav, optional inline-add. Not a native/Ant select.",
+      "selectHint": "Free-form typed tags? -> LooseTags, not the picker.",
+      "variants": [
+        "single",
+        "multiple",
+        "not-searchable",
+        "allow-clear",
+        "text-only",
+        "read-only-pills",
+        "inline-add",
+        "two-pane",
+        "use-popover"
+      ],
+      "registry": "components/registry/dropdown-picker.json",
+      "spec": "components/specs/dropdown-picker.md",
+      "storybook": "Organisms/DropdownPicker",
+      "related": [
+        "SingleTrigger",
+        "MultipleTrigger",
+        "SelectedItemPills",
+        "LooseTags",
+        "MSelect",
+        "MPopover",
+        "MPopper",
+        "MMenu",
+        "MCheckbox"
+      ],
+      "knownIssueCount": 5,
+      "tokenCount": 4,
+      "has": {
+        "props": true,
+        "states": true,
+        "sizes": false,
+        "variants": true,
+        "decisionFlow": true,
+        "do": true,
+        "dont": true,
+        "tokensUsed": true,
+        "apis": false,
+        "a11y": true
+      }
+    },
+    {
+      "id": "filters",
+      "display": "Filters",
+      "tier": "molecule",
+      "family": "Filters",
+      "category": null,
+      "status": "stable",
+      "summary": "The product's filtering components, grouped by ARCHETYPE (not by the screen they sit in). Four distinct kinds: the Expression builder (nested AND/OR query builder), the Filter bar (inline chips), Quick filters (preset menu), and the Filter row (multi-selects + Reset/Apply). These are molecules; the Toolbars (organisms) compose them.",
+      "selectHint": "Complex AND/OR conditions across multiple groups? -> Expression builder (FiltersContainer, 32×).",
+      "variants": [
+        "ExpressionBuilder",
+        "FilterBar",
+        "QuickFilters",
+        "FilterRow",
+        "VerticalFilter",
+        "expression-builder",
+        "filter-bar",
+        "quick-filters",
+        "filter-row",
+        "vertical-filter"
+      ],
+      "registry": "components/registry/filters.json",
+      "spec": "components/specs/filters.md",
+      "storybook": "Molecules/Filters",
+      "related": [
+        "dropdown-picker",
+        "input",
+        "tag",
+        "table"
+      ],
+      "knownIssueCount": 1,
+      "tokenCount": 8,
+      "has": {
+        "props": true,
+        "states": true,
+        "sizes": false,
+        "variants": true,
+        "decisionFlow": true,
+        "do": true,
+        "dont": true,
+        "tokensUsed": true,
+        "apis": true,
+        "a11y": true
+      }
+    },
+    {
+      "id": "form-item",
+      "display": "Form Field",
+      "tier": "molecule",
+      "family": "Form Controls",
+      "category": "form",
+      "status": "core",
+      "summary": "The form field: label + validation + control + error/help. MValidationProvider (vee-validate) -> MFormItem. Most-used component (1783x). required is derived from rules.",
+      "selectHint": "Building a form field (label + control + validation)? -> FlotoFormItem (always).",
+      "variants": [
+        "text",
+        "number",
+        "textarea",
+        "vertical",
+        "horizontal",
+        "custom-control"
+      ],
+      "registry": "components/registry/form-item.json",
+      "spec": "components/specs/form-item.md",
+      "storybook": "Molecules/FormItem",
+      "related": [
+        "MInput",
+        "MRadioGroup",
+        "MCheckbox",
+        "MSwitch",
+        "FlotoDropdownPicker",
+        "LooseTags",
+        "FlotoForm",
+        "MValidationObserver"
+      ],
+      "knownIssueCount": 3,
+      "tokenCount": 3,
+      "has": {
+        "props": true,
+        "states": true,
+        "sizes": false,
+        "variants": true,
+        "decisionFlow": true,
+        "do": true,
+        "dont": true,
+        "tokensUsed": true,
+        "apis": true,
+        "a11y": true
+      }
+    },
+    {
+      "id": "input",
+      "display": "Input",
+      "tier": "atom",
+      "family": "Form Controls",
+      "category": "form-control",
+      "status": "core",
+      "summary": "Text input. A type-router (text/password/number/search/textarea/datetime). v-model is value+update. Almost always wrapped by FlotoFormItem for label+validation.",
+      "selectHint": "Multi-line text? -> type=textarea (or FlotoFormItem type=textarea).",
+      "variants": [
+        "text",
+        "password",
+        "number",
+        "search",
+        "textarea",
+        "material-input",
+        "no-border-input",
+        "full-border-text-area",
+        "full-bordered-addon-input",
+        "auto-height-input",
+        "text-lg-input",
+        "datetime"
+      ],
+      "registry": "components/registry/input.json",
+      "spec": "components/specs/input.md",
+      "storybook": "Atoms/Input",
+      "related": [
+        "FlotoFormItem",
+        "MInputNumber",
+        "MInputSearch",
+        "MInputGroup",
+        "LooseTags",
+        "date picker"
+      ],
+      "knownIssueCount": 3,
+      "tokenCount": 7,
+      "has": {
+        "props": true,
+        "states": true,
+        "sizes": false,
+        "variants": true,
+        "decisionFlow": true,
+        "do": true,
+        "dont": true,
+        "tokensUsed": true,
+        "apis": false,
+        "a11y": true
+      }
+    },
+    {
+      "id": "link",
+      "display": "Link",
+      "tier": "atom",
+      "family": "Link",
+      "category": "navigation",
+      "status": "core",
+      "summary": "Navigation control. Default renders a RouterLink (<a>); as-button renders an MButton that pushes the route on click. Only own prop is asButton; everything else passes through.",
+      "selectHint": "Performs an action (save/delete/change state)? -> Button, not a link.",
+      "variants": [
+        "default",
+        "asButton",
+        "text-link",
+        "as-button",
+        "external",
+        "k-link",
+        "resource-link",
+        "link-label",
+        "completed-link",
+        "admin-page-link"
+      ],
+      "registry": "components/registry/link.json",
+      "spec": "components/specs/link.md",
+      "storybook": "Atoms/Link",
+      "related": [
+        "MButton",
+        "MDropdown",
+        "RouterLink"
+      ],
+      "knownIssueCount": 3,
+      "tokenCount": 6,
+      "has": {
+        "props": true,
+        "states": true,
+        "sizes": false,
+        "variants": true,
+        "decisionFlow": true,
+        "do": true,
+        "dont": true,
+        "tokensUsed": true,
+        "apis": false,
+        "a11y": true
+      }
+    },
+    {
+      "id": "loose-tags",
+      "display": "LooseTags",
+      "tier": "molecule",
+      "family": "Tag",
+      "category": "form-input",
+      "status": "core",
+      "summary": "Free-form tag input (type to create tags) with async suggestions. The Tag family's input member; home of the teal pills.",
+      "selectHint": "Just displaying tags (label/count/status)? -> MTag/MStatusTag, not LooseTags.",
+      "variants": [
+        "default",
+        "disabled",
+        "asDropdown",
+        "editable"
+      ],
+      "registry": "components/registry/loose-tags.json",
+      "spec": "components/specs/loose-tags.md",
+      "storybook": "Molecules/LooseTags",
+      "related": [
+        "MTag",
+        "MStatusTag",
+        "SelectedItemPills",
+        "FlotoDropdownPicker",
+        "MSelect"
+      ],
+      "knownIssueCount": 4,
+      "tokenCount": 3,
+      "has": {
+        "props": true,
+        "states": true,
+        "sizes": false,
+        "variants": true,
+        "decisionFlow": true,
+        "do": true,
+        "dont": true,
+        "tokensUsed": true,
+        "apis": false,
+        "a11y": true
+      }
+    },
+    {
+      "id": "menu",
+      "display": "Menu",
+      "tier": "molecule",
+      "family": "Menu",
+      "category": null,
+      "status": "stable",
+      "summary": "The MMenu primitive (a vertical list of selectable icon+label rows, with dividers and danger/positive colours) catalogued in its own right, plus its action-surface usage: the Context/Action menu (FlotoGridActions — a '...' trigger opening an MMenu of actions).",
+      "selectHint": "A list of items to render inside something (nav, picker, dropdown)? -> Menu primitive.",
+      "variants": [
+        "Menu",
+        "ContextMenu",
+        "menu-primitive",
+        "context-menu"
+      ],
+      "registry": "components/registry/menu.json",
+      "spec": "components/specs/menu.md",
+      "storybook": "Molecules/Menu",
+      "related": [
+        "navigation",
+        "dropdownpicker",
+        "select",
+        "popover",
+        "toolbars",
+        "table"
+      ],
+      "knownIssueCount": 3,
+      "tokenCount": 8,
+      "has": {
+        "props": false,
+        "states": true,
+        "sizes": false,
+        "variants": true,
+        "decisionFlow": true,
+        "do": true,
+        "dont": true,
+        "tokensUsed": true,
+        "apis": true,
+        "a11y": true
+      }
+    },
+    {
+      "id": "modal",
+      "display": "Modal",
+      "tier": "organism",
+      "family": "Overlay",
+      "category": "overlay",
+      "status": "core",
+      "summary": "Centered dialog over a dimmed backdrop. MModal (39x) is the base; FlotoConfirmModal (71x) is the confirm variant. Open via trigger slot or open prop. No x/backdrop-close (footer/Escape only).",
+      "selectHint": "Yes/no or destructive confirmation? -> FlotoConfirmModal (variant=error for destructive).",
+      "variants": [
+        "MModal",
+        "FlotoConfirmModal",
+        "hide-footer",
+        "scrollable-modal",
+        "restrict-width",
+        "no-padding-modal",
+        "no-padding-modal / no-padding-confrim-modal",
+        "backdrop"
+      ],
+      "registry": "components/registry/modal.json",
+      "spec": "components/specs/modal.md",
+      "storybook": "Organisms/Modal",
+      "related": [
+        "FlotoConfirmModal",
+        "FlotoDrawer",
+        "FlotoDrawerForm",
+        "MButton",
+        "FlotoFormItem"
+      ],
+      "knownIssueCount": 3,
+      "tokenCount": 3,
+      "has": {
+        "props": false,
+        "states": true,
+        "sizes": true,
+        "variants": true,
+        "decisionFlow": true,
+        "do": true,
+        "dont": true,
+        "tokensUsed": true,
+        "apis": true,
+        "a11y": true
+      }
+    },
+    {
+      "id": "navigation",
+      "display": "Navigation",
+      "tier": "molecule",
+      "family": "Navigation",
+      "category": null,
+      "status": "stable",
+      "summary": "The product's wayfinding components, by archetype: Primary nav (left module sidebar), Side menu (searchable collapsible section menu), Steps (wizard/stepper), Breadcrumb (back + trail), Back button. Tabs are their own family (Molecules/Tabs).",
+      "selectHint": "Switch between top-level product MODULES? -> Primary nav (left sidebar).",
+      "variants": [
+        "PrimaryNav",
+        "SideMenu",
+        "Steps",
+        "Breadcrumb",
+        "BackButton",
+        "Tabs",
+        "primary-nav",
+        "side-menu-section",
+        "side-menu-tree",
+        "side-menu-categories",
+        "side-menu-list",
+        "steps",
+        "breadcrumb",
+        "back-button",
+        "user-menu",
+        "notification-dropdown",
+        "omnibox",
+        "noc-player",
+        "timeline-scrollbar",
+        "graph-breadcrumb",
+        "metric-picker",
+        "UserMenu",
+        "NotificationDropdown",
+        "Omnibox",
+        "NocPlayer",
+        "TimelineScrollbar",
+        "GraphBreadcrumb"
+      ],
+      "registry": "components/registry/navigation.json",
+      "spec": "components/specs/navigation.md",
+      "storybook": "Molecules/Navigation",
+      "related": [
+        "tabs",
+        "toolbars",
+        "input",
+        "tag",
+        "table"
+      ],
+      "knownIssueCount": 2,
+      "tokenCount": 9,
+      "has": {
+        "props": false,
+        "states": true,
+        "sizes": false,
+        "variants": true,
+        "decisionFlow": true,
+        "do": true,
+        "dont": true,
+        "tokensUsed": true,
+        "apis": true,
+        "a11y": true
+      }
+    },
+    {
+      "id": "popover",
+      "display": "Popover",
+      "tier": "molecule",
+      "family": "Popover & Tooltip",
+      "category": null,
+      "status": "stable",
+      "summary": "Click-triggered floating panel anchored to a trigger, holding interactive content (action menus, pickers, mini-forms). Slots trigger/title/default each get {hide,show,toggle}. MPopper is the lower-level v-popover positioning primitive that powers FlotoDropdownPicker.",
+      "selectHint": "Is the content a short non-interactive hint? -> Tooltip, not Popover.",
+      "variants": [
+        "click",
+        "hover",
+        "action-menu",
+        "grid-row-actions",
+        "rich-panel"
+      ],
+      "registry": "components/registry/popover.json",
+      "spec": "components/specs/popover.md",
+      "storybook": "Molecules/Popover",
+      "related": [
+        "tooltip",
+        "modal",
+        "dropdown-picker"
+      ],
+      "knownIssueCount": 3,
+      "tokenCount": 3,
+      "has": {
+        "props": true,
+        "states": true,
+        "sizes": false,
+        "variants": true,
+        "decisionFlow": true,
+        "do": true,
+        "dont": true,
+        "tokensUsed": true,
+        "apis": false,
+        "a11y": true
+      }
+    },
+    {
+      "id": "radio",
+      "display": "Radio",
+      "tier": "atom",
+      "family": "Selection Controls",
+      "category": null,
+      "status": "core",
+      "summary": "One-of-many selection control. Use MRadioGroup with :options + v-model; as-button renders a segmented control. Standalone MRadio is unused.",
+      "selectHint": "Multi-select (pick any number)? -> Checkbox.",
+      "variants": [
+        "list",
+        "segmented",
+        "segmented-with-icons",
+        "severity-switch",
+        "plain",
+        "with-icons",
+        "radio-list-dot",
+        "outline"
+      ],
+      "registry": "components/registry/radio.json",
+      "spec": "components/specs/radio.md",
+      "storybook": "Atoms/Radio",
+      "related": [
+        "MCheckbox",
+        "MSwitch",
+        "FlotoDropdownPicker",
+        "MButton (segmented = this with as-button)"
+      ],
+      "knownIssueCount": 4,
+      "tokenCount": 3,
+      "has": {
+        "props": true,
+        "states": true,
+        "sizes": true,
+        "variants": true,
+        "decisionFlow": true,
+        "do": true,
+        "dont": true,
+        "tokensUsed": true,
+        "apis": false,
+        "a11y": true
+      }
+    },
+    {
+      "id": "scheduler",
+      "display": "Scheduler (Recurrence)",
+      "tier": "molecule",
+      "family": "Scheduler",
+      "category": null,
+      "status": "stable",
+      "summary": "A composite recurrence builder. A 'Scheduler Type' segmented control (MRadioGroup as-button: Once · Daily · Weekly · Monthly) swaps in a sub-form. Once/Daily = Start Date + Hours; Weekly adds Days (Mon-Sun); Monthly adds Months + Dates (1-31). Hours = the custom dropdown TimePicker (multi-select times); Days/Months/Dates = FlotoDropdownPicker multi-selects; Start Date = MDatePicker (date-only, min-date today). Used for backups, network discovery, compliance audits, monitor (re)discovery, reports, runbooks.",
+      "selectHint": "Need a RECURRING schedule (run X every day/week/month)? -> ScheduleInput.",
+      "variants": [
+        "Once",
+        "Daily",
+        "Weekly",
+        "Monthly"
+      ],
+      "registry": "components/registry/scheduler.json",
+      "spec": "components/specs/scheduler.md",
+      "storybook": "Molecules/Scheduler",
+      "related": [
+        "radio",
+        "date-time-pickers",
+        "dropdown-picker",
+        "form-item"
+      ],
+      "knownIssueCount": 2,
+      "tokenCount": 5,
+      "has": {
+        "props": true,
+        "states": true,
+        "sizes": false,
+        "variants": true,
+        "decisionFlow": true,
+        "do": true,
+        "dont": true,
+        "tokensUsed": true,
+        "apis": false,
+        "a11y": true
+      }
+    },
+    {
+      "id": "select",
+      "display": "Select",
+      "tier": "atom",
+      "family": "Form Controls",
+      "category": "form-control",
+      "status": "low-use",
+      "summary": "Kit's raw Ant a-select wrapper. LOW-USE (2x, both mode=tags) — the product's select is FlotoDropdownPicker (510x). Modes default/multiple/tags; v-model value/change.",
+      "selectHint": "Need the product's standard select (single/multi/search/virtualized/custom trigger)? -> FlotoDropdownPicker (the norm, 510x).",
+      "variants": [
+        "single",
+        "multiple",
+        "tags"
+      ],
+      "registry": "components/registry/select.json",
+      "spec": "components/specs/select.md",
+      "storybook": "Atoms/Select",
+      "related": [
+        "FlotoDropdownPicker",
+        "LooseTags",
+        "MTreeSelect",
+        "MSelectOption",
+        "FlotoFormItem"
+      ],
+      "knownIssueCount": 5,
+      "tokenCount": 4,
+      "has": {
+        "props": true,
+        "states": true,
+        "sizes": true,
+        "variants": true,
+        "decisionFlow": true,
+        "do": true,
+        "dont": true,
+        "tokensUsed": true,
+        "apis": false,
+        "a11y": true
+      }
+    },
+    {
+      "id": "severity",
+      "display": "Severity",
+      "tier": "atom",
+      "family": "Tag",
+      "category": null,
+      "status": "core",
+      "summary": "The severity INDICATOR — a coloured dot (+ optional label + tooltip) for a severity LEVEL (down / critical / major / warning / clear / up / maintenance / unreachable / unknown / …). Distinct from MStatusTag, which maps status STRINGS to tag-* pills. Used 80×. Renders --severity-<level>; can take `severity` directly or resolve it live from a monitor (objectId / instance / counter) via DB workers.",
+      "selectHint": "Showing a monitor/alert SEVERITY level (critical/major/warning/clear/up/down/…)? -> Severity (dot).",
+      "variants": [
+        "dot",
+        "dot+label",
+        "solid-chip",
+        "text",
+        "bg-fill",
+        "stripe",
+        "picker",
+        "count-box",
+        "switch"
+      ],
+      "registry": "components/registry/severity.json",
+      "spec": null,
+      "storybook": "Atoms/Severity",
+      "related": [
+        "tag",
+        "filters",
+        "table"
+      ],
+      "knownIssueCount": 2,
+      "tokenCount": 20,
+      "has": {
+        "props": true,
+        "states": true,
+        "sizes": true,
+        "variants": true,
+        "decisionFlow": true,
+        "do": true,
+        "dont": true,
+        "tokensUsed": true,
+        "apis": false,
+        "a11y": true
+      }
+    },
+    {
+      "id": "switch",
+      "display": "Switch",
+      "tier": "atom",
+      "family": "Selection Controls",
+      "category": null,
+      "status": "core",
+      "summary": "Instant on/off toggle for a setting that applies immediately. Controlled.",
+      "selectHint": "Mutually-exclusive options? -> MRadio.",
+      "variants": [],
+      "registry": "components/registry/switch.json",
+      "spec": "components/specs/switch.md",
+      "storybook": "Atoms/Switch",
+      "related": [
+        "MCheckbox",
+        "MRadio"
+      ],
+      "knownIssueCount": 5,
+      "tokenCount": 3,
+      "has": {
+        "props": true,
+        "states": true,
+        "sizes": true,
+        "variants": false,
+        "decisionFlow": true,
+        "do": true,
+        "dont": true,
+        "tokensUsed": true,
+        "apis": false,
+        "a11y": true
+      }
+    },
+    {
+      "id": "table",
+      "display": "Table (Grid)",
+      "tier": "organism",
+      "family": "Table",
+      "category": null,
+      "status": "stable",
+      "summary": "The product's primary data table. Resizable/reorderable/sortable columns, client + server paging, grouping, selection (with bulk-action bar), expandable detail rows, per-column cell slots. MGrid is the grid; FlotoPaginatedCrud is the fetch+paginate wrapper around it.",
+      "selectHint": "Need to fetch + paginate a list with CRUD? -> FlotoPaginatedCrud (wraps MGrid; handles fetch/paging/search/filters).",
+      "variants": [
+        "basic",
+        "selectable",
+        "expandable",
+        "grouping",
+        "cell-types",
+        "pagination",
+        "tree",
+        "pivot",
+        "hide-expand-column",
+        "hide-header",
+        "hide-grouping",
+        "tabular-content-grid",
+        "service-grid",
+        "rum-grid",
+        "mgrid-container"
+      ],
+      "registry": "components/registry/table.json",
+      "spec": "components/specs/table.md",
+      "storybook": "Organisms/Table",
+      "related": [
+        "popover (row-actions kebab + bulk-action bar)",
+        "tag (status cells)",
+        "checkbox (selection)",
+        "dropdown-picker (column filters)"
+      ],
+      "knownIssueCount": 2,
+      "tokenCount": 7,
+      "has": {
+        "props": true,
+        "states": true,
+        "sizes": false,
+        "variants": true,
+        "decisionFlow": true,
+        "do": true,
+        "dont": true,
+        "tokensUsed": true,
+        "apis": false,
+        "a11y": true
+      }
+    },
+    {
+      "id": "tabs",
+      "display": "Tabs",
+      "tier": "molecule",
+      "family": "Tabs",
+      "category": null,
+      "status": "stable",
+      "summary": "In-page tabbed navigation that switches between sibling views of one context. MTab wraps Ant a-tabs; panes are MTabPane. The product uses ONLY line-style, top-positioned, default-size tabs — Ant's card/editable-card/vertical/size/tabBarExtraContent features are available but unused in-product. Active tab = --primary (text + underline + ink bar); inactive = --tabs-text-color; bar bottom border = --border-color. Real variants are class-based.",
+      "selectHint": "Switching between sibling VIEWS of one context (not navigating to other pages)? -> Tabs. (For page nav use the router/menu.)",
+      "variants": [
+        "line",
+        "no-border",
+        "sticky-tab",
+        "with-counts",
+        "with-icons",
+        "dynamic",
+        "persisted"
+      ],
+      "registry": "components/registry/tabs.json",
+      "spec": "components/specs/tabs.md",
+      "storybook": "Molecules/Tabs",
+      "related": [
+        "dropdown-picker",
+        "table",
+        "radio"
+      ],
+      "knownIssueCount": 1,
+      "tokenCount": 6,
+      "has": {
+        "props": true,
+        "states": true,
+        "sizes": false,
+        "variants": true,
+        "decisionFlow": true,
+        "do": true,
+        "dont": true,
+        "tokensUsed": true,
+        "apis": false,
+        "a11y": true
+      }
+    },
+    {
+      "id": "tag",
+      "display": "Tag",
+      "tier": "atom",
+      "family": "Tag",
+      "category": null,
+      "status": "core",
+      "summary": "Compact label for categorization or removable selections. Used as a plain tag; color variants are broken.",
+      "selectHint": "User types/adds tags? -> LooseTags (input), not Tag.",
+      "variants": [
+        "MTag",
+        "MStatusTag",
+        "SelectedItemPills",
+        "MultipleTrigger/SingleTrigger",
+        "LooseTags",
+        "TagsList",
+        "appClasses",
+        "tag-red",
+        "tag-green",
+        "tag-yellow",
+        "tag-orange",
+        "tag-purple",
+        "tag-unknown",
+        "tag-primary",
+        "used-count-pill",
+        "note",
+        "stateClasses"
+      ],
+      "registry": "components/registry/tag.json",
+      "spec": "components/specs/tag.md",
+      "storybook": "Atoms/Tag",
+      "related": [
+        "MStatusTag",
+        "loose-tags",
+        "tags-list",
+        "MIcon",
+        "severity"
+      ],
+      "knownIssueCount": 7,
+      "tokenCount": 3,
+      "has": {
+        "props": true,
+        "states": true,
+        "sizes": false,
+        "variants": true,
+        "decisionFlow": true,
+        "do": true,
+        "dont": true,
+        "tokensUsed": true,
+        "apis": false,
+        "a11y": true
+      }
+    },
+    {
+      "id": "tags-list",
+      "display": "TagsList",
+      "tier": "molecule",
+      "family": "Tag",
+      "category": "display",
+      "status": "dead-code",
+      "summary": "Read-only tag overflow display: up to maxLength neutral chips, else a count chip + hover popover. UNUSED in product (0 usages) — prefer SelectedItemPills.",
+      "selectHint": "Tag overflow display (show some, +N rest)? -> SelectedItemPills (or LooseTags :disabled), NOT TagsList.",
+      "variants": [],
+      "registry": "components/registry/tags-list.json",
+      "spec": "components/specs/tags-list.md",
+      "storybook": "Molecules/TagsList",
+      "related": [
+        "SelectedItemPills",
+        "MTag",
+        "MPopover",
+        "LooseTags"
+      ],
+      "knownIssueCount": 2,
+      "tokenCount": 3,
+      "has": {
+        "props": true,
+        "states": true,
+        "sizes": false,
+        "variants": false,
+        "decisionFlow": true,
+        "do": true,
+        "dont": true,
+        "tokensUsed": true,
+        "apis": false,
+        "a11y": true
+      }
+    },
+    {
+      "id": "toolbars",
+      "display": "Toolbars",
+      "tier": "organism",
+      "family": "Toolbars",
+      "category": null,
+      "status": "stable",
+      "summary": "The product's toolbar compositions, as variants of one family. A toolbar is an organism that arranges molecules/atoms (title, search, filters, actions). Variants: Page header, Widget header, Bulk action bar, Grid toolbar, Column chooser.",
+      "selectHint": "Top of a list/detail page (title + actions)? -> Page header.",
+      "variants": [
+        "app-header",
+        "page-header",
+        "widget-header",
+        "bulk-action-bar",
+        "grid-toolbar",
+        "column-chooser"
+      ],
+      "registry": "components/registry/toolbars.json",
+      "spec": "components/specs/toolbars.md",
+      "storybook": "Organisms/Toolbars",
+      "related": [
+        "filters",
+        "table",
+        "dropdown-picker",
+        "popover",
+        "date-time-pickers"
+      ],
+      "knownIssueCount": 2,
+      "tokenCount": 9,
+      "has": {
+        "props": false,
+        "states": true,
+        "sizes": false,
+        "variants": true,
+        "decisionFlow": true,
+        "do": true,
+        "dont": true,
+        "tokensUsed": true,
+        "apis": true,
+        "a11y": true
+      }
+    },
+    {
+      "id": "tooltip",
+      "display": "Tooltip",
+      "tier": "molecule",
+      "family": "Popover & Tooltip",
+      "category": null,
+      "status": "stable",
+      "summary": "Transient hover/focus label anchored to a trigger. The kit MTooltip is excluded and this Floto override ships instead, rendering through VTippy (not a-tooltip). trigger slot = anchor, default slot = content. Non-interactive — for interactive panels use Popover.",
+      "selectHint": "Is the content interactive (buttons, inputs, links)? -> use Popover, NOT a tooltip.",
+      "variants": [
+        "default",
+        "chart-like-tooltip",
+        "placements"
+      ],
+      "registry": "components/registry/tooltip.json",
+      "spec": "components/specs/tooltip.md",
+      "storybook": "Molecules/Tooltip",
+      "related": [
+        "popover",
+        "modal",
+        "dropdown-picker"
+      ],
+      "knownIssueCount": 3,
+      "tokenCount": 5,
+      "has": {
+        "props": true,
+        "states": true,
+        "sizes": false,
+        "variants": true,
+        "decisionFlow": true,
+        "do": true,
+        "dont": true,
+        "tokensUsed": true,
+        "apis": false,
+        "a11y": true
+      }
+    }
+  ]
+}