@dereekb/dbx-components-mcp 13.11.15 → 13.11.17

package/generated/dereekb-date.utils.mcp.generated.json

@@ -866,6 +866,146 @@
         "date-cell-index-range"
       ]
     },
+    {
+      "slug": "date-cell-schedule-encoded-week-regex",
+      "name": "DATE_CELL_SCHEDULE_ENCODED_WEEK_REGEX",
+      "kind": "const",
+      "category": "date",
+      "module": "@dereekb/date",
+      "subpath": "date/date.cell.schedule",
+      "signature": "const DATE_CELL_SCHEDULE_ENCODED_WEEK_REGEX: RegExp",
+      "description": "Regex that loosely validates a {@link DateCellScheduleEncodedWeek}.\n\nMatches zero-to-nine digit characters (any of `0-9`). Does not enforce ascending order or uniqueness of\ndigits — use {@link isDateCellScheduleEncodedWeek} for a runtime check that mirrors the type, or\n{@link dateCellScheduleEncodedWeek} to build a guaranteed-valid encoding from {@link DateCellScheduleDayCode}\nvalues.",
+      "params": [],
+      "returns": "RegExp",
+      "tags": [
+        "date",
+        "schedule",
+        "encoded",
+        "week",
+        "regex",
+        "validate",
+        "days",
+        "cell",
+        "date_cell_schedule_encoded_week_regex"
+      ],
+      "relatedSlugs": [
+        "is-date-cell-schedule-encoded-week",
+        "date-cell-schedule-encoded-week"
+      ]
+    },
+    {
+      "slug": "is-date-cell-schedule-encoded-week",
+      "name": "isDateCellScheduleEncodedWeek",
+      "kind": "function",
+      "category": "date",
+      "module": "@dereekb/date",
+      "subpath": "date/date.cell.schedule",
+      "signature": "isDateCellScheduleEncodedWeek(input: string): input is DateCellScheduleEncodedWeek",
+      "description": "Type guard that returns true if the input matches the {@link DATE_CELL_SCHEDULE_ENCODED_WEEK_REGEX} encoded-week format.\n\nThe regex check is loose — it allows duplicate digits and any digit ordering. To produce a canonically simplified\nencoding, use {@link dateCellScheduleEncodedWeek}.",
+      "params": [
+        {
+          "name": "input",
+          "type": "string",
+          "description": "- String to validate against the encoded week regex.",
+          "optional": false
+        }
+      ],
+      "returns": "Whether the string matches the encoded week format.",
+      "tags": [
+        "date",
+        "schedule",
+        "encoded",
+        "week",
+        "type-guard",
+        "validate",
+        "check",
+        "days",
+        "is",
+        "cell",
+        "isdatecellscheduleencodedweek"
+      ],
+      "example": "isDateCellScheduleEncodedWeek('24');  // true (Mon + Wed)\nisDateCellScheduleEncodedWeek('8');   // true (WEEKDAY shorthand)\nisDateCellScheduleEncodedWeek('');    // true (no days)\nisDateCellScheduleEncodedWeek('abc'); // false",
+      "relatedSlugs": [
+        "date-cell-schedule-encoded-week-regex",
+        "is-empty-date-cell-schedule-encoded-week",
+        "date-cell-schedule-encoded-week"
+      ]
+    },
+    {
+      "slug": "is-empty-date-cell-schedule-encoded-week",
+      "name": "isEmptyDateCellScheduleEncodedWeek",
+      "kind": "function",
+      "category": "date",
+      "module": "@dereekb/date",
+      "subpath": "date/date.cell.schedule",
+      "signature": "isEmptyDateCellScheduleEncodedWeek(input: string): input is DateCellScheduleEncodedWeek",
+      "description": "Returns true if the input represents an empty (no days selected) {@link DateCellScheduleEncodedWeek}.\n\nBoth the empty string `''` and `'0'` are treated as empty since `0` corresponds to\n{@link DateCellScheduleDayCode.NONE}, the no-op day code.",
+      "params": [
+        {
+          "name": "input",
+          "type": "string",
+          "description": "- String to check for emptiness.",
+          "optional": false
+        }
+      ],
+      "returns": "Whether the encoded week represents no selected days.",
+      "tags": [
+        "date",
+        "schedule",
+        "encoded",
+        "week",
+        "empty",
+        "check",
+        "type-guard",
+        "days",
+        "is",
+        "cell",
+        "isemptydatecellscheduleencodedweek"
+      ],
+      "example": "isEmptyDateCellScheduleEncodedWeek('');  // true\nisEmptyDateCellScheduleEncodedWeek('0'); // true (NONE code)\nisEmptyDateCellScheduleEncodedWeek('8'); // false (WEEKDAY)\nisEmptyDateCellScheduleEncodedWeek('24'); // false (Mon + Wed)",
+      "relatedSlugs": [
+        "is-date-cell-schedule-encoded-week",
+        "date-cell-schedule-encoded-week"
+      ]
+    },
+    {
+      "slug": "date-cell-schedule-encoded-week",
+      "name": "dateCellScheduleEncodedWeek",
+      "kind": "function",
+      "category": "date",
+      "module": "@dereekb/date",
+      "subpath": "date/date.cell.schedule",
+      "signature": "dateCellScheduleEncodedWeek(codes: Iterable<DateCellScheduleDayCode>): DateCellScheduleEncodedWeek",
+      "description": "Creates a simplified {@link DateCellScheduleEncodedWeek} from an iterable of {@link DateCellScheduleDayCode} values.\n\nCodes are passed through {@link simplifyDateCellScheduleDayCodes} so redundant individual day codes are collapsed\ninto shorthand (e.g. Mon-Fri becomes WEEKDAY `8`, Sat+Sun becomes WEEKEND `9`) and digits are emitted in ascending order.",
+      "params": [
+        {
+          "name": "codes",
+          "type": "Iterable<DateCellScheduleDayCode>",
+          "description": "- Day codes to encode into the compact string representation.",
+          "optional": false
+        }
+      ],
+      "returns": "The encoded week string.",
+      "tags": [
+        "date",
+        "schedule",
+        "encoded",
+        "week",
+        "encode",
+        "days",
+        "simplify",
+        "weekday",
+        "weekend",
+        "cell",
+        "datecellscheduleencodedweek"
+      ],
+      "example": "// Encode weekdays only — collapses into the WEEKDAY shorthand\ndateCellScheduleEncodedWeek([DateCellScheduleDayCode.MONDAY, DateCellScheduleDayCode.TUESDAY, DateCellScheduleDayCode.WEDNESDAY, DateCellScheduleDayCode.THURSDAY, DateCellScheduleDayCode.FRIDAY]);\n// Returns '8'\n\n// Encode specific days\ndateCellScheduleEncodedWeek([DateCellScheduleDayCode.MONDAY, DateCellScheduleDayCode.WEDNESDAY]);\n// Returns '24'\n\n// Encode the full week\ndateCellScheduleEncodedWeek([DateCellScheduleDayCode.WEEKDAY, DateCellScheduleDayCode.WEEKEND]);\n// Returns '89'",
+      "relatedSlugs": [
+        "is-date-cell-schedule-encoded-week",
+        "simplify-date-cell-schedule-day-codes",
+        "expand-date-cell-schedule-day-codes"
+      ]
+    },
     {
       "slug": "time-duration-data-is-empty",
       "name": "timeDurationDataIsEmpty",

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

@@ -1547,6 +1547,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",

package/generated/dereekb-dbx-web.ui-components.mcp.generated.json

@@ -1928,6 +1928,170 @@
       "example": "<dbx-bar>\n  <span>Title</span>\n  <dbx-spacer></dbx-spacer>\n  <button mat-button>Action</button>\n</dbx-bar>",
       "minimalExample": "<dbx-spacer></dbx-spacer>"
     },
