@panneau/app 5.0.0-alpha.4 → 5.0.0-alpha.6

package/dist/pages/ItemPanel.d.ts

@@ -0,0 +1,17 @@
+import type { ResolvedResource } from '@panneau/core';
+export interface ItemPanelProps {
+    resolved: ResolvedResource;
+    basePath: string;
+    locale: string;
+    id: string;
+    /** Where closing the panel goes: the list, with its query. */
+    closeHref: string;
+}
+/**
+ * The details of an item next to its list (the show route): its values with the displays of the
+ * lists, a link to edit it, and the `link` actions of the resource, such as its page on the site.
+ * A resource with a `features.preview` gets a preview tab first: a component of a plugin, or its
+ * page on the site. The panel can be widened, for previews, and remembers it. Escape closes it.
+ */
+export declare function ItemPanel({ resolved, basePath, locale, id, closeHref }: ItemPanelProps): import("react").JSX.Element;
+//# sourceMappingURL=ItemPanel.d.ts.map

package/dist/pages/ItemPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemPanel.d.ts","sourceRoot":"","sources":["../../src/pages/ItemPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAiCtD,MAAM,WAAW,cAAc;IAC3B,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,8DAA8D;IAC9D,SAAS,EAAE,MAAM,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,cAAc,+BAgJtF"}

package/dist/pages/ItemPanel.js

