@multiplatform.one/components 7.7.6 → 7.10.0

package/src/charts/series.tsx

@@ -1,7 +1,19 @@
 import { MIN_PRESS_TARGET } from "@multiplatform.one/theme";
 import type { ScaleBand, ScaleLinear } from "d3-scale";
-import { areaPath, arcPath, linePath, pieSlices } from "./math";
-import { Circle, G, Path, Rect, datumTargetProps } from "./svg";
+import { useId } from "react";
+import { areaPath, arcPath, linePath, pieSlices, canMaskPieSlices } from "./math";
+import {
+  Circle,
+  Defs,
+  Mask,
+  G,
+  Path,
+  Rect,
+  datumTargetProps,
+  chartMarkProps,
+  chartWebProps,
+  luminanceMaskProps,
+} from "./svg";
 import type {
   ChartCurve,
   ChartDatum,
@@ -79,6 +91,7 @@ export function BarSeries({ data, xScale, yScale, plot, fills, ...callbacks }: B
         return (
           <G key={`${datum.label}-${index}`}>
             <Rect
+              {...chartMarkProps(datum.label)}
               x={x}
               y={y}
               width={bandwidth}
@@ -147,10 +160,23 @@ export function LineSeries({
   const targetRadius = MIN_PRESS_TARGET / 2;
   return (
     <G>
-      <Path d={linePath(points, { curve })} fill="none" stroke={color} strokeWidth={strokeWidth} />
+      <Path
+        {...chartMarkProps("series line")}
+        d={linePath(points, { curve })}
+        fill="none"
+        stroke={color}
+        strokeWidth={strokeWidth}
+      />
       {showPoints
         ? points.map((point, index) => (
-            <Circle key={`point-${index}`} cx={point.x} cy={point.y} r={pointRadius} fill={color} />
+            <Circle
+              key={`point-${index}`}
+              {...chartMarkProps(data[index]?.label ?? `point ${index + 1}`)}
+              cx={point.x}
+              cy={point.y}
+              r={pointRadius}
+              fill={color}
+            />
           ))
         : null}
       {interactive
@@ -187,7 +213,14 @@ export interface AreaSeriesProps {
  * LineSeries on top, which owns points and hit targets.
  */
 export function AreaSeries({ points, baseline, color, opacity = 0.18, curve }: AreaSeriesProps) {
-  return <Path d={areaPath(points, { baseline, curve })} fill={color} opacity={opacity} />;
+  return (
+    <Path
+      {...chartMarkProps("series area")}
+      d={areaPath(points, { baseline, curve })}
+      fill={color}
+      opacity={opacity}
+    />
+  );
 }
 
 // ── Pie / Donut ───────────────────────────────────────────────
@@ -200,7 +233,7 @@ export interface PieSeriesProps extends DatumTargetCallbacks {
   outerRadius: number;
   /** > 0 renders a donut with a true transparent hole. */
   innerRadius?: number;
-  /** Radians between slices (default 0). */
+  /** Explicit radians between slices. Omit for the default boundary mask. */
   padAngle?: number;
   /** Resolved fill per datum index. */
   fills: string[];
@@ -218,28 +251,75 @@ export function PieSeries({
   cy,
   outerRadius,
   innerRadius = 0,
-  padAngle = 0,
+  padAngle,
   fills,
   ...callbacks
 }: PieSeriesProps) {
+  const instanceId = useId().replace(/[^a-zA-Z0-9_-]/g, "_");
   const slices = pieSlices(data, { padAngle });
+  const maskGaps = padAngle === undefined && canMaskPieSlices(slices, innerRadius, outerRadius);
   const interactive = hasTargets(callbacks);
   return (
     <G transform={`translate(${cx}, ${cy})`}>
-      {slices.map((slice) => (
-        <Path
-          key={`${slice.datum.label}-${slice.index}`}
-          d={arcPath({
-            startAngle: slice.startAngle,
-            endAngle: slice.endAngle,
-            padAngle: slice.padAngle,
-            innerRadius,
-            outerRadius,
-          })}
-          fill={fills[slice.index]}
-          {...(interactive ? targetPropsFor(callbacks, slice.datum, slice.index) : {})}
-        />
-      ))}
+      {slices.map((slice) => {
+        const path = arcPath({
+          startAngle: slice.startAngle,
+          endAngle: slice.endAngle,
+          padAngle: slice.padAngle,
+          innerRadius,
+          outerRadius,
+        });
+        const masked = maskGaps && slice.value > 0;
+        const maskId = `mpo-pie-${instanceId}-${slice.index}`;
+        return (
+          <G key={`${slice.datum.label}-${slice.index}`}>
+            {masked ? (
+              <Defs>
+                <Mask
+                  id={maskId}
+                  x={-outerRadius - 2}
+                  y={-outerRadius - 2}
+                  width={(outerRadius + 2) * 2}
+                  height={(outerRadius + 2) * 2}
+                  maskUnits="userSpaceOnUse"
+                  maskContentUnits="userSpaceOnUse"
+                  {...luminanceMaskProps()}
+                >
+                  <Path
+                    d={path}
+                    fill="#ffffff"
+                    stroke="#000000"
+                    strokeWidth={2}
+                    strokeLinejoin="round"
+                    strokeLinecap="round"
+                    opacity={1}
+                    fillOpacity={1}
+                    strokeOpacity={1}
+                  />
+                </Mask>
+              </Defs>
+            ) : null}
+            <Path
+              {...chartMarkProps(slice.datum.label)}
+              {...(masked
+                ? chartWebProps({
+                    "data-mpo-chart-mask": "eroded-arc-v1",
+                    "data-mpo-chart-slice": [
+                      slice.startAngle,
+                      slice.endAngle,
+                      innerRadius,
+                      outerRadius,
+                    ].join(","),
+                  })
+                : {})}
+              d={path}
+              mask={masked ? `url(#${maskId})` : undefined}
+              fill={fills[slice.index]}
+              {...(interactive ? targetPropsFor(callbacks, slice.datum, slice.index) : {})}
+            />
+          </G>
+        );
+      })}
     </G>
   );
 }

package/src/charts/svg.spec.ts

@@ -0,0 +1,28 @@
+import { expect, it, vi } from "vitest";
+
+vi.mock("@multiplatform.one/platform", () => ({ isWeb: false }));
+
+import {
+  chartChromeProps,
+  chartDatumTextProps,
+  chartMarkProps,
+  chartRootA11yProps,
+  chartWebProps,
+  luminanceMaskProps,
+} from "./svg";
+
+it("keeps browser audit attributes off native SVG props", () => {
+  expect(
+    chartRootA11yProps("Revenue", {
+      kind: "bar",
+      separated: true,
+      datumText: false,
+      datumCount: 13,
+    }),
+  ).toEqual({ accessible: true, accessibilityRole: "image", accessibilityLabel: "Revenue" });
+  expect(luminanceMaskProps()).toEqual({ maskType: "luminance" });
+  expect(chartMarkProps("North")).toEqual({});
+  expect(chartChromeProps("grid")).toEqual({});
+  expect(chartDatumTextProps(12)).toEqual({});
+  expect(chartWebProps({ "data-mpo-chart-owner": "true" })).toEqual({});
+});

package/src/charts/svg.ts

@@ -19,8 +19,10 @@
 
 import {
   Circle as TCircle,
+  Defs as TDefs,
   G as TG,
   Line as TLine,
+  Mask as TMask,
   Path as TPath,
   Rect as TRect,
   Svg as TSvg,
@@ -29,8 +31,10 @@ import {
 import { isWeb } from "@multiplatform.one/platform";
 import type {
   Circle as RNCircle,
+  Defs as RNDefs,
   G as RNG,
   Line as RNLine,
+  Mask as RNMask,
   Path as RNPath,
   Rect as RNRect,
   Svg as RNSvg,
@@ -38,6 +42,8 @@ import type {
 } from "react-native-svg";
 
 export const Svg = TSvg as unknown as typeof RNSvg;
+export const Defs = TDefs as unknown as typeof RNDefs;
+export const Mask = TMask as unknown as typeof RNMask;
 export const G = TG as unknown as typeof RNG;
 export const Rect = TRect as unknown as typeof RNRect;
 export const Circle = TCircle as unknown as typeof RNCircle;
@@ -46,11 +52,59 @@ export const Path = TPath as unknown as typeof RNPath;
 export const SvgText = TSvgText as unknown as typeof RNSvgText;
 
 /** Accessible-image props for the chart root (Axiom 12). */
-export function chartRootA11yProps(label: string): Record<string, unknown> {
-  if (isWeb) return { role: "img", "aria-label": label };
+export interface ChartProofDeclaration {
+  kind: "bar" | "pie" | "donut" | "line" | "area";
+  separated: boolean;
+  datumText: boolean;
+  datumCount: number;
+  datumValues?: Array<[string, string]>;
+}
+
+export function chartRootA11yProps(
+  label: string,
+  proof?: ChartProofDeclaration,
+): Record<string, unknown> {
+  if (isWeb)
+    return {
+      role: "img",
+      "aria-label": label,
+      ...(proof
+        ? {
+            "data-mpo-chart": proof.kind,
+            "data-mpo-chart-separated": String(proof.separated),
+            "data-mpo-chart-datum-text": String(proof.datumText),
+            "data-mpo-chart-datum-count": proof.datumCount,
+            ...(proof.datumValues
+              ? { "data-mpo-chart-data-expected": JSON.stringify(proof.datumValues) }
+              : {}),
+          }
+        : {}),
+    };
   return { accessible: true, accessibilityRole: "image", accessibilityLabel: label };
 }
 
+/** Audit declarations carry no paint and are never sent to native SVG. */
+export function chartMarkProps(label: string): Record<string, unknown> {
+  return isWeb ? { "data-mpo-chart-mark": label } : {};
+}
+
+export function chartChromeProps(kind: "axis" | "grid"): Record<string, unknown> {
+  return isWeb ? { "data-mpo-chart-chrome": kind } : {};
+}
+
+export function chartDatumTextProps(index: number): Record<string, unknown> {
+  return isWeb ? { "data-mpo-chart-datum-text": String(index) } : {};
+}
+
+export function chartWebProps(props: Record<string, unknown>): Record<string, unknown> {
+  return isWeb ? props : {};
+}
+
+/** SVG's web presentation attribute and RNSVG's explicit native prop. */
+export function luminanceMaskProps(): Record<string, unknown> {
+  return isWeb ? { "mask-type": "luminance" } : { maskType: "luminance" };
+}
+
 export interface DatumTargetInput {
   /** Per-datum accessible name (describeDatum output). */
   label?: string;

package/src/code/CodeBlock/CodeBlock.copy.spec.tsx

@@ -105,4 +105,27 @@ describe("CodeBlock copy (Input.Button + notify)", () => {
     expect(getFeedback()[0]?.scope).toBe("field");
     expect(getFeedback()[0]?.surface).toBe("alert");
   });
+
+  it("keeps failures with their block and clears them on a successful retry", async () => {
+    const result = renderWithProviders(
+      <>
+        <div data-testid="first-code">
+          <CodeBlock>{"const first = 1;"}</CodeBlock>
+        </div>
+        <div data-testid="second-code">
+          <CodeBlock>{"const second = 2;"}</CodeBlock>
+        </div>
+      </>,
+    );
+    const first = result.getByTestId("first-code");
+    const second = result.getByTestId("second-code");
+    writeText.mockRejectedValueOnce(new Error("Denied"));
+    fireEvent.click(copyOf(first)!);
+    await vi.waitFor(() => expect(first.textContent).toContain("Copy failed."));
+    expect(second.textContent).not.toContain("Copy failed.");
+    fireEvent.click(copyOf(first)!);
+    await vi.waitFor(() => expect(first.textContent).not.toContain("Copy failed."));
+    expect(getFeedback()).toHaveLength(0);
+    expect(getToasts()).toHaveLength(1);
+  });
 });

package/src/code/CodeBlock/index.tsx

@@ -24,7 +24,7 @@ import { Spacer, XStack, YStack } from "tamagui";
 import { settleMs } from "../../AnimateHeight";
 import { ErrorBoundary } from "../../ErrorBoundary";
 import { NotifyRegion } from "../../feedback/NotifyHost";
-import { copyAndNotify } from "../../feedback/copy";
+import { useCopyFeedback } from "../../feedback/copy";
 import { Code } from "../Code";
 import { HighlightedCode } from "../HighlightedCode";
 import { useShikiTokens } from "../Highlighter";
@@ -72,6 +72,7 @@ export function CodeBlock({
   disableCopy,
   size,
 }: CodeBlockProps) {
+  const { region, copy } = useCopyFeedback();
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
   // Content type scale follows the size knob (T-VALUE via sizeToken, LC-18);
@@ -123,7 +124,7 @@ export function CodeBlock({
   // (DG-FB-01 — the D-copyfield verdict replaces TooltipSimple + icon-swap).
   const showCopy = Boolean(codeText) && !disableCopy;
   const activateCopy = () => {
-    void copyAndNotify(codeText);
+    void copy(codeText);
   };
   const capSquare = sizeRecipeForToken(String(codeSize), { touch: isTouchSurface() }).height;
 
@@ -211,7 +212,7 @@ export function CodeBlock({
           )}
         </YStack>
       </ErrorBoundary>
-      <NotifyRegion scope="field" compact />
+      <NotifyRegion scope="field" region={region} compact />
     </YStack>
   );
 }

package/src/code/HighlightedCode/index.tsx

@@ -77,7 +77,7 @@ export function HighlightedCode({
           >
             {showLineNumbers && (
               <Text
-                color={componentColors.text.secondary}
+                color={knobProps.textAccentColor}
                 fontSize={resolvedFontSize}
                 width={gutterWidth}
                 data-line-number=""

package/src/componentColors.ts

@@ -30,15 +30,17 @@ export const componentColors = {
     border: "$color7",
   },
 
-  /** Text color levels. muted sits on the $color11 tier — the lowest ramp
-   * step that keeps secondary text AA-readable on color1/2 surfaces. */
+  /** Text color levels. */
   text: {
     // MPO-19 X5: was `$color12`, a second answer to what `resolveKnobs`'
     // `textAccent: high` already resolves to. `$color` IS the theme's ink,
     // and it tracks a sub-theme where the raw ramp step does not.
     primary: "$color",
-    secondary: "$color11",
-    muted: "$color11",
+    // MPO-154: `secondary` and `muted` were the same mistake one tier down —
+    // a static `$color11` read into 85 `color` props, which pinned every
+    // helper, caption and inactive label dim at `textAccent: high`. Secondary
+    // text takes `useResolvedKnobs().knobProps.textAccentColor`, which is
+    // `$color11` at low/medium (the AA floor) and `$color` at high.
     subtle: "$color8",
   },
 

package/src/feedback/ConfirmDialog.nativeFocus.spec.tsx

@@ -0,0 +1,52 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+
+const nativeHost = vi.hoisted(() => ({
+  query: vi.fn(() => []),
+  focus: vi.fn(),
+  preventDefault: vi.fn(),
+}));
+
+vi.mock("tamagui", async (original) => ({
+  ...(await original<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+
+vi.mock("../surfaces", async (original) => {
+  const React = await import("react");
+  return {
+    ...(await original<typeof import("../surfaces")>()),
+    DialogContent: React.forwardRef(function NativeContent(
+      {
+        children,
+        onOpenAutoFocus,
+      }: { children?: React.ReactNode; onOpenAutoFocus?: (event: Event) => void },
+      ref,
+    ) {
+      React.useImperativeHandle(ref, () => {
+        // RN 0.83 exposes HTMLElement for native host refs, without web focus APIs.
+        const host = Object.create(HTMLElement.prototype);
+        host.querySelectorAll = nativeHost.query;
+        host.focus = nativeHost.focus;
+        return host;
+      }, []);
+      React.useEffect(() => {
+        onOpenAutoFocus?.({ preventDefault: nativeHost.preventDefault } as unknown as Event);
+      }, [onOpenAutoFocus]);
+      return <div>{children}</div>;
+    }),
+  };
+});
+
+import { ConfirmDialog } from "./ConfirmDialog";
+
+describe("ConfirmDialog native focus ownership", () => {
+  it("leaves native host refs and open focus to the platform", () => {
+    renderWithProviders(
+      <ConfirmDialog open title="Delete project?" body="This cannot be undone." />,
+    );
+    expect(nativeHost.query).not.toHaveBeenCalled();
+    expect(nativeHost.focus).not.toHaveBeenCalled();
+    expect(nativeHost.preventDefault).not.toHaveBeenCalled();
+  });
+});

package/src/feedback/ConfirmDialog.spec.tsx

@@ -31,6 +31,26 @@ function alertdialog(): Element | null {
 }
 
 describe("ConfirmDialog", () => {
+  it("keeps a disabled destructive label on Button's readable text tier", () => {
+    renderWithProviders(
+      <ConfirmDialog
+        open
+        destructive
+        confirmDisabled
+        confirmDisabledReason="Type the project name"
+        title="Delete project?"
+        confirmLabel="Delete"
+      />,
+    );
+    const button = buttonByLabel("Delete");
+    const label = Array.from(button.querySelectorAll("span")).find(
+      (node) => node.textContent === "Delete",
+    );
+    expect(label).toBeTruthy();
+    expect(label?.className).toContain("_col-color11");
+    expect(label?.className).toContain("_fow-400");
+  });
+
   it("renders title, body, confirm, and cancel", () => {
     renderWithProviders(
       <ConfirmDialog

package/src/feedback/ConfirmDialog.tsx

@@ -27,9 +27,10 @@ import {
 } from "@multiplatform.one/theme";
 import { useCallback, useEffect, useRef, type ReactNode } from "react";
 import { useTranslation } from "../shared/i18n";
-import { Dialog, Paragraph, SizableText, XStack, YStack, type TamaguiElement } from "tamagui";
+import { Dialog, Paragraph, XStack, YStack, isWeb, type TamaguiElement } from "tamagui";
 import { countActionsInTree } from "../shared/actionScan";
 import { useReturnFocusOnClose } from "../shared/useReturnFocusOnClose";
+import { useKeyboardInset } from "../shared/useKeyboardInset";
 import { DialogContent, DialogOverlay } from "../surfaces";
 
 const TAB_STOPS =
@@ -55,16 +56,6 @@ function isTextEntry(el: HTMLElement): boolean {
   return Boolean(el.querySelector("input, textarea, [contenteditable='true']"));
 }
 
-/** R7 / §6.1: action labels are weight 400 on the TEXT NODE, never 500/600. */
-function ActionLabel({ children }: { children: string }) {
-  const { knobProps } = useResolvedKnobs();
-  return (
-    <SizableText {...knobProps.body} {...knobProps.label} fontWeight="400" userSelect="none">
-      {children}
-    </SizableText>
-  );
-}
-
 function firstTabStop(root: HTMLElement): HTMLElement | null {
   const nodes = root.querySelectorAll<HTMLElement>(TAB_STOPS);
   for (const el of nodes) {
@@ -155,6 +146,7 @@ export function ConfirmDialog({
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
   const confirmLabel = confirmLabelProp ?? t("Confirm");
+  const keyboardInset = useKeyboardInset();
   const cancelLabel = cancelLabelProp ?? t("Cancel");
   const description = body ?? children;
   const contentRef = useRef<TamaguiElement | null>(null);
@@ -195,6 +187,7 @@ export function ConfirmDialog({
   };
 
   const handleOpenAutoFocus = useCallback((event: Event) => {
+    if (!isWeb) return;
     event.preventDefault();
     const panel = panelNode(contentRef.current);
     if (panel) applyOpenFocus(panel);
@@ -203,7 +196,8 @@ export function ConfirmDialog({
   // Radix onOpenAutoFocus is the web path; this effect covers jsdom and the
   // frame where the portal ref is not ready in the auto-focus callback.
   useEffect(() => {
-    if (!open) return;
+    // RN 0.83 also exposes HTMLElement, but native refs have no DOM query API.
+    if (!open || !isWeb) return;
     let cancelled = false;
     let frames = 0;
     const run = () => {
@@ -223,7 +217,7 @@ export function ConfirmDialog({
 
   return (
     <Dialog modal open={open} onOpenChange={handleOpenChange}>
-      <Dialog.Portal>
+      <Dialog.Portal paddingBottom={keyboardInset || undefined}>
         <DialogOverlay key="overlay" />
         <DialogContent
           ref={contentRef}
@@ -279,7 +273,7 @@ export function ConfirmDialog({
                 handleOpenChange(false);
               }}
             >
-              <ActionLabel>{cancelLabel}</ActionLabel>
+              {cancelLabel}
             </Button>
             <Button
               compact
@@ -300,7 +294,7 @@ export function ConfirmDialog({
                 handleOpenChange(false);
               }}
             >
-              <ActionLabel>{confirmLabel}</ActionLabel>
+              {confirmLabel}
             </Button>
           </XStack>
         </DialogContent>

package/src/feedback/NotifyHost.tsx

@@ -120,17 +120,26 @@ function FeedbackDialog({ entry }: { entry: FeedbackEntry | undefined }) {
  */
 export function NotifyRegion({
   scope,
+  region,
   compact,
 }: {
   scope: "section" | "field";
+  /** Match one target; omitted regions display only untargeted feedback. */
+  region?: string;
   compact?: boolean;
 }) {
   const all = useFeedbackEntries();
   // SP-GAP (LC-18): inline alert stacking rides the space knob.
   const { knobProps } = useResolvedKnobs();
   const entries = useMemo(
-    () => all.filter((e) => e.surface === "alert" && e.scope === scope),
-    [all, scope],
+    () =>
+      all.filter(
+        (e) =>
+          e.surface === "alert" &&
+          e.scope === scope &&
+          (region != null ? e.region === region : e.region == null),
+      ),
+    [all, scope, region],
   );
   if (entries.length === 0) return null;
   return (

package/src/feedback/copy.ts

@@ -4,20 +4,52 @@
  */
 import { copyToClipboard } from "../hooks/useClipboard";
 import { notify } from "./notify";
+import { useCallback, useEffect, useId, useRef } from "react";
+import { dismissFeedbackByRegion } from "./store";
 
 export const COPY_OK = "Copied to clipboard.";
 export const COPY_FAIL = "Copy failed.";
 
-export function reportCopy(ok: boolean): void {
+export function reportCopy(ok: boolean, options?: { region?: string }): void {
+  const region = options?.region;
+  if (region != null) dismissFeedbackByRegion(region);
   if (ok) {
     notify({ severity: "success", scope: "page", body: COPY_OK });
     return;
   }
-  notify({ severity: "error", scope: "field", body: COPY_FAIL });
+  notify({ severity: "error", scope: "field", region, body: COPY_FAIL });
 }
 
-export async function copyAndNotify(text: string): Promise<boolean> {
+export async function copyAndNotify(text: string, options?: { region?: string }): Promise<boolean> {
   const ok = await copyToClipboard(text).catch(() => false);
-  reportCopy(ok);
+  reportCopy(ok, options);
   return ok;
 }
+
+/** Keeps copy failures beside their owner, including asynchronous clipboard results. */
+export function useCopyFeedback() {
+  const region = useId();
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      dismissFeedbackByRegion(region);
+    };
+  }, [region]);
+  const report = useCallback(
+    (ok: boolean) => {
+      if (mounted.current) reportCopy(ok, { region });
+    },
+    [region],
+  );
+  const copy = useCallback(
+    async (text: string) => {
+      const ok = await copyToClipboard(text).catch(() => false);
+      report(ok);
+      return ok;
+    },
+    [report],
+  );
+  return { region, report, copy };
+}

package/src/feedback/index.ts

@@ -13,6 +13,7 @@ export { NotifyHost, NotifyRegion, type NotifyHostProps } from "./NotifyHost";
 export { ConfirmDialog, type ConfirmDialogProps } from "./ConfirmDialog";
 export {
   dismissFeedback,
+  dismissFeedbackByRegion,
   dismissFeedbackBySurface,
   getFeedback,
   pushFeedback,

package/src/feedback/notify.spec.ts

@@ -2,7 +2,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { getToasts, resetToasts, TOAST_ACTION_MIN_MS } from "../Toast/store";
 import { notify } from "./notify";
 import { routeNotify, type NotifyEvent } from "./route";
-import { getFeedback, resetFeedback } from "./store";
+import { dismissFeedbackByRegion, getFeedback, resetFeedback } from "./store";
 
 afterEach(() => {
   resetToasts();
@@ -103,6 +103,20 @@ describe("routeNotify (DG-FB-01 routing table)", () => {
 });
 
 describe("notify() delivery", () => {
+  it("targets and clears one inline region without disturbing another", () => {
+    const route = notify({
+      severity: "error",
+      scope: "field",
+      region: "first",
+      body: "First failed",
+    });
+    notify({ severity: "error", scope: "field", region: "second", body: "Second failed" });
+    expect(route.region).toBe("first");
+    expect(getFeedback().map((entry) => entry.region)).toEqual(["first", "second"]);
+    dismissFeedbackByRegion("first");
+    expect(getFeedback().map((entry) => entry.region)).toEqual(["second"]);
+  });
+
   it("success path shows a one-liner toast", () => {
     const route = notify({
       severity: "success",