@plitzi/sdk-elements 0.38.3 → 0.38.5

package/dist/Element/hooks/useElementVisible.mjs

@@ -0,0 +1,25 @@
+import { useEffect as e, useState as t } from "react";
+import n from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+//#region src/Element/hooks/useElementVisible.ts
+var r = (e) => typeof e.checkVisibility == "function" ? e.checkVisibility() : e.getClientRects().length > 0, i = (i) => {
+	let { utils: { rootRef: a } } = n(), [o, s] = t(void 0);
+	return e(() => {
+		let e = a.current, t = e?.ownerDocument.defaultView;
+		if (!e || !t || !i) return;
+		let n = `[data-plitzi-el="${t.CSS.escape(i)}"]`, o = () => s([...e.querySelectorAll(n)].some(r)), c = 0, l = new t.MutationObserver(() => {
+			c ||= t.requestAnimationFrame(() => {
+				c = 0, o();
+			});
+		});
+		return l.observe(e, {
+			subtree: !0,
+			childList: !0,
+			attributes: !0,
+			attributeFilter: ["class", "style"]
+		}), t.addEventListener("resize", o), o(), () => {
+			l.disconnect(), t.removeEventListener("resize", o), t.cancelAnimationFrame(c);
+		};
+	}, [i, a]), o;
+};
+//#endregion
+export { i as default };

package/dist/Element/hooks/useRscData.d.ts

@@ -14,6 +14,10 @@ declare const useRscData: <T>() => {
     location: string | undefined;
     elementData: NonNullable<T> | null;
     isServerElement: boolean;
+    /** A refresh asking about this element — or about the whole payload of this page — is in flight. */
+    refreshing: boolean;
     refresh: (ids?: string[], params?: Record<string, string>) => Promise<void>;
+    /** Stops this element's refresh in flight, here and on the server; what it shows stays. */
+    cancel: () => void;
 };
 export default useRscData;

package/dist/Element/hooks/useRscData.mjs

@@ -1,30 +1,34 @@
 import e from "./useElement.mjs";
-import { useRef as t } from "react";
-import { useCommonStore as n } from "@plitzi/sdk-shared/store";
-import { currentRscLocation as r, rscDataPath as i } from "@plitzi/sdk-shared/server/rsc/refreshRsc";
-import a from "@plitzi/sdk-shared/server/rsc/useRscRefresh";
+import { useCallback as t, useRef as n } from "react";
+import { useCommonStore as r } from "@plitzi/sdk-shared/store";
+import { useStoreById as i } from "@plitzi/nexus/react";
+import { cancelRsc as a, currentRscLocation as o, rscDataPath as s } from "@plitzi/sdk-shared/server/rsc/refreshRsc";
+import c from "@plitzi/sdk-shared/server/rsc/useRscRefresh";
 //#region src/Element/hooks/useRscData.ts
