@dereekb/dbx-components-mcp 14.9.0 → 14.11.0

package/dbx-components-mcp.js

@@ -10,7 +10,7 @@ var __export = (target, all) => {
 // packages/dbx-components-mcp/package.json
 var package_default = {
   name: "@dereekb/dbx-components-mcp",
-  version: "14.9.0",
+  version: "14.11.0",
   sideEffects: false,
   type: "module",
   bin: {
@@ -22,8 +22,8 @@ var package_default = {
     "ts-morph": "^21.0.0"
   },
   peerDependencies: {
-    "@dereekb/dbx-cli": "14.9.0",
-    "@dereekb/util": "14.9.0"
+    "@dereekb/dbx-cli": "14.11.0",
+    "@dereekb/util": "14.11.0"
   }
 };
 

package/generated/dereekb-dbx-core.filters.mcp.generated.json

@@ -83,6 +83,31 @@
         "dbx__ref__dbx-component-patterns"
       ]
     },
+    {
+      "kind": "directive",
+      "slug": "map-merge-source",
+      "selector": "[dbxFilterMapMergeSource]",
+      "className": "DbxFilterMapMergeSourceDirective",
+      "module": "@dereekb/dbx-core",
+      "description": "Provides a read-only {@link FilterSource} that merges the filters of several keys in an ancestor {@link FilterMap} into one filter. Lets separate filter controls (e.g. a date popover and an attributes popover) each own a key while children consume a single combined filter.\n\nKeys later in the array win when two keys set the same field, and the merged filter has no `preset`. Every key needs a value (e.g. a default filter) before the merged filter emits.",
+      "inputs": [
+        {
+          "name": "dbxFilterMapMergeSource",
+          "type": "Maybe<FilterMapKey[]>",
+          "description": "The map keys to merge, in priority order."
+        }
+      ],
+      "outputs": [],
+      "example": "<div dbxFilterMap>\n  <my-date-filter-button [dbxFilterMapSourceConnector]=\"'date'\"></my-date-filter-button>\n  <my-attributes-filter-button [dbxFilterMapSourceConnector]=\"'attributes'\"></my-attributes-filter-button>\n  <div [dbxFilterMapMergeSource]=\"['date', 'attributes']\">\n    <my-filtered-list></my-filtered-list>\n  </div>\n</div>",
+      "relatedSlugs": [
+        "map",
+        "map-source",
+        "map-source-connector"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-component-patterns"
+      ]
+    },
     {
       "kind": "directive",
       "slug": "map-source",
@@ -107,6 +132,31 @@
         "dbx__ref__dbx-component-patterns"
       ]
     },
+    {
+      "kind": "directive",
+      "slug": "map-storage",
+      "selector": "[dbxFilterMapStorage]",
+      "className": "DbxFilterMapStorageDirective",
+      "module": "@dereekb/dbx-core",
+      "description": "Saves the filter of a keyed entry in an ancestor {@link FilterMap} to storage (localStorage by default), and loads it again when the page loads. The saved filter becomes the key's default filter, and every later change to the key is saved.\n\nUse {@link reset} to set the key back to its default filter and remove the saved filter.\n\nRequires {@link provideDbxFilterStorage}.",
+      "inputs": [
+        {
+          "name": "dbxFilterMapStorage",
+          "type": "Maybe<DbxFilterMapStorageConfig<F, J>>",
+          "description": "The key to save and how to save it."
+        }
+      ],
+      "outputs": [],
+      "example": "<div dbxFilterMap>\n  <my-filter-button [dbxFilterMapSourceConnector]=\"'list'\" [dbxFilterMapStorage]=\"{ key: 'list', storageKey: 'my.list.filter', defaultFilter: {} }\"></my-filter-button>\n</div>",
+      "relatedSlugs": [
+        "map",
+        "map-source-connector",
+        "map-merge-source"
+      ],
+      "skillRefs": [
+        "dbx__ref__dbx-component-patterns"
+      ]
+    },
     {
       "kind": "pattern",
       "slug": "clickable-preset",

package/generated/dereekb-dbx-form.forge-fields.mcp.generated.json

@@ -176,6 +176,27 @@
       "generic": "<T = unknown>",
       "configInterface": "DbxForgeComponentFieldConfig<T>"
     },
+    {
+      "slug": "radio",
+      "factoryName": "dbxForgeRadioField",
+      "tier": "field-factory",
+      "produces": "T",
+      "arrayOutput": "no",
+      "description": "Radio button group for picking exactly one value, wrapped in a form-field container. Use for small static option sets where every option should be visible at once.\n\nThe wrapper provides the Material outlined form-field appearance (notched outline with floating label, hint/error subscript), matching the checkbox, toggle, and slider fields.\n\nOptions are passed at the top level of the config, not inside `props`. A `null` option value can represent an \"any\"/\"none\" choice; the form omits the key from its output when that option is selected.\nSet `nullable: true` alongside a `null` option, otherwise a `null` value (including `value: null` as the default) resolves to no selection instead of checking that option.",
+      "example": "dbxForgeRadioField<number>({\n  key: 'minPay',\n  label: 'Minimum Pay Rate',\n  layout: 'vertical',\n  options: [\n    { label: '$120+', value: 120 },\n    { label: '$150+', value: 150 }\n  ]\n})",
+      "properties": [
+        {
+          "name": "layout",
+          "type": "Maybe<DbxForgeRadioFieldLayout>",
+          "description": "How the radio buttons are laid out. Defaults to `'horizontal'`.",
+          "required": false
+        }
+      ],
+      "wrapperPattern": "material-form-field-wrapped",
+      "ngFormType": "radio",
+      "generic": "<T = unknown>",
+      "configInterface": "DbxForgeRadioFieldConfig<T>"
+    },
     {
       "slug": "value-selection",
       "factoryName": "dbxForgeValueSelectionField",

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

@@ -1066,6 +1066,93 @@
         "--dbx-padding-3"
       ]
     },
