From b41c3cdca5f35226412d12ac0cc0fd9f047c82de Mon Sep 17 00:00:00 2001
From: Trang Doan <doantranghp2000@gmail.com>
Date: Mon, 31 Aug 2026 13:50:40 -0400
Subject: [PATCH 1/7] ENG-2183 Build the new setting-item row component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add one shared settings row — scope indicator, label, always-visible
description, control — and route every panel-based row through it.

Descriptions move out of the hover popover that dismissed before its doc links
could be clicked (ENG-2080). The fix is structural: the description renders as a
sibling of the label, never a descendant, so a link inside it can no longer
toggle the row's control.

The rewire happens at SettingTitle, the one helper all five Base*Panels funnelled
label and description through, so ~70 call sites are unchanged. Flag rows swap
Checkbox for Switch to match the design.

Scope is derived from the wrapper rather than passed per call site, because the
wrapper already binds the setter that decides who a value is written for. Rows
that cannot derive it pass `scope` explicitly.

Layout is Tailwind, which resolves because Roam itself bundles Tailwind. Anything
depending on Tailwind's preflight is hand-rolled instead: `border-b` and `border`
set only a width, and `* { border-style: solid }` is absent, so those borders
never paint. This repo's own `neutral-*` theme colours are likewise absent from
Roam's build and are mirrored as CSS variables.

Supersedes ENG-2186's SettingsDrillDownRow, whose two callers now compose the
shared row with a trailing drill-down summary.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../roam/src/components/DiscourseNodeMenu.tsx |   5 +-
 .../components/DiscourseNodeSearchMenu.tsx    |   4 +-
 .../settings/KeyboardShortcutInput.tsx        |  58 ++--
 .../src/components/settings/NodeConfig.tsx    | 143 +++++----
 .../components/settings/PageGroupPanel.tsx    | 198 ++++++------
 .../settings/PreferencesGeneral.tsx           |  57 ++--
 .../src/components/settings/QuerySettings.tsx |  35 +--
 .../settings/SettingsDescription.tsx          |  19 +-
 .../components/BlockPropSettingPanels.tsx     | 291 +++++++++++-------
 .../components/EphemeralBlocksPanel.tsx       |  32 +-
 .../components/SettingDrillDownSummary.tsx    |  33 ++
 .../settings/components/SettingItemRow.tsx    | 112 +++++++
 .../components/SettingKeycapInput.tsx         |  21 ++
 .../components/SettingsDrillDownRow.tsx       |  31 --
 apps/roam/src/styles/settingsStyles.css       |  29 ++
 15 files changed, 674 insertions(+), 394 deletions(-)
 create mode 100644 apps/roam/src/components/settings/components/SettingDrillDownSummary.tsx
 create mode 100644 apps/roam/src/components/settings/components/SettingItemRow.tsx
 create mode 100644 apps/roam/src/components/settings/components/SettingKeycapInput.tsx
 delete mode 100644 apps/roam/src/components/settings/components/SettingsDrillDownRow.tsx

diff --git a/apps/roam/src/components/DiscourseNodeMenu.tsx b/apps/roam/src/components/DiscourseNodeMenu.tsx
index 46fdcc8ed..f5e569aea 100644
--- a/apps/roam/src/components/DiscourseNodeMenu.tsx
+++ b/apps/roam/src/components/DiscourseNodeMenu.tsx
@@ -4,11 +4,11 @@ import {
   Popover,
   Position,
   Button,
-  InputGroup,
   getKeyCombo,
   IKeyCombo,
   Icon,
 } from "@blueprintjs/core";
