@pgcorp/ui-kit 0.10.0 → 0.10.1

package/dist/src/components/shared/data-display/SDocBlock.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,252 @@
+import { Copy as e } from "../../icons/sputnigUiIcons.js";
+import { useClipboard as t } from "../../../composables/useClipboard.js";
+import { useUiKitLocale as n } from "../../../composables/useUiKitLocale.js";
+import { useNotifier as r } from "../../../composables/useNotifier.js";
+import { useOwnedAttrs as i } from "../../../internal/ownedAttrs.js";
+import { validateBoolean as a, validateExactString as o, validateNonEmptyString as s } from "../../../internal/runtimeContract.js";
+import { useInteractiveLeafRegistration as c } from "../../../internal/passiveContentContract.js";
+import l from "../controls/SButton.vue.js";
+import u from "../feedback/SAsyncState.vue.js";
+import d from "../controls/SLink.vue.js";
+import { SANITIZED_DOCUMENT_RENDER_ATTRIBUTES as f, SANITIZED_DOCUMENT_TAGS as p, sanitizeDocumentHtml as m } from "../markdown.js";
+import { computed as h, createBlock as g, createCommentVNode as _, createElementBlock as v, createElementVNode as y, createVNode as b, defineComponent as x, h as S, mergeProps as C, onBeforeUnmount as w, openBlock as T, ref as E, shallowRef as D, toDisplayString as O, unref as k, watch as A } from "vue";
+import { marked as j } from "marked";
+//#region src/components/shared/data-display/SDocBlock.vue?vue&type=script&setup=true&lang.ts
+var ee = {
+	key: 0,
+	class: "s-doc-block-header"
+}, te = { class: "s-doc-block-info" }, ne = {
+	key: 0,
+	class: "s-doc-block-filename"
+}, re = {
+	key: 1,
+	class: "s-doc-block-language"
+}, ie = {
+	key: 0,
+	class: "s-doc-block-actions"
+}, M = {
+	key: 2,
+	class: "s-doc-block__content prose dark:prose-invert max-w-none"
+}, N = {
+	key: 3,
+	class: "fallback-pre"
+}, P = /*@__PURE__*/ x({
+	inheritAttrs: !1,
+	__name: "SDocBlock",
+	props: {
+		content: {},
+		mode: {},
+		linkPolicy: { default: "open" },
+		filename: { default: void 0 },
+		showHeader: {
+			type: Boolean,
+			default: !0
+		},
+		showActions: {
+			type: Boolean,
+			default: !0
+		},
+		surfaceRadius: { default: "default" },
+		errorMessage: { default: void 0 }
+	},
+	emits: ["link-click"],
+	setup(P, { emit: F }) {
+		let I = i({
+			component: "SDocBlock",
+			owner: "document block root"
+		});
+		c({ owner: "SDocBlock" });
+		function L(e) {
+			return e.replace(/&/gu, "&amp;").replace(/</gu, "&lt;").replace(/>/gu, "&gt;").replace(/"/gu, "&quot;").replace(/'/gu, "&#39;");
+		}
+		function R(e, t) {
+			let n = !1, r = new j.Renderer();
+			return r.code = ({ text: e, lang: r }) => {
+				let i = (r || "").match(/\S+/)?.[0] ?? "", a = i ? {
+					mode: "explicit",
+					id: i
+				} : null;
+				a !== null && t === null && (n = !0);
+				let o = i ? `language-${L(i.toLowerCase())}` : "", s = a !== null && t !== null && t.isCodeHighlightLanguageSupported(a), c = a !== null && t !== null ? t.highlightCodeToHtml(e, a) : L(e), l = [o, s ? "hljs" : ""].filter(Boolean).join(" ");
+				return `<pre><code${l ? ` class="${l}"` : ""}>${c}</code></pre>\n`;
+			}, {
+				html: j.parse(e, {
+					gfm: !0,
+					breaks: !0,
+					renderer: r
+				}),
+				requiresHighlightRuntime: n
+			};
+		}
+		let z = P, B = F, V = r(), { t: H } = n(), { copyText: U } = t(), W = E(null), G = h(() => {
+			if (typeof z.content != "string") throw TypeError("SDocBlock: content должен быть строкой. / SDocBlock: content must be a string");
+			return {
+				content: z.content,
+				mode: o("SDocBlock", "mode", z.mode, [
+					"markdown",
+					"html",
+					"plaintext"
+				]),
+				linkPolicy: o("SDocBlock", "linkPolicy", z.linkPolicy, ["open", "emit"]),
+				showHeader: a("SDocBlock", "showHeader", z.showHeader),
+				showActions: a("SDocBlock", "showActions", z.showActions),
+				surfaceRadius: o("SDocBlock", "surfaceRadius", z.surfaceRadius, ["default", "none"]),
+				errorMessage: z.errorMessage === void 0 ? void 0 : s("SDocBlock", "errorMessage", z.errorMessage)
+			};
+		}), K = h(() => G.value.mode), q = h(() => {
+			switch (K.value) {
+				case "markdown": return "Markdown";
+				case "html": return "HTML";
+				default: return H("editor.plainText");
+			}
+		}), J = D(""), Y = D(null), X = 0;
+		function ae(e) {
+			return e instanceof Error ? e : /* @__PURE__ */ Error(`SDocBlock: document rendering failed with ${String(e)}.`);
+		}
+		async function oe(e, t) {
+			try {
+				let n = R(e, await import("../../../internal/codeHighlight.js"));
+				if (t !== X) return;
+				J.value = m(n.html);
+			} catch (e) {
+				if (t !== X) return;
+				Y.value = ae(e);
+			}
+		}
+		A(() => [G.value.content, K.value], ([e, t]) => {
+			let n = X += 1;
+			if (Y.value = null, t === "html") {
+				J.value = m(e);
+				return;
+			}
+			if (t === "plaintext") {
+				J.value = "";
+				return;
+			}
+			let r = R(e, null);
+			J.value = m(r.html), r.requiresHighlightRuntime && oe(e, n);
+		}, { immediate: !0 }), w(() => {
+			X += 1;
+		});
+		let se = h(() => {
+			if (Y.value !== null) throw Y.value;
+			if (K.value === "markdown" || K.value === "html") return J.value;
+			throw Error("SDocBlock: document renderer доступен только для markdown/html mode. / SDocBlock: the document renderer is available only in markdown/html mode.");
+		}), ce = new Set(p), Z = new Set(f), le = d;
+		function Q(e, t) {
+			if (e.nodeType === Node.TEXT_NODE) return e.textContent ?? "";
+			if (e.nodeType === Node.COMMENT_NODE) return null;
+			if (!(e instanceof HTMLElement)) throw TypeError(`SDocBlock: unsupported sanitized node type ${e.nodeType}.`);
+			let n = e.tagName.toLowerCase();
+			if (!ce.has(n)) throw TypeError(`SDocBlock: sanitized renderer получил недопустимый tag <${n}>. / SDocBlock: sanitized renderer received unsupported tag <${n}>.`);
+			let r = {};
+			for (let t of e.attributes) {
+				if (!Z.has(t.name)) throw TypeError(`SDocBlock: sanitized renderer получил недопустимый attribute ${t.name}. / SDocBlock: sanitized renderer received unsupported attribute ${t.name}.`);
+				r[t.name] = t.value;
+			}
+			let i = [...e.childNodes].map((e) => Q(e, t));
+			if (n === "a") {
+				let n = r.href?.trim();
+				if (!n) throw TypeError("SDocBlock: sanitized <a> требует href. / SDocBlock: sanitized <a> requires href.");
+				if (!n.startsWith("#") && !URL.canParse(n, window.location.href)) throw TypeError(`SDocBlock: href ${JSON.stringify(n)} не является допустимым URL. / SDocBlock: href ${JSON.stringify(n)} is not a valid URL.`);
+				let a = {
+					href: n,
+					text: e.textContent?.trim() || n,
+					title: r.title ?? null,
+					isExternal: /^(https?:\/\/|mailto:|tel:|file:\/\/)/i.test(n)
+				};
+				return S(le, {
+					href: n,
+					title: a.title ?? void 0,
+					variant: "document",
+					underline: "always",
+					wrap: "anywhere",
+					external: a.isExternal,
+					onClick: (e) => t(e, a)
+				}, { default: () => i });
+			}
+			return S(n, r, i);
+		}
+		let ue = x({
+			name: "SDocumentContent",
+			props: { html: {
+				type: String,
+				required: !0
+			} },
+			emits: { "link-click": (e, t) => e instanceof MouseEvent && typeof t.href == "string" },
+			setup(e, { emit: t }) {
+				return () => {
+					let n = document.createElement("template");
+					return n.innerHTML = e.html, [...n.content.childNodes].map((e) => Q(e, (e, n) => t("link-click", e, n)));
+				};
+			}
+		}), de = async () => {
+			let e = G.value.content;
+			if (!e) return;
+			let t = await U(e);
+			if (t.status === "copied") {
+				V.success({ message: H("clipboard.documentCopied") });
+				return;
+			}
+			V.danger({ message: t.status === "unavailable" ? H("clipboard.clipboardUnavailable") : t.status === "empty" ? H("clipboard.emptyDocument") : `${H("clipboard.documentCopyFailed")} ${t.error.message}` });
+		}, $ = (e) => {
+			if (/^(mailto:|tel:)/i.test(e)) {
+				window.location.href = e;
+				return;
+			}
+			window.open(e, "_blank", "noopener,noreferrer");
+		}, fe = (e) => {
+			let t = e.slice(1);
+			t && [...W.value?.querySelectorAll("[data-s-doc-anchor]") ?? []].find((e) => e.dataset.sDocAnchor === t)?.scrollIntoView({
+				block: "start",
+				behavior: "smooth"
+			});
+		}, pe = (e, t) => {
+			if (e.preventDefault(), e.stopPropagation(), t.href.startsWith("#")) {
+				fe(t.href);
+				return;
+			}
+			if (B("link-click", t), G.value.linkPolicy !== "emit") {
+				if (t.isExternal) {
+					$(t.href);
+					return;
+				}
+				try {
+					$(new URL(t.href, window.location.href).toString());
+				} catch {
+					V.danger({ message: H("feedback.openLinkFailed", { href: t.href }) });
+				}
+			}
+		};
+		return (t, n) => (T(), v("div", C(k(I).bindings(), {
+			ref_key: "rootRef",
+			ref: W,
+			class: ["s-doc-block", { "s-doc-block--radius-none": G.value.surfaceRadius === "none" }]
+		}), [G.value.showHeader && (P.filename || K.value) ? (T(), v("div", ee, [y("div", te, [P.filename ? (T(), v("span", ne, O(P.filename), 1)) : _("", !0), K.value ? (T(), v("span", re, O(q.value), 1)) : _("", !0)]), G.value.showActions ? (T(), v("div", ie, [b(l, {
+			appearance: "text",
+			severity: "secondary",
+			size: "xs",
+			"icon-only": "",
+			"leading-icon": k(e),
+			onClick: de,
+			title: k(H)("clipboard.copyDocument"),
+			"aria-label": k(H)("clipboard.copyDocument")
+		}, null, 8, [
+			"leading-icon",
+			"title",
+			"aria-label"
+		])])) : _("", !0)])) : _("", !0), G.value.errorMessage === void 0 ? K.value === "markdown" || K.value === "html" ? (T(), v("div", M, [b(k(ue), {
+			html: se.value,
+			onLinkClick: pe
+		}, null, 8, ["html"])])) : K.value === "plaintext" ? (T(), v("pre", N, O(G.value.content), 1)) : _("", !0) : (T(), g(u, {
+			key: 1,
+			state: {
+				status: "error",
+				message: G.value.errorMessage
+			},
+			presentation: "block"
+		}, null, 8, ["state"]))], 16));
+	}
+});
+//#endregion
+export { P as default };

package/dist/src/components/shared/data-display/SEmptyState.vue.d.ts

@@ -0,0 +1,27 @@
+import { Component, VNodeChild } from 'vue';
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+    icon?: Component;
+    size?: 'sm' | 'md';
+    presentation?: 'panel' | 'inline';
+};
+type __VLS_Slots = {
+    title?: () => VNodeChild;
+    actions?: () => VNodeChild;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    size: "sm" | "md";
+    icon: Component;
+    presentation: "panel" | "inline";
+    description: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/components/shared/data-display/SEmptyState.vue.js

@@ -0,0 +1,8 @@
+import "../../../../assets/src/components/shared/data-display/SEmptyState.css_vue_type_style_index_0_src_40c7760e_scoped_40c7760e_lang.css";
+import e from "./SEmptyState.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                         */
+import t from "../../../../_virtual/_plugin-vue_export-helper.js";
+//#region src/components/shared/data-display/SEmptyState.vue
+var n = /*#__PURE__*/ t(e, [["__scopeId", "data-v-40c7760e"]]);
+//#endregion
+export { n as default };

package/dist/src/components/shared/data-display/SEmptyState.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,54 @@
+import { useOwnedAttrs as e } from "../../../internal/ownedAttrs.js";
+import { validateExactString as t, validateNonEmptyString as n } from "../../../internal/runtimeContract.js";
+import { PassiveContentBoundary as r } from "../../../internal/passiveContentContract.js";
+import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeProps as f, openBlock as p, renderSlot as m, resolveDynamicComponent as h, toDisplayString as g, unref as _, useSlots as v, watchEffect as y, withCtx as b } from "vue";
+//#region src/components/shared/data-display/SEmptyState.vue?vue&type=script&setup=true&lang.ts
+var x = ["data-size", "data-presentation"], S = { class: "s-empty-state__title" }, C = {
+	key: 1,
+	class: "s-empty-state__description"
+}, w = {
+	key: 2,
+	class: "s-empty-state__actions"
+}, T = /*@__PURE__*/ d({
+	inheritAttrs: !1,
+	__name: "SEmptyState",
+	props: {
+		title: { default: void 0 },
+		description: { default: void 0 },
+		icon: { default: void 0 },
+		size: { default: "md" },
+		presentation: { default: "panel" }
+	},
+	setup(d) {
+		let T = d, E = v(), D = e({
+			component: "SEmptyState",
+			owner: "empty state root"
+		}), O = i(() => t("SEmptyState", "size", T.size, ["sm", "md"])), k = i(() => t("SEmptyState", "presentation", T.presentation, ["panel", "inline"])), A = i(() => T.title === void 0 ? void 0 : n("SEmptyState", "title", T.title)), j = i(() => T.description === void 0 ? void 0 : n("SEmptyState", "description", T.description)), M = {
+			owner: "SEmptyState",
+			region: "empty-state title",
+			guidance: "Передайте действия через actions slot. / Pass actions through the actions slot."
+		};
+		return y(() => {
+			if (A.value !== void 0 == !!E.title) throw Error("SEmptyState: требуется ровно один источник title — prop или title slot. / SEmptyState: exactly one title source is required: the prop or the title slot.");
+		}), (e, t) => (p(), s("div", f(_(D).bindings(), {
+			class: "s-empty-state",
+			"data-size": O.value,
+			"data-presentation": k.value,
+			role: "status"
+		}), [
+			d.icon ? (p(), a(h(d.icon), {
+				key: 0,
+				class: "s-empty-state__icon",
+				"aria-hidden": "true"
+			})) : o("", !0),
+			c("div", S, [u(_(r), { contract: M }, {
+				default: b(() => [m(e.$slots, "title", {}, () => [l(g(A.value), 1)], !0)]),
+				_: 3
+			})]),
+			j.value ? (p(), s("span", C, g(j.value), 1)) : o("", !0),
+			e.$slots.actions ? (p(), s("div", w, [m(e.$slots, "actions", {}, void 0, !0)])) : o("", !0)
+		], 16, x));
+	}
+});
+//#endregion
+export { T as default };

