react-cheminfo 0.38.0 → 0.39.0

package/lib/share/ui/ShareLinkBar.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnchorButton } from '@blueprintjs/core';
+import { CopyButton } from "../../clipboard/ui/index.js";
+import { HelpTooltip } from "../../help/ui/index.js";
+import { useChromeT } from "../../i18n/ui/useT.js";
+/**
+ * The three things one does with a share link, kept above the options and
+ * never scrolled away: a dialog whose Copy button is below the fold is a dialog
+ * one scrolls through every single time.
+ *
+ * Neither the address nor the frame markup is printed. A teacher reads neither
+ * before pasting it, and a hundred characters of query string set in monospace
+ * is the widest thing in the dialog; what tells them which button to press is
+ * the help on it.
+ * @param props - The address, and the frame markup the third button copies.
+ * @returns The bar.
+ */
+export function ShareLinkBar(props) {
+    const { url, frame } = props;
+    const t = useChromeT();
+    return (_jsxs("div", { className: "share-linkbar", children: [_jsx(HelpTooltip, { content: {
+                    title: t('share.copyLinkHelpTitle'),
+                    body: t('share.copyLinkHelp'),
+                }, children: _jsx(CopyButton, { content: url, label: t('share.copyLink'), title: "" }) }), _jsx(HelpTooltip, { content: {
+                    title: t('share.openInNewTabHelpTitle'),
+                    body: t('share.openInNewTabHelp'),
+                }, children: _jsx(AnchorButton, { icon: "share", text: t('share.openInNewTab'), href: url, target: "_blank", rel: "noopener noreferrer" }) }), _jsx(HelpTooltip, { content: {
+                    title: t('share.copyIframeHelpTitle'),
+                    body: t('share.copyIframeHelp'),
+                }, children: _jsx(CopyButton, { content: frame, icon: "code", label: t('share.copyIframe'), title: "" }) })] }));
+}
+//# sourceMappingURL=ShareLinkBar.js.map

package/lib/share/ui/ShareLinkBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShareLinkBar.js","sourceRoot":"","sources":["../../../src/share/ui/ShareLinkBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGjD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AASnD;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAC7B,MAAM,CAAC,GAAG,UAAU,EAAE,CAAC;IAEvB,OAAO,CACL,eAAK,SAAS,EAAC,eAAe,aAC5B,KAAC,WAAW,IACV,OAAO,EAAE;oBACP,KAAK,EAAE,CAAC,CAAC,yBAAyB,CAAC;oBACnC,IAAI,EAAE,CAAC,CAAC,oBAAoB,CAAC;iBAC9B,YAED,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAAE,KAAK,EAAC,EAAE,GAAG,GACrD,EACd,KAAC,WAAW,IACV,OAAO,EAAE;oBACP,KAAK,EAAE,CAAC,CAAC,6BAA6B,CAAC;oBACvC,IAAI,EAAE,CAAC,CAAC,wBAAwB,CAAC;iBAClC,YAED,KAAC,YAAY,IACX,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,CAAC,CAAC,oBAAoB,CAAC,EAC7B,IAAI,EAAE,GAAG,EACT,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,GACzB,GACU,EACd,KAAC,WAAW,IACV,OAAO,EAAE;oBACP,KAAK,EAAE,CAAC,CAAC,2BAA2B,CAAC;oBACrC,IAAI,EAAE,CAAC,CAAC,sBAAsB,CAAC;iBAChC,YAED,KAAC,UAAU,IACT,OAAO,EAAE,KAAK,EACd,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,CAAC,CAAC,kBAAkB,CAAC,EAC5B,KAAK,EAAC,EAAE,GACR,GACU,IACV,CACP,CAAC;AACJ,CAAC"}

package/lib/share/ui/SharePanes.d.ts

@@ -0,0 +1,17 @@
+import type { ReactElement } from 'react';
+export interface SharePanesProps {
+    /** What the link says: the presets, the boxes, and the tool's own section. */
+    options: ReactElement;
+    /** The live page, or nothing when the dialog shows no preview. */
+    preview: ReactElement | null;
+    /** Whether the dialog is too narrow to hold the two panes side by side. */
+    narrow: boolean;
+}
+/**
+ * The options and the page they write: side by side where there is room, and
+ * two tabs where there is not.
+ * @param props - The two panes, and whether they still fit together.
+ * @returns The panes, or the tabs holding them.
+ */
+export declare function SharePanes(props: SharePanesProps): ReactElement;
+//# sourceMappingURL=SharePanes.d.ts.map

package/lib/share/ui/SharePanes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SharePanes.d.ts","sourceRoot":"","sources":["../../../src/share/ui/SharePanes.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAQ1C,MAAM,WAAW,eAAe;IAC9B,8EAA8E;IAC9E,OAAO,EAAE,YAAY,CAAC;IACtB,kEAAkE;IAClE,OAAO,EAAE,YAAY,GAAG,IAAI,CAAC;IAC7B,2EAA2E;IAC3E,MAAM,EAAE,OAAO,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAqC/D"}

