@mtdt/observeops-ds-spec 0.1.0

package/foundation/page-templates.md

@@ -0,0 +1,69 @@
+# Page templates — product coverage
+
+The canonical page types. All six catalogued templates are confirmed across the product, plus a handful
+of archetypes/variants the sweep surfaced (Graph canvas, Utility tool, System/status, and two wizard shapes).
+
+## The variants (catalogued)
+
+| Template | What | Storybook |
+| --- | --- | --- |
+| **List view** | paginated collection (`FlotoPaginatedCrud` + table + toolbar) | Page templates → List view |
+| **Form view** | create/edit a record on an `MRow`/`MCol` grid; often in a drawer | Form view |
+| **Detail view** | one record: header + status/severity + tabs + panels/charts | Detail view |
+| **Dashboard view** | widget grid + global time range | Dashboard view |
+| **Explorer view** | left panel + query/filter + results | Explorer view |
+| **Wizard flow** | stepper + step body + Back/Next | Wizard flow |
+
+## Where each is used in the product
+
+| Template | Pages / flows (modules · files) |
+| --- | --- |
+| **List view** (dominant) | Inventory grid; **settings** CRUD across ~15 submodules (monitoring, users, roles, compliance/benchmarks, ncm device templates, snmp-trap, policy lists, plugin-library, group-settings, …); alert **stream** + correlated alerts; ncm **explorer** + ncm-approval; **audit** log; apm **services**; rum list; **trap-viewer** list; dashboard **column-mappers**; reports list. |
+| **Form view** | settings create/edit (business-hour, discovery profile, user, role, benchmark, log-parser, …); **policy** create/edit (left type-menu + form); inventory drawer forms (wan-link, container-runtime, credential-selection — `FlotoDrawerForm` 40%); **my-account** profile/preferences; **system settings** forms (mail, proxy, DNS — horizontal layout). |
+| **Detail view** | monitor/**device-template** (tabbed *template-swapper*); **alert detail** (severity + time-range + dynamic overview tabs + collaboration); apm service/database/api-endpoint/transaction details; **rum** drill-downs; **slo** details + history; netroute drilldown; trap-viewer details; log surrounding-events. |
+| **Dashboard view** | **dashboard** editor + **NOC player** (full-screen variant); alert **dashboard**; log-dashboard; flow dashboard; apm overview; ncm overview + compliance; inventory **heatmap** dashboard; netroute dashboard mode. |
+| **Explorer view** | **log search** (query builder + hierarchy tree); **metric-explorer** (three-pane: saved-views + metric-picker + chart); apm **explorer** (saved-views + filters); flow **explorer**; rum; netroute; **topology** graph. |
+| **Wizard flow** | **report builder** (5 steps, `MMenu` stepper: Type→General→Template→Schedule→Review); **network discovery** (multi-route: profile → configure → progress → result); **integration setup** (slack/teams/jira/service-now — single-view numbered steps); 2FA / setup-guide onboarding. |
+
+## Coverage verdict
+
+All six templates are present and well-used. The sweep also found these the catalogue should acknowledge:
+
+- **Graph / Canvas view (new archetype)** — see findings. Strong candidate for a 7th template.
+- **Utility-tool form** — settings/utility (`ping`, `dns-resolver`, `snmp-walk`, `telnet`, `cli-command`):
+  a stateless input-form + results, no CRUD/persistence. A Form sub-type worth naming.
+- **System / status message page** — `_disk-space-full`, upgrade/restore progress, `_404`, `_unauthorized`,
+  report-renderer. Message/print pages under Login/Public/Empty shells.
+
+## Notable / different findings
+
+- **Topology graph canvas is a distinct archetype** (`modules/topology/views/topology-map.vue`): a Cytoscape
+  interactive graph with pan/zoom, **minimap** (cytoscape-navigator), node-drag with saved positions,
+  Full-View vs Tree-View re-layout (D3 force in a web worker), and rich keyboard shortcuts. It is neither a
+  Dashboard nor an Explorer → document as **Graph / Canvas view**.
+- **Detail-as-template-swapper** (`inventory/views/device-template.vue`): the tab bar swaps **entire
+  templates** (dashboard / metric-explorer / policy-list), not just content sections — a detail variant.
+- **List ⇄ Dashboard view toggle**: apm services, rum, netroute toggle one page between an `MGrid` table and
+  a `vue-grid-layout` widget board — a list/dashboard hybrid.
+- **Two wizard shapes**: (a) **multi-route stateful** (report builder, discovery — real routes + polling +
+  polymorphic step components); (b) **single-view stepped** (integration setup — numbered steps inside one
+  view). The Storybook wizard example matches (a); (b) is a lighter variant.
+- **Live-tail / streaming** pages (`log/live-tail.vue`, `trap-viewer/live-trap-viewer.vue`) — a streaming
+  variant of List/Explorer.
+- **Full-screen Dashboard** (NOC player) — a Dashboard variant that drops the shell for an immersive,
+  auto-rotating board with its own control bar.
+
+## Best practices
+
+- Pick the template by **what the page is for** (browse → List; one record → Form/Detail; metrics →
+  Dashboard; query a dataset → Explorer; guided task → Wizard), then assemble from the catalogued components.
+- **List views**: title + live count in the header, primary **Add** top-right, filters in the toolbar, a
+  **bulk-action bar** only on selection, severity/status via Severity/Tag, always paginate.
+- **Forms**: 6/6 `MRow`/`MCol`, full-width for textareas; complex forms prefer **`MTab` sub-sections** over
+  multi-route; destructive saves confirm via Modal; settings forms full-screen via `hideSettingsMenu`.
+- **Drawers over routes** for create/edit/detail off a list — the product's default record surface
+  (`FlotoDrawerForm`, 40–90% width).
+- **Detail headers**: use the **Severity dot** for severity *levels* and **Tag** for status *strings* —
+  they are not interchangeable.
+- For a graph/canvas page, reuse the topology pattern (tree + canvas + minimap + saved positions + keyboard
+  nav) rather than rebuilding it.

package/foundation/panel-behaviours.md

@@ -0,0 +1,61 @@
+# Panel behaviours — product coverage
+
+How panels open, move and resize. The five catalogued behaviours are confirmed and heavily used — but the
+sweep shows the product's real overlay/panel vocabulary is **wider**: Modal, Expandable rows, Popover, a
+fixed Bulk-action bar, resizable table columns, and the full-screen OmniBox all recur enough to belong here.
+
+## The variants (catalogued) — with product usage
+
+| Behaviour | Count | Where (files) |
+| --- | --- | --- |
+| **Drawer (slide-over)** | **146 usages / 30 files** | `_base-drawer.vue` (FlotoDrawer) · `crud/_base-drawer-form.vue` (FlotoDrawerForm); inventory forms (wan-link / container-runtime / credential, 40%); **apm/rum drill-downs (90%)**; ncm (ViewDetail / Restore / Firmware / Compare / Terminal); widget-selector; topology detail; alert correlation-drawer; settings CRUD forms. |
+| **Collapsible** | **19 files** | `filters/vertical-filter` groups; navbar hover-expand; metric-explorer `MCollapse` metric hierarchy; settings sections; the collapsible left tree. |
+| **Resizable / split** | **~2–3 true splits** | **`splitpanes` library** in `settings/views/main.vue` (left menu + content) and **topology** (tree + graph); `apm/.../trace-drill-down` chart-split-pane (CSS). Genuinely drag-resizable panes are rare. |
+| **Affix / sticky** | mostly CSS/JS | monitor-details sticky header; `monitor-sidebar` scroll-offset (JS-managed); report-wizard footer; ncm bulk-action bar; time-range pickers pinned in headers. **No `<a-affix>` widget** — sticky is CSS/flex/JS, not a component. |
+| **Dashboard tiles** | **5 files** | `widgets/widgets.vue` (vue-grid-layout: drag + resize + reorder) · dashboard · ncm overview · apm · flow. Plus **VueMasonryWall** (inventory heatmap) as a responsive masonry variant. |
+
+## Additional behaviours the sweep surfaced (not in the catalogued 5)
+
+| Behaviour | Count | Where / what |
+| --- | --- | --- |
+| **Modal** | **37 files** | `_base-confirm-modal.vue` (FlotoConfirmModal), metric-explorer (anomaly/compare/arithmetic/forecast/outlier), error-modal, suppress-alert (**form-in-modal**), ncm compare/terminal/firmware, approval-request. Confirm-delete and form-in-modal are everyday flows. |
+| **Expandable rows** | **9 files** | inline row→detail expansion: alert stream grid, log-grid, apm tree-list, ncm triggered-policies, pivot-table. A list interaction distinct from drawer/modal. |
+| **Popover** | **20+** | `_base-popper.vue`; user-dropdown, column/filter selectors, date pickers, the alert-dashboard sub-tab dropdowns. Small, non-blocking, contextual. |
+| **Bulk-action bar** | **2 files** | `_base-bulk-action-bar.vue` + rediscover bulk-provision toolbar — a **fixed bottom** bar that animates in on selection. |
+| **Resizable columns** | **50+ tables** | Ant table `minResizableWidth` — column drag-resize (distinct from pane-resize). |
+| **Full-screen overlay** | a few | **OmniBox** global search (portal, blocks the page), ScreenBlocker, NOC-player full-screen, fixed top-right toast notifications. |
+
+## Coverage verdict
+
+- The catalogued **five are real and well-exercised** — Drawer is the dominant record surface (146 usages).
+- **Recommended additions** to the Panel-behaviours page (they're as common as the five): **Modal**
+  (confirm + form-in-modal), **Expandable rows**, **Popover**, **Bulk-action bar**, **Resizable columns**,
+  and the **OmniBox full-screen overlay**. Several already exist as *components* (Modal, Popover, BulkActionBar)
+  but aren't framed as *behaviours* on the foundation page.
+- **Two clarifications:** "Resizable / split" in product means the **`splitpanes` library** (rare, ~2–3
+  places), not the 20+ the raw grep implied (those were resizable *columns*). "Affix" is **CSS/JS sticky**,
+  not an `<a-affix>` widget.
+
+## Notable / different findings
+
+- **Drawer width is semantic**: ~40% for create/edit forms, **90% for deep drill-downs** (apm traces, rum
+  sessions, apm database) — almost a full-page surface that keeps list context.
+- **Modal vs Drawer is a deliberate split**: small action/confirm/collect → **Modal**; panel-sized,
+  scrollable record/detail → **Drawer**; high-complexity record → **full page/route**.
+- **Masonry vs rigid grid**: dashboard tiles are usually `vue-grid-layout` (rigid, draggable) but the
+  inventory heatmap uses **VueMasonryWall** (responsive masonry) — same "tiles" idea, different reflow.
+- **Bulk-action bar** is a unique floating surface (fixed, bottom, appears on selection) — neither modal nor
+  drawer.
+- **No bottom-sheet** pattern exists — every side panel is a right-edge drawer.
+
+## Best practices
+
+- **Drawer = default off-list surface** (create/edit/detail). Always backdrop + ESC-to-close; 40% for forms,
+  90% only for genuine deep dives.
+- **Modal** for confirm/collect (`FlotoConfirmModal`, `variant=error` for destructive); keep it small.
+- **Collapsible** for *optional* detail — never hide required fields collapsed by default.
+- **Resizable splits** (`splitpanes`) need a sensible min-width and a remembered default; don't let a pane
+  collapse to zero.
+- **Affix** sparingly — pin only things useful while scrolling (filters, hierarchy sidebar, wizard footer).
+- **Dashboard tiles**: snap to grid, persist size/position per board; use masonry only when tile heights
+  genuinely vary.

package/foundation/screen-regions.md

@@ -0,0 +1,62 @@
+# Screen regions — product coverage
+
+Inside the content panel: the region stack (Page header → Toolbar → Body → Footer) and the content layout
+the body takes. All four regions and four content layouts are confirmed; the sweep adds **three-pane** and
+**chart-over-grid** content layouts, plus an **explorer control bar** and **time-range** region variant.
+
+## Regions — with product usage
+
+| Region | Required | Where (files) |
+| --- | --- | --- |
+| **Page header** | yes | `FlotoPageHeader` everywhere (`before-title` / `title` / `after-title` slots), with `back-link`. Variant: **inline mini detail-header** (`inventory/components/monitor-details.vue`) — a sticky breadcrumb/status row inside the two-pane right panel. |
+| **Toolbar / filter bar** | optional | `FlotoPaginatedCrud` `add-controls` slot: search + filter toggle + export (PDF/CSV) + column selector + create. Variant: **explorer control bar** (`MRadioGroup` type + filters + saved-view), and a **time-range picker / time-range slider** region under the header (dashboards, explorers). |
+| **Body** | yes | table (`MGrid`) · form grid (`MRow`/`MCol`, 541/522 files) · dashboard (`vue-grid-layout`) · charts/data-viz · graph canvas. |
+| **Footer / pagination** | optional | `FlotoPaginatedCrud` pager (server-side); form action bars (Save/Cancel in the form footer slot); the fixed **Bulk-action bar** at viewport bottom. |
+
+## Content layouts — with product usage
+
+| Content layout | Where (files) |
+| --- | --- |
+| **Single column** | most settings CRUD + forms + simple lists. |
+| **Two-pane (tree/menu + content)** | `MonitorHierarchyLayout` (log/inventory/topology hierarchy); **Settings** (`splitpanes` left menu + content); policy create (`MMenu` type picker + form). |
+| **Master-detail (list + drawer)** | alert, inventory, **ncm explorer** (multiple drawers), apm/rum drill-downs. |
+| **Dashboard grid** | `vue-grid-layout` tiles (dashboard, ncm, apm, flow) + **masonry** (inventory heatmap). |
+| **Three-pane** *(new)* | `metric-explorer/views/metric-explorer.vue`: saved-views sidebar + metric-picker (`MTab`+`MCollapse`) + chart. |
+| **Chart-over-grid** *(new)* | `trap-viewer` (30% chart above 70% grid); log-dashboard (KPI cards above bubble chart + grid). |
+
+## Coverage verdict
+
+- **All four regions and the four catalogued content layouts are confirmed.**
+- **Add two content layouts:** **three-pane** (saved-views + picker + content, in metric/apm explorers) and
+  **chart-over-grid** (a fixed chart region above a grid).
+- **Add region variants worth naming:** the **explorer control bar** (between header and content in every
+  explorer) and the **global time-range** region (picker/slider) — both currently fold under "Toolbar /
+  filter bar" but behave as their own region.
+- **Left-panel variants** are not one thing: **hierarchy tree** (log), **saved-views sidebar**
+  (metric/apm explorer), **metric-picker** (`MTab`+`MCollapse`), **vertical filter** (ncm) — document them
+  as distinct left-panel kinds within the two-pane layout.
+
+## Notable / different findings
+
+- The **explorer control bar** is the most consistent un-named region: `MRadioGroup` (explorer/chart type) +
+  filters + saved-view actions, sitting between the page header and the visualization in log/apm/flow/metric.
+- **Time-range is a first-class region**, not a header afterthought — dashboards render a dedicated
+  `TimeRangeSlider` row, and explorers a `TimeRangePicker`, scoping the whole body.
+- **Three-pane** (metric-explorer) genuinely exceeds two-pane — a collapsible saved-views rail **and** a
+  metric-picker panel **and** the chart.
+- **Inline detail-header**: the two-pane right panel often gets a sticky `monitor-details` row that *acts as*
+  a page header but is a component — blurring "page header region" vs "detail component".
+- Settings has **no explicit footer**; form Save/Cancel live in the form's footer slot, and pagination is
+  inside `FlotoPaginatedCrud`.
+
+## Best practices
+
+- Start every page with a **Page header** (title + breadcrumb) and put the **primary action** there.
+- Add the **toolbar/filter bar** only when there's something to filter or bulk-act on; in explorers, give it
+  the **control-bar** treatment (type radio + filters + saved view).
+- Put the **time-range** in its own region (header-right picker or a slider row) so it visibly scopes the
+  whole body.
+- The body picks **one** content layout — don't combine a two-pane and a master-detail drawer on the same
+  screen; escalate to **three-pane** only when a saved-views rail *and* a picker are both needed.
+- Map each region to its catalogued component (PageHeader · FilterBar/GridToolbar/BulkActionBar · Table/Form ·
+  FlotoPaginatedCrud pager) — see the Screen-regions **Usage** page for the linked table.

package/index.js

@@ -0,0 +1,75 @@
+'use strict'
+/**
+ * @mtdt/observeops-ds-spec — thin loader.
+ *
+ * AI tools can simply READ the files (start at llms.txt → AGENTS.md → components/index.json).
+ * This module is a convenience for code: it exposes the parsed spec plus a few helpers.
+ * Heavy querying (search, validation) belongs to the MCP server, not here.
+ */
+const fs = require('fs')
+const path = require('path')
+
+const ROOT = __dirname
+const readJSON = (rel) => JSON.parse(fs.readFileSync(path.join(ROOT, rel), 'utf8'))
+const readText = (rel) => fs.readFileSync(path.join(ROOT, rel), 'utf8')
+
+const index = readJSON('components/index.json')
+const recipes = readJSON('components/recipes/recipes.json')
+const manifest = readJSON('spec.manifest.json')
+const layout = { grid: readJSON('layout/grid.json'), layouts: readJSON('layout/layouts.json') }
+const tokens = {
+  variables: readJSON('tokens/variables.json'),
+  structural: readJSON('tokens/structural.json'),
+  kitAccents: readJSON('tokens/kit-accents.json'),
+  purposeMap: readJSON('tokens/purpose-map.json'),
+}
+
+/** Full entry for one component: its index entry + its registry spec (or null if unknown). */
+function getComponent(id) {
+  const entry = (index.components || []).find((c) => c.id === id)
+  if (!entry) return null
+  return { ...entry, registry: readJSON(`components/registry/${id}.json`) }
+}
+
+/** Resolve a token to its value(s). CSS `--var` → {light,dark,...}; LESS `@var` → string. null if unknown. */
+function resolveToken(name) {
+  if (/^--/.test(name)) return tokens.variables[name] || null
+  if (/^@/.test(name)) {
+    if (tokens.kitAccents[name]) return tokens.kitAccents[name]
+    let found = null
+    const walk = (o) => {
+      for (const [k, v] of Object.entries(o)) {
+        if (k === name && typeof v !== 'object') found = v
+        else if (v && typeof v === 'object') walk(v)
+      }
+    }
+    walk(tokens.structural)
+    return found
+  }
+  return null
+}
+
+/** Lightweight list of recipes (id + name + whenToUse) for selection. */
+function listRecipes() {
+  return (recipes.recipes || []).map((r) => ({ id: r.id, name: r.name, whenToUse: r.whenToUse }))
+}
+
+/** Absolute path to any shipped spec file — for tools that prefer to read raw. */
+function specPath(rel) {
+  return path.join(ROOT, rel)
+}
+
+module.exports = {
+  index,
+  recipes,
+  layout,
+  tokens,
+  manifest,
+  version: manifest.version,
+  contract: () => readText('AGENTS.md'),
+  llmsTxt: () => readText('llms.txt'),
+  getComponent,
+  resolveToken,
+  listRecipes,
+  specPath,
+}