+    {
+      "slug": "card-image-caption",
+      "selector": ".dbx-card-image-captioned",
+      "source": "@dereekb/dbx-web",
+      "module": "@dereekb/dbx-web",
+      "file": "src/lib/layout/card/_card.scss",
+      "line": 301,
+      "declarations": [
+        {
+          "property": "position",
+          "value": "absolute"
+        },
+        {
+          "property": "left",
+          "value": "0"
+        },
+        {
+          "property": "right",
+          "value": "0"
+        },
+        {
+          "property": "bottom",
+          "value": "0"
+        },
+        {
+          "property": "padding",
+          "value": "var(--dbx-padding-2) var(--dbx-padding-4)"
+        },
+        {
+          "property": "color",
+          "value": "white"
+        },
+        {
+          "property": "background",
+          "value": "color-mix(in srgb, var(--mat-sys-scrim, black) 55%, transparent)"
+        },
+        {
+          "property": "white-space",
+          "value": "nowrap"
+        },
+        {
+          "property": "overflow",
+          "value": "hidden"
+        },
+        {
+          "property": "text-overflow",
+          "value": "ellipsis"
+        }
+      ],
+      "role": "layout",
+      "intent": "single-line caption strip across the bottom of a `.dbx-card-image-captioned` image — light text on a translucent `--mat-sys-scrim` wash that stays readable over any picture in light and dark themes; long text ellipsizes. Pair with a type role utility such as `.dbx-text-title-small`.",
+      "seeAlso": [
+        "card-image-captioned",
+        "text-title-small"
+      ],
+      "parent": "card-image-captioned",
+      "selectorContext": ".dbx-card-image-captioned > .dbx-card-image-caption",
+      "tokensRead": [
+        "--dbx-padding-2",
+        "--dbx-padding-4",
+        "--mat-sys-scrim"
+      ]
+    },
+    {
+      "slug": "card-image-captioned",
+      "selector": ".dbx-card-image-captioned",
+      "source": "@dereekb/dbx-web",
+      "module": "@dereekb/dbx-web",
+      "file": "src/lib/layout/card/_card.scss",
+      "line": 285,
+      "declarations": [
+        {
+          "property": "position",
+          "value": "relative"
+        },
+        {
+          "property": "overflow",
+          "value": "hidden"
+        }
+      ],
+      "role": "layout",
+      "intent": "`mat-card-image` wrapper that overlays a `.dbx-card-image-caption` strip on the bottom of its `<img>` (e.g. a place name over a map popup hero) — put `mat-card-image` on this wrapper `<div>` instead of the `<img>`, so the wrapper keeps mat-card's rounded top corners and clips the image to them.",
+      "seeAlso": [
+        "card-image-caption",
+        "text-title-small"
+      ]
+    },
     {
       "slug": "card-select",
       "selector": ".dbx-card-select",
@@ -2607,7 +2694,7 @@
       "source": "@dereekb/dbx-web",
       "module": "@dereekb/dbx-web",
       "file": "src/lib/layout/list/_list.scss",
-      "line": 467,
+      "line": 632,
       "declarations": [
         {
           "property": "height",
@@ -2628,7 +2715,7 @@
       "source": "@dereekb/dbx-web",
       "module": "@dereekb/dbx-web",
       "file": "src/lib/layout/list/_list.scss",
-      "line": 335,
+      "line": 338,
       "declarations": [
         {
           "property": "--dbx-list-card-items-list-gap",
@@ -2651,13 +2738,259 @@
         "--dbx-list-card-items-list-gap"
       ]
     },
+    {
+      "slug": "list-detail-item",
+      "selector": ".dbx-list-detail-item",
+      "source": "@dereekb/dbx-web",
+      "module": "@dereekb/dbx-web",
+      "file": "src/lib/layout/list/_list.scss",
+      "line": 467,
+      "declarations": [
+        {
+          "property": "--dbx-list-detail-item-padding-resolved",
+          "value": "var(--dbx-list-detail-item-padding, var(--dbx-padding-3))"
+        },
+        {
+          "property": "display",
+          "value": "flex"
+        },
+        {
+          "property": "flex-direction",
+          "value": "row"
+        },
+        {
+          "property": "align-items",
+          "value": "stretch"
+        },
+        {
+          "property": "gap",
+          "value": "var(--dbx-list-detail-item-gap, var(--dbx-padding-3))"
+        },
+        {
+          "property": "min-width",
+          "value": "0"
+        },
+        {
+          "property": "padding",
+          "value": "var(--dbx-list-detail-item-padding-resolved)"
+        },
+        {
+          "property": "box-sizing",
+          "value": "border-box"
+        }
+      ],
+      "role": "layout",
+      "intent": "detail list-row layout — flex row of a leading slot, a content column (bold `.item-title` + `.item-line` rows with optional leading icons) and a trailing slot, paired with nested `.item-leading` / `.item-leading-block` / `.item-content` / `.item-title` / `.item-line` / `.item-trailing` / `.item-trailing-divided` helpers; the row pads itself, so pair with `dbx-list-item-p0` on the view",
+      "seeAlso": [
+        "dbx-list-two-line-item",
+        "dbx-list-item-p0",
+        "dbx-list-detail-item-highlight"
+      ],
+      "tokensRead": [
+        "--dbx-list-detail-item-gap",
+        "--dbx-list-detail-item-line-gap",
+        "--dbx-list-detail-item-line-icon-size",
+        "--dbx-list-detail-item-padding",
+        "--dbx-list-detail-item-padding-resolved",
+        "--dbx-padding-1",
+        "--dbx-padding-3",
+        "--mat-sys-body-medium",
+        "--mat-sys-on-surface",
+        "--mat-sys-on-surface-variant",
+        "--mat-sys-title-medium"
+      ],
+      "tokensSet": [
+        "--dbx-list-detail-item-padding-resolved"
+      ]
+    },
+    {
+      "slug": "list-detail-item-gap",
+      "selector": ".dbx-list-detail-item-gap",
+      "source": "@dereekb/dbx-web",
+      "module": "@dereekb/dbx-web",
+      "file": "src/lib/layout/list/_list.scss",
+      "line": 564,
+      "declarations": [
+        {
+          "property": "display",
+          "value": "flex"
+        },
+        {
+          "property": "align-items",
+          "value": "center"
+        },
+        {
+          "property": "gap",
+          "value": "var(--dbx-list-detail-item-gap, var(--dbx-padding-3))"
+        },
+        {
+          "property": "padding",
+          "value": "var(--dbx-list-detail-item-gap-marker-padding, var(--dbx-padding-3)) 0"
+        },
+        {
+          "property": "font",
+          "value": "var(--mat-sys-label-medium)"
+        },
+        {
+          "property": "color",
+          "value": "var(--mat-sys-on-surface-variant)"
+        }
+      ],
+      "role": "layout",
+      "intent": "non-interactive \"…\" gap marker between runs of `.dbx-list-detail-item` rows (e.g. non-consecutive dates) — a compact muted row whose `.item-leading` column lines up with `.item-leading-block`; render it as the separator component of a list view's `separatorConfig` so it sits between rows without row styling",
+      "seeAlso": [
+        "dbx-list-detail-item",
+        "dbx-list-detail-item-leading-block"
+      ],
+      "parent": "list-detail-item",
+      "tokensRead": [
+        "--dbx-list-detail-item-gap",
+        "--dbx-list-detail-item-gap-marker-padding",
+        "--dbx-list-detail-item-leading-block-width",
+        "--dbx-padding-3",
+        "--mat-sys-label-medium",
+        "--mat-sys-on-surface-variant"
+      ]
+    },
+    {
+      "slug": "list-detail-item-highlight",
+      "selector": ".dbx-list-detail-item-highlight",
+      "source": "@dereekb/dbx-web",
+      "module": "@dereekb/dbx-web",
+      "file": "src/lib/layout/list/_list.scss",
+      "line": 586,
+      "declarations": [
+        {
+          "property": "background",
+          "value": "color-mix(in srgb, var(--dbx-list-detail-item-highlight-color, var(--dbx-notice-color)) var(--dbx-list-detail-item-highlight-tone, 14%), transparent)"
+        },
+        {
+          "property": "border-radius",
+          "value": "var(--mat-sys-corner-medium, 12px)"
+        }
+      ],
+      "role": "state",
+      "intent": "flag a `.dbx-list-detail-item` row as urgent — a rounded tonal wash of `--dbx-list-detail-item-highlight-color` (default `--dbx-notice-color`) at `--dbx-list-detail-item-highlight-tone` (default 14%); inside a `.dbx-list` the hosting list row paints the wash instead, so it also spans the view's built-in meta slot (e.g. the chevron)",
+      "seeAlso": [
+        "dbx-list-detail-item"
+      ],
+      "parent": "list-detail-item",
+      "tokensRead": [
+        "--dbx-list-detail-item-highlight-color",
+        "--dbx-list-detail-item-highlight-tone",
+        "--dbx-notice-color",
+        "--mat-sys-corner-medium"
+      ]
+    },
+    {
+      "slug": "list-detail-item-leading-block",
+      "selector": ".dbx-list-detail-item",
+      "source": "@dereekb/dbx-web",
+      "module": "@dereekb/dbx-web",
+      "file": "src/lib/layout/list/_list.scss",
+      "line": 525,
+      "declarations": [
+        {
+          "property": "display",
+          "value": "flex"
+        },
+        {
+          "property": "flex-direction",
+          "value": "column"
+        },
+        {
+          "property": "justify-content",
+          "value": "center"
+        },
+        {
+          "property": "align-items",
+          "value": "flex-start"
+        },
+        {
+          "property": "align-self",
+          "value": "stretch"
+        },
+        {
+          "property": "gap",
+          "value": "var(--dbx-padding-1)"
+        },
+        {
+          "property": "flex",
+          "value": "none"
+        },
+        {
+          "property": "min-width",
+          "value": "var(--dbx-list-detail-item-leading-block-width, 112px)"
+        },
+        {
+          "property": "margin",
+          "value": "calc(-1 * var(--dbx-list-detail-item-padding-resolved)) 0 calc(-1 * var(--dbx-list-detail-item-padding-resolved)) calc(-1 * var(--dbx-list-detail-item-padding-resolved))"
+        },
+        {
+          "property": "padding",
+          "value": "var(--dbx-list-detail-item-padding-resolved)"
+        },
+        {
+          "property": "box-sizing",
+          "value": "border-box"
+        }
+      ],
+      "role": "layout",
+      "intent": "full-height leading column for a `.dbx-list-detail-item` (e.g. a weekday / date / status block) — bleeds out to the row's top, bottom and start edges so a `[dbxColor]` + `.dbx-color-bg` wash fills the row edge; never shrinks below `--dbx-list-detail-item-leading-block-width` (112px), so every row's block stays the same width and only grows when its own content is wider",
+      "seeAlso": [
+        "dbx-list-detail-item",
+        "dbx-color-bg"
+      ],
+      "parent": "list-detail-item",
+      "selectorContext": ".dbx-list-detail-item .item-leading-block",
+      "tokensRead": [
+        "--dbx-list-detail-item-leading-block-width",
+        "--dbx-list-detail-item-padding-resolved",
+        "--dbx-padding-1"
+      ]
+    },
+    {
+      "slug": "list-detail-item-trailing-divided",
+      "selector": ".dbx-list-detail-item",
+      "source": "@dereekb/dbx-web",
+      "module": "@dereekb/dbx-web",
+      "file": "src/lib/layout/list/_list.scss",
+      "line": 546,
+      "declarations": [
+        {
+          "property": "align-self",
+          "value": "stretch"
+        },
+        {
+          "property": "padding-left",
+          "value": "var(--dbx-list-detail-item-gap, var(--dbx-padding-3))"
+        },
+        {
+          "property": "border-left",
+          "value": "1px solid var(--dbx-list-detail-item-divider-color, var(--mat-sys-outline-variant))"
+        }
+      ],
+      "role": "layout",
+      "intent": "trailing slot of a `.dbx-list-detail-item` set off from the content by a hairline start border — for a trailing button column; recolor via `--dbx-list-detail-item-divider-color`",
+      "seeAlso": [
+        "dbx-list-detail-item"
+      ],
+      "parent": "list-detail-item",
+      "selectorContext": ".dbx-list-detail-item .item-trailing-divided",
+      "tokensRead": [
+        "--dbx-list-detail-item-divider-color",
+        "--dbx-list-detail-item-gap",
+        "--dbx-padding-3",
+        "--mat-sys-outline-variant"
+      ]
+    },
     {
       "slug": "list-item-p0",
       "selector": ".dbx-list-item-p0",
       "source": "@dereekb/dbx-web",
       "module": "@dereekb/dbx-web",
       "file": "src/lib/layout/list/_list.scss",
-      "line": 482,
+      "line": 647,
       "declarations": [
         {
           "property": "padding",
@@ -2677,7 +3010,7 @@
       "source": "@dereekb/dbx-web",
       "module": "@dereekb/dbx-web",
       "file": "src/lib/layout/list/_list.scss",
-      "line": 297,
+      "line": 300,
       "declarations": [
         {
           "property": "min-height",
@@ -2706,7 +3039,7 @@
       "source": "@dereekb/dbx-web",
       "module": "@dereekb/dbx-web",
       "file": "src/lib/layout/list/_list.scss",
-      "line": 306,
+      "line": 309,
       "declarations": [
         {
           "property": "min-height",
@@ -2732,7 +3065,7 @@
       "source": "@dereekb/dbx-web",
       "module": "@dereekb/dbx-web",
       "file": "src/lib/layout/list/_list.scss",
-      "line": 442,
+      "line": 607,
       "declarations": [
         {
           "property": "cursor",
@@ -2749,7 +3082,7 @@
       "source": "@dereekb/dbx-web",
       "module": "@dereekb/dbx-web",
       "file": "src/lib/layout/list/_list.scss",
-      "line": 454,
+      "line": 619,
       "declarations": [
         {
           "property": "padding",
@@ -2769,7 +3102,7 @@
       "source": "@dereekb/dbx-web",
       "module": "@dereekb/dbx-web",
       "file": "src/lib/layout/list/_list.scss",
-      "line": 381,
+      "line": 392,
       "declarations": [
         {
           "property": "--dbx-list-item-border-radius",
@@ -2796,7 +3129,7 @@
       "source": "@dereekb/dbx-web",
       "module": "@dereekb/dbx-web",
       "file": "src/lib/layout/list/_list.scss",
-      "line": 278,
+      "line": 281,
       "declarations": [],
       "role": "state",
       "intent": "pin `.dbx-list-view-group-header` rows to the top of the list while scrolling"
@@ -2807,7 +3140,7 @@
       "source": "@dereekb/dbx-web",
       "module": "@dereekb/dbx-web",
       "file": "src/lib/layout/list/_list.scss",
-      "line": 398,
+      "line": 409,
       "declarations": [
         {
           "property": "display",
@@ -2834,7 +3167,7 @@
       "source": "@dereekb/dbx-web",
       "module": "@dereekb/dbx-web",
       "file": "src/lib/layout/list/_list.scss",
-      "line": 255,
+      "line": 258,
       "declarations": [],
       "role": "spacing",
       "intent": "strip the leading + trailing padding around `mdc-list-item--with-trailing-meta` rows so meta-only items hug their container"

package/generated/dereekb-dbx-web.tokens.mcp.generated.json

@@ -1453,6 +1453,154 @@
       },
       "componentScope": "list"
     },
+    {
+      "cssVariable": "--dbx-list-content-max-height",
+      "source": "dbx-web",
+      "role": "size",
+      "intents": [
+        "list content max height"
+      ],
+      "description": "Component-scoped override point (`list`) read in `packages/dbx-web/src/lib/layout/list/_list.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `100%`.",
+      "defaults": {
+        "light": "100%"
+      },
+      "componentScope": "list"
+    },
+    {
+      "cssVariable": "--dbx-list-detail-item-divider-color",
+      "source": "dbx-web",
+      "role": "color",
+      "intents": [
+        "list detail item divider color"
+      ],
+      "description": "Component-scoped override point (`list`) read in `packages/dbx-web/src/lib/layout/list/_list.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `var(--mat-sys-outline-variant)`.",
+      "defaults": {
+        "light": "var(--mat-sys-outline-variant)"
+      },
+      "componentScope": "list"
+    },
+    {
+      "cssVariable": "--dbx-list-detail-item-gap",
+      "source": "dbx-web",
+      "role": "spacing",
+      "intents": [
+        "list detail item gap",
+        "list detail item gap spacing"
+      ],
+      "description": "Component-scoped override point (`list`) read in `packages/dbx-web/src/lib/layout/list/_list.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `var(--dbx-padding-3)`.",
+      "defaults": {
+        "light": "var(--dbx-padding-3)"
+      },
+      "componentScope": "list"
+    },
+    {
+      "cssVariable": "--dbx-list-detail-item-gap-marker-padding",
+      "source": "dbx-web",
+      "role": "spacing",
+      "intents": [
+        "list detail item gap marker padding",
+        "list detail item gap marker padding spacing"
+      ],
+      "description": "Component-scoped override point (`list`) read in `packages/dbx-web/src/lib/layout/list/_list.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `var(--dbx-padding-3)`.",
+      "defaults": {
+        "light": "var(--dbx-padding-3)"
+      },
+      "componentScope": "list"
+    },
+    {
+      "cssVariable": "--dbx-list-detail-item-highlight-color",
+      "source": "dbx-web",
+      "role": "color",
+      "intents": [
+        "list detail item highlight color"
+      ],
+      "description": "Component-scoped override point (`list`) read in `packages/dbx-web/src/lib/layout/list/_list.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `var(--dbx-notice-color)`.",
+      "defaults": {
+        "light": "var(--dbx-notice-color)"
+      },
+      "componentScope": "list"
+    },
+    {
+      "cssVariable": "--dbx-list-detail-item-highlight-tone",
+      "source": "dbx-web",
+      "role": "misc",
+      "intents": [
+        "list detail item highlight tone"
+      ],
+      "description": "Component-scoped override point (`list`) read in `packages/dbx-web/src/lib/layout/list/_list.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `14%`.",
+      "defaults": {
+        "light": "14%"
+      },
+      "componentScope": "list"
+    },
+    {
+      "cssVariable": "--dbx-list-detail-item-leading-block-width",
+      "source": "dbx-web",
+      "role": "size",
+      "intents": [
+        "list detail item leading block width"
+      ],
+      "description": "Component-scoped override point (`list`) read in `packages/dbx-web/src/lib/layout/list/_list.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `112px`.",
+      "defaults": {
+        "light": "112px"
+      },
+      "componentScope": "list"
+    },
+    {
+      "cssVariable": "--dbx-list-detail-item-line-gap",
+      "source": "dbx-web",
+      "role": "spacing",
+      "intents": [
+        "list detail item line gap",
+        "list detail item line gap spacing"
+      ],
+      "description": "Component-scoped override point (`list`) read in `packages/dbx-web/src/lib/layout/list/_list.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `2px`.",
+      "defaults": {
+        "light": "2px"
+      },
+      "componentScope": "list"
+    },
+    {
+      "cssVariable": "--dbx-list-detail-item-line-icon-size",
+      "source": "dbx-web",
+      "role": "size",
+      "intents": [
+        "list detail item line icon size"
+      ],
+      "description": "Component-scoped override point (`list`) read in `packages/dbx-web/src/lib/layout/list/_list.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `18px`.",
+      "defaults": {
+        "light": "18px"
+      },
+      "componentScope": "list"
+    },
+    {
+      "cssVariable": "--dbx-list-detail-item-padding",
+      "source": "dbx-web",
+      "role": "spacing",
+      "intents": [
+        "list detail item padding",
+        "list detail item padding spacing"
+      ],
+      "description": "Component-scoped override point (`list`) read in `packages/dbx-web/src/lib/layout/list/_list.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `var(--dbx-padding-3)`.",
+      "defaults": {
+        "light": "var(--dbx-padding-3)"
+      },
+      "componentScope": "list"
+    },
+    {
+      "cssVariable": "--dbx-list-detail-item-padding-resolved",
+      "source": "dbx-web",
+      "role": "spacing",
+      "intents": [
+        "list detail item padding resolved",
+        "list detail item padding resolved spacing"
+      ],
+      "description": "Component-scoped token (`list`) declared in `packages/dbx-web/src/lib/layout/list/_list.scss`. Add a sassdoc `///` block above the declaration for richer guidance.",
+      "defaults": {
+        "light": "var(--dbx-list-detail-item-padding, var(--dbx-padding-3))"
+      },
+      "componentScope": "list"
+    },
     {
       "cssVariable": "--dbx-list-empty-content-padding",
       "source": "dbx-web",
@@ -1628,6 +1776,32 @@
       },
       "componentScope": "list"
     },
+    {
+      "cssVariable": "--dbx-mapbox-popup-tip-color",
+      "source": "dbx-web",
+      "role": "color",
+      "intents": [
+        "mapbox popup tip color"
+      ],
+      "description": "Component-scoped override point (`mapbox`) read in `packages/dbx-web/src/lib/extension/mapbox/_mapbox.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `var(--mat-card-elevated-container-color, var(--mat-sys-surface-container-low))`.",
+      "defaults": {
+        "light": "var(--mat-card-elevated-container-color, var(--mat-sys-surface-container-low))"
+      },
+      "componentScope": "mapbox"
+    },
+    {
+      "cssVariable": "--dbx-mapbox-popup-width",
+      "source": "dbx-web",
+      "role": "size",
+      "intents": [
+        "mapbox popup width"
+      ],
+      "description": "Component-scoped override point (`mapbox`) read in `packages/dbx-web/src/lib/extension/mapbox/_mapbox.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `340px`.",
+      "defaults": {
+        "light": "340px"
+      },
+      "componentScope": "mapbox"
+    },
     {
       "cssVariable": "--dbx-navbar-item-border-radius",
       "source": "dbx-web",

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

@@ -808,6 +808,52 @@
       "example": "<dbx-progress-spinner-button [config]=\"cfg\" (btnClick)=\"onClick()\"></dbx-progress-spinner-button>",
       "minimalExample": "<dbx-progress-spinner-button [config]=\"cfg\"></dbx-progress-spinner-button>"
     },
+    {
+      "slug": "browser-agent-view",
+      "category": "misc",
+      "kind": "component",
+      "selector": "dbx-browser-agent-view",
+      "className": "DbxBrowserAgentViewComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Renders the component of the first {@link DbxBrowserAgentViewEntry} whose match matches the current browser agent (OS, browser, and device), falling back to the config's default entry.\n\nAn optional override button lets the user pick another entry. Injected components can inject {@link DbxBrowserAgentViewContext} to read the detected agent or to switch entries.",
+      "inputs": [
+        {
+          "name": "config",
+          "type": "Maybe<DbxBrowserAgentViewConfig>",
+          "description": "",
+          "required": false
+        },
+        {
+          "name": "showOverrideButton",
+          "type": "Maybe<boolean>",
+          "description": "",
+          "required": false
+        }
+      ],
+      "outputs": [],
+      "relatedSlugs": [
+        "widget",
+        "browser-agent-view-override-button"
+      ],
+      "example": "readonly config = makeDbxBrowserAgentViewConfigFromOsMap({\n  ios: { componentClass: IosInstructionsComponent },\n  android: { componentClass: AndroidInstructionsComponent },\n  default: { componentClass: BookmarkInstructionsComponent },\n  showOverrideButton: true\n});\n```\n\n```html\n<dbx-browser-agent-view [config]=\"config\" [(overrideKey)]=\"savedDeviceKey\"></dbx-browser-agent-view>",
+      "minimalExample": "<dbx-browser-agent-view [config]=\"config\"></dbx-browser-agent-view>"
+    },
+    {
+      "slug": "browser-agent-view-override-button",
+      "category": "misc",
+      "kind": "component",
+      "selector": "dbx-browser-agent-view-override-button",
+      "className": "DbxBrowserAgentViewOverrideButtonComponent",
+      "module": "@dereekb/dbx-web",
+      "description": "Button that opens a menu to manually select an entry of the parent {@link DbxBrowserAgentViewComponent}, or to return to the auto-detected entry.\n\nRendered by the view when `showOverrideButton` is enabled, but can also be placed inside the injected content to position it manually.",
+      "inputs": [],
+      "outputs": [],
+      "relatedSlugs": [
+        "browser-agent-view"
+      ],
+      "example": "<!-- inside a component injected by dbx-browser-agent-view -->\n<p>Follow these steps to add the app to your home screen.</p>\n<dbx-browser-agent-view-override-button></dbx-browser-agent-view-override-button>",
+      "minimalExample": "<dbx-browser-agent-view-override-button></dbx-browser-agent-view-override-button>"
+    },
     {
       "slug": "page-title-info",
       "category": "navigation",

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

@@ -315,6 +315,95 @@
         }
       ]
     },
+    {
+      "slug": "list-detail-item-schedule-todo",
+      "category": "list",
+      "summary": "Shared .dbx-list-detail-item row (bold title + lines between leading/trailing slots) rendering a hover-free, button-only Schedule list with a full-height date block and \"…\" separatorConfig gap markers between non-consecutive days, and a row-clickable To Do list with the built-in chevron, an urgent highlight, and an empty state.",
+      "header": ".dbx-list-detail-item Schedule + To Do Lists",
+      "className": "DocListDetailItemExampleComponent",
+      "selector": "doc-list-detail-item-example",
+      "module": "apps/demo",
+      "appRef": "apps/demo",
+      "hint": "One shared row utility — bold title + lines between leading/trailing slots — powering a hover-free, button-only schedule list and a row-clickable to do list.",
+      "relatedSlugs": [
+        "dbx-list",
+        "dbx-list-detail-item",
+        "dbx-list-no-hover-effects",
+        "dbx-list-card-items-list",
+        "dbx-list-empty-content",
+        "dbx-list-detail-item-gap",
+        "dbx-anchor",
+        "dbx-button",
+        "dbx-chip",
+        "dbx-icon-tile",
+        "dbx-color"
+      ],
+      "info": "<p>\n  Both panels render\n  <code>.dbx-list-detail-item</code>\n  rows: an\n  <code>.item-content</code>\n  column of one bold\n  <code>.item-title</code>\n  followed by any number of\n  <code>.item-line</code>\n  rows (a leading\n  <code>&lt;mat-icon&gt;</code>\n  is sized for you), framed by an\n  <code>.item-leading</code>\n  and an\n  <code>.item-trailing</code>\n  slot. The row pads itself, so each view sets\n  <code>dbx-list-item-p0</code>\n  on its host.\n</p>\n<p>\n  <strong>Your Schedule</strong>\n  is hover-free and button-only. The wrapper host applies\n  <code>dbx-list-no-hover-effects dbx-list-card-items-list</code>\n  , and the view's\n  <code>mapValuesToItemValues</code>\n  drops\n  <code>anchor</code>\n  so the row is never a click target and the list turns its ripple off — only the\n  <code>&lt;dbx-anchor&gt;</code>\n  -wrapped button inside the\n  <code>.item-trailing-divided</code>\n  slot reacts. The date column is an\n  <code>.item-leading-block</code>\n  that bleeds to the row's edges, painted by\n  <code>[dbxColor]</code>\n  +\n  <code>[dbxColorTone]</code>\n  +\n  <code>.dbx-color-bg</code>\n  .\n</p>\n<p>\n  When a day doesn't follow the previous one, a \"…\"\n  <code>.dbx-list-detail-item-gap</code>\n  marker sits between them. The view config sets a\n  <code>separatorConfig</code>\n  : a separator component plus a\n  <code>showSeparator(previous, next)</code>\n  function that returns true when the next day isn't the following calendar day. The list calls it for each pair of neighbouring rows (and once before the first and after the last row, with the missing side undefined), and injects the component through\n  <code>dbx-injection</code>\n  wherever it returns true. The component reads both rows from\n  <code>DBX_VALUE_LIST_VIEW_ITEM_SEPARATOR</code>\n  to label the gap. Separators sit outside the list rows, so the marker picks up no row hover, ripple or card styling, and its icon column shares the date block's width so it lines up underneath.\n</p>\n<p>\n  <strong>To Do</strong>\n  keeps the default hover and ripple, and the whole row is the click target (the view keeps\n  <code>anchor</code>\n  ). The view's\n  <code>metaConfig: DbxListViewMetaIconComponent.metaConfig('chevron_right')</code>\n  adds the built-in chevron, so the rows need no\n  <code>.item-trailing</code>\n  slot. The urgent row adds\n  <code>.dbx-list-detail-item-highlight</code>\n  , which paints the hosting list row through\n  <code>:has()</code>\n  so the wash also covers the chevron (tune it with\n  <code>--dbx-list-detail-item-highlight-color</code>\n  /\n  <code>--dbx-list-detail-item-highlight-tone</code>\n  ). With no items the list shows its projected\n  <code>&lt;dbx-list-empty-content empty&gt;</code>\n  .\n</p>\n<p>\n  Both lists size to their rows and cap their height with\n  <code>--dbx-list-content-max-height</code>\n  set on the wrapper host, so\n  <code>.dbx-list-content</code>\n  — the list's own scroll container — scrolls past the limit instead of the card growing (and a paged list's load-more keeps working).\n</p>\n<p>\n  Last clicked:\n  <code>{{ clickedKey() ?? '(none)' }}</code>\n</p>",
+      "snippet": "<div class=\"dbx-button-wrap-group dbx-mb3\">\n  @for (option of todoPresentationOptions; track option.presentation) {\n    <button mat-stroked-button (click)=\"todoPresentationSignal.set(option.presentation)\" [disabled]=\"todoPresentationSignal() === option.presentation\">{{ option.label }}</button>\n  }\n</div>\n<div gdColumns=\"7fr 5fr\" gdColumns.lt-md=\"1fr\" gdGap=\"var(--dbx-padding-3)\">\n  <mat-card appearance=\"outlined\">\n    <mat-card-content>\n      <h3 class=\"dbx-text-headline-small dbx-m0\">Your Schedule</h3>\n      <p class=\"dbx-hint dbx-mb3\">{{ bookedCount }} upcoming weekdays booked</p>\n      <doc-schedule-day-item-list class=\"doc-list-detail-item-list\" [state]=\"scheduleState\"></doc-schedule-day-item-list>\n    </mat-card-content>\n  </mat-card>\n  <mat-card appearance=\"outlined\">\n    <mat-card-content>\n      <h3 class=\"dbx-text-headline-small dbx-m0\">To Do</h3>\n      @if (todoCountLabelSignal(); as todoCountLabel) {\n        <p class=\"dbx-hint dbx-mb3\">{{ todoCountLabel }}</p>\n      }\n      <doc-todo-item-list class=\"doc-list-detail-item-list\" [state]=\"todoStateSignal()\">\n        <dbx-list-empty-content empty>\n          <div class=\"dbx-flex-column dbx-flex-center dbx-text-center dbx-pv4\">\n            <dbx-icon-tile class=\"dbx-mb3\" icon=\"task_alt\" [round]=\"true\" dbxColor=\"primary\" [dbxColorTone]=\"18\"></dbx-icon-tile>\n            <div class=\"dbx-text-title-medium\">You're all caught up</div>\n            <div class=\"dbx-hint\">No action items right now. We'll let you know if something needs your attention.</div>\n          </div>\n        </dbx-list-empty-content>\n      </doc-todo-item-list>\n    </mat-card-content>\n  </mat-card>\n</div>",
+      "uses": [
+        {
+          "kind": "component",
+          "className": "DocScheduleDayItemListComponent",
+          "role": "list",
+          "selector": "doc-schedule-day-item-list",
+          "classSource": "@Component({\n  selector: 'doc-schedule-day-item-list',\n  template: DEFAULT_LIST_WRAPPER_COMPONENT_CONFIGURATION_TEMPLATE,\n  imports: [DbxListWrapperComponentImportsModule],\n  host: {\n    class: 'dbx-list-no-hover-effects dbx-list-card-items-list'\n  }\n})\nexport class DocScheduleDayItemListComponent extends AbstractDbxSelectionListWrapperDirective<ScheduleDayItemValue> {\n  constructor() {\n    super({\n      componentClass: DocScheduleDayItemListViewComponent,\n      defaultSelectionMode: 'view'\n    });\n  }\n}"
+        },
+        {
+          "kind": "component",
+          "className": "DocScheduleDayItemListViewComponent",
+          "role": "view",
+          "selector": "doc-schedule-day-item-list-view",
+          "classSource": "@Component({\n  selector: 'doc-schedule-day-item-list-view',\n  template: DEFAULT_DBX_SELECTION_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE,\n  imports: [DbxSelectionValueListViewComponentImportsModule],\n  providers: provideDbxListView(DocScheduleDayItemListViewComponent),\n  host: {\n    class: 'dbx-list-item-p0'\n  }\n})\nexport class DocScheduleDayItemListViewComponent extends AbstractDbxSelectionListViewDirective<ScheduleDayItemValue> {\n  // Drop `anchor` (the trailing button owns it; the row stays non-clickable and ripple-free).\n  // Separate two days with a \"…\" gap whenever the next day isn't the following calendar day.\n  readonly config: DbxSelectionValueListViewConfig<ScheduleDayItemValueWithSelection> = {\n    componentClass: DocScheduleDayItemListViewItemComponent,\n    mapValuesToItemValues: (values) => of(values.map((value) => ({ ...value, itemValue: value, anchor: undefined }))),\n    separatorConfig: {\n      componentClass: DocScheduleDayGapComponent,\n      showSeparator: dbxValueListItemSeparatorDecisionFunction<ScheduleDayItemValue>((previous, next) => previous != null && next != null && skippedDaysBetweenScheduleDays(previous.day, next.day) > 0)\n    }\n  };\n}"
+        },
+        {
+          "kind": "component",
+          "className": "DocScheduleDayItemListViewItemComponent",
+          "role": "item",
+          "selector": "doc-schedule-day-item-list-view-item",
+          "classSource": "@Component({\n  selector: 'doc-schedule-day-item-list-view-item',\n  template: `\n    <div class=\"dbx-list-detail-item\">\n      <div class=\"item-leading-block dbx-color-bg\" [dbxColor]=\"stateColor\" [dbxColorTone]=\"14\">\n        <span class=\"dbx-text-label-medium dbx-uppercase dbx-tracked-wide\">{{ dayLabel }}</span>\n        <span class=\"dbx-text-title-large\">{{ dateLabel }}</span>\n        @if (session) {\n          <dbx-chip [color]=\"stateColor\" [tone]=\"100\" [small]=\"true\">BOOKED</dbx-chip>\n        } @else {\n          <dbx-chip [color]=\"stateColor\" [small]=\"true\">\n            <span class=\"dbx-dot\"></span>\n            <span class=\"dbx-pl1\">OPEN</span>\n          </dbx-chip>\n        }\n      </div>\n      <div class=\"item-content\">\n        @if (session; as session) {\n          <span class=\"item-title\">{{ session.title }}</span>\n          <span class=\"item-line\">\n            <mat-icon>location_on</mat-icon>\n            {{ session.locationName }}\n          </span>\n          <span class=\"item-line\">\n            <mat-icon>calendar_today</mat-icon>\n            {{ session.dateRange }}\n          </span>\n          <span class=\"item-line\">\n            <mat-icon>schedule</mat-icon>\n            {{ session.timeRange }}\n          </span>\n        } @else {\n          <span class=\"item-title\">Nothing booked</span>\n          <span class=\"item-line\">This day is still free.</span>\n        }\n      </div>\n      <div class=\"item-trailing item-trailing-divided\">\n        <dbx-anchor [anchor]=\"anchor\">\n          @if (session) {\n            <dbx-button class=\"dbx-nowrap\" [stroked]=\"true\" text=\"View Details\"></dbx-button>\n          } @else {\n            <dbx-button class=\"dbx-nowrap\" [tonal]=\"true\" color=\"primary\" text=\"Browse sessions\"></dbx-button>\n          }\n        </dbx-anchor>\n      </div>\n    </div>\n  `,\n  imports: [MatIconModule, DbxAnchorComponent, DbxButtonComponent, DbxChipDirective, DbxColorDirective]\n})\nexport class DocScheduleDayItemListViewItemComponent extends AbstractDbxValueListViewItemComponent<ScheduleDayItemValue> {\n  get dayLabel(): string {\n    return this.itemValue.dayLabel;\n  }\n\n  get dateLabel(): string {\n    return this.itemValue.dateLabel;\n  }\n\n  get session(): Maybe<ScheduleDaySession> {\n    return this.itemValue.session;\n  }\n\n  get stateColor(): DbxThemeColor {\n    return this.itemValue.state === 'booked' ? 'success' : 'notice';\n  }\n\n  get anchor(): ClickableAnchor {\n    return this.itemValue.anchor;\n  }\n}"
+        },
+        {
+          "kind": "component",
+          "className": "DocScheduleDayGapComponent",
+          "role": "separator",
+          "selector": "doc-schedule-day-gap",
+          "classSource": "@Component({\n  selector: 'doc-schedule-day-gap',\n  template: `\n    <div class=\"dbx-list-detail-item-gap\">\n      <span class=\"item-leading\"><mat-icon>more_vert</mat-icon></span>\n      <span>{{ label }}</span>\n    </div>\n  `,\n  imports: [MatIconModule]\n})\nexport class DocScheduleDayGapComponent {\n  readonly separator = inject<DbxValueListItemSeparatorContext<ScheduleDayItemValue>>(DBX_VALUE_LIST_VIEW_ITEM_SEPARATOR);\n\n  get label(): string {\n    const { previous, next } = this.separator;\n    const skippedDays = previous && next ? skippedDaysBetweenScheduleDays(previous.itemValue.day, next.itemValue.day) : 0;\n    return `${skippedDays} ${skippedDays === 1 ? 'day' : 'days'} skipped`;\n  }\n}"
+        },
+        {
+          "kind": "interface",
+          "className": "ScheduleDayItemValue",
+          "role": "data",
+          "classSource": "export interface ScheduleDayItemValue {\n  readonly key: string;\n  /**\n   * The schedule day. Days are weekdays, sorted ascending.\n   */\n  readonly day: ISO8601DayString;\n  /**\n   * Short weekday label, e.g. `Fri`.\n   */\n  readonly dayLabel: string;\n  /**\n   * Short date label, e.g. `Sep 25`.\n   */\n  readonly dateLabel: string;\n  readonly state: ScheduleDayItemState;\n  /**\n   * The booked session. Only set when {@link state} is `'booked'`.\n   */\n  readonly session?: Maybe<ScheduleDaySession>;\n  /**\n   * Fired by the row's trailing button — \"View Details\" for a booked day, \"Browse sessions\" for an open day.\n   */\n  readonly anchor: ClickableAnchor;\n}"
+        },
+        {
+          "kind": "component",
+          "className": "DocTodoItemListComponent",
+          "role": "list",
+          "selector": "doc-todo-item-list",
+          "classSource": "@Component({\n  selector: 'doc-todo-item-list',\n  template: DEFAULT_LIST_WRAPPER_COMPONENT_CONFIGURATION_TEMPLATE,\n  imports: [DbxListWrapperComponentImportsModule],\n  host: {\n    class: 'dbx-list-auto-height'\n  }\n})\nexport class DocTodoItemListComponent extends AbstractDbxSelectionListWrapperDirective<TodoItemValue> {\n  constructor() {\n    super({\n      componentClass: DocTodoItemListViewComponent,\n      defaultSelectionMode: 'view'\n    });\n  }\n}"
+        },
+        {
+          "kind": "component",
+          "className": "DocTodoItemListViewComponent",
+          "role": "view",
+          "selector": "doc-todo-item-list-view",
+          "classSource": "@Component({\n  selector: 'doc-todo-item-list-view',\n  template: DEFAULT_DBX_SELECTION_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE,\n  imports: [DbxSelectionValueListViewComponentImportsModule],\n  providers: provideDbxListView(DocTodoItemListViewComponent),\n  host: {\n    class: 'dbx-list-item-p0'\n  }\n})\nexport class DocTodoItemListViewComponent extends AbstractDbxSelectionListViewDirective<TodoItemValue> {\n  // Drop `icon` (template paints its own tile); keep `anchor` so the whole row is the click target.\n  readonly config: DbxSelectionValueListViewConfig<TodoItemValueWithSelection> = {\n    componentClass: DocTodoItemListViewItemComponent,\n    metaConfig: DbxListViewMetaIconComponent.metaConfig('chevron_right'),\n    mapValuesToItemValues: (values) => of(values.map((value) => ({ ...value, itemValue: value, icon: undefined })))\n  };\n}"
+        },
+        {
+          "kind": "component",
+          "className": "DocTodoItemListViewItemComponent",
+          "role": "item",
+          "selector": "doc-todo-item-list-view-item",
+          "classSource": "@Component({\n  selector: 'doc-todo-item-list-view-item',\n  template: `\n    <div class=\"dbx-list-detail-item\" [class.dbx-list-detail-item-highlight]=\"highlight\">\n      <dbx-icon-tile class=\"item-leading\" [icon]=\"icon\" [round]=\"true\" [dbxColor]=\"highlight ? 'notice' : 'grey'\" [dbxColorTone]=\"18\"></dbx-icon-tile>\n      <div class=\"item-content\">\n        <span class=\"item-title\">{{ title }}</span>\n        <span class=\"item-line\">{{ detail }}</span>\n        @if (chip; as chip) {\n          <span class=\"item-line dbx-pt1\">\n            <dbx-chip [color]=\"chip.color\" [small]=\"true\">{{ chip.text }}</dbx-chip>\n          </span>\n        }\n      </div>\n    </div>\n  `,\n  imports: [DbxChipDirective, DbxColorDirective, DbxIconTileComponent]\n})\nexport class DocTodoItemListViewItemComponent extends AbstractDbxValueListViewItemComponent<TodoItemValue> {\n  get icon(): string {\n    return this.itemValue.icon;\n  }\n\n  get title(): string {\n    return this.itemValue.title;\n  }\n\n  get detail(): string {\n    return this.itemValue.detail;\n  }\n\n  get chip(): Maybe<TodoItemChip> {\n    return this.itemValue.chip;\n  }\n\n  get highlight(): boolean {\n    return this.itemValue.highlight === true;\n  }\n}"
+        },
+        {
+          "kind": "interface",
+          "className": "TodoItemValue",
+          "role": "data",
+          "classSource": "export interface TodoItemValue {\n  readonly key: string;\n  readonly icon: string;\n  readonly title: string;\n  readonly detail: string;\n  readonly chip?: Maybe<TodoItemChip>;\n  /**\n   * Whether to paint the row with the urgent `.dbx-list-detail-item-highlight` wash.\n   */\n  readonly highlight?: Maybe<boolean>;\n  /**\n   * Whole-row click target.\n   */\n  readonly anchor: ClickableAnchor;\n}"
+        }
+      ]
+    },
     {
       "slug": "list-progress-with-button",
       "category": "list",

package/generated/dereekb-firebase.model-firebase-index.mcp.generated.json

@@ -804,6 +804,54 @@
         }
       ]
     },
+    {
+      "slug": "notifications-newest-first-query",
+      "name": "notificationsNewestFirstQuery",
+      "module": "@dereekb/firebase",
+      "subpath": "model/notification/notification.query",
+      "signature": "notificationsNewestFirstQuery(): FirestoreQueryConstraint[]",
+      "description": "Query constraints for listing the {@link Notification} documents in one {@link NotificationBox}, newest first.\n\nRun against a single box's notification collection — this is how an admin finds the notifications sent to a\nmodel (e.g. every notification for a profile) when their ids are auto-generated and not otherwise known. Pair it\nwith a limit; a busy box can hold many notifications between cleanup sweeps.",
+      "model": "Notification",
+      "collection": "nbn",
+      "isNested": true,
+      "scope": "COLLECTION",
+      "manual": false,
+      "skip": false,
+      "category": "lookup",
+      "params": [],
+      "returns": "Array of Firestore query constraints ordering notifications by creation date, newest first.",
+      "tags": [
+        "lookup",
+        "notification",
+        "notifications",
+        "newest",
+        "first",
+        "query",
+        "notificationsnewestfirstquery",
+        "constraints",
+        "listing",
+        "link",
+        "documents",
+        "one",
+        "notificationbox",
+        "run",
+        "against"
+      ],
+      "constraintSequences": [
+        {
+          "pathLabel": "all",
+          "entries": [
+            {
+              "kind": "orderBy",
+              "fieldPath": "cat",
+              "direction": "desc"
+            }
+          ]
+        }
+      ],
+      "derivedComposites": [],
+      "derivedFieldOverrides": []
+    },
     {
       "slug": "notification-logged-event-days-older-than-query",
       "name": "notificationLoggedEventDaysOlderThanQuery",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dereekb/dbx-components-mcp",
-  "version": "14.9.0",
+  "version": "14.11.0",
   "sideEffects": false,
   "type": "module",
   "bin": {
@@ -12,7 +12,7 @@
     "ts-morph": "^21.0.0"
   },
   "peerDependencies": {
-    "@dereekb/dbx-cli": "14.9.0",
-    "@dereekb/util": "14.9.0"
+    "@dereekb/dbx-cli": "14.11.0",
+    "@dereekb/util": "14.11.0"
   }
 }