package/lib/share/ui/SharePanes.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tab, Tabs } from '@blueprintjs/core';
+import { useState } from 'react';
+import { useChromeT } from "../../i18n/ui/useT.js";
+const OPTIONS_TAB = 'options';
+const PREVIEW_TAB = 'preview';
+/**
+ * The options and the page they write: side by side where there is room, and
+ * two tabs where there is not.
+ * @param props - The two panes, and whether they still fit together.
+ * @returns The panes, or the tabs holding them.
+ */
+export function SharePanes(props) {
+    const { options, preview, narrow } = props;
+    const t = useChromeT();
+    const [tab, setTab] = useState(OPTIONS_TAB);
+    if (preview === null) {
+        return (_jsx("div", { className: "share-dialog__panes share-dialog__panes--single", children: options }));
+    }
+    if (narrow) {
+        return (_jsxs(Tabs, { id: "share-panes", className: "share-dialog__tabs", animate: false, renderActiveTabPanelOnly: true, selectedTabId: tab, onChange: (tabId) => {
+                setTab(String(tabId));
+            }, children: [_jsx(Tab, { id: OPTIONS_TAB, title: t('share.options'), panel: options }), _jsx(Tab, { id: PREVIEW_TAB, title: t('share.preview'), panel: preview })] }));
+    }
+    return (_jsxs("div", { className: "share-dialog__panes", children: [options, preview] }));
+}
+//# sourceMappingURL=SharePanes.js.map

package/lib/share/ui/SharePanes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SharePanes.js","sourceRoot":"","sources":["../../../src/share/ui/SharePanes.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,MAAM,WAAW,GAAG,SAAS,CAAC;AAC9B,MAAM,WAAW,GAAG,SAAS,CAAC;AAW9B;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAC3C,MAAM,CAAC,GAAG,UAAU,EAAE,CAAC;IACvB,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAS,WAAW,CAAC,CAAC;IAEpD,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;QACrB,OAAO,CACL,cAAK,SAAS,EAAC,iDAAiD,YAC7D,OAAO,GACJ,CACP,CAAC;IACJ,CAAC;IAED,IAAI,MAAM,EAAE,CAAC;QACX,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAC,aAAa,EAChB,SAAS,EAAC,oBAAoB,EAC9B,OAAO,EAAE,KAAK,EACd,wBAAwB,QACxB,aAAa,EAAE,GAAG,EAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;gBAClB,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;YACxB,CAAC,aAED,KAAC,GAAG,IAAC,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,OAAO,GAAI,EACnE,KAAC,GAAG,IAAC,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,OAAO,GAAI,IAC9D,CACR,CAAC;IACJ,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,qBAAqB,aACjC,OAAO,EACP,OAAO,IACJ,CACP,CAAC;AACJ,CAAC"}

package/lib/share/ui/SharePartOptions.d.ts

@@ -1,18 +1,24 @@
 import type { ReactElement } from 'react';
 import type { HideablePart } from '../core/index.ts';
+import type { SharePartDescriptions } from './SharePartRow.tsx';
 export interface SharePartOptionsProps {
     /** The parts this page can switch off, in the order the vocabulary lists them. */
     parts: readonly HideablePart[];
     /** The parts the draft currently switches off. */
     hidden: readonly string[];
+    /** Where each row says what switching it off does. */
+    descriptions: SharePartDescriptions;
     /** Called with the part and whether the link should switch it off. */
     onChange: (part: string, hidden: boolean) => void;
+    /** Called with the part the pointer is on, or `null` when it leaves. */
+    onPointed: (part: string | null) => void;
 }
 /**
- * One box per part of the page, worded positively: a ticked box is a part the
- * link keeps, which is how somebody building a course tile thinks about it.
+ * One switch per part of the page, worded positively: a part that is `On` is a
+ * part the link keeps, which is how somebody building a course tile thinks
+ * about it.
  * @param props - The parts, what is switched off, and how to change it.
- * @returns The list of boxes.
+ * @returns The rows.
  */
 export declare function SharePartOptions(props: SharePartOptionsProps): ReactElement;
 //# sourceMappingURL=SharePartOptions.d.ts.map

package/lib/share/ui/SharePartOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SharePartOptions.d.ts","sourceRoot":"","sources":["../../../src/share/ui/SharePartOptions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAWrD,MAAM,WAAW,qBAAqB;IACpC,kFAAkF;IAClF,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,kDAAkD;IAClD,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,sEAAsE;IACtE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACnD;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAqB3E"}
+{"version":3,"file":"SharePartOptions.d.ts","sourceRoot":"","sources":["../../../src/share/ui/SharePartOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAGhE,MAAM,WAAW,qBAAqB;IACpC,kFAAkF;IAClF,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,kDAAkD;IAClD,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,sDAAsD;IACtD,YAAY,EAAE,qBAAqB,CAAC;IACpC,sEAAsE;IACtE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,wEAAwE;IACxE,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1C;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAsB3E"}

package/lib/share/ui/SharePartOptions.js

@@ -1,22 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Checkbox } from '@blueprintjs/core';
-const OPTION_STYLE = { marginBottom: 8 };
-const DESCRIPTION_STYLE = {
-    display: 'block',
-    marginLeft: 26,
-    color: 'var(--text-muted, #5b6875)',
-    fontSize: 12,
-};
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { SharePartRow } from "./SharePartRow.js";
 /**
- * One box per part of the page, worded positively: a ticked box is a part the
- * link keeps, which is how somebody building a course tile thinks about it.
+ * One switch per part of the page, worded positively: a part that is `On` is a
+ * part the link keeps, which is how somebody building a course tile thinks
+ * about it.
  * @param props - The parts, what is switched off, and how to change it.
- * @returns The list of boxes.
+ * @returns The rows.
  */
 export function SharePartOptions(props) {
-    const { parts, hidden, onChange } = props;
-    return (_jsx(_Fragment, { children: parts.map((part) => (_jsxs("div", { style: OPTION_STYLE, className: "share-part", children: [_jsx(Checkbox, { checked: !hidden.includes(part.key), label: part.label, onChange: (event) => {
-                        onChange(part.key, !event.currentTarget.checked);
-                    } }), _jsx("span", { style: DESCRIPTION_STYLE, className: "share-part-description", children: part.description })] }, part.key))) }));
+    const { parts, hidden, descriptions, onChange, onPointed } = props;
+    return (_jsx(_Fragment, { children: parts.map((part) => (_jsx(SharePartRow, { label: part.label, description: part.description, on: !hidden.includes(part.key), descriptions: descriptions, onChange: (on) => {
+                onChange(part.key, !on);
+            }, onPointed: (pointed) => {
+                onPointed(pointed ? part.key : null);
+            } }, part.key))) }));
 }
 //# sourceMappingURL=SharePartOptions.js.map