-var o = () => {
-	let { id: o, rootId: s } = e(), [[c = !1, l = !1, u = !1, d, f, p, m]] = n([
+var l = () => {
+	let { id: l, rootId: u } = e(), [[d = !1, f = !1, p = !1, m, h, g, _, v]] = r([
 		"rsc.enabled",
 		"rsc.loaded",
 		"rsc.stale",
 		"rsc.location",
-		i(o),
+		s(l),
 		"navigation.currentPageId",
-		"schema.pages"
-	]), h = a(), g = d !== void 0 && d !== r() || s !== void 0 && s !== p && Array.isArray(m) && m.includes(s), _ = t(void 0);
-	!g && f !== void 0 && (_.current = f);
-	let v = g && _.current !== void 0 ? _.current : f;
+		"schema.pages",
+		"rsc.refreshing"
+	]), y = c(), b = i(), x = t(() => a(b, [l]), [b, l]), S = m !== void 0 && m !== o() || u !== void 0 && u !== g && Array.isArray(_) && _.includes(u), C = n(void 0);
+	!S && h !== void 0 && (C.current = h);
+	let w = S && C.current !== void 0 ? C.current : h;
 	return {
-		enabled: c,
-		loaded: l,
-		stale: u,
-		location: d,
-		elementData: v ?? null,
-		isServerElement: v !== void 0,
-		refresh: h
+		enabled: d,
+		loaded: f,
+		stale: p,
+		location: m,
+		elementData: w ?? null,
+		isServerElement: w !== void 0,
+		refreshing: v?.[l] === !0 || v?.["*"] === !0,
+		refresh: y,
+		cancel: x
 	};
 };
 //#endregion
-export { o as default };
+export { l as default };

package/dist/dataSource/GlobalSources.mjs

@@ -1,64 +1,68 @@
 import { use as e, useCallback as t, useEffect as n, useMemo as r, useRef as i } from "react";
 import { useCommonStore as a, useCommonStoreSync as o, useRenderSettings as s } from "@plitzi/sdk-shared/store";
-import { get as ee } from "@plitzi/plitzi-ui/helpers";
-import { flagValues as c, undeclaredFlagOverrides as l } from "@plitzi/sdk-shared/flags";
-import { getPathsFromObeject as u } from "@plitzi/sdk-shared/helpers/utils";
-import { evaluateComputed as d, resolveVariables as te } from "@plitzi/sdk-shared/dataSource";
-import ne, { SPACE_THEME_AREA as f } from "@plitzi/sdk-shared/theme/useTheme";
-import p from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
-import m from "@plitzi/sdk-auth/AuthContext";
-import h from "@plitzi/sdk-shared/flags/useFlagResolution";
-import g from "@plitzi/sdk-shared/hooks/useStableValue";
+import { get as c } from "@plitzi/plitzi-ui/helpers";
+import { flagValues as l, undeclaredFlagOverrides as u } from "@plitzi/sdk-shared/flags";
+import { getPathsFromObeject as d } from "@plitzi/sdk-shared/helpers/utils";
+import { evaluateComputed as ee, resolveVariables as te } from "@plitzi/sdk-shared/dataSource";
+import ne, { SPACE_THEME_AREA as re } from "@plitzi/sdk-shared/theme/useTheme";
+import f from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
+import p from "@plitzi/sdk-auth/AuthContext";
+import m from "@plitzi/sdk-shared/flags/useFlagResolution";
+import h from "@plitzi/sdk-shared/hooks/useStableValue";
 //#region src/dataSource/GlobalSources.tsx
-var _ = ({ children: _ }) => {
-	let { environment: v } = s(), [[y, b, x, S, C, w, T]] = a([
+var g = ({ children: g }) => {
+	let { environment: _ } = s(), [[v, y, b, x, S, C, w, T = ""]] = a([
 		"schema.variables",
 		"navigation.routeParams",
 		"navigation.queryParams",
 		"navigation.hostname",
 		"navigation.origin",
 		"navigation.href",
-		"navigation.currentPageId"
-	]), E = g(r(() => te(y, {
-		routeParams: b,
-		queryParams: x,
-		hostname: S,
-		environment: v
+		"navigation.currentPageId",
+		"navigation.pendingLocation"
+	]), E = h(r(() => te(v, {
+		routeParams: y,
+		queryParams: b,
+		hostname: x,
+		environment: _
 	}), [
-		v,
-		S,
+		_,
 		x,
 		b,
-		y
-	])), re = t(() => u(E).map((e) => ({
+		y,
+		v
+	])), ie = t(() => d(E).map((e) => ({
 		path: e,
 		name: `variables.${e}`
 	})), [E]);
-	p({
+	f({
 		id: "global",
 		source: "variables",
 		name: "Variables",
-		fields: re
+		fields: ie
 	}), o("runtime.sources.variables", E);
 	let [D = {}] = a("pageDefinitions"), O = r(() => Object.values(D).map((e) => ({
 		value: e.id,
-		label: ee(e, "attributes.name", e.id)
+		label: c(e, "attributes.name", e.id)
 	})), [D]), k = r(() => ({
-		routeParams: b,
-		queryParams: x,
-		origin: C,
-		href: w,
-		currentPageId: T
+		routeParams: y,
+		queryParams: b,
+		origin: S,
+		href: C,
+		currentPageId: w,
+		pending: T !== "",
+		pendingLocation: T
 	}), [
+		y,
 		b,
-		x,
+		S,
 		C,
 		w,
 		T
 	]), A = t(() => {
-		let e = u({
-			routeParams: b,
-			queryParams: x
+		let e = d({
+			routeParams: y,
+			queryParams: b
 		}).map((e) => ({
 			path: e,
 			name: `navigation.${e}`
@@ -68,7 +72,13 @@ var _ = ({ children: _ }) => {
 		}, n = {
 			path: "href",
 			name: "This page’s address"
-		}, r = O.length > 0 ? {
+		}, r = [{
+			path: "pending",
+			name: "A navigation is on its way"
+		}, {
+			path: "pendingLocation",
+			name: "Where a navigation is going"
+		}], i = O.length > 0 ? {
 			path: "currentPageId",
 			name: "Current Page",
 			inputType: "select",
@@ -81,20 +91,21 @@ var _ = ({ children: _ }) => {
 			...e,
 			t,
 			n,
-			r
+			...r,
+			i
 		];
 	}, [
+		y,
 		b,
-		x,
 		O
 	]);
-	p({
+	f({
 		id: "global",
 		source: "navigation",
 		name: "Navigation",
 		fields: A
 	}), o("runtime.sources.navigation", k);
-	let j = e(m), { user: M, authenticated: N, state: P } = j, [F = "basic"] = a("schema.settings.userProvider"), I = r(() => F === "" ? {} : {
+	let j = e(p), { user: M, authenticated: N, state: P } = j, [F = "basic"] = a("schema.settings.userProvider"), I = r(() => F === "" ? {} : {
 		isAuthenticated: N,
 		...P === void 0 ? {} : { status: P },
 		accessToken: M?.accessToken ?? "",
@@ -111,65 +122,65 @@ var _ = ({ children: _ }) => {
 		M,
 		N,
 		P
-	]), L = t(() => u(I).map((e) => ({
+	]), L = t(() => d(I).map((e) => ({
 		path: e,
 		name: `user.${e}`
 	})), [I]);
-	p({
+	f({
 		id: "global",
 		source: "auth",
 		name: "Auth State",
 		fields: L
 	}), o("runtime.sources.auth", I);
-	let R = h(j), z = r(() => c(R), [R]), B = t(() => Object.keys(z).map((e) => ({
+	let R = m(j), z = r(() => l(R), [R]), B = t(() => Object.keys(z).map((e) => ({
 		path: e,
 		name: `flags.${e}`,
 		inputType: "checkbox"
 	})), [z]);
-	p({
+	f({
 		id: "global",
 		source: "flags",
 		name: "Feature Flags",
 		fields: B
 	}), o("runtime.sources.flags", z), o("flags.resolved", R);
-	let [V, H] = a(["schema.flags", "flags.overrides"])[0], U = g(l(V, H ?? {}));
+	let [V, H] = a(["schema.flags", "flags.overrides"])[0], U = h(u(V, H ?? {}));
 	n(() => {
 		U.forEach(({ layer: e, name: t }) => console.warn(`[plitzi] The ${e} sets the feature flag "${t}", which this space does not declare: the override is ignored. Declare the flag in the space, or remove the override.`));
 	}, [U]);
-	let [W] = a("runtime.state"), G = t(() => u(W).map((e) => ({
+	let [W] = a("runtime.state"), G = t(() => d(W).map((e) => ({
 		path: e,
 		name: `state.${e}`
 	})), [W]);
-	p({
+	f({
 		id: "global",
 		source: "state",
 		name: "State",
 		fields: G
 	}), o("runtime.sources.state", W);
-	let [K] = a("runtime.host"), q = t(() => u(K).map((e) => ({
+	let [K] = a("runtime.host"), q = t(() => d(K).map((e) => ({
 		path: e,
 		name: `host.${e}`
 	})), [K]);
-	p({
+	f({
 		id: "global",
 		source: "host",
 		name: "Host",
 		fields: q
 	}), o("runtime.sources.host", K);
-	let { theme: J, resolvedTheme: Y } = ne(f), X = r(() => ({
+	let { theme: J, resolvedTheme: Y } = ne(re), X = r(() => ({
 		mode: J,
 		resolved: Y
-	}), [J, Y]), ie = t(() => u(X).map((e) => ({
+	}), [J, Y]), ae = t(() => d(X).map((e) => ({
 		path: e,
 		name: `theme.${e}`
 	})), [X]);
-	p({
+	f({
 		id: "global",
 		source: "theme",
 		name: "Theme",
-		fields: ie
+		fields: ae
 	}), o("runtime.sources.theme", X);
-	let [Z] = a("schema.settings.computed"), Q = i(void 0), $ = r(() => d(Z ?? {}, {
+	let [Z] = a("schema.settings.computed"), Q = i(void 0), $ = r(() => ee(Z ?? {}, {
 		variables: E,
 		navigation: k,
 		auth: I,
@@ -188,16 +199,16 @@ var _ = ({ children: _ }) => {
 		z
 	]);
 	Q.current = $;
-	let ae = t(() => u($).map((e) => ({
+	let oe = t(() => d($).map((e) => ({
 		path: e,
 		name: `computed.${e}`
 	})), [$]);
-	return p({
+	return f({
 		id: "global",
 		source: "computed",
 		name: "Computed",
-		fields: ae
-	}), o("runtime.sources.computed", $), _;
+		fields: oe
+	}), o("runtime.sources.computed", $), g;
 };
 //#endregion
-export { _ as default };
+export { g as default };

package/dist/elements/basic/Button/Button.d.ts

@@ -24,6 +24,11 @@ export type ButtonProps = {
     ariaExpanded?: boolean;
     /** For a button that stays on or off — a filter, a mode: `true` while it is on. Left out, it is a plain button. */
     ariaPressed?: boolean;
+    /**
+     * What the button shows and hides — an accordion's panel, a menu — by its anchor (`aria-controls`), so a screen
+     * reader can go from one to the other. Authoring takes the element's id and gives that element the anchor.
+     */
+    controls?: string;
     /**
      * What the button does, in words — shown as a tooltip on hover, and the button's accessible name when it has no text
      * of its own. An icon-only button without one is announced as nothing at all.
@@ -40,7 +45,7 @@ export type ButtonProps = {
      */
     label?: string;
 };
-declare const Button: ({ ref, className, children, contentPlacement, content, icon, iconPlacement, subType, disabled, ariaExpanded, ariaPressed, title, label }: ButtonProps) => import('react').JSX.Element;
+declare const Button: ({ ref, className, children, contentPlacement, content, icon, iconPlacement, subType, disabled, ariaExpanded, ariaPressed, controls, title, label }: ButtonProps) => import('react').JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<ButtonProps>): import('react').JSX.Element;
     displayName: string;

package/dist/elements/basic/Button/Button.mjs

@@ -6,31 +6,32 @@ import i from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import s from "clsx";
 //#region src/elements/basic/Button/Button.tsx
-var c = ({ ref: e, className: c = "", children: l, contentPlacement: u = "after", content: d = "Button", icon: f = "", iconPlacement: p = "before", subType: m = "button", disabled: h = !1, ariaExpanded: g, ariaPressed: _, title: v, label: y }) => {
-	let { settings: { previewMode: b } } = i(), { definition: { styleSelectors: x } } = t();
+var c = ({ ref: e, className: c = "", children: l, contentPlacement: u = "after", content: d = "Button", icon: f = "", iconPlacement: p = "before", subType: m = "button", disabled: h = !1, ariaExpanded: g, ariaPressed: _, controls: v, title: y, label: b }) => {
+	let { settings: { previewMode: x } } = i(), { definition: { styleSelectors: S } } = t();
 	return /* @__PURE__ */ o(n, {
 		ref: e,
 		tag: "button",
-		type: b ? m : "button",
-		className: s("plitzi-component__button", c, { "container--empty--skip": !b && !l && (d || f) }),
+		type: x ? m : "button",
+		className: s("plitzi-component__button", c, { "container--empty--skip": !x && !l && (d || f) }),
 		disabled: h,
-		title: v || void 0,
-		"aria-label": y || void 0,
+		title: y || void 0,
+		"aria-label": b || void 0,
 		"aria-expanded": g,
 		"aria-pressed": _,
+		"aria-controls": v || void 0,
 		children: [
 			u === "before" && /* @__PURE__ */ a(r, {
 				content: d,
 				icon: f,
 				iconPlacement: p,
-				iconClassName: x.icon
+				iconClassName: S.icon
 			}),
 			l,
 			u === "after" && /* @__PURE__ */ a(r, {
 				content: d,
 				icon: f,
 				iconPlacement: p,
-				iconClassName: x.icon
+				iconClassName: S.icon
 			})
 		]
 	});

package/dist/elements/basic/Button/declaration.d.ts

@@ -48,7 +48,7 @@ declare const declaration: {
             readonly license: "MIT";
             readonly website: "https://plitzi.com";
             readonly backgroundColor: "#4422ee";
-            readonly icon: "fa-solid fa-stop";
+            readonly icon: "fa-solid fa-hand-pointer";
         };
         readonly defaultStyle: {
             readonly name: "Button";
@@ -131,6 +131,7 @@ declare const declaration: {
     title?: string | undefined;
     content?: string | undefined;
     disabled?: boolean | undefined;
+    controls?: string | undefined;
     icon?: string | undefined;
     subType?: "button" | "submit" | "reset" | undefined;
     iconPlacement?: import('../../../Element/ElementWords').IconPlacement | undefined;

package/dist/elements/basic/Button/declaration.mjs

@@ -48,7 +48,7 @@ var n = e()({
 			license: "MIT",
 			website: "https://plitzi.com",
 			backgroundColor: "#4422ee",
-			icon: "fa-solid fa-stop"
+			icon: "fa-solid fa-hand-pointer"
 		},
 		defaultStyle: {
 			name: "Button",

package/dist/elements/basic/Button/index.d.ts

@@ -47,7 +47,7 @@ declare const Button: {
             readonly license: "MIT";
             readonly website: "https://plitzi.com";
             readonly backgroundColor: "#4422ee";
-            readonly icon: "fa-solid fa-stop";
+            readonly icon: "fa-solid fa-hand-pointer";
         };
         readonly defaultStyle: {
             readonly name: "Button";
@@ -130,6 +130,7 @@ declare const Button: {
     title?: string | undefined;
     content?: string | undefined;
     disabled?: boolean | undefined;
+    controls?: string | undefined;
     icon?: string | undefined;
     subType?: "button" | "submit" | "reset" | undefined;
     iconPlacement?: import('../../../Element/ElementWords').IconPlacement | undefined;

package/dist/elements/basic/Dropdown/DropdownPopup/declaration.d.ts

@@ -34,7 +34,7 @@ declare const declaration: {
             readonly license: "MIT";
             readonly website: "https://plitzi.com";
             readonly backgroundColor: "#4422ee";
-            readonly icon: "";
+            readonly icon: "fa-regular fa-window-restore";
         };
         readonly defaultStyle: {
             readonly name: "Dropdown Popup";

package/dist/elements/basic/Dropdown/DropdownPopup/declaration.mjs

@@ -30,7 +30,7 @@ var t = e()({
 			license: "MIT",
 			website: "https://plitzi.com",
 			backgroundColor: "#4422ee",
-			icon: ""
+			icon: "fa-regular fa-window-restore"
 		},
 		defaultStyle: {
 			name: "Dropdown Popup",

package/dist/elements/basic/Dropdown/DropdownPopup/index.d.ts

@@ -33,7 +33,7 @@ declare const DropdownPopup: {
             readonly license: "MIT";
             readonly website: "https://plitzi.com";
             readonly backgroundColor: "#4422ee";
-            readonly icon: "";
+            readonly icon: "fa-regular fa-window-restore";
         };
         readonly defaultStyle: {
             readonly name: "Dropdown Popup";

package/dist/elements/basic/Dropdown/index.d.ts

@@ -38,7 +38,7 @@ declare const Dropdown: {
                     readonly license: "MIT";
                     readonly website: "https://plitzi.com";
                     readonly backgroundColor: "#4422ee";
-                    readonly icon: "";
+                    readonly icon: "fa-regular fa-window-restore";
                 };
                 readonly defaultStyle: {
                     readonly name: "Dropdown Popup";

package/dist/elements/basic/Markdown/Markdown.d.ts

@@ -1,8 +1,8 @@
 import { RefObject } from 'react';
 export type MarkdownProps = {
-    ref: RefObject<HTMLElement>;
-    className: string;
-    content: string;
+    ref?: RefObject<HTMLElement>;
+    className?: string;
+    content?: string;
 };
 declare const Markdown: ({ ref, content, className }: MarkdownProps) => import('react').JSX.Element;
 declare const _default: {

package/dist/elements/basic/Markdown/Markdown.mjs

@@ -4,14 +4,18 @@ import n from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
 import { jsx as r } from "react/jsx-runtime";
 import i from "clsx";
 import a from "@plitzi/plitzi-ui/Markdown";
+import { uniqueAnchor as o } from "@plitzi/sdk-shared/schema/anchor";
 //#region src/elements/basic/Markdown/Markdown.tsx
-var o = ({ ref: e, content: o = "Markdown", className: s = "" }) => {
-	let { settings: { previewMode: c } } = n();
+var s = ({ ref: e, content: s = "Markdown", className: c = "" }) => {
+	let { settings: { previewMode: l } } = n();
 	return /* @__PURE__ */ r(t, {
 		ref: e,
-		className: i("plitzi-component__markdown", { "plitzi-component__markdown--edit-mode": !c }, s),
-		children: /* @__PURE__ */ r(a, { children: o })
+		className: i("plitzi-component__markdown", { "plitzi-component__markdown--edit-mode": !l }, c),
+		children: /* @__PURE__ */ r(a, {
+			headingAnchor: o,
+			children: s
+		})
 	});
-}, s = e(o);
+}, c = e(s);
 //#endregion
-export { o as Markdown, s as default };
+export { s as Markdown, c as default };

package/dist/elements/basic/Markdown/declaration.d.ts

@@ -53,6 +53,6 @@ declare const declaration: {
         readonly settings: {};
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
-    content: string;
+    content?: string | undefined;
 }>>;
 export default declaration;

package/dist/elements/basic/Markdown/index.d.ts

@@ -52,6 +52,6 @@ declare const Markdown: {
         readonly settings: {};
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
-    content: string;
+    content?: string | undefined;
 }>>;
 export default Markdown;

package/dist/elements/basic/RichText/declaration.d.ts

@@ -42,7 +42,7 @@ declare const declaration: {
             readonly license: "MIT";
             readonly website: "https://plitzi.com";
             readonly backgroundColor: "#4422ee";
-            readonly icon: "fa-solid fa-align-left";
+            readonly icon: "fa-solid fa-file-lines";
         };
         readonly defaultStyle: {
             readonly name: "Rich Text";

package/dist/elements/basic/RichText/declaration.mjs

@@ -38,7 +38,7 @@ var n = e()({
 			license: "MIT",
 			website: "https://plitzi.com",
 			backgroundColor: "#4422ee",
-			icon: "fa-solid fa-align-left"
+			icon: "fa-solid fa-file-lines"
 		},
 		defaultStyle: {
 			name: "Rich Text",

package/dist/elements/basic/RichText/index.d.ts

@@ -41,7 +41,7 @@ declare const RichText: {
             readonly license: "MIT";
             readonly website: "https://plitzi.com";
             readonly backgroundColor: "#4422ee";
-            readonly icon: "fa-solid fa-align-left";
+            readonly icon: "fa-solid fa-file-lines";
         };
         readonly defaultStyle: {
             readonly name: "Rich Text";

package/dist/elements/basic/Text/Text.d.ts

@@ -3,8 +3,13 @@ export type TextProps = {
     ref?: RefObject<HTMLElement>;
     className?: string;
     content?: string | number;
+    /**
+     * What a pointer resting on it shows — the whole of a text cut short, what an abbreviation stands for. A screen reader
+     * may not say it, so nothing only it says should matter.
+     */
+    title?: string;
 };
-declare const Text: ({ ref, content, className }: TextProps) => import('react').JSX.Element;
+declare const Text: ({ ref, content, className, title }: TextProps) => import('react').JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<TextProps>): import('react').JSX.Element;
     displayName: string;

package/dist/elements/basic/Text/Text.mjs

@@ -7,15 +7,16 @@ import { jsx as s, jsxs as c } from "react/jsx-runtime";
 import l from "clsx";
 import u from "@plitzi/plitzi-ui/ContentEditable";
 //#region src/elements/basic/Text/Text.tsx
-var d = ({ ref: e, content: d = "Text", className: f = "" }) => {
-	let { id: p } = t(), { settings: { previewMode: m }, contexts: { BuilderContext: h } } = o(), g = h ? r(h) : void 0, _ = a(() => typeof d != "string" && typeof d != "number" ? JSON.stringify(d) : !d && d !== "" && !m ? "Text" : typeof d == "number" ? `${d}` : d, [d, m]), v = i((e) => g?.updateElement(p, "content", e), [g, p]);
+var d = ({ ref: e, content: d = "Text", className: f = "", title: p = "" }) => {
+	let { id: m } = t(), { settings: { previewMode: h }, contexts: { BuilderContext: g } } = o(), _ = g ? r(g) : void 0, v = a(() => typeof d != "string" && typeof d != "number" ? JSON.stringify(d) : !d && d !== "" && !h ? "Text" : typeof d == "number" ? `${d}` : d, [d, h]), y = i((e) => _?.updateElement(m, "content", e), [_, m]);
 	return /* @__PURE__ */ c(n, {
 		ref: e,
 		className: l("plitzi-component__text", f),
-		children: [m && _, !m && /* @__PURE__ */ s(u, {
+		title: p || void 0,
+		children: [h && v, !h && /* @__PURE__ */ s(u, {
 			className: "focus-visible:outline-hidden",
-			value: _,
-			onChange: v,
+			value: v,
+			onChange: y,
 			openMode: "doubleClick"
 		})]
 	});

package/dist/elements/basic/Text/declaration.d.ts

@@ -54,6 +54,7 @@ declare const declaration: {
         readonly settings: {};
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    title?: string | undefined;
     content?: string | number | undefined;
 }>>;
 export default declaration;

package/dist/elements/basic/Text/index.d.ts

@@ -53,6 +53,7 @@ declare const Text: {
         readonly settings: {};
     };
 } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    title?: string | undefined;
     content?: string | number | undefined;
 }>>;
 export default Text;