@plitzi/sdk-shared 0.36.1 → 0.37.0

package/dist/store/tracing/tracingCollector.d.ts

@@ -3,6 +3,8 @@ import { ProfilerOnRenderCallback } from 'react';
 declare const tracingCollector: {
     onRender: ProfilerOnRenderCallback;
     linkParent: (id: string, parentId: string | undefined, elementId: string) => void;
+    markMounted: (id: string) => void;
+    markUnmounted: (id: string) => void;
     recordProps: (id: string, changes: PropChange[]) => void;
     recordStoreChange: (change: {
         path: string | undefined;

package/dist/store/tracing/tracingCollector.mjs

@@ -2,33 +2,39 @@ import { previewValue as e } from "./preview.mjs";
 import t from "./tracingStore.mjs";
 import { createRecorder as n } from "@plitzi/nexus";
 //#region src/store/tracing/tracingCollector.ts
-var r = n({ max: 30 }), i = [], a = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map(), l = !0, u = 0, d = /* @__PURE__ */ new Map(), f = !1, p = !1, m = 0, h = !1, g = !1, _ = typeof requestAnimationFrame == "function" ? (e) => {
+var r = n({ max: 30 }), i = [], a = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map(), l = !0, u = /* @__PURE__ */ new Map(), d = /* @__PURE__ */ new Map(), f = 0, p = /* @__PURE__ */ new Map(), m = !1, h = !1, g = 0, _ = !1, v = !1, y = typeof requestAnimationFrame == "function" ? (e) => {
 	requestAnimationFrame(e);
 } : (e) => {
 	setTimeout(e, 16);
-}, v = () => {
+}, b = () => {
 	let e = {};
 	for (let [t, n] of c) e[t] = {
 		parentId: o.get(t),
 		baseDuration: n,
-		elementId: s.get(t) ?? t
+		elementId: s.get(t) ?? t,
+		mountedAt: u.get(t),
+		unmountedAt: d.get(t)
 	};
 	return e;
-}, y = () => {
-	l && (l = !1, t.setState("tree", v())), t.setState("hydrated", g), t.setState("commits", i);
-}, b = () => {
-	g || (g = !0, p && t.setState("hydrated", !0));
 }, x = () => {
-	if (h = !1, a.size > 0) {
+	l && (l = !1, t.setState("tree", b())), t.setState("hydrated", v), t.setState("commits", i);
+}, S = () => {
+	v || (v = !0, h && t.setState("hydrated", !0));
+}, C = (e) => {
+	o.delete(e), s.delete(e), c.delete(e), u.delete(e), d.delete(e), l = !0;
+}, w = (e) => {
+	for (let [t, n] of d) n <= e && C(t);
+}, T = () => {
+	if (_ = !1, a.size > 0) {
 		let e = [...a.values()].sort((e, t) => e.timestamp - t.timestamp);
-		a.clear(), i = [...i, ...e], i.length > 200 && (i = i.slice(i.length - 200));
+		a.clear(), i = [...i, ...e], i.length > 200 && (i = i.slice(i.length - 200)), w(i[0].commitId);
 	}
-	p && y();
-}, S = (e, t, n) => {
-	(!o.has(e) || o.get(e) !== t) && (l = !0), o.size >= 2e4 && !o.has(e) && (o.clear(), s.clear(), c.clear(), l = !0), o.set(e, t), s.set(e, n);
-}, C = () => {
-	let t = r.entriesSince(u);
-	u = r.lastSeq();
+	h && x();
+}, E = (e, t, n) => {
+	(!o.has(e) || o.get(e) !== t) && (l = !0), o.size >= 2e4 && !o.has(e) && (o.clear(), s.clear(), c.clear(), u.clear(), d.clear(), l = !0), o.set(e, t), s.set(e, n);
+}, D = () => {
+	let t = r.entriesSince(f);
+	f = r.lastSeq();
 	let n = /* @__PURE__ */ new Map();
 	for (let e of t) {
 		if (e.path === void 0) continue;
@@ -42,46 +48,60 @@ var r = n({ max: 30 }), i = [], a = /* @__PURE__ */ new Map(), o = /* @__PURE__
 		path: t,
 		preview: `${e(n.prev)} → ${e(n.next)}`
 	}));
-}, w = {
-	onRender: (e, n, r, i, u, p) => {
-		f || (f = !0, t.setState("enabled", !0)), c.has(e) || (l = !0), c.set(e, i);
-		let g = d.get(e);
-		d.delete(e);
-		let v = {
+}, O = {
+	onRender: (e, n, r, i, d, f) => {
+		m || (m = !0, t.setState("enabled", !0));
+		let h = !c.has(e);
+		c.set(e, i);
+		let v = p.get(e);
+		p.delete(e);
+		let b = {
 			id: e,
 			elementId: s.get(e) ?? e,
 			parentId: o.get(e),
 			phase: n,
 			actualDuration: r,
 			baseDuration: i,
-			changedProps: g
-		}, y = a.get(p);
-		y ? (y.elements.push(v), y.elementCount += 1, y.duration = Math.max(y.duration, r)) : (m += 1, a.set(p, {
-			commitId: m,
-			timestamp: p,
+			changedProps: v
+		}, x = a.get(f);
+		x ? (x.elements.push(b), x.elementCount += 1, x.duration = Math.max(x.duration, r)) : (g += 1, a.set(f, {
+			commitId: g,
+			timestamp: f,
 			duration: r,
 			elementCount: 1,
-			elements: [v],
-			causes: C()
-		})), h || (h = !0, _(x));
+			elements: [b],
+			causes: D()
+		})), h && (u.set(e, a.get(f)?.commitId ?? g), l = !0), _ || (_ = !0, y(T));
+	},
+	linkParent: E,
+	markMounted: (e) => {
+		d.delete(e) && (l = !0);
+	},
+	markUnmounted: (e) => {
+		if (!c.has(e)) {
+			C(e);
+			return;
+		}
+		d.set(e, g), l = !0, _ || (_ = !0, y(T));
 	},
-	linkParent: S,
 	recordProps: (e, t) => {
-		d.set(e, t);
+		p.set(e, t);
 	},
 	recordStoreChange: (e) => {
 		r.record(e);
 	},
-	setHydrated: b,
+	setHydrated: S,
 	start: () => {
-		p = !0, x(), y();
+		h = !0, T(), x();
 	},
 	stop: () => {
-		p = !1;
+		h = !1;
 	},
 	clear: () => {
-		i = [], a.clear(), u = r.lastSeq(), d.clear(), m = 0, l = !0, y();
+		i = [], a.clear(), f = r.lastSeq(), p.clear(), g = 0;
+		for (let e of [...d.keys()]) C(e);
+		u.clear(), l = !0, x();
 	}
 };
 //#endregion
-export { w as default };
+export { O as default };

package/dist/style/index.d.ts

@@ -4,4 +4,5 @@ export * from './fontValidation';
 export * from './fonts';
 export * from './fontsFromCss';
 export * from './styleConstants';
+export * from './styleStates';
 export { styleConstants };

package/dist/style/index.mjs

@@ -3,4 +3,5 @@ import { fontLinkAssets as a } from "./fontAssets.mjs";
 import { SYSTEM_FONTS as o, availableFonts as s, familiesInCss as c, fontFamilyStack as l, fontUrlResolver as u, fontsToHead as d, googleCss2Url as f, googleTextSubsetUrl as p, isSafeFontUrl as m, primaryFamily as h } from "./fonts.mjs";
 import { FontValidationError as g, parseSpaceFont as _ } from "./fontValidation.mjs";
 import { fallbackForFamily as v, fontsFromCss as y } from "./fontsFromCss.mjs";
-export { t as EMPTY_STYLE_SCHEMA, g as FontValidationError, o as SYSTEM_FONTS, n as StyleBindingsAllowed, s as availableFonts, r as baseDefaultValue, v as fallbackForFamily, c as familiesInCss, l as fontFamilyStack, a as fontLinkAssets, u as fontUrlResolver, y as fontsFromCss, d as fontsToHead, f as googleCss2Url, p as googleTextSubsetUrl, i as inheritableAttributesBase, m as isSafeFontUrl, _ as parseSpaceFont, h as primaryFamily, e as styleConstants };
+import { STYLE_STATES as b, STYLE_STATE_LABELS as x, inCascadeOrder as S, isKnownState as C } from "./styleStates.mjs";
+export { t as EMPTY_STYLE_SCHEMA, g as FontValidationError, b as STYLE_STATES, x as STYLE_STATE_LABELS, o as SYSTEM_FONTS, n as StyleBindingsAllowed, s as availableFonts, r as baseDefaultValue, v as fallbackForFamily, c as familiesInCss, l as fontFamilyStack, a as fontLinkAssets, u as fontUrlResolver, y as fontsFromCss, d as fontsToHead, f as googleCss2Url, p as googleTextSubsetUrl, S as inCascadeOrder, i as inheritableAttributesBase, C as isKnownState, m as isSafeFontUrl, _ as parseSpaceFont, h as primaryFamily, e as styleConstants };

package/dist/style/styleConstants.d.ts

@@ -78,6 +78,8 @@ declare const styleConstants: {
     readonly ANIMATION_DIRECTION: "animation-direction";
     readonly ANIMATION_FILL_MODE: "animation-fill-mode";
     readonly ANIMATION_PLAY_STATE: "animation-play-state";
+    readonly ANIMATION_TIMELINE: "animation-timeline";
+    readonly ANIMATION_RANGE: "animation-range";
     readonly BOX_SHADOW: "box-shadow";
     readonly FILTER: "filter";
     readonly BACKDROP_FILTER: "backdrop-filter";
@@ -121,6 +123,8 @@ declare const styleConstants: {
     readonly OVERFLOW: "overflow";
     readonly OVERFLOW_X: "overflow-x";
     readonly OVERFLOW_Y: "overflow-y";
+    readonly SCROLLBAR_WIDTH: "scrollbar-width";
+    readonly SCROLLBAR_COLOR: "scrollbar-color";
     readonly OBJECT_FIT: "object-fit";
     readonly OBJECT_POSITION: "object-position";
     readonly COLUMN_WIDTH: "column-width";
@@ -141,6 +145,8 @@ declare const styleConstants: {
     readonly TEXT_ALIGN: "text-align";
     readonly FONT_STYLE: "font-style";
     readonly FONT_VARIANT: "font-variant";
+    readonly FONT_VARIANT_NUMERIC: "font-variant-numeric";
+    readonly FONT_FEATURE_SETTINGS: "font-feature-settings";
     readonly TEXT_DECORATION: "text-decoration";
     readonly TEXT_DECORATION_LINE: "text-decoration-line";
     readonly TEXT_DECORATION_COLOR: "text-decoration-color";
@@ -163,14 +169,15 @@ declare const styleConstants: {
     readonly LINE_CLAMP: "line-clamp";
     readonly WEBKIT_LINE_CLAMP: "-webkit-line-clamp";
     readonly WEBKIT_BOX_ORIENT: "-webkit-box-orient";
+    readonly WEBKIT_TEXT_FILL_COLOR: "-webkit-text-fill-color";
     readonly FILL: "fill";
     readonly STROKE: "stroke";
     readonly STROKE_WIDTH: "stroke-width";
 };
 export declare const inheritableAttributesBase: StyleCategory[];
 export declare const StyleBindingsAllowed: {
-    path: "filter" | "fill" | "color" | "cursor" | "display" | "flex-wrap" | "flex-direction" | "align-items" | "justify-items" | "justify-content" | "align-content" | "row-gap" | "column-gap" | "grid-row-gap" | "grid-column-gap" | "grid-template-areas" | "grid-template-columns" | "grid-template-rows" | "grid-auto-flow" | "grid-auto-rows" | "grid-auto-columns" | "grid-row-start" | "grid-column-start" | "grid-row-end" | "grid-column-end" | "align-self" | "justify-self" | "order" | "flex-grow" | "flex-shrink" | "flex-basis" | "list-style" | "list-style-type" | "list-style-position" | "list-style-image" | "background-color" | "background-image" | "background-position" | "background-size" | "background-repeat" | "background-origin" | "background-clip" | "background-attachment" | "background-blend-mode" | "mask-image" | "border-top-style" | "border-top-width" | "border-top-color" | "border-bottom-style" | "border-bottom-width" | "border-bottom-color" | "border-left-style" | "border-left-width" | "border-left-color" | "border-right-style" | "border-right-width" | "border-right-color" | "border-top-left-radius" | "border-top-right-radius" | "border-bottom-left-radius" | "border-bottom-right-radius" | "border-collapse" | "border-spacing" | "table-layout" | "opacity" | "visibility" | "transition" | "transition-property" | "transition-duration" | "transition-timing-function" | "transition-delay" | "animation" | "animation-name" | "animation-duration" | "animation-timing-function" | "animation-delay" | "animation-iteration-count" | "animation-direction" | "animation-fill-mode" | "animation-play-state" | "box-shadow" | "backdrop-filter" | "mix-blend-mode" | "isolation" | "clip-path" | "transform" | "transform-origin" | "perspective" | "will-change" | "outline-width" | "outline-style" | "outline-color" | "outline-offset" | "pointer-events" | "user-select" | "touch-action" | "resize" | "appearance" | "scroll-behavior" | "overscroll-behavior" | "accent-color" | "caret-color" | "color-scheme" | "position" | "float" | "clear" | "z-index" | "top" | "bottom" | "left" | "right" | "box-sizing" | "aspect-ratio" | "width" | "height" | "min-width" | "min-height" | "max-width" | "max-height" | "overflow" | "overflow-x" | "overflow-y" | "object-fit" | "object-position" | "column-width" | "column-count" | "margin-top" | "margin-bottom" | "margin-left" | "margin-right" | "padding-top" | "padding-bottom" | "padding-left" | "padding-right" | "font-family" | "font-weight" | "font-size" | "line-height" | "text-align" | "font-style" | "font-variant" | "text-decoration" | "text-decoration-line" | "text-decoration-color" | "text-decoration-style" | "text-decoration-thickness" | "text-underline-offset" | "letter-spacing" | "word-spacing" | "text-indent" | "text-transform" | "direction" | "white-space" | "text-wrap" | "word-break" | "overflow-wrap" | "hyphens" | "vertical-align" | "text-overflow" | "text-shadow" | "line-clamp" | "-webkit-line-clamp" | "-webkit-box-orient" | "stroke" | "stroke-width";
-    label: "filter" | "fill" | "color" | "cursor" | "display" | "flex-wrap" | "flex-direction" | "align-items" | "justify-items" | "justify-content" | "align-content" | "row-gap" | "column-gap" | "grid-row-gap" | "grid-column-gap" | "grid-template-areas" | "grid-template-columns" | "grid-template-rows" | "grid-auto-flow" | "grid-auto-rows" | "grid-auto-columns" | "grid-row-start" | "grid-column-start" | "grid-row-end" | "grid-column-end" | "align-self" | "justify-self" | "order" | "flex-grow" | "flex-shrink" | "flex-basis" | "list-style" | "list-style-type" | "list-style-position" | "list-style-image" | "background-color" | "background-image" | "background-position" | "background-size" | "background-repeat" | "background-origin" | "background-clip" | "background-attachment" | "background-blend-mode" | "mask-image" | "border-top-style" | "border-top-width" | "border-top-color" | "border-bottom-style" | "border-bottom-width" | "border-bottom-color" | "border-left-style" | "border-left-width" | "border-left-color" | "border-right-style" | "border-right-width" | "border-right-color" | "border-top-left-radius" | "border-top-right-radius" | "border-bottom-left-radius" | "border-bottom-right-radius" | "border-collapse" | "border-spacing" | "table-layout" | "opacity" | "visibility" | "transition" | "transition-property" | "transition-duration" | "transition-timing-function" | "transition-delay" | "animation" | "animation-name" | "animation-duration" | "animation-timing-function" | "animation-delay" | "animation-iteration-count" | "animation-direction" | "animation-fill-mode" | "animation-play-state" | "box-shadow" | "backdrop-filter" | "mix-blend-mode" | "isolation" | "clip-path" | "transform" | "transform-origin" | "perspective" | "will-change" | "outline-width" | "outline-style" | "outline-color" | "outline-offset" | "pointer-events" | "user-select" | "touch-action" | "resize" | "appearance" | "scroll-behavior" | "overscroll-behavior" | "accent-color" | "caret-color" | "color-scheme" | "position" | "float" | "clear" | "z-index" | "top" | "bottom" | "left" | "right" | "box-sizing" | "aspect-ratio" | "width" | "height" | "min-width" | "min-height" | "max-width" | "max-height" | "overflow" | "overflow-x" | "overflow-y" | "object-fit" | "object-position" | "column-width" | "column-count" | "margin-top" | "margin-bottom" | "margin-left" | "margin-right" | "padding-top" | "padding-bottom" | "padding-left" | "padding-right" | "font-family" | "font-weight" | "font-size" | "line-height" | "text-align" | "font-style" | "font-variant" | "text-decoration" | "text-decoration-line" | "text-decoration-color" | "text-decoration-style" | "text-decoration-thickness" | "text-underline-offset" | "letter-spacing" | "word-spacing" | "text-indent" | "text-transform" | "direction" | "white-space" | "text-wrap" | "word-break" | "overflow-wrap" | "hyphens" | "vertical-align" | "text-overflow" | "text-shadow" | "line-clamp" | "-webkit-line-clamp" | "-webkit-box-orient" | "stroke" | "stroke-width";
+    path: "filter" | "fill" | "color" | "cursor" | "display" | "flex-wrap" | "flex-direction" | "align-items" | "justify-items" | "justify-content" | "align-content" | "row-gap" | "column-gap" | "grid-row-gap" | "grid-column-gap" | "grid-template-areas" | "grid-template-columns" | "grid-template-rows" | "grid-auto-flow" | "grid-auto-rows" | "grid-auto-columns" | "grid-row-start" | "grid-column-start" | "grid-row-end" | "grid-column-end" | "align-self" | "justify-self" | "order" | "flex-grow" | "flex-shrink" | "flex-basis" | "list-style" | "list-style-type" | "list-style-position" | "list-style-image" | "background-color" | "background-image" | "background-position" | "background-size" | "background-repeat" | "background-origin" | "background-clip" | "background-attachment" | "background-blend-mode" | "mask-image" | "border-top-style" | "border-top-width" | "border-top-color" | "border-bottom-style" | "border-bottom-width" | "border-bottom-color" | "border-left-style" | "border-left-width" | "border-left-color" | "border-right-style" | "border-right-width" | "border-right-color" | "border-top-left-radius" | "border-top-right-radius" | "border-bottom-left-radius" | "border-bottom-right-radius" | "border-collapse" | "border-spacing" | "table-layout" | "opacity" | "visibility" | "transition" | "transition-property" | "transition-duration" | "transition-timing-function" | "transition-delay" | "animation" | "animation-name" | "animation-duration" | "animation-timing-function" | "animation-delay" | "animation-iteration-count" | "animation-direction" | "animation-fill-mode" | "animation-play-state" | "animation-timeline" | "animation-range" | "box-shadow" | "backdrop-filter" | "mix-blend-mode" | "isolation" | "clip-path" | "transform" | "transform-origin" | "perspective" | "will-change" | "outline-width" | "outline-style" | "outline-color" | "outline-offset" | "pointer-events" | "user-select" | "touch-action" | "resize" | "appearance" | "scroll-behavior" | "overscroll-behavior" | "accent-color" | "caret-color" | "color-scheme" | "position" | "float" | "clear" | "z-index" | "top" | "bottom" | "left" | "right" | "box-sizing" | "aspect-ratio" | "width" | "height" | "min-width" | "min-height" | "max-width" | "max-height" | "overflow" | "overflow-x" | "overflow-y" | "scrollbar-width" | "scrollbar-color" | "object-fit" | "object-position" | "column-width" | "column-count" | "margin-top" | "margin-bottom" | "margin-left" | "margin-right" | "padding-top" | "padding-bottom" | "padding-left" | "padding-right" | "font-family" | "font-weight" | "font-size" | "line-height" | "text-align" | "font-style" | "font-variant" | "font-variant-numeric" | "font-feature-settings" | "text-decoration" | "text-decoration-line" | "text-decoration-color" | "text-decoration-style" | "text-decoration-thickness" | "text-underline-offset" | "letter-spacing" | "word-spacing" | "text-indent" | "text-transform" | "direction" | "white-space" | "text-wrap" | "word-break" | "overflow-wrap" | "hyphens" | "vertical-align" | "text-overflow" | "text-shadow" | "line-clamp" | "-webkit-line-clamp" | "-webkit-box-orient" | "-webkit-text-fill-color" | "stroke" | "stroke-width";
+    label: "filter" | "fill" | "color" | "cursor" | "display" | "flex-wrap" | "flex-direction" | "align-items" | "justify-items" | "justify-content" | "align-content" | "row-gap" | "column-gap" | "grid-row-gap" | "grid-column-gap" | "grid-template-areas" | "grid-template-columns" | "grid-template-rows" | "grid-auto-flow" | "grid-auto-rows" | "grid-auto-columns" | "grid-row-start" | "grid-column-start" | "grid-row-end" | "grid-column-end" | "align-self" | "justify-self" | "order" | "flex-grow" | "flex-shrink" | "flex-basis" | "list-style" | "list-style-type" | "list-style-position" | "list-style-image" | "background-color" | "background-image" | "background-position" | "background-size" | "background-repeat" | "background-origin" | "background-clip" | "background-attachment" | "background-blend-mode" | "mask-image" | "border-top-style" | "border-top-width" | "border-top-color" | "border-bottom-style" | "border-bottom-width" | "border-bottom-color" | "border-left-style" | "border-left-width" | "border-left-color" | "border-right-style" | "border-right-width" | "border-right-color" | "border-top-left-radius" | "border-top-right-radius" | "border-bottom-left-radius" | "border-bottom-right-radius" | "border-collapse" | "border-spacing" | "table-layout" | "opacity" | "visibility" | "transition" | "transition-property" | "transition-duration" | "transition-timing-function" | "transition-delay" | "animation" | "animation-name" | "animation-duration" | "animation-timing-function" | "animation-delay" | "animation-iteration-count" | "animation-direction" | "animation-fill-mode" | "animation-play-state" | "animation-timeline" | "animation-range" | "box-shadow" | "backdrop-filter" | "mix-blend-mode" | "isolation" | "clip-path" | "transform" | "transform-origin" | "perspective" | "will-change" | "outline-width" | "outline-style" | "outline-color" | "outline-offset" | "pointer-events" | "user-select" | "touch-action" | "resize" | "appearance" | "scroll-behavior" | "overscroll-behavior" | "accent-color" | "caret-color" | "color-scheme" | "position" | "float" | "clear" | "z-index" | "top" | "bottom" | "left" | "right" | "box-sizing" | "aspect-ratio" | "width" | "height" | "min-width" | "min-height" | "max-width" | "max-height" | "overflow" | "overflow-x" | "overflow-y" | "scrollbar-width" | "scrollbar-color" | "object-fit" | "object-position" | "column-width" | "column-count" | "margin-top" | "margin-bottom" | "margin-left" | "margin-right" | "padding-top" | "padding-bottom" | "padding-left" | "padding-right" | "font-family" | "font-weight" | "font-size" | "line-height" | "text-align" | "font-style" | "font-variant" | "font-variant-numeric" | "font-feature-settings" | "text-decoration" | "text-decoration-line" | "text-decoration-color" | "text-decoration-style" | "text-decoration-thickness" | "text-underline-offset" | "letter-spacing" | "word-spacing" | "text-indent" | "text-transform" | "direction" | "white-space" | "text-wrap" | "word-break" | "overflow-wrap" | "hyphens" | "vertical-align" | "text-overflow" | "text-shadow" | "line-clamp" | "-webkit-line-clamp" | "-webkit-box-orient" | "-webkit-text-fill-color" | "stroke" | "stroke-width";
 }[];
 export declare const baseDefaultValue: Record<StyleCategory, StyleValue>;
 export default styleConstants;

package/dist/style/styleConstants.mjs

@@ -91,6 +91,8 @@ var e = {
 	ANIMATION_DIRECTION: "animation-direction",
 	ANIMATION_FILL_MODE: "animation-fill-mode",
 	ANIMATION_PLAY_STATE: "animation-play-state",
+	ANIMATION_TIMELINE: "animation-timeline",
+	ANIMATION_RANGE: "animation-range",
 	BOX_SHADOW: "box-shadow",
 	FILTER: "filter",
 	BACKDROP_FILTER: "backdrop-filter",
@@ -134,6 +136,8 @@ var e = {
 	OVERFLOW: "overflow",
 	OVERFLOW_X: "overflow-x",
 	OVERFLOW_Y: "overflow-y",
+	SCROLLBAR_WIDTH: "scrollbar-width",
+	SCROLLBAR_COLOR: "scrollbar-color",
 	OBJECT_FIT: "object-fit",
 	OBJECT_POSITION: "object-position",
 	COLUMN_WIDTH: "column-width",
@@ -154,6 +158,8 @@ var e = {
 	TEXT_ALIGN: "text-align",
 	FONT_STYLE: "font-style",
 	FONT_VARIANT: "font-variant",
+	FONT_VARIANT_NUMERIC: "font-variant-numeric",
+	FONT_FEATURE_SETTINGS: "font-feature-settings",
 	TEXT_DECORATION: "text-decoration",
 	TEXT_DECORATION_LINE: "text-decoration-line",
 	TEXT_DECORATION_COLOR: "text-decoration-color",
@@ -176,6 +182,7 @@ var e = {
 	LINE_CLAMP: "line-clamp",
 	WEBKIT_LINE_CLAMP: "-webkit-line-clamp",
 	WEBKIT_BOX_ORIENT: "-webkit-box-orient",
+	WEBKIT_TEXT_FILL_COLOR: "-webkit-text-fill-color",
 	FILL: "fill",
 	STROKE: "stroke",
 	STROKE_WIDTH: "stroke-width"
@@ -184,6 +191,8 @@ var e = {
 	t.FONT_SIZE,
 	t.FONT_STYLE,
 	t.FONT_VARIANT,
+	t.FONT_VARIANT_NUMERIC,
+	t.FONT_FEATURE_SETTINGS,
 	t.FONT_WEIGHT,
 	t.COLOR,
 	t.LINE_HEIGHT,
@@ -281,6 +290,8 @@ var e = {
 	[t.ANIMATION_DIRECTION]: "normal",
 	[t.ANIMATION_FILL_MODE]: "none",
 	[t.ANIMATION_PLAY_STATE]: "running",
+	[t.ANIMATION_TIMELINE]: "auto",
+	[t.ANIMATION_RANGE]: "normal",
 	[t.BOX_SHADOW]: "1px 1px 3px 1px black",
 	[t.FILTER]: "blur(5px)",
 	[t.BACKDROP_FILTER]: "blur(5px)",
@@ -324,6 +335,8 @@ var e = {
 	[t.OVERFLOW]: "visible",
 	[t.OVERFLOW_X]: "visible",
 	[t.OVERFLOW_Y]: "visible",
+	[t.SCROLLBAR_WIDTH]: "auto",
+	[t.SCROLLBAR_COLOR]: "auto",
 	[t.OBJECT_FIT]: "fill",
 	[t.OBJECT_POSITION]: "50% 50%",
 	[t.COLUMN_WIDTH]: "auto",
@@ -344,6 +357,8 @@ var e = {
 	[t.TEXT_ALIGN]: "left",
 	[t.FONT_STYLE]: "normal",
 	[t.FONT_VARIANT]: "normal",
+	[t.FONT_VARIANT_NUMERIC]: "normal",
+	[t.FONT_FEATURE_SETTINGS]: "normal",
 	[t.TEXT_DECORATION]: "none",
 	[t.TEXT_DECORATION_LINE]: "none",
 	[t.TEXT_DECORATION_COLOR]: "currentColor",
@@ -366,6 +381,7 @@ var e = {
 	[t.LINE_CLAMP]: "none",
 	[t.WEBKIT_LINE_CLAMP]: "none",
 	[t.WEBKIT_BOX_ORIENT]: "horizontal",
+	[t.WEBKIT_TEXT_FILL_COLOR]: "currentcolor",
 	[t.FILL]: "currentColor",
 	[t.STROKE]: "none",
 	[t.STROKE_WIDTH]: "1"

package/dist/style/styleStates.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The states a selector can react to — one list, read by the type, the style editor, the event schema and authoring.
+ *
+ * It used to be written out in each of those, and the copies drifted: the editor's `checked` and `visited` options had
+ * their label and value swapped, so choosing one stored a state nothing else recognised.
+ *
+ * `focus-visible` is the focus ring a keyboard user needs and a mouse user does not; `focus-within` dresses a
+ * container while anything inside it has focus — a field wrapper around its input.
+ */
+export declare const STYLE_STATES: readonly ["hover", "focus", "focus-visible", "focus-within", "active", "disabled", "checked", "visited"];
+export declare const STYLE_STATE_LABELS: Record<(typeof STYLE_STATES)[number], string>;
+export declare const isKnownState: (state: string) => state is (typeof STYLE_STATES)[number];
+/**
+ * A rule's states in the order they have to be written for the right one to win, whatever order they were added in.
+ * A state outside the list keeps its place after the known ones.
+ */
+export declare const inCascadeOrder: <T>(states: Record<string, T>) => [string, T][];

package/dist/style/styleStates.mjs

@@ -0,0 +1,31 @@
+//#region src/style/styleStates.ts
+var e = [
+	"hover",
+	"focus",
+	"focus-visible",
+	"focus-within",
+	"active",
+	"disabled",
+	"checked",
+	"visited"
+], t = {
+	hover: "Hover",
+	focus: "Focus",
+	"focus-visible": "Focus visible",
+	"focus-within": "Focus within",
+	active: "Active",
+	disabled: "Disabled",
+	checked: "Checked",
+	visited: "Visited"
+}, n = {
+	visited: 0,
+	checked: 1,
+	"focus-within": 2,
+	hover: 3,
+	focus: 4,
+	"focus-visible": 5,
+	active: 6,
+	disabled: 7
+}, r = (e) => Object.hasOwn(n, e), i = (t) => r(t) ? n[t] : e.length, a = (e) => Object.entries(e).sort(([e], [t]) => i(e) - i(t));
+//#endregion
+export { e as STYLE_STATES, t as STYLE_STATE_LABELS, a as inCascadeOrder, r as isKnownState };

package/dist/types/ElementTypes.d.ts

@@ -1,11 +1,14 @@
 import { Asset, PluginManifest, PluginSchema } from './PluginTypes';
 import { Element } from './SchemaTypes';
-import { ReactNode } from 'react';
 export type ElementLayoutType = 'layout' | 'segment' | 'element' | 'reference';
+/**
+ * Which shell an element is rendered inside, and which of its containers is the slot.
+ *
+ * Every element of the shell carries it, so it holds nothing that changes with the page: the body itself reaches the
+ * slot through `LayoutBody` in `@plitzi/sdk-elements`.
+ */
 export type ElementLayout = {
-    bodyChildren: ReactNode;
     containerId: string;
-    referenceId: string;
     rootId: string;
     type: ElementLayoutType;
 };

package/dist/types/SchemaTypes.d.ts

@@ -29,7 +29,11 @@ export type DropPosition = 'top' | 'bottom' | 'left' | 'right' | 'inside' | 'cus
 export type BindingCategory = 'attributes' | 'style' | 'initialState';
 export type BindingTransformer = {
     action: string;
-    params: Record<string, string>;
+    /**
+     * Mostly text, and not only: a param the builder draws as a checkbox (`styleVariant`'s `append`) is stored as the
+     * boolean it is, and the transformer reads it as one — `if (!append)`. Writing `"false"` there would read as true.
+     */
+    params: Record<string, string | number | boolean>;
     enabled?: boolean;
 };
 export type ElementBinding = {

package/dist/types/StoreTypes.d.ts

@@ -202,6 +202,8 @@ export type BuilderState = CommonState & {
     styleSelector?: string;
     styleVariant?: string;
     styleState?: StyleState;
+    /** The ancestor class being edited under: `styleState`/`styleVariant` are then its, and neither means always. */
+    styleAncestor?: string;
     elementHovered?: string;
     elementSelected?: string;
     setHovered: (elementId?: string) => void;
@@ -250,6 +252,10 @@ export type TracingTreeNode = {
     baseDuration: number;
     /** Which element this instance is — see `CommitElementRender.id`. */
     elementId: string;
+    /** The first commit it rendered in; absent means it was already there when the timeline started. */
+    mountedAt?: number;
+    /** The commit that removed it, which it is no longer part of; absent while it is on the page. */
+    unmountedAt?: number;
 };
 export type TracingTree = Record<string, TracingTreeNode>;
 /**

package/dist/types/StyleTypes.d.ts

@@ -1,9 +1,10 @@
 import { ColorScheme, Theme } from './ThemeTypes';
 import { default as styleConstants } from '../style/styleConstants';
+import { STYLE_STATES } from '../style/styleStates';
 export type TagType = 'class' | 'element' | 'id';
 export type DisplayMode = 'desktop' | 'tablet' | 'mobile';
 export type StyleMode = 'mobile-first' | 'desktop-first';
-export type StyleState = 'hover' | 'active' | 'focus' | 'disabled' | 'checked' | 'visited';
+export type StyleState = (typeof STYLE_STATES)[number];
 export type StyleValue = number | string;
 export type StyleCategory = (typeof styleConstants)[keyof typeof styleConstants];
 export declare enum StyleVariableCategory {
@@ -18,11 +19,25 @@ export type StyleVariableGroup = Record<string, StyleVariableValue>;
 export type StyleVariables = Record<StyleVariableCategory, StyleVariableGroup>;
 export type StyleObject = Partial<Record<StyleCategory, StyleValue>>;
 export type StyleStates = Partial<Record<StyleState, StyleObject>>;
-export type StyleVariants = Record<string, Omit<StyleBlock, 'variants'>>;
+export type StyleVariants = Record<string, Omit<StyleBlock, 'variants' | 'ancestors'>>;
+export type StyleAncestor = {
+    default?: StyleObject;
+    states?: StyleStates;
+    variants?: StyleVariants;
+};
+export type StyleAncestors = Record<string, StyleAncestor>;
 export type StyleBlock = {
     default?: StyleObject;
     states?: StyleStates;
     variants?: StyleVariants;
+    ancestors?: StyleAncestors;
+};
+export type StyleTarget = {
+    componentType?: string;
+    styleSelector?: string;
+    styleState?: StyleState;
+    styleVariant?: string;
+    styleAncestor?: string;
 };
 export type StyleAttributes = Record<string, StyleBlock>;
 export type StyleItem = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plitzi/sdk-shared",
-  "version": "0.36.1",
+  "version": "0.37.0",
   "license": "AGPL-3.0",
   "files": [
     "dist",
@@ -444,6 +444,10 @@
       "types": "./dist/hooks/usePlitziServiceContext.d.ts",
       "import": "./dist/hooks/usePlitziServiceContext.mjs"
     },
+    "./hooks/useStableValue": {
+      "types": "./dist/hooks/useStableValue.d.ts",
+      "import": "./dist/hooks/useStableValue.mjs"
+    },
     "./index": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs"
@@ -984,6 +988,10 @@
       "types": "./dist/schema/index.d.ts",
       "import": "./dist/schema/index.mjs"
     },
+    "./schema/layoutChain": {
+      "types": "./dist/schema/layoutChain.d.ts",
+      "import": "./dist/schema/layoutChain.mjs"
+    },
     "./schema/schemaConstants": {
       "types": "./dist/schema/schemaConstants.d.ts",
       "import": "./dist/schema/schemaConstants.mjs"
@@ -1128,6 +1136,10 @@
       "types": "./dist/style/styleConstants.d.ts",
       "import": "./dist/style/styleConstants.mjs"
     },
+    "./style/styleStates": {
+      "types": "./dist/style/styleStates.d.ts",
+      "import": "./dist/style/styleStates.mjs"
+    },
     "./theme": {
       "types": "./dist/theme/index.d.ts",
       "import": "./dist/theme/index.mjs"
@@ -1272,13 +1284,13 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.30.0",
-    "@plitzi/nexus": "^1.2.0",
+    "@plitzi/nexus": "^1.2.2",
     "@plitzi/plitzi-ui": "^1.6.21",
     "date-fns": "^4.4.0",
     "date-fns-tz": "^3.2.0",
     "graphql-tag": "^2.12.7",
     "immer": "^11.1.18",
-    "zod": "^4.6.4"
+    "zod": "^4.6.5"
   },
   "peerDependencies": {
     "react": "^19",
@@ -1293,34 +1305,34 @@
     "@babel/preset-env": "^8.0.5",
     "@eslint/js": "^10.0.1",
     "@tailwindcss/forms": "^0.5.11",
-    "@testing-library/dom": "^10.4.1",
+    "@testing-library/dom": "^10.4.2",
     "@testing-library/react": "^16.3.3",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.6.7",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^6.1.1",
-    "@vitest/coverage-v8": "^5.0.0",
+    "@vitest/coverage-v8": "^5.0.1",
     "babel-minify": "^0.5.2",
     "eslint": "^9.39.5",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-config-turbo": "^2.10.12",
+    "eslint-config-turbo": "^2.10.13",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-cypress": "^7.0.2",
     "eslint-plugin-flowtype": "8.0.3",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsdoc": "^64.3.10",
+    "eslint-plugin-jsdoc": "^64.5.2",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.5.6",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-refresh": "^0.5.6",
+    "eslint-plugin-react-refresh": "^0.5.7",
     "eslint-plugin-storybook": "^10.6.0",
     "globals": "^17.12.0",
-    "jsdom": "^30.0.1",
+    "jsdom": "^30.1.0",
     "postcss": "^8.5.28",
-    "prettier": "^3.9.6",
+    "prettier": "^3.9.8",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "tailwindcss": "^4.3.3",
@@ -1330,7 +1342,7 @@
     "vite": "^8.3.0",
     "vite-plugin-dts": "^5.1.0",
     "vite-plugin-react": "^4.0.1",
-    "vitest": "^5.0.0",
+    "vitest": "^5.0.1",
     "vitest-fetch-mock": "^0.4.5"
   }
 }