package/lib/share/ui/SharePartOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"SharePartOptions.js","sourceRoot":"","sources":["../../../src/share/ui/SharePartOptions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK7C,MAAM,YAAY,GAAkB,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC;AAExD,MAAM,iBAAiB,GAAkB;IACvC,OAAO,EAAE,OAAO;IAChB,UAAU,EAAE,EAAE;IACd,KAAK,EAAE,4BAA4B;IACnC,QAAQ,EAAE,EAAE;CACb,CAAC;AAWF;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAC3D,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE1C,OAAO,CACL,4BACG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,eAAoB,KAAK,EAAE,YAAY,EAAE,SAAS,EAAC,YAAY,aAC7D,KAAC,QAAQ,IACP,OAAO,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,EACnC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;wBAClB,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;oBACnD,CAAC,GACD,EACF,eAAM,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAC,wBAAwB,YAC/D,IAAI,CAAC,WAAW,GACZ,KAVC,IAAI,CAAC,GAAG,CAWZ,CACP,CAAC,GACD,CACJ,CAAC;AACJ,CAAC"}
+{"version":3,"file":"SharePartOptions.js","sourceRoot":"","sources":["../../../src/share/ui/SharePartOptions.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAoB,CAAC;AAelD;;;;;;GAMG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAC3D,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAEnE,OAAO,CACL,4BACG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,KAAC,YAAY,IAEX,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,EAC9B,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE;gBACf,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC;YAC1B,CAAC,EACD,SAAS,EAAE,CAAC,OAAO,EAAE,EAAE;gBACrB,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;YACvC,CAAC,IAVI,IAAI,CAAC,GAAG,CAWb,CACH,CAAC,GACD,CACJ,CAAC;AACJ,CAAC"}

package/lib/share/ui/SharePartRow.d.ts

@@ -0,0 +1,37 @@
+import type { ReactElement } from 'react';
+/**
+ * Where a row says what switching it off does: behind a help glyph beside the
+ * label, or on a line of its own under it.
+ */
+export type SharePartDescriptions = 'help' | 'inline';
+export interface SharePartRowProps {
+    /** What the row switches, named as the reader sees it on the page. */
+    label: string;
+    /** What switching it off does, in one sentence. */
+    description: string;
+    /** Whether the link keeps it. */
+    on: boolean;
+    /** Where the description is shown. */
+    descriptions: SharePartDescriptions;
+    /** Called with the state the reader asked for. */
+    onChange: (on: boolean) => void;
+    /**
+     * Called when the pointer enters or leaves the row, so the preview can draw
+     * the region it names.
+     * @default undefined — the row is not pointed out anywhere
+     */
+    onPointed?: (pointed: boolean) => void;
+}
+/**
+ * One row of the share dialog: what it is on the left, whether the link keeps
+ * it on the right.
+ *
+ * The state is written inside the switch rather than left to a tick, because a
+ * tick means nothing without the heading above the column — and the heading is
+ * the first thing a reader scrolls past. A row that says `On` reads correctly
+ * on its own, in every language.
+ * @param props - See {@link SharePartRowProps}.
+ * @returns The row.
+ */
+export declare function SharePartRow(props: SharePartRowProps): ReactElement;
+//# sourceMappingURL=SharePartRow.d.ts.map

package/lib/share/ui/SharePartRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SharePartRow.d.ts","sourceRoot":"","sources":["../../../src/share/ui/SharePartRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAM1C;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEtD,MAAM,WAAW,iBAAiB;IAChC,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,WAAW,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,EAAE,EAAE,OAAO,CAAC;IACZ,sCAAsC;IACtC,YAAY,EAAE,qBAAqB,CAAC;IACpC,kDAAkD;IAClD,QAAQ,EAAE,CAAC,EAAE,EAAE,OAAO,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAkCnE"}

package/lib/share/ui/SharePartRow.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Switch } from '@blueprintjs/core';
+import { useId } from 'react';
+import { HelpIcon } from "../../help/ui/index.js";
+import { useChromeT } from "../../i18n/ui/useT.js";
+/**
+ * One row of the share dialog: what it is on the left, whether the link keeps
+ * it on the right.
+ *
+ * The state is written inside the switch rather than left to a tick, because a
+ * tick means nothing without the heading above the column — and the heading is
+ * the first thing a reader scrolls past. A row that says `On` reads correctly
+ * on its own, in every language.
+ * @param props - See {@link SharePartRowProps}.
+ * @returns The row.
+ */
+export function SharePartRow(props) {
+    const { label, description, on, descriptions, onChange, onPointed } = props;
+    const t = useChromeT();
+    const id = useId();
+    return (_jsxs("div", { className: "share-part", onMouseEnter: () => onPointed?.(true), onMouseLeave: () => onPointed?.(false), onFocus: () => onPointed?.(true), onBlur: () => onPointed?.(false), children: [_jsx("label", { className: "share-part__label", htmlFor: id, children: label }), descriptions === 'help' ? (_jsx(HelpIcon, { content: { title: label, body: description }, label: label })) : null, _jsx(Switch, { id: id, className: "share-part__switch", checked: on, innerLabel: t('share.off'), innerLabelChecked: t('share.on'), onChange: (event) => {
+                    onChange(event.currentTarget.checked);
+                } }), descriptions === 'inline' ? (_jsx("p", { className: "share-part__description", children: description })) : null] }));
+}
+//# sourceMappingURL=SharePartRow.js.map

