@dereekb/dbx-components-mcp 13.11.16 → 13.11.18

package/generated/dereekb-dbx-web.css-utilities.mcp.generated.json

@@ -706,7 +706,7 @@
       "source": "@dereekb/dbx-web",
       "module": "@dereekb/dbx-web",
       "file": "src/lib/layout/content/_content.scss",
-      "line": 135,
+      "line": 144,
       "declarations": [
         {
           "property": "margin",
@@ -762,6 +762,47 @@
         "dbx-content-elevate"
       ]
     },
+    {
+      "slug": "content-pit-floating-button",
+      "selector": ".dbx-content-pit-floating-button",
+      "source": "@dereekb/dbx-web",
+      "module": "@dereekb/dbx-web",
+      "file": "src/lib/layout/content/_content.scss",
+      "line": 96,
+      "declarations": [
+        {
+          "property": "float",
+          "value": "right"
+        },
+        {
+          "property": "position",
+          "value": "sticky"
+        },
+        {
+          "property": "top",
+          "value": "$dbx-content-pit-floating-button-margin"
+        },
+        {
+          "property": "z-index",
+          "value": "10"
+        },
+        {
+          "property": "margin-right",
+          "value": "$dbx-content-pit-floating-button-margin"
+        },
+        {
+          "property": "margin-bottom",
+          "value": "$dbx-content-pit-floating-button-margin"
+        }
+      ],
+      "role": "layout",
+      "intent": "floats a button (typically a `dbx-button`) to the top-right of a `.dbx-content-pit` using `position: sticky` so it stays visible while the pit scrolls — used for inline pit actions like expand/collapse or copy",
+      "seeAlso": [
+        "dbx-content-pit",
+        "dbx-content-pit-scrollable"
+      ],
+      "parent": "content-pit"
+    },
     {
       "slug": "content-pit-rounded",
       "selector": ".dbx-content-pit-rounded",
@@ -810,6 +851,35 @@
       ],
       "parent": "content-pit"
     },
+    {
+      "slug": "content-scroll-lock",
+      "selector": ".dbx-content-scroll-lock",
+      "source": "@dereekb/dbx-web",
+      "module": "@dereekb/dbx-web",
+      "file": "src/lib/layout/content/_content.scss",
+      "line": 135,
+      "declarations": [
+        {
+          "property": "height",
+          "value": "100%"
+        },
+        {
+          "property": "overflow",
+          "value": "hidden"
+        },
+        {
+          "property": "padding",
+          "value": "0 2px"
+        }
+      ],
+      "role": "layout",
+      "intent": "locks a region to `height: 100%` with `overflow: hidden` so its children can scroll independently of the page — wrap potentially-infinite-height content (calendars, virtual lists) and let the inner element handle its own `overflow: scroll`",
+      "seeAlso": [
+        "dbx-content",
+        "dbx-content-page",
+        "dbx-scroll-content"
+      ]
+    },
     {
       "slug": "detail-block",
       "selector": ".dbx-detail-block",
@@ -1547,6 +1617,50 @@
         "label-block"
       ]
     },