+import SettingKeycapInput from "~/components/settings/components/SettingKeycapInput";
 import React, {
   useCallback,
   useEffect,
@@ -496,7 +496,8 @@ export const NodeMenuTriggerComponent = ({
   const shortcut = useMemo(() => comboToString(comboKey), [comboKey]);
 
   return (
-    <InputGroup
+    <SettingKeycapInput
+      wide
       inputRef={inputRef}
       placeholder={
         isActive ? "Press keys" : (placeholder ?? "Click to set trigger")
diff --git a/apps/roam/src/components/DiscourseNodeSearchMenu.tsx b/apps/roam/src/components/DiscourseNodeSearchMenu.tsx
index 53b66ddbd..55a9dd9c4 100644
--- a/apps/roam/src/components/DiscourseNodeSearchMenu.tsx
+++ b/apps/roam/src/components/DiscourseNodeSearchMenu.tsx
@@ -11,9 +11,9 @@ import {
   Popover,
   Position,
   Button,
-  InputGroup,
   Intent,
 } from "@blueprintjs/core";
+import SettingKeycapInput from "~/components/settings/components/SettingKeycapInput";
 import ReactDOM from "react-dom";
 import getUids from "roamjs-components/dom/getUids";
 import getTextByBlockUid from "roamjs-components/queries/getTextByBlockUid";
@@ -712,7 +712,7 @@ export const NodeSearchMenuTriggerSetting = ({
     setPersonalSetting([PERSONAL_KEYS.nodeSearchMenuTrigger], trigger);
   };
   return (
-    <InputGroup
+    <SettingKeycapInput
       value={nodeSearchTrigger}
       onChange={handleNodeSearchTriggerChange}
       placeholder="Click to set trigger"
diff --git a/apps/roam/src/components/settings/KeyboardShortcutInput.tsx b/apps/roam/src/components/settings/KeyboardShortcutInput.tsx
index 2c7314495..4defbc331 100644
--- a/apps/roam/src/components/settings/KeyboardShortcutInput.tsx
+++ b/apps/roam/src/components/settings/KeyboardShortcutInput.tsx
@@ -1,14 +1,8 @@
 import React, { useState, useCallback, useMemo, useRef } from "react";
 import { OnloadArgs } from "roamjs-components/types";
-import {
-  InputGroup,
-  Button,
-  getKeyCombo,
-  IKeyCombo,
-  Label,
-} from "@blueprintjs/core";
-import Description from "~/components/settings/SettingsDescription";
-import { settingAnchor } from "~/components/settings/utils/settingAnchor";
+import { Button, getKeyCombo, IKeyCombo } from "@blueprintjs/core";
+import SettingKeycapInput from "~/components/settings/components/SettingKeycapInput";
+import SettingItemRow from "~/components/settings/components/SettingItemRow";
 import { DISCOURSE_TOOL_SHORTCUT_KEY } from "~/data/userSettings";
 import { setPersonalSetting } from "~/components/settings/utils/accessors";
 import { comboToString } from "~/components/DiscourseNodeMenu";
@@ -93,26 +87,32 @@ const KeyboardShortcutInput = ({
   }, [extensionAPI, settingKey, blockPropKey]);
 
   return (
-    <Label {...settingAnchor([blockPropKey])}>
-      {label}
-      <Description description={description} />
-      <InputGroup
-        inputRef={inputRef}
-        placeholder={isActive ? "Press keys" : placeholder}
-        value={shortcut}
-        onKeyDown={handleKeyDown}
-        onFocus={() => setIsActive(true)}
-        onBlur={() => setIsActive(false)}
-        rightElement={
-          <Button
-            hidden={!comboKey.key}
-            icon="remove"
-            onClick={handleClear}
-            minimal
-          />
-        }
-      />
-    </Label>
+    <SettingItemRow
+      label={label}
+      description={description}
+      scope="personal"
+      settingKeys={[blockPropKey]}
+      control={(controlId) => (
+        <SettingKeycapInput
+          wide
+          id={controlId}
+          inputRef={inputRef}
+          placeholder={isActive ? "Press keys" : placeholder}
+          value={shortcut}
+          onKeyDown={handleKeyDown}
+          onFocus={() => setIsActive(true)}
+          onBlur={() => setIsActive(false)}
+          rightElement={
+            <Button
+              hidden={!comboKey.key}
+              icon="remove"
+              onClick={handleClear}
+              minimal
+            />
+          }
+        />
+      )}
+    />
   );
 };
 
diff --git a/apps/roam/src/components/settings/NodeConfig.tsx b/apps/roam/src/components/settings/NodeConfig.tsx
index 4f0672a86..28a24f45c 100644
--- a/apps/roam/src/components/settings/NodeConfig.tsx
+++ b/apps/roam/src/components/settings/NodeConfig.tsx
@@ -1,14 +1,7 @@
 import React, { useState, useCallback, useEffect, useRef } from "react";
 import getDiscourseNodes, { DiscourseNode } from "~/utils/getDiscourseNodes";
 import { getSubTree } from "roamjs-components/util";
-import Description from "~/components/settings/SettingsDescription";
-import {
-  Label,
-  InputGroup,
-  ControlGroup,
-  Tooltip,
-  Icon,
-} from "@blueprintjs/core";
+import { InputGroup, ControlGroup, Tooltip, Icon } from "@blueprintjs/core";
 import DiscourseNodeSpecification from "./DiscourseNodeSpecification";
 import DiscourseNodeAttributes from "./DiscourseNodeAttributes";
 import DiscourseNodeCanvasSettings, {
@@ -34,7 +27,8 @@ import {
 } from "./components/BlockPropSettingPanels";
 import { ROAM_DOCS, withDocsLink } from "./utils/docs";
 import { SettingsGroup } from "./components/SettingsHeadings";
-import SettingsDrillDownRow from "./components/SettingsDrillDownRow";
+import SettingItemRow from "./components/SettingItemRow";
+import SettingDrillDownSummary from "./components/SettingDrillDownSummary";
 import { useSettingsNav } from "./navigation/SettingsNavContext";
 import { nodeConfigSegmentIds } from "./utils/settingsNavigation";
 
@@ -116,38 +110,41 @@ const DiscourseNodeColorSetting = ({
           </span>
         </div>
       )}
-      <Label>
-        Color
-        <Description description="Changes the color of tags and canvas nodes" />
-        <ControlGroup>
-          <InputGroup
-            style={{ width: 120 }}
-            type={"color"}
-            value={color}
-            onChange={(e) => {
-              const nextColor = e.target.value;
-              const colorValue = nextColor.replace("#", ""); // remove hash to not create roam link
-              setColor(nextColor);
-              persistColorAfterPause(colorValue);
-            }}
-          />
-          <Tooltip content={color ? "Unset" : "Color not set"}>
-            <Icon
-              className={"ml-2 align-middle opacity-80"}
-              icon={color ? "delete" : "info-sign"}
-              onClick={() => {
-                if (colorWriteTimeoutRef.current) {
-                  window.clearTimeout(colorWriteTimeoutRef.current);
-                  colorWriteTimeoutRef.current = null;
-                }
-                pendingColorRef.current = null;
-                setColor("");
-                persistColorValue("");
+      <SettingItemRow
+        label="Color"
+        description="Changes the color of tags and canvas nodes"
+        scope="nodeType"
+        control={
+          <ControlGroup>
+            <InputGroup
+              style={{ width: 120 }}
+              type={"color"}
+              value={color}
+              onChange={(e) => {
+                const nextColor = e.target.value;
+                const colorValue = nextColor.replace("#", ""); // remove hash to not create roam link
+                setColor(nextColor);
+                persistColorAfterPause(colorValue);
               }}
             />
-          </Tooltip>
-        </ControlGroup>
-      </Label>
+            <Tooltip content={color ? "Unset" : "Color not set"}>
+              <Icon
+                className={"ml-2 align-middle opacity-80"}
+                icon={color ? "delete" : "info-sign"}
+                onClick={() => {
+                  if (colorWriteTimeoutRef.current) {
+                    window.clearTimeout(colorWriteTimeoutRef.current);
+                    colorWriteTimeoutRef.current = null;
+                  }
+                  pendingColorRef.current = null;
+                  setColor("");
+                  persistColorValue("");
+                }}
+              />
+            </Tooltip>
+          </ControlGroup>
+        }
+      />
     </>
   );
 };
@@ -293,11 +290,16 @@ const NodeConfig = ({ node }: { node: DiscourseNode }) => {
   return (
     <div className="dg-settings-node-page">
       <SettingsGroup title="Identity">
-        <SettingsDrillDownRow
-          title="Index"
+        <SettingItemRow
+          label="Index"
           description={`The saved list of all ${node.text} pages \u2014 which pages appear and which columns show.`}
-          buttonText={`See all ${node.text} nodes`}
-          onClick={() => nav.push(nodeConfigSegmentIds.index)}
+          scope="nodeType"
+          control={
+            <SettingDrillDownSummary
+              summary={`See all ${node.text} nodes`}
+              onClick={() => nav.push(nodeConfigSegmentIds.index)}
+            />
+          }
         />
         <DiscourseNodeTextPanel
           nodeType={node.type}
@@ -368,14 +370,19 @@ const NodeConfig = ({ node }: { node: DiscourseNode }) => {
           parentUid={node.type}
           uid={shortcutUid}
         />
-        <SettingsDrillDownRow
-          title="Template"
+        <SettingItemRow
+          label="Template"
           description={withDocsLink(
             `The template that auto fills ${node.text} page when generated.`,
             ROAM_DOCS.creatingNodes,
           )}
-          buttonText="Edit template"
-          onClick={() => nav.push(nodeConfigSegmentIds.template)}
+          scope="nodeType"
+          control={
+            <SettingDrillDownSummary
+              summary="Edit template"
+              onClick={() => nav.push(nodeConfigSegmentIds.template)}
+            />
+          }
         />
       </SettingsGroup>
 
@@ -394,26 +401,28 @@ const NodeConfig = ({ node }: { node: DiscourseNode }) => {
       </SettingsGroup>
 
       <SettingsGroup title="Legacy">
-        <Label>
-          Specification
-          <Description
-            description={withDocsLink(
-              `The conditions specified to identify a ${node.text} node.`,
-              ROAM_DOCS.grammarNodes,
-            )}
-          />
-          <DiscourseNodeSpecification
-            node={node}
-            parentUid={specificationUid}
-            parentSetEnabled={(isSpecificationEnabled) => {
-              validate({
-                tag: tagValue,
-                format: formatValue,
-                isSpecificationEnabled,
-              });
-            }}
-          />
-        </Label>
+        <SettingItemRow
+          label="Specification"
+          description={withDocsLink(
+            `The conditions specified to identify a ${node.text} node.`,
+            ROAM_DOCS.grammarNodes,
+          )}
+          scope="nodeType"
+          controlPlacement="below"
+          control={
+            <DiscourseNodeSpecification
+              node={node}
+              parentUid={specificationUid}
+              parentSetEnabled={(isSpecificationEnabled) => {
+                validate({
+                  tag: tagValue,
+                  format: formatValue,
+                  isSpecificationEnabled,
+                });
+              }}
+            />
+          }
+        />
       </SettingsGroup>
 
       {isSyncEnabled() && (
diff --git a/apps/roam/src/components/settings/PageGroupPanel.tsx b/apps/roam/src/components/settings/PageGroupPanel.tsx
index 584cb83b5..c68bf84fc 100644
--- a/apps/roam/src/components/settings/PageGroupPanel.tsx
+++ b/apps/roam/src/components/settings/PageGroupPanel.tsx
@@ -1,12 +1,12 @@
 import React, { useState, useCallback } from "react";
-import { Label, Button, Intent, Tag, InputGroup } from "@blueprintjs/core";
-import Description from "~/components/settings/SettingsDescription";
+import { Button, Intent, Tag, InputGroup } from "@blueprintjs/core";
 import AutocompleteInput from "roamjs-components/components/AutocompleteInput";
 import createBlock from "roamjs-components/writes/createBlock";
 import deleteBlock from "roamjs-components/writes/deleteBlock";
 import getAllPageNames from "roamjs-components/queries/getAllPageNames";
 import { type PageGroup } from "~/utils/getSuggestiveModeConfigSettings";
 import { setGlobalSetting } from "~/components/settings/utils/accessors";
+import SettingItemRow from "./components/SettingItemRow";
 import {
   GLOBAL_KEYS,
   SUGGESTIVE_MODE_KEYS,
@@ -129,107 +129,109 @@ const PageGroupsPanel = ({
   }, []);
 
   return (
-    <Label>
-      Page groups
-      <Description
-        description={
-          "Organize pages into named groups that will be can be selected when generating discourse suggestions."
-        }
-      />
-      <div className="flex flex-col gap-2">
-        <div
-          className="flex items-baseline gap-2"
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && newGroupName) {
-              e.preventDefault();
-              e.stopPropagation();
-              void addGroup(newGroupName);
-            }
-          }}
-        >
-          <InputGroup
-            key={groupKey}
-            value={newGroupName}
-            onChange={(e) => handleNewGroupNameChange(e.target.value)}
-            placeholder="Page group name"
-          />
-          <Button
-            icon="plus"
-            small
-            minimal
-            disabled={
-              !newGroupName || pageGroups.some((g) => g.name === newGroupName)
-            }
-            onClick={() => void addGroup(newGroupName)}
-          />
-        </div>
+    <SettingItemRow
+      label="Page groups"
+      description="Organize pages into named groups that will be can be selected when generating discourse suggestions."
+      scope="global"
+      controlPlacement="below"
+      control={
+        <div className="flex flex-col gap-2">
+          <div
+            className="flex items-baseline gap-2"
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && newGroupName) {
+                e.preventDefault();
+                e.stopPropagation();
+                void addGroup(newGroupName);
+              }
+            }}
+          >
+            <InputGroup
+              key={groupKey}
+              value={newGroupName}
+              onChange={(e) => handleNewGroupNameChange(e.target.value)}
+              placeholder="Page group name"
+            />
+            <Button
+              icon="plus"
+              small
+              minimal
+              disabled={
+                !newGroupName || pageGroups.some((g) => g.name === newGroupName)
+              }
+              onClick={() => void addGroup(newGroupName)}
+            />
+          </div>
 
-        {Object.keys(pageGroups).length === 0 && (
-          <div className="text-sm italic text-gray-500">No groups added.</div>
-        )}
-        {pageGroups.map((group) => (
-          <div key={group.uid} className="rounded border p-2">
-            <div className="mb-1 flex items-center justify-between">
-              <span className="font-semibold">{group.name}</span>
-              <Button
-                icon="trash"
-                minimal
-                small
-                intent={Intent.DANGER}
-                onClick={() => void removeGroup(group.uid)}
-              />
-            </div>
-            <div className="flex flex-wrap items-baseline gap-2">
-              <div
-                className="flex-0 min-w-[160px]"
-                onKeyDown={(e) => {
-                  if (e.key === "Enter" && getPageInput(group.uid)) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    void addPageToGroup(group.uid, getPageInput(group.uid));
+          {Object.keys(pageGroups).length === 0 && (
+            <div className="text-sm italic text-gray-500">No groups added.</div>
+          )}
+          {pageGroups.map((group) => (
+            <div key={group.uid} className="rounded border p-2">
+              <div className="mb-1 flex items-center justify-between">
+                <span className="font-semibold">{group.name}</span>
+                <Button
+                  icon="trash"
+                  minimal
+                  small
+                  intent={Intent.DANGER}
+                  onClick={() => void removeGroup(group.uid)}
+                />
+              </div>
+              <div className="flex flex-wrap items-baseline gap-2">
+                <div
+                  className="flex-0 min-w-[160px]"
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" && getPageInput(group.uid)) {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      void addPageToGroup(group.uid, getPageInput(group.uid));
+                    }
+                  }}
+                >
+                  <AutocompleteInput
+                    key={getAutocompleteKey(group.uid)}
+                    value={getPageInput(group.uid)}
+                    placeholder="Add page…"
+                    setValue={(v) => setPageInput(group.uid, v)}
+                    options={getAllPageNames()}
+                    maxItemsDisplayed={50}
+                  />
+                </div>
+                <Button
+                  icon="plus"
+                  small
+                  minimal
+                  onClick={() =>
+                    void addPageToGroup(group.uid, getPageInput(group.uid))
+                  }
+                  disabled={
+                    !getPageInput(group.uid) ||
+                    group.pages.some((p) => p.name === getPageInput(group.uid))
                   }
-                }}
-              >
-                <AutocompleteInput
-                  key={getAutocompleteKey(group.uid)}
-                  value={getPageInput(group.uid)}
-                  placeholder="Add page…"
-                  setValue={(v) => setPageInput(group.uid, v)}
-                  options={getAllPageNames()}
-                  maxItemsDisplayed={50}
                 />
               </div>
-              <Button
-                icon="plus"
-                small
-                minimal
-                onClick={() =>
-                  void addPageToGroup(group.uid, getPageInput(group.uid))
-                }
-                disabled={
-                  !getPageInput(group.uid) ||
-                  group.pages.some((p) => p.name === getPageInput(group.uid))
-                }
-              />
+              {group.pages.length > 0 && (
+                <div className="mt-2 flex flex-wrap gap-1">
+                  {group.pages.map((p) => (
+                    <Tag
+                      key={p.uid}
+                      onRemove={() =>
+                        void removePageFromGroup(group.uid, p.uid)
+                      }
+                      round
+                      minimal
+                    >
+                      {p.name}
+                    </Tag>
+                  ))}
+                </div>
+              )}
             </div>
-            {group.pages.length > 0 && (
-              <div className="mt-2 flex flex-wrap gap-1">
-                {group.pages.map((p) => (
-                  <Tag
-                    key={p.uid}
-                    onRemove={() => void removePageFromGroup(group.uid, p.uid)}
-                    round
-                    minimal
-                  >
-                    {p.name}
-                  </Tag>
-                ))}
-              </div>
-            )}
-          </div>
-        ))}
-      </div>
-    </Label>
+          ))}
+        </div>
+      }
+    />
   );
 };
 
diff --git a/apps/roam/src/components/settings/PreferencesGeneral.tsx b/apps/roam/src/components/settings/PreferencesGeneral.tsx
index c5eb08706..8af6537ec 100644
--- a/apps/roam/src/components/settings/PreferencesGeneral.tsx
+++ b/apps/roam/src/components/settings/PreferencesGeneral.tsx
@@ -3,7 +3,6 @@ import { OnloadArgs } from "roamjs-components/types";
 import { render as renderToast } from "roamjs-components/components/Toast";
 import { Label, Dialog, Button, Intent, Classes } from "@blueprintjs/core";
 import posthog from "posthog-js";
-import Description from "~/components/settings/SettingsDescription";
 import { NodeMenuTriggerComponent } from "~/components/DiscourseNodeMenu";
 import { NodeSearchMenuTriggerSetting } from "../DiscourseNodeSearchMenu";
 import {
@@ -24,7 +23,7 @@ import { GLOBAL_KEYS, PERSONAL_KEYS } from "./utils/settingKeys";
 import { setPersonalSetting, type SettingsSnapshot } from "./utils/accessors";
 import { useLegacyConfigBlocks } from "./utils/useLegacyConfigBlocks";
 import { SettingsGroup } from "./components/SettingsHeadings";
-import { settingAnchor } from "./utils/settingAnchor";
+import SettingItemRow from "./components/SettingItemRow";
 import { ROAM_DOCS, withDocsLink } from "./utils/docs";
 
 const enum RelationMigrationDialog {
@@ -112,14 +111,18 @@ const PreferencesGeneral = ({
 
   return (
     <div className="flex flex-col gap-4 p-1">
-      <Label {...settingAnchor([PERSONAL_KEYS.nodeSearchMenuTrigger])}>
-        Node search menu trigger
-        <Description description="Set the trigger character for the node search menu." />
-        <NodeSearchMenuTriggerSetting
-          onloadArgs={onloadArgs}
-          initialValue={personalSettings[PERSONAL_KEYS.nodeSearchMenuTrigger]}
-        />
-      </Label>
+      <SettingItemRow
+        label="Node search menu trigger"
+        description="Set the trigger character for the node search menu."
+        scope="personal"
+        settingKeys={[PERSONAL_KEYS.nodeSearchMenuTrigger]}
+        control={
+          <NodeSearchMenuTriggerSetting
+            onloadArgs={onloadArgs}
+            initialValue={personalSettings[PERSONAL_KEYS.nodeSearchMenuTrigger]}
+          />
+        }
+      />
       <PersonalFlagPanel
         title="Text selection popup"
         description={withDocsLink(
@@ -190,22 +193,24 @@ const PreferencesGeneral = ({
           initialValue={globalSettings[GLOBAL_KEYS.trigger]}
           {...legacyBlocks.trigger}
         />
-        <Label {...settingAnchor([PERSONAL_KEYS.personalNodeMenuTrigger])}>
-          Personal override
-          <Description
-            description={withDocsLink(
-              "Override the global trigger for the discourse node menu.",
-              ROAM_DOCS.creatingNodes,
-            )}
-          />
-          <NodeMenuTriggerComponent
-            extensionAPI={extensionAPI}
-            initialValue={
-              personalSettings[PERSONAL_KEYS.personalNodeMenuTrigger]
-            }
-            placeholder=""
-          />
-        </Label>
+        <SettingItemRow
+          label="Personal override"
+          description={withDocsLink(
+            "Override the global trigger for the discourse node menu.",
+            ROAM_DOCS.creatingNodes,
+          )}
+          scope="personal"
+          settingKeys={[PERSONAL_KEYS.personalNodeMenuTrigger]}
+          control={
+            <NodeMenuTriggerComponent
+              extensionAPI={extensionAPI}
+              initialValue={
+                personalSettings[PERSONAL_KEYS.personalNodeMenuTrigger]
+              }
+              placeholder=""
+            />
+          }
+        />
       </SettingsGroup>
       <Dialog
         isOpen={
diff --git a/apps/roam/src/components/settings/QuerySettings.tsx b/apps/roam/src/components/settings/QuerySettings.tsx
index 8b68e6f37..9805359ca 100644
--- a/apps/roam/src/components/settings/QuerySettings.tsx
+++ b/apps/roam/src/components/settings/QuerySettings.tsx
@@ -1,10 +1,7 @@
 import React from "react";
 import { OnloadArgs } from "roamjs-components/types";
-import { Label } from "@blueprintjs/core";
 import { DEFAULT_PAGE_SIZE_KEY, HIDE_METADATA_KEY } from "~/data/userSettings";
-import Description from "~/components/settings/SettingsDescription";
 import DefaultFilters from "./DefaultFilters";
-import { settingAnchor } from "./utils/settingAnchor";
 import {
   PersonalFlagPanel,
   PersonalNumberPanel,
@@ -17,6 +14,7 @@ import {
 import { type SettingsSnapshot } from "./utils/accessors";
 import posthog from "posthog-js";
 import { ROAM_DOCS, withDocsLink } from "./utils/docs";
+import SettingItemRow from "./components/SettingItemRow";
 
 const QuerySettings = ({
   extensionAPI,
@@ -70,21 +68,22 @@ const QuerySettings = ({
           void extensionAPI.settings.set("query-pages", values);
         }}
       />
-      <Label
-        {...settingAnchor([PERSONAL_KEYS.query, QUERY_KEYS.defaultFilters])}
-      >
-        Default filters
-        <Description
-          description={withDocsLink(
-            "Any filters that should be applied to your results by default",
-            ROAM_DOCS.querying,
-          )}
-        />
-        <DefaultFilters
-          extensionAPI={extensionAPI}
-          defaultFilters={querySettings[QUERY_KEYS.defaultFilters]}
-        />
-      </Label>
+      <SettingItemRow
+        label="Default filters"
+        description={withDocsLink(
+          "Any filters that should be applied to your results by default",
+          ROAM_DOCS.querying,
+        )}
+        scope="personal"
+        settingKeys={[PERSONAL_KEYS.query, QUERY_KEYS.defaultFilters]}
+        controlPlacement="below"
+        control={
+          <DefaultFilters
+            extensionAPI={extensionAPI}
+            defaultFilters={querySettings[QUERY_KEYS.defaultFilters]}
+          />
+        }
+      />
     </div>
   );
 };
diff --git a/apps/roam/src/components/settings/SettingsDescription.tsx b/apps/roam/src/components/settings/SettingsDescription.tsx
index 587695ec2..c8c191659 100644
--- a/apps/roam/src/components/settings/SettingsDescription.tsx
+++ b/apps/roam/src/components/settings/SettingsDescription.tsx
@@ -1,10 +1,17 @@
 import React from "react";
-import Description from "roamjs-components/components/Description";
 
-type SettingsDescriptionProps = React.ComponentProps<typeof Description>;
-
-const SettingsDescription = (
-  props: SettingsDescriptionProps,
-): React.ReactElement => <Description {...props} interactionKind="hover" />;
+/**
+ * Renders a setting's description inline. It used to be a hover popover, which
+ * dismissed on mouseleave before a doc link inside it could be clicked
+ * (ENG-2080). Rows built on `SettingItemRow` get this styling from the row
+ * itself; this component remains for rows not yet migrated (ENG-2187).
+ */
+const SettingsDescription = ({
+  description,
+}: {
+  description: React.ReactNode;
+}): React.ReactElement => (
+  <div className="text-sm font-normal text-gray-500">{description}</div>
+);
 
 export default SettingsDescription;
diff --git a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx
index 09d8125f3..a7964c4b8 100644
--- a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx
+++ b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx
@@ -6,17 +6,17 @@ import React, {
   useEffect,
 } from "react";
 import {
-  Checkbox,
   InputGroup,
-  Label,
   NumericInput,
   HTMLSelect,
   Button,
+  Switch,
   Tag,
   TextArea,
 } from "@blueprintjs/core";
-import Description from "~/components/settings/SettingsDescription";
-import { settingAnchor } from "~/components/settings/utils/settingAnchor";
+import SettingItemRow, {
+  type SettingScope,
+} from "~/components/settings/components/SettingItemRow";
 import getFirstChildUidByBlockUid from "roamjs-components/queries/getFirstChildUidByBlockUid";
 import createBlock from "roamjs-components/writes/createBlock";
 import updateBlock from "roamjs-components/writes/updateBlock";
@@ -54,6 +54,11 @@ type FlagSetter = (keys: string[], value: boolean) => void;
 type NumberSetter = (keys: string[], value: number) => void;
 
 type MultiTextSetter = (keys: string[], value: string[]) => void;
+
+type RowPresentationProps = {
+  scope?: SettingScope;
+};
+
 type BaseTextPanelProps = {
   title: string;
   description: React.ReactNode;
@@ -65,7 +70,8 @@ type BaseTextPanelProps = {
   error?: string;
   disabled?: boolean;
   onChange?: (value: string) => void;
-} & RoamBlockSyncProps;
+} & RoamBlockSyncProps &
+  RowPresentationProps;
 
 type BaseFlagPanelProps = {
   title: string;
@@ -77,7 +83,8 @@ type BaseFlagPanelProps = {
   disabled?: boolean;
   onBeforeChange?: (checked: boolean) => Promise<boolean>;
   onChange?: (checked: boolean) => void;
-} & RoamBlockSyncProps;
+} & RoamBlockSyncProps &
+  RowPresentationProps;
 
 type BaseNumberPanelProps = {
   title: string;
@@ -88,7 +95,8 @@ type BaseNumberPanelProps = {
   min?: number;
   max?: number;
   onChange?: (value: number) => void;
-} & RoamBlockSyncProps;
+} & RoamBlockSyncProps &
+  RowPresentationProps;
 
 type BaseSelectPanelProps = {
   title: string;
@@ -97,7 +105,8 @@ type BaseSelectPanelProps = {
   setter: TextSetter;
   options: string[];
   initialValue: string;
-} & RoamBlockSyncProps;
+} & RoamBlockSyncProps &
+  RowPresentationProps;
 
 type BaseMultiTextPanelProps = {
   title: string;
@@ -106,20 +115,8 @@ type BaseMultiTextPanelProps = {
   setter: MultiTextSetter;
   initialValue: string[];
   onChange?: (values: string[]) => void;
-} & RoamBlockSyncProps;
-
-const SettingTitle = ({
-  title,
-  description,
-}: {
-  title: React.ReactNode;
-  description?: React.ReactNode;
-}) => (
-  <>
-    {title}
-    {description ? <Description description={description} /> : null}
-  </>
-);
+} & RoamBlockSyncProps &
+  RowPresentationProps;
 
 const DEBOUNCE_MS = 250;
 const SHORT_DEBOUNCE_MS = 100;
@@ -220,6 +217,7 @@ const BaseTextPanel = ({
   uid,
   order,
   blockKey,
+  scope,
 }: BaseTextPanelProps) => {
   const [value, setValue] = useState(() => initialValue ?? "");
   const errorRef = useRef(error);
@@ -248,11 +246,17 @@ const BaseTextPanel = ({
   };
 
   return (
-    <div className="flex flex-col" {...settingAnchor(settingKeys)}>
-      <Label>
-        <SettingTitle title={title} description={description} />
-        {multiline ? (
+    <SettingItemRow
+      label={title}
+      description={description}
+      scope={scope}
+      settingKeys={settingKeys}
+      error={error}
+      controlPlacement={multiline ? "below" : "trailing"}
+      control={(controlId) =>
+        multiline ? (
           <TextArea
+            id={controlId}
             value={value}
             onChange={handleChange}
             placeholder={placeholder || initialValue}
@@ -262,17 +266,16 @@ const BaseTextPanel = ({
           />
         ) : (
           <InputGroup
+            id={controlId}
             value={value}
             onChange={handleChange}
             placeholder={placeholder || initialValue}
             disabled={disabled}
+            className="w-56"
           />
-        )}
-      </Label>
-      {error && (
-        <div className="mt-1 text-sm font-medium text-red-600">{error}</div>
-      )}
-    </div>
+        )
+      }
+    />
   );
 };
 
@@ -290,6 +293,7 @@ const BaseFlagPanel = ({
   uid: initialBlockUid,
   order,
   blockKey,
+  scope,
 }: BaseFlagPanelProps) => {
   const [internalValue, setInternalValue] = useState(
     () => initialValue ?? false,
@@ -333,14 +337,21 @@ const BaseFlagPanel = ({
   };
 
   return (
-    <div {...settingAnchor(settingKeys)}>
-      <Checkbox
-        checked={value ?? internalValue}
-        onChange={(e) => void handleChange(e)}
-        disabled={disabled}
-        labelElement={<SettingTitle title={title} description={description} />}
-      />
-    </div>
+    <SettingItemRow
+      label={title}
+      description={description}
+      scope={scope}
+      settingKeys={settingKeys}
+      control={(controlId) => (
+        <Switch
+          id={controlId}
+          checked={value ?? internalValue}
+          onChange={(e) => void handleChange(e)}
+          disabled={disabled}
+          className="mb-0"
+        />
+      )}
+    />
   );
 };
 
@@ -357,6 +368,7 @@ const BaseNumberPanel = ({
   uid,
   order,
   blockKey,
+  scope,
 }: BaseNumberPanelProps) => {
   const [value, setValue] = useState(() => initialValue ?? 0);
   const syncToBlock = useLegacyBlockSync({
@@ -379,16 +391,22 @@ const BaseNumberPanel = ({
   };
 
   return (
-    <Label {...settingAnchor(settingKeys)}>
-      <SettingTitle title={title} description={description} />
-      <NumericInput
-        value={value}
-        onValueChange={handleChange}
-        min={min}
-        max={max}
-        fill
-      />
-    </Label>
+    <SettingItemRow
+      label={title}
+      description={description}
+      scope={scope}
+      settingKeys={settingKeys}
+      control={(controlId) => (
+        <NumericInput
+          id={controlId}
+          value={value}
+          onValueChange={handleChange}
+          min={min}
+          max={max}
+          className="w-24"
+        />
+      )}
+    />
   );
 };
 
@@ -403,6 +421,7 @@ const BaseSelectPanel = ({
   uid,
   order,
   blockKey,
+  scope,
 }: BaseSelectPanelProps) => {
   const [value, setValue] = useState(() => initialValue ?? options[0]);
   const syncToBlock = useLegacyBlockSync({
@@ -424,15 +443,20 @@ const BaseSelectPanel = ({
   };
 
   return (
-    <Label {...settingAnchor(settingKeys)}>
-      <SettingTitle title={title} description={description} />
-      <HTMLSelect
-        value={value}
-        onChange={handleChange}
-        fill
-        options={options}
-      />
-    </Label>
+    <SettingItemRow
+      label={title}
+      description={description}
+      scope={scope}
+      settingKeys={settingKeys}
+      control={(controlId) => (
+        <HTMLSelect
+          id={controlId}
+          value={value}
+          onChange={handleChange}
+          options={options}
+        />
+      )}
+    />
   );
 };
 
@@ -447,6 +471,7 @@ const BaseMultiTextPanel = ({
   uid: initialBlockUid,
   order,
   blockKey,
+  scope,
 }: BaseMultiTextPanelProps) => {
   const [values, setValues] = useState<string[]>(() => initialValue ?? []);
   const [inputValue, setInputValue] = useState("");
@@ -523,32 +548,41 @@ const BaseMultiTextPanel = ({
   };
 
   return (
-    <Label {...settingAnchor(settingKeys)}>
-      <SettingTitle title={title} description={description} />
-      <div className="flex gap-2">
-        <InputGroup
-          value={inputValue}
-          onChange={(e) => setInputValue(e.target.value)}
-          onKeyDown={handleKeyDown}
-          placeholder="Add new item"
-          className="flex-grow"
-        />
-        <Button
-          icon="plus"
-          onClick={() => void handleAdd()}
-          disabled={!inputValue.trim()}
-        />
-      </div>
-      {values.length > 0 && (
-        <div className="mt-2 flex flex-wrap gap-1">
-          {values.map((v, i) => (
-            <Tag key={i} onRemove={() => handleRemove(i)} minimal>
-              {v}
-            </Tag>
-          ))}
-        </div>
+    <SettingItemRow
+      label={title}
+      description={description}
+      scope={scope}
+      settingKeys={settingKeys}
+      controlPlacement="below"
+      control={(controlId) => (
+        <>
+          <div className="flex gap-2">
+            <InputGroup
+              id={controlId}
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Add new item"
+              className="flex-grow"
+            />
+            <Button
+              icon="plus"
+              onClick={() => void handleAdd()}
+              disabled={!inputValue.trim()}
+            />
+          </div>
+          {values.length > 0 && (
+            <div className="mt-2 flex flex-wrap gap-1">
+              {values.map((v, i) => (
+                <Tag key={i} onRemove={() => handleRemove(i)} minimal>
+                  {v}
+                </Tag>
+              ))}
+            </div>
+          )}
+        </>
       )}
-    </Label>
+    />
   );
 };
 
@@ -604,6 +638,7 @@ export const FeatureFlagPanel = ({
   uid,
   order,
   blockKey,
+  scope = "global",
 }: {
   title: string;
   description: React.ReactNode;
@@ -613,7 +648,8 @@ export const FeatureFlagPanel = ({
   disabled?: boolean;
   onBeforeEnable?: () => Promise<boolean>;
   onAfterChange?: (checked: boolean) => void;
-} & RoamBlockSyncProps) => {
+} & RoamBlockSyncProps &
+  RowPresentationProps) => {
   const handleBeforeChange:
     | ((checked: boolean) => Promise<boolean>)
     | undefined = onBeforeEnable
@@ -629,6 +665,7 @@ export const FeatureFlagPanel = ({
     <BaseFlagPanel
       title={title}
       blockKey={blockKey}
+      scope={scope}
       description={description}
       settingKeys={[featureKey as string]}
       setter={featureFlagSetter}
@@ -644,50 +681,94 @@ export const FeatureFlagPanel = ({
   );
 };
 
-export const GlobalTextPanel = (props: TextWrapperProps) => (
-  <BaseTextPanel {...props} {...globalAccessors.text} />
+/**
+ * The scope indicator is derived from the wrapper rather than passed by each
+ * call site, because the wrapper already binds the setter that decides who a
+ * value is written for. A call site that overrides `setter` must therefore
+ * also pass `scope`, or the indicator will contradict where the value lands.
+ */
+export const GlobalTextPanel = ({
+  scope = "global",
+  ...props
+}: TextWrapperProps) => (
+  <BaseTextPanel {...props} scope={scope} {...globalAccessors.text} />
 );
 
-export const GlobalFlagPanel = (props: FlagWrapperProps) => (
-  <BaseFlagPanel {...props} {...globalAccessors.flag} />
+export const GlobalFlagPanel = ({
+  scope = "global",
+  ...props
+}: FlagWrapperProps) => (
+  <BaseFlagPanel {...props} scope={scope} {...globalAccessors.flag} />
 );
 
-export const GlobalNumberPanel = (props: NumberWrapperProps) => (
-  <BaseNumberPanel {...props} {...globalAccessors.number} />
+export const GlobalNumberPanel = ({
+  scope = "global",
+  ...props
+}: NumberWrapperProps) => (
+  <BaseNumberPanel {...props} scope={scope} {...globalAccessors.number} />
 );
 
-export const GlobalSelectPanel = (props: SelectWrapperProps) => (
-  <BaseSelectPanel {...props} {...globalAccessors.text} />
+export const GlobalSelectPanel = ({
+  scope = "global",
+  ...props
+}: SelectWrapperProps) => (
+  <BaseSelectPanel {...props} scope={scope} {...globalAccessors.text} />
 );
 
-export const GlobalMultiTextPanel = (props: MultiTextWrapperProps) => (
-  <BaseMultiTextPanel {...props} {...globalAccessors.multiText} />
+export const GlobalMultiTextPanel = ({
+  scope = "global",
+  ...props
+}: MultiTextWrapperProps) => (
+  <BaseMultiTextPanel {...props} scope={scope} {...globalAccessors.multiText} />
 );
 
-export const PersonalTextPanel = ({ setter, ...props }: TextWrapperProps) => (
-  <BaseTextPanel {...props} setter={setter ?? personalAccessors.text.setter} />
+export const PersonalTextPanel = ({
+  setter,
+  scope = "personal",
+  ...props
+}: TextWrapperProps) => (
+  <BaseTextPanel
+    {...props}
+    scope={scope}
+    setter={setter ?? personalAccessors.text.setter}
+  />
 );
 
-export const PersonalFlagPanel = (props: FlagWrapperProps) => (
-  <BaseFlagPanel {...props} {...personalAccessors.flag} />
+export const PersonalFlagPanel = ({
+  scope = "personal",
+  ...props
+}: FlagWrapperProps) => (
+  <BaseFlagPanel {...props} scope={scope} {...personalAccessors.flag} />
 );
 
 export const PersonalNumberPanel = ({
   setter,
+  scope = "personal",
   ...props
 }: NumberWrapperProps) => (
   <BaseNumberPanel
     {...props}
+    scope={scope}
     setter={setter ?? personalAccessors.number.setter}
   />
 );
 
-export const PersonalSelectPanel = (props: SelectWrapperProps) => (
-  <BaseSelectPanel {...props} {...personalAccessors.text} />
+export const PersonalSelectPanel = ({
+  scope = "personal",
+  ...props
+}: SelectWrapperProps) => (
+  <BaseSelectPanel {...props} scope={scope} {...personalAccessors.text} />
 );
 
-export const PersonalMultiTextPanel = (props: MultiTextWrapperProps) => (
-  <BaseMultiTextPanel {...props} {...personalAccessors.multiText} />
+export const PersonalMultiTextPanel = ({
+  scope = "personal",
+  ...props
+}: MultiTextWrapperProps) => (
+  <BaseMultiTextPanel
+    {...props}
+    scope={scope}
+    {...personalAccessors.multiText}
+  />
 );
 
 const createDiscourseNodeSetter =
@@ -715,6 +796,7 @@ export const DiscourseNodeTextPanel = ({
   }) => (
   <BaseTextPanel
     {...props}
+    scope="nodeType"
     initialValue={
       getDiscourseNodeSetting<string>(nodeType, props.settingKeys) ??
       props.initialValue ??
@@ -736,6 +818,7 @@ export const DiscourseNodeFlagPanel = ({
   }) => (
   <BaseFlagPanel
     {...props}
+    scope="nodeType"
     initialValue={
       getDiscourseNodeSetting<boolean>(nodeType, props.settingKeys) ??
       props.initialValue ??
@@ -752,6 +835,7 @@ export const DiscourseNodeSelectPanel = ({
   RoamBlockSyncProps & { options: string[]; initialValue?: string }) => (
   <BaseSelectPanel
     {...props}
+    scope="nodeType"
     initialValue={
       getDiscourseNodeSetting<string>(nodeType, props.settingKeys) ??
       props.initialValue ??
@@ -773,6 +857,7 @@ export const DiscourseNodeNumberPanel = ({
   }) => (
   <BaseNumberPanel
     {...props}
+    scope="nodeType"
     initialValue={
       getDiscourseNodeSetting<number>(nodeType, props.settingKeys) ??
       props.initialValue ??
diff --git a/apps/roam/src/components/settings/components/EphemeralBlocksPanel.tsx b/apps/roam/src/components/settings/components/EphemeralBlocksPanel.tsx
index 25cfa7ee0..35e743fbf 100644
--- a/apps/roam/src/components/settings/components/EphemeralBlocksPanel.tsx
+++ b/apps/roam/src/components/settings/components/EphemeralBlocksPanel.tsx
@@ -1,6 +1,4 @@
 import React, { useRef, useEffect, useCallback, useState } from "react";
-import { Label } from "@blueprintjs/core";
-import Description from "~/components/settings/SettingsDescription";
 import createBlock from "roamjs-components/writes/createBlock";
 import deleteBlock from "roamjs-components/writes/deleteBlock";
 import getFullTreeByParentUid from "roamjs-components/queries/getFullTreeByParentUid";
@@ -12,6 +10,7 @@ import {
   setDiscourseNodeSetting,
 } from "~/components/settings/utils/accessors";
 import type { DiscourseNodeBaseProps } from "./BlockPropSettingPanels";
+import SettingItemRow from "~/components/settings/components/SettingItemRow";
 
 const DEBOUNCE_MS = 250;
 const TEMPLATE_BUFFER_TEXT = "Template";
@@ -212,14 +211,16 @@ const DualWriteBlocksPanel = ({
     };
   }, [renderUid, handleChange, flushPendingChanges]);
 
+  // One node either way: the ref must attach whether or not a header wraps it.
+  const blocksContainer = (
+    <div
+      ref={containerRef}
+      className="dg-dualwrite-blocks rounded border border-gray-200 py-2"
+    />
+  );
+
   return (
     <>
-      {title ? (
-        <Label>
-          {title}
-          <Description description={description} />
-        </Label>
-      ) : null}
       <style>{`.dg-dualwrite-blocks > div > .rm-block-main {
     display: none;
   }
@@ -229,10 +230,17 @@ const DualWriteBlocksPanel = ({
   .dg-dualwrite-blocks > div > .rm-block-children {
     margin-left: -4px;
   }`}</style>
-      <div
-        ref={containerRef}
-        className="dg-dualwrite-blocks rounded border border-gray-200 py-2"
-      />
+      {title ? (
+        <SettingItemRow
+          label={title}
+          description={description}
+          scope="nodeType"
+          controlPlacement="below"
+          control={blocksContainer}
+        />
+      ) : (
+        blocksContainer
+      )}
     </>
   );
 };
diff --git a/apps/roam/src/components/settings/components/SettingDrillDownSummary.tsx b/apps/roam/src/components/settings/components/SettingDrillDownSummary.tsx
new file mode 100644
index 000000000..82d19e833
--- /dev/null
+++ b/apps/roam/src/components/settings/components/SettingDrillDownSummary.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { Button } from "@blueprintjs/core";
+
+/**
+ * Trailing control for a setting whose value is edited on its own page. Purely
+ * presentational — the caller owns navigation, so this stays usable before the
+ * settings nav primitive lands (ENG-2186).
+ */
+const SettingDrillDownSummary = ({
+  summary,
+  onClick,
+  disabled,
+}: {
+  /**
+   * Current value, so the row is readable without drilling in. Where the target
+   * has no single value — a list, a template — an action label reads better.
+   */
+  summary: React.ReactNode;
+  onClick: () => void;
+  disabled?: boolean;
+}): React.ReactElement => (
+  <Button
+    minimal
+    rightIcon="chevron-right"
+    onClick={onClick}
+    disabled={disabled}
+    className="max-w-xs"
+  >
+    <span className="truncate text-gray-500">{summary}</span>
+  </Button>
+);
+
+export default SettingDrillDownSummary;
diff --git a/apps/roam/src/components/settings/components/SettingItemRow.tsx b/apps/roam/src/components/settings/components/SettingItemRow.tsx
new file mode 100644
index 000000000..d8dd9709b
--- /dev/null
+++ b/apps/roam/src/components/settings/components/SettingItemRow.tsx
@@ -0,0 +1,112 @@
+import React, { useId } from "react";
+import { Icon, type IconName, Position, Tooltip } from "@blueprintjs/core";
+import { settingAnchor } from "~/components/settings/utils/settingAnchor";
+
+/** Who a setting applies to. Populating these is ENG-2187; the row only renders them. */
+export type SettingScope = "personal" | "global" | "nodeType";
+
+const SCOPE_INDICATORS = {
+  personal: {
+    icon: "person",
+    tooltip: "Personal — applies only to you",
+  },
+  global: {
+    icon: "globe",
+    tooltip: "Graph-wide — applies to everyone in this graph",
+  },
+  nodeType: {
+    icon: "diagram-tree",
+    tooltip: "Node type — applies to every node of this type",
+  },
+} as const satisfies Record<SettingScope, { icon: IconName; tooltip: string }>;
+
+/**
+ * Two Blueprint rules will push this badge out of line if the surrounding
+ * markup changes: `label.bp3-label .bp3-popover-wrapper` sets `display: block`
+ * and `margin-top: 5px` at specificity (0,2,1), which outranks any utility
+ * class, and `.bp3-icon` is `vertical-align: text-bottom`. Both are neutralised
+ * here by the label being a raw `<label>` rather than Blueprint's `<Label>`
+ * (so the first selector cannot match) and by the flex layout below (which
+ * makes `vertical-align` inert). Keep both properties when editing.
+ */
+const SettingScopeIndicator = ({ scope }: { scope: SettingScope }) => {
+  const { icon, tooltip } = SCOPE_INDICATORS[scope];
+  return (
+    <Tooltip content={tooltip} position={Position.TOP} hoverOpenDelay={300}>
+      <span
+        aria-label={tooltip}
+        className="dg-setting-row__scope flex h-5 w-5 flex-shrink-0 items-center justify-center rounded text-gray-500"
+      >
+        <Icon icon={icon} iconSize={12} />
+      </span>
+    </Tooltip>
+  );
+};
+
+type SettingItemRowProps = {
+  label: React.ReactNode;
+  description?: React.ReactNode;
+  /**
+   * Given the row's generated id so the control can be associated with the
+   * label. Pass a plain node for controls that own their own labelling.
+   */
+  control: React.ReactNode | ((controlId: string) => React.ReactNode);
+  scope?: SettingScope;
+  /** `below` is for controls too tall to sit beside the label, such as a textarea. */
+  controlPlacement?: "trailing" | "below";
+  settingKeys?: string[];
+  error?: string;
+};
+
+const SettingItemRow = ({
+  label,
+  description,
+  control,
+  scope,
+  controlPlacement = "trailing",
+  settingKeys,
+  error,
+}: SettingItemRowProps): React.ReactElement => {
+  const controlId = useId();
+  const isAssociated = typeof control === "function";
+  // A raw label keeps Blueprint's `.bp3-label` spacing out of the row, and
+  // keeps the description a sibling rather than a descendant — a description
+  // nested in the label makes its doc links toggle the control (ENG-2080).
+  const LabelTag = isAssociated ? "label" : "div";
+
+  return (
+    <div
+      {...(settingKeys ? settingAnchor(settingKeys) : {})}
+      className={`dg-setting-row py-3 ${
+        controlPlacement === "trailing"
+          ? "flex items-center justify-between gap-4"
+          : "flex flex-col gap-2"
+      }`}
+    >
+      <div className="flex min-w-0 flex-col gap-0.5">
+        <LabelTag
+          {...(isAssociated ? { htmlFor: controlId } : {})}
+          className={`dg-setting-row__label mb-0 flex items-center gap-2 font-semibold ${
+            isAssociated ? "cursor-pointer" : ""
+          }`}
+        >
+          {scope ? <SettingScopeIndicator scope={scope} /> : null}
+          <span>{label}</span>
+        </LabelTag>
+        {description ? (
+          <div className="text-sm font-normal text-gray-500">{description}</div>
+        ) : null}
+        {error ? (
+          <div className="text-sm font-medium text-red-600">{error}</div>
+        ) : null}
+      </div>
+      <div
+        className={controlPlacement === "trailing" ? "flex-shrink-0" : "w-full"}
+      >
+        {isAssociated ? control(controlId) : control}
+      </div>
+    </div>
+  );
+};
+
+export default SettingItemRow;
diff --git a/apps/roam/src/components/settings/components/SettingKeycapInput.tsx b/apps/roam/src/components/settings/components/SettingKeycapInput.tsx
new file mode 100644
index 000000000..228c0a82a
--- /dev/null
+++ b/apps/roam/src/components/settings/components/SettingKeycapInput.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { InputGroup, type InputGroupProps2 } from "@blueprintjs/core";
+
+/**
+ * Trailing control for a setting whose value is a single trigger character or
+ * key combo. Presentational only, so the existing trigger and shortcut inputs
+ * keep owning their capture behaviour. Use Blueprint's own `inputRef` to reach
+ * the underlying input.
+ */
+const SettingKeycapInput = ({
+  wide = false,
+  className = "",
+  ...props
+}: InputGroupProps2 & { wide?: boolean }): React.ReactElement => (
+  <InputGroup
+    {...props}
+    className={`dg-setting-keycap ${wide ? "w-40" : "w-16"} ${className}`}
+  />
+);
+
+export default SettingKeycapInput;
diff --git a/apps/roam/src/components/settings/components/SettingsDrillDownRow.tsx b/apps/roam/src/components/settings/components/SettingsDrillDownRow.tsx
deleted file mode 100644
index 1bb0b2c84..000000000
--- a/apps/roam/src/components/settings/components/SettingsDrillDownRow.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react";
-import { Button, Intent, Label } from "@blueprintjs/core";
-import Description from "~/components/settings/SettingsDescription";
-
-const SettingsDrillDownRow = ({
-  title,
-  description,
-  buttonText,
-  onClick,
-}: {
-  title: string;
-  description: React.ReactNode;
-  buttonText: string;
-  onClick: () => void;
-}): JSX.Element => (
-  <Label>
-    {title}
-    <Description description={description} />
-    <div>
-      <Button
-        outlined
-        intent={Intent.PRIMARY}
-        rightIcon="chevron-right"
-        text={buttonText}
-        onClick={onClick}
-      />
-    </div>
-  </Label>
-);
-
-export default SettingsDrillDownRow;
diff --git a/apps/roam/src/styles/settingsStyles.css b/apps/roam/src/styles/settingsStyles.css
index c6d345e00..431e3c2ed 100644
--- a/apps/roam/src/styles/settingsStyles.css
+++ b/apps/roam/src/styles/settingsStyles.css
@@ -40,6 +40,12 @@
 :root {
   /* Brand secondary, mirroring packages/tailwind-config. */
   --dg-secondary: #5f57c0;
+  /* Neutrals, likewise mirrored: Roam ships Tailwind's own utilities but not
+     this repo's theme extensions, so `neutral-dark`/`neutral-light` never
+     resolve in the extension. */
+  --dg-neutral-dark: #1f1f1f;
+  --dg-neutral-light: #f1f1f1;
+  --dg-border: rgb(229, 231, 235);
 }
 
 /** Hand-rolled: apps/roam has no Tailwind build, so only utilities Roam ships resolve. */
@@ -88,3 +94,26 @@
   gap: 44px;
   padding: 2px;
 }
+
+/* Setting row. Layout is Tailwind (Roam ships Tailwind's utilities, so those
+   resolve), but anything depending on Tailwind's preflight is hand-rolled:
+   `border-b` and `border` only set a width, and preflight's
+   `* { border-style: solid }` is not present, so the border never paints. */
+.dg-setting-row + .dg-setting-row {
+  border-top: 1px solid var(--dg-border);
+}
+
+.dg-setting-row__label {
+  color: var(--dg-neutral-dark);
+}
+
+.dg-setting-row__scope {
+  background-color: var(--dg-neutral-light);
+  border: 1px solid var(--dg-border);
+}
+
+/* Trailing keycap control: a narrow box whose value reads as a single key. */
+.dg-setting-keycap .bp3-input {
+  text-align: center;
+  font-family: monospace;
+}

From 5abf563aa0039c270ab7a89f05690cf937f1f71b Mon Sep 17 00:00:00 2001
From: Trang Doan <doantranghp2000@gmail.com>
Date: Mon, 31 Aug 2026 15:03:23 -0400
Subject: [PATCH 2/7] ENG-2183 Badge per-node settings as global, not their own
 scope
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A node type's settings are written to that node type's own page block props, so
the whole graph sees them — the agreed badge model has two values, `just you`
and `everyone`, and a per-node scope was never one of them. Drops the invented
`nodeType` scope and its icon; the nine affected rows now badge as `global`.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../src/components/settings/NodeConfig.tsx    | 41 +++++++++++++++++--
 .../components/BlockPropSettingPanels.tsx     |  8 ++--
 .../components/EphemeralBlocksPanel.tsx       |  2 +-
 .../settings/components/SettingItemRow.tsx    | 13 +++---
 4 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/apps/roam/src/components/settings/NodeConfig.tsx b/apps/roam/src/components/settings/NodeConfig.tsx
index 28a24f45c..7d013ef94 100644
--- a/apps/roam/src/components/settings/NodeConfig.tsx
+++ b/apps/roam/src/components/settings/NodeConfig.tsx
@@ -113,7 +113,7 @@ const DiscourseNodeColorSetting = ({
       <SettingItemRow
         label="Color"
         description="Changes the color of tags and canvas nodes"
-        scope="nodeType"
+        scope="global"
         control={
           <ControlGroup>
             <InputGroup
@@ -293,7 +293,7 @@ const NodeConfig = ({ node }: { node: DiscourseNode }) => {
         <SettingItemRow
           label="Index"
           description={`The saved list of all ${node.text} pages \u2014 which pages appear and which columns show.`}
-          scope="nodeType"
+          scope="global"
           control={
             <SettingDrillDownSummary
               summary={`See all ${node.text} nodes`}
@@ -352,6 +352,39 @@ const NodeConfig = ({ node }: { node: DiscourseNode }) => {
           parentUid={node.type}
           uid={formatUid}
         />
+        <SettingItemRow
+          label="Specification"
+          description={withDocsLink(
+            `The conditions specified to identify a ${node.text} node.`,
+            ROAM_DOCS.grammarNodes,
+          )}
+          scope="global"
+          controlPlacement="below"
+          control={
+            <DiscourseNodeSpecification
+              node={node}
+              parentUid={specificationUid}
+              parentSetEnabled={(isSpecificationEnabled) => {
+                validate({
+                  tag: tagValue,
+                  format: formatValue,
+                  isSpecificationEnabled,
+                });
+              }}
+            />
+          }
+        />
+        <SettingItemRow
+          label="Index"
+          description={`The saved list of all ${node.text} pages \u2014 which pages appear and which columns show.`}
+          scope="global"
+          control={
+            <SettingDrillDownSummary
+              summary={`See all ${node.text} nodes`}
+              onClick={() => nav.push(nodeConfigSegmentIds.index)}
+            />
+          }
+        />
       </SettingsGroup>
 
       <SettingsGroup title="Creation">
@@ -376,7 +409,7 @@ const NodeConfig = ({ node }: { node: DiscourseNode }) => {
             `The template that auto fills ${node.text} page when generated.`,
             ROAM_DOCS.creatingNodes,
           )}
-          scope="nodeType"
+          scope="global"
           control={
             <SettingDrillDownSummary
               summary="Edit template"
@@ -407,7 +440,7 @@ const NodeConfig = ({ node }: { node: DiscourseNode }) => {
             `The conditions specified to identify a ${node.text} node.`,
             ROAM_DOCS.grammarNodes,
           )}
-          scope="nodeType"
+          scope="global"
           controlPlacement="below"
           control={
             <DiscourseNodeSpecification
diff --git a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx
index a7964c4b8..5f1564766 100644
--- a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx
+++ b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx
@@ -796,7 +796,7 @@ export const DiscourseNodeTextPanel = ({
   }) => (
   <BaseTextPanel
     {...props}
-    scope="nodeType"
+    scope="global"
     initialValue={
       getDiscourseNodeSetting<string>(nodeType, props.settingKeys) ??
       props.initialValue ??
@@ -818,7 +818,7 @@ export const DiscourseNodeFlagPanel = ({
   }) => (
   <BaseFlagPanel
     {...props}
-    scope="nodeType"
+    scope="global"
     initialValue={
       getDiscourseNodeSetting<boolean>(nodeType, props.settingKeys) ??
       props.initialValue ??
@@ -835,7 +835,7 @@ export const DiscourseNodeSelectPanel = ({
   RoamBlockSyncProps & { options: string[]; initialValue?: string }) => (
   <BaseSelectPanel
     {...props}
-    scope="nodeType"
+    scope="global"
     initialValue={
       getDiscourseNodeSetting<string>(nodeType, props.settingKeys) ??
       props.initialValue ??
@@ -857,7 +857,7 @@ export const DiscourseNodeNumberPanel = ({
   }) => (
   <BaseNumberPanel
     {...props}
-    scope="nodeType"
+    scope="global"
     initialValue={
       getDiscourseNodeSetting<number>(nodeType, props.settingKeys) ??
       props.initialValue ??
diff --git a/apps/roam/src/components/settings/components/EphemeralBlocksPanel.tsx b/apps/roam/src/components/settings/components/EphemeralBlocksPanel.tsx
index 35e743fbf..9ee0108be 100644
--- a/apps/roam/src/components/settings/components/EphemeralBlocksPanel.tsx
+++ b/apps/roam/src/components/settings/components/EphemeralBlocksPanel.tsx
@@ -234,7 +234,7 @@ const DualWriteBlocksPanel = ({
         <SettingItemRow
           label={title}
           description={description}
-          scope="nodeType"
+          scope="global"
           controlPlacement="below"
           control={blocksContainer}
         />
diff --git a/apps/roam/src/components/settings/components/SettingItemRow.tsx b/apps/roam/src/components/settings/components/SettingItemRow.tsx
index d8dd9709b..a84de2223 100644
--- a/apps/roam/src/components/settings/components/SettingItemRow.tsx
+++ b/apps/roam/src/components/settings/components/SettingItemRow.tsx
@@ -2,8 +2,13 @@ import React, { useId } from "react";
 import { Icon, type IconName, Position, Tooltip } from "@blueprintjs/core";
 import { settingAnchor } from "~/components/settings/utils/settingAnchor";
 
-/** Who a setting applies to. Populating these is ENG-2187; the row only renders them. */
-export type SettingScope = "personal" | "global" | "nodeType";
+/**
+ * Who a setting applies to. Two values only, matching the agreed badge model:
+ * a setting either affects just you or everyone in the graph. Per-node settings
+ * are `global` — they are stored on the node type's own page, so the whole graph
+ * sees them.
+ */
+export type SettingScope = "personal" | "global";
 
 const SCOPE_INDICATORS = {
   personal: {
@@ -14,10 +19,6 @@ const SCOPE_INDICATORS = {
     icon: "globe",
     tooltip: "Graph-wide — applies to everyone in this graph",
   },
-  nodeType: {
-    icon: "diagram-tree",
-    tooltip: "Node type — applies to every node of this type",
-  },
 } as const satisfies Record<SettingScope, { icon: IconName; tooltip: string }>;
 
 /**

From df2448ddcce0506d47884623aba0ab76691e8895 Mon Sep 17 00:00:00 2001
From: Trang Doan <doantranghp2000@gmail.com>
Date: Fri, 4 Sep 2026 17:46:46 -0400
Subject: [PATCH 3/7] ENG-2183 Consistent separators, a compact row, and the
 number input overflow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Review feedback on the row component:

- Separators ran between sibling rows only, so they stopped at every group
  boundary. Each row now owns its bottom edge.
- BaseNumberPanel put `w-24` on the NumericInput, but Blueprint applies that
  class to the outer ControlGroup while the input keeps its intrinsic width;
  the box shrank and the input spilled past it (Advanced > Queries, and the
  same control in Export options). The width now sits on a wrapper and the
  input fills it.
- The Export dialog is too narrow for the trailing layout, so rows take a
  `compact` presentation there: no scope badge, control below the label,
  tighter vertical spacing — the shape the options had before this component.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 apps/roam/src/components/ExportOptions.tsx    |  7 +++++
 .../components/BlockPropSettingPanels.tsx     | 30 ++++++++++++++-----
 .../settings/components/SettingItemRow.tsx    | 15 +++++++---
 apps/roam/src/styles/settingsStyles.css       |  4 +--
 4 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/apps/roam/src/components/ExportOptions.tsx b/apps/roam/src/components/ExportOptions.tsx
index 04226933f..fbc2fd469 100644
--- a/apps/roam/src/components/ExportOptions.tsx
+++ b/apps/roam/src/components/ExportOptions.tsx
@@ -40,6 +40,7 @@ const ExportOptions = ({
           order={1}
           uid={exportSettings.removeSpecialCharacters.uid}
           parentUid={parentUid}
+          compact
         />
 
         <GlobalFlagPanel
@@ -53,6 +54,7 @@ const ExportOptions = ({
           order={3}
           uid={exportSettings.optsRefs.uid}
           parentUid={parentUid}
+          compact
         />
         <GlobalFlagPanel
           title="resolve block embeds"
@@ -65,6 +67,7 @@ const ExportOptions = ({
           order={4}
           uid={exportSettings.optsEmbeds.uid}
           parentUid={parentUid}
+          compact
         />
 
         <GlobalFlagPanel
@@ -78,6 +81,7 @@ const ExportOptions = ({
           order={6}
           uid={exportSettings.appendRefNodeContext.uid}
           parentUid={parentUid}
+          compact
         />
       </div>
       <div className="link-type-select-wrapper">
@@ -93,6 +97,7 @@ const ExportOptions = ({
           options={["alias", "wikilinks", "roam url"]}
           uid={exportSettings.linkType.uid}
           parentUid={parentUid}
+          compact
         />
       </div>
       <GlobalNumberPanel
@@ -106,6 +111,7 @@ const ExportOptions = ({
         order={0}
         uid={exportSettings.maxFilenameLength.uid}
         parentUid={parentUid}
+        compact
       />
       <GlobalMultiTextPanel
         title="frontmatter"
@@ -118,6 +124,7 @@ const ExportOptions = ({
         order={2}
         uid={exportSettings.frontmatter.uid}
         parentUid={parentUid}
+        compact
       />
     </div>
   );
diff --git a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx
index 5f1564766..0b54fa29f 100644
--- a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx
+++ b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx
@@ -57,6 +57,8 @@ type MultiTextSetter = (keys: string[], value: string[]) => void;
 
 type RowPresentationProps = {
   scope?: SettingScope;
+  /** Tighter row for narrow hosts such as the Export dialog. */
+  compact?: boolean;
 };
 
 type BaseTextPanelProps = {
@@ -218,6 +220,7 @@ const BaseTextPanel = ({
   order,
   blockKey,
   scope,
+  compact,
 }: BaseTextPanelProps) => {
   const [value, setValue] = useState(() => initialValue ?? "");
   const errorRef = useRef(error);
@@ -250,6 +253,7 @@ const BaseTextPanel = ({
       label={title}
       description={description}
       scope={scope}
+      compact={compact}
       settingKeys={settingKeys}
       error={error}
       controlPlacement={multiline ? "below" : "trailing"}
@@ -294,6 +298,7 @@ const BaseFlagPanel = ({
   order,
   blockKey,
   scope,
+  compact,
 }: BaseFlagPanelProps) => {
   const [internalValue, setInternalValue] = useState(
     () => initialValue ?? false,
@@ -341,6 +346,7 @@ const BaseFlagPanel = ({
       label={title}
       description={description}
       scope={scope}
+      compact={compact}
       settingKeys={settingKeys}
       control={(controlId) => (
         <Switch
@@ -369,6 +375,7 @@ const BaseNumberPanel = ({
   order,
   blockKey,
   scope,
+  compact,
 }: BaseNumberPanelProps) => {
   const [value, setValue] = useState(() => initialValue ?? 0);
   const syncToBlock = useLegacyBlockSync({
@@ -395,16 +402,19 @@ const BaseNumberPanel = ({
       label={title}
       description={description}
       scope={scope}
+      compact={compact}
       settingKeys={settingKeys}
       control={(controlId) => (
-        <NumericInput
-          id={controlId}
-          value={value}
-          onValueChange={handleChange}
-          min={min}
-          max={max}
-          className="w-24"
-        />
+        <div className="w-24">
+          <NumericInput
+            id={controlId}
+            value={value}
+            onValueChange={handleChange}
+            min={min}
+            max={max}
+            fill
+          />
+        </div>
       )}
     />
   );
@@ -422,6 +432,7 @@ const BaseSelectPanel = ({
   order,
   blockKey,
   scope,
+  compact,
 }: BaseSelectPanelProps) => {
   const [value, setValue] = useState(() => initialValue ?? options[0]);
   const syncToBlock = useLegacyBlockSync({
@@ -447,6 +458,7 @@ const BaseSelectPanel = ({
       label={title}
       description={description}
       scope={scope}
+      compact={compact}
       settingKeys={settingKeys}
       control={(controlId) => (
         <HTMLSelect
@@ -472,6 +484,7 @@ const BaseMultiTextPanel = ({
   order,
   blockKey,
   scope,
+  compact,
 }: BaseMultiTextPanelProps) => {
   const [values, setValues] = useState<string[]>(() => initialValue ?? []);
   const [inputValue, setInputValue] = useState("");
@@ -552,6 +565,7 @@ const BaseMultiTextPanel = ({
       label={title}
       description={description}
       scope={scope}
+      compact={compact}
       settingKeys={settingKeys}
       controlPlacement="below"
       control={(controlId) => (
diff --git a/apps/roam/src/components/settings/components/SettingItemRow.tsx b/apps/roam/src/components/settings/components/SettingItemRow.tsx
index a84de2223..7f2393411 100644
--- a/apps/roam/src/components/settings/components/SettingItemRow.tsx
+++ b/apps/roam/src/components/settings/components/SettingItemRow.tsx
@@ -57,6 +57,8 @@ type SettingItemRowProps = {
   controlPlacement?: "trailing" | "below";
   settingKeys?: string[];
   error?: string;
+  /** Tighter row for narrow hosts such as the Export dialog: no scope badge, control below. */
+  compact?: boolean;
 };
 
 const SettingItemRow = ({
@@ -67,6 +69,7 @@ const SettingItemRow = ({
   controlPlacement = "trailing",
   settingKeys,
   error,
+  compact = false,
 }: SettingItemRowProps): React.ReactElement => {
   const controlId = useId();
   const isAssociated = typeof control === "function";
@@ -78,8 +81,8 @@ const SettingItemRow = ({
   return (
     <div
       {...(settingKeys ? settingAnchor(settingKeys) : {})}
-      className={`dg-setting-row py-3 ${
-        controlPlacement === "trailing"
+      className={`dg-setting-row ${compact ? "py-2" : "py-3"} ${
+        controlPlacement === "trailing" && !compact
           ? "flex items-center justify-between gap-4"
           : "flex flex-col gap-2"
       }`}
@@ -91,7 +94,7 @@ const SettingItemRow = ({
             isAssociated ? "cursor-pointer" : ""
           }`}
         >
-          {scope ? <SettingScopeIndicator scope={scope} /> : null}
+          {scope && !compact ? <SettingScopeIndicator scope={scope} /> : null}
           <span>{label}</span>
         </LabelTag>
         {description ? (
@@ -102,7 +105,11 @@ const SettingItemRow = ({
         ) : null}
       </div>
       <div
-        className={controlPlacement === "trailing" ? "flex-shrink-0" : "w-full"}
+        className={
+          controlPlacement === "trailing" && !compact
+            ? "flex-shrink-0"
+            : "w-full"
+        }
       >
         {isAssociated ? control(controlId) : control}
       </div>
diff --git a/apps/roam/src/styles/settingsStyles.css b/apps/roam/src/styles/settingsStyles.css
index 431e3c2ed..a6cc6eb27 100644
--- a/apps/roam/src/styles/settingsStyles.css
+++ b/apps/roam/src/styles/settingsStyles.css
@@ -99,8 +99,8 @@
    resolve), but anything depending on Tailwind's preflight is hand-rolled:
    `border-b` and `border` only set a width, and preflight's
    `* { border-style: solid }` is not present, so the border never paints. */
-.dg-setting-row + .dg-setting-row {
-  border-top: 1px solid var(--dg-border);
+.dg-setting-row {
+  border-bottom: 1px solid var(--dg-border);
 }
 
 .dg-setting-row__label {

From 5c7b2ba23b81ada1ffcbcaa5c7644332887a970b Mon Sep 17 00:00:00 2001
From: Trang Doan <doantranghp2000@gmail.com>
Date: Fri, 4 Sep 2026 18:44:01 -0400
Subject: [PATCH 4/7] ENG-2183 No hairline after a group's last row

The group heading's 2px rule already frames the group; a 1px hairline after
its last row put two rules at one boundary.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 apps/roam/src/styles/settingsStyles.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/apps/roam/src/styles/settingsStyles.css b/apps/roam/src/styles/settingsStyles.css
index a6cc6eb27..c699f10e2 100644
--- a/apps/roam/src/styles/settingsStyles.css
+++ b/apps/roam/src/styles/settingsStyles.css
@@ -103,6 +103,12 @@
   border-bottom: 1px solid var(--dg-border);
 }
 
+/* The group's own 2px heading rule already frames it; a hairline after the
+   last row would put two rules at one boundary. */
+.dg-settings-group__rows > .dg-setting-row:last-child {
+  border-bottom: 0;
+}
+
 .dg-setting-row__label {
   color: var(--dg-neutral-dark);
 }

From 140ab110b2f9d3c6d0dfbd6c5920c369024d938d Mon Sep 17 00:00:00 2001
From: Trang Doan <doantranghp2000@gmail.com>
Date: Sat, 5 Sep 2026 18:59:01 -0400
Subject: [PATCH 5/7] ENG-2183 Drop row dividers; only section headings draw a
 rule
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Hairlines under rows were inconsistent — present on flat rows, dropped after a
group's last row, absent on rows not yet on SettingItemRow — so they told the
eye nothing reliable. A line now appears in exactly one place, under a section
heading.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 apps/roam/src/styles/settingsStyles.css | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/apps/roam/src/styles/settingsStyles.css b/apps/roam/src/styles/settingsStyles.css
index c699f10e2..a163850b2 100644
--- a/apps/roam/src/styles/settingsStyles.css
+++ b/apps/roam/src/styles/settingsStyles.css
@@ -95,19 +95,10 @@
   padding: 2px;
 }
 
-/* Setting row. Layout is Tailwind (Roam ships Tailwind's utilities, so those
-   resolve), but anything depending on Tailwind's preflight is hand-rolled:
-   `border-b` and `border` only set a width, and preflight's
-   `* { border-style: solid }` is not present, so the border never paints. */
-.dg-setting-row {
-  border-bottom: 1px solid var(--dg-border);
-}
-
-/* The group's own 2px heading rule already frames it; a hairline after the
-   last row would put two rules at one boundary. */
-.dg-settings-group__rows > .dg-setting-row:last-child {
-  border-bottom: 0;
-}
+/* Setting rows carry no dividers: the only rule on a page is the one under a
+   section heading, so a line always means "a section starts here". Layout is
+   Tailwind (Roam ships its utilities), but borders are hand-rolled below
+   because Roam has no Tailwind preflight — `border` alone never paints. */
 
 .dg-setting-row__label {
   color: var(--dg-neutral-dark);

From 4f47452ea9df889cba9cb08e21824743911714d6 Mon Sep 17 00:00:00 2001
From: Trang Doan <doantranghp2000@gmail.com>
Date: Mon, 7 Sep 2026 18:20:20 -0400
Subject: [PATCH 6/7] ENG-2183 Drop unit tests and trim comments to the
 decisions they record

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../settings/SettingsDescription.tsx          |  8 ++----
 .../components/BlockPropSettingPanels.tsx     |  8 ++----
 .../components/SettingDrillDownSummary.tsx    | 10 +------
 .../settings/components/SettingItemRow.tsx    | 27 ++++---------------
 .../components/SettingKeycapInput.tsx         |  6 -----
 apps/roam/src/styles/settingsStyles.css       |  9 ++-----
 6 files changed, 12 insertions(+), 56 deletions(-)

diff --git a/apps/roam/src/components/settings/SettingsDescription.tsx b/apps/roam/src/components/settings/SettingsDescription.tsx
index c8c191659..1359495aa 100644
--- a/apps/roam/src/components/settings/SettingsDescription.tsx
+++ b/apps/roam/src/components/settings/SettingsDescription.tsx
@@ -1,11 +1,7 @@
 import React from "react";
 
-/**
- * Renders a setting's description inline. It used to be a hover popover, which
- * dismissed on mouseleave before a doc link inside it could be clicked
- * (ENG-2080). Rows built on `SettingItemRow` get this styling from the row
- * itself; this component remains for rows not yet migrated (ENG-2187).
- */
+/** Inline, not a hover popover: the popover dismissed before its doc links could be
+ *  clicked (ENG-2080). Kept for rows not yet on SettingItemRow. */
 const SettingsDescription = ({
   description,
 }: {
diff --git a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx
index 0b54fa29f..7ddc8f6c0 100644
--- a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx
+++ b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx
@@ -695,12 +695,8 @@ export const FeatureFlagPanel = ({
   );
 };
 
-/**
- * The scope indicator is derived from the wrapper rather than passed by each
- * call site, because the wrapper already binds the setter that decides who a
- * value is written for. A call site that overrides `setter` must therefore
- * also pass `scope`, or the indicator will contradict where the value lands.
- */
+/** Scope comes from the wrapper because it binds the setter that decides where a value
+ *  lands; a call site that overrides `setter` must pass `scope` too. */
 export const GlobalTextPanel = ({
   scope = "global",
   ...props
diff --git a/apps/roam/src/components/settings/components/SettingDrillDownSummary.tsx b/apps/roam/src/components/settings/components/SettingDrillDownSummary.tsx
index 82d19e833..a66ed976c 100644
--- a/apps/roam/src/components/settings/components/SettingDrillDownSummary.tsx
+++ b/apps/roam/src/components/settings/components/SettingDrillDownSummary.tsx
@@ -1,20 +1,12 @@
 import React from "react";
 import { Button } from "@blueprintjs/core";
 
-/**
- * Trailing control for a setting whose value is edited on its own page. Purely
- * presentational — the caller owns navigation, so this stays usable before the
- * settings nav primitive lands (ENG-2186).
- */
 const SettingDrillDownSummary = ({
   summary,
   onClick,
   disabled,
 }: {
-  /**
-   * Current value, so the row is readable without drilling in. Where the target
-   * has no single value — a list, a template — an action label reads better.
-   */
+  /** Current value, or an action label where there is no single value. */
   summary: React.ReactNode;
   onClick: () => void;
   disabled?: boolean;
diff --git a/apps/roam/src/components/settings/components/SettingItemRow.tsx b/apps/roam/src/components/settings/components/SettingItemRow.tsx
index 7f2393411..11fcc5fcf 100644
--- a/apps/roam/src/components/settings/components/SettingItemRow.tsx
+++ b/apps/roam/src/components/settings/components/SettingItemRow.tsx
@@ -2,12 +2,7 @@ import React, { useId } from "react";
 import { Icon, type IconName, Position, Tooltip } from "@blueprintjs/core";
 import { settingAnchor } from "~/components/settings/utils/settingAnchor";
 
-/**
- * Who a setting applies to. Two values only, matching the agreed badge model:
- * a setting either affects just you or everyone in the graph. Per-node settings
- * are `global` — they are stored on the node type's own page, so the whole graph
- * sees them.
- */
+/** Per-node settings are `global`: they live on the node type's page, so the whole graph sees them. */
 export type SettingScope = "personal" | "global";
 
 const SCOPE_INDICATORS = {
@@ -21,15 +16,8 @@ const SCOPE_INDICATORS = {
   },
 } as const satisfies Record<SettingScope, { icon: IconName; tooltip: string }>;
 
-/**
- * Two Blueprint rules will push this badge out of line if the surrounding
- * markup changes: `label.bp3-label .bp3-popover-wrapper` sets `display: block`
- * and `margin-top: 5px` at specificity (0,2,1), which outranks any utility
- * class, and `.bp3-icon` is `vertical-align: text-bottom`. Both are neutralised
- * here by the label being a raw `<label>` rather than Blueprint's `<Label>`
- * (so the first selector cannot match) and by the flex layout below (which
- * makes `vertical-align` inert). Keep both properties when editing.
- */
+/** Raw <label> plus flex on purpose: Blueprint's `.bp3-label .bp3-popover-wrapper` and
+ *  `.bp3-icon` vertical-align rules would otherwise push the badge out of line. */
 const SettingScopeIndicator = ({ scope }: { scope: SettingScope }) => {
   const { icon, tooltip } = SCOPE_INDICATORS[scope];
   return (
@@ -47,10 +35,7 @@ const SettingScopeIndicator = ({ scope }: { scope: SettingScope }) => {
 type SettingItemRowProps = {
   label: React.ReactNode;
   description?: React.ReactNode;
-  /**
-   * Given the row's generated id so the control can be associated with the
-   * label. Pass a plain node for controls that own their own labelling.
-   */
+  /** A function receives the row's id to bind label and control; a node labels itself. */
   control: React.ReactNode | ((controlId: string) => React.ReactNode);
   scope?: SettingScope;
   /** `below` is for controls too tall to sit beside the label, such as a textarea. */
@@ -73,9 +58,7 @@ const SettingItemRow = ({
 }: SettingItemRowProps): React.ReactElement => {
   const controlId = useId();
   const isAssociated = typeof control === "function";
-  // A raw label keeps Blueprint's `.bp3-label` spacing out of the row, and
-  // keeps the description a sibling rather than a descendant — a description
-  // nested in the label makes its doc links toggle the control (ENG-2080).
+  // Description is a sibling of the label: nested, its doc links would toggle the control (ENG-2080).
   const LabelTag = isAssociated ? "label" : "div";
 
   return (
diff --git a/apps/roam/src/components/settings/components/SettingKeycapInput.tsx b/apps/roam/src/components/settings/components/SettingKeycapInput.tsx
index 228c0a82a..2fc3655c2 100644
--- a/apps/roam/src/components/settings/components/SettingKeycapInput.tsx
+++ b/apps/roam/src/components/settings/components/SettingKeycapInput.tsx
@@ -1,12 +1,6 @@
 import React from "react";
 import { InputGroup, type InputGroupProps2 } from "@blueprintjs/core";
 
-/**
- * Trailing control for a setting whose value is a single trigger character or
- * key combo. Presentational only, so the existing trigger and shortcut inputs
- * keep owning their capture behaviour. Use Blueprint's own `inputRef` to reach
- * the underlying input.
- */
 const SettingKeycapInput = ({
   wide = false,
   className = "",
diff --git a/apps/roam/src/styles/settingsStyles.css b/apps/roam/src/styles/settingsStyles.css
index a163850b2..2e59f9a3d 100644
--- a/apps/roam/src/styles/settingsStyles.css
+++ b/apps/roam/src/styles/settingsStyles.css
@@ -40,9 +40,7 @@
 :root {
   /* Brand secondary, mirroring packages/tailwind-config. */
   --dg-secondary: #5f57c0;
-  /* Neutrals, likewise mirrored: Roam ships Tailwind's own utilities but not
-     this repo's theme extensions, so `neutral-dark`/`neutral-light` never
-     resolve in the extension. */
+  /** Neutrals mirrored too: Roam ships Tailwind's utilities but not this repo's theme extensions. */
   --dg-neutral-dark: #1f1f1f;
   --dg-neutral-light: #f1f1f1;
   --dg-border: rgb(229, 231, 235);
@@ -95,10 +93,7 @@
   padding: 2px;
 }
 
-/* Setting rows carry no dividers: the only rule on a page is the one under a
-   section heading, so a line always means "a section starts here". Layout is
-   Tailwind (Roam ships its utilities), but borders are hand-rolled below
-   because Roam has no Tailwind preflight — `border` alone never paints. */
+/** No row dividers: the only rule on a page is the one under a section heading. */
 
 .dg-setting-row__label {
   color: var(--dg-neutral-dark);

From e7237978cfc2526a2ffc12077960df781ac2a2e3 Mon Sep 17 00:00:00 2001
From: Trang Doan <doantranghp2000@gmail.com>
Date: Wed, 9 Sep 2026 02:14:48 -0400
Subject: [PATCH 7/7] ENG-2183 Remove duplicated Specification and Index rows
 from the Identity group

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/components/settings/NodeConfig.tsx    | 33 -------------------
 1 file changed, 33 deletions(-)

diff --git a/apps/roam/src/components/settings/NodeConfig.tsx b/apps/roam/src/components/settings/NodeConfig.tsx
index 7d013ef94..b277bd0ec 100644
--- a/apps/roam/src/components/settings/NodeConfig.tsx
+++ b/apps/roam/src/components/settings/NodeConfig.tsx
@@ -352,39 +352,6 @@ const NodeConfig = ({ node }: { node: DiscourseNode }) => {
           parentUid={node.type}
           uid={formatUid}
         />
-        <SettingItemRow
-          label="Specification"
-          description={withDocsLink(
-            `The conditions specified to identify a ${node.text} node.`,
-            ROAM_DOCS.grammarNodes,
-          )}
-          scope="global"
-          controlPlacement="below"
-          control={
-            <DiscourseNodeSpecification
-              node={node}
-              parentUid={specificationUid}
-              parentSetEnabled={(isSpecificationEnabled) => {
-                validate({
-                  tag: tagValue,
-                  format: formatValue,
-                  isSpecificationEnabled,
-                });
-              }}
-            />
-          }
-        />
-        <SettingItemRow
-          label="Index"
-          description={`The saved list of all ${node.text} pages \u2014 which pages appear and which columns show.`}
-          scope="global"
-          control={
-            <SettingDrillDownSummary
-              summary={`See all ${node.text} nodes`}
-              onClick={() => nav.push(nodeConfigSegmentIds.index)}
-            />
-          }
-        />
       </SettingsGroup>
 
       <SettingsGroup title="Creation">