@tensor_1/react 2.24.0 → 2.26.0

package/README.md

@@ -92,7 +92,9 @@ Markdown cannot represent everything a user can type. When the editor re-seriali
 - Reference definitions (`[id]: url`) are kept. If their surrounding block is deleted, they move to the end.
 
 Editor props: `features` (`full` / `comment` / `template`), `headingLevels` (limits the toolbar and input rules;
-existing headings at other levels keep their level), `onUploadImage` (enables the image button and image paste/drop),
+existing headings at other levels keep their level), `onUploadImage` (enables the image button and image paste/drop in
+every preset), `imagesUnavailableReason` (status-line text when an image is pasted or dropped while images are off;
+default label `imagesUnsupported`, "Images can't be added here."; a paste that also carries text stays a text paste),
 `isSafeUrl`, `resolveImageSrc` (its return value is used verbatim), `onSubmitShortcut` (Ctrl/Cmd+Enter), `emoji`,
 `emojiImageBaseUrl`, `maxLength` (counter; over the limit sets `aria-invalid`), `placeholder`, `disabled`, `readOnly`,
 `labels` (every string, placeholders `{count}` `{max}`), `emojiPickerLabels`, `emojiLocale`, `id`, `name` (adds a
@@ -226,3 +228,32 @@ Radial mode still shortens long labels to fit its ring, but every node carries i
 ```
 
 Ships **ESM + CJS + types**, with per-file `"use client"` so it's safe under React Server Components. Part of the **[UIx v2 styleguide](https://github.com/COx-ORG-H/UIx)**.
+
+### Drawer closes on a backdrop click
+
+`Drawer` closes on a click on the dimmed backdrop, as well as on Escape and its close button, and calls the same
+`onClose` (TENSOR HAR-547). `Peek` already did; both now share one handler. On a drawer that holds unsaved form input,
+pass `dismissOnBackdrop={false}` so a stray click can't discard it; Escape and the close button still close. On a
+phone the panel stops 2em + 6px short of the left edge (the browser's modal-dialog `max-width`), and a tap on that
+strip closes it too.
+
+```tsx
+<Drawer open={open} onClose={close} title="Edit user" dismissOnBackdrop={!dirty}>…</Drawer>
+```
+
+### InfoTip and `help` slots
+
+A small ? next to a title or label opens a plain-text explanation. Use it for what a page, section or field *means*. Keep instructions the user needs while typing ("8+ characters", "ISO date") visible in `hint`.
+
+```tsx
+<PageHeader title={t('incidents')} help={t('incidents.help')} helpLabel={t('aboutIncidents')} />
+<Card title="Open work" titleAs="h2" help={help.openWork}>…</Card>
+<SectionHead title="Latest news" help={help.news} />
+<Field label="Impact" required help={help.impact}><Input /></Field>
+<InfoTip content={text} label="About: Impact" />
+```
+
+- **`help?: string | null`** on `PageHeader`, `Card`, `SectionHead` and `Field`. Empty, whitespace-only or `null` renders nothing, so pass the resolved string without a guard. Blank lines become paragraphs. The text is always plain, never HTML.
+- **`helpLabel`** is the ? button's accessible name. It defaults to `"About: <title>"` (English), so pass a translated one.
+- **Placement:** the ? is a fixed 9 px glyph, superscript at the top right of the title or label, whatever the text size. It sits beside the heading or `<label>`, never inside it, so the heading's name stays the title and clicking a field label still focuses the input.
+- **Behaviour:** hover opens it after about 300 ms, keyboard focus opens it at once, and a click or tap keeps it open. Esc closes it and keeps focus on the ?, and a press outside also closes it. The panel is the button's `aria-describedby`, so screen readers announce it on focus. It uses `popover="manual"`, so it never closes another open popover.

package/dist/components/Card.d.ts

@@ -6,11 +6,18 @@ interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     /** Element for the title — pick a real heading to slot the card into the page outline (UIX-A11Y-4). Default `div` keeps legacy rendering. */
     titleAs?: 'h2' | 'h3' | 'h4' | 'div';
     subtitle?: ReactNode;
+    /**
+     * Plain-text help behind a ? button after the title. Blank lines separate paragraphs;
+     * empty, whitespace-only or `null` renders no button.
+     */
+    help?: string | null;
+    /** Accessible name of the ? button. Default `"About: <title>"` when title is text; pass a localised one. */
+    helpLabel?: string;
     headerAction?: ReactNode;
     footer?: ReactNode;
     children?: ReactNode;
 }
-declare function Card({ title, titleAs: TitleTag, subtitle, headerAction, footer, children, className, ...props }: CardProps): react.JSX.Element;
+declare function Card({ title, titleAs: TitleTag, subtitle, help, helpLabel, headerAction, footer, children, className, ...props }: CardProps): react.JSX.Element;
 interface CardLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'title'> {
     title?: ReactNode;
     subtitle?: ReactNode;

package/dist/components/Card.js

@@ -1,11 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
-function Card({ title, titleAs: TitleTag = "div", subtitle, headerAction, footer, children, className, ...props }) {
+import { InfoTip } from "./InfoTip.js";
+import { hasHelp, helpLabelFor } from "../info-tip-model.js";
+function Card({ title, titleAs: TitleTag = "div", subtitle, help, helpLabel, headerAction, footer, children, className, ...props }) {
   const hasHeader = title != null || subtitle != null || headerAction != null;
+  const heading = title ? /* @__PURE__ */ jsx(TitleTag, { className: "uix-card__title", children: title }) : null;
   return /* @__PURE__ */ jsxs("div", { className: cx("uix-card", className), ...props, children: [
     hasHeader && /* @__PURE__ */ jsxs("div", { className: "uix-card__header", children: [
       /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-        title && /* @__PURE__ */ jsx(TitleTag, { className: "uix-card__title", children: title }),
+        heading && hasHelp(help) ? /* @__PURE__ */ jsxs("div", { className: "uix-card__title-row", children: [
+          heading,
+          /* @__PURE__ */ jsx(InfoTip, { content: help, label: helpLabel ?? helpLabelFor(title) })
+        ] }) : heading,
         subtitle && /* @__PURE__ */ jsx("div", { className: "uix-card__subtitle", children: subtitle })
       ] }),
       headerAction

package/dist/components/Drawer.d.ts

@@ -6,10 +6,16 @@ interface DrawerProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
     closeLabel?: string;
     open: boolean;
     onClose?: () => void;
+    /**
+     * A click on the dimmed backdrop calls `onClose`, like Escape and the close button
+     * (TENSOR HAR-547). Pass `false` on a drawer that holds unsaved form input, so a stray click
+     * can't discard it; Escape and the close button still close. Default `true`.
+     */
+    dismissOnBackdrop?: boolean;
     title?: ReactNode;
     children?: ReactNode;
     footer?: ReactNode;
 }
-declare function Drawer({ open, onClose, title, children, footer, closeLabel, className, ...rest }: DrawerProps): react.JSX.Element;
+declare function Drawer({ open, onClose, dismissOnBackdrop, title, children, footer, closeLabel, className, onClick, ...rest }: DrawerProps): react.JSX.Element;
 
 export { Drawer, type DrawerProps };

package/dist/components/Drawer.js

@@ -3,11 +3,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { cx } from "../cx.js";
 import { useDialog } from "../hooks/useDialog.js";
+import { backdropDismiss } from "../hooks/backdropDismiss.js";
 const CloseIcon = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) });
-function Drawer({ open, onClose, title, children, footer, closeLabel = "Close drawer", className, ...rest }) {
+function Drawer({ open, onClose, dismissOnBackdrop = true, title, children, footer, closeLabel = "Close drawer", className, onClick, ...rest }) {
   const ref = useDialog(open, onClose);
   const titleId = useId();
-  return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-drawer", className), "aria-labelledby": title ? titleId : void 0, ...rest, children: [
+  return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-drawer", className), "aria-labelledby": title ? titleId : void 0, ...rest, onClick: backdropDismiss(onClose, onClick, dismissOnBackdrop), children: [
     (title != null || onClose) && /* @__PURE__ */ jsxs("div", { className: "uix-drawer__header", children: [
       title && /* @__PURE__ */ jsx("h2", { id: titleId, style: { fontWeight: 600, fontSize: "var(--uix-text-h3)", fontFamily: "inherit", letterSpacing: "inherit", lineHeight: "inherit" }, children: title }),
       onClose && /* @__PURE__ */ jsx(

package/dist/components/EditorialHome.d.ts

@@ -25,11 +25,18 @@ interface SectionHeadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>
     title: ReactNode;
     /** id for the `<h2>`, for `aria-labelledby` wiring on the enclosing section. */
     titleId?: string;
+    /**
+     * Plain-text help behind a ? button after the title. Blank lines separate paragraphs;
+     * empty, whitespace-only or `null` renders no button.
+     */
+    help?: string | null;
+    /** Accessible name of the ? button. Default `"About: <title>"` when title is text; pass a localised one. */
+    helpLabel?: string;
     /** Right-aligned slot — a `.uix-section-link` anchor, a button, a pill. */
     action?: ReactNode;
 }
-/** Section head — title row with an optional trailing action (`.uix-section-head`). */
-declare function SectionHead({ title, titleId, action, className, ...props }: SectionHeadProps): react.JSX.Element;
+/** Section head — title row (+ optional `help` ?) with an optional trailing action (`.uix-section-head`). */
+declare function SectionHead({ title, titleId, help, helpLabel, action, className, ...props }: SectionHeadProps): react.JSX.Element;
 interface NoticeQueueProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     /** Leading icon slot. */
     icon?: ReactNode;

package/dist/components/EditorialHome.js

@@ -1,5 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
+import { InfoTip } from "./InfoTip.js";
+import { hasHelp, helpLabelFor } from "../info-tip-model.js";
 function PageIntro({
   kicker,
   title,
@@ -26,9 +28,13 @@ function PageIntro({
     children
   ] });
 }
-function SectionHead({ title, titleId, action, className, ...props }) {
+function SectionHead({ title, titleId, help, helpLabel, action, className, ...props }) {
+  const heading = /* @__PURE__ */ jsx("h2", { className: "uix-section-title", id: titleId, children: title });
   return /* @__PURE__ */ jsxs("div", { className: cx("uix-section-head", className), ...props, children: [
-    /* @__PURE__ */ jsx("h2", { className: "uix-section-title", id: titleId, children: title }),
+    hasHelp(help) ? /* @__PURE__ */ jsxs("div", { className: "uix-section-head__title-row", children: [
+      heading,
+      /* @__PURE__ */ jsx(InfoTip, { content: help, label: helpLabel ?? helpLabelFor(title) })
+    ] }) : heading,
     action
   ] });
 }

package/dist/components/Field.d.ts

@@ -7,10 +7,18 @@ interface FieldProps {
     error?: string;
     success?: string;
     required?: boolean;
+    /**
+     * Plain-text help behind a ? button after the label (before the required marker). Blank
+     * lines separate paragraphs; empty, whitespace-only or `null` renders no button. Needs `label`.
+     * Keep format or validation instructions in `hint`, where they stay visible.
+     */
+    help?: string | null;
+    /** Accessible name of the ? button. Default `"About: <label>"`; pass a localised one. */
+    helpLabel?: string;
     children: ReactNode;
     className?: string;
     htmlFor?: string;
 }
-declare function Field({ label, hint, error, success, required, children, className, htmlFor }: FieldProps): react.JSX.Element;
+declare function Field({ label, hint, error, success, required, help, helpLabel, children, className, htmlFor }: FieldProps): react.JSX.Element;
 
 export { Field, type FieldProps };

package/dist/components/Field.js

@@ -1,7 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cloneElement, isValidElement, useId } from "react";
 import { cx } from "../cx.js";
-function Field({ label, hint, error, success, required, children, className, htmlFor }) {
+import { InfoTip } from "./InfoTip.js";
+import { hasHelp, helpLabelFor } from "../info-tip-model.js";
+function Field({ label, hint, error, success, required, help, helpLabel, children, className, htmlFor }) {
   const uid = useId();
   const msgId = `${uid}-msg`;
   const describedBy = error || success || hint ? msgId : void 0;
@@ -13,7 +15,11 @@ function Field({ label, hint, error, success, required, children, className, htm
     "aria-required": children.props["aria-required"] ?? (required || void 0)
   }) : children;
   return /* @__PURE__ */ jsxs("div", { className: cx("uix-field", className), children: [
-    label && /* @__PURE__ */ jsx("label", { className: "uix-field__label", htmlFor: htmlFor ?? controlId, "data-required": required || void 0, children: label }),
+    label && hasHelp(help) ? /* @__PURE__ */ jsxs("div", { className: "uix-field__label-row", children: [
+      /* @__PURE__ */ jsx("label", { className: "uix-field__label", htmlFor: htmlFor ?? controlId, children: label }),
+      /* @__PURE__ */ jsx(InfoTip, { content: help, label: helpLabel ?? helpLabelFor(label) }),
+      required && /* @__PURE__ */ jsx("span", { className: "uix-field__required", "aria-hidden": "true", children: "*" })
+    ] }) : label && /* @__PURE__ */ jsx("label", { className: "uix-field__label", htmlFor: htmlFor ?? controlId, "data-required": required || void 0, children: label }),
     control,
     /* @__PURE__ */ jsx("div", { className: "uix-field__msg", id: msgId, children: error ? /* @__PURE__ */ jsx("span", { className: "uix-field__error", role: "alert", children: error }) : success ? /* @__PURE__ */ jsx("span", { className: "uix-field__success", role: "status", children: success }) : hint ? /* @__PURE__ */ jsx("span", { className: "uix-field__hint", children: hint }) : null })
   ] });

package/dist/components/InfoTip.d.ts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+import { Placement } from '../overlay-position.js';
+
+interface InfoTipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content' | 'children'> {
+    /**
+     * Help text, rendered as plain text (never HTML). A blank line starts a new paragraph.
+     * Empty or whitespace-only text renders nothing, so a missing help string needs no guard.
+     */
+    content: string;
+    /** Accessible name of the ? button, e.g. "About: Incidents". The consumer localises it. */
+    label: string;
+    /** Preferred panel placement. Default `'bottom-start'`. */
+    placement?: Placement;
+}
+/**
+ * A small ? that explains a page, section or field. It is a fixed 9 px glyph, superscript at
+ * the top right of the text it follows (25 px hit area). The panel opens on hover (after a short delay), on
+ * keyboard focus, and on click or tap; a click keeps it open until a second click, Esc or a
+ * click outside. Esc returns focus to the button. The panel is plain text in
+ * the top layer (kit `Popover`, `popover="manual"`, so opening it never closes another popover)
+ * and is the button's `aria-describedby`, so the text is announced on focus.
+ *
+ * Do not put it inside a `<label>`, a heading or a link: `Field`, `PageHeader`, `Card` and
+ * `SectionHead` place it beside those through their `help` prop.
+ */
+declare function InfoTip({ content, ...props }: InfoTipProps): react.JSX.Element | null;
+
+export { InfoTip, type InfoTipProps };

package/dist/components/InfoTip.js

@@ -0,0 +1,185 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { helpParagraphs } from "../info-tip-model.js";
+import { Popover } from "./Popover.js";
+const OPEN_DELAY = 300;
+const CLOSE_DELAY = 100;
+const QuestionMark = () => /* @__PURE__ */ jsx("svg", { viewBox: "262 -840 436 760", fill: "currentColor", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M424-320q0-81 14.5-116.5T500-514q41-36 62.5-62.5T584-637q0-41-27.5-68T480-732q-51 0-77.5 31T365-638l-103-44q21-64 77-111t141-47q105 0 161.5 58.5T698-641q0 50-21.5 85.5T609-475q-49 47-59.5 71.5T539-320H424Zm56 240q-33 0-56.5-23.5T400-160q0-33 23.5-56.5T480-240q33 0 56.5 23.5T560-160q0 33-23.5 56.5T480-80Z" }) });
+const isShown = (el) => {
+  try {
+    return !!el?.matches(":popover-open");
+  } catch {
+    return false;
+  }
+};
+function InfoTip({ content, ...props }) {
+  const paragraphs = helpParagraphs(content);
+  if (!paragraphs.length) return null;
+  return /* @__PURE__ */ jsx(InfoTipControl, { paragraphs, ...props });
+}
+function InfoTipControl({
+  paragraphs,
+  label,
+  placement = "bottom-start",
+  className,
+  ...props
+}) {
+  const wrapRef = useRef(null);
+  const buttonRef = useRef(null);
+  const timer = useRef(null);
+  const openRef = useRef(false);
+  const pinned = useRef(false);
+  const pressing = useRef(false);
+  const refocusing = useRef(false);
+  const [open, setOpen] = useState(false);
+  const panelId = `${useId()}-panel`;
+  const panel = () => document.getElementById(panelId);
+  const clearTimer = () => {
+    if (timer.current != null) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+  };
+  const show = () => {
+    clearTimer();
+    const p = panel();
+    if (p && !isShown(p)) {
+      try {
+        p.showPopover();
+      } catch {
+      }
+    }
+    openRef.current = true;
+    setOpen(true);
+  };
+  const hide = () => {
+    clearTimer();
+    pinned.current = false;
+    const p = panel();
+    if (p && isShown(p)) {
+      try {
+        p.hidePopover();
+      } catch {
+      }
+    }
+    openRef.current = false;
+    setOpen(false);
+  };
+  const later = (fn, ms) => {
+    clearTimer();
+    timer.current = window.setTimeout(fn, ms);
+  };
+  const pointerEnter = () => {
+    if (openRef.current) clearTimer();
+    else later(show, OPEN_DELAY);
+  };
+  const pointerLeave = () => {
+    if (!openRef.current) {
+      clearTimer();
+      return;
+    }
+    if (pinned.current || document.activeElement === buttonRef.current) return;
+    later(hide, CLOSE_DELAY);
+  };
+  const escape = () => {
+    const active = document.activeElement;
+    const focusInside = !active || active === document.body || !!wrapRef.current?.contains(active);
+    hide();
+    if (focusInside && active !== buttonRef.current) {
+      refocusing.current = true;
+      buttonRef.current?.focus();
+      refocusing.current = false;
+    }
+  };
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") escape();
+    };
+    const onPointer = (e) => {
+      if (!wrapRef.current?.contains(e.target)) hide();
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onPointer, true);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onPointer, true);
+    };
+  }, [open]);
+  useEffect(() => () => {
+    clearTimer();
+    const p = panel();
+    if (p && isShown(p)) {
+      try {
+        p.hidePopover();
+      } catch {
+      }
+    }
+  }, []);
+  return /* @__PURE__ */ jsxs("span", { ref: wrapRef, className: cx("uix-info-tip", className), "data-open": open || void 0, ...props, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: buttonRef,
+        type: "button",
+        className: "uix-info-tip__button",
+        "aria-label": label,
+        "aria-describedby": panelId,
+        onPointerEnter: pointerEnter,
+        onPointerLeave: pointerLeave,
+        onPointerDown: () => {
+          pressing.current = true;
+        },
+        onFocus: () => {
+          if (!refocusing.current) show();
+        },
+        onBlur: (e) => {
+          const next = e.relatedTarget;
+          if (!pinned.current || next && !wrapRef.current?.contains(next)) hide();
+        },
+        onClick: () => {
+          const viaPointer = pressing.current;
+          pressing.current = false;
+          if (openRef.current && (pinned.current || !viaPointer)) hide();
+          else {
+            show();
+            pinned.current = true;
+          }
+        },
+        onKeyDown: (e) => {
+          pressing.current = false;
+          if (e.key === "Escape" && openRef.current) {
+            e.preventDefault();
+            e.stopPropagation();
+            hide();
+          }
+        },
+        children: /* @__PURE__ */ jsx(QuestionMark, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        id: panelId,
+        role: "tooltip",
+        popover: "manual",
+        anchor: buttonRef,
+        placement,
+        className: "uix-info-tip__panel",
+        onPointerEnter: () => {
+          if (openRef.current) clearTimer();
+        },
+        onPointerLeave: pointerLeave,
+        onPointerDown: () => {
+          pinned.current = true;
+        },
+        children: paragraphs.map((text, i) => /* @__PURE__ */ jsx("p", { children: text }, i))
+      }
+    )
+  ] });
+}
+export {
+  InfoTip
+};

package/dist/components/PageHeader.d.ts

@@ -8,13 +8,20 @@ interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     as?: 'h1' | 'h2';
     /** Supporting copy under the title. */
     subtitle?: ReactNode;
+    /**
+     * Plain-text help behind a ? button right after the title. Blank lines separate paragraphs;
+     * empty, whitespace-only or `null` renders no button.
+     */
+    help?: string | null;
+    /** Accessible name of the ? button. Default `"About: <title>"` when title is text; pass a localised one. */
+    helpLabel?: string;
     /** Right-aligned action area (buttons, menus). */
     actions?: ReactNode;
 }
 /**
- * Page header — eyebrow / title / subtitle + actions row, over `.uix-page-header`.
+ * Page header — eyebrow / title (+ optional `help` ?) / subtitle + actions row, over `.uix-page-header`.
  * The hairline + breathing room below come from the component CSS.
  */
-declare function PageHeader({ eyebrow, title, subtitle, actions, as: TitleTag, className, ...props }: PageHeaderProps): react.JSX.Element;
+declare function PageHeader({ eyebrow, title, subtitle, help, helpLabel, actions, as: TitleTag, className, ...props }: PageHeaderProps): react.JSX.Element;
 
 export { PageHeader, type PageHeaderProps };

package/dist/components/PageHeader.js

@@ -1,10 +1,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
-function PageHeader({ eyebrow, title, subtitle, actions, as: TitleTag = "h1", className, ...props }) {
+import { InfoTip } from "./InfoTip.js";
+import { hasHelp, helpLabelFor } from "../info-tip-model.js";
+function PageHeader({ eyebrow, title, subtitle, help, helpLabel, actions, as: TitleTag = "h1", className, ...props }) {
+  const heading = /* @__PURE__ */ jsx(TitleTag, { className: "uix-page-header__title", children: title });
   return /* @__PURE__ */ jsxs("header", { className: cx("uix-page-header", className), ...props, children: [
     /* @__PURE__ */ jsxs("div", { className: "uix-page-header__titles", children: [
       eyebrow != null && /* @__PURE__ */ jsx("div", { className: "uix-page-header__eyebrow", children: eyebrow }),
-      /* @__PURE__ */ jsx(TitleTag, { className: "uix-page-header__title", children: title }),
+      hasHelp(help) ? /* @__PURE__ */ jsxs("div", { className: "uix-page-header__title-row", children: [
+        heading,
+        /* @__PURE__ */ jsx(InfoTip, { content: help, label: helpLabel ?? helpLabelFor(title) })
+      ] }) : heading,
       subtitle != null && /* @__PURE__ */ jsx("p", { className: "uix-page-header__subtitle", children: subtitle })
     ] }),
     actions != null && /* @__PURE__ */ jsx("div", { className: "uix-page-header__actions", children: actions })

package/dist/components/Peek.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { cx } from "../cx.js";
 import { useDialog } from "../hooks/useDialog.js";
+import { backdropDismiss } from "../hooks/backdropDismiss.js";
 const CloseIcon = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) });
 const ChevronUp = () => /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 8l4-4 4 4" }) });
 const ChevronDown = () => /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 4l4 4 4-4" }) });
@@ -10,15 +11,7 @@ function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hi
   const ref = useDialog(open, onClose);
   const hasNav = onNavPrev != null || onNavNext != null;
   const titleId = useId();
-  const onBackdropClick = (e) => {
-    onClick?.(e);
-    if (!onClose || e.target !== e.currentTarget) return;
-    const r = e.currentTarget.getBoundingClientRect();
-    if (r.width === 0) return;
-    const outside = e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom;
-    if (outside) onClose();
-  };
-  return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-peek", className), "aria-labelledby": title ? titleId : void 0, ...rest, onClick: onBackdropClick, children: [
+  return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-peek", className), "aria-labelledby": title ? titleId : void 0, ...rest, onClick: backdropDismiss(onClose, onClick), children: [
     /* @__PURE__ */ jsxs("div", { className: "uix-peek__header", children: [
       hasNav && /* @__PURE__ */ jsxs("div", { className: "uix-peek__nav", children: [
         /* @__PURE__ */ jsx("button", { className: "uix-peek__navbtn", onClick: () => onNavPrev?.(), "aria-disabled": onNavPrev ? void 0 : true, "aria-label": previousLabel, children: /* @__PURE__ */ jsx(ChevronUp, {}) }),

package/dist/components/RichTextEditor.d.ts

@@ -39,6 +39,8 @@ interface RichTextLabels {
     image: string;
     imageUploading: string;
     imageFailed: string;
+    /** Shown when an image is pasted or dropped where images are off (default for `imagesUnavailableReason`). */
+    imagesUnsupported: string;
     emoji: string;
     /** Accessible name of the `:shortcode` suggestion list. */
     emojiSuggestions: string;
@@ -65,11 +67,17 @@ interface RichTextEditorProps {
     features?: RichTextFeatures;
     /** Heading levels the toolbar and input rules offer. Default `[1, 2, 3]`. */
     headingLevels?: ReadonlyArray<RichTextHeadingLevel>;
-    /** Enables the image button (preset `full`), and image paste/drop. */
+    /** Enables image paste/drop and the toolbar image button, in every preset. */
     onUploadImage?: (file: File) => Promise<{
         src: string;
         alt: string;
     }>;
+    /**
+     * Shown in the status line when an image is pasted or dropped while images are off (no
+     * `onUploadImage`), e.g. "Attach files to the incident instead.". Nothing is inserted.
+     * Default: the `imagesUnsupported` label.
+     */
+    imagesUnavailableReason?: string;
     /** Link policy. Default: http(s), mailto and same-app paths. */
     isSafeUrl?: (url: string) => boolean;
     /** Image policy: the URL to display, or `null` to show the image as a link chip. */

package/dist/components/RichTextEditor.js

@@ -59,6 +59,7 @@ const DEFAULT_RICH_TEXT_LABELS = {
   image: "Image",
   imageUploading: "Uploading image\u2026",
   imageFailed: "The image could not be added.",
+  imagesUnsupported: "Images can't be added here.",
   emoji: "Emoji",
   emojiSuggestions: "Emoji suggestions",
   undo: "Undo",
@@ -70,8 +71,9 @@ const DEFAULT_RICH_TEXT_LABELS = {
 const COMMON = ["bold", "italic", "strike", "code", "bulletList", "orderedList", "taskList", "blockquote", "codeBlock", "link", "emoji", "history", "source"];
 const PRESETS = {
   full: /* @__PURE__ */ new Set([...COMMON, "heading", "horizontalRule", "table", "image"]),
-  comment: new Set(COMMON),
-  template: /* @__PURE__ */ new Set([...COMMON, "heading", "horizontalRule", "table"])
+  // Images in every preset once the consumer supplies onUploadImage (TENSOR HAR-749).
+  comment: /* @__PURE__ */ new Set([...COMMON, "image"]),
+  template: /* @__PURE__ */ new Set([...COMMON, "heading", "horizontalRule", "table", "image"])
 };
 const emojiSuggestionKey = new PluginKey("uixEmojiSuggestion");
 const SHORTCODE_RE = /:([a-zA-Z0-9_+-]+):$/;
@@ -187,7 +189,8 @@ function RichTextEditor(props) {
     minRows,
     className,
     onBlur,
-    emojiImageBaseUrl
+    emojiImageBaseUrl,
+    imagesUnavailableReason
   } = props;
   const emojiBase = useMemo(() => normalizeEmojiImageBaseUrl(emojiImageBaseUrl), [emojiImageBaseUrl]);
   const renderEmoji = useEmojiRenderer(emojiImageBaseUrl);
@@ -199,7 +202,7 @@ function RichTextEditor(props) {
   const linkPopoverId = `${uid}-link`;
   const controls = PRESETS[features];
   const has = (control) => controls.has(control) && (control !== "emoji" || emoji) && (control !== "image" || !!onUploadImage);
-  const latest = useRef({ onChange, onSubmitShortcut, onBlur, isSafeUrl, resolveImageSrc, onUploadImage, placeholder, imagesOn: false });
+  const latest = useRef({ onChange, onSubmitShortcut, onBlur, isSafeUrl, resolveImageSrc, onUploadImage, placeholder, imagesOn: false, imagesOffText: "" });
   latest.current = {
     onChange,
     onSubmitShortcut,
@@ -208,7 +211,8 @@ function RichTextEditor(props) {
     resolveImageSrc,
     onUploadImage,
     placeholder,
-    imagesOn: controls.has("image") && !!onUploadImage
+    imagesOn: controls.has("image") && !!onUploadImage,
+    imagesOffText: imagesUnavailableReason?.trim() || labels.imagesUnsupported
   };
   const lastValue = useRef(value);
   const origin = useRef(null);
@@ -431,22 +435,31 @@ function RichTextEditor(props) {
     shouldRerenderOnTransaction: false,
     editable: !disabled && !readOnly,
     editorProps: {
+      // An image file pasted or dropped where images are off used to vanish silently; now the
+      // status line says so (TENSOR HAR-749). A paste that also carries text is a text paste:
+      // Excel, Word and Docs add a PNG rendering of the copied cells or text, which must not
+      // replace (or block) the text itself.
       handlePaste: (_view, event) => {
-        const files = Array.from(event.clipboardData?.files ?? []).filter((f) => f.type.startsWith("image/"));
-        if (!files.length || !latest.current.imagesOn || !editorRef.current) return false;
-        files.forEach((file) => void uploadImage(editorRef.current, file));
+        const data = event.clipboardData;
+        const files = Array.from(data?.files ?? []).filter((f) => f.type.startsWith("image/"));
+        if (!files.length || !editorRef.current || data?.getData("text/plain").trim()) return false;
+        event.preventDefault();
+        if (!latest.current.imagesOn) setStatus({ kind: "notice", text: latest.current.imagesOffText });
+        else files.forEach((file) => void uploadImage(editorRef.current, file));
         return true;
       },
       handleDrop: (_view, event) => {
         const files = Array.from(event.dataTransfer?.files ?? []).filter((f) => f.type.startsWith("image/"));
-        if (!files.length || !latest.current.imagesOn || !editorRef.current) return false;
+        if (!files.length || !editorRef.current) return false;
         event.preventDefault();
-        files.forEach((file) => void uploadImage(editorRef.current, file));
+        if (!latest.current.imagesOn) setStatus({ kind: "notice", text: latest.current.imagesOffText });
+        else files.forEach((file) => void uploadImage(editorRef.current, file));
         return true;
       }
     },
     onCreate: ({ editor: ed }) => load(ed, lastValue.current),
     onUpdate: ({ editor: ed }) => {
+      setStatus((s) => s?.kind === "notice" ? null : s);
       if (!origin.current) return;
       emit(writeMarkdown(ed.getJSON(), origin.current, managerOf(ed)));
     },