package/lib/share/ui/SharePartRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SharePartRow.js","sourceRoot":"","sources":["../../../src/share/ui/SharePartRow.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9B,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AA2BnD;;;;;;;;;;GAUG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC5E,MAAM,CAAC,GAAG,UAAU,EAAE,CAAC;IACvB,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnB,OAAO,CACL,eACE,SAAS,EAAC,YAAY,EACtB,YAAY,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,IAAI,CAAC,EACrC,YAAY,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,EACtC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,aAEhC,gBAAO,SAAS,EAAC,mBAAmB,EAAC,OAAO,EAAE,EAAE,YAC7C,KAAK,GACA,EACP,YAAY,KAAK,MAAM,CAAC,CAAC,CAAC,CACzB,KAAC,QAAQ,IAAC,OAAO,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,KAAK,EAAE,KAAK,GAAI,CACzE,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,MAAM,IACL,EAAE,EAAE,EAAE,EACN,SAAS,EAAC,oBAAoB,EAC9B,OAAO,EAAE,EAAE,EACX,UAAU,EAAE,CAAC,CAAC,WAAW,CAAC,EAC1B,iBAAiB,EAAE,CAAC,CAAC,UAAU,CAAC,EAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAClB,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;gBACxC,CAAC,GACD,EACD,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC3B,YAAG,SAAS,EAAC,yBAAyB,YAAE,WAAW,GAAK,CACzD,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC"}

package/lib/share/ui/SharePresetTabs.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactElement } from 'react';
 import type { ShareParamCodecs, SharePreset } from '../core/index.ts';
 export interface SharePresetTabsProps<Codecs extends ShareParamCodecs = Record<string, never>> {
     /** The presets, in the order the tabs list them. */
@@ -7,14 +7,17 @@ export interface SharePresetTabsProps<Codecs extends ShareParamCodecs = Record<s
     selected: string | null;
     /** Called with the key of the preset picked, `null` for the custom tab. */
     onSelect: (key: string | null) => void;
-    /** What the custom tab holds: the boxes of the draft. */
-    custom: ReactNode;
 }
 /**
- * One tab per preset, then a last Custom tab holding the boxes, which start
- * from whatever the preset before it set.
- * @param props - The presets, the open one, and the custom panel.
- * @returns The tab strip and the open panel.
+ * One tab per ready-made link, then a last Custom tab for building any other
+ * one.
+ *
+ * The strip runs the width of the dialog rather than sitting in the column of
+ * options, because the choice governs the preview as much as the switches: in
+ * a third of the width, four tabs wrap onto a second row and the last of them
+ * — the one holding every switch — reads as an afterthought.
+ * @param props - The presets, and which one is open.
+ * @returns The tab strip.
  */
 export declare function SharePresetTabs<Codecs extends ShareParamCodecs = Record<string, never>>(props: SharePresetTabsProps<Codecs>): ReactElement;
 //# sourceMappingURL=SharePresetTabs.d.ts.map

package/lib/share/ui/SharePresetTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SharePresetTabs.d.ts","sourceRoot":"","sources":["../../../src/share/ui/SharePresetTabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAWtE,MAAM,WAAW,oBAAoB,CACnC,MAAM,SAAS,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC;IAEvD,oDAAoD;IACpD,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;IAC5C,6DAA6D;IAC7D,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,2EAA2E;IAC3E,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvC,yDAAyD;IACzD,MAAM,EAAE,SAAS,CAAC;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAC7B,MAAM,SAAS,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,EACvD,KAAK,EAAE,oBAAoB,CAAC,MAAM,CAAC,GAAG,YAAY,CAmCnD"}
+{"version":3,"file":"SharePresetTabs.d.ts","sourceRoot":"","sources":["../../../src/share/ui/SharePresetTabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAKtE,MAAM,WAAW,oBAAoB,CACnC,MAAM,SAAS,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC;IAEvD,oDAAoD;IACpD,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;IAC5C,6DAA6D;IAC7D,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,2EAA2E;IAC3E,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACxC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAC7B,MAAM,SAAS,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,EACvD,KAAK,EAAE,oBAAoB,CAAC,MAAM,CAAC,GAAG,YAAY,CA+BnD"}

package/lib/share/ui/SharePresetTabs.js

@@ -1,27 +1,27 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tab, Tabs } from '@blueprintjs/core';
 import { useChromeT } from "../../i18n/ui/useT.js";