package/dist/src/components/shared/data-display/SExpandableText.vue.d.ts

@@ -0,0 +1,42 @@
+import { ExpandedContentMaxBlockSize } from '../../../internal/semanticSizing';
+/** Семантический max block-size раскрытого текста. / Semantic expanded-text max block size. */
+export type ExpandedTextMaxHeight = ExpandedContentMaxBlockSize;
+/** Точное число строк в collapsed preview. / Exact line count in the collapsed preview. */
+export type ExpandedTextCollapsedLineCount = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+/** Семантическая типографическая роль. / Semantic typography role. */
+export type ExpandedTextTypography = 'body' | 'title' | 'label' | 'meta';
+/** Владеемая компонентом surface presentation. / Component-owned surface presentation. */
+export type ExpandedTextAppearance = 'plain' | 'preview' | 'surface';
+type __VLS_Props = {
+    text: string;
+    /** Число видимых строк без clamp/fallback. / Visible line count without clamping or fallback. */
+    collapsedLines?: ExpandedTextCollapsedLineCount;
+    /** Эвристический порог до DOM measurement, целое 1…100000. / Pre-measure heuristic, integer 1…100000. */
+    thresholdChars?: number;
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    monospace?: boolean;
+    copyable?: boolean;
+    expandedMaxHeight?: ExpandedTextMaxHeight;
+    /** Семантическая роль текста, не произвольный набор font classes. / Semantic text role, not arbitrary font classes. */
+    typography?: ExpandedTextTypography;
+    /** Повторяемая owned surface для preview/state blocks. / Reusable owned surface for preview/state blocks. */
+    appearance?: ExpandedTextAppearance;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:expanded": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
+}>, {
+    appearance: ExpandedTextAppearance;
+    expanded: boolean;
+    monospace: boolean;
+    typography: ExpandedTextTypography;
+    collapsedLines: ExpandedTextCollapsedLineCount;
+    thresholdChars: number;
+    defaultExpanded: boolean;
+    copyable: boolean;
+    expandedMaxHeight: ExpandedTextMaxHeight;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/src/components/shared/data-display/SExpandableText.vue.js

@@ -0,0 +1,8 @@
+import "../../../../assets/src/components/shared/data-display/SExpandableText.vue_vue_type_style_index_0_scoped_01b69142_lang.css";
+import e from "../../../../_virtual/_plugin-vue_export-helper.js";
+import t from "./SExpandableText.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                */
+//#region src/components/shared/data-display/SExpandableText.vue
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-01b69142"]]);
+//#endregion
+export { n as default };

package/dist/src/components/shared/data-display/SExpandableText.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,166 @@
+import { Copy as e } from "../../icons/sputnigUiIcons.js";
+import { useClipboard as t } from "../../../composables/useClipboard.js";
+import { useUiKitLocale as n } from "../../../composables/useUiKitLocale.js";
+import { useNotifier as r } from "../../../composables/useNotifier.js";
+import { useOwnedAttrs as i } from "../../../internal/ownedAttrs.js";
+import { validateBoundedInteger as a } from "../../../internal/runtimeContract.js";
+import o from "../controls/SButton.vue.js";
+import { validateExpandedContentMaxBlockSize as s } from "../../../internal/semanticSizing.js";
+import { computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, defineComponent as p, mergeProps as m, nextTick as h, normalizeClass as g, normalizeStyle as _, onBeforeUnmount as v, onMounted as y, openBlock as b, ref as x, toDisplayString as S, unref as C, useId as w, watch as T } from "vue";
+//#region src/components/shared/data-display/SExpandableText.vue?vue&type=script&setup=true&lang.ts
+var E = [
+	"data-expanded",
+	"data-expanded-max-height",
+	"data-typography",
+	"data-appearance"
+], D = {
+	key: 0,
+	class: "s-expandable-text-actions"
+}, O = /*@__PURE__*/ p({
+	inheritAttrs: !1,
+	__name: "SExpandableText",
+	props: {
+		text: {},
+		collapsedLines: { default: 3 },
+		thresholdChars: { default: 220 },
+		expanded: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultExpanded: {
+			type: Boolean,
+			default: !1
+		},
+		monospace: {
+			type: Boolean,
+			default: !1
+		},
+		copyable: {
+			type: Boolean,
+			default: !0
+		},
+		expandedMaxHeight: { default: "md" },
+		typography: { default: "body" },
+		appearance: { default: "plain" }
+	},
+	emits: ["update:expanded"],
+	setup(p, { emit: O }) {
+		let k = {
+			minimum: 1,
+			maximum: 12
+		}, ee = {
+			minimum: 1,
+			maximum: 1e5
+		}, A = p, j = O, M = r(), { t: N } = n(), { copyText: P } = t(), F = x(null), I = i({
+			component: "SExpandableText",
+			owner: "expandable text root"
+		}), L = x(!1), R = x(A.defaultExpanded), z = `s-expandable-text-${w()}`, B = null, V = null, H = c(() => {
+			let e = a("SExpandableText", "collapsedLines", A.collapsedLines, k);
+			switch (e) {
+				case 1:
+				case 2:
+				case 3:
+				case 4:
+				case 5:
+				case 6:
+				case 7:
+				case 8:
+				case 9:
+				case 10:
+				case 11:
+				case 12: return e;
+			}
+			throw TypeError("SExpandableText: unreachable collapsedLines contract state.");
+		}), U = c(() => a("SExpandableText", "thresholdChars", A.thresholdChars, ee)), W = c(() => (A.text.match(/\r\n|[\r\n]/gu)?.length ?? 0) + 1), G = c(() => A.text.length > U.value || W.value > H.value), K = c(() => G.value || L.value), q = c(() => A.expanded !== void 0), J = c({
+			get: () => q.value ? !!A.expanded : R.value,
+			set: (e) => {
+				if (q.value) {
+					j("update:expanded", e);
+					return;
+				}
+				R.value = e, j("update:expanded", e);
+			}
+		}), Y = c(() => ({ "--s-expandable-text-lines": String(H.value) })), X = c(() => s("SExpandableText", "expandedMaxHeight", A.expandedMaxHeight));
+		function Z() {
+			V !== null && (window.cancelAnimationFrame(V), V = null);
+		}
+		function Q() {
+			let e = F.value;
+			e && !J.value && (L.value = e.scrollHeight > e.clientHeight + 1);
+		}
+		function $() {
+			Z(), V = window.requestAnimationFrame(() => {
+				V = null, Q();
+			});
+		}
+		function te() {
+			J.value = !J.value, J.value || h($);
+		}
+		async function ne() {
+			if (!A.text) return;
+			let e = await P(A.text);
+			if (e.status === "copied") {
+				M.success({ message: N("clipboard.textCopied") });
+				return;
+			}
+			M.danger({
+				title: N("clipboard.copyErrorTitle"),
+				message: e.status === "unavailable" ? N("clipboard.clipboardUnavailable") : e.status === "empty" ? N("clipboard.emptyText") : `${N("clipboard.textCopyFailed")} ${e.error.message}`
+			});
+		}
+		return T(() => A.text, () => {
+			L.value = !1, h($);
+		}), y(() => {
+			h($), typeof ResizeObserver < "u" && F.value && (B = new ResizeObserver($), B.observe(F.value));
+		}), v(() => {
+			Z(), B?.disconnect(), B = null;
+		}), (t, n) => (b(), d("div", m(C(I).bindings(), {
+			class: "s-expandable-text",
+			"data-expanded": J.value ? "true" : "false",
+			"data-expanded-max-height": X.value,
+			"data-typography": p.typography,
+			"data-appearance": p.appearance
+		}), [f("div", {
+			id: z,
+			ref_key: "contentEl",
+			ref: F,
+			class: g(["s-expandable-text-content", {
+				"s-expandable-text-content--mono": p.monospace,
+				"s-expandable-text-content--collapsed": K.value && !J.value,
+				"s-expandable-text-content--expanded": J.value
+			}]),
+			style: _(Y.value)
+		}, S(p.text), 7), K.value || p.copyable ? (b(), d("div", D, [K.value ? (b(), l(o, {
+			key: 0,
+			appearance: "text",
+			severity: "secondary",
+			size: "sm",
+			label: J.value ? C(N)("actions.collapse") : C(N)("actions.expand"),
+			disclosure: {
+				expanded: J.value,
+				controls: z,
+				iconPlacement: "leading"
+			},
+			onClick: te
+		}, null, 8, ["label", "disclosure"])) : u("", !0), p.copyable ? (b(), l(o, {
+			key: 1,
+			appearance: "text",
+			severity: "secondary",
+			size: "sm",
+			shape: "circle",
+			"icon-only": "",
+			"leading-icon": C(e),
+			title: C(N)("clipboard.copyText"),
+			"aria-label": C(N)("clipboard.copyText"),
+			disabled: !p.text,
+			onClick: ne
+		}, null, 8, [
+			"leading-icon",
+			"title",
+			"aria-label",
+			"disabled"
+		])) : u("", !0)])) : u("", !0)], 16, E));
+	}
+});
+//#endregion
+export { O as default };

package/dist/src/components/shared/data-display/SJsonTree.vue.d.ts

@@ -0,0 +1,15 @@
+import { JsonValue } from './json';
+export interface Props {
+    value: JsonValue;
+    initiallyCollapsed?: boolean;
+}
+declare function expandAll(): void;
+declare function collapseAll(): void;
+declare const __VLS_export: import('vue').DefineComponent<Props, {
+    expandAll: typeof expandAll;
+    collapseAll: typeof collapseAll;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    initiallyCollapsed: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/src/components/shared/data-display/SJsonTree.vue.js

@@ -0,0 +1,8 @@
+import "../../../../assets/src/components/shared/data-display/SJsonTree.css_vue_type_style_index_0_src_54527df1_scoped_54527df1_lang.css";
+import e from "../../../../_virtual/_plugin-vue_export-helper.js";
+import t from "./SJsonTree.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                       */
+//#region src/components/shared/data-display/SJsonTree.vue
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-54527df1"]]);
+//#endregion
+export { n as default };