react-cheminfo 0.38.0 → 0.39.0

package/src/pedagogy/ui/GlossaryText.tsx

@@ -16,8 +16,8 @@ import { HOVER_OPEN_DELAY } from './pedagogyStyle.ts';
 export interface GlossaryTextProps<TExample = GlossaryExample> {
   /**
    * Authored prose. Every `[[term]]` — or `[[term|displayed text]]` — the
-   * glossary knows becomes a hoverable chip, and `` `code` ``, `**strong**`
-   * and `*emphasis*` are drawn as such.
+   * glossary knows becomes a hoverable chip, and `` `code` ``, `{{C6H6O}}`,
+   * `**strong**` and `*emphasis*` are drawn as such.
    */
   text: string;
   /**
@@ -47,6 +47,11 @@ export interface GlossaryTextProps<TExample = GlossaryExample> {
    * @default the surrounding provider's, and otherwise a plain `<code>`
    */
   renderCode?: (code: string) => ReactNode;
+  /**
+   * Draws a `{{C6H6O}}` of the prose.
+   * @default the surrounding provider's, and otherwise the formula as typed
+   */
+  renderMf?: (mf: string) => ReactNode;
 }
 
 /**
@@ -69,6 +74,7 @@ export function GlossaryText<TExample = GlossaryExample>(
     className = 'glossary-term',
     renderExample,
     renderCode,
+    renderMf,
   } = props;
   const context = useGlossary();
   const terms: Glossary<unknown> = glossary ?? context.glossary;
@@ -78,6 +84,7 @@ export function GlossaryText<TExample = GlossaryExample>(
     <>
       {renderInlineSegments(segments, {
         code: renderCode ?? context.renderCode ?? plainCode,
+        mf: renderMf ?? context.renderMf,
         term: (term, shown) => {
           const entry = lookupGlossaryTerm(terms, term);
           if (entry === undefined) return shown;
@@ -94,6 +101,7 @@ export function GlossaryText<TExample = GlossaryExample>(
               }
               hoverOpenDelay={HOVER_OPEN_DELAY}
               placement={placement}
+              popoverClassName="help-tooltip"
             >
               <span className={className} style={TERM_STYLE}>
                 {shown}

package/src/pedagogy/ui/InlineText.tsx

@@ -2,13 +2,14 @@ import type { ReactElement, ReactNode } from 'react';
 
 import { parseInlineMarks } from '../core/inlineMarks.ts';
 
+import { useGlossary } from './glossaryContext.ts';
 import { plainCode, renderInlineSegments } from './inlineSegments.tsx';
 
 /** Props of {@link InlineText}. */
 export interface InlineTextProps {
   /**
-   * Authored prose: `` `code` ``, `**strong**` and `*emphasis*`. Anything else,
-   * `[[markers]]` included, is shown as typed.
+   * Authored prose: `` `code` ``, `{{C6H6O}}`, `**strong**` and `*emphasis*`.
+   * Anything else, `[[markers]]` included, is shown as typed.
    */
   text: string;
   /**
@@ -17,6 +18,12 @@ export interface InlineTextProps {
    * @default a plain `<code>`
    */
   renderCode?: (code: string) => ReactNode;
+  /**
+   * Draws a `{{C6H6O}}`: as a formula, with `react-mf`.
+   * @default the surrounding `GlossaryProvider`'s, and otherwise the formula
+   * as typed
+   */
+  renderMf?: (mf: string) => ReactNode;
 }
 
 /**
@@ -31,9 +38,19 @@ export interface InlineTextProps {
  * @returns The prose, with its marks drawn.
  */
 export function InlineText(props: InlineTextProps): ReactElement {
-  const { text, renderCode = plainCode } = props;
+  const context = useGlossary();
+  const {
+    text,
+    renderCode = context.renderCode ?? plainCode,
+    renderMf = context.renderMf,
+  } = props;
 
   return (
-    <>{renderInlineSegments(parseInlineMarks(text), { code: renderCode })}</>
+    <>
+      {renderInlineSegments(parseInlineMarks(text), {
+        code: renderCode,
+        mf: renderMf,
+      })}
+    </>
   );
 }

package/src/pedagogy/ui/ReferenceSectionBlock.tsx