-const SECTION_STYLE = { marginBottom: 18 };
-const DESCRIPTION_STYLE = {
-    margin: 0,
-    color: 'var(--text-muted, #5b6875)',
-};
 const CUSTOM_TAB = 'custom';
 const PRESET_TAB_PREFIX = 'preset-';
 /**
- * One tab per preset, then a last Custom tab holding the boxes, which start
- * from whatever the preset before it set.
- * @param props - The presets, the open one, and the custom panel.
- * @returns The tab strip and the open panel.
+ * One tab per ready-made link, then a last Custom tab for building any other
+ * one.
+ *
+ * The strip runs the width of the dialog rather than sitting in the column of
+ * options, because the choice governs the preview as much as the switches: in
+ * a third of the width, four tabs wrap onto a second row and the last of them
+ * — the one holding every switch — reads as an afterthought.
+ * @param props - The presets, and which one is open.
+ * @returns The tab strip.
  */
 export function SharePresetTabs(props) {
-    const { presets, selected, onSelect, custom } = props;
+    const { presets, selected, onSelect } = props;
     const t = useChromeT();
-    return (_jsx("section", { className: "share-section", style: SECTION_STYLE, children: _jsxs(Tabs, { id: "share-presets", className: "share-presets", animate: false, renderActiveTabPanelOnly: true, selectedTabId: selected === null ? CUSTOM_TAB : `${PRESET_TAB_PREFIX}${selected}`, onChange: (tabId) => {
-                const id = String(tabId);
-                onSelect(id.startsWith(PRESET_TAB_PREFIX)
-                    ? id.slice(PRESET_TAB_PREFIX.length)
-                    : null);
-            }, children: [presets.map((preset) => (_jsx(Tab, { id: `${PRESET_TAB_PREFIX}${preset.key}`, title: preset.label, panel: _jsx("p", { style: DESCRIPTION_STYLE, children: preset.description }) }, preset.key))), _jsx(Tab, { id: CUSTOM_TAB, title: t('share.custom'), panel: _jsx(_Fragment, { children: custom }) })] }) }));
+    return (_jsxs(Tabs, { id: "share-presets", className: "share-presets", animate: false, selectedTabId: selected === null ? CUSTOM_TAB : `${PRESET_TAB_PREFIX}${selected}`, onChange: (tabId) => {
+            const id = String(tabId);
+            onSelect(id.startsWith(PRESET_TAB_PREFIX)
+                ? id.slice(PRESET_TAB_PREFIX.length)
+                : null);
+        }, children: [presets.map((preset) => (_jsx(Tab, { id: `${PRESET_TAB_PREFIX}${preset.key}`, title: preset.label }, preset.key))), _jsx(Tab, { id: CUSTOM_TAB, title: t('share.custom') })] }));
 }
 //# sourceMappingURL=SharePresetTabs.js.map

