gloomberb 0.13.2 → 0.14.0

package/src/components/ui/status.tsx

@@ -1,33 +1,41 @@
 import type { ReactNode } from "react";
-import { Box, Text } from "../../ui";
-import { colors } from "../../theme/colors";
 import { t, tf } from "../../i18n";
+import { useThemeColors } from "../../theme/theme-context";
+import { Box, Text } from "../../ui";
+import { Spinner } from "./loading";
 
 export interface EmptyStateProps {
   title: string;
   message?: string;
   hint?: string;
+  actions?: ReactNode;
+  status?: "empty" | "error";
 }
 
-export function EmptyState({ title, message, hint }: EmptyStateProps) {
-  // A fixed one-cell height clipped long text at the pane edge with no marker,
-  // so provider messages lost their tail. These rows own the pane body, so let
-  // them wrap instead.
+export function EmptyState({ title, message, hint, actions, status = "empty" }: EmptyStateProps) {
+  const colors = useThemeColors();
+  // Provider messages must wrap at narrow pane widths rather than lose their tail.
   return (
-    <Box flexDirection="column">
-      <Box>
-        <Text fg={colors.textDim}>{t(title)}</Text>
-      </Box>
-      {message && (
-        <Box>
-          <Text fg={colors.textMuted}>{t(message)}</Text>
-        </Box>
-      )}
-      {hint && (
-        <Box>
-          <Text fg={colors.textMuted}>{t(hint)}</Text>
-        </Box>
-      )}
+    <Box flexDirection="column" data-gloom-status={status} data-gloom-ui="empty-state">
+      <Box><Text fg={status === "error" ? colors.negative : colors.textDim} wrapText>{t(title)}</Text></Box>
+      {message && <Box><Text fg={colors.textMuted} wrapText>{t(message)}</Text></Box>}
+      {hint && <Box><Text fg={colors.textMuted} wrapText>{t(hint)}</Text></Box>}
+      {actions && <Box flexDirection="row" gap={1} marginTop={1}>{actions}</Box>}
+    </Box>
+  );
+}
+
+export interface NoticeProps {
+  children: ReactNode;
+  tone?: "muted" | "positive" | "warning" | "negative";
+}
+
+/** Inline feedback leaves existing content visible, including stale data after a refresh failure. */
+export function Notice({ children, tone = "warning" }: NoticeProps) {
+  const colors = useThemeColors();
+  return (
+    <Box data-gloom-status={tone === "negative" ? "error" : "notice"} data-gloom-ui="notice">
+      <Text fg={tone === "muted" ? colors.textDim : colors[tone]} wrapText>{children}</Text>
     </Box>
   );
 }
@@ -47,55 +55,56 @@ export interface PaneStatusBodyProps {
   error?: string | null;
   /** True when there is nothing to show and nothing is in flight. */
   empty?: boolean;
-  /** Names what is being loaded or what failed, e.g. "movers". */
   subject?: string;
+  loadingLabel?: string;
+  errorTitle?: string;
   emptyTitle?: string;
   emptyMessage?: string;
+  actions?: ReactNode;
+  align?: "start" | "center";
+  width?: number;
+  height?: number;
   children?: ReactNode;
 }
 
-/**
- * Standard loading/error/empty body for a pane. Returns `children` once there
- * is something to render, so a pane can wrap its content in one place instead
- * of hand-rolling three near-identical states.
- */
+/** State precedence remains explicit at the caller: pass loading/error only when replacing the body. */
 export function PaneStatusBody({
   loading = false,
   error,
   empty = false,
   subject,
+  loadingLabel,
+  errorTitle,
   emptyTitle,
   emptyMessage,
+  actions,
+  align = "start",
+  width,
+  height,
   children,
 }: PaneStatusBodyProps) {
-  if (error) {
-    return (
-      <Box paddingX={1} paddingY={1} data-gloom-status="error">
-        <EmptyState
-          title={subject ? unavailableText(subject) : error}
-          message={subject ? error : undefined}
-        />
-      </Box>
-    );
-  }
-  if (loading) {
-    // The screenshot renderer waits on this marker to know a pane is still
-    // fetching. It must be a real attribute, never a word match on body text.
-    return (
-      <Box paddingX={1} paddingY={1} data-gloom-status="loading">
-        <EmptyState title={loadingText(subject)} />
-      </Box>
-    );
-  }
-  if (empty) {
-    return (
-      <Box paddingX={1} paddingY={1} data-gloom-status="empty">
+  const status = error ? "error" : loading ? "loading" : empty ? "empty" : null;
+  if (!status) return <>{children}</>;
+  return (
+    <Box
+      width={width}
+      height={height}
+      flexGrow={align === "center" ? 1 : undefined}
+      paddingX={1}
+      paddingY={1}
+      alignItems={align === "center" ? "center" : undefined}
+      justifyContent={align === "center" ? "center" : undefined}
+      data-gloom-status={status}
+      data-gloom-ui="pane-status"
+    >
+      {status === "loading" ? <Spinner label={loadingLabel ?? loadingText(subject)} /> : (
         <EmptyState
-          title={emptyTitle ?? t("Nothing to show yet.")}
-          message={emptyMessage}
+          status={status}
+          title={status === "error" ? errorTitle ?? (subject ? unavailableText(subject) : error!) : emptyTitle ?? t("Nothing to show yet.")}
+          message={status === "error" ? (errorTitle || subject ? error! : undefined) : emptyMessage}
+          actions={actions}
         />
-      </Box>
-    );
-  }
-  return <>{children}</>;
+      )}
+    </Box>
+  );
 }

package/src/components/ui/tabs.tsx

@@ -20,6 +20,8 @@ interface TabItem {
   label: string;
   value: string;
   disabled?: boolean;
+  /** Text color while inactive; used for group markers such as a team accent. */
+  fg?: string;
   reorderable?: boolean;
   onClose?: (value: string) => void;
   onDoubleClick?: (value: string) => void;
@@ -433,7 +435,7 @@ function OpenTuiTabs({
             onDoubleClick={tab.disabled || !tab.onDoubleClick ? undefined : () => tab.onDoubleClick?.(tab.value)}
           >
             <Text
-              fg={tab.disabled ? palette.disabledFg : active && variant === "pill" ? palette.activePillFg : active ? palette.activeFg : hovered ? palette.hoverFg : palette.inactiveFg}
+              fg={tab.disabled ? palette.disabledFg : active && variant === "pill" ? palette.activePillFg : active ? palette.activeFg : hovered ? palette.hoverFg : tab.fg ?? palette.inactiveFg}
               attributes={attributes}
               onMouseDown={selectTab}
               selectable={onReorder ? false : undefined}

package/src/components/ui/toggle.tsx

@@ -1,8 +1,9 @@
 import { Box, Text, TextAttributes, useUiHost } from "../../ui";
 import { type ComponentType } from "react";
-import { colors } from "../../theme/colors";
+import { useThemeColors } from "../../theme/theme-context";
 import { useShortcut } from "../../react/input";
 import { isPlainKey } from "../../utils/keyboard";
+import { useRemoteUiNode } from "../../remote/semantic-tree";
 
 interface SegmentedControlOption {
   label: string;
@@ -15,6 +16,8 @@ export interface SegmentedControlProps {
   value: string;
   onChange?: (value: string) => void;
   focused?: boolean;
+  /** For controls whose owning dialog tracks focus independently of native text inputs. */
+  allowEditable?: boolean;
   shortcutScope?: string;
   width?: number | "100%";
   wrap?: boolean;
@@ -25,12 +28,26 @@ export function SegmentedControl({
   value,
   onChange,
   focused = false,
+  allowEditable = false,
   shortcutScope,
   width,
   wrap = false,
 }: SegmentedControlProps) {
+  const colors = useThemeColors();
   const ui = useUiHost();
   const HostSegmentedControl = ui.SegmentedControl as ComponentType<SegmentedControlProps> | undefined;
+  useRemoteUiNode({
+    role: "select",
+    label: "Segmented control",
+    actions: {
+      select: (input) => {
+        const next = typeof input === "string" ? input : (input as { value?: string } | null)?.value;
+        const option = options.find((option) => option.value === next && !option.disabled);
+        if (option && option.value !== value) onChange?.(option.value);
+      },
+    },
+    metadata: { value, options },
+  });
   useShortcut((event) => {
     const direction = isPlainKey(event, "left")
       ? -1
@@ -53,6 +70,7 @@ export function SegmentedControl({
     enabled: ui.kind !== "desktop-web" && focused && !!onChange,
     phase: "before",
     scope: shortcutScope,
+    allowEditable,
   });
 
   if (HostSegmentedControl) {
@@ -61,6 +79,9 @@ export function SegmentedControl({
         options={options}
         value={value}
         onChange={onChange}
+        focused={focused}
+        width={width}
+        wrap={wrap}
       />
     );
   }

package/src/components/ui/ui.test.tsx

@@ -1,12 +1,16 @@
+import type { BoxRenderable, ScrollBoxRenderable } from "@opentui/core";
 import { afterEach, describe, expect, test } from "bun:test";
 import { act, createRef, useEffect, useRef, useState } from "react";
-import { TestDialogProvider, testRender } from "../../renderers/opentui/test-utils";
-import type { BoxRenderable, ScrollBoxRenderable } from "@opentui/core";
+import { setLanguage } from "../../i18n";
+import { TestDialogProvider, emitKeypress as emitTuiKeypress, testRender, type TestKeyEvent } from "../../renderers/opentui/test-utils";
+import { Box } from "../../ui";
+import { AppContext, PaneInstanceProvider, createInitialState } from "../../state/app/context";
+import { createDefaultConfig } from "../../types/config";
+import { DataTableView } from "../data-table/view";
 import { ChoiceDialog } from "./choice-dialog";
 import { DataTable, type DataTableColumn, type DataTableVisibleRange } from "./data-table";
 import { TextField } from "./fields";
 import { ListView } from "./list-view";
-import { MultiSelectDialogButton, type MultiSelectDialogButtonHandle } from "./multi-select/dialog";
 import {
   getMultiSelectDisplayValues,
   moveMultiSelectDisplayValue,
@@ -15,11 +19,9 @@ import {
   toggleMultiSelectValue,
   toggleOrderedMultiSelectValue,
 } from "./multi-select";
+import { MultiSelectDialogButton, type MultiSelectDialogButtonHandle } from "./multi-select/dialog";
 import { Tabs } from "./tabs";
-import { AppContext, PaneInstanceProvider, createInitialState } from "../../state/app/context";
-import { createDefaultConfig } from "../../types/config";
-import { DataTableView } from "../data-table/view";
-import { setLanguage } from "../../i18n";
+import { SelectButton, type SelectControl } from "./select-button";
 
 let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
 let setListSelection: ((index: number) => void) | null = null;
@@ -264,25 +266,7 @@ function ChoiceDialogHarness({
   );
 }
 
-async function emitKeypress(event: { name?: string; sequence?: string; ctrl?: boolean; meta?: boolean; shift?: boolean; alt?: boolean }) {
-  await act(async () => {
-    testSetup!.renderer.keyInput.emit("keypress", {
-      ctrl: false,
-      meta: false,
-      option: false,
-      shift: false,
-      eventType: "press",
-      repeated: false,
-      preventDefault: () => {},
-      stopPropagation: () => {},
-      ...event,
-    } as any);
-    await Promise.resolve();
-    await testSetup!.renderOnce();
-    await testSetup!.renderOnce();
-  });
-  await testSetup!.renderOnce();
-}
+const emitKeypress = (event: TestKeyEvent) => emitTuiKeypress(testSetup!, event, { frames: 2, afterCommit: true });
 
 afterEach(async () => {
   if (testSetup) {
@@ -701,6 +685,31 @@ describe("shared UI kit", () => {
     expect(frame).not.toContain("Row 1");
   });
 
+  test("shortens a long list row label instead of running into its detail", async () => {
+    testSetup = await testRender(
+      <Box width={36} height={3}>
+        <ListView
+          items={[
+            { id: "long", label: "Will another result occur for the next Israeli election?", detail: "Polymarket" },
+            { id: "short", label: "AAPL · Revenue", detail: "Quarterly" },
+          ]}
+          selectedIndex={0}
+          height={2}
+          surface="plain"
+        />
+      </Box>,
+      { width: 36, height: 3 },
+    );
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+    });
+
+    const [first, second] = testSetup.captureCharFrame().split("\n");
+    expect(first).toMatch(/^\u25b8 Will .*\.\.\..* Polymarket$/);
+    expect(second).toBe("  AAPL · Revenue           Quarterly");
+  });
+
   test("masks password text fields", async () => {
     testSetup = await testRender(
       <TextField
@@ -946,3 +955,30 @@ describe("shared UI kit", () => {
     expect(scrolledFrame).toContain(`Row ${scrollTop}`);
   });
 });
+
+
+test("a select opened through its handle skips disabled options and ignores results after disabling", async () => {
+  const handle = createRef<SelectControl>();
+  const changes: string[] = [];
+  let disable: (() => void) | undefined;
+  function Harness() {
+    const [disabled, setDisabled] = useState(false);
+    disable = () => setDisabled(true);
+    return <TestDialogProvider><SelectButton
+      controlRef={handle} label="Account" value="alpha" disabled={disabled}
+      options={[{ value: "alpha", label: "Alpha" }, { value: "blocked", label: "Blocked", disabled: true }, { value: "gamma", label: "Gamma" }]}
+      onChange={(value) => changes.push(value)}
+    /></TestDialogProvider>;
+  }
+  testSetup = await testRender(<Harness />, { width: 44, height: 12 });
+  await act(async () => { await testSetup!.renderOnce(); });
+  await act(async () => { handle.current!.open(); await testSetup!.renderOnce(); });
+  await emitKeypress({ name: "down" });
+  await emitKeypress({ name: "enter", sequence: "\r" });
+  expect(changes).toEqual(["gamma"]);
+  await act(async () => { handle.current?.open(); await testSetup!.renderOnce(); });
+  await emitKeypress({ name: "down" });
+  await act(async () => { disable?.(); await testSetup!.renderOnce(); });
+  await emitKeypress({ name: "enter", sequence: "\r" });
+  expect(changes).toEqual(["gamma"]);
+});

package/src/components/use-pane-notice-footer.test.tsx

@@ -0,0 +1,116 @@
+import { afterEach, expect, test } from "bun:test";
+import { act, useState } from "react";
+import { Box } from "../ui";
+import { createTestControls, emitKeypress, testRender } from "../renderers/opentui/test-utils";
+import { PaneFooterBar, PaneFooterProvider, PaneFooterScope, usePaneFooter, type CombinedPaneFooter } from "./layout/pane/footer";
+import { usePaneNoticeFooter, type UsePaneNoticeFooterOptions } from "./use-pane-notice-footer";
+
+let setup: Awaited<ReturnType<typeof testRender>> | undefined;
+let update!: (next: Partial<Options>) => void;
+let footer: CombinedPaneFooter;
+const controls = createTestControls(() => setup!);
+type Options = UsePaneNoticeFooterOptions & { active: boolean };
+
+function Registration({ options }: { options: Options }) {
+  usePaneNoticeFooter(options);
+  usePaneFooter("existing", () => ({ hints: [{ id: "series", key: "s", label: "eries" }] }), []);
+  return null;
+}
+function Harness({ notices = ["  AMD: publication dates unavailable.  ", "AMD: publication dates unavailable.", "  "] }: { notices?: string[] }) {
+  const [options, setOptions] = useState<Options>({ registrationId: "notice-test", notices, focused: true, active: true });
+  update = (next) => setOptions((current) => ({ ...current, ...next }));
+  return <PaneFooterProvider>{(current) => {
+    footer = current;
+    return <Box width={72} height={1}>
+      <PaneFooterScope active={options.active}><Registration options={options} /></PaneFooterScope>
+      <PaneFooterBar footer={current} focused={options.focused} width={72} />
+    </Box>;
+  }}</PaneFooterProvider>;
+}
+async function change(next: Partial<Options>) {
+  await act(async () => update(next));
+  await controls.renderFrames(3);
+}
+async function key(name: string, modifiers = {}) {
+  await emitKeypress(setup!, { name, ...modifiers }, { trackPropagation: true });
+  await controls.renderFrames(3);
+}
+afterEach(async () => {
+  if (setup) await act(async () => setup!.renderer.destroy());
+  setup = undefined;
+});
+
+test("compact warnings disclose by mouse, follow the current data and vanish without disabling existing actions", async () => {
+  await act(async () => { setup = await testRender(<Harness />, { width: 80, height: 28 }); });
+  await controls.renderFrames(3);
+  expect(setup!.captureCharFrame()).toContain("⚠");
+  expect(setup!.captureCharFrame()).toContain("[s]eries");
+  expect(setup!.captureCharFrame()).not.toContain("publication");
+  const retained = footer.info[0]!.onPress!;
+  await act(async () => { await setup!.mockMouse.click(setup!.captureCharFrame().split("\n")[0]!.indexOf("⚠"), 0); });
+  await controls.waitForFrameToContain("publication dates unavailable");
+  expect(setup!.captureCharFrame().match(/publication dates unavailable/g)?.length).toBe(1);
+  const dialogLines = setup!.captureCharFrame().split("\n");
+  expect(dialogLines.findIndex((line) => line.includes("Close")) - dialogLines.findIndex((line) => line.includes("Data warnings"))).toBeLessThanOrEqual(5);
+  await change({ notices: ["MSFT: stale provider observation."] });
+  expect(setup!.captureCharFrame()).not.toContain("publication");
+  await act(async () => retained());
+  await controls.waitForFrameToContain("MSFT: stale provider observation.");
+  await controls.clickFrameText("Close");
+  await controls.renderFrames(3);
+  expect(setup!.captureCharFrame()).not.toContain("stale provider");
+  await change({ notices: [" "] });
+  await act(async () => retained());
+  await key("!");
+  expect(setup!.captureCharFrame()).not.toContain("⚠");
+  expect(setup!.captureCharFrame()).toContain("[s]eries");
+  expect(footer.info).toEqual([]);
+});
+
+test("notice shortcut respects focus, inactive scopes, enabled state and an already open dialog", async () => {
+  await act(async () => { setup = await testRender(<Harness />, { width: 80, height: 28 }); });
+  await controls.renderFrames(3);
+  for (const disabled of [{ focused: false }, { focused: true, active: false }, { active: true, enabled: false }]) {
+    await change(disabled);
+    await key("!");
+    expect(setup!.captureCharFrame()).not.toContain("publication");
+  }
+  await change({ enabled: true });
+  await key("!", { ctrl: true });
+  expect(setup!.captureCharFrame()).not.toContain("publication");
+  await key("!");
+  await controls.waitForFrameToContain("publication dates unavailable");
+  await key("!");
+  await key("escape");
+  expect(setup!.captureCharFrame()).not.toContain("publication");
+  await key("!");
+  await controls.waitForFrameToContain("publication dates unavailable");
+  await change({ active: false });
+  expect(setup!.captureCharFrame()).not.toContain("publication");
+});
+
+test("long warning details remain scrollable to their final observation", async () => {
+  const notices = Array.from({ length: 40 }, (_, index) => `Observation ${index + 1}: provider timestamp unavailable.`);
+  await act(async () => { setup = await testRender(<Harness notices={notices} />, { width: 48, height: 20 }); });
+  await controls.renderFrames(3);
+  await key("!");
+  await controls.waitForFrameToContain("Observation 1:");
+  expect(setup!.captureCharFrame()).not.toContain("Observation 40:");
+  await key("end");
+  expect(setup!.captureCharFrame()).toContain("Observation 40:");
+  await key("home");
+  expect(setup!.captureCharFrame()).toContain("Observation 1:");
+  await key("enter");
+  expect(setup!.captureCharFrame()).not.toContain("Observation 1:");
+});
+
+test("narrow panes keep warning disclosure visible beside overflowing action hints", async () => {
+  await act(async () => {
+    setup = await testRender(<PaneFooterBar focused width={18} footer={{
+      info: [{ id: "notice", icon: "warning", parts: [{ text: "⚠", tone: "warning" }], onPress: () => {} }],
+      hints: [{ id: "series", key: "s", label: "eries" }, { id: "indicators", key: "i", label: "ndicators" }, { id: "share", key: "x", label: " share" }],
+    }} />, { width: 18, height: 1 });
+  });
+  await controls.renderFrames(3);
+  expect(setup!.captureCharFrame()).toContain("⚠");
+});

package/src/components/use-pane-notice-footer.tsx

@@ -0,0 +1,128 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { t } from "../i18n";
+import { useShortcut, useViewport } from "../react/input";
+import { Box, ScrollBox, type ScrollBoxRenderable } from "../ui";
+import { useDialog, useDialogKeyboard, useDialogState, type AlertContext } from "../ui/dialog";
+import { wrapTextLines } from "../utils/text-wrap";
+import { usePaneFooter } from "./layout/pane/footer";
+import { usePaneFooterScopeActive } from "./layout/pane/footer/registration";
+import { Button } from "./ui/button";
+import { DialogFrame } from "./ui/frame";
+import { Prose } from "./ui/prose";
+
+export interface UsePaneNoticeFooterOptions {
+  registrationId: string;
+  notices: readonly string[];
+  focused: boolean;
+  title?: string;
+  enabled?: boolean;
+}
+
+function NoticeDialog({ notices, title, dismiss, dialogId }: AlertContext & {
+  notices: readonly string[];
+  title: string;
+}) {
+  const viewport = useViewport();
+  const width = Math.max(8, Math.min(74, viewport.width - 8));
+  const contentHeight = notices.reduce((total, notice) => total + wrapTextLines(notice, Math.max(8, width - 1)).length, 0)
+    + Math.max(0, notices.length - 1);
+  const height = Math.max(1, Math.min(contentHeight, 18, viewport.height - 10));
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null);
+  useDialogKeyboard((event) => {
+    if (event.ctrl || event.alt || event.meta || event.super) return;
+    const key = event.name ?? event.key;
+    if (key === "enter" || key === "return" || key === "escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      dismiss();
+      return;
+    }
+    const scroll = scrollRef.current;
+    if (!scroll) return;
+    const delta = key === "down" ? 1 : key === "up" ? -1
+      : key === "pagedown" ? height : key === "pageup" ? -height : null;
+    if (delta === null && key !== "home" && key !== "end") return;
+    event.preventDefault();
+    event.stopPropagation();
+    scroll.scrollTo(key === "home" ? 0 : key === "end" ? scroll.scrollHeight : Math.max(0, scroll.scrollTop + (delta ?? 0)));
+  }, { scope: dialogId });
+
+  return (
+    <DialogFrame title={title}>
+      <Box width={width} flexDirection="column">
+        <ScrollBox ref={scrollRef} scrollY height={height} width="100%" aria-label={title}>
+          {notices.map((notice, index) => (
+            <Box key={notice} flexDirection="column" marginBottom={index < notices.length - 1 ? 1 : 0}>
+              <Prose text={notice} width={width - 1} />
+            </Box>
+          ))}
+        </ScrollBox>
+        <Box height={1} />
+        <Button label="Close" onPress={dismiss} />
+      </Box>
+    </DialogFrame>
+  );
+}
+
+/** Active data limitations live in one footer disclosure, never a standing body banner. */
+export function usePaneNoticeFooter({
+  registrationId,
+  notices,
+  focused,
+  title: rawTitle = "Data warnings",
+  enabled = true,
+}: UsePaneNoticeFooterOptions): void {
+  const dialog = useDialog();
+  const dialogOpen = useDialogState((state) => state.isOpen);
+  const scopeActive = usePaneFooterScopeActive();
+  const title = t(rawTitle);
+  const noticeKey = JSON.stringify([...new Set(notices.map((notice) => notice.trim()).filter(Boolean))]);
+  const currentNotices = useMemo<readonly string[]>(() => JSON.parse(noticeKey), [noticeKey]);
+  const active = enabled && scopeActive && currentNotices.length > 0;
+  const openingRef = useRef(false);
+  const dismissRef = useRef<(() => void) | undefined>(undefined);
+
+  // A ticker, window or refresh may change while the disclosure is open.
+  // Close that snapshot instead of leaving obsolete warnings over the new data.
+  useEffect(() => () => {
+    dismissRef.current?.();
+    dismissRef.current = undefined;
+  }, [active, noticeKey, registrationId, title]);
+
+  const open = useCallback(() => {
+    if (!active || dialogOpen || openingRef.current) return;
+    openingRef.current = true;
+    void dialog.alert({
+      size: "large",
+      closeOnClickOutside: true,
+      content: (context: AlertContext) => {
+        dismissRef.current = context.dismiss;
+        return <NoticeDialog {...context} title={title} notices={currentNotices} />;
+      },
+    }).catch(() => {}).finally(() => {
+      openingRef.current = false;
+      dismissRef.current = undefined;
+    });
+  }, [active, currentNotices, dialog, dialogOpen, title]);
+
+  useShortcut((event) => {
+    if (event.ctrl || event.alt || event.meta || event.super) return;
+    if (event.key !== "!" && event.name !== "!" && event.sequence !== "!") return;
+    event.preventDefault();
+    event.stopPropagation();
+    open();
+  }, { enabled: active && focused && !dialogOpen, scope: registrationId });
+
+  usePaneFooter(registrationId, () => active ? {
+    order: -10,
+    info: [{
+      id: "data-warnings",
+      icon: "warning",
+      label: title,
+      title: `${title} (!)`,
+      shortcut: "!",
+      parts: [{ text: "⚠", tone: "warning" }],
+      onPress: open,
+    }],
+  } : null, [active, open, title]);
+}