@@ -4,6 +4,7 @@ import { ClickToCopy } from '../../clipboard/ui/ClickToCopy.tsx';
 import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 
+import { InlineText } from './InlineText.tsx';
 import type { SyntaxTooltipContent } from './SyntaxTooltip.tsx';
 import { SyntaxTooltip } from './SyntaxTooltip.tsx';
 import { MONOSPACE } from './pedagogyStyle.ts';
@@ -12,7 +13,10 @@ import { MONOSPACE } from './pedagogyStyle.ts';
 export interface ReferenceRow {
   /** The construct itself, set in monospace. */
   syntax: string;
-  /** What it does, in one line — short enough to read on paper. */
+  /**
+   * What it does, in one line — short enough to read on paper. Authored prose,
+   * so a `{{C6H6O}}` in it is drawn as a formula and a `` `code` `` as code.
+   */
   description: string;
   /**
    * The longer story, opened by hovering the row. A sparse section is meant to
@@ -118,7 +122,9 @@ function ReferenceRowLine(props: {
           {row.syntax}
         </ClickToCopy>
       </span>
-      <span style={DESCRIPTION_STYLE}>{row.description}</span>
+      <span style={DESCRIPTION_STYLE}>
+        <InlineText text={row.description} />
+      </span>
     </span>
   );
   if (row.tooltip === undefined) return line;

package/src/pedagogy/ui/SyntaxTooltip.tsx

@@ -3,6 +3,7 @@ import { Tooltip } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
 
 import { useChromeT } from '../../i18n/ui/useT.ts';
+import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import type { GlossaryExample } from '../core/glossary.ts';
 
 import { HOVER_OPEN_DELAY, MONOSPACE, PROSE_INK } from './pedagogyStyle.ts';
@@ -98,6 +99,7 @@ export function SyntaxTooltip(props: SyntaxTooltipProps): ReactElement {
       hoverOpenDelay={HOVER_OPEN_DELAY}
       placement={placement}
       isOpen={isOpen}
+      popoverClassName="help-tooltip"
     >
       {children}
     </Tooltip>
@@ -164,7 +166,6 @@ const BODY_STYLE: CSSProperties = {
   display: 'flex',
   flexDirection: 'column',
   gap: 6,
-  maxWidth: 360,
 };
 
 const HEADER_STYLE: CSSProperties = {
@@ -175,9 +176,10 @@ const HEADER_STYLE: CSSProperties = {
 };
 
 const SYNTAX_STYLE: CSSProperties = {
-  background: PROSE_INK.tooltip.rule,
+  background: TOKEN.surfaceSunken,
+  border: `1px solid ${PROSE_INK.rule}`,
   borderRadius: 3,
-  color: '#ffffff',
+  color: PROSE_INK.code,
   fontFamily: MONOSPACE,
   fontSize: 14,
   fontWeight: 600,
@@ -187,20 +189,20 @@ const SYNTAX_STYLE: CSSProperties = {
 const NAME_STYLE: CSSProperties = { fontWeight: 600, fontSize: 13 };
 
 const TAG_STYLE: CSSProperties = {
-  color: PROSE_INK.tooltip.muted,
+  color: PROSE_INK.muted,
   fontSize: 11,
 };
 
 const SUMMARY_STYLE: CSSProperties = { fontSize: 12, lineHeight: 1.4 };
 
 const DETAIL_STYLE: CSSProperties = {
-  color: PROSE_INK.tooltip.text,
+  color: PROSE_INK.text,
   fontSize: 12,
   lineHeight: 1.45,
 };
 
 const EXAMPLE_STYLE: CSSProperties = {
-  borderTop: `1px solid ${PROSE_INK.tooltip.rule}`,
+  borderTop: `1px solid ${PROSE_INK.rule}`,
   display: 'flex',
   flexDirection: 'column',
   gap: 2,
@@ -210,18 +212,18 @@ const EXAMPLE_STYLE: CSSProperties = {
 const ROW_STYLE: CSSProperties = { display: 'flex', gap: 6, fontSize: 12 };
 
 const LABEL_STYLE: CSSProperties = {
-  color: PROSE_INK.tooltip.muted,
+  color: PROSE_INK.muted,
   flex: '0 0 68px',
 };
 
 const VALUE_STYLE: CSSProperties = {
-  color: PROSE_INK.tooltip.text,
+  color: PROSE_INK.text,
   fontFamily: MONOSPACE,
   overflowWrap: 'anywhere',
 };
 
 const NOTE_STYLE: CSSProperties = {
-  color: PROSE_INK.tooltip.muted,
+  color: PROSE_INK.muted,
   fontSize: 12,
   fontStyle: 'italic',
   marginTop: 2,

package/src/pedagogy/ui/TutorialStepStrip.tsx

@@ -1,8 +1,9 @@
-import { Button, Tag, Tooltip } from '@blueprintjs/core';
+import { Button, Tag } from '@blueprintjs/core';
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
 
 import { clamp } from '../../format/core/clamp.ts';
 import { useChromeT } from '../../i18n/ui/useT.ts';
+import { ActionTooltip } from '../../shared/ui/ActionTooltip.tsx';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import type { ExerciseLevel } from '../core/types.ts';
 
@@ -150,24 +151,14 @@ function LevelStrip(props: LevelStripProps): ReactElement {
     const step = steps[position] as TutorialStripStep;
     const active = position === activeIndex;
     buttons.push(
-      <Tooltip
+      <StepButton
         key={step.id ?? position}
-        content={step.title}
-        hoverOpenDelay={HOVER_OPEN_DELAY}
-        placement="bottom"
-      >
-        <button
-          type="button"
-          aria-label={`Step ${position + 1}: ${step.title}`}
-          aria-current={active ? 'step' : undefined}
-          style={numberStyle(colours, active)}
-          onClick={() => {
-            onSelect(position);
-          }}
-        >
-          {position + 1}
-        </button>
-      </Tooltip>,
+        step={step}
+        position={position}
+        colours={colours}
+        active={active}
+        onSelect={onSelect}
+      />,
     );
   }
 
@@ -179,6 +170,47 @@ function LevelStrip(props: LevelStripProps): ReactElement {
   );
 }
 
+interface StepButtonProps {
+  step: TutorialStripStep;
+  position: number;
+  colours: TutorialLevelColours;
+  active: boolean;
+  onSelect: (index: number) => void;
+}
+
+/**
+ * One numbered step, naming itself on hover.
+ *
+ * The name is held by {@link ActionTooltip} rather than by Blueprint: pressing
+ * a number within the hover delay would otherwise open the card afterwards,
+ * over the step it has just walked away from.
+ * @param props - The step, where it sits, and what picking it does.
+ * @returns The button.
+ */
+function StepButton(props: StepButtonProps): ReactElement {
+  const { step, position, colours, active, onSelect } = props;
+
+  return (
+    <ActionTooltip
+      content={step.title}
+      delay={HOVER_OPEN_DELAY}
+      placement="bottom"
+    >
+      <button
+        type="button"
+        aria-label={`Step ${position + 1}: ${step.title}`}
+        aria-current={active ? 'step' : undefined}
+        style={numberStyle(colours, active)}
+        onClick={() => {
+          onSelect(position);
+        }}
+      >
+        {position + 1}
+      </button>
+    </ActionTooltip>
+  );
+}
+
 function positionsOfLevel(
   steps: readonly TutorialStripStep[],
   level: ExerciseLevel,

package/src/pedagogy/ui/glossaryContext.ts

@@ -26,6 +26,13 @@ export interface GlossaryContextValue {
    * @default undefined — a plain `<code>`
    */
   renderCode?: (code: string) => ReactNode;
+  /**
+   * Draws a `{{C6H6O}}` of the prose. A chemistry site passes
+   * `(mf) => <MF mf={mf} />` from `react-mf` here, once, so that every formula
+   * below reads as a formula rather than as a line of digits.
+   * @default undefined — the formula as typed
+   */
+  renderMf?: (mf: string) => ReactNode;
 }
 
 /**

package/src/pedagogy/ui/index.ts

@@ -41,7 +41,7 @@ export type {
   SyntaxTooltipProps,
 } from './SyntaxTooltip.tsx';
 export { SyntaxTooltip } from './SyntaxTooltip.tsx';
-export type { ProseTone } from './pedagogyStyle.ts';
+export type { ProseInk } from './pedagogyStyle.ts';
 export type { TestCaseListProps } from './TestCaseList.tsx';
 export { TestCaseList } from './TestCaseList.tsx';
 export type {

package/src/pedagogy/ui/inlineSegments.tsx

@@ -7,6 +7,11 @@ import type { InlineSegment } from '../core/inlineMarks.ts';
 interface InlineRenderers {
   /** Draws a code span, from the text between its backticks. */
   code: (code: string) => ReactNode;
+  /**
+   * Draws a molecular formula, from the text between its braces.
+   * @default undefined — the formula as typed, which no chemistry site wants
+   */
+  mf?: (mf: string) => ReactNode;
   /**
    * Draws a glossary marker, from its lowercased term and the text to show.
    * @default undefined — the text, as plain prose
@@ -53,6 +58,8 @@ function renderSegment(
       return segment.text;
     case 'code':
       return renderers.code(segment.text);
+    case 'mf':
+      return renderers.mf === undefined ? segment.mf : renderers.mf(segment.mf);
     case 'term':
       return renderers.term === undefined
         ? segment.text

package/src/pedagogy/ui/pedagogyStyle.ts

@@ -1,11 +1,9 @@
 /**
  * What the pedagogy components share about how they look: how long a pointer
  * rests before a definition opens, the monospace stack, and the ink prose is
- * set in on each of the two grounds it is shown on.
+ * set in.
  */
 
-import { Colors } from '@blueprintjs/core';
-
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 
 /** Long enough that the pointer can cross a chip or a row without opening it. */
@@ -15,10 +13,7 @@ export const HOVER_OPEN_DELAY = 150;
 export const MONOSPACE =
   'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace';
 
-/** Where prose is drawn: on the dark plate of a tooltip, or on the page. */
-export type ProseTone = 'tooltip' | 'page';
-
-/** The colours prose is set in on one ground. */
+/** The colours prose is set in. */
 export interface ProseInk {
   /** The body of a paragraph. */
   text: string;
@@ -31,23 +26,16 @@ export interface ProseInk {
 }
 
 /**
- * The ink of each ground.
+ * The one ink, because there is one ground.
  *
- * A Blueprint tooltip is the same dark plate on every site, so its ink is white
- * at decreasing strength, read off the plate rather than off the family tokens,
- * which are written for a light page. The page ink is the tokens.
+ * A definition, a documented construct and a help card are the same job, and
+ * the family answers it with one card: `help-tooltip` in `chrome.css`, light,
+ * on a border and a shadow. So the prose here is the family's tokens wherever
+ * it is read — on a page, or on that card.
  */
-export const PROSE_INK: Readonly<Record<ProseTone, ProseInk>> = {
-  tooltip: {
-    text: 'rgb(255 255 255 / 82%)',
-    muted: 'rgb(255 255 255 / 62%)',
-    code: Colors.BLUE5,
-    rule: 'rgb(255 255 255 / 15%)',
-  },
-  page: {
-    text: TOKEN.text,
-    muted: TOKEN.textMuted,
-    code: TOKEN.text,
-    rule: TOKEN.border,
-  },
+export const PROSE_INK: ProseInk = {
+  text: TOKEN.text,
+  muted: TOKEN.textMuted,
+  code: TOKEN.text,
+  rule: TOKEN.border,
 };

package/src/seo/core/plainDescription.ts

@@ -44,8 +44,8 @@ export function plainDescription(
 }
 
 /**
- * Authored prose as plain text: glossary markers, code spans, strong and
- * emphasis resolved to the words they show, and the whitespace collapsed.
+ * Authored prose as plain text: glossary markers, code spans, formulas, strong
+ * and emphasis resolved to the words they show, and the whitespace collapsed.
  * @param prose - The prose, markup and all.
  * @returns The same words, unmarked.
  */
@@ -66,6 +66,8 @@ function textOf(segments: readonly InlineSegment[]): string {
   for (const segment of segments) {
     if ('children' in segment) {
       text += textOf(segment.children);
+    } else if (segment.kind === 'mf') {
+      text += segment.mf;
     } else {
       text += segment.text;
     }

package/src/share/core/devices.ts

@@ -0,0 +1,80 @@
+/** The screens a link can be looked at on, before it is handed out. */
+export type SharePreviewDeviceKey = 'window' | 'mobile' | 'laptop' | 'hd';
+
+/** A screen the preview lays the page out at. */
+export interface SharePreviewSize {
+  /** Width in CSS pixels. */
+  width: number;
+  /** Height in CSS pixels. */
+  height: number;
+}
+
+/**
+ * The screens offered, in the order the capsules read. `window` is the
+ * reader's own, and is resolved against the browser rather than written here.
+ */
+export const SHARE_PREVIEW_DEVICES: readonly SharePreviewDeviceKey[] = [
+  'window',
+  'mobile',
+  'laptop',
+  'hd',
+];
+
+const FIXED_SIZES: Record<
+  Exclude<SharePreviewDeviceKey, 'window'>,
+  SharePreviewSize
+> = {
+  mobile: { width: 390, height: 844 },
+  laptop: { width: 1280, height: 800 },
+  hd: { width: 1920, height: 1080 },
+};
+
+/** What the preview falls back to where there is no window to measure. */
+const FALLBACK_WINDOW: SharePreviewSize = { width: 1280, height: 800 };
+
+/**
+ * The page size a device lays the preview out at.
+ * @param key - The device picked.
+ * @param window - The reader's own window, for the `window` device.
+ * @returns Its width and height in CSS pixels.
+ */
+export function sharePreviewSize(
+  key: SharePreviewDeviceKey,
+  window?: Partial<SharePreviewSize>,
+): SharePreviewSize {
+  if (key !== 'window') return FIXED_SIZES[key];
+  const width = window?.width ?? 0;
+  const height = window?.height ?? 0;
+  return width > 0 && height > 0 ? { width, height } : FALLBACK_WINDOW;
+}
+
+/**
+ * How far the page is shrunk to fit the pane it is previewed in.
+ *
+ * It is never enlarged: a phone shown bigger than a phone is not what the
+ * reader is checking.
+ * @param pane - The room the preview pane has.
+ * @param page - The size the page is laid out at.
+ * @returns The scale, between 0 and 1.
+ */
+export function sharePreviewScale(
+  pane: Partial<SharePreviewSize>,
+  page: SharePreviewSize,
+): number {
+  const width = pane.width ?? 0;
+  const height = pane.height ?? 0;
+  if (width <= 0 || height <= 0) return 1;
+  return Math.min(1, width / page.width, height / page.height);
+}
+
+/**
+ * The address as the preview's own bar writes it, without its scheme.
+ *
+ * What a reader checks there is the site and the query the link carries, and a
+ * bar as wide as a phone has no room for `https://`.
+ * @param url - The link the preview loads.
+ * @returns The address, scheme dropped.
+ */
+export function sharePreviewAddress(url: string): string {
+  return url.replace(/^[a-z][\w+.-]*:\/\//i, '');
+}

package/src/share/core/index.ts

@@ -9,7 +9,21 @@ export {
   suggestedShareConfig,
   visibleShareParts,
 } from './config.ts';
+export type { SharePreviewDeviceKey, SharePreviewSize } from './devices.ts';
+export {
+  SHARE_PREVIEW_DEVICES,
+  sharePreviewAddress,
+  sharePreviewScale,
+  sharePreviewSize,
+} from './devices.ts';
 export { escapeAttribute, escapeText } from './escape.ts';
+export type { ShareRegion } from './regions.ts';
+export {
+  SHARE_REGIONS_MESSAGE,
+  SHARE_REGIONS_REQUEST,
+  isShareRegionsRequest,
+  readShareRegions,
+} from './regions.ts';
 export type {
   BooleanParamOptions,
   IntegerParamOptions,

package/src/share/core/regions.ts

@@ -0,0 +1,87 @@
+/**
+ * Where each part of a page sits, so a share dialog can show which region of
+ * the preview a row of its list names.
+ *
+ * The two sides are different documents — the dialog and the framed page — so
+ * they speak by message. Everything that arrives is somebody else's input: a
+ * framed page is messaged by whatever page frames it, and a dialog by whatever
+ * it frames, so both ends read rather than trust.
+ */
+
+/** Asks a framed page to report where its parts are, and to keep reporting. */
+export const SHARE_REGIONS_REQUEST = 'cheminfo:share-regions-request';
+
+/** Carries the answer back to the dialog. */
+export const SHARE_REGIONS_MESSAGE = 'cheminfo:share-regions';
+
+/** The box one part of the page occupies, in the page's own coordinates. */
+export interface ShareRegion {
+  /** The name the part takes in `?hide=`. */
+  part: string;
+  /** Distance from the left edge of the page, in CSS pixels. */
+  x: number;
+  /** Distance from the top edge of the page, in CSS pixels. */
+  y: number;
+  /** Width of the box, in CSS pixels. */
+  width: number;
+  /** Height of the box, in CSS pixels. */
+  height: number;
+}
+
+/**
+ * Whether a message asks this page to report where its parts are.
+ * @param data - What arrived on the message event.
+ * @returns Whether it is the request.
+ */
+export function isShareRegionsRequest(data: unknown): boolean {
+  return messageType(data) === SHARE_REGIONS_REQUEST;
+}
+
+/**
+ * The regions a framed page reported, or `null` for anything else that arrived.
+ *
+ * A region with a name that is not a string, or a side that is not a finite
+ * number, is dropped rather than taken: a dialog drawing a box from a number it
+ * did not check draws it across the whole screen.
+ * @param data - What arrived on the message event.
+ * @returns The regions, or `null` when the message is not one.
+ */
+export function readShareRegions(data: unknown): ShareRegion[] | null {
+  if (messageType(data) !== SHARE_REGIONS_MESSAGE) return null;
+  const { regions } = data as { regions?: unknown };
+  if (!Array.isArray(regions)) return null;
+
+  const read: ShareRegion[] = [];
+  for (const candidate of regions) {
+    const region = readRegion(candidate);
+    if (region !== null) read.push(region);
+  }
+  return read;
+}
+
+function readRegion(candidate: unknown): ShareRegion | null {
+  if (typeof candidate !== 'object' || candidate === null) return null;
+  const { part, x, y, width, height } = candidate as Record<string, unknown>;
+  if (typeof part !== 'string' || part === '') return null;
+  if (
+    !Number.isFinite(x) ||
+    !Number.isFinite(y) ||
+    !Number.isFinite(width) ||
+    !Number.isFinite(height)
+  ) {
+    return null;
+  }
+  return {
+    part,
+    x: x as number,
+    y: y as number,
+    width: width as number,
+    height: height as number,
+  };
+}
+
+function messageType(data: unknown): string | null {
+  if (typeof data !== 'object' || data === null) return null;
+  const { type } = data as { type?: unknown };
+  return typeof type === 'string' ? type : null;
+}

package/src/share/ui/HiddenPartsProvider.tsx

@@ -2,6 +2,8 @@ import type { ReactElement, ReactNode } from 'react';
 import { useMemo } from 'react';
 
 import { HiddenPartsContext } from './hiddenParts.ts';
+import { ShareMarkingContext } from './shareMarking.ts';
+import { useShareRegionReports } from './useShareRegionReports.ts';
 
 export interface HiddenPartsProviderProps {
   /**
@@ -25,10 +27,13 @@ export function HiddenPartsProvider(
 ): ReactElement {
   const { hidden, children } = props;
   const parts = useMemo(() => new Set(hidden), [hidden]);
+  const marking = useShareRegionReports(parts);
 
   return (
     <HiddenPartsContext.Provider value={parts}>
-      {children}
+      <ShareMarkingContext.Provider value={marking}>
+        {children}
+      </ShareMarkingContext.Provider>
     </HiddenPartsContext.Provider>
   );
 }

package/src/share/ui/PagePart.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 
 import { useIsHidden } from './hiddenParts.ts';
+import { useShareMarking } from './shareMarking.ts';
 
 export interface PagePartProps {
   /** The name this region takes in `?hide=`. */
@@ -21,6 +22,16 @@ export interface PagePartProps {
 export function PagePart(props: PagePartProps): ReactNode {
   const { part, children } = props;
   const isHidden = useIsHidden();
+  const marking = useShareMarking();
 
-  return isHidden(part) ? null : children;
+  if (isHidden(part)) return null;
+  if (!marking) return children;
+
+  // `display: contents` so the marker is only a name the dialog can find, and
+  // never a box between the page and the part it holds.
+  return (
+    <div data-share-part={part} style={{ display: 'contents' }}>
+      {children}
+    </div>
+  );
 }