package/lib/share/ui/SharePresetTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SharePresetTabs.js","sourceRoot":"","sources":["../../../src/share/ui/SharePresetTabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAG9C,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGnD,MAAM,aAAa,GAAkB,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;AAC1D,MAAM,iBAAiB,GAAkB;IACvC,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,4BAA4B;CACpC,CAAC;AAEF,MAAM,UAAU,GAAG,QAAQ,CAAC;AAC5B,MAAM,iBAAiB,GAAG,SAAS,CAAC;AAepC;;;;;GAKG;AACH,MAAM,UAAU,eAAe,CAE7B,KAAmC;IACnC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACtD,MAAM,CAAC,GAAG,UAAU,EAAE,CAAC;IAEvB,OAAO,CACL,kBAAS,SAAS,EAAC,eAAe,EAAC,KAAK,EAAE,aAAa,YACrD,MAAC,IAAI,IACH,EAAE,EAAC,eAAe,EAClB,SAAS,EAAC,eAAe,EACzB,OAAO,EAAE,KAAK,EACd,wBAAwB,QACxB,aAAa,EACX,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,iBAAiB,GAAG,QAAQ,EAAE,EAEpE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;gBAClB,MAAM,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;gBACzB,QAAQ,CACN,EAAE,CAAC,UAAU,CAAC,iBAAiB,CAAC;oBAC9B,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC;oBACpC,CAAC,CAAC,IAAI,CACT,CAAC;YACJ,CAAC,aAEA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,KAAC,GAAG,IAEF,EAAE,EAAE,GAAG,iBAAiB,GAAG,MAAM,CAAC,GAAG,EAAE,EACvC,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,YAAG,KAAK,EAAE,iBAAiB,YAAG,MAAM,CAAC,WAAW,GAAK,IAHvD,MAAM,CAAC,GAAG,CAIf,CACH,CAAC,EACF,KAAC,GAAG,IAAC,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,4BAAG,MAAM,GAAI,GAAI,IAClE,GACC,CACX,CAAC;AACJ,CAAC"}
+{"version":3,"file":"SharePresetTabs.js","sourceRoot":"","sources":["../../../src/share/ui/SharePresetTabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAG9C,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGnD,MAAM,UAAU,GAAG,QAAQ,CAAC;AAC5B,MAAM,iBAAiB,GAAG,SAAS,CAAC;AAapC;;;;;;;;;;GAUG;AACH,MAAM,UAAU,eAAe,CAE7B,KAAmC;IACnC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC9C,MAAM,CAAC,GAAG,UAAU,EAAE,CAAC;IAEvB,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAC,eAAe,EAClB,SAAS,EAAC,eAAe,EACzB,OAAO,EAAE,KAAK,EACd,aAAa,EACX,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,iBAAiB,GAAG,QAAQ,EAAE,EAEpE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YAClB,MAAM,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;YACzB,QAAQ,CACN,EAAE,CAAC,UAAU,CAAC,iBAAiB,CAAC;gBAC9B,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC;gBACpC,CAAC,CAAC,IAAI,CACT,CAAC;QACJ,CAAC,aAEA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,KAAC,GAAG,IAEF,EAAE,EAAE,GAAG,iBAAiB,GAAG,MAAM,CAAC,GAAG,EAAE,EACvC,KAAK,EAAE,MAAM,CAAC,KAAK,IAFd,MAAM,CAAC,GAAG,CAGf,CACH,CAAC,EACF,KAAC,GAAG,IAAC,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,CAAC,cAAc,CAAC,GAAI,IAC5C,CACR,CAAC;AACJ,CAAC"}

package/lib/share/ui/SharePreview.d.ts

@@ -0,0 +1,32 @@
+import type { ReactElement } from 'react';
+export interface SharePreviewProps {
+    /** The address the frame loads — the link as it stands. */
+    url: string;
+    /** What a screen reader announces the frame as. */
+    title: string;
+    /**
+     * The part the reader is pointing at in the list, drawn on the page so the
+     * name in the list and the thing on the page are the same thing.
+     * @default null — nothing is pointed at
+     */
+    highlight?: {
+        part: string;
+        label: string;
+    } | null;
+}
+/**
+ * The page as the link hands it out, live, beside the options that write it.
+ *
+ * It is drawn as a window of its own — named above it, with the address it
+ * loads on its own bar — because a page scaled into a pane otherwise reads as
+ * the site itself, and a reader who takes the preview for the tool ticks a box
+ * in it and believes the link now carries it.
+ *
+ * The frame is laid out at the screen the reader picks — their own window, a
+ * phone, a laptop or a large display — and scaled into whatever room the pane
+ * has, so a course tile can be checked at the size a student will meet it.
+ * @param props - The address and the name of the frame.
+ * @returns The preview pane.
+ */
+export declare function SharePreview(props: SharePreviewProps): ReactElement;
+//# sourceMappingURL=SharePreview.d.ts.map

package/lib/share/ui/SharePreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SharePreview.d.ts","sourceRoot":"","sources":["../../../src/share/ui/SharePreview.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAuBzD,MAAM,WAAW,iBAAiB;IAChC,2DAA2D;IAC3D,GAAG,EAAE,MAAM,CAAC;IACZ,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CACpD;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAgHnE"}

package/lib/share/ui/SharePreview.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { H6, Icon } from '@blueprintjs/core';
+import { useEffect, useRef, useState } from 'react';
+import { formatInteger } from "../../format/core/index.js";
+import { HelpIcon } from "../../help/ui/index.js";
+import { useContainerSize } from "../../hooks/ui/useContainerSize.js";
+import { useDebouncedValue } from "../../hooks/ui/useDebouncedValue.js";
+import { useChromeT } from "../../i18n/ui/useT.js";
+import { SHARE_REGIONS_REQUEST, readShareRegions, sharePreviewAddress, sharePreviewScale, sharePreviewSize, } from "../core/index.js";
+import { SharePreviewDevices } from "./SharePreviewDevices.js";
+/** Room the window's own bar takes, which the page is not scaled into. */
+const CHROME_HEIGHT = 26;
+/**
+ * The page as the link hands it out, live, beside the options that write it.
+ *
+ * It is drawn as a window of its own — named above it, with the address it
+ * loads on its own bar — because a page scaled into a pane otherwise reads as
+ * the site itself, and a reader who takes the preview for the tool ticks a box
+ * in it and believes the link now carries it.
+ *
+ * The frame is laid out at the screen the reader picks — their own window, a
+ * phone, a laptop or a large display — and scaled into whatever room the pane
+ * has, so a course tile can be checked at the size a student will meet it.
+ * @param props - The address and the name of the frame.
+ * @returns The preview pane.
+ */
+export function SharePreview(props) {
+    const { url, title, highlight = null } = props;
+    const t = useChromeT();
+    const stage = useRef(null);
+    const frame = useRef(null);
+    const pane = useContainerSize(stage);
+    const [device, setDevice] = useState('window');
+    const [regions, setRegions] = useState(NO_REGIONS);
+    const mark = useRef(null);
+    // Every box ticked reloads the frame; a number typed into a tool's own field
+    // would otherwise reload it once per keystroke.
+    const src = useDebouncedValue(url, 400);
+    const windowSize = {
+        width: globalThis.innerWidth,
+        height: globalThis.innerHeight,
+    };
+    const page = sharePreviewSize(device, windowSize);
+    const scale = sharePreviewScale({ width: pane.width, height: pane.height - CHROME_HEIGHT }, page);
+    const region = highlight === null ? undefined : regionOf(regions, highlight.part);
+    const help = {
+        title: t('share.preview'),
+        body: [t('share.previewWhat'), t('share.previewLive')],
+    };
+    useEffect(() => {
+        function onMessage(event) {
+            if (event.source !== frame.current?.contentWindow)
+                return;
+            const reported = readShareRegions(event.data);
+            if (reported !== null)
+                setRegions(reported);
+        }
+        globalThis.addEventListener('message', onMessage);
+        return () => {
+            globalThis.removeEventListener('message', onMessage);
+        };
+    }, []);
+    // A region further down the page than the stage shows is brought into view,
+    // or pointing at a row would mark something the reader cannot see.
+    useEffect(() => {
+        mark.current?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    }, [highlight?.part]);
+    return (_jsxs("section", { className: "share-preview", "aria-label": t('share.preview'), children: [_jsxs("header", { className: "share-preview__header", children: [_jsxs(H6, { className: "share-preview__label", children: [_jsx(Icon, { icon: "eye-open", size: 13 }), t('share.preview'), _jsx(HelpIcon, { content: help })] }), _jsx(SharePreviewDevices, { value: device, onChange: setDevice, windowSize: windowSize })] }), _jsx("div", { className: "share-preview__stage", ref: stage, children: _jsxs("div", { className: "share-preview__device", style: { width: page.width * scale }, children: [_jsxs("div", { className: "share-preview__chrome", children: [_jsx(Icon, { icon: "eye-open", size: 11 }), _jsx("span", { className: "share-preview__address", children: sharePreviewAddress(url) }), _jsx("span", { className: "share-preview__size", children: sizeNote(page.width, page.height, scale) })] }), _jsxs("div", { className: "share-preview__page", style: { height: page.height * scale }, children: [_jsx("iframe", { ref: frame, className: "share-preview__frame", src: src, title: title, style: frameStyle(page.width, page.height, scale), onLoad: () => {
+                                        // What the page before it reported is where its own parts
+                                        // were, so it is dropped rather than drawn over this one.
+                                        setRegions(NO_REGIONS);
+                                        frame.current?.contentWindow?.postMessage({ type: SHARE_REGIONS_REQUEST }, '*');
+                                    } }), region === undefined || highlight === null ? null : (_jsx("div", { ref: mark, className: "share-preview__region", style: regionStyle(region, scale), children: _jsx("span", { className: "share-preview__region-name", children: highlight.label }) }))] })] }) })] }));
+}
+const NO_REGIONS = [];
+function regionOf(regions, part) {
+    for (const region of regions) {
+        if (region.part === part)
+            return region;
+    }
+    return undefined;
+}
+function regionStyle(region, scale) {
+    return {
+        left: region.x * scale,
+        top: region.y * scale,
+        width: region.width * scale,
+        height: region.height * scale,
+    };
+}
+function frameStyle(width, height, scale) {
+    return {
+        width,
+        height,
+        border: 0,
+        transform: `scale(${scale})`,
+        transformOrigin: 'top left',
+    };
+}
+function sizeNote(width, height, scale) {
+    const size = `${formatInteger(width)} × ${formatInteger(height)}`;
+    return scale === 1 ? size : `${size} · ${Math.round(scale * 100)}%`;
+}
+//# sourceMappingURL=SharePreview.js.map

package/lib/share/ui/SharePreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SharePreview.js","sourceRoot":"","sources":["../../../src/share/ui/SharePreview.tsx"],"names":[],"mappings":"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"}

package/lib/share/ui/SharePreviewDevices.d.ts

@@ -0,0 +1,20 @@
+import type { ReactElement } from 'react';
+import type { SharePreviewDeviceKey, SharePreviewSize } from '../core/index.ts';
+export interface SharePreviewDevicesProps {
+    /** The screen the preview is laid out at. */
+    value: SharePreviewDeviceKey;
+    /** Called with the screen picked. */
+    onChange: (value: SharePreviewDeviceKey) => void;
+    /** The reader's own window, which the first screen is measured from. */
+    windowSize: Partial<SharePreviewSize>;
+}
+/**
+ * The screens a link can be looked at on, as one row of glyphs.
+ *
+ * Each carries its name and its size, so a pointer resting on one says what it
+ * lays the page out at rather than leaving the reader to guess the icon.
+ * @param props - See {@link SharePreviewDevicesProps}.
+ * @returns The row of screen buttons.
+ */
+export declare function SharePreviewDevices(props: SharePreviewDevicesProps): ReactElement;
+//# sourceMappingURL=SharePreviewDevices.d.ts.map

package/lib/share/ui/SharePreviewDevices.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SharePreviewDevices.d.ts","sourceRoot":"","sources":["../../../src/share/ui/SharePreviewDevices.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAehF,MAAM,WAAW,wBAAwB;IACvC,6CAA6C;IAC7C,KAAK,EAAE,qBAAqB,CAAC;IAC7B,qCAAqC;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,wEAAwE;IACxE,UAAU,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;CACvC;AAED;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,YAAY,CA8Bd"}

package/lib/share/ui/SharePreviewDevices.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, ButtonGroup } from '@blueprintjs/core';
+import { useChromeT } from "../../i18n/ui/useT.js";
+import { SHARE_PREVIEW_DEVICES, sharePreviewSize } from "../core/index.js";
+/**
+ * The glyph each screen is picked by: a window of one's own, a phone, a
+ * monitor, a projected display. The row reads as four screen sizes at a
+ * glance, which four words never did.
+ */
+const DEVICE_ICONS = {
+    window: 'application',
+    mobile: 'mobile-phone',
+    laptop: 'desktop',
+    hd: 'presentation',
+};
+/**
+ * The screens a link can be looked at on, as one row of glyphs.
+ *
+ * Each carries its name and its size, so a pointer resting on one says what it
+ * lays the page out at rather than leaving the reader to guess the icon.
+ * @param props - See {@link SharePreviewDevicesProps}.
+ * @returns The row of screen buttons.
+ */
+export function SharePreviewDevices(props) {
+    const { value, onChange, windowSize } = props;
+    const t = useChromeT();
+    return (_jsx(ButtonGroup, { className: "share-preview__devices", variant: "minimal", children: SHARE_PREVIEW_DEVICES.map((key) => {
+            const size = sharePreviewSize(key, windowSize);
+            const name = t(`share.device.${key}`);
+            const label = t('share.deviceSize', {
+                name,
+                width: size.width,
+                height: size.height,
+            });
+            return (_jsx(Button, { icon: DEVICE_ICONS[key], active: key === value, title: label, "aria-label": label, onClick: () => {
+                    onChange(key);
+                } }, key));
+        }) }));
+}
+//# sourceMappingURL=SharePreviewDevices.js.map