package/layout/grid.json

@@ -0,0 +1,34 @@
+{
+  "$description": "The product's layout GRID — MRow / MCol (wrappers over Ant Design Vue 1.x a-row / a-col), a 12-column system. The single way form/page content is laid out.",
+  "system": "MRow + MCol",
+  "columns": 12,
+  "usage": "MRow ~540 files · MCol ~522 files",
+  "sizes": [
+    { "size": 12, "pct": "100%", "use": "full width / single column", "count": "716×" },
+    { "size": 6, "pct": "50%", "use": "half — the default form field width", "count": "729×" },
+    { "size": 3, "pct": "25%", "use": "quarter — 4-up rows, compact fields", "count": "466×" },
+    { "size": 4, "pct": "33.3%", "use": "third — 3-up rows", "count": "256×" },
+    { "size": 2, "pct": "16.6%", "use": "sixth — dense rows", "count": "217×" },
+    { "size": 5, "pct": "41.6%", "use": "occasional asymmetric split", "count": "125×" }
+  ],
+  "gutter": {
+    "form": ":gutter=\"16\" — standard spacing between form fields/rows",
+    "structural": ":gutter=\"0\" — ONLY for structural wrappers (page headers, full-height containers)",
+    "token": "@padding-md = 16px"
+  },
+  "autoSize": "<MCol auto-size> shrinks the column to its content width — for action buttons / compact cells.",
+  "breakpoints": "Ant responsive props (xs/sm/md/lg/xl) supported via per-breakpoint size objects, but rarely used in-product (the app is desktop-first).",
+  "do": [
+    "Use MRow/MCol for all form field layouts.",
+    "Sizes: 6 = half, 12 = full, 3 = quarter, 4 = third.",
+    "gutter 16 for form rows; gutter 0 only for structural wrappers.",
+    "auto-size for action/compact cells; align inside a cell with flex utilities."
+  ],
+  "dont": [
+    "Don't hand-roll a flex grid for form layouts.",
+    "Don't put a gutter on full-height structural wrappers (use gutter 0).",
+    "Don't nest deep grids where a single MRow of sized MCols works."
+  ],
+  "tokensUsed": ["@padding-md"],
+  "storybook": "Foundations/Layout/Grid"
+}