@@ -0,0 +1,370 @@
+import { navigate } from "../location.js";
+import { routePath } from "../routes.js";
+import { useRecordRecentItem } from "../recentItems.js";
+import { getItemTitle } from "./itemTitle.js";
+import { cx } from "../cx.js";
+import { usePreference } from "../preferences.js";
+import ItemPanel_module_default from "./ItemPanel.module.js";
+import { ItemPreview } from "./ItemPreview.js";
+import { useEffect, useRef } from "react";
+import { c } from "react/compiler-runtime";
+import { useResourceItem } from "@panneau/data/query";
+import { appMessages } from "@panneau/intl";
+import { Alert, Button, Heading, Icon, IconButton, Spinner, Tab, TabList, TabPanel, Tabs, usePanneauIntl } from "@panneau/ui";
+import { Link } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ExternalLink, Maximize2, Minimize2, Pencil, X } from "lucide-react";
+import { ItemDetails, getActionHref, isAllowedOn } from "@panneau/lists";
+//#region src/pages/ItemPanel.tsx
+/** Fields that hold other fields, shown in the form rather than in the details. */
+var NESTED_TYPES = /* @__PURE__ */ new Set(["group", "repeater"]);
+var SIZES = ["normal", "wide"];
+var TABS = ["preview", "details"];
+/**
+* The details of an item next to its list (the show route): its values with the displays of the
+* lists, a link to edit it, and the `link` actions of the resource, such as its page on the site.
+* A resource with a `features.preview` gets a preview tab first: a component of a plugin, or its
+* page on the site. The panel can be widened, for previews, and remembers it. Escape closes it.
+*/
+function ItemPanel(t0) {
+	const $ = c(86);
+	const { resolved, basePath, locale, id, closeHref } = t0;
+	const intl = usePanneauIntl();
+	const { resource } = resolved;
+	const { data: item, isError, refetch } = useResourceItem(resource.id, id);
+	const panel = useRef(null);
+	const [size, setSize] = usePreference("item-panel-size", SIZES);
+	const [tab, setTab] = usePreference("item-panel-tab", TABS);
+	const wide = size === "wide";
+	const hasPreview = (resource.features?.preview ?? null) !== null;
+	const singular = resource.label.singular;
+	let t1;
+	if ($[0] !== intl || $[1] !== singular) {
+		t1 = intl.formatMessage(appMessages.itemPanel, { resource: singular });
+		$[0] = intl;
+		$[1] = singular;
+		$[2] = t1;
+	} else t1 = $[2];
+	const label = t1;
+	let t2;
+	if ($[3] !== item || $[4] !== locale || $[5] !== resource.itemTitle) {
+		t2 = getItemTitle(item, resource.itemTitle, locale) ?? (item !== void 0 ? item.id : "");
+		$[3] = item;
+		$[4] = locale;
+		$[5] = resource.itemTitle;
+		$[6] = t2;
+	} else t2 = $[6];
+	const title = t2;
+	let t3;
+	if ($[7] !== id || $[8] !== item || $[9] !== resource.id || $[10] !== title) {
+		t3 = item !== void 0 ? {
+			resource: resource.id,
+			id,
+			title
+		} : null;
+		$[7] = id;
+		$[8] = item;
+		$[9] = resource.id;
+		$[10] = title;
+		$[11] = t3;
+	} else t3 = $[11];
+	useRecordRecentItem(basePath, t3);
+	let t4;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = () => {
+			panel.current?.focus();
+		};
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== id) {
+		t5 = [id];
+		$[13] = id;
+		$[14] = t5;
+	} else t5 = $[14];
+	useEffect(t4, t5);
+	let t6;
+	if ($[15] !== resource.fields) {
+		t6 = resource.fields.filter(_temp).map(_temp2);
+		$[15] = resource.fields;
+		$[16] = t6;
+	} else t6 = $[16];
+	const columns = t6;
+	let t7;
+	if ($[17] !== basePath || $[18] !== closeHref || $[19] !== columns || $[20] !== hasPreview || $[21] !== id || $[22] !== intl || $[23] !== isError || $[24] !== item || $[25] !== label || $[26] !== locale || $[27] !== refetch || $[28] !== resource || $[29] !== setSize || $[30] !== setTab || $[31] !== singular || $[32] !== tab || $[33] !== title || $[34] !== wide) {
+		let t8;
+		if ($[36] !== item) {
+			t8 = (action) => {
+				if (item === void 0 || !action.scope.includes("item") || !isAllowedOn(action, item)) return [];
+				const href = getActionHref(action, item);
+				return href !== null ? [{
+					action,
+					href
+				}] : [];
+			};
+			$[36] = item;
+			$[37] = t8;
+		} else t8 = $[37];
+		const links = (resource.actions ?? []).flatMap(t8);
+		let t9;
+		if ($[38] !== closeHref) {
+			t9 = (event) => {
+				if (event.key === "Escape" && !event.defaultPrevented) {
+					event.preventDefault();
+					navigate(closeHref);
+				}
+			};
+			$[38] = closeHref;
+			$[39] = t9;
+		} else t9 = $[39];
+		const onKeyDown = t9;
+		let content;
+		if (item === void 0) {
+			let t10;
+			if ($[40] !== intl || $[41] !== isError || $[42] !== refetch || $[43] !== singular) {
+				t10 = isError ? /* @__PURE__ */ jsxs(Alert, {
+					tone: "danger",
+					children: [/* @__PURE__ */ jsx("p", { children: intl.formatMessage(appMessages.itemLoadError, { resource: singular }) }), /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						onPress: () => void refetch(),
+						children: intl.formatMessage(appMessages.retry)
+					})]
+				}) : /* @__PURE__ */ jsx(Spinner, { showLabel: true });
+				$[40] = intl;
+				$[41] = isError;
+				$[42] = refetch;
+				$[43] = singular;
+				$[44] = t10;
+			} else t10 = $[44];
+			content = t10;
+		} else {
+			let t10;
+			if ($[45] !== columns || $[46] !== item) {
+				t10 = /* @__PURE__ */ jsx(ItemDetails, {
+					item,
+					columns
+				});
+				$[45] = columns;
+				$[46] = item;
+				$[47] = t10;
+			} else t10 = $[47];
+			const details = t10;
+			let t11;
+			if ($[48] !== details || $[49] !== hasPreview || $[50] !== intl || $[51] !== item || $[52] !== label || $[53] !== locale || $[54] !== resource || $[55] !== setTab || $[56] !== tab || $[57] !== title) {
+				t11 = hasPreview ? /* @__PURE__ */ jsxs(Tabs, {
+					selectedKey: tab ?? "preview",
+					onSelectionChange: (key) => setTab(key === "details" ? "details" : "preview"),
+					className: ItemPanel_module_default.tabs,
+					children: [
+						/* @__PURE__ */ jsxs(TabList, {
+							"aria-label": label,
+							children: [/* @__PURE__ */ jsx(Tab, {
+								id: "preview",
+								children: intl.formatMessage(appMessages.preview)
+							}), /* @__PURE__ */ jsx(Tab, {
+								id: "details",
+								children: intl.formatMessage(appMessages.details)
+							})]
+						}),
+						/* @__PURE__ */ jsx(TabPanel, {
+							id: "preview",
+							className: ItemPanel_module_default.tabPanel,
+							children: /* @__PURE__ */ jsx(ItemPreview, {
+								resource,
+								item,
+								title,
+								locale
+							})
+						}),
+						/* @__PURE__ */ jsx(TabPanel, {
+							id: "details",
+							className: ItemPanel_module_default.tabPanel,
+							children: details
+						})
+					]
+				}) : details;
+				$[48] = details;
+				$[49] = hasPreview;
+				$[50] = intl;
+				$[51] = item;
+				$[52] = label;
+				$[53] = locale;
+				$[54] = resource;
+				$[55] = setTab;
+				$[56] = tab;
+				$[57] = title;
+				$[58] = t11;
+			} else t11 = $[58];
+			content = t11;
+		}
+		const t10 = wide && ItemPanel_module_default.wide;
+		let t11;
+		if ($[59] !== t10) {
+			t11 = cx(ItemPanel_module_default.panel, t10);
+			$[59] = t10;
+			$[60] = t11;
+		} else t11 = $[60];
+		let t12;
+		if ($[61] !== title) {
+			t12 = /* @__PURE__ */ jsx(Heading, {
+				level: 2,
+				className: ItemPanel_module_default.title,
+				children: title
+			});
+			$[61] = title;
+			$[62] = t12;
+		} else t12 = $[62];
+		const t13 = wide ? Minimize2 : Maximize2;
+		let t14;
+		if ($[63] !== intl || $[64] !== wide) {
+			t14 = intl.formatMessage(wide ? appMessages.narrowPanel : appMessages.widenPanel);
+			$[63] = intl;
+			$[64] = wide;
+			$[65] = t14;
+		} else t14 = $[65];
+		let t15;
+		if ($[66] !== setSize || $[67] !== wide) {
+			t15 = () => setSize(wide ? "normal" : "wide");
+			$[66] = setSize;
+			$[67] = wide;
+			$[68] = t15;
+		} else t15 = $[68];
+		let t16;
+		if ($[69] !== t13 || $[70] !== t14 || $[71] !== t15) {
+			t16 = /* @__PURE__ */ jsx(IconButton, {
+				icon: t13,
+				label: t14,
+				size: "sm",
+				className: ItemPanel_module_default.widen,
+				onPress: t15
+			});
+			$[69] = t13;
+			$[70] = t14;
+			$[71] = t15;
+			$[72] = t16;
+		} else t16 = $[72];
+		let t17;
+		if ($[73] !== intl) {
+			t17 = intl.formatMessage(appMessages.closePanel);
+			$[73] = intl;
+			$[74] = t17;
+		} else t17 = $[74];
+		let t18;
+		if ($[75] !== closeHref) {
+			t18 = () => navigate(closeHref);
+			$[75] = closeHref;
+			$[76] = t18;
+		} else t18 = $[76];
+		let t19;
+		if ($[77] !== t17 || $[78] !== t18) {
+			t19 = /* @__PURE__ */ jsx(IconButton, {
+				icon: X,
+				label: t17,
+				size: "sm",
+				onPress: t18
+			});
+			$[77] = t17;
+			$[78] = t18;
+			$[79] = t19;
+		} else t19 = $[79];
+		let t20;
+		if ($[80] !== t16 || $[81] !== t19) {
+			t20 = /* @__PURE__ */ jsxs("div", {
+				className: ItemPanel_module_default.headerButtons,
+				children: [t16, t19]
+			});
+			$[80] = t16;
+			$[81] = t19;
+			$[82] = t20;
+		} else t20 = $[82];
+		let t21;
+		if ($[83] !== t12 || $[84] !== t20) {
+			t21 = /* @__PURE__ */ jsxs("header", {
+				className: ItemPanel_module_default.header,
+				children: [t12, t20]
+			});
+			$[83] = t12;
+			$[84] = t20;
+			$[85] = t21;
+		} else t21 = $[85];
+		t7 = /* @__PURE__ */ jsxs("section", {
+			ref: panel,
+			tabIndex: -1,
+			"aria-label": label,
+			className: t11,
+			"data-wide": wide || void 0,
+			onKeyDown,
+			children: [
+				t21,
+				item !== void 0 ? /* @__PURE__ */ jsxs("div", {
+					className: ItemPanel_module_default.actions,
+					children: [item.abilities.update !== false ? /* @__PURE__ */ jsxs(Link, {
+						href: routePath({
+							name: "resource.edit",
+							resource: resource.id,
+							id
+						}, basePath),
+						className: ItemPanel_module_default.action,
+						children: [/* @__PURE__ */ jsx(Icon, {
+							icon: Pencil,
+							size: "sm"
+						}), intl.formatMessage(appMessages.editItem)]
+					}) : null, links.map(_temp3)]
+				}) : null,
+				/* @__PURE__ */ jsx("div", {
+					className: ItemPanel_module_default.body,
+					children: content
+				})
+			]
+		});
+		$[17] = basePath;
+		$[18] = closeHref;
+		$[19] = columns;
+		$[20] = hasPreview;
+		$[21] = id;
+		$[22] = intl;
+		$[23] = isError;
+		$[24] = item;
+		$[25] = label;
+		$[26] = locale;
+		$[27] = refetch;
+		$[28] = resource;
+		$[29] = setSize;
+		$[30] = setTab;
+		$[31] = singular;
+		$[32] = tab;
+		$[33] = title;
+		$[34] = wide;
+		$[35] = t7;
+	} else t7 = $[35];
+	return t7;
+}
+function _temp3(t0) {
+	const { action: action_0, href: href_0 } = t0;
+	const external = /^https?:\/\//.test(href_0);
+	return /* @__PURE__ */ jsxs(Link, {
+		href: href_0,
+		target: external ? "_blank" : void 0,
+		rel: external ? "noopener noreferrer" : void 0,
+		className: ItemPanel_module_default.action,
+		children: [external ? /* @__PURE__ */ jsx(Icon, {
+			icon: ExternalLink,
+			size: "sm"
+		}) : null, action_0.label]
+	}, action_0.id);
+}
+function _temp2(field_0) {
+	return {
+		id: field_0.name,
+		field: field_0,
+		label: field_0.label ?? field_0.name,
+		display: field_0.display ?? field_0.type
+	};
+}
+function _temp(field) {
+	return !NESTED_TYPES.has(field.type);
+}
+//#endregion
+export { ItemPanel };
+
+//# sourceMappingURL=ItemPanel.js.map

