@plumile/ui 0.1.145 → 0.1.147

package/README.md

@@ -129,6 +129,9 @@ flat mental model.
 - `HighlightCode` is the general code-display primitive. It supports a badge,
   copy action, placeholder text, highlighted HTML/React content, and a plain
   preformatted fallback.
+- `copyTextToClipboard`, `copyRichClipboard`, and `useClipboardCopy` provide
+  shared clipboard behavior with rich multi-format writes where browsers
+  support them and text fallbacks everywhere else.
 - `BackofficeJsonViewer` is the canonical structured JSON viewer for
   backoffice surfaces. It safely stringifies unknown values, exposes copy and
   collapse/expand controls, and accepts max-height and label overrides.

package/lib/esm/admin/organisms/admin_sidebar/adminSidebar.css.js

@@ -4,8 +4,6 @@
 /* empty css                                        */
 /* empty css                                            */
 /* empty css                                  */
-/* empty css                                          */
-/* empty css                                         */
 /* empty css                            */
 import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/admin/organisms/admin_sidebar/adminSidebar.css.ts

package/lib/esm/admin/theme/adminSurface.css.js

@@ -6,6 +6,8 @@
 /* empty css                               */
 /* empty css                            */
 /* empty css                            */
+/* empty css                                       */
+/* empty css                                      */
 import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/admin/theme/adminSurface.css.ts
 var t = e({

package/lib/esm/atomic/molecules/form_grid/FormGrid.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                        */
+//#region src/atomic/molecules/form_grid/FormGrid.css.ts
+var e = "var(--_1nx8f960)", t = "_1nx8f962 _1nx8f961 txvbqbfq0 txvbqbhdy txvbqb19uf";
+//#endregion
+export { t as grid, e as minColumnWidthVar };
+
+//# sourceMappingURL=FormGrid.css.js.map

package/lib/esm/atomic/molecules/form_grid/FormGrid.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormGrid.css.js","names":[],"sources":["../../../../../src/atomic/molecules/form_grid/FormGrid.css.ts"],"sourcesContent":["import { createVar, style } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const minColumnWidthVar = createVar();\n\nexport const grid = style([\n  sprinkles({\n    display: 'grid',\n    gap: 3,\n    width: 'full',\n  }),\n  {\n    gridTemplateColumns: `repeat(auto-fit, minmax(${minColumnWidthVar}, 1fr))`,\n  },\n]);\n"],"mappings":""}

package/lib/esm/atomic/molecules/form_grid/FormGrid.js

@@ -0,0 +1,16 @@
+import { cx as e } from "../../../theme/tools.js";
+import { grid as t, minColumnWidthVar as n } from "./FormGrid.css.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/atomic/molecules/form_grid/FormGrid.tsx
+var i = ({ children: i, className: a, minColumnWidth: o = "220px" }) => {
+	let s = { [n]: o };
+	return /* @__PURE__ */ r("div", {
+		className: e(t, a),
+		style: s,
+		children: i
+	});
+};
+//#endregion
+export { i as FormGrid, i as default };
+
+//# sourceMappingURL=FormGrid.js.map

package/lib/esm/atomic/molecules/form_grid/FormGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormGrid.js","names":[],"sources":["../../../../../src/atomic/molecules/form_grid/FormGrid.tsx"],"sourcesContent":["import { type CSSProperties, type JSX, type ReactNode } from 'react';\n\nimport { cx } from '../../../theme/tools.js';\n\nimport * as styles from './FormGrid.css.js';\n\nexport type FormGridProps = {\n  children: ReactNode;\n  minColumnWidth?: string;\n  className?: string;\n};\n\nexport const FormGrid = ({\n  children,\n  className,\n  minColumnWidth = '220px',\n}: FormGridProps): JSX.Element => {\n  const style = {\n    [styles.minColumnWidthVar]: minColumnWidth,\n  } as CSSProperties;\n\n  return (\n    <div className={cx(styles.grid, className)} style={style}>\n      {children}\n    </div>\n  );\n};\n\nexport default FormGrid;\n"],"mappings":";;;;AAYA,IAAa,KAAY,EACvB,aACA,cACA,oBAAiB,cACe;CAChC,IAAM,IAAQ,GACX,IAA2B,EAC9B;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAa,CAAS;EAAU;EAChD;CACE,CAAA;AAET"}

package/lib/esm/atomic/molecules/markdown/components/MarkdownArticleContainer.css.js

@@ -1,4 +1,5 @@
 /* empty css                                         */
+/* empty css                             */
 /* empty css                                        */
 //#region src/atomic/molecules/markdown/components/MarkdownArticleContainer.css.ts
 var e = "_7ez1431 _7ez1430 txvbqbfpn txvbqbh4x txvbqbheb";

package/lib/esm/atomic/molecules/markdown/components/MarkdownCodeCopyButton.js

@@ -1,46 +1,30 @@
 import { useUiTranslation as e } from "../../../../i18n/useUiTranslation.js";
-import { MarkdownCopySuccessSvg as t } from "../../../../icons/markdown/MarkdownCopySuccessSvg.js";
-import { MarkdownCopySvg as n } from "../../../../icons/markdown/MarkdownCopySvg.js";
-import { copyButton as r, icon as i, label as a } from "./MarkdownCodeCopyButton.css.js";
-import { useCallback as o, useEffect as s, useRef as c, useState as l } from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import t from "../../../../hooks/useClipboardCopy.js";
+import { MarkdownCopySuccessSvg as n } from "../../../../icons/markdown/MarkdownCopySuccessSvg.js";
+import { MarkdownCopySvg as r } from "../../../../icons/markdown/MarkdownCopySvg.js";
+import { copyButton as i, icon as a, label as o } from "./MarkdownCodeCopyButton.css.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/atomic/molecules/markdown/components/MarkdownCodeCopyButton.tsx
-var f = ({ code: f }) => {
-	let { t: p } = e(), [m, h] = l(!1), g = c(null);
-	s(() => () => {
-		g.current != null && window.clearTimeout(g.current);
-	}, []);
-	let _ = o(async () => {
-		try {
-			let e;
-			if (typeof navigator < "u" && (e = navigator.clipboard), e != null && typeof e.writeText == "function") await e.writeText(f);
-			else {
-				let e = document.createElement("textarea");
-				e.value = f, e.setAttribute("readonly", ""), e.style.position = "absolute", e.style.left = "-9999px", document.body.appendChild(e), e.select(), document.execCommand("copy"), document.body.removeChild(e);
-			}
-			h(!0), g.current != null && window.clearTimeout(g.current), g.current = window.setTimeout(() => {
-				h(!1), g.current = null;
-			}, 2e3);
-		} catch {}
-	}, [f]), v = p("markdown.code.copyTitle");
-	m && (v = p("markdown.code.copiedTitle"));
-	let y = /* @__PURE__ */ u(n, { className: i });
-	m && (y = /* @__PURE__ */ u(t, { className: i }));
-	let b = p("markdown.code.copy");
-	return m && (b = p("markdown.code.copied")), /* @__PURE__ */ d("button", {
-		className: r,
+var l = ({ code: l }) => {
+	let { t: u } = e(), { copiedKey: d, copyText: f } = t(), p = d === l, m = u("markdown.code.copyTitle");
+	p && (m = u("markdown.code.copiedTitle"));
+	let h = /* @__PURE__ */ s(r, { className: a });
+	p && (h = /* @__PURE__ */ s(n, { className: a }));
+	let g = u("markdown.code.copy");
+	return p && (g = u("markdown.code.copied")), /* @__PURE__ */ c("button", {
+		className: i,
 		onClick: () => {
-			_().catch(() => {});
+			f(l, l).catch(() => {});
 		},
-		title: v,
+		title: m,
 		type: "button",
-		children: [y, /* @__PURE__ */ u("span", {
-			className: a,
-			children: b
+		children: [h, /* @__PURE__ */ s("span", {
+			className: o,
+			children: g
 		})]
 	});
 };
 //#endregion
-export { f as MarkdownCodeCopyButton };
+export { l as MarkdownCodeCopyButton };
 
 //# sourceMappingURL=MarkdownCodeCopyButton.js.map

package/lib/esm/atomic/molecules/markdown/components/MarkdownCodeCopyButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownCodeCopyButton.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownCodeCopyButton.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState, type JSX } from 'react';\n\nimport { MarkdownCopySuccessSvg } from '../../../../icons/markdown/MarkdownCopySuccessSvg.js';\nimport { MarkdownCopySvg } from '../../../../icons/markdown/MarkdownCopySvg.js';\nimport { useUiTranslation } from '../../../../i18n/useUiTranslation.js';\n\nimport {\n  copyButton,\n  icon as iconClass,\n  label,\n} from './MarkdownCodeCopyButton.css.js';\n\ntype Props = {\n  code: string;\n};\n\nexport const MarkdownCodeCopyButton = ({ code }: Props): JSX.Element => {\n  const { t } = useUiTranslation();\n  const [copied, setCopied] = useState(false);\n  const timeoutRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current != null) {\n        window.clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  const handleCopy = useCallback(async () => {\n    try {\n      let clipboard: Clipboard | undefined;\n      if (typeof navigator !== 'undefined') {\n        clipboard = navigator.clipboard;\n      }\n      if (clipboard != null && typeof clipboard.writeText === 'function') {\n        await clipboard.writeText(code);\n      } else {\n        const textarea = document.createElement('textarea');\n        textarea.value = code;\n        textarea.setAttribute('readonly', '');\n        textarea.style.position = 'absolute';\n        textarea.style.left = '-9999px';\n        document.body.appendChild(textarea);\n        textarea.select();\n        document.execCommand('copy');\n        document.body.removeChild(textarea);\n      }\n      setCopied(true);\n      if (timeoutRef.current != null) {\n        window.clearTimeout(timeoutRef.current);\n      }\n      timeoutRef.current = window.setTimeout(() => {\n        setCopied(false);\n        timeoutRef.current = null;\n      }, 2000);\n    } catch {\n      // silently ignore copy failures\n    }\n  }, [code]);\n\n  let buttonTitle = t('markdown.code.copyTitle');\n  if (copied) {\n    buttonTitle = t('markdown.code.copiedTitle');\n  }\n\n  let iconElement: JSX.Element = <MarkdownCopySvg className={iconClass} />;\n  if (copied) {\n    iconElement = <MarkdownCopySuccessSvg className={iconClass} />;\n  }\n\n  let labelText = t('markdown.code.copy');\n  if (copied) {\n    labelText = t('markdown.code.copied');\n  }\n\n  return (\n    <button\n      className={copyButton}\n      onClick={() => {\n        handleCopy().catch(() => {\n          // ignore copy failures surfaced via promise rejection\n        });\n      }}\n      title={buttonTitle}\n      type=\"button\"\n    >\n      {iconElement}\n      <span className={label}>{labelText}</span>\n    </button>\n  );\n};\n"],"mappings":";;;;;;;AAgBA,IAAa,KAA0B,EAAE,cAA+B;CACtE,IAAM,EAAE,SAAM,EAAiB,GACzB,CAAC,GAAQ,KAAa,EAAS,EAAK,GACpC,IAAa,EAAsB,IAAI;CAE7C,cACe;EACX,AAAI,EAAW,WAAW,QACxB,OAAO,aAAa,EAAW,OAAO;CAE1C,GACC,CAAC,CAAC;CAEL,IAAM,IAAa,EAAY,YAAY;EACzC,IAAI;GACF,IAAI;GAIJ,IAHI,OAAO,YAAc,QACvB,IAAY,UAAU,YAEpB,KAAa,QAAQ,OAAO,EAAU,aAAc,YACtD,MAAM,EAAU,UAAU,CAAI;QACzB;IACL,IAAM,IAAW,SAAS,cAAc,UAAU;IAQlD,AAPA,EAAS,QAAQ,GACjB,EAAS,aAAa,YAAY,EAAE,GACpC,EAAS,MAAM,WAAW,YAC1B,EAAS,MAAM,OAAO,WACtB,SAAS,KAAK,YAAY,CAAQ,GAClC,EAAS,OAAO,GAChB,SAAS,YAAY,MAAM,GAC3B,SAAS,KAAK,YAAY,CAAQ;GACpC;GAKA,AAJA,EAAU,EAAI,GACV,EAAW,WAAW,QACxB,OAAO,aAAa,EAAW,OAAO,GAExC,EAAW,UAAU,OAAO,iBAAiB;IAE3C,AADA,EAAU,EAAK,GACf,EAAW,UAAU;GACvB,GAAG,GAAI;EACT,QAAQ,CAER;CACF,GAAG,CAAC,CAAI,CAAC,GAEL,IAAc,EAAE,yBAAyB;CAC7C,AAAI,MACF,IAAc,EAAE,2BAA2B;CAG7C,IAAI,IAA2B,kBAAC,GAAD,EAAiB,WAAW,EAAY,CAAA;CACvE,AAAI,MACF,IAAc,kBAAC,GAAD,EAAwB,WAAW,EAAY,CAAA;CAG/D,IAAI,IAAY,EAAE,oBAAoB;CAKtC,OAJI,MACF,IAAY,EAAE,sBAAsB,IAIpC,kBAAC,UAAD;EACE,WAAW;EACX,eAAe;GACb,EAAW,EAAE,YAAY,CAEzB,CAAC;EACH;EACA,OAAO;EACP,MAAK;YARP,CAUG,GACD,kBAAC,QAAD;GAAM,WAAW;aAAQ;EAAgB,CAAA,CACnC;;AAEZ"}
+{"version":3,"file":"MarkdownCodeCopyButton.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownCodeCopyButton.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { useClipboardCopy } from '../../../../hooks/useClipboardCopy.js';\nimport { MarkdownCopySuccessSvg } from '../../../../icons/markdown/MarkdownCopySuccessSvg.js';\nimport { MarkdownCopySvg } from '../../../../icons/markdown/MarkdownCopySvg.js';\nimport { useUiTranslation } from '../../../../i18n/useUiTranslation.js';\n\nimport {\n  copyButton,\n  icon as iconClass,\n  label,\n} from './MarkdownCodeCopyButton.css.js';\n\ntype Props = {\n  code: string;\n};\n\nexport const MarkdownCodeCopyButton = ({ code }: Props): JSX.Element => {\n  const { t } = useUiTranslation();\n  const { copiedKey, copyText } = useClipboardCopy();\n  const copied = copiedKey === code;\n\n  let buttonTitle = t('markdown.code.copyTitle');\n  if (copied) {\n    buttonTitle = t('markdown.code.copiedTitle');\n  }\n\n  let iconElement: JSX.Element = <MarkdownCopySvg className={iconClass} />;\n  if (copied) {\n    iconElement = <MarkdownCopySuccessSvg className={iconClass} />;\n  }\n\n  let labelText = t('markdown.code.copy');\n  if (copied) {\n    labelText = t('markdown.code.copied');\n  }\n\n  return (\n    <button\n      className={copyButton}\n      onClick={() => {\n        copyText(code, code).catch(() => {\n          // ignore copy failures surfaced via promise rejection\n        });\n      }}\n      title={buttonTitle}\n      type=\"button\"\n    >\n      {iconElement}\n      <span className={label}>{labelText}</span>\n    </button>\n  );\n};\n"],"mappings":";;;;;;;AAiBA,IAAa,KAA0B,EAAE,cAA+B;CACtE,IAAM,EAAE,SAAM,EAAiB,GACzB,EAAE,cAAW,gBAAa,EAAiB,GAC3C,IAAS,MAAc,GAEzB,IAAc,EAAE,yBAAyB;CAC7C,AAAI,MACF,IAAc,EAAE,2BAA2B;CAG7C,IAAI,IAA2B,kBAAC,GAAD,EAAiB,WAAW,EAAY,CAAA;CACvE,AAAI,MACF,IAAc,kBAAC,GAAD,EAAwB,WAAW,EAAY,CAAA;CAG/D,IAAI,IAAY,EAAE,oBAAoB;CAKtC,OAJI,MACF,IAAY,EAAE,sBAAsB,IAIpC,kBAAC,UAAD;EACE,WAAW;EACX,eAAe;GACb,EAAS,GAAM,CAAI,EAAE,YAAY,CAEjC,CAAC;EACH;EACA,OAAO;EACP,MAAK;YARP,CAUG,GACD,kBAAC,QAAD;GAAM,WAAW;aAAQ;EAAgB,CAAA,CACnC;;AAEZ"}

package/lib/esm/atomic/molecules/markdown/components/MarkdownLink.css.js

@@ -1,5 +1,4 @@
 /* empty css                                         */
-/* empty css                             */
 /* empty css                            */
 //#region src/atomic/molecules/markdown/components/MarkdownLink.css.ts
 var e = "xtwkbg1 xtwkbg0 txvbqb3h txvbqb6f txvbqb7h txvbqb76 txvbqb7v txvbqb1ara", t = "xtwkbg3 xtwkbg1 xtwkbg0 txvbqb3h txvbqb6f txvbqb7h txvbqb76 txvbqb7v txvbqb1ara xtwkbg2 txvbqbey txvbqbfqq txvbqbhd8", n = "xtwkbg5 xtwkbg4 txvbqbfqq", r = "xtwkbg7 xtwkbg6 txvbqbf txvbqb3f";

package/lib/esm/backoffice/atoms/copyable_text/CopyableText.js

@@ -1,63 +1,43 @@
 import { cx as e } from "../../../theme/tools.js";
 import { Button as t } from "../../../atomic/atoms/button/Button.js";
-import { copyWithExecCommand as n } from "../../shared/copyWithExecCommand.js";
+import n from "../../../hooks/useClipboardCopy.js";
 import { feedback as r, root as i, value as a, valueNoTruncate as o } from "./copyableText.css.js";
-import { useCallback as s, useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { useTranslation as m } from "react-i18next";
+import { useMemo as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useTranslation as u } from "react-i18next";
 //#region src/backoffice/atoms/copyable_text/CopyableText.tsx
-var h = ({ value: h, copyValue: g, className: _, truncate: v = !0, copyLabel: y, copiedLabel: b }) => {
-	let { t: x } = m("ui", { useSuspense: !1 }), [S, C] = d(!1), w = u(null), T = y ?? x("backoffice.copyableText.copy", { defaultValue: "Copy" }), E = b ?? x("backoffice.copyableText.copied", { defaultValue: "Copied" }), D = g ?? h, O = l(() => {
+var d = ({ value: d, copyValue: f, className: p, truncate: m = !0, copyLabel: h, copiedLabel: g }) => {
+	let { t: _ } = u("ui", { useSuspense: !1 }), { copiedKey: v, copyText: y } = n(1400), b = h ?? _("backoffice.copyableText.copy", { defaultValue: "Copy" }), x = g ?? _("backoffice.copyableText.copied", { defaultValue: "Copied" }), S = f ?? d, C = S, w = v === C, T = s(() => {
 		let t = null;
-		return v || (t = o), e(a, t, _);
-	}, [_, v]), k = s(() => {
-		w.current != null && (window.clearTimeout(w.current), w.current = null);
-	}, []);
-	c(() => () => {
-		k();
-	}, [k]);
-	let A = s(async () => {
-		k();
-		let e = !1;
-		try {
-			if (typeof navigator < "u") {
-				let { clipboard: t } = navigator;
-				await t.writeText(D), e = !0;
-			}
-		} catch {
-			e = !1;
-		}
-		e ||= n(D), e && (C(!0), w.current = window.setTimeout(() => {
-			C(!1), w.current = null;
-		}, 1400));
-	}, [k, D]), j = () => {
-		A().catch(() => {});
-	}, M = null;
-	return S && (M = /* @__PURE__ */ f("span", {
+		return m || (t = o), e(a, t, p);
+	}, [p, m]), E = () => {
+		y(S, C).catch(() => {});
+	}, D = null;
+	return w && (D = /* @__PURE__ */ c("span", {
 		className: r,
 		role: "status",
 		"aria-live": "polite",
-		children: E
-	})), /* @__PURE__ */ p("span", {
+		children: x
+	})), /* @__PURE__ */ l("span", {
 		className: i,
 		children: [
-			/* @__PURE__ */ f("span", {
-				className: O,
-				title: h,
-				children: h
+			/* @__PURE__ */ c("span", {
+				className: T,
+				title: d,
+				children: d
 			}),
-			/* @__PURE__ */ f(t, {
+			/* @__PURE__ */ c(t, {
 				type: "button",
 				variant: "secondary",
 				size: "small",
-				onClick: j,
-				children: T
+				onClick: E,
+				children: b
 			}),
-			M
+			D
 		]
 	});
 };
 //#endregion
-export { h as CopyableText, h as default };
+export { d as CopyableText, d as default };
 
 //# sourceMappingURL=CopyableText.js.map

package/lib/esm/backoffice/atoms/copyable_text/CopyableText.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyableText.js","names":[],"sources":["../../../../../src/backoffice/atoms/copyable_text/CopyableText.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type JSX,\n} from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { Button } from '../../../atomic/atoms/button/Button.js';\nimport { cx } from '../../../theme/tools.js';\nimport { copyWithExecCommand } from '../../shared/copyWithExecCommand.js';\n\nimport * as styles from './copyableText.css.js';\n\nexport type CopyableTextProps = {\n  value: string;\n  copyValue?: string;\n  className?: string;\n  truncate?: boolean;\n  copyLabel?: string;\n  copiedLabel?: string;\n};\n\nexport const CopyableText = ({\n  value,\n  copyValue,\n  className,\n  truncate = true,\n  copyLabel,\n  copiedLabel,\n}: CopyableTextProps): JSX.Element => {\n  const { t } = useTranslation('ui', { useSuspense: false });\n  const [copied, setCopied] = useState(false);\n  const timeoutRef = useRef<number | null>(null);\n  const resolvedCopyLabel =\n    copyLabel ??\n    t('backoffice.copyableText.copy', {\n      defaultValue: 'Copy',\n    });\n  const resolvedCopiedLabel =\n    copiedLabel ??\n    t('backoffice.copyableText.copied', {\n      defaultValue: 'Copied',\n    });\n\n  const resolvedCopyValue = copyValue ?? value;\n\n  const displayClassName = useMemo(() => {\n    let noTruncateClass: string | null = null;\n    if (!truncate) {\n      noTruncateClass = styles.valueNoTruncate;\n    }\n    return cx(styles.value, noTruncateClass, className);\n  }, [className, truncate]);\n\n  const clearTimer = useCallback(() => {\n    if (timeoutRef.current != null) {\n      window.clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n  }, []);\n\n  useEffect(() => {\n    return () => {\n      clearTimer();\n    };\n  }, [clearTimer]);\n\n  const handleCopy = useCallback(async () => {\n    clearTimer();\n    let ok = false;\n    try {\n      if (typeof navigator !== 'undefined') {\n        const { clipboard } = navigator;\n        await clipboard.writeText(resolvedCopyValue);\n        ok = true;\n      }\n    } catch {\n      ok = false;\n    }\n\n    if (!ok) {\n      ok = copyWithExecCommand(resolvedCopyValue);\n    }\n\n    if (ok) {\n      setCopied(true);\n      timeoutRef.current = window.setTimeout(() => {\n        setCopied(false);\n        timeoutRef.current = null;\n      }, 1400);\n    }\n  }, [clearTimer, resolvedCopyValue]);\n\n  const handleCopyClick = () => {\n    handleCopy().catch(() => {});\n  };\n\n  let feedbackNode: JSX.Element | null = null;\n  if (copied) {\n    feedbackNode = (\n      <span className={styles.feedback} role=\"status\" aria-live=\"polite\">\n        {resolvedCopiedLabel}\n      </span>\n    );\n  }\n\n  return (\n    <span className={styles.root}>\n      <span className={displayClassName} title={value}>\n        {value}\n      </span>\n      <Button\n        type=\"button\"\n        variant=\"secondary\"\n        size=\"small\"\n        onClick={handleCopyClick}\n      >\n        {resolvedCopyLabel}\n      </Button>\n      {feedbackNode}\n    </span>\n  );\n};\n\nexport default CopyableText;\n"],"mappings":";;;;;;;;AAyBA,IAAa,KAAgB,EAC3B,OAAA,GACA,cACA,cACA,cAAW,IACX,cACA,qBACoC;CACpC,IAAM,EAAE,SAAM,EAAe,MAAM,EAAE,aAAa,GAAM,CAAC,GACnD,CAAC,GAAQ,KAAa,EAAS,EAAK,GACpC,IAAa,EAAsB,IAAI,GACvC,IACJ,KACA,EAAE,gCAAgC,EAChC,cAAc,OAChB,CAAC,GACG,IACJ,KACA,EAAE,kCAAkC,EAClC,cAAc,SAChB,CAAC,GAEG,IAAoB,KAAa,GAEjC,IAAmB,QAAc;EACrC,IAAI,IAAiC;EAIrC,OAHK,MACH,IAAkB,IAEb,EAAG,GAAc,GAAiB,CAAS;CACpD,GAAG,CAAC,GAAW,CAAQ,CAAC,GAElB,IAAa,QAAkB;EACnC,AAAI,EAAW,WAAW,SACxB,OAAO,aAAa,EAAW,OAAO,GACtC,EAAW,UAAU;CAEzB,GAAG,CAAC,CAAC;CAEL,cACe;EACX,EAAW;CACb,GACC,CAAC,CAAU,CAAC;CAEf,IAAM,IAAa,EAAY,YAAY;EACzC,EAAW;EACX,IAAI,IAAK;EACT,IAAI;GACF,IAAI,OAAO,YAAc,KAAa;IACpC,IAAM,EAAE,iBAAc;IAEtB,AADA,MAAM,EAAU,UAAU,CAAiB,GAC3C,IAAK;GACP;EACF,QAAQ;GACN,IAAK;EACP;EAMA,AAJA,AACE,MAAK,EAAoB,CAAiB,GAGxC,MACF,EAAU,EAAI,GACd,EAAW,UAAU,OAAO,iBAAiB;GAE3C,AADA,EAAU,EAAK,GACf,EAAW,UAAU;EACvB,GAAG,IAAI;CAEX,GAAG,CAAC,GAAY,CAAiB,CAAC,GAE5B,UAAwB;EAC5B,EAAW,EAAE,YAAY,CAAC,CAAC;CAC7B,GAEI,IAAmC;CASvC,OARI,MACF,IACE,kBAAC,QAAD;EAAM,WAAW;EAAiB,MAAK;EAAS,aAAU;YACvD;CACG,CAAA,IAKR,kBAAC,QAAD;EAAM,WAAW;YAAjB;GACE,kBAAC,QAAD;IAAM,WAAW;IAAkB,OAAO;cACvC;GACG,CAAA;GACN,kBAAC,GAAD;IACE,MAAK;IACL,SAAQ;IACR,MAAK;IACL,SAAS;cAER;GACK,CAAA;GACP;EACG;;AAEV"}
+{"version":3,"file":"CopyableText.js","names":[],"sources":["../../../../../src/backoffice/atoms/copyable_text/CopyableText.tsx"],"sourcesContent":["import { useMemo, type JSX } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { Button } from '../../../atomic/atoms/button/Button.js';\nimport { useClipboardCopy } from '../../../hooks/useClipboardCopy.js';\nimport { cx } from '../../../theme/tools.js';\n\nimport * as styles from './copyableText.css.js';\n\nexport type CopyableTextProps = {\n  value: string;\n  copyValue?: string;\n  className?: string;\n  truncate?: boolean;\n  copyLabel?: string;\n  copiedLabel?: string;\n};\n\nexport const CopyableText = ({\n  value,\n  copyValue,\n  className,\n  truncate = true,\n  copyLabel,\n  copiedLabel,\n}: CopyableTextProps): JSX.Element => {\n  const { t } = useTranslation('ui', { useSuspense: false });\n  const { copiedKey, copyText } = useClipboardCopy(1400);\n  const resolvedCopyLabel =\n    copyLabel ??\n    t('backoffice.copyableText.copy', {\n      defaultValue: 'Copy',\n    });\n  const resolvedCopiedLabel =\n    copiedLabel ??\n    t('backoffice.copyableText.copied', {\n      defaultValue: 'Copied',\n    });\n\n  const resolvedCopyValue = copyValue ?? value;\n  const copyKey = resolvedCopyValue;\n  const copied = copiedKey === copyKey;\n\n  const displayClassName = useMemo(() => {\n    let noTruncateClass: string | null = null;\n    if (!truncate) {\n      noTruncateClass = styles.valueNoTruncate;\n    }\n    return cx(styles.value, noTruncateClass, className);\n  }, [className, truncate]);\n\n  const handleCopyClick = () => {\n    copyText(resolvedCopyValue, copyKey).catch(() => {});\n  };\n\n  let feedbackNode: JSX.Element | null = null;\n  if (copied) {\n    feedbackNode = (\n      <span className={styles.feedback} role=\"status\" aria-live=\"polite\">\n        {resolvedCopiedLabel}\n      </span>\n    );\n  }\n\n  return (\n    <span className={styles.root}>\n      <span className={displayClassName} title={value}>\n        {value}\n      </span>\n      <Button\n        type=\"button\"\n        variant=\"secondary\"\n        size=\"small\"\n        onClick={handleCopyClick}\n      >\n        {resolvedCopyLabel}\n      </Button>\n      {feedbackNode}\n    </span>\n  );\n};\n\nexport default CopyableText;\n"],"mappings":";;;;;;;;AAkBA,IAAa,KAAgB,EAC3B,OAAA,GACA,cACA,cACA,cAAW,IACX,cACA,qBACoC;CACpC,IAAM,EAAE,SAAM,EAAe,MAAM,EAAE,aAAa,GAAM,CAAC,GACnD,EAAE,cAAW,gBAAa,EAAiB,IAAI,GAC/C,IACJ,KACA,EAAE,gCAAgC,EAChC,cAAc,OAChB,CAAC,GACG,IACJ,KACA,EAAE,kCAAkC,EAClC,cAAc,SAChB,CAAC,GAEG,IAAoB,KAAa,GACjC,IAAU,GACV,IAAS,MAAc,GAEvB,IAAmB,QAAc;EACrC,IAAI,IAAiC;EAIrC,OAHK,MACH,IAAkB,IAEb,EAAG,GAAc,GAAiB,CAAS;CACpD,GAAG,CAAC,GAAW,CAAQ,CAAC,GAElB,UAAwB;EAC5B,EAAS,GAAmB,CAAO,EAAE,YAAY,CAAC,CAAC;CACrD,GAEI,IAAmC;CASvC,OARI,MACF,IACE,kBAAC,QAAD;EAAM,WAAW;EAAiB,MAAK;EAAS,aAAU;YACvD;CACG,CAAA,IAKR,kBAAC,QAAD;EAAM,WAAW;YAAjB;GACE,kBAAC,QAAD;IAAM,WAAW;IAAkB,OAAO;cACvC;GACG,CAAA;GACN,kBAAC,GAAD;IACE,MAAK;IACL,SAAQ;IACR,MAAK;IACL,SAAS;cAER;GACK,CAAA;GACP;EACG;;AAEV"}

package/lib/esm/backoffice/molecules/backoffice_json_viewer/BackofficeJsonViewer.js

@@ -1,6 +1,7 @@
 import { cx as e } from "../../../theme/tools.js";
 import { Button as t } from "../../../atomic/atoms/button/Button.js";
-import { copyWithExecCommand as n } from "../../shared/copyWithExecCommand.js";
+import { copyWithExecCommand as n } from "../../../shared/clipboard.js";
+import "../../shared/copyWithExecCommand.js";
 import { actions as r, container as i, header as a, pre as o, title as s, truncated as c } from "./backofficeJsonViewer.css.js";
 import { useCallback as l, useMemo as u, useState as d } from "react";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";

package/lib/esm/backoffice/molecules/backoffice_json_viewer/BackofficeJsonViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeJsonViewer.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_json_viewer/BackofficeJsonViewer.tsx"],"sourcesContent":["import { useCallback, useMemo, useState, type JSX } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { Button } from '../../../atomic/atoms/button/Button.js';\nimport { cx } from '../../../theme/tools.js';\nimport { copyWithExecCommand } from '../../shared/copyWithExecCommand.js';\n\nimport * as styles from './backofficeJsonViewer.css.js';\n\nexport type BackofficeJsonViewerProps = {\n  value: unknown;\n  title?: string;\n  className?: string;\n  maxHeight?: string;\n  truncate?: boolean;\n  truncateLabel?: string;\n  expandLabel?: string;\n  copyLabel?: string;\n  copiedLabel?: string;\n};\n\nexport const BackofficeJsonViewer = ({\n  value,\n  title,\n  className,\n  maxHeight,\n  truncate = false,\n  truncateLabel,\n  expandLabel,\n  copyLabel,\n  copiedLabel,\n}: BackofficeJsonViewerProps): JSX.Element => {\n  const { t } = useTranslation('ui');\n  const [isCollapsed, setIsCollapsed] = useState(truncate);\n  const [copied, setCopied] = useState(false);\n  const resolvedTitle = title ?? t('backoffice.jsonViewer.title');\n  const resolvedTruncateLabel =\n    truncateLabel ?? t('backoffice.jsonViewer.collapse');\n  const resolvedExpandLabel = expandLabel ?? t('backoffice.jsonViewer.expand');\n  const resolvedCopyLabel = copyLabel ?? t('backoffice.jsonViewer.copy');\n  const resolvedCopiedLabel = copiedLabel ?? t('backoffice.jsonViewer.copied');\n\n  const jsonText = useMemo(() => {\n    try {\n      return JSON.stringify(value, null, 2);\n    } catch {\n      return JSON.stringify({\n        error: t('backoffice.jsonViewer.serializationError'),\n      });\n    }\n  }, [t, value]);\n\n  const handleCopy = useCallback(async () => {\n    let ok = false;\n    try {\n      if (typeof navigator !== 'undefined') {\n        await navigator.clipboard.writeText(jsonText);\n        ok = true;\n      }\n    } catch {\n      ok = false;\n    }\n\n    if (!ok) {\n      ok = copyWithExecCommand(jsonText);\n    }\n\n    if (ok) {\n      setCopied(true);\n      window.setTimeout(() => {\n        setCopied(false);\n      }, 1400);\n    }\n  }, [jsonText]);\n\n  const preStyle = useMemo(() => {\n    if (maxHeight == null) {\n      return undefined;\n    }\n    return { maxHeight };\n  }, [maxHeight]);\n\n  let copyButtonLabel = resolvedCopyLabel;\n  if (copied) {\n    copyButtonLabel = resolvedCopiedLabel;\n  }\n\n  let collapseButtonLabel = resolvedTruncateLabel;\n  if (isCollapsed) {\n    collapseButtonLabel = resolvedExpandLabel;\n  }\n\n  return (\n    <div className={cx(styles.container, className)}>\n      <div className={styles.header}>\n        <span className={styles.title}>{resolvedTitle}</span>\n        <div className={styles.actions}>\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            size=\"small\"\n            onClick={() => {\n              handleCopy().catch(() => {});\n            }}\n          >\n            {copyButtonLabel}\n          </Button>\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            size=\"small\"\n            onClick={() => {\n              setIsCollapsed((v) => {\n                return !v;\n              });\n            }}\n          >\n            {collapseButtonLabel}\n          </Button>\n        </div>\n      </div>\n      <pre\n        className={cx(styles.pre, { [styles.truncated]: isCollapsed })}\n        style={preStyle}\n      >\n        {jsonText}\n      </pre>\n    </div>\n  );\n};\n\nexport default BackofficeJsonViewer;\n"],"mappings":";;;;;;;;AAqBA,IAAa,KAAwB,EACnC,UACA,OAAA,GACA,cACA,cACA,cAAW,IACX,kBACA,gBACA,cACA,qBAC4C;CAC5C,IAAM,EAAE,SAAM,EAAe,IAAI,GAC3B,CAAC,GAAa,KAAkB,EAAS,CAAQ,GACjD,CAAC,GAAQ,KAAa,EAAS,EAAK,GACpC,IAAgB,KAAS,EAAE,6BAA6B,GACxD,IACJ,KAAiB,EAAE,gCAAgC,GAC/C,IAAsB,KAAe,EAAE,8BAA8B,GACrE,IAAoB,KAAa,EAAE,4BAA4B,GAC/D,IAAsB,KAAe,EAAE,8BAA8B,GAErE,IAAW,QAAc;EAC7B,IAAI;GACF,OAAO,KAAK,UAAU,GAAO,MAAM,CAAC;EACtC,QAAQ;GACN,OAAO,KAAK,UAAU,EACpB,OAAO,EAAE,0CAA0C,EACrD,CAAC;EACH;CACF,GAAG,CAAC,GAAG,CAAK,CAAC,GAEP,IAAa,EAAY,YAAY;EACzC,IAAI,IAAK;EACT,IAAI;GACF,AAAI,OAAO,YAAc,QACvB,MAAM,UAAU,UAAU,UAAU,CAAQ,GAC5C,IAAK;EAET,QAAQ;GACN,IAAK;EACP;EAMA,AAJA,AACE,MAAK,EAAoB,CAAQ,GAG/B,MACF,EAAU,EAAI,GACd,OAAO,iBAAiB;GACtB,EAAU,EAAK;EACjB,GAAG,IAAI;CAEX,GAAG,CAAC,CAAQ,CAAC,GAEP,IAAW,QAAc;EACzB,SAAa,MAGjB,OAAO,EAAE,aAAU;CACrB,GAAG,CAAC,CAAS,CAAC,GAEV,IAAkB;CACtB,AAAI,MACF,IAAkB;CAGpB,IAAI,IAAsB;CAK1B,OAJI,MACF,IAAsB,IAItB,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAkB,CAAS;YAA9C,CACE,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,QAAD;IAAM,WAAW;cAAe;GAAoB,CAAA,GACpD,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACE,kBAAC,GAAD;KACE,MAAK;KACL,SAAQ;KACR,MAAK;KACL,eAAe;MACb,EAAW,EAAE,YAAY,CAAC,CAAC;KAC7B;eAEC;IACK,CAAA,GACR,kBAAC,GAAD;KACE,MAAK;KACL,SAAQ;KACR,MAAK;KACL,eAAe;MACb,GAAgB,MACP,CAAC,CACT;KACH;eAEC;IACK,CAAA,CACL;KACF;MACL,kBAAC,OAAD;GACE,WAAW,EAAG,GAAY,GAAG,IAAmB,EAAY,CAAC;GAC7D,OAAO;aAEN;EACE,CAAA,CACF;;AAET"}
+{"version":3,"file":"BackofficeJsonViewer.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_json_viewer/BackofficeJsonViewer.tsx"],"sourcesContent":["import { useCallback, useMemo, useState, type JSX } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { Button } from '../../../atomic/atoms/button/Button.js';\nimport { cx } from '../../../theme/tools.js';\nimport { copyWithExecCommand } from '../../shared/copyWithExecCommand.js';\n\nimport * as styles from './backofficeJsonViewer.css.js';\n\nexport type BackofficeJsonViewerProps = {\n  value: unknown;\n  title?: string;\n  className?: string;\n  maxHeight?: string;\n  truncate?: boolean;\n  truncateLabel?: string;\n  expandLabel?: string;\n  copyLabel?: string;\n  copiedLabel?: string;\n};\n\nexport const BackofficeJsonViewer = ({\n  value,\n  title,\n  className,\n  maxHeight,\n  truncate = false,\n  truncateLabel,\n  expandLabel,\n  copyLabel,\n  copiedLabel,\n}: BackofficeJsonViewerProps): JSX.Element => {\n  const { t } = useTranslation('ui');\n  const [isCollapsed, setIsCollapsed] = useState(truncate);\n  const [copied, setCopied] = useState(false);\n  const resolvedTitle = title ?? t('backoffice.jsonViewer.title');\n  const resolvedTruncateLabel =\n    truncateLabel ?? t('backoffice.jsonViewer.collapse');\n  const resolvedExpandLabel = expandLabel ?? t('backoffice.jsonViewer.expand');\n  const resolvedCopyLabel = copyLabel ?? t('backoffice.jsonViewer.copy');\n  const resolvedCopiedLabel = copiedLabel ?? t('backoffice.jsonViewer.copied');\n\n  const jsonText = useMemo(() => {\n    try {\n      return JSON.stringify(value, null, 2);\n    } catch {\n      return JSON.stringify({\n        error: t('backoffice.jsonViewer.serializationError'),\n      });\n    }\n  }, [t, value]);\n\n  const handleCopy = useCallback(async () => {\n    let ok = false;\n    try {\n      if (typeof navigator !== 'undefined') {\n        await navigator.clipboard.writeText(jsonText);\n        ok = true;\n      }\n    } catch {\n      ok = false;\n    }\n\n    if (!ok) {\n      ok = copyWithExecCommand(jsonText);\n    }\n\n    if (ok) {\n      setCopied(true);\n      window.setTimeout(() => {\n        setCopied(false);\n      }, 1400);\n    }\n  }, [jsonText]);\n\n  const preStyle = useMemo(() => {\n    if (maxHeight == null) {\n      return undefined;\n    }\n    return { maxHeight };\n  }, [maxHeight]);\n\n  let copyButtonLabel = resolvedCopyLabel;\n  if (copied) {\n    copyButtonLabel = resolvedCopiedLabel;\n  }\n\n  let collapseButtonLabel = resolvedTruncateLabel;\n  if (isCollapsed) {\n    collapseButtonLabel = resolvedExpandLabel;\n  }\n\n  return (\n    <div className={cx(styles.container, className)}>\n      <div className={styles.header}>\n        <span className={styles.title}>{resolvedTitle}</span>\n        <div className={styles.actions}>\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            size=\"small\"\n            onClick={() => {\n              handleCopy().catch(() => {});\n            }}\n          >\n            {copyButtonLabel}\n          </Button>\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            size=\"small\"\n            onClick={() => {\n              setIsCollapsed((v) => {\n                return !v;\n              });\n            }}\n          >\n            {collapseButtonLabel}\n          </Button>\n        </div>\n      </div>\n      <pre\n        className={cx(styles.pre, { [styles.truncated]: isCollapsed })}\n        style={preStyle}\n      >\n        {jsonText}\n      </pre>\n    </div>\n  );\n};\n\nexport default BackofficeJsonViewer;\n"],"mappings":";;;;;;;;;AAqBA,IAAa,KAAwB,EACnC,UACA,OAAA,GACA,cACA,cACA,cAAW,IACX,kBACA,gBACA,cACA,qBAC4C;CAC5C,IAAM,EAAE,SAAM,EAAe,IAAI,GAC3B,CAAC,GAAa,KAAkB,EAAS,CAAQ,GACjD,CAAC,GAAQ,KAAa,EAAS,EAAK,GACpC,IAAgB,KAAS,EAAE,6BAA6B,GACxD,IACJ,KAAiB,EAAE,gCAAgC,GAC/C,IAAsB,KAAe,EAAE,8BAA8B,GACrE,IAAoB,KAAa,EAAE,4BAA4B,GAC/D,IAAsB,KAAe,EAAE,8BAA8B,GAErE,IAAW,QAAc;EAC7B,IAAI;GACF,OAAO,KAAK,UAAU,GAAO,MAAM,CAAC;EACtC,QAAQ;GACN,OAAO,KAAK,UAAU,EACpB,OAAO,EAAE,0CAA0C,EACrD,CAAC;EACH;CACF,GAAG,CAAC,GAAG,CAAK,CAAC,GAEP,IAAa,EAAY,YAAY;EACzC,IAAI,IAAK;EACT,IAAI;GACF,AAAI,OAAO,YAAc,QACvB,MAAM,UAAU,UAAU,UAAU,CAAQ,GAC5C,IAAK;EAET,QAAQ;GACN,IAAK;EACP;EAMA,AAJA,AACE,MAAK,EAAoB,CAAQ,GAG/B,MACF,EAAU,EAAI,GACd,OAAO,iBAAiB;GACtB,EAAU,EAAK;EACjB,GAAG,IAAI;CAEX,GAAG,CAAC,CAAQ,CAAC,GAEP,IAAW,QAAc;EACzB,SAAa,MAGjB,OAAO,EAAE,aAAU;CACrB,GAAG,CAAC,CAAS,CAAC,GAEV,IAAkB;CACtB,AAAI,MACF,IAAkB;CAGpB,IAAI,IAAsB;CAK1B,OAJI,MACF,IAAsB,IAItB,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAkB,CAAS;YAA9C,CACE,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,QAAD;IAAM,WAAW;cAAe;GAAoB,CAAA,GACpD,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACE,kBAAC,GAAD;KACE,MAAK;KACL,SAAQ;KACR,MAAK;KACL,eAAe;MACb,EAAW,EAAE,YAAY,CAAC,CAAC;KAC7B;eAEC;IACK,CAAA,GACR,kBAAC,GAAD;KACE,MAAK;KACL,SAAQ;KACR,MAAK;KACL,eAAe;MACb,GAAgB,MACP,CAAC,CACT;KACH;eAEC;IACK,CAAA,CACL;KACF;MACL,kBAAC,OAAD;GACE,WAAW,EAAG,GAAY,GAAG,IAAmB,EAAY,CAAC;GAC7D,OAAO;aAEN;EACE,CAAA,CACF;;AAET"}

package/lib/esm/backoffice/shared/copyWithExecCommand.js

@@ -1,15 +1,2 @@
-//#region src/backoffice/shared/copyWithExecCommand.ts
-function e(e) {
-	try {
-		let t = document.createElement("textarea");
-		t.value = e, t.setAttribute("readonly", "true"), t.style.position = "fixed", t.style.top = "-1000px", t.style.left = "-1000px", document.body.appendChild(t), t.select();
-		let n = document.execCommand("copy");
-		return document.body.removeChild(t), n;
-	} catch {
-		return !1;
-	}
-}
-//#endregion
+import { copyWithExecCommand as e } from "../../shared/clipboard.js";
 export { e as copyWithExecCommand };
-
-//# sourceMappingURL=copyWithExecCommand.js.map

package/lib/esm/components/feedback/OperationFeedback.js

@@ -3,24 +3,31 @@ import { InlineBanner as t } from "./InlineBanner.js";
 import { stack as n } from "./OperationFeedback.css.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/feedback/OperationFeedback.tsx
-var a = ({ errorMessage: a = null, successMessage: o = null, retryLabel: s, onRetry: c }) => {
-	if (a == null && o == null) return null;
-	let l = null;
-	return a != null && c != null && s != null && (l = /* @__PURE__ */ r(e, {
+var a = ({ errorMessage: a = null, neutralMessage: o = null, successMessage: s = null, retryLabel: c, onRetry: l }) => {
+	if (a == null && o == null && s == null) return null;
+	let u = null;
+	return a != null && l != null && c != null && (u = /* @__PURE__ */ r(e, {
 		type: "button",
 		variant: "secondary",
-		onClick: c,
-		children: s
+		onClick: l,
+		children: c
 	})), /* @__PURE__ */ i("div", {
 		className: n,
-		children: [a != null && /* @__PURE__ */ r(t, {
-			tone: "danger",
-			actions: l,
-			children: a
-		}), o != null && /* @__PURE__ */ r(t, {
-			tone: "success",
-			children: o
-		})]
+		children: [
+			a != null && /* @__PURE__ */ r(t, {
+				tone: "danger",
+				actions: u,
+				children: a
+			}),
+			s != null && /* @__PURE__ */ r(t, {
+				tone: "success",
+				children: s
+			}),
+			o != null && /* @__PURE__ */ r(t, {
+				tone: "info",
+				children: o
+			})
+		]
 	});
 }, o = a;
 //#endregion

package/lib/esm/components/feedback/OperationFeedback.js.map

@@ -1 +1 @@
-{"version":3,"file":"OperationFeedback.js","names":[],"sources":["../../../../src/components/feedback/OperationFeedback.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { Button } from '../../atomic/atoms/button/Button.js';\nimport { InlineBanner } from './InlineBanner.js';\n\nimport * as styles from './OperationFeedback.css.js';\n\nexport type OperationFeedbackProps = {\n  errorMessage?: string | null;\n  successMessage?: string | null;\n  retryLabel?: string;\n  onRetry?: () => void;\n};\n\nexport const OperationFeedback = ({\n  errorMessage = null,\n  successMessage = null,\n  retryLabel,\n  onRetry,\n}: OperationFeedbackProps): JSX.Element | null => {\n  if (errorMessage == null && successMessage == null) {\n    return null;\n  }\n\n  let retryAction: JSX.Element | null = null;\n  if (errorMessage != null && onRetry != null && retryLabel != null) {\n    retryAction = (\n      <Button type=\"button\" variant=\"secondary\" onClick={onRetry}>\n        {retryLabel}\n      </Button>\n    );\n  }\n\n  return (\n    <div className={styles.stack}>\n      {errorMessage != null && (\n        <InlineBanner tone=\"danger\" actions={retryAction}>\n          {errorMessage}\n        </InlineBanner>\n      )}\n      {successMessage != null && (\n        <InlineBanner tone=\"success\">{successMessage}</InlineBanner>\n      )}\n    </div>\n  );\n};\n\nexport const MutationFeedback = OperationFeedback;\n\nexport default OperationFeedback;\n"],"mappings":";;;;;AAcA,IAAa,KAAqB,EAChC,kBAAe,MACf,oBAAiB,MACjB,eACA,iBACgD;CAChD,IAAI,KAAgB,QAAQ,KAAkB,MAC5C,OAAO;CAGT,IAAI,IAAkC;CAStC,OARI,KAAgB,QAAQ,KAAW,QAAQ,KAAc,SAC3D,IACE,kBAAC,GAAD;EAAQ,MAAK;EAAS,SAAQ;EAAY,SAAS;YAChD;CACK,CAAA,IAKV,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACG,KAAgB,QACf,kBAAC,GAAD;GAAc,MAAK;GAAS,SAAS;aAClC;EACW,CAAA,GAEf,KAAkB,QACjB,kBAAC,GAAD;GAAc,MAAK;aAAW;EAA6B,CAAA,CAE1D;;AAET,GAEa,IAAmB"}
+{"version":3,"file":"OperationFeedback.js","names":[],"sources":["../../../../src/components/feedback/OperationFeedback.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { Button } from '../../atomic/atoms/button/Button.js';\nimport { InlineBanner } from './InlineBanner.js';\n\nimport * as styles from './OperationFeedback.css.js';\n\nexport type OperationFeedbackProps = {\n  errorMessage?: string | null;\n  neutralMessage?: string | null;\n  successMessage?: string | null;\n  retryLabel?: string;\n  onRetry?: () => void;\n};\n\nexport const OperationFeedback = ({\n  errorMessage = null,\n  neutralMessage = null,\n  successMessage = null,\n  retryLabel,\n  onRetry,\n}: OperationFeedbackProps): JSX.Element | null => {\n  if (\n    errorMessage == null &&\n    neutralMessage == null &&\n    successMessage == null\n  ) {\n    return null;\n  }\n\n  let retryAction: JSX.Element | null = null;\n  if (errorMessage != null && onRetry != null && retryLabel != null) {\n    retryAction = (\n      <Button type=\"button\" variant=\"secondary\" onClick={onRetry}>\n        {retryLabel}\n      </Button>\n    );\n  }\n\n  return (\n    <div className={styles.stack}>\n      {errorMessage != null && (\n        <InlineBanner tone=\"danger\" actions={retryAction}>\n          {errorMessage}\n        </InlineBanner>\n      )}\n      {successMessage != null && (\n        <InlineBanner tone=\"success\">{successMessage}</InlineBanner>\n      )}\n      {neutralMessage != null && (\n        <InlineBanner tone=\"info\">{neutralMessage}</InlineBanner>\n      )}\n    </div>\n  );\n};\n\nexport const MutationFeedback = OperationFeedback;\n\nexport default OperationFeedback;\n"],"mappings":";;;;;AAeA,IAAa,KAAqB,EAChC,kBAAe,MACf,oBAAiB,MACjB,oBAAiB,MACjB,eACA,iBACgD;CAChD,IACE,KAAgB,QAChB,KAAkB,QAClB,KAAkB,MAElB,OAAO;CAGT,IAAI,IAAkC;CAStC,OARI,KAAgB,QAAQ,KAAW,QAAQ,KAAc,SAC3D,IACE,kBAAC,GAAD;EAAQ,MAAK;EAAS,SAAQ;EAAY,SAAS;YAChD;CACK,CAAA,IAKV,kBAAC,OAAD;EAAK,WAAW;YAAhB;GACG,KAAgB,QACf,kBAAC,GAAD;IAAc,MAAK;IAAS,SAAS;cAClC;GACW,CAAA;GAEf,KAAkB,QACjB,kBAAC,GAAD;IAAc,MAAK;cAAW;GAA6B,CAAA;GAE5D,KAAkB,QACjB,kBAAC,GAAD;IAAc,MAAK;cAAQ;GAA6B,CAAA;EAEvD;;AAET,GAEa,IAAmB"}

package/lib/esm/components/layout/top_navigation_shell/TopNavigationShell.css.js

@@ -0,0 +1,17 @@
+/* empty css                                      */
+/* empty css                                  */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/components/layout/top_navigation_shell/TopNavigationShell.css.ts
+var t = e({
+	defaultClassName: "_1xrtzaa3 _1xrtzaa0 txvbqbfpn txvbqbh4x txvbqbv7k txvbqb1bg1",
+	variantClassNames: { variant: {
+		default: "_1xrtzaa4 _1xrtzaa1 txvbqb1b87",
+		muted: "_1xrtzaa5 _1xrtzaa2 txvbqb1b89"
+	} },
+	defaultVariants: { variant: "default" },
+	compoundVariants: []
+}), n = "_1xrtzaa6 txvbqbfvs txvbqbu86 txvbqbv7x";
+//#endregion
+export { n as main, t as shell };
+
+//# sourceMappingURL=TopNavigationShell.css.js.map

package/lib/esm/components/layout/top_navigation_shell/TopNavigationShell.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopNavigationShell.css.js","names":[],"sources":["../../../../../src/components/layout/top_navigation_shell/TopNavigationShell.css.ts"],"sourcesContent":["import { recipe } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const shell = recipe({\n  base: sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n    minHeight: 'screen',\n    color: 'text',\n  }),\n  variants: {\n    variant: {\n      default: sprinkles({\n        backgroundColor: 'background',\n      }),\n      muted: sprinkles({\n        backgroundColor: 'backgroundSecondary',\n      }),\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nexport const main = sprinkles({\n  flex: 1,\n  minHeight: 0,\n  minWidth: 0,\n});\n"],"mappings":""}

package/lib/esm/components/layout/top_navigation_shell/TopNavigationShell.js

@@ -0,0 +1,24 @@
+import { cx as e } from "../../../theme/tools.js";
+import { AppHeader as t } from "../AppHeader.js";
+import { main as n, shell as r } from "./TopNavigationShell.css.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/layout/top_navigation_shell/TopNavigationShell.tsx
+var o = ({ actions: o, children: s, className: c, contentClassName: l, headerClassName: u, meta: d, primaryNav: f, secondaryNav: p, subtitle: m, title: h, variant: g = "default" }) => /* @__PURE__ */ a("div", {
+	className: e(r({ variant: g }), c),
+	children: [/* @__PURE__ */ i(t, {
+		actions: o,
+		className: u,
+		meta: d,
+		primaryNav: f,
+		secondaryNav: p,
+		subtitle: m,
+		title: h
+	}), /* @__PURE__ */ i("main", {
+		className: e(n, l),
+		children: s
+	})]
+});
+//#endregion
+export { o as TopNavigationShell, o as default };
+
+//# sourceMappingURL=TopNavigationShell.js.map

package/lib/esm/components/layout/top_navigation_shell/TopNavigationShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopNavigationShell.js","names":[],"sources":["../../../../../src/components/layout/top_navigation_shell/TopNavigationShell.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { AppHeader } from '../AppHeader.js';\nimport { cx } from '../../../theme/tools.js';\n\nimport * as styles from './TopNavigationShell.css.js';\n\nexport type TopNavigationShellVariant = 'default' | 'muted';\n\nexport type TopNavigationShellProps = {\n  title: ReactNode;\n  subtitle?: ReactNode;\n  meta?: ReactNode;\n  primaryNav?: ReactNode;\n  secondaryNav?: ReactNode;\n  actions?: ReactNode;\n  children: ReactNode;\n  className?: string;\n  headerClassName?: string;\n  contentClassName?: string;\n  variant?: TopNavigationShellVariant;\n};\n\nexport const TopNavigationShell = ({\n  actions,\n  children,\n  className,\n  contentClassName,\n  headerClassName,\n  meta,\n  primaryNav,\n  secondaryNav,\n  subtitle,\n  title,\n  variant = 'default',\n}: TopNavigationShellProps): JSX.Element => {\n  return (\n    <div className={cx(styles.shell({ variant }), className)}>\n      <AppHeader\n        actions={actions}\n        className={headerClassName}\n        meta={meta}\n        primaryNav={primaryNav}\n        secondaryNav={secondaryNav}\n        subtitle={subtitle}\n        title={title}\n      />\n      <main className={cx(styles.main, contentClassName)}>{children}</main>\n    </div>\n  );\n};\n\nexport default TopNavigationShell;\n"],"mappings":";;;;;AAuBA,IAAa,KAAsB,EACjC,YACA,aACA,cACA,qBACA,oBACA,SACA,eACA,iBACA,aACA,UACA,aAAU,gBAGR,kBAAC,OAAD;CAAK,WAAW,EAAG,EAAa,EAAE,WAAQ,CAAC,GAAG,CAAS;WAAvD,CACE,kBAAC,GAAD;EACW;EACT,WAAW;EACL;EACM;EACE;EACJ;EACH;CACR,CAAA,GACD,kBAAC,QAAD;EAAM,WAAW,EAAG,GAAa,CAAgB;EAAI;CAAe,CAAA,CACjE"}

package/lib/esm/hooks/useClipboardCopy.js

@@ -0,0 +1,31 @@
+import { copyRichClipboard as e, copyTextToClipboard as t } from "../shared/clipboard.js";
+import { useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
+//#region src/hooks/useClipboardCopy.ts
+function o(o = 2e3) {
+	let [s, c] = a(null), l = i(null), u = n(() => {
+		l.current != null && (window.clearTimeout(l.current), l.current = null);
+	}, []);
+	r(() => () => {
+		u();
+	}, [u]);
+	let d = n((e) => {
+		e != null && (c(e), u(), l.current = window.setTimeout(() => {
+			c(null), l.current = null;
+		}, o));
+	}, [u, o]);
+	return {
+		copiedKey: s,
+		copyText: n(async (e, n) => {
+			let r = await t(e);
+			return r && d(n), r;
+		}, [d]),
+		copyRich: n(async (t, n) => {
+			let r = await e(t);
+			return r && d(n), r;
+		}, [d])
+	};
+}
+//#endregion
+export { o as default, o as useClipboardCopy };
+
+//# sourceMappingURL=useClipboardCopy.js.map

package/lib/esm/hooks/useClipboardCopy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClipboardCopy.js","names":[],"sources":["../../../src/hooks/useClipboardCopy.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport {\n  copyRichClipboard,\n  copyTextToClipboard,\n  type RichClipboardContent,\n} from '../shared/clipboard.js';\n\nexport type UseClipboardCopyResult = {\n  copiedKey: string | null;\n  copyText: (value: string, key?: string) => Promise<boolean>;\n  copyRich: (content: RichClipboardContent, key?: string) => Promise<boolean>;\n};\n\n/** Copy text or rich content while tracking a short-lived copied state. */\nexport function useClipboardCopy(timeoutMs = 2000): UseClipboardCopyResult {\n  const [copiedKey, setCopiedKey] = useState<string | null>(null);\n  const timeoutRef = useRef<number | null>(null);\n\n  const clearTimer = useCallback((): void => {\n    if (timeoutRef.current != null) {\n      window.clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n  }, []);\n\n  useEffect(() => {\n    return () => {\n      clearTimer();\n    };\n  }, [clearTimer]);\n\n  const markCopied = useCallback(\n    (key?: string): void => {\n      if (key == null) {\n        return;\n      }\n\n      setCopiedKey(key);\n      clearTimer();\n      timeoutRef.current = window.setTimeout(() => {\n        setCopiedKey(null);\n        timeoutRef.current = null;\n      }, timeoutMs);\n    },\n    [clearTimer, timeoutMs],\n  );\n\n  const copyText = useCallback(\n    async (value: string, key?: string): Promise<boolean> => {\n      const copied = await copyTextToClipboard(value);\n      if (copied) {\n        markCopied(key);\n      }\n      return copied;\n    },\n    [markCopied],\n  );\n\n  const copyRich = useCallback(\n    async (content: RichClipboardContent, key?: string): Promise<boolean> => {\n      const copied = await copyRichClipboard(content);\n      if (copied) {\n        markCopied(key);\n      }\n      return copied;\n    },\n    [markCopied],\n  );\n\n  return { copiedKey, copyText, copyRich };\n}\n\nexport default useClipboardCopy;\n"],"mappings":";;;AAeA,SAAgB,EAAiB,IAAY,KAA8B;CACzE,IAAM,CAAC,GAAW,KAAgB,EAAwB,IAAI,GACxD,IAAa,EAAsB,IAAI,GAEvC,IAAa,QAAwB;EACzC,AAAI,EAAW,WAAW,SACxB,OAAO,aAAa,EAAW,OAAO,GACtC,EAAW,UAAU;CAEzB,GAAG,CAAC,CAAC;CAEL,cACe;EACX,EAAW;CACb,GACC,CAAC,CAAU,CAAC;CAEf,IAAM,IAAa,GAChB,MAAuB;EAClB,KAAO,SAIX,EAAa,CAAG,GAChB,EAAW,GACX,EAAW,UAAU,OAAO,iBAAiB;GAE3C,AADA,EAAa,IAAI,GACjB,EAAW,UAAU;EACvB,GAAG,CAAS;CACd,GACA,CAAC,GAAY,CAAS,CACxB;CAwBA,OAAO;EAAE;EAAW,UAtBH,EACf,OAAO,GAAe,MAAmC;GACvD,IAAM,IAAS,MAAM,EAAoB,CAAK;GAI9C,OAHI,KACF,EAAW,CAAG,GAET;EACT,GACA,CAAC,CAAU,CAcO;EAAU,UAXb,EACf,OAAO,GAA+B,MAAmC;GACvE,IAAM,IAAS,MAAM,EAAkB,CAAO;GAI9C,OAHI,KACF,EAAW,CAAG,GAET;EACT,GACA,CAAC,CAAU,CAGiB;CAAS;AACzC"}