package/layout/layouts.json

@@ -0,0 +1,310 @@
+{
+  "$description": "The product's STRUCTURE layer above the grid — the app shell, the layout shells (4 route + 2 content), the page-level screen regions, the content layouts, and the panel behaviours. Pairs with layout/grid.json (the 12-col grid that fills these regions). Storybook: Foundations/Layout/*.",
+  "appShell": {
+    "$note": "The authenticated app frame — src/views/layouts/main.vue (component `Layout`). Nesting: MLayout(root, flex) > NavBar (left rail) + MLayout.contentContainer > Header (top) + MLayout.main-content-panel > FlotoScrollView > MLayoutContent (the page slot). Plus a global overlay layer.",
+    "regions": [
+      {
+        "region": "NavBar",
+        "where": "left",
+        "size": "@nav-icon-width 50px",
+        "component": "NavBar (layout/navbar.vue)",
+        "what": "primary icon rail — modules, logo, collapse; see Navigation/PrimaryNav",
+        "fixed": true
+      },
+      {
+        "region": "Header",
+        "where": "top",
+        "size": "@header-height 55px",
+        "component": "Header (layout/header.vue)",
+        "what": "breadcrumb / back · global search trigger · notifications · user menu",
+        "fixed": true
+      },
+      {
+        "region": "Content panel",
+        "where": "fill",
+        "size": "flex-1, scrolls",
+        "component": "MLayoutContent inside FlotoScrollView",
+        "what": "the routed page (the <slot/>); the only scrolling region",
+        "fixed": false
+      },
+      {
+        "region": "Overlay layer",
+        "where": "portals / fixed",
+        "size": "—",
+        "component": "OmniBox · CustomNotification · AlertNotification · *ExpireNotification · PortalTarget(omnibox, interface-template)",
+        "what": "global, shell-level, above the content panel",
+        "fixed": true
+      }
+    ]
+  },
+  "$shellsNote": "4 ROUTE shells (selected by the app.vue switcher: not-logged-in → LoginLayout; else Layout; then route.meta.layout override wins) + 2 CONTENT layouts that render inside Layout. Corrected per foundation/layout-shells.md — MonitorHierarchyLayout has 0 route overrides.",
+  "shells": [
+    {
+      "name": "Layout",
+      "kind": "route",
+      "file": "views/layouts/main.vue",
+      "chrome": "NavBar + Header + scroll content + overlays",
+      "use": "every authenticated app page (the DEFAULT — no `layout` route override needed)",
+      "usage": "default for ~all routes",
+      "select": "Standard in-app page."
+    },
+    {
+      "name": "LoginLayout",
+      "kind": "route",
+      "file": "views/layouts/login-layout.vue",
+      "chrome": "bare — MLayout > MLayoutContent > slot; no socket, no chrome",
+      "use": "login / reset / forgot-password + disk-full error; also the not-logged-in fallback",
+      "usage": "meta + unauth fallback",
+      "select": "Unauthenticated auth screen."
+    },
+    {
+      "name": "EmptyLayout",
+      "kind": "route",
+      "file": "views/layouts/empty-layout.vue",
+      "chrome": "NO nav, NO header — padded (p-4) scroll content; keeps socket + local-DB",
+      "use": "full-bleed flow that still needs live data but not the chrome (print-safe report export)",
+      "usage": "1 route override · /reports/export/:id",
+      "select": "Full-screen flow, no nav/header, still authenticated + live."
+    },
+    {
+      "name": "PublicLayout",
+      "kind": "route",
+      "file": "views/layouts/public-layout.vue",
+      "chrome": "like EmptyLayout, full-bleed (-m-4); socket + DB; isMotadataUpdatingOrRestoring",
+      "use": "public / system pages — upgrade or restore in progress",
+      "usage": "2 route overrides · /upgrade /restore",
+      "select": "Public/system page, no chrome."
+    },
+    {
+      "name": "MonitorHierarchyLayout",
+      "kind": "content",
+      "file": "views/layouts/monitor-hierarchy-layout.vue",
+      "chrome": "a CONTENT layout (renders inside Layout): two-pane — left hierarchy tree (collapsible, affixable, transition-width) + content via MRow/MCol gutter 0",
+      "use": "monitor / inventory / topology screens with a tree on the left",
+      "usage": "0 route overrides · component in 4 files",
+      "select": "Tree/hierarchy on the left + detail on the right (NOT a route shell)."
+    },
+    {
+      "name": "Settings two-pane",
+      "kind": "content",
+      "file": "modules/settings/views/main.vue",
+      "chrome": "a CONTENT layout (inside Layout): splitpanes — left menu (MCollapse+MMenu, 15%) + RouterView (85%); hidden via meta.hideSettingsMenu",
+      "use": "every settings submodule",
+      "usage": "settings/views/main.vue",
+      "select": "Settings/admin: left menu + content."
+    }
+  ],
+  "screenRegions": {
+    "$note": "Inside the content panel, a standard page is composed of these regions (top → bottom). Reproduced as the Foundations/Layout/Screen regions story; map to components via index.json.",
+    "regions": [
+      {
+        "region": "Page header",
+        "component": "PageHeader (Toolbars) — title + breadcrumb + primary actions",
+        "usage": "page-header in 54 files",
+        "optional": false
+      },
+      {
+        "region": "Toolbar / filter bar",
+        "component": "GridToolbar · FilterBar · BulkActionBar (Toolbars / Filters)",
+        "usage": "",
+        "optional": true
+      },
+      {
+        "region": "Body",
+        "component": "Table · form (MRow/MCol grid) · dashboard grid · detail panes",
+        "usage": "MRow 541 · MCol 522",
+        "optional": false
+      },
+      {
+        "region": "Footer / pagination",
+        "component": "FlotoPaginatedCrud pager · form action bar (Save/Cancel)",
+        "usage": "",
+        "optional": true
+      }
+    ]
+  },
+  "contentLayouts": [
+    {
+      "name": "Single column",
+      "what": "header + toolbar + body fill the content panel",
+      "use": "list views, simple forms",
+      "grid": "MRow/MCol gutter 16"
+    },
+    {
+      "name": "Two-pane (tree/menu + content)",
+      "what": "left hierarchy/list/menu panel + right detail; left is collapsible/affixable",
+      "use": "explorers, settings (left menu + content)",
+      "grid": "MonitorHierarchyLayout · Settings splitpanes · left-side-list-view-panel (8 files)"
+    },
+    {
+      "name": "Master-detail (list + drawer)",
+      "what": "list/table + a FlotoDrawer slide-over for the record",
+      "use": "alert / inventory record views",
+      "grid": "Drawer (146 files)"
+    },
+    {
+      "name": "Dashboard grid",
+      "what": "draggable/resizable widget tiles on a canvas (+ masonry variant)",
+      "use": "dashboards",
+      "grid": "vue-grid-layout (5 files), --dashboard-background"
+    },
+    {
+      "name": "Three-pane",
+      "what": "saved-views rail + metric-picker + chart",
+      "use": "metric / apm explorers",
+      "grid": "metric-explorer (saved-views + MTab/MCollapse picker + chart)",
+      "$found": "product sweep"
+    },
+    {
+      "name": "Chart-over-grid",
+      "what": "a fixed chart region above a grid",
+      "use": "trap viewer, log dashboards",
+      "grid": "trap-viewer (30% chart / 70% grid)",
+      "$found": "product sweep"
+    }
+  ],
+  "leftPanelVariants": [
+    "hierarchy tree (log)",
+    "saved-views sidebar (metric/apm)",
+    "metric-picker MTab+MCollapse",
+    "vertical filter (ncm)"
+  ],
+  "pageTemplates": {
+    "$note": "The canonical page types (Storybook: Foundations/Layout/Page templates). Full region→component blueprints live in components/recipes/recipes.json — load the recipe id in parens.",
+    "templates": [
+      {
+        "name": "List view",
+        "recipe": "list-view",
+        "what": "paginated collection: header + toolbar + table + pager"
+      },
+      {
+        "name": "Form view",
+        "recipe": "form-view",
+        "what": "create/edit one record on the MRow/MCol grid; often in a drawer"
+      },
+      {
+        "name": "Detail view",
+        "recipe": "detail-view",
+        "what": "one record: header + status/severity + tabs + panels/charts"
+      },
+      {
+        "name": "Dashboard view",
+        "recipe": "dashboard-view",
+        "what": "widget grid + global time range"
+      },
+      {
+        "name": "Explorer view",
+        "recipe": "explorer-view",
+        "what": "left panel + query/filter + results"
+      },
+      {
+        "name": "Wizard flow",
+        "recipe": "wizard-flow",
+        "what": "stepper + step body + Back/Next"
+      },
+      {
+        "name": "Graph / Canvas view",
+        "recipe": "graph-canvas",
+        "what": "hierarchy tree + interactive Cytoscape node graph (Topology)"
+      }
+    ],
+    "variants": [
+      "utility-tool form",
+      "system/status page",
+      "live-tail / streaming",
+      "list⇄dashboard view-toggle",
+      "detail-as-template-swapper",
+      "two wizard shapes (multi-route stateful / single-view stepped)"
+    ],
+    "flows": [
+      "bulk-action-flow",
+      "inline-edit-flow",
+      "search-filter-flow",
+      "export-flow",
+      "confirm-delete-flow (all in recipes.json)"
+    ]
+  },
+  "panels": {
+    "$note": "Panel/overlay BEHAVIOURS — how surfaces open/move/resize. Reproduced as the Foundations/Layout/Panel behaviours story. Counts from foundation/panel-behaviours.md.",
+    "behaviours": [
+      {
+        "behaviour": "Drawer (slide-over)",
+        "component": "FlotoDrawer / a-drawer",
+        "usage": "146 files / 30",
+        "what": "right/left overlay for create/edit/detail; ~40% forms, ~90% deep drill-downs; backdrop; ESC to close"
+      },
+      {
+        "behaviour": "Modal",
+        "component": "a-modal / FlotoConfirmModal / MModal",
+        "usage": "37 files",
+        "what": "centered blocking overlay; confirm/collect; form-in-modal; variant=error for destructive"
+      },
+      {
+        "behaviour": "Collapsible panel",
+        "component": "MCollapse / a-collapse",
+        "usage": "19 files",
+        "what": "accordion sections; left-tree collapse (transition-width)"
+      },
+      {
+        "behaviour": "Expandable rows",
+        "component": "grid row expansion",
+        "usage": "9 files",
+        "what": "inline row→detail disclosure (alert stream, log-grid, apm tree-list)"
+      },
+      {
+        "behaviour": "Resizable / split",
+        "component": "splitpanes (library)",
+        "usage": "~3 true splits",
+        "what": "drag-to-resize panes (settings menu+content, topology tree+graph, apm trace)"
+      },
+      {
+        "behaviour": "Affix / sticky",
+        "component": "CSS/JS sticky (no <a-affix>)",
+        "usage": "scattered",
+        "what": "pin a panel/toolbar/footer on scroll (hierarchy sidebar, wizard footer, time-range)"
+      },
+      {
+        "behaviour": "Dashboard tiles",
+        "component": "vue-grid-layout (+ VueMasonryWall)",
+        "usage": "5 files",
+        "what": "drag + resize widget grid; masonry variant for varying tile heights"
+      },
+      {
+        "behaviour": "Bulk-action bar",
+        "component": "_base-bulk-action-bar",
+        "usage": "2 files",
+        "what": "fixed-bottom bar, appears on multi-selection"
+      },
+      {
+        "behaviour": "Popover",
+        "component": "floating-vue / _base-popper",
+        "usage": "20+",
+        "what": "small contextual, non-blocking overlay (menus, column selectors, sub-tabs)"
+      },
+      {
+        "behaviour": "Full-screen / OmniBox",
+        "component": "OmniBox (portal) · NOC-player",
+        "usage": "few",
+        "what": "global search / immersive overlay above everything"
+      }
+    ],
+    "$notPanel": "Table resizable columns (Ant minResizableWidth, 50+ tables) are a GRID feature, not a panel behaviour."
+  },
+  "tokens": {
+    "@nav-icon-width": "50px (left rail)",
+    "@header-height": "55px (top header)",
+    "@navbar-height": "50px",
+    "@padding-md": "16px (content padding / gutter)",
+    "--nav-panel-bg": "left rail bg",
+    "--common-main-bg": "content area bg",
+    "--dashboard-background": "dashboard canvas bg",
+    "--border-color": "region dividers"
+  },
+  "storybook": {
+    "appShell": "Foundations/Layout/App shell",
+    "shells": "Foundations/Layout/Layout shells",
+    "screenRegions": "Foundations/Layout/Screen regions",
+    "panels": "Foundations/Layout/Panel behaviours",
+    "templates": "Foundations/Layout/Page templates (recipes.json)"
+  }
+}