package/lib/share/ui/SharePreviewDevices.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SharePreviewDevices.js","sourceRoot":"","sources":["../../../src/share/ui/SharePreviewDevices.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGxD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAE3E;;;;GAIG;AACH,MAAM,YAAY,GAA4C;IAC5D,MAAM,EAAE,aAAa;IACrB,MAAM,EAAE,cAAc;IACtB,MAAM,EAAE,SAAS;IACjB,EAAE,EAAE,cAAc;CACnB,CAAC;AAWF;;;;;;;GAOG;AACH,MAAM,UAAU,mBAAmB,CACjC,KAA+B;IAE/B,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAC9C,MAAM,CAAC,GAAG,UAAU,EAAE,CAAC;IAEvB,OAAO,CACL,KAAC,WAAW,IAAC,SAAS,EAAC,wBAAwB,EAAC,OAAO,EAAC,SAAS,YAC9D,qBAAqB,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;YACjC,MAAM,IAAI,GAAG,gBAAgB,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;YAC/C,MAAM,IAAI,GAAG,CAAC,CAAC,gBAAgB,GAAG,EAAE,CAAC,CAAC;YACtC,MAAM,KAAK,GAAG,CAAC,CAAC,kBAAkB,EAAE;gBAClC,IAAI;gBACJ,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,MAAM,EAAE,IAAI,CAAC,MAAM;aACpB,CAAC,CAAC;YAEH,OAAO,CACL,KAAC,MAAM,IAEL,IAAI,EAAE,YAAY,CAAC,GAAG,CAAC,EACvB,MAAM,EAAE,GAAG,KAAK,KAAK,EACrB,KAAK,EAAE,KAAK,gBACA,KAAK,EACjB,OAAO,EAAE,GAAG,EAAE;oBACZ,QAAQ,CAAC,GAAG,CAAC,CAAC;gBAChB,CAAC,IAPI,GAAG,CAQR,CACH,CAAC;QACJ,CAAC,CAAC,GACU,CACf,CAAC;AACJ,CAAC"}