+    {
+      "slug": "link",
+      "selector": ".dbx-link",
+      "source": "@dereekb/dbx-web",
+      "module": "@dereekb/dbx-web",
+      "file": "src/lib/router/layout/anchor/_anchor.scss",
+      "line": 30,
+      "declarations": [
+        {
+          "property": "text-decoration",
+          "value": "underline"
+        },
+        {
+          "property": "cursor",
+          "value": "pointer"
+        }
+      ],
+      "role": "interaction",
+      "intent": "clickable link affordance — underlined text with pointer cursor; pair with `[dbxTextColor]` or a text color utility for the link color. NOTE: `<dbx-anchor>` renders an inner `<a class=\"dbx-anchor-a\">` with `text-decoration: none`, so apply this class to the projected content (e.g. a `<span>` inside the anchor) rather than the `<dbx-anchor>` host.",
+      "seeAlso": [
+        "link-hover",
+        "dbx-u"
+      ]
+    },
+    {
+      "slug": "link-hover",
+      "selector": ".dbx-link-hover",
+      "source": "@dereekb/dbx-web",
+      "module": "@dereekb/dbx-web",
+      "file": "src/lib/router/layout/anchor/_anchor.scss",
+      "line": 39,
+      "declarations": [
+        {
+          "property": "cursor",
+          "value": "pointer"
+        }
+      ],
+      "role": "interaction",
+      "intent": "clickable link affordance with hover-only underline — pointer cursor always, underline only on hover; pair with `[dbxTextColor]` or a text color utility for the link color. NOTE: `<dbx-anchor>` renders an inner `<a class=\"dbx-anchor-a\">` with `text-decoration: none`, so apply this class to the projected content (e.g. a `<span>` inside the anchor) rather than the `<dbx-anchor>` host.",
+      "seeAlso": [
+        "link",
+        "dbx-u"
+      ]
+    },
     {
       "slug": "list-card-items-list",
       "selector": ".dbx-list-card-items-list",
@@ -1985,6 +2099,27 @@
         "content-elevate"
       ]
     },
+    {
+      "slug": "scroll-content",
+      "selector": ".dbx-scroll-content",
+      "source": "@dereekb/dbx-web",
+      "module": "@dereekb/dbx-web",
+      "file": "src/lib/layout/content/_content.scss",
+      "line": 216,
+      "declarations": [
+        {
+          "property": "padding-bottom",
+          "value": "$scroll-content-bottom-padding"
+        }
+      ],
+      "role": "spacing",
+      "intent": "adds a small bottom padding (~42px) to a scrollable content region so the last item doesn't sit flush against the bottom edge of the viewport — apply to the scrolling element itself (typically a `.dbx-content-container` rendered inside a `dbx-two-column-right`, `dbx-content-page`, or any host whose body overflows)",
+      "seeAlso": [
+        "dbx-content-container",
+        "dbx-content-page",
+        "dbx-content-pit-scrollable"
+      ]
+    },
     {
       "slug": "section",
       "selector": ".dbx-section",

package/generated/dereekb-demo.dbx-docs-ui-examples.mcp.generated.json

@@ -270,10 +270,12 @@
         "dbx-anchor",
         "dbx-icon-tile",
         "mat-form-field",
-        "mat-snack-bar"
+        "mat-snack-bar",
+        "dbx-link",
+        "dbx-link-hover"
       ],