+    {
+      "slug": "style-body",
+      "category": "layout",
+      "kind": "directive",
+      "selector": "[dbxStyleBody]",
+      "className": "DbxStyleBodyDirective",
+      "module": "@dereekb/dbx-web",
+      "description": "Applies the current application style class from {@link DbxStyleService} to the document `<body>` element.\n\nPlace this directive on a root-level element so that the body tag receives the active style class.",
+      "inputs": [],
+      "outputs": [],
+      "relatedSlugs": [
+        "style",
+        "style-service",
+        "set-style"
+      ],
+      "example": "<div dbxStyleBody></div>",
+      "minimalExample": "<div dbxStyleBody></div>"
+    },
+    {
+      "slug": "color",
+      "category": "layout",
+      "kind": "directive",
+      "selector": "[dbxColor]",
+      "className": "DbxColorDirective",
+      "module": "@dereekb/dbx-web",
+      "description": "Applies a themed background color to the host element.\n\nAccepts either a {@link DbxThemeColor} string (e.g. `'primary'`, `'success'`) or a {@link DbxColorConfig}\nobject carrying arbitrary CSS color values (any hex, `rgb()`, `hsl()`, `var(...)`, `color-mix(...)`, etc.).\n\nOptionally set {@link dbxColorTone} (0-100) to control background opacity for a tonal/muted appearance.\nWhen tonal mode is active, the `dbx-color-tonal` CSS class is added and a CSS rule overrides the text\ncolor to the vibrant color (via `--dbx-bg-color-current`).\n\nThe standalone `[dbxColorTone]` input wins over `config.tone` when both are set; the same precedence\napplies to tonal mode.",
+      "inputs": [
+        {
+          "name": "dbxColor",
+          "type": "Maybe<DbxColorInput>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "dbxColorTone",
+          "type": "Maybe<DbxColorTone>",
+          "description": "Background tone level (0-100). When set, the background becomes semi-transparent\nand text color switches to the vibrant theme color for a tonal appearance.",
+          "required": false
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "text-color",
+        "color-service"
+      ],
+      "example": "<div [dbxColor]=\"'primary'\">Themed background</div>\n<div [dbxColor]=\"'primary'\" [dbxColorTone]=\"18\">Tonal themed</div>\n<div [dbxColor]=\"{ color: '#ff0066', contrast: 'white' }\">Custom hex</div>\n<div [dbxColor]=\"{ color: 'var(--mat-sys-tertiary)', contrast: 'var(--mat-sys-on-tertiary)', tone: 18 }\">Custom tonal</div>",
+      "minimalExample": "<div [dbxColor]=\"'primary'\"></div>"
+    },
+    {
+      "slug": "color-service",
+      "category": "layout",
+      "kind": "service",
+      "selector": "",
+      "className": "DbxColorService",
+      "module": "@dereekb/dbx-web",
+      "description": "Service that registers named {@link DbxColorConfigTemplate} entries and expands\n{@link DbxColorConfig} values that reference a template by key.\n\nSeeded via `provideDbxStyleService({ dbxColorServiceConfig: { templates: [...] } })`,\nthen injected by {@link DbxColorDirective} and {@link DbxTextColorDirective} to resolve\ntemplate references at render time.",
+      "inputs": [],
+      "outputs": [],
+      "relatedSlugs": [
+        "color",
+        "text-color",
+        "style-service"
+      ],
+      "example": "const colorService = inject(DbxColorService);\ncolorService.register({ key: 'brand-positive', config: { color: '#1f9b59', contrast: 'white', tone: 18 } });\ncolorService.expandColorConfig({ template: 'brand-positive' });\n// -> { template: 'brand-positive', color: '#1f9b59', contrast: 'white', tone: 18 }"
+    },
+    {
+      "slug": "style",
+      "category": "layout",
+      "kind": "directive",
+      "selector": "dbx-style, [dbxStyle], .dbx-style",
+      "className": "DbxStyleDirective",
+      "module": "@dereekb/dbx-web",
+      "description": "Applies the current application style class from {@link DbxStyleService} to the host element.\n\nUse this directive to propagate the active style class onto any element or component.",
+      "inputs": [],
+      "outputs": [],
+      "relatedSlugs": [
+        "style-service",
+        "style-body",
+        "set-style"
+      ],
+      "example": "<div dbxStyle>Styled content</div>",
+      "minimalExample": "<div dbxStyle></div>"
+    },
+    {
+      "slug": "style-service",
+      "category": "layout",
+      "kind": "service",
+      "selector": "",
+      "className": "DbxStyleService",
+      "module": "@dereekb/dbx-web",
+      "description": "Manages application-wide style classes and suffix modes (e.g., dark mode).\n\nConsumers can set a default style config, override it with an observable config,\nand toggle style suffixes to switch between style variants at runtime.\n\nProvided via `provideDbxStyleService()` from `style.providers`.",
+      "inputs": [],
+      "outputs": [],
+      "relatedSlugs": [
+        "style",
+        "set-style",
+        "style-body",
+        "color-service"
+      ],
+      "example": "const styleService = inject(DbxStyleService);\nstyleService.toggleDarkSuffix();           // toggle dark mode on/off\nstyleService.setStyleClassSuffix('dark');  // force dark mode"
+    },
+    {
+      "slug": "set-style",
+      "category": "layout",
+      "kind": "directive",
+      "selector": "[dbxSetStyle]",
+      "className": "DbxSetStyleDirective",
+      "module": "@dereekb/dbx-web",
+      "description": "Sets the active application style for child elements and/or the global {@link DbxStyleService}.\n\nAccepts a {@link DbxStyleName} and optional suffixes, then applies the computed style class\ndepending on the configured {@link DbxSetStyleMode}.",
+      "inputs": [
+        {
+          "name": "setStyleMode",
+          "type": "DbxSetStyleMode",
+          "description": "The mode for the style.\n\n- global: The style will be set on the parent DbxStyleService.\n- self: The style will be applied to the host element.",
+          "required": false,
+          "default": "'self'"
+        },
+        {
+          "name": "dbxSetStyle",
+          "type": "DbxStyleName",
+          "description": "The input DbxStyleName to style the host element with.",
+          "required": false
+        },
+        {
+          "name": "suffixes",
+          "type": "Maybe<string>",
+          "description": "The input suffixes to allow to be applied to the",
+          "required": false,
+          "default": "undefined"
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "style",
+        "style-service",
+        "style-body"
+      ],
+      "example": "<div [dbxSetStyle]=\"'my-app'\" [setStyleMode]=\"'both'\" [suffixes]=\"'dark'\">\n  <!-- Children inherit 'my-app' or 'my-app-dark' styling -->\n</div>",
+      "minimalExample": "<div [dbxSetStyle]=\"'my-app'\"></div>"
+    },
+    {
+      "slug": "text-color",
+      "category": "layout",
+      "kind": "directive",
+      "selector": "[dbxTextColor]",
+      "className": "DbxTextColorDirective",
+      "module": "@dereekb/dbx-web",
+      "description": "Applies a themed text color to the host element.\n\nAccepts either a {@link DbxThemeColor} string (e.g. `'primary'`, `'warn'`) or a {@link DbxColorConfig}\nobject carrying an arbitrary CSS color value. Unlike {@link DbxColorDirective} which sets the background,\nthis directive only sets the foreground text color.",
+      "inputs": [
+        {
+          "name": "dbxTextColor",
+          "type": "Maybe<DbxColorInput>",
+          "description": "",
+          "required": false
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "color",
+        "color-service"
+      ],
+      "example": "<mat-icon [dbxTextColor]=\"'warn'\">error</mat-icon>\n<span [dbxTextColor]=\"'primary'\">Themed text</span>\n<span [dbxTextColor]=\"{ color: '#0066ff' }\">Custom hex text</span>",
+      "minimalExample": "<span [dbxTextColor]=\"'primary'\"></span>"
+    },
     {
       "slug": "click-to-copy-text",
       "category": "text",

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

@@ -264,7 +264,7 @@
     "whatItFlags": "A composite index required by tagged factories is missing from the committed `firestore.indexes.json`.",
     "whenItApplies": "Every entry in the generated composite set that has no equal entry in the committed JSON.",
     "whenItDoesNotApply": "Factories tagged `@dbxModelFirebaseIndexManual` — their shapes are author-managed and excluded from drift.",
-    "canonicalFix": "Run the `scan-model-firebase-indexes` / `generate-firestore-indexes` CLIs and commit the regenerated `firestore.indexes.json`."
+    "canonicalFix": "Run `dbx-cli-generate-firestore-indexes --component <dir>` (and the `scan-model-firebase-indexes` CLI if the manifest is also stale) and commit the regenerated `firestore.indexes.json`."
   },
   {
     "code": "MODEL_FIREBASE_INDEX_COMPOSITE_REMOVED",
@@ -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.15",
+  "version": "13.11.17",
   "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.15",
-    "@dereekb/dbx-core": "13.11.15",
-    "@dereekb/dbx-firebase": "13.11.15",
-    "@dereekb/dbx-form": "13.11.15",
-    "@dereekb/dbx-web": "13.11.15",
-    "@dereekb/firebase": "13.11.15",
-    "@dereekb/firebase-server": "13.11.15",
-    "@dereekb/rxjs": "13.11.15",
-    "@dereekb/util": "13.11.15",
+    "@dereekb/dbx-cli": "13.11.17",
+    "@dereekb/dbx-core": "13.11.17",
+    "@dereekb/dbx-firebase": "13.11.17",
+    "@dereekb/dbx-form": "13.11.17",
+    "@dereekb/dbx-web": "13.11.17",
+    "@dereekb/firebase": "13.11.17",
+    "@dereekb/firebase-server": "13.11.17",
+    "@dereekb/rxjs": "13.11.17",
+    "@dereekb/util": "13.11.17",
     "@uirouter/angular": "21.0.0",
     "rxjs": "^7.8.2"
   },
   "devDependencies": {
-    "@dereekb/model": "13.11.15"
+    "@dereekb/model": "13.11.17"
   }
 }