package/dist/pages/ItemPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemPanel.js","names":["content","item","columns","label","resource","title","locale","details","X","panel","onKeyDown","Pencil","href","action","ExternalLink","field","_c","styles"],"sources":["../../src/pages/ItemPanel.tsx"],"sourcesContent":["import { ExternalLink, Maximize2, Minimize2, Pencil, X } from 'lucide-react';\nimport { type KeyboardEvent, useEffect, useRef } from 'react';\nimport { Link } from 'react-aria-components';\n\nimport type { ResolvedResource } from '@panneau/core';\nimport { useResourceItem } from '@panneau/data/query';\nimport { appMessages } from '@panneau/intl';\nimport { ItemDetails, type ListColumn, getActionHref, isAllowedOn } from '@panneau/lists';\nimport {\n    Alert,\n    Button,\n    Heading,\n    Icon,\n    IconButton,\n    Spinner,\n    Tab,\n    TabList,\n    TabPanel,\n    Tabs,\n    usePanneauIntl,\n} from '@panneau/ui';\n\nimport { cx } from '../cx';\nimport { navigate } from '../location';\nimport { usePreference } from '../preferences';\nimport { useRecordRecentItem } from '../recentItems';\nimport { routePath } from '../routes';\nimport styles from './ItemPanel.module.css';\nimport { ItemPreview } from './ItemPreview';\nimport { getItemTitle } from './itemTitle';\n\n/** Fields that hold other fields, shown in the form rather than in the details. */\nconst NESTED_TYPES = new Set(['group', 'repeater']);\n\nconst SIZES = ['normal', 'wide'] as const;\nconst TABS = ['preview', 'details'] as const;\n\nexport interface ItemPanelProps {\n    resolved: ResolvedResource;\n    basePath: string;\n    locale: string;\n    id: string;\n    /** Where closing the panel goes: the list, with its query. */\n    closeHref: string;\n}\n\n/**\n * The details of an item next to its list (the show route): its values with the displays of the\n * lists, a link to edit it, and the `link` actions of the resource, such as its page on the site.\n * A resource with a `features.preview` gets a preview tab first: a component of a plugin, or its\n * page on the site. The panel can be widened, for previews, and remembers it. Escape closes it.\n */\nexport function ItemPanel({ resolved, basePath, locale, id, closeHref }: ItemPanelProps) {\n    const intl = usePanneauIntl();\n    const { resource } = resolved;\n    const { data: item, isError, refetch } = useResourceItem(resource.id, id);\n    const panel = useRef<HTMLElement>(null);\n    const [size, setSize] = usePreference('item-panel-size', SIZES);\n    const [tab, setTab] = usePreference('item-panel-tab', TABS);\n    const wide = size === 'wide';\n    const hasPreview = (resource.features?.preview ?? null) !== null;\n    const singular = resource.label.singular;\n    const label = intl.formatMessage(appMessages.itemPanel, { resource: singular });\n    const title =\n        getItemTitle(item, resource.itemTitle, locale) ?? (item !== undefined ? item.id : '');\n    useRecordRecentItem(basePath, item !== undefined ? { resource: resource.id, id, title } : null);\n\n    // Focus moves to the panel when it opens or shows another item.\n    useEffect(() => {\n        panel.current?.focus();\n    }, [id]);\n\n    const columns: ListColumn[] = resource.fields\n        .filter((field) => !NESTED_TYPES.has(field.type))\n        .map((field) => ({\n            id: field.name,\n            field,\n            label: field.label ?? field.name,\n            display: field.display ?? field.type,\n        }));\n    const links = (resource.actions ?? []).flatMap((action) => {\n        if (item === undefined || !action.scope.includes('item') || !isAllowedOn(action, item)) {\n            return [];\n        }\n        const href = getActionHref(action, item);\n        return href !== null ? [{ action, href }] : [];\n    });\n\n    const onKeyDown = (event: KeyboardEvent) => {\n        if (event.key === 'Escape' && !event.defaultPrevented) {\n            event.preventDefault();\n            navigate(closeHref);\n        }\n    };\n\n    let content;\n    if (item === undefined) {\n        content = isError ? (\n            <Alert tone=\"danger\">\n                <p>{intl.formatMessage(appMessages.itemLoadError, { resource: singular })}</p>\n                <Button size=\"sm\" onPress={() => void refetch()}>\n                    {intl.formatMessage(appMessages.retry)}\n                </Button>\n            </Alert>\n        ) : (\n            <Spinner showLabel />\n        );\n    } else {\n        const details = <ItemDetails item={item} columns={columns} />;\n        content = hasPreview ? (\n            <Tabs\n                selectedKey={tab ?? 'preview'}\n                onSelectionChange={(key) => setTab(key === 'details' ? 'details' : 'preview')}\n                className={styles.tabs}\n            >\n                <TabList aria-label={label}>\n                    <Tab id=\"preview\">{intl.formatMessage(appMessages.preview)}</Tab>\n                    <Tab id=\"details\">{intl.formatMessage(appMessages.details)}</Tab>\n                </TabList>\n                <TabPanel id=\"preview\" className={styles.tabPanel}>\n                    <ItemPreview resource={resource} item={item} title={title} locale={locale} />\n                </TabPanel>\n                <TabPanel id=\"details\" className={styles.tabPanel}>\n                    {details}\n                </TabPanel>\n            </Tabs>\n        ) : (\n            details\n        );\n    }\n\n    return (\n        <section\n            ref={panel}\n            tabIndex={-1}\n            aria-label={label}\n            className={cx(styles.panel, wide && styles.wide)}\n            data-wide={wide || undefined}\n            onKeyDown={onKeyDown}\n        >\n            <header className={styles.header}>\n                <Heading level={2} className={styles.title}>\n                    {title}\n                </Heading>\n                <div className={styles.headerButtons}>\n                    <IconButton\n                        icon={wide ? Minimize2 : Maximize2}\n                        label={intl.formatMessage(\n                            wide ? appMessages.narrowPanel : appMessages.widenPanel,\n                        )}\n                        size=\"sm\"\n                        className={styles.widen}\n                        onPress={() => setSize(wide ? 'normal' : 'wide')}\n                    />\n                    <IconButton\n                        icon={X}\n                        label={intl.formatMessage(appMessages.closePanel)}\n                        size=\"sm\"\n                        onPress={() => navigate(closeHref)}\n                    />\n                </div>\n            </header>\n            {item !== undefined ? (\n                <div className={styles.actions}>\n                    {item.abilities.update !== false ? (\n                        <Link\n                            href={routePath(\n                                { name: 'resource.edit', resource: resource.id, id },\n                                basePath,\n                            )}\n                            className={styles.action}\n                        >\n                            <Icon icon={Pencil} size=\"sm\" />\n                            {intl.formatMessage(appMessages.editItem)}\n                        </Link>\n                    ) : null}\n                    {links.map(({ action, href }) => {\n                        const external = /^https?:\\/\\//.test(href);\n                        return (\n                            <Link\n                                key={action.id}\n                                href={href}\n                                target={external ? '_blank' : undefined}\n                                rel={external ? 'noopener noreferrer' : undefined}\n                                className={styles.action}\n                            >\n                                {external ? <Icon icon={ExternalLink} size=\"sm\" /> : null}\n                                {action.label}\n                            </Link>\n                        );\n                    })}\n                </div>\n            ) : null}\n            <div className={styles.body}>{content}</div>\n        </section>\n    );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgCA,IAAM,+BAAe,IAAI,IAAI,CAAC,SAAS,UAAU,CAAC;AAElD,IAAM,QAAQ,CAAC,UAAU,MAAM;AAC/B,IAAM,OAAO,CAAC,WAAW,SAAS;;;;;;;AAiBlC,SAAO,UAAA,IAAA;CAAA,MAAA,IAAAgB,EAAA,EAAA;CAAmB,MAAA,EAAA,UAAA,UAAA,QAAA,IAAA,cAAA;CACtB,MAAA,OAAa,eAAe;CAC5B,MAAA,EAAA,aAAqB;CACrB,MAAA,EAAA,MAAA,MAAA,SAAA,YAAyC,gBAAgB,SAAQ,IAAK,EAAE;CACxE,MAAA,QAAc,OAAoB,IAAI;CACtC,MAAA,CAAA,MAAA,WAAwB,cAAc,mBAAmB,KAAK;CAC9D,MAAA,CAAA,KAAA,UAAsB,cAAc,kBAAkB,IAAI;CAC1D,MAAA,OAAa,SAAS;CACtB,MAAA,cAAoB,SAAQ,UAAkB,WAA1B,UAAwC;CAC5D,MAAA,WAAiB,SAAQ,MAAM;CAAU,IAAA;CAAA,IAAA,EAAA,OAAA,QAAA,EAAA,OAAA,UAAA;EAC3B,KAAA,KAAI,cAAe,YAAW,WAAY,EAAA,UAAY,SAAS,CAAC;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAA/E,MAAA,QAAc;CAAkE,IAAA;CAAA,IAAA,EAAA,OAAA,QAAA,EAAA,OAAA,UAAA,EAAA,OAAA,SAAA,WAAA;EAE5E,KAAA,aAAa,MAAM,SAAQ,WAAY,MAA6C,MAAjC,SAAS,KAAA,IAAY,KAAI,KAAzB;EAAkC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA,SAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CADzF,MAAA,QACI;CAAsF,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,OAAA,QAAA,EAAA,OAAA,SAAA,MAAA,EAAA,QAAA,OAAA;EAC5D,KAAA,SAAS,KAAA,IAAT;GAAA,UAAiC,SAAQ;GAAG;GAAA;EAAmB,IAA/D;EAAgE,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA,SAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAA9F,oBAAoB,UAAU,EAAgE;CAAC,IAAA;CAAA,IAAA,EAAA,QAAA,OAAA,IAAA,2BAAA,GAAA;EAGrF,WAAA;GACN,MAAK,SAAe,MAAC;EAAC;EACzB,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,IAAA;EAAE,KAAA,CAAC,EAAE;EAAC,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAFP,UAAU,IAEP,EAAI;CAAC,IAAA;CAAA,IAAA,EAAA,QAAA,SAAA,QAAA;EAEsB,KAAA,SAAQ,OAAO,OACjC,KAAwC,CAAC,CAAA,IAC5C,MAKH;EAAC,EAAA,MAAA,SAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAPP,MAAA,UAA8B;CAOtB,IAAA;CAAA,IAAA,EAAA,QAAA,YAAA,EAAA,QAAA,aAAA,EAAA,QAAA,WAAA,EAAA,QAAA,cAAA,EAAA,QAAA,MAAA,EAAA,QAAA,QAAA,EAAA,QAAA,WAAA,EAAA,QAAA,QAAA,EAAA,QAAA,SAAA,EAAA,QAAA,UAAA,EAAA,QAAA,WAAA,EAAA,QAAA,YAAA,EAAA,QAAA,WAAA,EAAA,QAAA,UAAA,EAAA,QAAA,YAAA,EAAA,QAAA,OAAA,EAAA,QAAA,SAAA,EAAA,QAAA,MAAA;EAAA,IAAA;EAAA,IAAA,EAAA,QAAA,MAAA;GACuC,MAAA,WAAA;IAC3C,IAAI,SAAS,KAAA,KAAT,CAAuB,OAAM,MAAM,SAAU,MAAM,KAAnD,CAAyD,YAAY,QAAQ,IAAI,GAAC,OAC3E,CAAA;IAEX,MAAA,OAAa,cAAc,QAAQ,IAAI;IAAE,OAClC,SAAS,OAAT,CAAiB;KAAA;KAAA;IAAe,CAAC,IAAjC,CAAA;GAAuC;GACjD,EAAA,MAAA;GAAA,EAAA,MAAA;EAAA,OAAA,KAAA,EAAA;EAND,MAAA,SAAe,SAAQ,WAAR,CAAA,EAAA,CAAsB,QAAU,EAM9C;EAAE,IAAA;EAAA,IAAA,EAAA,QAAA,WAAA;GAEe,MAAA,UAAA;IACd,IAAI,MAAK,QAAS,YAAd,CAA2B,MAAK,kBAAiB;KACjD,MAAK,eAAgB;KACrB,SAAS,SAAS;IAAC;GACtB;GACJ,EAAA,MAAA;GAAA,EAAA,MAAA;EAAA,OAAA,KAAA,EAAA;EALD,MAAA,YAAkB;EAOdhB,IAAA;EACJ,IAAI,SAAS,KAAA,GAAS;GAAA,IAAA;GAAA,IAAA,EAAA,QAAA,QAAA,EAAA,QAAA,WAAA,EAAA,QAAA,WAAA,EAAA,QAAA,UAAA;IACR,MAAA,UACN,qBAAC,OAAD;KAAY,MAAA;KAAZ,UAAA,CACI,oBAAA,KAAA,EAAA,UAAI,KAAI,cAAe,YAAW,eAAgB,EAAA,UAAY,SAAS,CAAC,EAAM,CAAA,GAC9E,oBAAC,QAAD;MAAa,MAAA;MAAc,eAAM,KAAK,QAAQ;MACzC,UAAA,KAAI,cAAe,YAAW,KAAM;KADlC,CAAA,CAFL;IAON,CAAA,IAAA,oBAAC,SAAD,EAAS,WAAA,KAAS,CAAA;IACrB,EAAA,MAAA;IAAA,EAAA,MAAA;IAAA,EAAA,MAAA;IAAA,EAAA,MAAA;IAAA,EAAA,MAAA;GAAA,OAAA,MAAA,EAAA;GATD,UAAUA;EAAH,OAAA;GAAA,IAAA;GAAA,IAAA,EAAA,QAAA,WAAA,EAAA,QAAA,MAAA;IAWS,MAAA,oBAAC,aAAD;KAAmB;KAAe;IAAO,CAAA;IAAI,EAAA,MAAA;IAAA,EAAA,MAAA;IAAA,EAAA,MAAA;GAAA,OAAA,MAAA,EAAA;GAA7D,MAAA,UAAgB;GAA8C,IAAA;GAAA,IAAA,EAAA,QAAA,WAAA,EAAA,QAAA,cAAA,EAAA,QAAA,QAAA,EAAA,QAAA,QAAA,EAAA,QAAA,SAAA,EAAA,QAAA,UAAA,EAAA,QAAA,YAAA,EAAA,QAAA,UAAA,EAAA,QAAA,OAAA,EAAA,QAAA,OAAA;IACpD,MAAA,aACN,qBAAC,MAAD;KACiB,aAAA,OAAA;KACM,oBAAA,QAAS,OAAO,QAAQ,YAAR,YAAA,SAAyC;KACjE,WAAAiB,yBAAM;KAHrB,UAAA;MAKI,qBAAC,SAAD;OAAqBd,cAAA;OAArB,UAAA,CACI,oBAAC,KAAD;QAAQ,IAAA;QAAW,UAAA,KAAI,cAAe,YAAW,OAAQ;OAArD,CAAA,GACJ,oBAAC,KAAD;QAAQ,IAAA;QAAW,UAAA,KAAI,cAAe,YAAW,OAAQ;OAArD,CAAA,CAFA;;MAIR,oBAAC,UAAD;OAAa,IAAA;OAAqB,WAAAc,yBAAM;OACpC,UAAA,oBAAC,aAAD;QAAuB;QAAgB;QAAa;QAAe;OAAM,CAAA;MADpE,CAAA;MAGT,oBAAC,UAAD;OAAa,IAAA;OAAqB,WAAAA,yBAAM;OACnC,UAAA;MADI,CAAA;KAZR;IADC,CAAA,IAAA;IAmBT,EAAA,MAAA;IAAA,EAAA,MAAA;IAAA,EAAA,MAAA;IAAA,EAAA,MAAA;IAAA,EAAA,MAAA;IAAA,EAAA,MAAA;IAAA,EAAA,MAAA;IAAA,EAAA,MAAA;IAAA,EAAA,MAAA;IAAA,EAAA,MAAA;IAAA,EAAA,MAAA;GAAA,OAAA,MAAA,EAAA;GAnBD,UAAUjB;EAAH;EA2ByB,MAAA,MAAA,QAAQiB,yBAAM;EAAK,IAAA;EAAA,IAAA,EAAA,QAAA,KAAA;GAApC,MAAA,GAAGA,yBAAM,OAAQ,GAAmB;GAAC,EAAA,MAAA;GAAA,EAAA,MAAA;EAAA,OAAA,MAAA,EAAA;EAAA,IAAA;EAAA,IAAA,EAAA,QAAA,OAAA;GAK5C,MAAA,oBAAC,SAAD;IAAgB,OAAA;IAAc,WAAAA,yBAAM;IAC/B,UAAA;GADG,CAAA;GAEE,EAAA,MAAA;GAAA,EAAA,MAAA;EAAA,OAAA,MAAA,EAAA;EAGI,MAAA,MAAA,OAAA,YAAA;EAA4B,IAAA;EAAA,IAAA,EAAA,QAAA,QAAA,EAAA,QAAA,MAAA;GAC3B,MAAA,KAAI,cACP,OAAO,YAAW,cAAe,YAAW,UAChD;GAAC,EAAA,MAAA;GAAA,EAAA,MAAA;GAAA,EAAA,MAAA;EAAA,OAAA,MAAA,EAAA;EAAA,IAAA;EAAA,IAAA,EAAA,QAAA,WAAA,EAAA,QAAA,MAAA;GAGQ,YAAM,QAAQ,OAAA,WAAA,MAAwB;GAAC,EAAA,MAAA;GAAA,EAAA,MAAA;GAAA,EAAA,MAAA;EAAA,OAAA,MAAA,EAAA;EAAA,IAAA;EAAA,IAAA,EAAA,QAAA,OAAA,EAAA,QAAA,OAAA,EAAA,QAAA,KAAA;GAPpD,MAAA,oBAAC,YAAD;IACU,MAAA;IACC,OAAA;IAGF,MAAA;IACM,WAAAA,yBAAM;IACR,SAAA;GAAuC,CAAA;GAClD,EAAA,MAAA;GAAA,EAAA,MAAA;GAAA,EAAA,MAAA;GAAA,EAAA,MAAA;EAAA,OAAA,MAAA,EAAA;EAAA,IAAA;EAAA,IAAA,EAAA,QAAA,MAAA;GAGS,MAAA,KAAI,cAAe,YAAW,UAAW;GAAC,EAAA,MAAA;GAAA,EAAA,MAAA;EAAA,OAAA,MAAA,EAAA;EAAA,IAAA;EAAA,IAAA,EAAA,QAAA,WAAA;GAExC,YAAM,SAAS,SAAS;GAAC,EAAA,MAAA;GAAA,EAAA,MAAA;EAAA,OAAA,MAAA,EAAA;EAAA,IAAA;EAAA,IAAA,EAAA,QAAA,OAAA,EAAA,QAAA,KAAA;GAJtC,MAAA,oBAAC,YAAD;IACUT,MAAA;IACC,OAAA;IACF,MAAA;IACI,SAAA;GAAyB,CAAA;GACpC,EAAA,MAAA;GAAA,EAAA,MAAA;GAAA,EAAA,MAAA;EAAA,OAAA,MAAA,EAAA;EAAA,IAAA;EAAA,IAAA,EAAA,QAAA,OAAA,EAAA,QAAA,KAAA;GAfN,MAAA,qBAAA,OAAA;IAAgB,WAAAS,yBAAM;IAAtB,UAAA,CACI,KASA,GAME;;GAAA,EAAA,MAAA;GAAA,EAAA,MAAA;GAAA,EAAA,MAAA;EAAA,OAAA,MAAA,EAAA;EAAA,IAAA;EAAA,IAAA,EAAA,QAAA,OAAA,EAAA,QAAA,KAAA;GApBV,MAAA,qBAAA,UAAA;IAAmB,WAAAA,yBAAM;IAAzB,UAAA,CACI,KAGA,GAiBK;;GAAA,EAAA,MAAA;GAAA,EAAA,MAAA;GAAA,EAAA,MAAA;EAAA,OAAA,MAAA,EAAA;EA7Bb,KAAA,qBAAA,WAAA;GACSR,KAAA;GACK,UAAA;GACEN,cAAA;GACD,WAAA;GACA,aAAA,QAAA,KAAA;GACA;GANf,UAAA;IAQI;IAsBC,SAAS,KAAA,IACN,qBAAA,OAAA;KAAgB,WAAAc,yBAAM;KAAtB,UAAA,CACK,KAAI,UAAU,WAAY,QACvB,qBAAC,MAAD;MACU,MAAA,UACF;OAAA,MAAQ;OAAe,UAAY,SAAQ;OAAG;MAAK,GACnD,QACJ;MACW,WAAAA,yBAAM;MALrB,UAAA,CAOI,oBAAC,MAAD;OAAYN,MAAA;OAAa,MAAA;MAAI,CAAA,GAC5B,KAAI,cAAe,YAAW,QAAS,CARvC;KADR,CAAA,IAAA,MAYA,MAAK,IAAK,MAcV,CACC;IA7BT,CAAA,IAAA;IA+BD,oBAAA,OAAA;KAAgB,WAAAM,yBAAM;KAAQ,UAAA;IAAc,CAAA;GACtC;;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OA9DV;AA8DU;AA9IX,SAAA,OAAA,IAAA;CA4HyB,MAAA,EAAA,QAAA,UAAA,MAAA,WAAA;CACR,MAAA,WAAiB,eAAc,KAAML,MAAI;CAAE,OAEvC,qBAAC,MAAD;EAEU,MAAAA;EACE,QAAA,WAAA,WAAA,KAAA;EACH,KAAA,WAAA,wBAAA,KAAA;EACM,WAAAK,yBAAM;EALrB,UAAA,CAOK,WAAW,oBAAC,MAAD;GAAYH,MAAA;GAAmB,MAAA;EAAI,CAAA,IAA9C,MACAD,SAAM,KARN;CACIA,GAAAA,SAAM,EADV;AASE;AAxI5B,SAAA,OAAA,SAAA;CAAA,OAsBkB;EAAA,IACTE,QAAK;EAAK,OACdA;EAAK,OACEA,QAAK,SAAUA,QAAK;EAAK,SACvBA,QAAK,WAAYA,QAAK;CACnC;AAAC;AA3BF,SAAA,MAAA,OAAA;CAAA,OAqBoB,CAAC,aAAY,IAAK,MAAK,IAAK;AAAC"}

package/dist/pages/ItemPanel.module.js

@@ -0,0 +1,34 @@
+import "./ItemPanel.css";
+//#region src/pages/ItemPanel.module.css
+var panel = "panneau-item-panel-panel";
+var wide = "panneau-item-panel-wide";
+var header = "panneau-item-panel-header";
+var headerButtons = "panneau-item-panel-header-buttons";
+var title = "panneau-item-panel-title";
+var actions = "panneau-item-panel-actions";
+var action = "panneau-item-panel-action";
+var body = "panneau-item-panel-body";
+var tabs = "panneau-item-panel-tabs";
+var tabPanel = "panneau-item-panel-tab-panel";
+var preview = "panneau-item-panel-preview";
+var previewLink = "panneau-item-panel-preview-link";
+var frame = "panneau-item-panel-frame";
+var ItemPanel_module_default = {
+	panel,
+	wide,
+	header,
+	headerButtons,
+	title,
+	actions,
+	action,
+	body,
+	tabs,
+	tabPanel,
+	preview,
+	previewLink,
+	frame
+};
+//#endregion
+export { action, actions, body, ItemPanel_module_default as default, frame, header, headerButtons, panel, preview, previewLink, tabPanel, tabs, title, wide };
+
+//# sourceMappingURL=ItemPanel.module.js.map

package/dist/pages/ItemPanel.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemPanel.module.js","names":[],"sources":["../../src/pages/ItemPanel.module.css"],"sourcesContent":["/* The details of an item next to its list. Beside the list on a wide screen, over it otherwise. */\n\n.panel {\n    position: fixed;\n    inset-block: 0;\n    inset-inline-end: 0;\n    z-index: var(--panneau-z-overlay);\n    display: flex;\n    flex-direction: column;\n    width: min(100%, var(--panneau-item-panel-width, 24rem));\n    background: var(--panneau-item-panel-bg, var(--panneau-color-surface));\n    border-inline-start: var(--panneau-border-width) solid var(--panneau-color-border);\n    box-shadow: var(--panneau-shadow-lg);\n    outline: none;\n}\n\n/* Widened, for previews. */\n.wide {\n    width: min(100%, var(--panneau-item-panel-width-wide, 50%));\n}\n\n.panel:focus-visible {\n    box-shadow:\n        var(--panneau-shadow-lg),\n        inset 0 0 0 var(--panneau-focus-width) var(--panneau-color-focus);\n}\n\n.header {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--panneau-space-2);\n    padding: var(--panneau-space-4) var(--panneau-space-4) var(--panneau-space-2);\n}\n\n.headerButtons {\n    display: flex;\n    flex: none;\n    gap: var(--panneau-space-1);\n}\n\n.title {\n    min-width: 0;\n    margin: 0;\n    overflow-wrap: anywhere;\n}\n\n.actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-2);\n    padding: 0 var(--panneau-space-4) var(--panneau-space-3);\n    border-bottom: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.action {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-1);\n    min-height: var(--panneau-control-height-sm);\n    padding: 0 var(--panneau-space-3);\n    border: var(--panneau-border-width) solid var(--panneau-color-border-control);\n    border-radius: var(--panneau-radius-md);\n    color: var(--panneau-color-text);\n    font-size: var(--panneau-font-size-sm);\n    font-weight: var(--panneau-font-weight-medium);\n    text-decoration: none;\n    outline: none;\n}\n\n.action[data-hovered] {\n    background: var(--panneau-color-hover);\n}\n\n.action[data-focus-visible] {\n    box-shadow: 0 0 0 var(--panneau-focus-width) var(--panneau-color-focus);\n}\n\n.body {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    min-height: 0;\n    padding: var(--panneau-space-4);\n    overflow-y: auto;\n}\n\n.tabs {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--panneau-space-3);\n    min-height: 0;\n}\n\n.tabPanel {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    min-height: 0;\n}\n\n.preview {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--panneau-space-2);\n    min-height: 0;\n}\n\n.previewLink {\n    display: inline-flex;\n    align-items: center;\n    align-self: flex-end;\n    gap: var(--panneau-space-1);\n    border-radius: var(--panneau-radius-sm);\n    color: var(--panneau-color-link);\n    font-size: var(--panneau-font-size-sm);\n    text-decoration: none;\n    outline: none;\n}\n\n.previewLink[data-hovered] {\n    text-decoration: underline;\n}\n\n.previewLink[data-focus-visible] {\n    box-shadow: 0 0 0 var(--panneau-focus-width) var(--panneau-color-focus);\n}\n\n/* The page of the site, as tall as the panel allows. */\n.frame {\n    flex: 1 1 auto;\n    width: 100%;\n    min-height: 28rem;\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-md);\n    background: var(--panneau-color-surface);\n}\n\n/* From the `xl` width of the root: beside the list, in the flow of the page. */\n@container panneau-root (min-width: 80rem) {\n    .panel {\n        position: sticky;\n        top: var(--panneau-space-4);\n        z-index: auto;\n        width: auto;\n        max-height: calc(100dvh - 2 * var(--panneau-space-4));\n        min-height: min(40rem, calc(100dvh - 2 * var(--panneau-space-4)));\n        border: var(--panneau-border-width) solid var(--panneau-color-border);\n        border-radius: var(--panneau-item-panel-radius, var(--panneau-radius-lg));\n        box-shadow: var(--panneau-item-panel-shadow, var(--panneau-shadow-md));\n    }\n\n    .wide {\n        width: auto;\n    }\n\n    .panel:focus-visible {\n        box-shadow:\n            var(--panneau-item-panel-shadow, var(--panneau-shadow-md)),\n            0 0 0 var(--panneau-focus-width) var(--panneau-color-focus);\n    }\n}\n"],"mappings":""}