-      "info": "<p>\n  Composes a marketing-style support page out of Angular Material cards plus dbx-web's\n  <code>&lt;dbx-button&gt;</code>\n  ,\n  <code>&lt;dbx-anchor&gt;</code>\n  , and\n  <code>&lt;dbx-icon-tile&gt;</code>\n  : an outlined hero\n  <code>&lt;mat-card&gt;</code>\n  for the search/CTA row and a responsive grid of outlined topic\n  <code>&lt;mat-card&gt;</code>\n  boxes whose rows are individual\n  <code>&lt;dbx-anchor [anchor]&gt;</code>\n  click targets.\n</p>\n<p>\n  The topic grid uses Angular Flex Layout's CSS-Grid directives —\n  <code>gdColumns=\"repeat(auto-fit, minmax(320px, 1fr))\"</code>\n  +\n  <code>gdGap</code>\n  — so the cards auto-collapse 3 → 2 → 1 columns as the viewport narrows, with no breakpoint media queries or wrapping\n  <code>fxFlex</code>\n  shells needed. The hero CTA + search row uses\n  <code>fxLayout=\"row\"</code>\n  with\n  <code>fxLayout.lt-md=\"column\"</code>\n  so it stacks below the tablet breakpoint. The CTA itself composes the\n  <code>.dbx-grow-button</code>\n  +\n  <code>.dbx-button-big</code>\n  utilities (full-width, taller mat-button) instead of hand-rolled\n  <code>::ng-deep</code>\n  width / height overrides.\n</p>\n<p>\n  Topic-card avatars are\n  <code>&lt;dbx-icon-tile [round]&gt;</code>\n  with\n  <code>[dbxColor]=\"'primary'\"</code>\n  +\n  <code>[dbxColorTone]=\"18\"</code>\n  for the tonal swatch. Each card body is a plain\n  <code>&lt;ul&gt;</code>\n  /\n  <code>&lt;li&gt;</code>\n  so the browser's default disc marker supplies the bullet, and topic links use\n  <code>[dbxTextColor]=\"'primary'\"</code>\n  (the\n  <code>&lt;a&gt;</code>\n  inside\n  <code>dbx-anchor</code>\n  already inherits color and is text-decoration-none by default).\n</p>\n<p>\n  Each topic row supplies a\n  <code>ClickableAnchor</code>\n  with an\n  <code>onClick</code>\n  callback to\n  <code>dbx-anchor</code>\n  ; the callback opens a\n  <code>MatSnackBar</code>\n  with a \"Dismiss\" action so every link demonstrably triggers a button-bearing popup. Swap the\n  <code>onClick</code>\n  for a\n  <code>ref</code>\n  /\n  <code>url</code>\n  to route or open externally instead.\n</p>",
-      "snippet": "<div class=\"dbx-p4 doc-support-page\">\n  <h1 class=\"dbx-text-headline-large dbx-mb1\">Lorem Ipsum Support</h1>\n  <p class=\"dbx-text-body-large dbx-mb4\">Dolor sit amet — we're here to help you succeed!</p>\n\n  <mat-card appearance=\"outlined\" class=\"dbx-mb4\">\n    <mat-card-content>\n      <h3 class=\"dbx-text-title-medium dbx-mb3\">Need help? We're here.</h3>\n      <div fxLayout=\"row\" fxLayout.lt-md=\"column\" fxLayoutGap=\"var(--dbx-padding-3)\" fxLayoutAlign=\"start stretch\">\n        <dbx-button class=\"dbx-grow-button dbx-button-form-field-height\" fxFlex=\"1 1 50%\" flat icon=\"help_outline\" text=\"Chat with Support\" customButtonColor=\"var(--mat-sys-inverse-surface)\" customTextColor=\"var(--mat-sys-inverse-on-surface)\" (buttonClick)=\"onChatClick()\"></dbx-button>\n        <mat-form-field class=\"dbx-p0\" appearance=\"outline\" fxFlex=\"1 1 50%\" subscriptSizing=\"dynamic\">\n          <input matInput placeholder=\"Search for a topic or question…\" />\n        </mat-form-field>\n      </div>\n    </mat-card-content>\n  </mat-card>\n\n  <div gdColumns=\"repeat(auto-fit, minmax(320px, 1fr))\" gdGap=\"var(--dbx-padding-5)\">\n    @for (group of topics; track group.title) {\n      <mat-card appearance=\"outlined\">\n        <mat-card-content>\n          <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"var(--dbx-padding-2)\" class=\"dbx-mb3\">\n            <dbx-icon-tile class=\"doc-support-topic-avatar\" [icon]=\"group.icon\" [round]=\"true\"></dbx-icon-tile>\n            <span class=\"dbx-text-title-medium\">{{ group.title }}</span>\n          </div>\n          <ul class=\"doc-support-topic-links\">\n            @for (link of group.links; track link.label) {\n              <li class=\"dbx-pb2\">\n                <dbx-anchor [dbxTextColor]=\"'primary'\" [anchor]=\"anchorFor(link)\">{{ link.label }}</dbx-anchor>\n              </li>\n            }\n          </ul>\n        </mat-card-content>\n      </mat-card>\n    }\n  </div>\n</div>",
+      "info": "<p>\n  Composes a marketing-style support page out of Angular Material cards plus dbx-web's\n  <code>&lt;dbx-button&gt;</code>\n  ,\n  <code>&lt;dbx-anchor&gt;</code>\n  , and\n  <code>&lt;dbx-icon-tile&gt;</code>\n  : an outlined hero\n  <code>&lt;mat-card&gt;</code>\n  for the search/CTA row and a responsive grid of outlined topic\n  <code>&lt;mat-card&gt;</code>\n  boxes whose rows are individual\n  <code>&lt;dbx-anchor [anchor]&gt;</code>\n  click targets.\n</p>\n<p>\n  The topic grid uses Angular Flex Layout's CSS-Grid directives —\n  <code>gdColumns=\"repeat(auto-fit, minmax(320px, 1fr))\"</code>\n  +\n  <code>gdGap</code>\n  — so the cards auto-collapse 3 → 2 → 1 columns as the viewport narrows, with no breakpoint media queries or wrapping\n  <code>fxFlex</code>\n  shells needed. The hero CTA + search row uses\n  <code>fxLayout=\"row\"</code>\n  with\n  <code>fxLayout.lt-md=\"column\"</code>\n  so it stacks below the tablet breakpoint. The CTA itself composes the\n  <code>.dbx-grow-button</code>\n  +\n  <code>.dbx-button-big</code>\n  utilities (full-width, taller mat-button) instead of hand-rolled\n  <code>::ng-deep</code>\n  width / height overrides.\n</p>\n<p>\n  Topic-card avatars are\n  <code>&lt;dbx-icon-tile [round]&gt;</code>\n  with\n  <code>[dbxColor]=\"'primary'\"</code>\n  +\n  <code>[dbxColorTone]=\"18\"</code>\n  for the tonal swatch. Each card body is a plain\n  <code>&lt;ul&gt;</code>\n  /\n  <code>&lt;li&gt;</code>\n  so the browser's default disc marker supplies the bullet, and topic links use\n  <code>[dbxTextColor]=\"'primary'\"</code>\n  for the link color plus a\n  <code>&lt;span class=\"dbx-link-hover\"&gt;</code>\n  wrapper around the projected label for the hover-only-underline affordance. The\n  <code>.dbx-link-hover</code>\n  /\n  <code>.dbx-link</code>\n  utilities pair with\n  <code>.dbx-u</code>\n  —\n  <code>.dbx-link</code>\n  is always underlined,\n  <code>.dbx-link-hover</code>\n  underlines on hover, both keep a pointer cursor. The class lives on the projected\n  <code>&lt;span&gt;</code>\n  rather than the\n  <code>&lt;dbx-anchor&gt;</code>\n  host because\n  <code>dbx-anchor</code>\n  's internal\n  <code>&lt;a class=\"dbx-anchor-a\"&gt;</code>\n  bakes in\n  <code>text-decoration: none</code>\n  and would strip a host-level\n  <code>.dbx-link</code>\n  .\n</p>\n<p>\n  Each topic row supplies a\n  <code>ClickableAnchor</code>\n  with an\n  <code>onClick</code>\n  callback to\n  <code>dbx-anchor</code>\n  ; the callback opens a\n  <code>MatSnackBar</code>\n  with a \"Dismiss\" action so every link demonstrably triggers a button-bearing popup. Swap the\n  <code>onClick</code>\n  for a\n  <code>ref</code>\n  /\n  <code>url</code>\n  to route or open externally instead.\n</p>",
+      "snippet": "<div class=\"dbx-p4 doc-support-page\">\n  <h1 class=\"dbx-text-headline-large dbx-mb1\">Lorem Ipsum Support</h1>\n  <p class=\"dbx-text-body-large dbx-mb4\">Dolor sit amet — we're here to help you succeed!</p>\n\n  <mat-card appearance=\"outlined\" class=\"dbx-mb4\">\n    <mat-card-content>\n      <h3 class=\"dbx-text-title-medium dbx-mb3\">Need help? We're here.</h3>\n      <div fxLayout=\"row\" fxLayout.lt-md=\"column\" fxLayoutGap=\"var(--dbx-padding-3)\" fxLayoutAlign=\"start stretch\">\n        <dbx-button class=\"dbx-grow-button dbx-button-form-field-height\" fxFlex=\"1 1 50%\" flat icon=\"help_outline\" text=\"Chat with Support\" customButtonColor=\"var(--mat-sys-inverse-surface)\" customTextColor=\"var(--mat-sys-inverse-on-surface)\" (buttonClick)=\"onChatClick()\"></dbx-button>\n        <mat-form-field class=\"dbx-p0\" appearance=\"outline\" fxFlex=\"1 1 50%\" subscriptSizing=\"dynamic\">\n          <input matInput placeholder=\"Search for a topic or question…\" />\n        </mat-form-field>\n      </div>\n    </mat-card-content>\n  </mat-card>\n\n  <div gdColumns=\"repeat(auto-fit, minmax(320px, 1fr))\" gdGap=\"var(--dbx-padding-5)\">\n    @for (group of topics; track group.title) {\n      <mat-card appearance=\"outlined\">\n        <mat-card-content>\n          <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"var(--dbx-padding-2)\" class=\"dbx-mb3\">\n            <dbx-icon-tile class=\"doc-support-topic-avatar\" [icon]=\"group.icon\" [round]=\"true\"></dbx-icon-tile>\n            <span class=\"dbx-text-title-medium\">{{ group.title }}</span>\n          </div>\n          <ul class=\"doc-support-topic-links\">\n            @for (link of group.links; track link.label) {\n              <li class=\"dbx-pb2\">\n                <dbx-anchor [dbxTextColor]=\"'primary'\" [anchor]=\"anchorFor(link)\">\n                  <span class=\"dbx-link-hover\">{{ link.label }}</span>\n                </dbx-anchor>\n              </li>\n            }\n          </ul>\n        </mat-card-content>\n      </mat-card>\n    }\n  </div>\n</div>",
       "uses": []
     }
   ]