package/lib/share/ui/index.d.ts

@@ -6,5 +6,6 @@ export { PagePart } from './PagePart.tsx';
 export type { ShareButtonProps, ShareButtonVariant } from './ShareButton.tsx';
 export { ShareButton } from './ShareButton.tsx';
 export type { ShareDialogProps } from './ShareDialog.tsx';
+export type { SharePartDescriptions } from './SharePartRow.tsx';
 export { ShareDialog } from './ShareDialog.tsx';
 //# sourceMappingURL=index.d.ts.map

package/lib/share/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/share/ui/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAC1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,YAAY,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/share/ui/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAC1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,YAAY,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC"}

package/lib/share/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/share/ui/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA2B,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAgB,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/share/ui/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA2B,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAgB,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAC;AAGhD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAC"}

package/lib/share/ui/shareMarking.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Whether the page is being looked at through a share dialog's preview, and so
+ * marks each of its parts in the DOM for the dialog to find.
+ *
+ * A page nobody is framing marks nothing: the marker is a wrapper, and a
+ * wrapper changes what a `>` selector in a site's own stylesheet matches.
+ */
+export declare const ShareMarkingContext: import("react").Context<boolean>;
+/**
+ * Whether this page marks its parts for a share dialog looking at it.
+ * @returns Whether the markers are rendered.
+ */
+export declare function useShareMarking(): boolean;
+//# sourceMappingURL=shareMarking.d.ts.map

package/lib/share/ui/shareMarking.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shareMarking.d.ts","sourceRoot":"","sources":["../../../src/share/ui/shareMarking.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,kCAAuB,CAAC;AAExD;;;GAGG;AACH,wBAAgB,eAAe,IAAI,OAAO,CAEzC"}