package/dist/pages/ItemPreview.d.ts

@@ -0,0 +1,15 @@
+import type { Item, Resource } from '@panneau/protocol';
+export interface ItemPreviewProps {
+    resource: Resource;
+    item: Item;
+    /** The title of the item, for the accessible name of the preview. */
+    title: string;
+    locale: string;
+}
+/**
+ * The preview of an item, as its resource's `features.preview` says (decision 0009): a component
+ * of a plugin (`previews`), or the item's page on the site in an iframe, from a short-lived URL
+ * of the backend.
+ */
+export declare function ItemPreview({ resource, item, title, locale }: ItemPreviewProps): import("react").JSX.Element | null;
+//# sourceMappingURL=ItemPreview.d.ts.map

package/dist/pages/ItemPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemPreview.d.ts","sourceRoot":"","sources":["../../src/pages/ItemPreview.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAKxD,MAAM,WAAW,gBAAgB;IAC7B,QAAQ,EAAE,QAAQ,CAAC;IACnB,IAAI,EAAE,IAAI,CAAC;IACX,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAClB;AA4CD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,gBAAgB,sCAsB9E"}

package/dist/pages/ItemPreview.js

@@ -0,0 +1,179 @@
+import ItemPanel_module_default from "./ItemPanel.module.js";
+import { createElement } from "react";
+import { c } from "react/compiler-runtime";
+import { usePlugins } from "@panneau/core";
+import { useItemPreview } from "@panneau/data/query";
+import { appMessages } from "@panneau/intl";
+import { Alert, Button, Icon, Spinner, usePanneauIntl } from "@panneau/ui";
+import { Link } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ExternalLink } from "lucide-react";
+//#region src/pages/ItemPreview.tsx
+/** Opens the URLs a new tab can: not the `data:` and `blob:` ones of tests and mocks. */
+function canOpen(url) {
+	return /^(https?:)?\/\//.test(url) || url.startsWith("/");
+}
+function IframePreview(t0) {
+	const $ = c(16);
+	const { resource, item, title } = t0;
+	const intl = usePanneauIntl();
+	const { data, isError, refetch } = useItemPreview(resource.id, item.id);
+	if (data === void 0) {
+		let t1;
+		if ($[0] !== intl || $[1] !== isError || $[2] !== refetch) {
+			t1 = isError ? /* @__PURE__ */ jsxs(Alert, {
+				tone: "danger",
+				children: [/* @__PURE__ */ jsx("p", { children: intl.formatMessage(appMessages.previewError) }), /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					onPress: () => void refetch(),
+					children: intl.formatMessage(appMessages.retry)
+				})]
+			}) : /* @__PURE__ */ jsx(Spinner, { showLabel: true });
+			$[0] = intl;
+			$[1] = isError;
+			$[2] = refetch;
+			$[3] = t1;
+		} else t1 = $[3];
+		return t1;
+	}
+	let t1;
+	if ($[4] !== data.url || $[5] !== intl) {
+		t1 = canOpen(data.url) ? /* @__PURE__ */ jsxs(Link, {
+			href: data.url,
+			target: "_blank",
+			rel: "noopener noreferrer",
+			className: ItemPanel_module_default.previewLink,
+			children: [/* @__PURE__ */ jsx(Icon, {
+				icon: ExternalLink,
+				size: "sm"
+			}), intl.formatMessage(appMessages.openPreview)]
+		}) : null;
+		$[4] = data.url;
+		$[5] = intl;
+		$[6] = t1;
+	} else t1 = $[6];
+	const t2 = data.url;
+	let t3;
+	if ($[7] !== intl || $[8] !== title) {
+		t3 = intl.formatMessage(appMessages.previewOf, { title });
+		$[7] = intl;
+		$[8] = title;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== data.url || $[11] !== t3) {
+		t4 = /* @__PURE__ */ jsx("iframe", {
+			src: t2,
+			title: t3,
+			className: ItemPanel_module_default.frame
+		});
+		$[10] = data.url;
+		$[11] = t3;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== t1 || $[14] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			className: ItemPanel_module_default.preview,
+			children: [t1, t4]
+		});
+		$[13] = t1;
+		$[14] = t4;
+		$[15] = t5;
+	} else t5 = $[15];
+	return t5;
+}
+/**
+* The preview of an item, as its resource's `features.preview` says (decision 0009): a component
+* of a plugin (`previews`), or the item's page on the site in an iframe, from a short-lived URL
+* of the backend.
+*/
+function ItemPreview(t0) {
+	const $ = c(21);
+	const { resource, item, title, locale } = t0;
+	const intl = usePanneauIntl();
+	const plugins = usePlugins();
+	const preview = resource.features?.preview ?? null;
+	if (preview === null) return null;
+	if (preview.mode === "iframe") {
+		let t1;
+		if ($[0] !== item || $[1] !== resource || $[2] !== title) {
+			t1 = /* @__PURE__ */ jsx(IframePreview, {
+				resource,
+				item,
+				title
+			});
+			$[0] = item;
+			$[1] = resource;
+			$[2] = title;
+			$[3] = t1;
+		} else t1 = $[3];
+		return t1;
+	}
+	const name = preview.component ?? "";
+	const t1 = plugins.previews;
+	let t2;
+	let t3;
+	let t4;
+	if ($[4] !== intl || $[5] !== item || $[6] !== locale || $[7] !== name || $[8] !== plugins.previews || $[9] !== resource) {
+		t4 = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			const Component = t1.get(name);
+			if (Component === void 0) {
+				let t5;
+				if ($[13] !== intl || $[14] !== name) {
+					t5 = intl.formatMessage(appMessages.previewMissing, { component: name });
+					$[13] = intl;
+					$[14] = name;
+					$[15] = t5;
+				} else t5 = $[15];
+				let t6;
+				if ($[16] !== t5) {
+					t6 = /* @__PURE__ */ jsx(Alert, {
+						tone: "warning",
+						children: t5
+					});
+					$[16] = t5;
+					$[17] = t6;
+				} else t6 = $[17];
+				t4 = t6;
+				break bb0;
+			}
+			t2 = ItemPanel_module_default.preview;
+			t3 = createElement(Component, {
+				item,
+				resource,
+				locale
+			});
+		}
+		$[4] = intl;
+		$[5] = item;
+		$[6] = locale;
+		$[7] = name;
+		$[8] = plugins.previews;
+		$[9] = resource;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+	} else {
+		t2 = $[10];
+		t3 = $[11];
+		t4 = $[12];
+	}
+	if (t4 !== Symbol.for("react.early_return_sentinel")) return t4;
+	let t5;
+	if ($[18] !== t2 || $[19] !== t3) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			className: t2,
+			children: t3
+		});
+		$[18] = t2;
+		$[19] = t3;
+		$[20] = t5;
+	} else t5 = $[20];
+	return t5;
+}
+//#endregion
+export { ItemPreview };
+
+//# sourceMappingURL=ItemPreview.js.map