package/generated/rule-catalog.generated.json

@@ -647,6 +647,70 @@
       }
     ]
   },
+  {
+    "code": "MODEL_GROUP_MISSING_CRUD_SPEC",
+    "source": "dbx_model_test_validate_app",
+    "severity": "warning",
+    "title": "A model group declared on the component side has no `<group>.crud.spec.ts`",
+    "whatItFlags": "A model group declared on the component side has no `<group>.crud.spec.ts`\nfile on the API side. Every model group is expected to have at least a\nbaseline CRUD spec exercising create / read / update / delete plus\npermission paths. Scenario specs are optional.",
+    "whenItApplies": "Every model group enumerated from the `-firebase` component (`<componentDir>/src/lib/model/<group>/`) that doesn't have a matching `<group>.crud.spec.ts` under `<apiDir>/src/app/function/<group>/`.",
+    "whenItDoesNotApply": "Reserved folders (`system`, `notification`, `storagefile`) — those follow distinct test layouts. Cross-group integration tests likewise don't satisfy this rule for their host group.",
+    "canonicalFix": "Add `<apiDir>/src/app/function/<group>/<group>.crud.spec.ts` covering the CRUD function map for the group. Use `dbx_model_test_convention` to fetch the canonical path.",
+    "seeAlso": [
+      {
+        "kind": "tool",
+        "target": "dbx_model_test_convention"
+      }
+    ]
+  },
+  {
+    "code": "TEST_FILE_DRIFT_RENAME",
+    "source": "dbx_model_test_validate_app",
+    "severity": "warning",
+    "title": "Spec filename uses a `crud` / `scenario` segment that is not directly",
+    "whatItFlags": "Spec filename uses a `crud` / `scenario` segment that is not directly\nafter the group name (e.g. `worker.payroll.scenario.spec.ts` or\n`worker.pay.crud.spec.ts`). The canonical form places the bucket\nmarker immediately after the group: `<group>.scenario.<sub>.spec.ts`\nor `<group>.crud.<sub>.spec.ts`.",
+    "whenItApplies": "Any spec file under `<apiDir>/src/app/function/<group>/` where the `crud` / `scenario` segment is not the first non-group segment.",
+    "whenItDoesNotApply": "Canonical subgroup names like `job.crud.requirement.spec.ts` — there `crud` is already first.",
+    "canonicalFix": "Rename to the canonical `<group>.<bucket>.<sub>.spec.ts` form. The validator emits the recommended filename as part of the violation message.",
+    "seeAlso": [
+      {
+        "kind": "tool",
+        "target": "dbx_model_test_convention"
+      }
+    ]
+  },
+  {
+    "code": "TEST_FILE_MISSING_BUCKET",
+    "source": "dbx_model_test_validate_app",
+    "severity": "warning",
+    "title": "Spec filename is missing a `crud` / `scenario` bucket segment entirely",
+    "whatItFlags": "Spec filename is missing a `crud` / `scenario` bucket segment entirely\n(e.g. `worker.system.spec.ts`). The validator can't tell whether the\nfile documents CRUD behavior or a workflow scenario — the author must\nchoose one.",
+    "whenItApplies": "Spec files where no segment after the group name is `crud` or `scenario`.",
+    "whenItDoesNotApply": "Files that already have a `crud` / `scenario` marker anywhere in the name (those surface `TEST_FILE_DRIFT_RENAME` instead when misplaced).",
+    "canonicalFix": "Decide whether the file's tests are CRUD-flavored or scenario-flavored, then rename to `<group>.crud.<sub>.spec.ts` or `<group>.scenario.<sub>.spec.ts`. Default to `scenario` when in doubt.",
+    "seeAlso": [
+      {
+        "kind": "tool",
+        "target": "dbx_model_test_convention"
+      }
+    ]
+  },
+  {
+    "code": "TEST_FILE_NON_GROUP_PLACEMENT",
+    "source": "dbx_model_test_validate_app",
+    "severity": "warning",
+    "title": "Spec file's first filename segment doesn't match its parent folder",
+    "whatItFlags": "Spec file's first filename segment doesn't match its parent folder\n(e.g. `storagefile.scenario.jobrequirement.spec.ts` placed under the\n`job/` folder). Tests should live in the folder of the model group\nnamed by their filename prefix.",
+    "whenItApplies": "Any `.spec.ts` whose first dot-separated segment differs from the immediate parent folder name.",
+    "whenItDoesNotApply": "Spec files that intentionally test cross-model integration — move those to the primary group's folder and rename so the prefix matches, or keep them as scenario sub-buckets of one side.",
+    "canonicalFix": "Move the file into `<apiDir>/src/app/function/<first-segment>/` so the prefix matches the folder, or rename the file's first segment to match the current folder.",
+    "seeAlso": [
+      {
+        "kind": "tool",
+        "target": "dbx_model_test_convention"
+      }
+    ]
+  },
   {
     "code": "FILE_GROUP_INTERFACE_AFTER_MODEL",
     "source": "dbx_model_validate",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dereekb/dbx-components-mcp",
-  "version": "13.11.16",
+  "version": "13.11.18",
   "type": "module",
   "bin": {
     "dbx-components-mcp": "dbx-components-mcp.js"
@@ -15,19 +15,19 @@
     "@angular/core": "21.2.11",
     "@angular/forms": "21.2.11",
     "@angular/material": "^21.2.9",
-    "@dereekb/dbx-cli": "13.11.16",
-    "@dereekb/dbx-core": "13.11.16",
-    "@dereekb/dbx-firebase": "13.11.16",
-    "@dereekb/dbx-form": "13.11.16",
-    "@dereekb/dbx-web": "13.11.16",
-    "@dereekb/firebase": "13.11.16",
-    "@dereekb/firebase-server": "13.11.16",
-    "@dereekb/rxjs": "13.11.16",
-    "@dereekb/util": "13.11.16",
+    "@dereekb/dbx-cli": "13.11.18",
+    "@dereekb/dbx-core": "13.11.18",
+    "@dereekb/dbx-firebase": "13.11.18",
+    "@dereekb/dbx-form": "13.11.18",
+    "@dereekb/dbx-web": "13.11.18",
+    "@dereekb/firebase": "13.11.18",
+    "@dereekb/firebase-server": "13.11.18",
+    "@dereekb/rxjs": "13.11.18",
+    "@dereekb/util": "13.11.18",
     "@uirouter/angular": "21.0.0",
     "rxjs": "^7.8.2"
   },
   "devDependencies": {
-    "@dereekb/model": "13.11.16"
+    "@dereekb/model": "13.11.18"
   }
 }